From a5e2d0903d09826a5a28d91303e41b3a54ac313a Mon Sep 17 00:00:00 2001
From: Maximilian Oertel <maximilian@beyond-consulting.xyz>
Date: Tue, 29 Oct 2024 16:12:31 +0000
Subject: [PATCH 1/5] Migrate to local primevue imports

---
 src/App.vue                                   |   1 +
 src/components/CardAdministration.vue         |   7 +
 src/components/ConsentModal.vue               |   2 +
 src/components/ConsentPicker.vue              |  10 +-
 src/components/CreateAdministration.vue       |   7 +
 src/components/CreateAdministrator.vue        |   5 +-
 src/components/CreateOrgs.vue                 |   7 +
 src/components/EditOrgsForm.vue               |   2 +
 src/components/EditUsersForm.vue              |   5 +
 src/components/EditVariantDialog.vue          |   9 ++
 src/components/GameTabs.vue                   |   9 +-
 src/components/LEVANTE/RegisterUsersInfo.vue  |   4 +
 src/components/LanguageSelector.vue           |   1 +
 src/components/ListOrgs.vue                   |  15 ++-
 src/components/ListUsers.vue                  |   3 +
 src/components/NavBar.vue                     |   5 +-
 src/components/OrgPicker.vue                  |   8 ++
 src/components/ParticipantSidebar.vue         |   1 +
 src/components/RoarDataTable.vue              |  16 ++-
 src/components/RoarGameCard.vue               |   5 +
 src/components/SkeletonTable.vue              |   3 +
 src/components/TaskPicker.vue                 |   8 +-
 src/components/VariantCard.vue                |   6 +
 src/components/auth/AuthEmailLink.vue         |   7 +-
 src/components/auth/RegisterParent.vue        |   8 +-
 src/components/auth/RegisterStudent.vue       |  11 ++
 src/components/auth/RegisterUser.vue          |   7 +
 src/components/auth/RequestPermission.vue     |   2 +
 src/components/auth/SignIn.vue                |   5 +
 src/components/modals/EditUsers.vue           |   7 +
 src/components/modals/RoarModal.vue           |   6 +-
 .../reports/DistributionChartFacet.vue        |   1 +
 .../reports/DistributionChartSupport.vue      |   1 +
 .../reports/IndividualScoreReportTask.vue     |   4 +
 src/components/reports/SubscoreTable.vue      |   1 +
 src/components/reports/TableRoarScores.vue    |   5 +
 src/components/reports/TableScoreTag.vue      |   1 +
 src/components/reports/tasks/TaskReport.vue   |  13 +-
 src/components/slots/FilterBar.vue            |   1 +
 src/components/tasks/ManageTasks.vue          |   7 +
 src/components/tasks/ManageVariants.vue       |   7 +
 src/components/views/LinkAccountsView.vue     |   2 +
 src/components/views/PasswordView.vue         |   2 +
 src/components/views/UserInfoView.vue         |   1 +
 src/containers/SessionTimer/SessionTimer.vue  |   1 +
 src/pages/EnableCookies.vue                   |   7 +-
 src/pages/HomeAdministrator.vue               |   7 +
 src/pages/HomeParticipant.vue                 |   5 +-
 src/pages/LEVANTE/RegisterUsers.vue           |   5 +
 src/pages/LEVANTE/UserSurvey.vue              |   1 +
 src/pages/MaintenancePage.vue                 |   3 +
 src/pages/ManageTasksVariants.vue             |   2 +
 src/pages/NotFound.vue                        |   6 +-
 src/pages/ProgressReport.vue                  |   4 +
 src/pages/RegisterFamilyUsers.vue             |   9 +-
 src/pages/RegisterStudents.vue                |  15 ++-
 src/pages/RegisterUser.vue                    |   1 +
 src/pages/ScoreReport.vue                     |  15 ++-
 src/pages/SignIn.vue                          |  10 +-
 src/pages/StudentReport.vue                   |   3 +
 src/setup.js                                  | 125 +-----------------
 61 files changed, 290 insertions(+), 167 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 78d2ee980..5423ccfaa 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -28,6 +28,7 @@ import { computed, onBeforeMount, onMounted, ref, defineAsyncComponent } from 'v
 import { useRoute } from 'vue-router';
 import { useRecaptchaProvider } from 'vue-recaptcha';
 import { Head } from '@unhead/vue/components';
+import PvToast from 'primevue/toast';
 import NavBar from '@/components/NavBar.vue';
 
 const SessionTimer = defineAsyncComponent(() => import('@/containers/SessionTimer/SessionTimer.vue'));
diff --git a/src/components/CardAdministration.vue b/src/components/CardAdministration.vue
index d467a8266..cdbc822cd 100644
--- a/src/components/CardAdministration.vue
+++ b/src/components/CardAdministration.vue
@@ -160,6 +160,13 @@ import _mapValues from 'lodash/mapValues';
 import _toPairs from 'lodash/toPairs';
 import _without from 'lodash/without';
 import _zip from 'lodash/zip';
+import PvButton from 'primevue/button';
+import PvColumn from 'primevue/column';
+import PvConfirmPopup from 'primevue/confirmpopup';
+import PvDataTable from 'primevue/datatable';
+import PvOverlayPanel from 'primevue/overlaypanel';
+import PvSpeedDial from 'primevue/speeddial';
+import PvTreeTable from 'primevue/treetable';
 import { batchGetDocs } from '@/helpers/query/utils';
 import { taskDisplayNames } from '@/helpers/reports';
 import { removeEmptyOrgs } from '@/helpers';
diff --git a/src/components/ConsentModal.vue b/src/components/ConsentModal.vue
index 406b675bd..1b43478e4 100644
--- a/src/components/ConsentModal.vue
+++ b/src/components/ConsentModal.vue
@@ -23,6 +23,8 @@ import { useI18n } from 'vue-i18n';
 import * as Sentry from '@sentry/vue';
 import { useConfirm } from 'primevue/useconfirm';
 import { useToast } from 'primevue/usetoast';
+import PvConfirmDialog from 'primevue/confirmdialog';
+import PvToast from 'primevue/toast';
 import { marked } from 'marked';
 import DOMPurify from 'dompurify';
 import _lowerCase from 'lodash/lowerCase';
diff --git a/src/components/ConsentPicker.vue b/src/components/ConsentPicker.vue
index 353f0e49d..84a47b467 100644
--- a/src/components/ConsentPicker.vue
+++ b/src/components/ConsentPicker.vue
@@ -274,9 +274,17 @@
 
 <script setup>
 import { ref, onMounted, watch, computed } from 'vue';
-import { useAuthStore } from '@/store/auth';
 import { marked } from 'marked';
 import _forEach from 'lodash/forEach';
