diff --git a/client/src/components/Common/Abbreviation.vue b/client/src/components/Common/Abbreviation.vue
index c1d0cc7ca0b9..75a787b73235 100644
--- a/client/src/components/Common/Abbreviation.vue
+++ b/client/src/components/Common/Abbreviation.vue
@@ -1,5 +1,9 @@
 <script setup lang="ts">
-const props = defineProps<{ explanation: string }>();
+interface Props {
+    explanation: string;
+}
+
+const props = defineProps<Props>();
 </script>
 
 <template>
diff --git a/client/src/components/Common/ButtonSpinner.vue b/client/src/components/Common/ButtonSpinner.vue
index 3fae4906ca9c..e2b8def400c1 100644
--- a/client/src/components/Common/ButtonSpinner.vue
+++ b/client/src/components/Common/ButtonSpinner.vue
@@ -1,14 +1,37 @@
+<script setup lang="ts">
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faPlay, faSpinner } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { BButton } from "bootstrap-vue";
+
+library.add(faPlay, faSpinner);
+
+interface Props {
+    title: string;
+    wait?: boolean;
+    tooltip?: string;
+    disabled?: boolean;
+}
+
+withDefaults(defineProps<Props>(), {
+    wait: false,
+    tooltip: undefined,
+    disabled: false,
+});
+</script>
+
 <template>
-    <b-button
+    <BButton
         v-if="wait"
         v-b-tooltip.hover.bottom
         disabled
         variant="info"
         title="Please Wait..."
         class="d-flex flex-nowrap align-items-center text-nowrap">
-        <FontAwesomeIcon icon="spinner" class="mr-2" spin />{{ title }}
-    </b-button>
-    <b-button
+        <FontAwesomeIcon :icon="faSpinner" class="mr-2" spin />
+        {{ title }}
+    </BButton>
+    <BButton
         v-else
         v-b-tooltip.hover.bottom
         variant="primary"
@@ -16,38 +39,7 @@
         :title="tooltip"
         :disabled="disabled"
         @click="$emit('onClick')">
-        <FontAwesomeIcon icon="play" class="mr-2" />{{ title }}
-    </b-button>
+        <FontAwesomeIcon :icon="faPlay" class="mr-2" />
+        {{ title }}
+    </BButton>
 </template>
-<script>
-import { library } from "@fortawesome/fontawesome-svg-core";
-import { faPlay, faSpinner } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-
-library.add(faSpinner);
-library.add(faPlay);
-
-export default {
-    components: {
-        FontAwesomeIcon,
-    },
-    props: {
-        title: {
-            type: String,
-            required: true,
-        },
-        wait: {
-            type: Boolean,
-            default: false,
-        },
-        tooltip: {
-            type: String,
-            default: null,
-        },
-        disabled: {
-            type: Boolean,
-            default: false,
-        },
-    },
-};
-</script>
diff --git a/client/src/components/Common/DelayedInput.vue b/client/src/components/Common/DelayedInput.vue
index 641b206e7da5..490c33de45d1 100644
--- a/client/src/components/Common/DelayedInput.vue
+++ b/client/src/components/Common/DelayedInput.vue
@@ -1,6 +1,96 @@
+<script setup lang="ts">
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faAngleDoubleDown, faAngleDoubleUp, faSpinner, faTimes } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { BButton, BFormInput, BInputGroup, BInputGroupAppend } from "bootstrap-vue";
+import { onMounted, ref, watch } from "vue";
+
+import localize from "@/utils/localization";
+
+library.add(faAngleDoubleDown, faAngleDoubleUp, faSpinner, faTimes);
+
+interface Props {
+    query?: string;
+    delay?: number;
+    loading?: boolean;
+    placeholder?: string;
+    showAdvanced?: boolean;
+    enableAdvanced?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    query: "",
+    delay: 1000,
+    loading: false,
+    placeholder: "Enter your search term here.",
+    showAdvanced: false,
+    enableAdvanced: false,
+});
+
+const emit = defineEmits<{
+    (e: "change", query: string): void;
+    (e: "onToggle", showAdvanced: boolean): void;
+}>();
+
+const queryInput = ref<string>();
+const queryCurrent = ref<string>();
+const queryTimer = ref<any>(null);
+const titleClear = ref("Clear Search (esc)");
+const titleAdvanced = ref("Toggle Advanced Search");
+const toolInput = ref<HTMLInputElement | null>(null);
+
+function clearTimer() {
+    if (queryTimer.value) {
+        clearTimeout(queryTimer.value);
+    }
+}
+
+function delayQuery(query: string) {
+    clearTimer();
+    if (query) {
+        queryTimer.value = setTimeout(() => {
+            setQuery(query);
+        }, props.delay);
+    } else {
+        setQuery(query);
+    }
+}
+
+function setQuery(queryNew: string) {
+    clearTimer();
+
+    if (queryCurrent.value !== queryInput.value || queryCurrent.value !== queryNew) {
+        queryCurrent.value = queryInput.value = queryNew;
+        emit("change", queryCurrent.value);
+    }
+}
+
+function clearBox() {
+    setQuery("");
+    toolInput.value?.focus();
+}
+
+function onToggle() {
+    emit("onToggle", !props.showAdvanced);
+}
+
+watch(
+    () => props.query,
+    (newQuery) => {
+        setQuery(newQuery);
+    }
+);
+
+onMounted(() => {
+    if (props.query) {
+        setQuery(props.query);
+    }
+});
+</script>
+
 <template>
-    <b-input-group>
-        <b-input
+    <BInputGroup>
+        <BFormInput
             ref="toolInput"
             v-model="queryInput"
             class="search-query"
@@ -11,111 +101,33 @@
             @input="delayQuery"
             @change="setQuery"
             @keydown.esc="setQuery('')" />
-        <b-input-group-append>
-            <b-button
+
+        <BInputGroupAppend>
+            <BButton
                 v-if="enableAdvanced"
                 v-b-tooltip.hover.bottom.noninteractive
                 aria-haspopup="true"
                 size="sm"
                 :pressed="showAdvanced"
                 :variant="showAdvanced ? 'info' : 'secondary'"
-                :title="titleAdvanced | l"
+                :title="localize(titleAdvanced)"
                 data-description="toggle advanced search"
                 @click="onToggle">
-                <icon v-if="showAdvanced" fixed-width icon="angle-double-up" />
-                <icon v-else fixed-width icon="angle-double-down" />
-            </b-button>
-            <b-button
+                <FontAwesomeIcon v-if="showAdvanced" fixed-width :icon="faAngleDoubleUp" />
+                <FontAwesomeIcon v-else fixed-width :icon="faAngleDoubleDown" />
+            </BButton>
+
+            <BButton
                 v-b-tooltip.hover.bottom.noninteractive
                 aria-haspopup="true"
                 class="search-clear"
                 size="sm"
-                :title="titleClear | l"
+                :title="localize(titleClear)"
                 data-description="reset query"
                 @click="clearBox">
-                <icon v-if="loading" fixed-width icon="spinner" spin />
-                <icon v-else fixed-width icon="times" />
-            </b-button>
-        </b-input-group-append>
-    </b-input-group>
+                <FontAwesomeIcon v-if="loading" fixed-width :icon="faSpinner" spin />
+                <FontAwesomeIcon v-else fixed-width :icon="faTimes" />
+            </BButton>
+        </BInputGroupAppend>
+    </BInputGroup>
 </template>
-<script>
-export default {
-    props: {
-        query: {
-            type: String,
-            default: "",
-        },
-        loading: {
-            type: Boolean,
-            default: false,
-        },
-        placeholder: {
-            type: String,
-            default: "Enter your search term here.",
-        },
-        delay: {
-            type: Number,
-            default: 1000,
-        },
-        enableAdvanced: {
-            type: Boolean,
-            default: false,
-        },
-        showAdvanced: {
-            type: Boolean,
-            default: false,
-        },
-    },
-    data() {
-        return {
-            queryInput: null,
-            queryTimer: null,
-            queryCurrent: null,
-            titleClear: "Clear Search (esc)",
-            titleAdvanced: "Toggle Advanced Search",
-        };
-    },
-    watch: {
-        query(queryNew) {
-            this.setQuery(queryNew);
-        },
-    },
-    created() {
-        if (this.query) {
-            this.setQuery(this.query);
-        }
-    },
-    methods: {
-        clearTimer() {
-            if (this.queryTimer) {
-                clearTimeout(this.queryTimer);
-            }
-        },
-        delayQuery(query) {
-            this.clearTimer();
-            if (query) {
-                this.queryTimer = setTimeout(() => {
-                    this.setQuery(query);
-                }, this.delay);
-            } else {
-                this.setQuery(query);
-            }
-        },
-        setQuery(queryNew) {
-            this.clearTimer();
-            if (this.queryCurrent !== this.queryInput || this.queryCurrent !== queryNew) {
-                this.queryCurrent = this.queryInput = queryNew;
-                this.$emit("change", this.queryCurrent);
-            }
-        },
-        clearBox() {
-            this.setQuery("");
-            this.$refs.toolInput.focus();
-        },
-        onToggle() {
-            this.$emit("onToggle", !this.showAdvanced);
-        },
-    },
-};
-</script>
diff --git a/client/src/components/Common/ExportForm.vue b/client/src/components/Common/ExportForm.vue
index da769f538923..df58871a369b 100644
--- a/client/src/components/Common/ExportForm.vue
+++ b/client/src/components/Common/ExportForm.vue
@@ -53,9 +53,11 @@ const doExport = () => {
                 :require-writable="true"
                 :filter-options="defaultExportFilterOptions" />
         </BFormGroup>
+
         <BFormGroup id="fieldset-name" label-for="name" :description="nameDescription" class="mt-3">
             <BFormInput id="name" v-model="name" :placeholder="namePlaceholder" required />
         </BFormGroup>
+
         <BRow align-h="end">
             <BCol>
                 <BButton
diff --git a/client/src/components/Common/ExportRDMForm.vue b/client/src/components/Common/ExportRDMForm.vue
index 4fab58cd1fcc..ee7411a70e61 100644
--- a/client/src/components/Common/ExportRDMForm.vue
+++ b/client/src/components/Common/ExportRDMForm.vue
@@ -86,6 +86,7 @@ function clearInputs() {
 
         <BFormRadioGroup v-model="exportChoice" class="export-radio-group">
             <BFormRadio id="radio-new" v-localize name="exportChoice" value="new"> Export to new record </BFormRadio>
+
             <BFormRadio id="radio-existing" v-localize name="exportChoice" value="existing">
                 Export to existing draft record
             </BFormRadio>
@@ -98,6 +99,7 @@ function clearInputs() {
                         <b>{{ newEntry.name }}</b>
                         <span v-localize> draft record has been created in the repository.</span>
                     </p>
+
                     <p v-if="newEntry.external_link">
                         You can preview the record in the repository, further edit its metadata and decide when to
                         publish it at
@@ -105,7 +107,9 @@ function clearInputs() {
                             <b>{{ newEntry.external_link }}</b>
                         </ExternalLink>
                     </p>
+
                     <p v-localize>Please use the button below to upload the exported {{ props.what }} to the record.</p>
+
                     <BButton
                         id="export-button-new-record"
                         v-localize
@@ -130,6 +134,7 @@ function clearInputs() {
                         :require-writable="true"
                         :filter-options="includeOnlyRDMCompatible" />
                 </BFormGroup>
+
                 <BFormGroup
                     id="fieldset-record-name"
                     label-for="record-name"
@@ -141,9 +146,11 @@ function clearInputs() {
                         :placeholder="recordNamePlaceholder"
                         required />
                 </BFormGroup>
+
                 <p v-localize>
                     You need to create the new record in a repository before exporting the {{ props.what }} to it.
                 </p>
+
                 <BButton
                     id="create-record-button"
                     v-localize
@@ -167,6 +174,7 @@ function clearInputs() {
                     :require-writable="true"
                     :filter-options="includeOnlyRDMCompatible" />
             </BFormGroup>
+
             <BButton
                 id="export-button-existing-record"
                 v-localize
diff --git a/client/src/components/Common/ExportRecordDetails.vue b/client/src/components/Common/ExportRecordDetails.vue
index 2ac68e951593..e520a8995825 100644
--- a/client/src/components/Common/ExportRecordDetails.vue
+++ b/client/src/components/Common/ExportRecordDetails.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import { library } from "@fortawesome/fontawesome-svg-core";
 import {
     faCheckCircle,
@@ -8,34 +8,33 @@ import {
     faLink,
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { BAlert, BCard, BCardTitle } from "bootstrap-vue";
-import LoadingSpan from "components/LoadingSpan";
+import { BAlert, BButton, BCard, BCardTitle } from "bootstrap-vue";
 import { computed } from "vue";
 
 import { ExportRecordModel } from "./models/exportRecordModel";
 
-library.add(faExclamationCircle, faExclamationTriangle, faCheckCircle, faClock, faLink);
-
-const props = defineProps({
-    record: {
-        type: ExportRecordModel,
-        required: true,
-    },
-    objectType: {
-        type: String,
-        required: true,
-    },
-    actionMessage: {
-        type: String,
-        default: null,
-    },
-    actionMessageVariant: {
-        type: String,
-        default: "info",
-    },
+import LoadingSpan from "@/components/LoadingSpan.vue";
+
+library.add(faCheckCircle, faClock, faExclamationCircle, faExclamationTriangle, faLink);
+
+interface Props {
+    record: ExportRecordModel;
+    objectType: string;
+    actionMessage?: string;
+    actionMessageVariant?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    actionMessage: undefined,
+    actionMessageVariant: "info",
 });
 
-const emit = defineEmits(["onReimport", "onDownload", "onCopyDownloadLink", "onActionMessageDismissed"]);
+const emit = defineEmits<{
+    (e: "onActionMessageDismissed"): void;
+    (e: "onReimport", record: ExportRecordModel): void;
+    (e: "onDownload", record: ExportRecordModel): void;
+    (e: "onCopyDownloadLink", record: ExportRecordModel): void;
+}>();
 
 const title = computed(() => (props.record.isReady ? `Exported` : `Export started`));
 const preparingMessage = computed(
@@ -64,30 +63,34 @@ function onMessageDismissed() {
         <BCardTitle>
             <b>{{ title }}</b> {{ props.record.elapsedTime }}
         </BCardTitle>
+
         <p v-if="!props.record.isPreparing">
             Format: <b class="record-archive-format">{{ props.record.modelStoreFormat }}</b>
         </p>
+
         <span v-if="props.record.isPreparing">
             <LoadingSpan :message="preparingMessage" />
         </span>
         <div v-else>
             <div v-if="props.record.hasFailed">
                 <FontAwesomeIcon
-                    icon="exclamation-circle"
+                    :icon="faExclamationCircle"
                     class="text-danger record-failed-icon"
                     title="Export failed" />
+
                 <span>
                     Something failed during this export. Please try again and if the problem persist contact your
                     administrator.
                 </span>
+
                 <BAlert show variant="danger">{{ props.record.errorMessage }}</BAlert>
             </div>
             <div v-else-if="props.record.isUpToDate" title="Up to date">
-                <FontAwesomeIcon icon="check-circle" class="text-success record-up-to-date-icon" />
+                <FontAwesomeIcon :icon="faCheckCircle" class="text-success record-up-to-date-icon" />
                 <span> This export record contains the latest changes of the {{ props.objectType }}. </span>
             </div>
             <div v-else>
-                <FontAwesomeIcon icon="exclamation-triangle" class="text-warning record-outdated-icon" />
+                <FontAwesomeIcon :icon="faExclamationTriangle" class="text-warning record-outdated-icon" />
                 <span>
                     This export is outdated and contains the changes of this {{ props.objectType }} from
                     {{ props.record.elapsedTime }}.
@@ -96,17 +99,18 @@ function onMessageDismissed() {
 
             <p v-if="props.record.canExpire" class="mt-3">
                 <span v-if="props.record.hasExpired">
-                    <FontAwesomeIcon icon="clock" class="text-danger record-expired-icon" /> This download link has
-                    expired.
+                    <FontAwesomeIcon :icon="faClock" class="text-danger record-expired-icon" />
+                    This download link has expired.
                 </span>
                 <span v-else>
-                    <FontAwesomeIcon icon="clock" class="text-warning record-expiration-warning-icon" /> This download
-                    link expires {{ props.record.expirationElapsedTime }}.
+                    <FontAwesomeIcon :icon="faClock" class="text-warning record-expiration-warning-icon" />
+                    This download link expires {{ props.record.expirationElapsedTime }}.
                 </span>
             </p>
 
             <div v-if="props.record.isReady">
                 <p class="mt-3">You can do the following actions with this {{ props.objectType }} export:</p>
+
                 <BAlert
                     v-if="props.actionMessage !== null"
                     :variant="props.actionMessageVariant"
@@ -117,28 +121,30 @@ function onMessageDismissed() {
                     {{ props.actionMessage }}
                 </BAlert>
                 <div v-else class="actions">
-                    <b-button
+                    <BButton
                         v-if="props.record.canDownload"
                         class="record-download-btn"
                         variant="primary"
                         @click="downloadObject">
                         Download
-                    </b-button>
-                    <b-button
+                    </BButton>
+
+                    <BButton
                         v-if="props.record.canDownload"
                         title="Copy Download Link"
                         size="sm"
                         variant="link"
                         @click.stop="copyDownloadLink">
-                        <FontAwesomeIcon icon="link" />
-                    </b-button>
-                    <b-button
+                        <FontAwesomeIcon :icon="faLink" />
+                    </BButton>
+
+                    <BButton
                         v-if="props.record.canReimport"
                         class="record-reimport-btn"
                         variant="primary"
                         @click="reimportObject">
                         Reimport
-                    </b-button>
+                    </BButton>
                 </div>
             </div>
         </div>
diff --git a/client/src/components/Common/ExportRecordTable.vue b/client/src/components/Common/ExportRecordTable.vue
index e71fbcaf0a19..16de362510a2 100644
--- a/client/src/components/Common/ExportRecordTable.vue
+++ b/client/src/components/Common/ExportRecordTable.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import { library } from "@fortawesome/fontawesome-svg-core";
 import {
     faCheckCircle,
@@ -12,16 +12,20 @@ import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BButton, BButtonGroup, BButtonToolbar, BCard, BCollapse, BLink, BTable } from "bootstrap-vue";
 import { computed, ref } from "vue";
 
-library.add(faExclamationCircle, faCheckCircle, faDownload, faFileImport, faSpinner, faLink);
+import { type ExportRecordModel } from "./models/exportRecordModel";
 
-const props = defineProps({
-    records: {
-        type: Array,
-        required: true,
-    },
-});
+library.add(faCheckCircle, faDownload, faExclamationCircle, faFileImport, faLink, faSpinner);
 
-const emit = defineEmits(["onReimport", "onDownload"]);
+interface Props {
+    records: ExportRecordModel[];
+}
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+    (e: "onReimport", record: ExportRecordModel): void;
+    (e: "onDownload", record: ExportRecordModel): void;
+    (e: "onCopyDownloadLink", record: ExportRecordModel): void;
+}>();
 
 const fields = [
     { key: "elapsedTime", label: "Exported" },
@@ -33,17 +37,18 @@ const fields = [
 ];
 
 const isExpanded = ref(false);
+
 const title = computed(() => (isExpanded.value ? `Hide old export records` : `Show old export records`));
 
-async function reimportObject(record) {
+async function reimportObject(record: ExportRecordModel) {
     emit("onReimport", record);
 }
 
-function downloadObject(record) {
+function downloadObject(record: ExportRecordModel) {
     emit("onDownload", record);
 }
 
-function copyDownloadLink(record) {
+function copyDownloadLink(record: ExportRecordModel) {
     emit("onCopyDownloadLink", record);
 }
 </script>
@@ -57,57 +62,65 @@ function copyDownloadLink(record) {
             @click="isExpanded = !isExpanded">
             {{ title }}
         </BLink>
+
         <BCollapse id="collapse-previous" v-model="isExpanded">
             <BCard>
                 <BTable :items="props.records" :fields="fields">
                     <template v-slot:cell(elapsedTime)="row">
                         <span :title="row.item.date">{{ row.value }}</span>
                     </template>
+
                     <template v-slot:cell(format)="row">
                         <span>{{ row.item.modelStoreFormat }}</span>
                     </template>
+
                     <template v-slot:cell(expires)="row">
                         <span v-if="row.item.hasExpired">Expired</span>
-                        <span v-else-if="row.item.expirationDate" :title="row.item.expirationDate">{{
-                            row.item.expirationElapsedTime
-                        }}</span>
+
+                        <span v-else-if="row.item.expirationDate" :title="row.item.expirationDate">
+                            {{ row.item.expirationElapsedTime }}
+                        </span>
+
                         <span v-else>No</span>
                     </template>
+
                     <template v-slot:cell(isUpToDate)="row">
                         <FontAwesomeIcon
                             v-if="row.item.isUpToDate"
-                            icon="check-circle"
+                            :icon="faCheckCircle"
                             class="text-success"
                             title="This export record contains the latest changes." />
                         <FontAwesomeIcon
                             v-else
-                            icon="exclamation-circle"
+                            :icon="faExclamationCircle"
                             class="text-danger"
                             title="This export record is outdated. Please consider generating a new export if you need the latest changes." />
                     </template>
+
                     <template v-slot:cell(isReady)="row">
                         <FontAwesomeIcon
                             v-if="row.item.isReady"
-                            icon="check-circle"
+                            :icon="faCheckCircle"
                             class="text-success"
                             title="Ready to download or import." />
                         <FontAwesomeIcon
                             v-else-if="row.item.isPreparing"
-                            icon="spinner"
+                            :icon="faSpinner"
                             spin
                             class="text-info"
                             title="Exporting in progress..." />
                         <FontAwesomeIcon
                             v-else-if="row.item.hasExpired"
-                            icon="exclamation-circle"
+                            :icon="faExclamationCircle"
                             class="text-danger"
                             title="The export has expired." />
                         <FontAwesomeIcon
                             v-else
-                            icon="exclamation-circle"
+                            :icon="faExclamationCircle"
                             class="text-danger"
                             title="The export failed." />
                     </template>
+
                     <template v-slot:cell(actions)="row">
                         <BButtonToolbar aria-label="Actions">
                             <BButtonGroup>
@@ -116,20 +129,22 @@ function copyDownloadLink(record) {
                                     :disabled="!row.item.canDownload"
                                     title="Download"
                                     @click="downloadObject(row.item)">
-                                    <FontAwesomeIcon icon="download" />
+                                    <FontAwesomeIcon :icon="faDownload" />
                                 </BButton>
+
                                 <BButton
                                     v-if="row.item.canDownload"
                                     title="Copy Download Link"
                                     @click.stop="copyDownloadLink(row.item)">
-                                    <FontAwesomeIcon icon="link" />
+                                    <FontAwesomeIcon :icon="faLink" />
                                 </BButton>
+
                                 <BButton
                                     v-b-tooltip.hover.bottom
                                     :disabled="!row.item.canReimport"
                                     title="Reimport"
                                     @click="reimportObject(row.item)">
-                                    <FontAwesomeIcon icon="file-import" />
+                                    <FontAwesomeIcon :icon="faFileImport" />
                                 </BButton>
                             </BButtonGroup>
                         </BButtonToolbar>
diff --git a/client/src/components/Common/FilterMenu.test.js b/client/src/components/Common/FilterMenu.test.ts
similarity index 91%
rename from client/src/components/Common/FilterMenu.test.js
rename to client/src/components/Common/FilterMenu.test.ts
index 5f7598ece3fd..de6f90493508 100644
--- a/client/src/components/Common/FilterMenu.test.js
+++ b/client/src/components/Common/FilterMenu.test.ts
@@ -1,9 +1,10 @@
-import { mount } from "@vue/test-utils";
-import { HistoryFilters } from "components/History/HistoryFilters";
-import { getLocalVue } from "tests/jest/helpers";
-import Filtering, { compare, contains, equals, toBool, toDate } from "utils/filtering";
+import { getLocalVue } from "@tests/jest/helpers";
+import { mount, Wrapper } from "@vue/test-utils";
 
-import FilterMenu from "./FilterMenu";
+import { HistoryFilters } from "@/components/History/HistoryFilters";
+import Filtering, { compare, contains, equals, toBool, toDate } from "@/utils/filtering";
+
+import FilterMenu from "./FilterMenu.vue";
 
 const localVue = getLocalVue();
 const options = [
@@ -55,18 +56,19 @@ const validTestFilters = {
         type: Boolean,
         handler: equals("bool_is", "bool_is", toBool),
         menuItem: true,
-        boolType: "is",
+        boolType: "is" as const,
     },
     /** A valid filter, just not included in menu */
     not_included: { handler: contains("not_included"), menuItem: false },
 };
-const TestFilters = new Filtering(validTestFilters, false);
+
+const TestFilters = new Filtering(validTestFilters, undefined);
 
 describe("FilterMenu", () => {
-    let wrapper;
+    let wrapper: Wrapper<Vue>;
 
-    function setUpWrapper(name, placeholder, filterClass) {
-        wrapper = mount(FilterMenu, {
+    function setUpWrapper(name: string, placeholder: string, filterClass: Filtering<unknown>) {
+        wrapper = mount(FilterMenu as object, {
             propsData: {
                 name: name,
                 placeholder: placeholder,
@@ -87,12 +89,12 @@ describe("FilterMenu", () => {
         await searchButton.trigger("click");
     }
 
-    async function expectCorrectEmits(showAdvanced, filterText, filterClass) {
-        const filterEmit = wrapper.emitted()["update:filter-text"].length - 1;
-        const toggleEmit = wrapper.emitted()["update:show-advanced"].length - 1;
-        expect(wrapper.emitted()["update:show-advanced"][toggleEmit][0]).toEqual(showAdvanced);
-        await wrapper.setProps({ showAdvanced: wrapper.emitted()["update:show-advanced"][toggleEmit][0] });
-        const receivedText = wrapper.emitted()["update:filter-text"][filterEmit][0];
+    async function expectCorrectEmits(showAdvanced: boolean, filterText: string, filterClass: Filtering<unknown>) {
+        const filterEmit = (wrapper.emitted()["update:filter-text"]?.length ?? 0) - 1;
+        const toggleEmit = (wrapper.emitted()?.["update:show-advanced"]?.length ?? 0) - 1;
+        expect(wrapper.emitted()["update:show-advanced"]?.[toggleEmit]?.[0]).toEqual(showAdvanced);
+        await wrapper.setProps({ showAdvanced: wrapper.emitted()["update:show-advanced"]?.[toggleEmit]?.[0] });
+        const receivedText = wrapper.emitted()["update:filter-text"]?.[filterEmit]?.[0];
         const receivedDict = filterClass.getQueryDict(receivedText);
         const parsedDict = filterClass.getQueryDict(filterText);
         expect(receivedDict).toEqual(parsedDict);
@@ -166,8 +168,8 @@ describe("FilterMenu", () => {
         const radioBtnGrp = wrapper.find("[data-description='filter bool_def']").findAll(".btn-secondary");
         expect(radioBtnGrp.length).toBe(options.length);
         for (let i = 0; i < options.length; i++) {
-            expect(radioBtnGrp.at(i).text()).toBe(options[i].text);
-            expect(radioBtnGrp.at(i).props().value).toBe(options[i].value);
+            expect(radioBtnGrp.at(i).text()).toBe(options[i]?.text);
+            expect(radioBtnGrp.at(i).props().value).toBe(options[i]?.value);
             expect(radioBtnGrp.at(i).props().checked).toBe(null);
         }
         await radioBtnGrp.at(1).find("input").setChecked(); // click "Yes"
diff --git a/client/src/components/Common/FilterMenu.vue b/client/src/components/Common/FilterMenu.vue
index b418d1ca2355..75272a7d2e5f 100644
--- a/client/src/components/Common/FilterMenu.vue
+++ b/client/src/components/Common/FilterMenu.vue
@@ -1,4 +1,8 @@
 <script setup lang="ts">
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faAngleDoubleUp, faQuestion, faRedo, faSearch } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { BButton, BModal } from "bootstrap-vue";
 import { kebabCase } from "lodash";
 import { computed, ref, watch } from "vue";
 
@@ -11,6 +15,8 @@ import FilterMenuInput from "@/components/Common/FilterMenuInput.vue";
 import FilterMenuMultiTags from "@/components/Common/FilterMenuMultiTags.vue";
 import FilterMenuRanged from "@/components/Common/FilterMenuRanged.vue";
 
+library.add(faAngleDoubleUp, faQuestion, faRedo, faSearch);
+
 interface BackendFilterError {
     err_msg: string;
     err_code: number;
@@ -23,41 +29,40 @@ interface BackendFilterError {
     ValueError?: string;
 }
 
-const props = withDefaults(
-    defineProps<{
-        /** A name for the menu */
-        name?: string;
-        /** A placeholder for the main search input */
-        placeholder?: string;
-        /** The delay (in ms) before the main filter is applied */
-        debounceDelay?: number;
-        /** The `Filtering` class to use */
-        filterClass: Filtering<any>;
-        /** The current filter text in the main field */
-        filterText?: string;
-        /** Whether a help `<template>` has been provided for the `<slot>` */
-        hasHelp?: boolean;
-        /** Whether to replace default Cancel (toggle) button with Clear */
-        hasClearBtn?: boolean;
-        /** Triggers the loading icon */
-        loading?: boolean;
-        /** Default `linked`: filters react to current `filterText` */
-        menuType?: "linked" | "separate" | "standalone";
-        /** A `BackendFilterError` if provided */
-        searchError?: BackendFilterError;
-        /** Whether the advanced menu is currently expanded */
-        showAdvanced?: boolean;
-    }>(),
-    {
-        name: "Menu",
-        placeholder: "search for items",
-        debounceDelay: 500,
-        filterText: "",
-        menuType: "linked",
-        showAdvanced: false,
-        searchError: undefined,
-    }
-);
+interface Props {
+    /** A name for the menu */
+    name?: string;
+    /** A placeholder for the main search input */
+    placeholder?: string;
+    /** The delay (in ms) before the main filter is applied */
+    debounceDelay?: number;
+    /** The `Filtering` class to use */
+    filterClass: Filtering<any>;
+    /** The current filter text in the main field */
+    filterText?: string;
+    /** Whether a help `<template>` has been provided for the `<slot>` */
+    hasHelp?: boolean;
+    /** Whether to replace default Cancel (toggle) button with Clear */
+    hasClearBtn?: boolean;
+    /** Triggers the loading icon */
+    loading?: boolean;
+    /** Default `linked`: filters react to current `filterText` */
+    menuType?: "linked" | "separate" | "standalone";
+    /** A `BackendFilterError` if provided */
+    searchError?: BackendFilterError;
+    /** Whether the advanced menu is currently expanded */
+    showAdvanced?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    name: "Menu",
+    placeholder: "search for items",
+    debounceDelay: 500,
+    filterText: "",
+    menuType: "linked",
+    showAdvanced: false,
+    searchError: undefined,
+});
 
 const emit = defineEmits<{
     (e: "update:filter-text", filter: string): void;
@@ -155,7 +160,8 @@ watch(
             :placeholder="props.placeholder"
             @change="updateFilterText"
             @onToggle="onToggle" />
-        <b-button
+
+        <BButton
             v-if="props.menuType == 'separate' && props.showAdvanced"
             v-b-tooltip.hover.bottom.noninteractive
             class="w-100"
@@ -165,8 +171,9 @@ watch(
             title="Toggle Advanced Search"
             data-description="wide toggle advanced search"
             @click="onToggle">
-            <icon fixed-width icon="angle-double-up" />
-        </b-button>
+            <FontAwesomeIcon fixed-width :icon="faAngleDoubleUp" />
+        </BButton>
+
         <div
             v-if="props.menuType == 'standalone' || props.showAdvanced"
             class="mt-2"
@@ -181,7 +188,6 @@ watch(
                         @change="onOption"
                         @on-enter="onSearch"
                         @on-esc="onToggle" />
-
                     <FilterMenuRanged
                         v-else-if="validFilters[filter]?.isRangeInput"
                         class="m-0"
@@ -193,7 +199,6 @@ watch(
                         @change="onOption"
                         @on-enter="onSearch"
                         @on-esc="onToggle" />
-
                     <FilterMenuMultiTags
                         v-else-if="validFilters[filter]?.type == 'MultiTags'"
                         :name="filter"
@@ -201,7 +206,6 @@ watch(
                         :filters="filters"
                         :identifier="identifier"
                         @change="onOption" />
-
                     <FilterMenuInput
                         v-else
                         :name="filter"
@@ -217,28 +221,34 @@ watch(
 
             <!-- Perform search or cancel out (or open help modal for whole Menu if exists) -->
             <div class="mt-3">
-                <b-button
+                <BButton
                     :id="`${identifier}-advanced-filter-submit`"
                     class="mr-1"
                     size="sm"
                     variant="primary"
                     data-description="apply filters"
                     @click="onSearch">
-                    <icon icon="search" />
+                    <FontAwesomeIcon :icon="faSearch" />
+
                     <span v-localize>Search</span>
-                </b-button>
-                <b-button v-if="props.menuType !== 'standalone'" size="sm" @click="onToggle">
-                    <icon icon="redo" />
+                </BButton>
+
+                <BButton v-if="props.menuType !== 'standalone'" size="sm" @click="onToggle">
+                    <FontAwesomeIcon :icon="faRedo" />
+
                     <span v-localize>Cancel</span>
-                </b-button>
-                <b-button v-if="props.hasHelp" title="Search Help" size="sm" @click="showHelp = true">
-                    <icon icon="question" />
-                </b-button>
+                </BButton>
+
+                <BButton v-if="props.hasHelp" title="Search Help" size="sm" @click="showHelp = true">
+                    <FontAwesomeIcon :icon="faQuestion" />
+                </BButton>
+
                 <span> </span>
-                <b-modal v-if="props.hasHelp" v-model="showHelp" :title="`${props.name} Advanced Search Help`" ok-only>
+
+                <BModal v-if="props.hasHelp" v-model="showHelp" :title="`${props.name} Advanced Search Help`" ok-only>
                     <!-- Slot for Menu help section -->
                     <slot name="menu-help-text"></slot>
-                </b-modal>
+                </BModal>
             </div>
         </div>
     </div>
diff --git a/client/src/components/Common/FilterMenuBoolean.vue b/client/src/components/Common/FilterMenuBoolean.vue
index 8c54665d8a9b..0fcdb2d76b95 100644
--- a/client/src/components/Common/FilterMenuBoolean.vue
+++ b/client/src/components/Common/FilterMenuBoolean.vue
@@ -1,11 +1,21 @@
 <script setup lang="ts">
+import { BFormGroup, BFormRadioGroup } from "bootstrap-vue";
 import { computed } from "vue";
 
-const props = defineProps({
-    filter: { type: Object, required: true },
-    name: { type: String, required: true },
-    filters: { type: Object, required: true },
-});
+type FilterType = string | boolean | undefined;
+
+interface Props {
+    name: string;
+    filter: {
+        boolType?: string;
+        placeholder: string;
+    };
+    filters: {
+        [k: string]: FilterType;
+    };
+}
+
+const props = defineProps<Props>();
 
 const boolType = computed(() => props.filter.boolType || "default");
 
@@ -22,9 +32,9 @@ const options =
           ];
 
 const emit = defineEmits<{
-    (e: "change", name: string, value: boolean | string | undefined): void;
-    (e: "on-enter"): void;
     (e: "on-esc"): void;
+    (e: "on-enter"): void;
+    (e: "change", name: string, value: FilterType): void;
 }>();
 
 const value = computed({
@@ -32,7 +42,7 @@ const value = computed({
         const value = props.filters[props.name];
         return value !== undefined ? value : "any";
     },
-    set: (newVal: boolean | string | undefined) => {
+    set: (newVal) => {
         const value = newVal !== null ? newVal : "any";
         emit("change", props.name, value);
     },
@@ -43,13 +53,14 @@ const value = computed({
     <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions -->
     <div @keyup.enter="emit('on-enter')" @keyup.esc="emit('on-esc')">
         <small>{{ props.filter.placeholder }}:</small>
-        <b-form-group class="m-0">
-            <b-form-radio-group
+
+        <BFormGroup class="m-0">
+            <BFormRadioGroup
                 v-model="value"
                 :options="options"
                 size="sm"
                 buttons
                 :data-description="`filter ${props.name}`" />
-        </b-form-group>
+        </BFormGroup>
     </div>
 </template>
diff --git a/client/src/components/Common/FilterMenuInput.vue b/client/src/components/Common/FilterMenuInput.vue
index 3c889a1800c9..14294c8acc3e 100644
--- a/client/src/components/Common/FilterMenuInput.vue
+++ b/client/src/components/Common/FilterMenuInput.vue
@@ -1,19 +1,45 @@
 <script setup lang="ts">
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faQuestion } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import {
+    BButton,
+    BFormDatalist,
+    BFormDatepicker,
+    BFormInput,
+    BInputGroup,
+    BInputGroupAppend,
+    BModal,
+} from "bootstrap-vue";
 import { capitalize } from "lodash";
-import { computed, type PropType, ref, watch } from "vue";
+import { computed, ref, watch } from "vue";
 
 import { ValidFilter } from "@/utils/filtering";
 
-const props = defineProps({
-    name: { type: String, required: true },
-    filter: { type: Object as PropType<ValidFilter<any>>, required: true },
-    filters: { type: Object, required: true },
-    error: { type: Object, default: null },
-    identifier: { type: String, required: true },
-});
+library.add(faQuestion);
+
+type FilterType = string | boolean | undefined;
+
+type ErrorType = {
+    index: string;
+    typeError: boolean;
+    msg: string;
+};
+
+interface Props {
+    name: string;
+    identifier: any;
+    error?: ErrorType;
+    filter: ValidFilter<any>;
+    filters: {
+        [k: string]: FilterType;
+    };
+}
+
+const props = defineProps<Props>();
 
 const emit = defineEmits<{
-    (e: "change", name: string, value: string): void;
+    (e: "change", name: string, value: FilterType): void;
     (e: "on-enter"): void;
     (e: "on-esc"): void;
 }>();
@@ -25,19 +51,6 @@ const localValue = ref(propValue.value);
 const helpToggle = ref(false);
 const modalTitle = `${capitalize(props.filter.placeholder)} Help`;
 
-watch(
-    () => localValue.value,
-    (newFilter: string) => {
-        emit("change", props.name, newFilter);
-    }
-);
-watch(
-    () => propValue.value,
-    (newFilter: string) => {
-        localValue.value = newFilter;
-    }
-);
-
 function hasError(field: string) {
     if (props.error && props.error.index == field) {
         return props.error.typeError || props.error.msg;
@@ -49,13 +62,28 @@ function onHelp(_: string, value: string) {
     helpToggle.value = false;
     localValue.value = value;
 }
+
+watch(
+    () => localValue.value,
+    (newFilter) => {
+        emit("change", props.name, newFilter);
+    }
+);
+
+watch(
+    () => propValue.value,
+    (newFilter) => {
+        localValue.value = newFilter;
+    }
+);
 </script>
 
 <template>
     <div>
         <small>Filter by {{ props.filter.placeholder }}:</small>
-        <b-input-group>
-            <b-form-input
+
+        <BInputGroup>
+            <BFormInput
                 :id="`${identifier}-advanced-filter-${props.name}`"
                 ref="filterMenuInput"
                 v-model="localValue"
@@ -66,26 +94,30 @@ function onHelp(_: string, value: string) {
                 :list="props.filter.datalist ? `${identifier}-${props.name}-selectList` : null"
                 @keyup.enter="emit('on-enter')"
                 @keyup.esc="emit('on-esc')" />
-            <b-form-datalist
+
+            <BFormDatalist
                 v-if="props.filter.datalist"
                 :id="`${identifier}-${props.name}-selectList`"
-                :options="props.filter.datalist"></b-form-datalist>
+                :options="props.filter.datalist" />
+
             <!-- append Help Modal for filter if included or/and datepciker if type: Date -->
-            <b-input-group-append>
-                <b-button v-if="props.filter.helpInfo" :title="modalTitle" size="sm" @click="helpToggle = true">
-                    <icon icon="question" />
-                </b-button>
-                <b-form-datepicker
+            <BInputGroupAppend>
+                <BButton v-if="props.filter.helpInfo" :title="modalTitle" size="sm" @click="helpToggle = true">
+                    <FontAwesomeIcon :icon="faQuestion" />
+                </BButton>
+
+                <BFormDatepicker
                     v-if="props.filter.type == Date"
                     v-model="localValue"
                     reset-button
                     button-only
                     size="sm" />
-            </b-input-group-append>
-        </b-input-group>
+            </BInputGroupAppend>
+        </BInputGroup>
+
         <!-- if a filter has help component, place it within a modal -->
         <span v-if="props.filter.helpInfo">
-            <b-modal v-model="helpToggle" :title="modalTitle" ok-only>
+            <BModal v-model="helpToggle" :title="modalTitle" ok-only>
                 <component
                     :is="props.filter.helpInfo"
                     v-if="typeof props.filter.helpInfo == 'object'"
@@ -93,7 +125,7 @@ function onHelp(_: string, value: string) {
                 <div v-else-if="typeof props.filter.helpInfo == 'string'">
                     <p>{{ props.filter.helpInfo }}</p>
                 </div>
-            </b-modal>
+            </BModal>
         </span>
     </div>
 </template>
diff --git a/client/src/components/Common/FilterMenuMultiTags.vue b/client/src/components/Common/FilterMenuMultiTags.vue
index 8434837470ef..d9c157d51092 100644
--- a/client/src/components/Common/FilterMenuMultiTags.vue
+++ b/client/src/components/Common/FilterMenuMultiTags.vue
@@ -1,19 +1,26 @@
 <script setup lang="ts">
-import { computed, type PropType, ref, watch } from "vue";
+import { BInputGroup } from "bootstrap-vue";
+import { computed, ref, watch } from "vue";
 
 import { ValidFilter } from "@/utils/filtering";
 
 import StatelessTags from "@/components/TagsMultiselect/StatelessTags.vue";
 
-const props = defineProps({
-    name: { type: String, required: true },
-    filter: { type: Object as PropType<ValidFilter<any>>, required: true },
-    filters: { type: Object, required: true },
-    identifier: { type: String, required: true },
-});
+type FilterType = string | boolean | undefined;
+
+interface Props {
+    name: string;
+    identifier: any;
+    filter: ValidFilter<any>;
+    filters: {
+        [k: string]: FilterType;
+    };
+}
+
+const props = defineProps<Props>();
 
 const emit = defineEmits<{
-    (e: "change", name: string, value: string): void;
+    (e: "change", name: string, value: FilterType): void;
 }>();
 
 const propValue = computed(() => props.filters[props.name]);
@@ -22,13 +29,14 @@ const localValue = ref(propValue.value);
 
 watch(
     () => localValue.value,
-    (newFilter: string) => {
+    (newFilter) => {
         emit("change", props.name, newFilter);
     }
 );
+
 watch(
     () => propValue.value,
-    (newFilter: string) => {
+    (newFilter) => {
         localValue.value = newFilter;
     }
 );
@@ -37,11 +45,12 @@ watch(
 <template>
     <div>
         <small>Filter by {{ props.filter.placeholder }}:</small>
-        <b-input-group :id="`${identifier}-advanced-filter-${props.name}`">
+
+        <BInputGroup :id="`${identifier}-advanced-filter-${props.name}`">
             <StatelessTags
                 :value="localValue"
                 :placeholder="`any ${props.filter.placeholder}`"
                 @input="(tags) => (localValue = tags)" />
-        </b-input-group>
+        </BInputGroup>
     </div>
 </template>
diff --git a/client/src/components/Common/FilterMenuRanged.vue b/client/src/components/Common/FilterMenuRanged.vue
index 25308df252f5..73ebcb316d44 100644
--- a/client/src/components/Common/FilterMenuRanged.vue
+++ b/client/src/components/Common/FilterMenuRanged.vue
@@ -1,18 +1,31 @@
 <script setup lang="ts">
-import { computed, type PropType, ref, watch } from "vue";
+import { BFormDatepicker, BFormInput, BInputGroup, BInputGroupAppend } from "bootstrap-vue";
+import { computed, ref, watch } from "vue";
 
 import { ValidFilter } from "@/utils/filtering";
 
-const props = defineProps({
-    name: { type: String, required: true },
-    filter: { type: Object as PropType<ValidFilter<any>>, required: true },
-    filters: { type: Object, required: true },
-    error: { type: Object, default: null },
-    identifier: { type: String, required: true },
-});
+type FilterType = string | boolean | undefined;
+
+type ErrorType = {
+    index: string;
+    typeError: boolean;
+    msg: string;
+};
+
+interface Props {
+    name: string;
+    identifier: any;
+    error?: ErrorType;
+    filter: ValidFilter<any>;
+    filters: {
+        [k: string]: FilterType;
+    };
+}
+
+const props = defineProps<Props>();
 
 const emit = defineEmits<{
-    (e: "change", name: string, value: string): void;
+    (e: "change", name: string, value: FilterType): void;
     (e: "on-enter"): void;
     (e: "on-esc"): void;
 }>();
@@ -25,57 +38,61 @@ const valueGt = computed(() => props.filters[localNameGt.value]);
 const localValueGt = ref(valueGt.value);
 const localValueLt = ref(valueLt.value);
 
+const isDateType = computed(() => props.filter.type == Date);
+
+function hasError(field: string) {
+    if (props.error && props.error.index == field) {
+        return props.error.typeError || props.error.msg;
+    }
+    return "";
+}
+
+function localPlaceholder(comp: "gt" | "lt") {
+    if (comp == "gt") {
+        const field = isDateType.value ? "after" : "greater";
+        return `${props.filter.placeholder} ${field}`;
+    } else {
+        const field = isDateType.value ? "before" : "lower";
+        return `${props.filter.placeholder} ${field}`;
+    }
+}
+
 watch(
     () => localValueGt.value,
-    (newFilter: string) => {
+    (newFilter) => {
         emit("change", localNameGt.value, newFilter);
     }
 );
+
 watch(
     () => localValueLt.value,
-    (newFilter: string) => {
+    (newFilter) => {
         emit("change", localNameLt.value, newFilter);
     }
 );
+
 watch(
     () => valueGt.value,
-    (newFilter: string) => {
+    (newFilter) => {
         localValueGt.value = newFilter;
     }
 );
+
 watch(
     () => valueLt.value,
-    (newFilter: string) => {
+    (newFilter) => {
         localValueLt.value = newFilter;
     }
 );
-
-const isDateType = computed(() => props.filter.type == Date);
-
-function hasError(field: string) {
-    if (props.error && props.error.index == field) {
-        return props.error.typeError || props.error.msg;
-    }
-    return "";
-}
-
-function localPlaceholder(comp: "gt" | "lt") {
-    if (comp == "gt") {
-        const field = isDateType.value ? "after" : "greater";
-        return `${props.filter.placeholder} ${field}`;
-    } else {
-        const field = isDateType.value ? "before" : "lower";
-        return `${props.filter.placeholder} ${field}`;
-    }
-}
 </script>
 
 <template>
     <div>
         <small>Filter by {{ props.filter.placeholder }}:</small>
-        <b-input-group>
+
+        <BInputGroup>
             <!---------------------------- GREATER THAN ---------------------------->
-            <b-form-input
+            <BFormInput
                 :id="`${props.identifier}-advanced-filter-${localNameGt}`"
                 v-model="localValueGt"
                 v-b-tooltip.focus.v-danger="hasError(localNameGt)"
@@ -84,13 +101,14 @@ function localPlaceholder(comp: "gt" | "lt") {
                 :placeholder="localPlaceholder('gt')"
                 @keyup.enter="emit('on-enter')"
                 @keyup.esc="emit('on-esc')" />
-            <b-input-group-append v-if="isDateType">
-                <b-form-datepicker v-model="localValueGt" reset-button button-only size="sm" />
-            </b-input-group-append>
+
+            <BInputGroupAppend v-if="isDateType">
+                <BFormDatepicker v-model="localValueGt" reset-button button-only size="sm" />
+            </BInputGroupAppend>
             <!--------------------------------------------------------------------->
 
             <!---------------------------- LESSER THAN ---------------------------->
-            <b-form-input
+            <BFormInput
                 :id="`${props.identifier}-advanced-filter-${localNameLt}`"
                 v-model="localValueLt"
                 v-b-tooltip.focus.v-danger="hasError(localNameLt)"
@@ -99,10 +117,11 @@ function localPlaceholder(comp: "gt" | "lt") {
                 :placeholder="localPlaceholder('lt')"
                 @keyup.enter="emit('on-enter')"
                 @keyup.esc="emit('on-esc')" />
-            <b-input-group-append v-if="isDateType">
-                <b-form-datepicker v-model="localValueLt" reset-button button-only size="sm" />
-            </b-input-group-append>
+
+            <BInputGroupAppend v-if="isDateType">
+                <BFormDatepicker v-model="localValueLt" reset-button button-only size="sm" />
+            </BInputGroupAppend>
             <!--------------------------------------------------------------------->
-        </b-input-group>
+        </BInputGroup>
     </div>
 </template>
diff --git a/client/src/components/Common/Heading.vue b/client/src/components/Common/Heading.vue
index 3e460965f62f..815680b6dc88 100644
--- a/client/src/components/Common/Heading.vue
+++ b/client/src/components/Common/Heading.vue
@@ -2,7 +2,7 @@
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { computed } from "vue";
 
-const props = defineProps<{
+interface Props {
     h1?: boolean;
     h2?: boolean;
     h3?: boolean;
@@ -14,7 +14,9 @@ const props = defineProps<{
     inline?: boolean;
     size?: "xl" | "lg" | "md" | "sm" | "text";
     icon?: string | [string, string];
-}>();
+}
+
+const props = defineProps<Props>();
 
 const sizeClass = computed(() => {
     return `h-${props.size ?? "lg"}`;
diff --git a/client/src/components/Common/PublishedItem.vue b/client/src/components/Common/PublishedItem.vue
index 246cae7db0b4..7f4aa88fc250 100644
--- a/client/src/components/Common/PublishedItem.vue
+++ b/client/src/components/Common/PublishedItem.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, type PropType } from "vue";
+import { computed } from "vue";
 
 import { usePanels } from "@/composables/usePanels";
 
@@ -19,12 +19,11 @@ interface Item {
     title?: string;
 }
 
-const props = defineProps({
-    item: {
-        type: Object as PropType<Item | null>,
-        default: null,
-    },
-});
+interface Props {
+    item?: Item;
+}
+
+const props = defineProps<Props>();
 
 const modelTitle = computed(() => {
     const modelClass = props.item?.model_class ?? "Item";
@@ -53,31 +52,45 @@ const { showActivityBar, showToolbox } = usePanels();
 <template>
     <div id="columns" class="d-flex">
         <ActivityBar v-if="showActivityBar" />
+
         <FlexPanel v-if="showToolbox" side="left">
             <ToolPanel />
         </FlexPanel>
+
         <div id="center" class="m-3 w-100 overflow-auto d-flex flex-column">
             <slot />
         </div>
+
         <FlexPanel side="right">
             <div v-if="modelTitle" class="m-3">
                 <h1 class="h-sm">About this {{ modelTitle }}</h1>
+
                 <h2 class="h-md text-break">{{ props.item?.title ?? props.item?.name }}</h2>
+
                 <img :src="gravatarSource" alt="user avatar" />
+
                 <StatelessTags v-if="props.item?.tags" class="tags mt-2" :value="props.item.tags" disabled />
+
                 <br />
+
                 <h2 class="h-sm">Author</h2>
+
                 <div>{{ owner }}</div>
+
                 <hr />
+
                 <h2 class="h-sm">Related Pages</h2>
+
                 <div>
                     <router-link :to="urlAll">All published {{ plural }}.</router-link>
                 </div>
+
                 <div>
                     <router-link :to="publishedByUser"> Published {{ plural }} by {{ owner }}. </router-link>
                 </div>
             </div>
             <LoadingSpan v-else message="Loading item details" />
+
             <div class="flex-fill" />
         </FlexPanel>
     </div>
diff --git a/client/src/components/Common/TextShort.vue b/client/src/components/Common/TextShort.vue
index 00d32e2dbdfe..012c770c6137 100644
--- a/client/src/components/Common/TextShort.vue
+++ b/client/src/components/Common/TextShort.vue
@@ -1,16 +1,15 @@
 <script setup lang="ts">
 import { computed } from "vue";
 
-const props = defineProps({
-    text: {
-        type: String,
-        required: true,
-    },
-    maxLength: {
-        type: Number,
-        default: 24,
-    },
+interface Props {
+    text: string;
+    maxLength?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    maxLength: 24,
 });
+
 const text = computed(() => {
     if (props.text.length > props.maxLength) {
         const partialText = props.text.slice(0, props.maxLength);
diff --git a/client/src/components/Common/Webhook.vue b/client/src/components/Common/Webhook.vue
index 8a656234f875..bb24f7118183 100644
--- a/client/src/components/Common/Webhook.vue
+++ b/client/src/components/Common/Webhook.vue
@@ -1,27 +1,28 @@
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+
+import Webhooks from "@/utils/webhooks";
+
+interface Props {
+    type: string;
+    toolId?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    toolId: undefined,
+});
+
+const webhook = ref(null);
+
+onMounted(() => {
+    new Webhooks.WebhookView({
+        webhook,
+        type: props.type,
+        toolId: props.toolId,
+    });
+});
+</script>
+
 <template>
     <div id="webhook-view" ref="webhook" />
 </template>
-<script>
-import Webhooks from "utils/webhooks";
-
-export default {
-    props: {
-        type: {
-            type: String,
-            required: true,
-        },
-        toolId: {
-            type: String,
-            default: null,
-        },
-    },
-    mounted() {
-        const el = this.$refs["webhook"];
-        new Webhooks.WebhookView({
-            el,
-            type: this.type,
-            toolId: this.toolId,
-        });
-    },
-};
-</script>