+import PvButton from 'primevue/button';
+import PvCheckbox from 'primevue/checkbox';
+import PvDialog from 'primevue/dialog';
+import PvDropdown from 'primevue/dropdown';
+import PvInputText from 'primevue/inputtext';
+import PvPanel from 'primevue/panel';
+import PvRadioButton from 'primevue/radiobutton';
+import PvFieldset from 'primevue/fieldset';
+import { useAuthStore } from '@/store/auth';
 import useLegalDocsQuery from '@/composables/queries/useLegalDocsQuery';
 
 const props = defineProps({
diff --git a/src/components/CreateAdministration.vue b/src/components/CreateAdministration.vue
index e8e36f43b..f1bb8d5c7 100644
--- a/src/components/CreateAdministration.vue
+++ b/src/components/CreateAdministration.vue
@@ -176,6 +176,13 @@ import { useRouter } from 'vue-router';
 import { storeToRefs } from 'pinia';
 import { useToast } from 'primevue/usetoast';
 import { useConfirm } from 'primevue/useconfirm';
+import PvButton from 'primevue/button';
+import PvCalendar from 'primevue/calendar';
+import PvCheckbox from 'primevue/checkbox';
+import PvConfirmDialog from 'primevue/confirmdialog';
+import PvDivider from 'primevue/divider';
+import PvInputText from 'primevue/inputtext';
+import PvRadioButton from 'primevue/radiobutton';
 import _filter from 'lodash/filter';
 import _isEmpty from 'lodash/isEmpty';
 import _toPairs from 'lodash/toPairs';
diff --git a/src/components/CreateAdministrator.vue b/src/components/CreateAdministrator.vue
index a24280fc5..deb9277cf 100644
--- a/src/components/CreateAdministrator.vue
+++ b/src/components/CreateAdministrator.vue
@@ -89,7 +89,10 @@ import { ref, onMounted } from 'vue';
 import { useRouter } from 'vue-router';
 import { storeToRefs } from 'pinia';
 import { useToast } from 'primevue/usetoast';
-
+import PvButton from 'primevue/button';
+import PvCheckbox from 'primevue/checkbox';
+import PvDivider from 'primevue/divider';
+import PvInputText from 'primevue/inputtext';
 import _cloneDeep from 'lodash/cloneDeep';
 import _union from 'lodash/union';
 import { useAuthStore } from '@/store/auth';
diff --git a/src/components/CreateOrgs.vue b/src/components/CreateOrgs.vue
index b3b6720b6..cba9dbb9c 100644
--- a/src/components/CreateOrgs.vue
+++ b/src/components/CreateOrgs.vue
@@ -208,6 +208,13 @@ import _union from 'lodash/union';
 import _without from 'lodash/without';
 import { useVuelidate } from '@vuelidate/core';
 import { required, requiredIf } from '@vuelidate/validators';
+import PvAutoComplete from 'primevue/autocomplete';
+import PvButton from 'primevue/button';
+import PvCheckbox from 'primevue/checkbox';
+import PvChip from 'primevue/chip';
+import PvDivider from 'primevue/divider';
+import PvDropdown from 'primevue/dropdown';
+import PvInputText from 'primevue/inputtext';
 import { useAuthStore } from '@/store/auth';
 import useDistrictsListQuery from '@/composables/queries/useDistrictsListQuery';
 import useDistrictSchoolsQuery from '@/composables/queries/useDistrictSchoolsQuery';
diff --git a/src/components/EditOrgsForm.vue b/src/components/EditOrgsForm.vue
index 86888062a..0985ff492 100644
--- a/src/components/EditOrgsForm.vue
+++ b/src/components/EditOrgsForm.vue
@@ -56,6 +56,8 @@ import { storeToRefs } from 'pinia';
 import { fetchDocById } from '@/helpers/query/utils';
 import { useQuery } from '@tanstack/vue-query';
 import PvChips from 'primevue/chips';
+import PvCheckbox from 'primevue/checkbox';
+import PvInputText from 'primevue/inputtext';
 import _isEmpty from 'lodash/isEmpty';
 const props = defineProps({
   orgType: { type: String, required: true },
diff --git a/src/components/EditUsersForm.vue b/src/components/EditUsersForm.vue
index 4b5e85344..755f64cf7 100644
--- a/src/components/EditUsersForm.vue
+++ b/src/components/EditUsersForm.vue
@@ -209,6 +209,11 @@ import { useAuthStore } from '@/store/auth';
 import { storeToRefs } from 'pinia';
 import _isEmpty from 'lodash/isEmpty';
 import _get from 'lodash/get';
+import PvAutoComplete from 'primevue/autocomplete';
+import PvCalendar from 'primevue/calendar';
+import PvCheckbox from 'primevue/checkbox';
+import PvDropdown from 'primevue/dropdown';
+import PvInputText from 'primevue/inputtext';
 import useUserClaimsQuery from '@/composables/queries/useUserClaimsQuery';
 
 const props = defineProps({
diff --git a/src/components/EditVariantDialog.vue b/src/components/EditVariantDialog.vue
index 10090b25a..bde038bc1 100644
--- a/src/components/EditVariantDialog.vue
+++ b/src/components/EditVariantDialog.vue
@@ -266,6 +266,15 @@
 <script setup>
 import { ref, onMounted, computed } from 'vue';
 import _isEmpty from 'lodash/isEmpty';
+import PvButton from 'primevue/button';
+import PvColumn from 'primevue/column';
+import PvDataTable from 'primevue/datatable';
+import PvDialog from 'primevue/dialog';
+import PvDivider from 'primevue/divider';
+import PvDropdown from 'primevue/dropdown';
+import PvInputSwitch from 'primevue/inputswitch';
+import PvInputText from 'primevue/inputtext';
+import PvTag from 'primevue/tag';
 
 const visible = ref(false);
 const props = defineProps({
diff --git a/src/components/GameTabs.vue b/src/components/GameTabs.vue
index c1d3f74f9..15b6df3dd 100644
--- a/src/components/GameTabs.vue
+++ b/src/components/GameTabs.vue
@@ -78,14 +78,17 @@
 </template>
 <script setup>
 import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { storeToRefs } from 'pinia';
 import _get from 'lodash/get';
 import _find from 'lodash/find';
 import _findIndex from 'lodash/findIndex';
+import { camelize, getAgeData } from '@bdelab/roar-utils';
+import PvTabPanel from 'primevue/tabpanel';
+import PvTabView from 'primevue/tabview';
+import PvTag from 'primevue/tag';
 import { useAuthStore } from '@/store/auth';
 import { useGameStore } from '@/store/game';
-import { storeToRefs } from 'pinia';
-import { useI18n } from 'vue-i18n';
-import { camelize, getAgeData } from '@bdelab/roar-utils';
 import VideoPlayer from '@/components/VideoPlayer.vue';
 
 const props = defineProps({
diff --git a/src/components/LEVANTE/RegisterUsersInfo.vue b/src/components/LEVANTE/RegisterUsersInfo.vue
index c74abcef1..85a5f75cf 100644
--- a/src/components/LEVANTE/RegisterUsersInfo.vue
+++ b/src/components/LEVANTE/RegisterUsersInfo.vue
@@ -35,6 +35,10 @@
   </PvPanel>
 </template>
 
+<script setup>
+import PvPanel from 'primevue/panel';
+</script>
+
 <style scoped>
 .info-message-container {
   display: flex;
diff --git a/src/components/LanguageSelector.vue b/src/components/LanguageSelector.vue
index bf54009b7..bc046983c 100644
--- a/src/components/LanguageSelector.vue
+++ b/src/components/LanguageSelector.vue
@@ -20,6 +20,7 @@
 
 <script setup>
 import { computed } from 'vue';
+import PvDropdown from 'primevue/dropdown';
 import { languageOptions } from '@/translations/i18n.js';
 
 // Convert the object to an array of [key, value] pairs
diff --git a/src/components/ListOrgs.vue b/src/components/ListOrgs.vue
index 0088d2232..81580e019 100644
--- a/src/components/ListOrgs.vue
+++ b/src/components/ListOrgs.vue
@@ -155,9 +155,14 @@ import { ref, computed, onMounted, watch } from 'vue';
 import * as Sentry from '@sentry/vue';
 import { storeToRefs } from 'pinia';
 import { useToast } from 'primevue/usetoast';
-import { TOAST_SEVERITIES, TOAST_DEFAULT_LIFE_DURATION } from '@/constants/toasts.js';
-import EditOrgsForm from './EditOrgsForm.vue';
-import RoarModal from './modals/RoarModal.vue';
+import PvButton from 'primevue/button';
+import PvDialog from 'primevue/dialog';
+import PvDropdown from 'primevue/dropdown';
+import PvInputGroup from 'primevue/inputgroup';
+import PvInputText from 'primevue/inputtext';
+import PvTabPanel from 'primevue/tabpanel';
+import PvTabView from 'primevue/tabview';
+import PvToast from 'primevue/toast';
 import _get from 'lodash/get';
 import _head from 'lodash/head';
 import _kebabCase from 'lodash/kebabCase';
@@ -170,7 +175,11 @@ import useUserClaimsQuery from '@/composables/queries/useUserClaimsQuery';
 import useDistrictsListQuery from '@/composables/queries/useDistrictsListQuery';
 import useDistrictSchoolsQuery from '@/composables/queries/useDistrictSchoolsQuery';
 import useOrgsTableQuery from '@/composables/queries/useOrgsTableQuery';
+import EditOrgsForm from './EditOrgsForm.vue';
+import RoarModal from './modals/RoarModal.vue';
 import { CSV_EXPORT_MAX_RECORD_COUNT } from '@/constants/csvExport';
+import { TOAST_SEVERITIES, TOAST_DEFAULT_LIFE_DURATION } from '@/constants/toasts.js';
+import RoarDataTable from '@/components/RoarDataTable.vue';
 
 const initialized = ref(false);
 const selectedDistrict = ref(undefined);
diff --git a/src/components/ListUsers.vue b/src/components/ListUsers.vue
index 3c1af74ea..50e35eb74 100644
--- a/src/components/ListUsers.vue
+++ b/src/components/ListUsers.vue
@@ -128,6 +128,8 @@ import { storeToRefs } from 'pinia';
 import { useVuelidate } from '@vuelidate/core';
 import { required, sameAs, minLength } from '@vuelidate/validators';
 import { useToast } from 'primevue/usetoast';
+import PvButton from 'primevue/button';
+import PvInputText from 'primevue/inputtext';
 import _isEmpty from 'lodash/isEmpty';
 import { useAuthStore } from '@/store/auth';
 import useOrgUsersQuery from '@/composables/queries/useOrgUsersQuery';
@@ -135,6 +137,7 @@ import { singularizeFirestoreCollection } from '@/helpers';
 import AppSpinner from './AppSpinner.vue';
 import EditUsersForm from './EditUsersForm.vue';
 import RoarModal from './modals/RoarModal.vue';
+import RoarDataTable from '@/components/RoarDataTable.vue';
 
 const authStore = useAuthStore();
 
diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index 1f2ed8961..1a10e8ded 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -73,13 +73,16 @@ import { useRouter } from 'vue-router';
 import { storeToRefs } from 'pinia';
 import _isEmpty from 'lodash/isEmpty';
 import _union from 'lodash/union';
+import PvButton from 'primevue/button';
+import PvImage from 'primevue/image';
+import PvMenubar from 'primevue/menubar';
 import { useAuthStore } from '@/store/auth';
 import { getSidebarActions } from '@/router/sidebarActions';
 import useUserClaimsQuery from '@/composables/queries/useUserClaimsQuery';
 import useSignOutMutation from '@/composables/mutations/useSignOutMutation';
-import LanguageSelector from './LanguageSelector.vue';
 import { APP_ROUTES } from '@/constants/routes';
 import ROARLogo from '@/assets/RoarLogo.vue';
+import LanguageSelector from '@/components/LanguageSelector.vue';
 
 const router = useRouter();
 const authStore = useAuthStore();
diff --git a/src/components/OrgPicker.vue b/src/components/OrgPicker.vue
index e49b76e7f..6fcc299d9 100644
--- a/src/components/OrgPicker.vue
+++ b/src/components/OrgPicker.vue
@@ -94,6 +94,14 @@ import { storeToRefs } from 'pinia';
 import _capitalize from 'lodash/capitalize';
 import _get from 'lodash/get';
 import _head from 'lodash/head';
+import PvCheckbox from 'primevue/checkbox';
+import PvChip from 'primevue/chip';
+import PvDropdown from 'primevue/dropdown';
+import PvListbox from 'primevue/listbox';
+import PvPanel from 'primevue/panel';
+import PvScrollPanel from 'primevue/scrollpanel';
+import PvTabPanel from 'primevue/tabpanel';
+import PvTabView from 'primevue/tabview';
 import { useAuthStore } from '@/store/auth';
 import { orgFetcher, orgFetchAll } from '@/helpers/query/orgs';
 import { orderByDefault } from '@/helpers/query/utils';
diff --git a/src/components/ParticipantSidebar.vue b/src/components/ParticipantSidebar.vue
index 6b5469780..c02792255 100644
--- a/src/components/ParticipantSidebar.vue
+++ b/src/components/ParticipantSidebar.vue
@@ -19,6 +19,7 @@
 </template>
 <script setup>
 import { ref, computed } from 'vue';
+import PvChart from 'primevue/chart';
 
 const props = defineProps({
   totalGames: { type: Number, required: true, default: 0 },
diff --git a/src/components/RoarDataTable.vue b/src/components/RoarDataTable.vue
index 88fa81265..4b92388b8 100644
--- a/src/components/RoarDataTable.vue
+++ b/src/components/RoarDataTable.vue
@@ -565,8 +565,21 @@
 <script setup>
 import { ref, computed } from 'vue';
 import { useToast } from 'primevue/usetoast';
+import PvButton from 'primevue/button';
+import PvCalendar from 'primevue/calendar';
+import PvChip from 'primevue/chip';
+import PvColumn from 'primevue/column';
+import PvColumnGroup from 'primevue/columngroup';
+import PvDataTable from 'primevue/datatable';
+import PvDropdown from 'primevue/dropdown';
+import PvInputNumber from 'primevue/inputnumber';
+import PvInputText from 'primevue/inputtext';
+import PvMultiSelect from 'primevue/multiselect';
+import PvOverlayPanel from 'primevue/overlaypanel';
+import PvTag from 'primevue/tag';
+import PvTriStateCheckbox from 'primevue/tristatecheckbox';
+import PvRow from 'primevue/row';
 import { FilterMatchMode, FilterOperator } from 'primevue/api';
-import SkeletonTable from '@/components/SkeletonTable.vue';
 import _get from 'lodash/get';
 import _map from 'lodash/map';
 import _forEach from 'lodash/forEach';
@@ -574,6 +587,7 @@ import _find from 'lodash/find';
 import _toUpper from 'lodash/toUpper';
 import _startCase from 'lodash/startCase';
 import { supportLevelColors, progressTags } from '@/helpers/reports';
+import SkeletonTable from '@/components/SkeletonTable.vue';
 import TableScoreTag from '@/components/reports/TableScoreTag.vue';
 
 /*
diff --git a/src/components/RoarGameCard.vue b/src/components/RoarGameCard.vue
index e48ce09b1..42d930942 100644
--- a/src/components/RoarGameCard.vue
+++ b/src/components/RoarGameCard.vue
@@ -31,6 +31,11 @@
 
 <script setup>
 import { ref } from 'vue';
+import PvButton from 'primevue/button';
+import PvCard from 'primevue/card';
+import PvInlineMessage from 'primevue/inlinemessage';
+import PvTag from 'primevue/tag';
+
 const props = defineProps({
   gameId: { type: String, required: true },
   title: { type: String, required: true },
diff --git a/src/components/SkeletonTable.vue b/src/components/SkeletonTable.vue
index b089da503..09846d70f 100644
--- a/src/components/SkeletonTable.vue
+++ b/src/components/SkeletonTable.vue
@@ -13,6 +13,9 @@
 
 <script setup>
 import { ref } from 'vue';
+import PvColumn from 'primevue/column';
+import PvDataTable from 'primevue/datatable';
+import PvSkeleton from 'primevue/skeleton';
 
 const skeletonData = ref([
   { col0: '', col1: '', col2: '', col3: '' },
diff --git a/src/components/TaskPicker.vue b/src/components/TaskPicker.vue
index 6f664b61f..7f915d99c 100644
--- a/src/components/TaskPicker.vue
+++ b/src/components/TaskPicker.vue
@@ -146,8 +146,14 @@ import _toLower from 'lodash/toLower';
 import _isEmpty from 'lodash/isEmpty';
 import _union from 'lodash/union';
 import { VueDraggableNext } from 'vue-draggable-next';
-import VariantCard from './VariantCard.vue';
 import { useToast } from 'primevue/usetoast';
+import PvButton from 'primevue/button';
+import PvDropdown from 'primevue/dropdown';
+import PvInputSwitch from 'primevue/inputswitch';
+import PvInputText from 'primevue/inputtext';
+import PvPanel from 'primevue/panel';
+import PvScrollPanel from 'primevue/scrollpanel';
+import VariantCard from './VariantCard.vue';
 
 const toast = useToast();
 
diff --git a/src/components/VariantCard.vue b/src/components/VariantCard.vue
index bd78eede5..fecbcc6df 100644
--- a/src/components/VariantCard.vue
+++ b/src/components/VariantCard.vue
@@ -256,6 +256,12 @@
 <script setup>
 import { ref } from 'vue';
 import _toPairs from 'lodash/toPairs';
+import PvButton from 'primevue/button';
+import PvColumn from 'primevue/column';
+import PvDataTable from 'primevue/datatable';
+import PvDialog from 'primevue/dialog';
+import PvOverlayPanel from 'primevue/overlaypanel';
+import PvTag from 'primevue/tag';
 import EditVariantDialog from '@/components/EditVariantDialog.vue';
 
 const props = defineProps({
diff --git a/src/components/auth/AuthEmailLink.vue b/src/components/auth/AuthEmailLink.vue
index bf3fef0f3..9dbf3ed20 100644
--- a/src/components/auth/AuthEmailLink.vue
+++ b/src/components/auth/AuthEmailLink.vue
@@ -16,9 +16,12 @@
 
 <script setup>
 import { onMounted, ref } from 'vue';
-import { useAuthStore } from '@/store/auth';
-import { storeToRefs } from 'pinia';
 import { useRouter } from 'vue-router';
+import { storeToRefs } from 'pinia';
+import PvButton from 'primevue/button';
+import PvInputText from 'primevue/inputtext';
+import PvMessage from 'primevue/message';
+import { useAuthStore } from '@/store/auth';
 import { fetchDocById } from '@/helpers/query/utils';
 
 const router = useRouter();
diff --git a/src/components/auth/RegisterParent.vue b/src/components/auth/RegisterParent.vue
index c6f18d0f6..8e83da3c7 100644
--- a/src/components/auth/RegisterParent.vue
+++ b/src/components/auth/RegisterParent.vue
@@ -161,13 +161,17 @@
 
 <script setup>
 import { computed, reactive, ref } from 'vue';
+import { ChallengeV3 } from 'vue-recaptcha';
 import { storeToRefs } from 'pinia';
 import { required, sameAs, minLength } from '@vuelidate/validators';
 import { useVuelidate } from '@vuelidate/core';
+import PvButton from 'primevue/button';
+import PvCheckbox from 'primevue/checkbox';
+import PvDialog from 'primevue/dialog';
+import PvInputText from 'primevue/inputtext';
+import PvPassword from 'primevue/password';
 import { useAuthStore } from '@/store/auth';
 import ConsentModal from '../ConsentModal.vue';
-import { ChallengeV3 } from 'vue-recaptcha';
-// import _debounce from 'lodash/debounce';
 
 const authStore = useAuthStore();
 const { roarfirekit } = storeToRefs(authStore);
diff --git a/src/components/auth/RegisterStudent.vue b/src/components/auth/RegisterStudent.vue
index 7b5618e85..2cdb59748 100644
--- a/src/components/auth/RegisterStudent.vue
+++ b/src/components/auth/RegisterStudent.vue
@@ -336,11 +336,22 @@
 <script setup>
 import { reactive, ref, onMounted, toRaw } from 'vue';
 import { required, minLength, helpers } from '@vuelidate/validators';
+import PvAccordion from 'primevue/accordion';
+import PvAccordionTab from 'primevue/accordiontab';
+import PvButton from 'primevue/button';
+import PvCalendar from 'primevue/calendar';
+import PvCheckbox from 'primevue/checkbox';
+import PvDialog from 'primevue/dialog';
+import PvDropdown from 'primevue/dropdown';
+import PvInputGroup from 'primevue/inputgroup';
+import PvInputText from 'primevue/inputtext';
+import PvPassword from 'primevue/password';
 import { fetchDocById } from '@/helpers/query/utils';
 import { useVuelidate } from '@vuelidate/core';
 import { useAuthStore } from '@/store/auth';
 import { storeToRefs } from 'pinia';
 import _capitalize from 'lodash/capitalize';
+import PvAutoComplete from 'primevue/autocomplete';
 
 const authStore = useAuthStore();
 const { roarfirekit } = storeToRefs(authStore);
diff --git a/src/components/auth/RegisterUser.vue b/src/components/auth/RegisterUser.vue
index 4ad5dc9d1..10e64faee 100644
--- a/src/components/auth/RegisterUser.vue
+++ b/src/components/auth/RegisterUser.vue
@@ -177,6 +177,13 @@
 import { computed, reactive, ref } from 'vue';
 import { required, sameAs } from '@vuelidate/validators';
 import { useVuelidate } from '@vuelidate/core';
+import PvButton from 'primevue/button';
+import PvCalendar from 'primevue/calendar';
+import PvCheckbox from 'primevue/checkbox';
+import PvDivider from 'primevue/divider';
+import PvDropdown from 'primevue/dropdown';
+import PvInputText from 'primevue/inputtext';
+import PvPassword from 'primevue/password';
 
 // TODO: Include middle
 const state = reactive({
diff --git a/src/components/auth/RequestPermission.vue b/src/components/auth/RequestPermission.vue
index 80b4fe444..d8bdb4563 100644
--- a/src/components/auth/RequestPermission.vue
+++ b/src/components/auth/RequestPermission.vue
@@ -16,6 +16,8 @@
 <script setup>
 import { useAuthStore } from '@/store/auth';
 import { storeToRefs } from 'pinia';
+import PvButton from 'primevue/button';
+import PvMessage from 'primevue/message';
 
 const authStore = useAuthStore();
 const { email } = storeToRefs(authStore);
diff --git a/src/components/auth/SignIn.vue b/src/components/auth/SignIn.vue
index e07ac7c29..57e8608f4 100644
--- a/src/components/auth/SignIn.vue
+++ b/src/components/auth/SignIn.vue
@@ -154,6 +154,11 @@ import { storeToRefs } from 'pinia';
 import { required, requiredUnless } from '@vuelidate/validators';
 import { useVuelidate } from '@vuelidate/core';
 import _debounce from 'lodash/debounce';
+import PvButton from 'primevue/button';
+import PvDivider from 'primevue/divider';
+import PvInputText from 'primevue/inputtext';
+import PvPassword from 'primevue/password';
+import PvSkeleton from 'primevue/skeleton';
 import { useAuthStore } from '@/store/auth';
 import RoarModal from '../modals/RoarModal.vue';
 
diff --git a/src/components/modals/EditUsers.vue b/src/components/modals/EditUsers.vue
index 9e3233d2f..84ca200c1 100644
--- a/src/components/modals/EditUsers.vue
+++ b/src/components/modals/EditUsers.vue
@@ -203,6 +203,13 @@ import { watch, ref, onMounted, computed } from 'vue';
 import { useToast } from 'primevue/usetoast';
 import { storeToRefs } from 'pinia';
 import { useAuthStore } from '@/store/auth';
+import PvAutoComplete from 'primevue/autocomplete';
+import PvButton from 'primevue/button';
+import PvCalendar from 'primevue/calendar';
+import PvCheckbox from 'primevue/checkbox';
+import PvDialog from 'primevue/dialog';
+import PvDropdown from 'primevue/dropdown';
+import PvInputText from 'primevue/inputtext';
 import useUserClaimsQuery from '@/composables/queries/useUserClaimsQuery';
 
 const props = defineProps({
diff --git a/src/components/modals/RoarModal.vue b/src/components/modals/RoarModal.vue
index 4afd66d32..d4b88a381 100644
--- a/src/components/modals/RoarModal.vue
+++ b/src/components/modals/RoarModal.vue
@@ -28,9 +28,11 @@
   </PvDialog>
 </template>
 <script setup>
-import { useAuthStore } from '@/store/auth';
-import { storeToRefs } from 'pinia';
 import { watch, ref, onMounted } from 'vue';
+import { storeToRefs } from 'pinia';
+import PvDialog from 'primevue/dialog';
+import { useAuthStore } from '@/store/auth';
+
 const props = defineProps({
   isEnabled: {
     type: Boolean,
diff --git a/src/components/reports/DistributionChartFacet.vue b/src/components/reports/DistributionChartFacet.vue
index c96264b95..b893a15a4 100644
--- a/src/components/reports/DistributionChartFacet.vue
+++ b/src/components/reports/DistributionChartFacet.vue
@@ -18,6 +18,7 @@
 <script setup>
 import { onMounted, ref, watch, computed } from 'vue';
 import embed from 'vega-embed';
+import PvSelectButton from 'primevue/selectbutton';
 import useTasksDictionaryQuery from '@/composables/queries/useTasksDictionaryQuery';
 
 const props = defineProps({
diff --git a/src/components/reports/DistributionChartSupport.vue b/src/components/reports/DistributionChartSupport.vue
index ebb042eee..7523d2fa8 100644
--- a/src/components/reports/DistributionChartSupport.vue
+++ b/src/components/reports/DistributionChartSupport.vue
@@ -16,6 +16,7 @@
 <script setup>
 import { computed, onMounted, ref, watch } from 'vue';
 import embed from 'vega-embed';
+import PvSelectButton from 'primevue/selectbutton';
 import useTasksDictionaryQuery from '@/composables/queries/useTasksDictionaryQuery';
 
 const { data: tasksDictionary, isLoading: isLoadingTasksDictionary } = useTasksDictionaryQuery();
diff --git a/src/components/reports/IndividualScoreReportTask.vue b/src/components/reports/IndividualScoreReportTask.vue
index ef4600cb1..532256c0f 100644
--- a/src/components/reports/IndividualScoreReportTask.vue
+++ b/src/components/reports/IndividualScoreReportTask.vue
@@ -145,6 +145,10 @@ import _startCase from 'lodash/startCase';
 import _toUpper from 'lodash/toUpper';
 import _get from 'lodash/get';
 import { getGrade } from '@bdelab/roar-utils';
+import PvAccordion from 'primevue/accordion';
+import PvAccordionTab from 'primevue/accordiontab';
+import PvKnob from 'primevue/knob';
+import PvTag from 'primevue/tag';
 import useTasksDictionaryQuery from '@/composables/queries/useTasksDictionaryQuery';
 import {
   rawOnlyTasks,
diff --git a/src/components/reports/SubscoreTable.vue b/src/components/reports/SubscoreTable.vue
index b372b230b..b793400e8 100644
--- a/src/components/reports/SubscoreTable.vue
+++ b/src/components/reports/SubscoreTable.vue
@@ -18,6 +18,7 @@ import _toUpper from 'lodash/toUpper';
 import { exportCsv } from '@/helpers/query/utils';
 import { useAuthStore } from '@/store/auth';
 import { storeToRefs } from 'pinia';
+import RoarDataTable from '@/components/RoarDataTable.vue';
 
 const props = defineProps({
   administrationId: { type: String, required: true, default: '' },
diff --git a/src/components/reports/TableRoarScores.vue b/src/components/reports/TableRoarScores.vue
index 83eef81d0..193e138f4 100644
--- a/src/components/reports/TableRoarScores.vue
+++ b/src/components/reports/TableRoarScores.vue
@@ -115,6 +115,11 @@
 <script setup>
 import { ref } from 'vue';
 import { FilterMatchMode, FilterOperator } from 'primevue/api';
+import PvButton from 'primevue/button';
+import PvColumn from 'primevue/column';
+import PvDataTable from 'primevue/datatable';
+import PvInputText from 'primevue/inputtext';
+import PvMultiSelect from 'primevue/multiselect';
 import { storeToRefs } from 'pinia';
 import Papa from 'papaparse';
 import { flattenObj } from '@/helpers';
diff --git a/src/components/reports/TableScoreTag.vue b/src/components/reports/TableScoreTag.vue
index 3d6a3b677..b2ba99e26 100644
--- a/src/components/reports/TableScoreTag.vue
+++ b/src/components/reports/TableScoreTag.vue
@@ -26,6 +26,7 @@
 <script setup>
 import _get from 'lodash/get';
 import _lowerCase from 'lodash/lowerCase';
+import PvTag from 'primevue/tag';
 import {
   tasksToDisplayPercentCorrect,
   tasksToDisplayCorrectIncorrectDifference,
diff --git a/src/components/reports/tasks/TaskReport.vue b/src/components/reports/tasks/TaskReport.vue
index 40308c5c2..9de1384ab 100644
--- a/src/components/reports/tasks/TaskReport.vue
+++ b/src/components/reports/tasks/TaskReport.vue
@@ -1,15 +1,15 @@
 <template>
   <div :id="'tab-view-description-' + taskId" class="flex flex-col items-center justify-center mx-2">
-    <Accordion v-if="taskInfoById[taskId]" class="mb-5 w-full" :active-index="0">
-      <AccordionTab :header="('About ' + taskInfoById[taskId]?.subheader).toUpperCase()">
+    <PvAccordion v-if="taskInfoById[taskId]" class="mb-5 w-full" :active-index="0">
+      <PvAccordionTab :header="('About ' + taskInfoById[taskId]?.subheader).toUpperCase()">
         <div>
           <div style="text-transform: uppercase" class="text-2xl font-bold">{{ taskInfoById[taskId]?.subheader }}</div>
           <!-- The following HTML is from a hard-coded source (below) -->
           <!-- eslint-disable-next-line vue/no-v-html -->
           <p class="mt-1 text-md font-light" v-html="taskInfoById[taskId]?.desc"></p>
         </div>
-      </AccordionTab>
-    </Accordion>
+      </PvAccordionTab>
+    </PvAccordion>
   </div>
   <!-- <div class="grid grid-cols-2 w-full space-around items-center p-3"> -->
   <div v-if="tasksToDisplayGraphs.includes(taskId)" :id="'tab-view-chart-' + taskId" class="chart-toggle-wrapper">
@@ -76,8 +76,9 @@
 </template>
 <script setup>
 import { ref, computed } from 'vue';
-import Accordion from 'primevue/accordion';
-import AccordionTab from 'primevue/accordiontab';
+import PvAccordion from 'primevue/PvAccordion';
+import PvAccordionTab from 'primevue/PvAccordionTab';
+import PvSelectButton from 'primevue/selectbutton';
 import { tasksToDisplayGraphs, taskInfoById } from '@/helpers/reports.js';
 import useTasksDictionaryQuery from '@/composables/queries/useTasksDictionaryQuery.js';
 import SubscoreTable from '@/components/reports/SubscoreTable.vue';
diff --git a/src/components/slots/FilterBar.vue b/src/components/slots/FilterBar.vue
index f1d42f1f5..39f65475b 100644
--- a/src/components/slots/FilterBar.vue
+++ b/src/components/slots/FilterBar.vue
@@ -44,6 +44,7 @@
 
 <script setup>
 import { ref, watch } from 'vue';
+import PvMultiSelect from 'primevue/multiselect';
 
 const props = defineProps({
   updateFilters: {
diff --git a/src/components/tasks/ManageTasks.vue b/src/components/tasks/ManageTasks.vue
index 2c5802b48..87173b40a 100644
--- a/src/components/tasks/ManageTasks.vue
+++ b/src/components/tasks/ManageTasks.vue
@@ -427,6 +427,13 @@ import { required, requiredIf, url } from '@vuelidate/validators';
 import { useVuelidate } from '@vuelidate/core';
 import { storeToRefs } from 'pinia';
 import { useToast } from 'primevue/usetoast';
+import PvButton from 'primevue/button';
+import PvCheckbox from 'primevue/checkbox';
+import PvDropdown from 'primevue/dropdown';
+import PvInputNumber from 'primevue/inputnumber';
+import PvInputText from 'primevue/inputtext';
+import PvSelectButton from 'primevue/selectbutton';
+import PvToast from 'primevue/toast';
 import { cloneDeep, camelCase } from 'lodash';
 import { useAuthStore } from '@/store/auth';
 import useTasksQuery from '@/composables/queries/useTasksQuery';
diff --git a/src/components/tasks/ManageVariants.vue b/src/components/tasks/ManageVariants.vue
index c7c971f71..023a63a74 100644
--- a/src/components/tasks/ManageVariants.vue
+++ b/src/components/tasks/ManageVariants.vue
@@ -440,6 +440,13 @@ import { required } from '@vuelidate/validators';
 import { useVuelidate } from '@vuelidate/core';
 import { storeToRefs } from 'pinia';
 import { useToast } from 'primevue/usetoast';
+import PvButton from 'primevue/button';
+import PvCheckbox from 'primevue/checkbox';
+import PvDropdown from 'primevue/dropdown';
+import PvInputNumber from 'primevue/inputnumber';
+import PvInputText from 'primevue/inputtext';
+import PvSelectButton from 'primevue/selectbutton';
+import PvToast from 'primevue/toast';
 import { cloneDeep, camelCase } from 'lodash';
 import { useAuthStore } from '@/store/auth';
 import useTasksQuery from '@/composables/queries/useTasksQuery';
diff --git a/src/components/views/LinkAccountsView.vue b/src/components/views/LinkAccountsView.vue
index a2eaf79c6..e5ca52891 100644
--- a/src/components/views/LinkAccountsView.vue
+++ b/src/components/views/LinkAccountsView.vue
@@ -101,6 +101,8 @@ import { ref, onMounted, computed } from 'vue';
 import { useToast } from 'primevue/usetoast';
 import { useConfirm } from 'primevue/useconfirm';
 import { storeToRefs } from 'pinia';
+import PvChip from 'primevue/chip';
+import PvConfirmDialog from 'primevue/confirmdialog';
 import { useAuthStore } from '@/store/auth';
 import { AUTH_SSO_PROVIDERS } from '@/constants/auth';
 
diff --git a/src/components/views/PasswordView.vue b/src/components/views/PasswordView.vue
index 95cfc8040..90d1bf2c9 100644
--- a/src/components/views/PasswordView.vue
+++ b/src/components/views/PasswordView.vue
@@ -28,6 +28,8 @@ import { ref, reactive, computed, onMounted } from 'vue';
 import { useVuelidate } from '@vuelidate/core';
 import { useAuthStore } from '@/store/auth';
 import { useToast } from 'primevue/usetoast';
+import PvButton from 'primevue/button';
+import PvInputText from 'primevue/inputtext';
 import { storeToRefs } from 'pinia';
 import { required, sameAs, minLength } from '@vuelidate/validators';
 // +-------------------+
diff --git a/src/components/views/UserInfoView.vue b/src/components/views/UserInfoView.vue
index 6464624d5..e8f537b3a 100644
--- a/src/components/views/UserInfoView.vue
+++ b/src/components/views/UserInfoView.vue
@@ -34,6 +34,7 @@
 import { ref, onMounted, computed } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useToast } from 'primevue/usetoast';
+import PvButton from 'primevue/button';
 import _get from 'lodash/get';
 import { useAuthStore } from '@/store/auth';
 import useUserDataQuery from '@/composables/queries/useUserDataQuery';
diff --git a/src/containers/SessionTimer/SessionTimer.vue b/src/containers/SessionTimer/SessionTimer.vue
index ad317bcdd..630072227 100644
--- a/src/containers/SessionTimer/SessionTimer.vue
+++ b/src/containers/SessionTimer/SessionTimer.vue
@@ -17,6 +17,7 @@
 <script setup>
 import { useConfirm } from 'primevue/useconfirm';
 import { useI18n } from 'vue-i18n';
+import PvConfirmDialog from 'primevue/confirmdialog';
 import useInactivityTimeout from '@/composables/useInactivityTimeout/useInactivityTimeout';
 import useSignOutMutation from '@/composables/mutations/useSignOutMutation';
 import { AUTH_SESSION_TIMEOUT_IDLE_THRESHOLD, AUTH_SESSION_TIMEOUT_COUNTDOWN_DURATION } from '@/constants/auth';
diff --git a/src/pages/EnableCookies.vue b/src/pages/EnableCookies.vue
index e3a439c51..e43287760 100644
--- a/src/pages/EnableCookies.vue
+++ b/src/pages/EnableCookies.vue
@@ -9,6 +9,7 @@
   </router-link>
 </template>
 
-<script></script>
-
-<style scoped></style>
+<script setup>
+import PvButton from 'primevue/button';
+import PvMessage from 'primevue/message';
+</script>
diff --git a/src/pages/HomeAdministrator.vue b/src/pages/HomeAdministrator.vue
index 187ed48f5..27de81dc0 100644
--- a/src/pages/HomeAdministrator.vue
+++ b/src/pages/HomeAdministrator.vue
@@ -130,6 +130,13 @@
 <script setup>
 import { onMounted, ref, watch } from 'vue';
 import { storeToRefs } from 'pinia';
+import PvAutoComplete from 'primevue/autocomplete';
+import PvBlockUI from 'primevue/blockui';
+import PvButton from 'primevue/button';
+import PvDataView from 'primevue/dataview';
+import PvDropdown from 'primevue/dropdown';
+import PvInputGroup from 'primevue/inputgroup';
+import PvInputSwitch from 'primevue/inputswitch';
 import { useAuthStore } from '@/store/auth';
 import { orderByDefault } from '@/helpers/query/utils';
 import { getTitle } from '@/helpers/query/administrations';
diff --git a/src/pages/HomeParticipant.vue b/src/pages/HomeParticipant.vue
index 64739dde9..ac2eda6ea 100644
--- a/src/pages/HomeParticipant.vue
+++ b/src/pages/HomeParticipant.vue
@@ -93,9 +93,12 @@ import _get from 'lodash/get';
 import _find from 'lodash/find';
 import _without from 'lodash/without';
 import _isEmpty from 'lodash/isEmpty';
+import { storeToRefs } from 'pinia';
+import PvButton from 'primevue/button';
+import PvDropdown from 'primevue/dropdown';
+import PvInputSwitch from 'primevue/inputswitch';
 import { useAuthStore } from '@/store/auth';
 import { useGameStore } from '@/store/game';
-import { storeToRefs } from 'pinia';
 import useUserDataQuery from '@/composables/queries/useUserDataQuery';
 import useUserAssignmentsQuery from '@/composables/queries/useUserAssignmentsQuery';
 import useTasksQuery from '@/composables/queries/useTasksQuery';
diff --git a/src/pages/LEVANTE/RegisterUsers.vue b/src/pages/LEVANTE/RegisterUsers.vue
index d68b05f1f..05c0a6aa0 100644
--- a/src/pages/LEVANTE/RegisterUsers.vue
+++ b/src/pages/LEVANTE/RegisterUsers.vue
@@ -95,6 +95,11 @@ import _forEach from 'lodash/forEach';
 import _isEmpty from 'lodash/isEmpty';
 import _startCase from 'lodash/startCase';
 import { useToast } from 'primevue/usetoast';
+import PvButton from 'primevue/button';
+import PvColumn from 'primevue/column';
+import PvDataTable from 'primevue/datatable';
+import PvDivider from 'primevue/divider';
+import PvFileUpload from 'primevue/fileupload';
 import RegisterUsersInfo from '@/components/LEVANTE/RegisterUsersInfo.vue';
 import { useAuthStore } from '@/store/auth';
 import { pluralizeFirestoreCollection } from '@/helpers';
diff --git a/src/pages/LEVANTE/UserSurvey.vue b/src/pages/LEVANTE/UserSurvey.vue
index b6ab25bf6..8b98f07c3 100644
--- a/src/pages/LEVANTE/UserSurvey.vue
+++ b/src/pages/LEVANTE/UserSurvey.vue
@@ -12,6 +12,7 @@ import { Converter } from 'showdown';
 import { useI18n } from 'vue-i18n';
 import { BufferLoader, AudioContext } from '@/helpers/audio';
 import { useToast } from 'primevue/usetoast';
+import PvButton from 'primevue/button';
 
 const fetchAudioLinks = async (surveyType) => {
   const response = await axios.get('https://storage.googleapis.com/storage/v1/b/road-dashboard/o/');
diff --git a/src/pages/MaintenancePage.vue b/src/pages/MaintenancePage.vue
index 6b0f1310d..83e37f8af 100644
--- a/src/pages/MaintenancePage.vue
+++ b/src/pages/MaintenancePage.vue
@@ -17,10 +17,13 @@
 </template>
 <script setup>
 import { onMounted, onBeforeUnmount } from 'vue';
+import PvImage from 'primevue/image';
 import ROARLogoShort from '@/assets/RoarLogo-Short.vue';
+
 onMounted(() => {
   document.body.classList.add('page-signin');
 });
+
 onBeforeUnmount(() => {
   document.body.classList.remove('page-signin');
 });
diff --git a/src/pages/ManageTasksVariants.vue b/src/pages/ManageTasksVariants.vue
index d22c6968d..16ce85c5e 100644
--- a/src/pages/ManageTasksVariants.vue
+++ b/src/pages/ManageTasksVariants.vue
@@ -24,6 +24,8 @@
 </template>
 
 <script setup>
+import PvTabPanel from 'primevue/tabpanel';
+import PvTabView from 'primevue/tabview';
 import ManageTasks from '../components/tasks/ManageTasks.vue';
 import ManageVariants from '../components/tasks/ManageVariants.vue';
 </script>
diff --git a/src/pages/NotFound.vue b/src/pages/NotFound.vue
index 7284e228b..fd72b8ec0 100644
--- a/src/pages/NotFound.vue
+++ b/src/pages/NotFound.vue
@@ -12,6 +12,6 @@
   </div>
 </template>
 
-<script></script>
-
-<style scoped></style>
+<script setup>
+import PvButton from 'primevue/button';
+</script>
diff --git a/src/pages/ProgressReport.vue b/src/pages/ProgressReport.vue
index 5a02608ae..dda6ac113 100644
--- a/src/pages/ProgressReport.vue
+++ b/src/pages/ProgressReport.vue
@@ -168,6 +168,9 @@ import { useRouter } from 'vue-router';
 import _get from 'lodash/get';
 import _kebabCase from 'lodash/kebabCase';
 import _map from 'lodash/map';
+import PvChart from 'primevue/chart';
+import PvMultiSelect from 'primevue/multiselect';
+import PvSelectButton from 'primevue/selectbutton';
 import { useAuthStore } from '@/store/auth';
 import useUserType from '@/composables/useUserType';
 import useUserClaimsQuery from '@/composables/queries/useUserClaimsQuery';
@@ -184,6 +187,7 @@ import { getTitle } from '@/helpers/query/administrations';
 import { setBarChartData, setBarChartOptions } from '@/helpers/plotting';
 import { APP_ROUTES } from '@/constants/routes';
 import { SINGULAR_ORG_TYPES } from '@/constants/orgTypes';
+import RoarDataTable from '@/components/RoarDataTable.vue';
 
 const router = useRouter();
 const authStore = useAuthStore();
diff --git a/src/pages/RegisterFamilyUsers.vue b/src/pages/RegisterFamilyUsers.vue
index 8075e4d4f..2cad066e7 100644
--- a/src/pages/RegisterFamilyUsers.vue
+++ b/src/pages/RegisterFamilyUsers.vue
@@ -56,13 +56,16 @@
 </template>
 
 <script setup>
-import Register from '../components/auth/RegisterParent.vue';
-import RegisterStudent from '../components/auth/RegisterStudent.vue';
-import ROARLogoShort from '@/assets/RoarLogo-Short.vue';
 import { ref, onMounted, onBeforeUnmount, watch, toRaw, computed } from 'vue';
+import PvButton from 'primevue/button';
+import PvCheckbox from 'primevue/checkbox';
+import PvDialog from 'primevue/dialog';
 import { useAuthStore } from '@/store/auth';
 import router from '../router';
 import useUserClaimsQuery from '@/composables/queries/useUserClaimsQuery';
+import Register from '../components/auth/RegisterParent.vue';
+import RegisterStudent from '../components/auth/RegisterStudent.vue';
+import ROARLogoShort from '@/assets/RoarLogo-Short.vue';
 
 const authStore = useAuthStore();
 const initialized = ref(false);
diff --git a/src/pages/RegisterStudents.vue b/src/pages/RegisterStudents.vue
index e7c30f98b..e4370fb87 100644
--- a/src/pages/RegisterStudents.vue
+++ b/src/pages/RegisterStudents.vue
@@ -139,7 +139,7 @@
 </template>
 <script setup>
 import { ref, toRaw, onMounted } from 'vue';
-import { csvFileToJson } from '@/helpers';
+import { storeToRefs } from 'pinia';
 import _cloneDeep from 'lodash/cloneDeep';
 import _compact from 'lodash/compact';
 import _forEach from 'lodash/forEach';
@@ -150,9 +150,18 @@ import _set from 'lodash/set';
 import _uniqBy from 'lodash/uniqBy';
 import _startCase from 'lodash/startCase';
 import _find from 'lodash/find';
-import { useAuthStore } from '@/store/auth';
-import { storeToRefs } from 'pinia';
 import { useToast } from 'primevue/usetoast';
+import PvButton from 'primevue/button';
+import PvCheckbox from 'primevue/checkbox';
+import PvColumn from 'primevue/column';
+import PvDataTable from 'primevue/datatable';
+import PvDivider from 'primevue/divider';
+import PvDropdown from 'primevue/dropdown';
+import PvFileUpload from 'primevue/fileupload';
+import PvMessage from 'primevue/message';
+import PvPanel from 'primevue/panel';
+import { useAuthStore } from '@/store/auth';
+import { csvFileToJson } from '@/helpers';
 import { pluralizeFirestoreCollection } from '@/helpers';
 import { fetchOrgByName } from '@/helpers/query/orgs';
 
diff --git a/src/pages/RegisterUser.vue b/src/pages/RegisterUser.vue
index ce7b2abad..c62b9488f 100644
--- a/src/pages/RegisterUser.vue
+++ b/src/pages/RegisterUser.vue
@@ -17,6 +17,7 @@
 </template>
 
 <script setup>
+import PvButton from 'primevue/button';
 import RegisterUser from '@/components/auth/RegisterUser.vue';
 import { useAuthStore } from '@/store/auth';
 import { isMobileBrowser } from '@/helpers';
diff --git a/src/pages/ScoreReport.vue b/src/pages/ScoreReport.vue
index 11f302586..12067b863 100644
--- a/src/pages/ScoreReport.vue
+++ b/src/pages/ScoreReport.vue
@@ -263,7 +263,6 @@
 
 <script setup>
 import { computed, ref, onMounted, watch } from 'vue';
-import FilterBar from '@/components/slots/FilterBar.vue';
 import { storeToRefs } from 'pinia';
 import { useRouter } from 'vue-router';
 import { jsPDF } from 'jspdf';
@@ -275,6 +274,13 @@ import _map from 'lodash/map';
 import _kebabCase from 'lodash/kebabCase';
 import _pickBy from 'lodash/pickBy';
 import _lowerCase from 'lodash/lowerCase';
+import { getGrade } from '@bdelab/roar-utils';
+import PvButton from 'primevue/button';
+import PvConfirmDialog from 'primevue/confirmdialog';
+import PvDropdown from 'primevue/dropdown';
+import PvSelectButton from 'primevue/selectbutton';
+import PvTabPanel from 'primevue/tabpanel';
+import PvTabView from 'primevue/tabview';
 import { useAuthStore } from '@/store/auth';
 import { getDynamicRouterPath } from '@/helpers/getDynamicRouterPath';
 import useUserType from '@/composables/useUserType';
@@ -284,10 +290,9 @@ import useOrgQuery from '@/composables/queries/useOrgQuery';
 import useDistrictSchoolsQuery from '@/composables/queries/useDistrictSchoolsQuery';
 import useAdministrationAssignmentsQuery from '@/composables/queries/useAdministrationAssignmentsQuery';
 import useTasksDictionaryQuery from '@/composables/queries/useTasksDictionaryQuery';
-import { getGrade } from '@bdelab/roar-utils';
+import { useFilteredTableData } from '@/composables/useFilteredTableData.js';
 import { exportCsv } from '@/helpers/query/utils';
-import { getTitle } from '../helpers/query/administrations';
-import { useFilteredTableData } from '../composables/useFilteredTableData.js';
+import { getTitle } from '@/helpers/query/administrations';
 import {
   taskDisplayNames,
   taskInfoById,
@@ -304,6 +309,8 @@ import {
   tasksToDisplayCorrectIncorrectDifference,
   includedValidityFlags,
 } from '@/helpers/reports';
+import FilterBar from '@/components/slots/FilterBar.vue';
+import RoarDataTable from '@/components/RoarDataTable.vue';
 import { APP_ROUTES } from '@/constants/routes';
 import { SINGULAR_ORG_TYPES } from '@/constants/orgTypes';
 
diff --git a/src/pages/SignIn.vue b/src/pages/SignIn.vue
index 39a3e56c0..6c8aeb6d5 100644
--- a/src/pages/SignIn.vue
+++ b/src/pages/SignIn.vue
@@ -140,14 +140,18 @@
 import { onMounted, ref, toRaw, onBeforeUnmount, computed } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useRouter } from 'vue-router';
-import SignIn from '@/components/auth/SignIn.vue';
+import PvButton from 'primevue/button';
+import PvImage from 'primevue/image';
+import PvPassword from 'primevue/password';
 import ROARLogoShort from '@/assets/RoarLogo-Short.vue';
 import { useAuthStore } from '@/store/auth';
 import { isMobileBrowser } from '@/helpers';
-import { fetchDocById } from '../helpers/query/utils';
-import RoarModal from '../components/modals/RoarModal.vue';
+import { fetchDocById } from '@/helpers/query/utils';
 import { AUTH_SSO_PROVIDERS } from '@/constants/auth';
 import { APP_ROUTES } from '@/constants/routes';
+import RoarModal from '@/components/modals/RoarModal.vue';
+import SignIn from '@/components/auth/SignIn.vue';
+import LanguageSelector from '@/components/LanguageSelector.vue';
 
 const incorrect = ref(false);
 const isLevante = import.meta.env.MODE === 'LEVANTE';
diff --git a/src/pages/StudentReport.vue b/src/pages/StudentReport.vue
index 536c2e8ef..3bb582abf 100644
--- a/src/pages/StudentReport.vue
+++ b/src/pages/StudentReport.vue
@@ -179,6 +179,9 @@ import { storeToRefs } from 'pinia';
 import jsPDF from 'jspdf';
 import _startCase from 'lodash/startCase';
 import { getGrade } from '@bdelab/roar-utils';
+import PvAccordion from 'primevue/accordion';
+import PvAccordionTab from 'primevue/accordiontab';
+import PvButton from 'primevue/button';
 import { useAuthStore } from '@/store/auth';
 import useUserDataQuery from '@/composables/queries/useUserDataQuery';
 import useAdministrationsQuery from '@/composables/queries/useAdministrationsQuery';
diff --git a/src/setup.js b/src/setup.js
index c54eabacd..8d17eb1d6 100644
--- a/src/setup.js
+++ b/src/setup.js
@@ -6,72 +6,9 @@ import { initSentry } from '@/sentry';
 import App from '@/App.vue';
 import plugins from './plugins';
 
-import './styles.css';
-
-// PrimeVue component imports
-import PvAccordion from 'primevue/accordion';
-import PvAccordionTab from 'primevue/accordiontab';
-import PvAutoComplete from 'primevue/autocomplete';
-import PvBadge from 'primevue/badge';
-import PvBlockUI from 'primevue/blockui';
-import PvButton from 'primevue/button';
-import PvCalendar from 'primevue/calendar';
-import PvCard from 'primevue/card';
-import PvChart from 'primevue/chart';
-import PvCheckbox from 'primevue/checkbox';
-import PvChip from 'primevue/chip';
-import PvColumn from 'primevue/column';
-import PvConfirmDialog from 'primevue/confirmdialog';
-import PvConfirmPopup from 'primevue/confirmpopup';
-import PvDataTable from 'primevue/datatable';
-import PvDataView from 'primevue/dataview';
-import PvDialog from 'primevue/dialog';
-import PvDivider from 'primevue/divider';
-import PvDropdown from 'primevue/dropdown';
-import PvFileUpload from 'primevue/fileupload';
-import PvImage from 'primevue/image';
-import PvInlineMessage from 'primevue/inlinemessage';
-import PvInputGroup from 'primevue/inputgroup';
-import PvInputNumber from 'primevue/inputnumber';
-import PvInputSwitch from 'primevue/inputswitch';
-import PvInputText from 'primevue/inputtext';
-import PvKnob from 'primevue/knob';
-import PvListbox from 'primevue/listbox';
-import PvMenu from 'primevue/menu';
-import PvMenubar from 'primevue/menubar';
-import PvMessage from 'primevue/message';
-import PvMultiSelect from 'primevue/multiselect';
-import PvOverlayPanel from 'primevue/overlaypanel';
-import PvPanel from 'primevue/panel';
-import PvPassword from 'primevue/password';
-import PvPickList from 'primevue/picklist';
-import PvProgressBar from 'primevue/progressbar';
-import PvRadioButton from 'primevue/radiobutton';
-import PvScrollPanel from 'primevue/scrollpanel';
-import PvSelectButton from 'primevue/selectbutton';
-import PvSidebar from 'primevue/sidebar';
-import PvSkeleton from 'primevue/skeleton';
-import PvSpeedDial from 'primevue/speeddial';
-import PvSplitter from 'primevue/splitter';
-import PvSplitterPanel from 'primevue/splitterpanel';
-import PvSteps from 'primevue/steps';
-import PvTabPanel from 'primevue/tabpanel';
-import PvTabView from 'primevue/tabview';
-import PvTag from 'primevue/tag';
-import PvToast from 'primevue/toast';
-import PvToggleButton from 'primevue/togglebutton';
-import PvTreeTable from 'primevue/treetable';
-import PvTriStateCheckbox from 'primevue/tristatecheckbox';
-import PvFieldset from 'primevue/fieldset';
-import PvColumnGroup from 'primevue/columngroup';
-import PvRow from 'primevue/row';
-
-// PrimeVue directive imports
 import PvTooltip from 'primevue/tooltip';
 
-// Internal Roar components
-import RoarDataTable from '@/components/RoarDataTable.vue';
-import LanguageSelector from '@/components/LanguageSelector.vue';
+import './styles.css';
 
 /**
  * Create a new Vue app instance with all the necessary plugins and components registered that can be used in the main
@@ -96,66 +33,6 @@ export const createAppInstance = () => {
     v3SiteKey: '6Lc-LXsnAAAAAHGha6zgn0DIzgulf3TbGDhnZMAd',
   });
 
-  app.component('PvAccordion', PvAccordion);
-  app.component('PvAccordionTab', PvAccordionTab);
-  app.component('PvAutoComplete', PvAutoComplete);
-  app.component('PvBadge', PvBadge);
-  app.component('PvBlockUI', PvBlockUI);
-  app.component('PvButton', PvButton);
-  app.component('PvCalendar', PvCalendar);
-  app.component('PvCard', PvCard);
-  app.component('PvChart', PvChart);
-  app.component('PvCheckbox', PvCheckbox);
-  app.component('PvChip', PvChip);
-  app.component('PvColumn', PvColumn);
-  app.component('PvConfirmDialog', PvConfirmDialog);
-  app.component('PvConfirmPopup', PvConfirmPopup);
-  app.component('PvDataTable', PvDataTable);
-  app.component('PvDataView', PvDataView);
-  app.component('PvDialog', PvDialog);
-  app.component('PvDivider', PvDivider);
-  app.component('PvDropdown', PvDropdown);
-  app.component('PvFileUpload', PvFileUpload);
-  app.component('PvImage', PvImage);
-  app.component('PvInlineMessage', PvInlineMessage);
-  app.component('PvInputGroup', PvInputGroup);
-  app.component('PvInputNumber', PvInputNumber);
-  app.component('PvInputSwitch', PvInputSwitch);
-  app.component('PvInputText', PvInputText);
-  app.component('PvKnob', PvKnob);
-  app.component('PvListbox', PvListbox);
-  app.component('PvMenu', PvMenu);
-  app.component('PvMenubar', PvMenubar);
-  app.component('PvMessage', PvMessage);
-  app.component('PvMultiSelect', PvMultiSelect);
-  app.component('PvOverlayPanel', PvOverlayPanel);
-  app.component('PvPanel', PvPanel);
-  app.component('PvPassword', PvPassword);
-  app.component('PvPickList', PvPickList);
-  app.component('PvProgressBar', PvProgressBar);
-  app.component('PvRadioButton', PvRadioButton);
-  app.component('PvScrollPanel', PvScrollPanel);
-  app.component('PvSelectButton', PvSelectButton);
-  app.component('PvSidebar', PvSidebar);
-  app.component('PvSkeleton', PvSkeleton);
-  app.component('PvSpeedDial', PvSpeedDial);
-  app.component('PvSplitter', PvSplitter);
-  app.component('PvSplitterPanel', PvSplitterPanel);
-  app.component('PvSteps', PvSteps);
-  app.component('PvTabPanel', PvTabPanel);
-  app.component('PvTabView', PvTabView);
-  app.component('PvTag', PvTag);
-  app.component('PvToast', PvToast);
-  app.component('PvToggleButton', PvToggleButton);
-  app.component('PvTreeTable', PvTreeTable);
-  app.component('PvTriStateCheckbox', PvTriStateCheckbox);
-  app.component('PvColumnGroup', PvColumnGroup);
-  app.component('PvRow', PvRow);
-
-  app.component('RoarDataTable', RoarDataTable);
-  app.component('LanguageSelector', LanguageSelector);
-  app.component('PvFieldset', PvFieldset);
-
   app.directive('tooltip', PvTooltip);
 
   // Register all components that begin with App

From 704a94871355c62d48996790634a49da19506f9b Mon Sep 17 00:00:00 2001
From: Maximilian Oertel <maximilian@beyond-consulting.xyz>
Date: Tue, 29 Oct 2024 16:20:58 +0000
Subject: [PATCH 2/5] Simplify setup file

---
 src/setup.js | 33 +++++++++++++++------------------
 1 file changed, 15 insertions(+), 18 deletions(-)

diff --git a/src/setup.js b/src/setup.js
index 8d17eb1d6..0ca09c9d5 100644
--- a/src/setup.js
+++ b/src/setup.js
@@ -2,24 +2,21 @@ import { createApp } from 'vue';
 import { VueRecaptchaPlugin } from 'vue-recaptcha';
 import { Buffer } from 'buffer';
 import { initSentry } from '@/sentry';
-
+import PvTooltip from 'primevue/tooltip';
 import App from '@/App.vue';
+import AppSpinner from '@/components/AppSpinner.vue';
 import plugins from './plugins';
-
-import PvTooltip from 'primevue/tooltip';
-
 import './styles.css';
 
 /**
- * Create a new Vue app instance with all the necessary plugins and components registered that can be used in the main
- * app or in Cypress component tests.
+ * Create Vue App
  *
  * @returns {App<Element>}
  */
 export const createAppInstance = () => {
   const app = createApp(App);
 
-  // Register all default app plugins
+  // Register all app plugins.
   plugins.forEach((plugin) => {
     if (Array.isArray(plugin)) {
       app.use(...plugin);
@@ -28,21 +25,21 @@ export const createAppInstance = () => {
     }
   });
 
-  // Not adding this to default plugins for now, it is causing issues with Cypress component tests
+  // Register plugins.
+  // @NOTE: This plugin is intentionally loaded outside of the plugins.js file to prevent the reCAPTCHA from being
+  // loaded inside the Cypress component tests. As Cypress component tests currently load the plugins.js file directly,
+  // any other plugins that should not be loaded in the Cypress tests should be loaded below.
   app.use(VueRecaptchaPlugin, {
     v3SiteKey: '6Lc-LXsnAAAAAHGha6zgn0DIzgulf3TbGDhnZMAd',
   });
 
-  app.directive('tooltip', PvTooltip);
-
-  // Register all components that begin with App
-  const appComponentFiles = import.meta.glob('./components/App*.vue', { eager: true });
+  // Register global components.
+  app.component('AppSpinner', AppSpinner);
 
-  Object.entries(appComponentFiles).forEach(([path, m]) => {
-    const componentName = path.split('/').pop().replace('.vue', '');
-    app.component(componentName, m.default);
-  });
+  // Register global directives.
+  app.directive('tooltip', PvTooltip);
 
+  // Register global variables.
   // eslint-disable-next-line no-undef
   globalThis.Buffer = Buffer;
 
@@ -54,8 +51,8 @@ export const createAppInstance = () => {
 };
 
 /**
- * Initialize the main app instance and mount it to the DOM.
- * Do not call this function in Cypress tests as the testing environment mounts the app differently.
+ * Mount App
+ *
  * @returns {void}
  */
 export const mountApp = () => {

From 9fa705b1640f25a47881b2efc33519034b7b80f7 Mon Sep 17 00:00:00 2001
From: Maximilian Oertel <maximilian@beyond-consulting.xyz>
Date: Tue, 29 Oct 2024 16:22:50 +0000
Subject: [PATCH 3/5] Fix import name

---
 src/components/reports/tasks/TaskReport.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/reports/tasks/TaskReport.vue b/src/components/reports/tasks/TaskReport.vue
index 9de1384ab..f1038d866 100644
--- a/src/components/reports/tasks/TaskReport.vue
+++ b/src/components/reports/tasks/TaskReport.vue
@@ -76,8 +76,8 @@
 </template>
 <script setup>
 import { ref, computed } from 'vue';
-import PvAccordion from 'primevue/PvAccordion';
-import PvAccordionTab from 'primevue/PvAccordionTab';
+import PvAccordion from 'primevue/accordion';
+import PvAccordionTab from 'primevue/accordiontab';
 import PvSelectButton from 'primevue/selectbutton';
 import { tasksToDisplayGraphs, taskInfoById } from '@/helpers/reports.js';
 import useTasksDictionaryQuery from '@/composables/queries/useTasksDictionaryQuery.js';

From e22b0dbdf4247a98d2c528983e275e7c55b9689b Mon Sep 17 00:00:00 2001
From: Maximilian Oertel <maximilian@beyond-consulting.xyz>
Date: Tue, 29 Oct 2024 17:00:47 +0000
Subject: [PATCH 4/5] Remove defineProps import

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

diff --git a/src/components/EditOrgsForm.vue b/src/components/EditOrgsForm.vue
index 0985ff492..b757ee82b 100644
--- a/src/components/EditOrgsForm.vue
+++ b/src/components/EditOrgsForm.vue
@@ -50,7 +50,7 @@
   </div>
 </template>
 <script setup>
-import { ref, defineProps, onMounted, watch } from 'vue';
+import { ref, onMounted, watch } from 'vue';
 import { useAuthStore } from '@/store/auth';
 import { storeToRefs } from 'pinia';
 import { fetchDocById } from '@/helpers/query/utils';

From 20e7951b15812f8f9938e3da7ec87fb7da2484b5 Mon Sep 17 00:00:00 2001
From: Maximilian Oertel <maximilian@beyond-consulting.xyz>
Date: Tue, 29 Oct 2024 18:16:33 +0000
Subject: [PATCH 5/5] Add missing primevue checkbox styles

---
 src/assets/styles/components/checkbox.scss | 16 ++++++++++++++++
 src/assets/styles/theme.scss               |  1 +
 src/components/RoarDataTable.vue           | 17 -----------------
 src/styles.css                             |  1 -
 4 files changed, 17 insertions(+), 18 deletions(-)
 create mode 100644 src/assets/styles/components/checkbox.scss

diff --git a/src/assets/styles/components/checkbox.scss b/src/assets/styles/components/checkbox.scss
new file mode 100644
index 000000000..39514fff6
--- /dev/null
+++ b/src/assets/styles/components/checkbox.scss
@@ -0,0 +1,16 @@
+.p-checkbox .p-checkbox-box {
+  border: 2px solid var(--surface-300);
+  background: var(--surface-a);
+  width: 16px;
+  height: 16px;
+  color: var(--text-color);
+  border-radius: var(--border-radius);
+  transition: none;
+}
+
+.p-checkbox-box.p-component.p-highlight {
+  background-color: var(--primary-color);
+  color: white;
+  border: none;
+  padding: 0.25rem;
+}
diff --git a/src/assets/styles/theme.scss b/src/assets/styles/theme.scss
index 404594ca9..39a51c431 100644
--- a/src/assets/styles/theme.scss
+++ b/src/assets/styles/theme.scss
@@ -8,6 +8,7 @@
 @import 'components/defaults';
 
 // Components
+@import 'components/checkbox';
 
 @import 'components/dataview';
 @import 'components/datatable';
diff --git a/src/components/RoarDataTable.vue b/src/components/RoarDataTable.vue
index 4b92388b8..a7ac530c3 100644
--- a/src/components/RoarDataTable.vue
+++ b/src/components/RoarDataTable.vue
@@ -976,23 +976,6 @@ const emit = defineEmits(['export-all', 'selection', 'reset-filters', 'export-se
   margin-bottom: 3px;
 }
 
-.p-checkbox .p-checkbox-box {
-  border: 2px solid var(--surface-300);
-  background: var(--surface-a);
-  width: 16px;
-  height: 16px;
-  color: var(--text-color);
-  border-radius: var(--border-radius);
-  transition: none;
-}
-
-.p-checkbox-box.p-component.p-highlight {
-  background-color: var(--primary-color);
-  color: white;
-  border: none;
-  padding: 0.25rem;
-}
-
 .circle {
   border-color: white;
   display: inline-block;
diff --git a/src/styles.css b/src/styles.css
index 26da547d6..944a74ce0 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -3,7 +3,6 @@
 /*// | both the main app and testing.              |*/
 /*// ***************************************/
 
-@import 'primevue/resources/primevue.css';
 @import 'primeicons/primeicons.css';
 @import 'primeflex/primeflex.scss';