From 6dba0e30d135b424188648b202b1029bac7124ed Mon Sep 17 00:00:00 2001
From: tiwari-nishant <tiwari.nishant@ibm.com>
Date: Fri, 26 Sep 2025 14:32:46 +0530
Subject: [PATCH 1/6] =?UTF-8?q?Removed=20Mutation=20and=20added=20fixes=20?=
 =?UTF-8?q?=E2=80=A2=20Fixed=20Warnings=20=E2=80=A2=20Removed=20Mutation?=
 =?UTF-8?q?=20=E2=80=A2=20Fixed=20Table=20loadings=20in=20Inventories=20an?=
 =?UTF-8?q?d=20LEDs?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../AppNavigation/AppNavigation.vue           |  4 +--
 src/components/Global/Alert.vue               |  1 -
 src/components/Global/FormFile.vue            |  2 +-
 src/components/Global/InfoTooltip.vue         |  1 -
 src/components/Global/InfoTooltipPassword.vue |  1 -
 src/components/Global/Search.vue              |  2 +-
 src/components/Global/StatusIcon.vue          |  1 -
 src/components/Global/TableRowAction.vue      |  2 +-
 src/components/Global/TableToolbar.vue        |  2 +-
 src/components/Global/Toast.vue               |  2 +-
 .../modules/HardwareStatus/AssemblyStore.js   | 30 -------------------
 .../HardwareStatus/Inventory/Inventory.vue    |  2 +-
 .../Inventory/InventoryFabricAdapters.vue     |  2 +-
 .../Inventory/InventoryTableBmcManager.vue    |  2 +-
 .../Inventory/InventoryTableDimmSlot.vue      |  4 +--
 .../Inventory/InventoryTableFans.vue          |  2 +-
 .../Inventory/InventoryTablePcieSlots.vue     | 11 ++-----
 .../Inventory/InventoryTablePowerSupplies.vue | 11 ++-----
 .../PcieTopology/IdentifyLedsModal.vue        |  2 +-
 .../PcieTopology/PcieTopology.vue             |  2 +-
 .../DeconfigurationRecords.vue                |  2 +-
 .../FactoryReset/FactoryResetModal.vue        |  2 +-
 .../Operations/Firmware/FirmwareCardsBmc.vue  |  2 +-
 .../Firmware/FirmwareFormUpdate.vue           |  2 +-
 src/views/Overview/ModalAssetTag.vue          |  2 +-
 .../CapacityOnDemandOrderInfo.vue             |  2 +-
 .../SystemParameters/AggressivePrefetch.vue   |  2 +-
 .../SystemParameters/FrequencyCap.vue         |  2 +-
 .../SystemParameters/LateralCastOut.vue       |  2 +-
 .../RuntimeProcessorDiagnostic.vue            |  2 +-
 .../Certificates/ModalUploadCertificate.vue   |  2 +-
 src/views/SecurityAndAccess/Ldap/Ldap.vue     |  2 +-
 .../UserManagement/ModalSettings.vue          |  4 +--
 .../UserManagement/ModalUser.vue              |  2 +-
 src/views/Settings/DateTime/DateTime.vue      |  2 +-
 .../HardwareDeconfiguration.vue               |  2 +-
 36 files changed, 36 insertions(+), 84 deletions(-)

diff --git a/src/components/AppNavigation/AppNavigation.vue b/src/components/AppNavigation/AppNavigation.vue
index daeea5c6b7..01b920b110 100644
--- a/src/components/AppNavigation/AppNavigation.vue
+++ b/src/components/AppNavigation/AppNavigation.vue
@@ -190,7 +190,7 @@ svg {
   }
 }
 .nav-nochild {
-  ::v-deep a.router-link-exact-active {
+  :deep(a.router-link-exact-active) {
     position: relative;
     background-color: $secondary;
     color: $light;
@@ -209,7 +209,7 @@ svg {
     background-color: #dadada;
     color: $light;
   }
-  ::v-deep a {
+  :deep(a) {
     color: $secondary;
   }
 }
diff --git a/src/components/Global/Alert.vue b/src/components/Global/Alert.vue
index d449bb2d38..d14f67f809 100644
--- a/src/components/Global/Alert.vue
+++ b/src/components/Global/Alert.vue
@@ -23,7 +23,6 @@
 </template>
 
 <script setup>
-import { defineProps } from 'vue';
 import StatusIcon from '../Global/StatusIcon.vue';
 
 defineProps({
diff --git a/src/components/Global/FormFile.vue b/src/components/Global/FormFile.vue
index 73a761ee2b..47f21678ec 100644
--- a/src/components/Global/FormFile.vue
+++ b/src/components/Global/FormFile.vue
@@ -41,7 +41,7 @@
 </template>
 
 <script setup>
-import { ref, computed, defineEmits } from 'vue';
+import { ref, computed } from 'vue';
 import IconClose from '@carbon/icons-vue/es/close/20';
 import eventBus from '@/eventBus';
 
diff --git a/src/components/Global/InfoTooltip.vue b/src/components/Global/InfoTooltip.vue
index b06f3b5370..7ea9a73624 100644
--- a/src/components/Global/InfoTooltip.vue
+++ b/src/components/Global/InfoTooltip.vue
@@ -14,7 +14,6 @@
 
 <script setup>
 import IconTooltip from '@carbon/icons-vue/es/information/16';
-import { defineProps } from 'vue';
 
 defineProps({
   status: {
diff --git a/src/components/Global/InfoTooltipPassword.vue b/src/components/Global/InfoTooltipPassword.vue
index 3fe1a49cc7..8af7deb649 100644
--- a/src/components/Global/InfoTooltipPassword.vue
+++ b/src/components/Global/InfoTooltipPassword.vue
@@ -32,7 +32,6 @@
 </template>
 
 <script setup>
-import { defineProps } from 'vue';
 import IconTooltip from '@carbon/icons-vue/es/information/16';
 
 defineProps({
diff --git a/src/components/Global/Search.vue b/src/components/Global/Search.vue
index fd1d61ad2e..913634de1c 100644
--- a/src/components/Global/Search.vue
+++ b/src/components/Global/Search.vue
@@ -39,7 +39,7 @@
 <script setup>
 import IconSearch from '@carbon/icons-vue/es/search/16';
 import IconClose from '@carbon/icons-vue/es/close/20';
-import { ref, defineEmits } from 'vue';
+import { ref } from 'vue';
 import i18n from '@/i18n';
 // eslint-disable-next-line vue/valid-define-emits
 const emit = defineEmits();
diff --git a/src/components/Global/StatusIcon.vue b/src/components/Global/StatusIcon.vue
index dd75d1301c..ad559ce2c8 100644
--- a/src/components/Global/StatusIcon.vue
+++ b/src/components/Global/StatusIcon.vue
@@ -9,7 +9,6 @@
 </template>
 
 <script setup>
-import { defineProps } from 'vue';
 import IconInfo from '@carbon/icons-vue/es/information--filled/20';
 import IconSuccess from '@carbon/icons-vue/es/checkmark--filled/20';
 import IconWarning from '@carbon/icons-vue/es/warning--filled/20';
diff --git a/src/components/Global/TableRowAction.vue b/src/components/Global/TableRowAction.vue
index ac5d96f916..7def89109d 100644
--- a/src/components/Global/TableRowAction.vue
+++ b/src/components/Global/TableRowAction.vue
@@ -55,7 +55,7 @@
 </template>
 
 <script setup>
-import { defineProps, computed } from 'vue';
+import { computed } from 'vue';
 import { omit } from 'lodash';
 
 const props = defineProps({
diff --git a/src/components/Global/TableToolbar.vue b/src/components/Global/TableToolbar.vue
index 57966ef63e..3f4b702a8a 100644
--- a/src/components/Global/TableToolbar.vue
+++ b/src/components/Global/TableToolbar.vue
@@ -97,7 +97,7 @@ $toolbar-height: 46px;
 
 // Using v-deep to style export slot child-element
 // depricated and vue-js 3
-.toolbar-actions ::v-deep .btn {
+.toolbar-actions :deep(.btn) {
   position: relative;
   &:after {
     content: '';
diff --git a/src/components/Global/Toast.vue b/src/components/Global/Toast.vue
index 8a42c16da4..ba134ea934 100644
--- a/src/components/Global/Toast.vue
+++ b/src/components/Global/Toast.vue
@@ -19,7 +19,7 @@
 </template>
 
 <script setup>
-import { ref, defineProps, computed } from 'vue';
+import { ref, computed } from 'vue';
 import i18n from '@/i18n';
 import StatusIcon from './StatusIcon.vue';
 import { formatTime } from '../utilities/dateFilter';
diff --git a/src/store/modules/HardwareStatus/AssemblyStore.js b/src/store/modules/HardwareStatus/AssemblyStore.js
index 378979cfa9..bde8976b61 100644
--- a/src/store/modules/HardwareStatus/AssemblyStore.js
+++ b/src/store/modules/HardwareStatus/AssemblyStore.js
@@ -9,36 +9,6 @@ export const AssemblyStore = defineStore('assemblyStore', {
   getters: {
     assembliesGetter: (state) => state.assemblies,
   },
-  mutations: {
-    setAssemblyInfo: (state, data) => {
-      state.assemblies = data.map((assembly) => {
-        const {
-          MemberId,
-          PartNumber,
-          SerialNumber,
-          SparePartNumber,
-          Model,
-          Name,
-          Location,
-          Status,
-          LocationIndicatorActive,
-        } = assembly;
-        return {
-          id: MemberId,
-          health: Status?.Health,
-          partNumber: PartNumber,
-          serialNumber: SerialNumber,
-          sparePartNumber: SparePartNumber,
-          model: Model,
-          name: Name,
-          locationNumber: Location?.PartLocation?.ServiceLabel,
-          identifyLed: LocationIndicatorActive,
-          status: Status?.State === 'Enabled' ? 'Present' : Status?.State,
-          uri: assembly['@odata.id'],
-        };
-      });
-    },
-  },
   actions: {
     setAssemblyInfo(data) {
       this.assemblies = data.map((assembly) => {
diff --git a/src/views/HardwareStatus/Inventory/Inventory.vue b/src/views/HardwareStatus/Inventory/Inventory.vue
index 6fbd334e42..ddd2467f15 100644
--- a/src/views/HardwareStatus/Inventory/Inventory.vue
+++ b/src/views/HardwareStatus/Inventory/Inventory.vue
@@ -418,7 +418,7 @@ function currentTabUpdate(index) {
 
 <style lang="scss" scoped>
 .no-underline-link {
-  ::v-deep a {
+  :deep(a) {
     text-decoration: none;
     &:hover {
       text-decoration: underline;
diff --git a/src/views/HardwareStatus/Inventory/InventoryFabricAdapters.vue b/src/views/HardwareStatus/Inventory/InventoryFabricAdapters.vue
index 341b765d17..bb07b5aa89 100644
--- a/src/views/HardwareStatus/Inventory/InventoryFabricAdapters.vue
+++ b/src/views/HardwareStatus/Inventory/InventoryFabricAdapters.vue
@@ -179,7 +179,7 @@ const props = defineProps({
   },
 });
 
-const isBusy = ref(false);
+const isBusy = ref(true);
 const searchTotalFilteredRows = ref(0);
 const fields = reactive([
   {
diff --git a/src/views/HardwareStatus/Inventory/InventoryTableBmcManager.vue b/src/views/HardwareStatus/Inventory/InventoryTableBmcManager.vue
index 5d2c0a691d..6a0ee547ac 100644
--- a/src/views/HardwareStatus/Inventory/InventoryTableBmcManager.vue
+++ b/src/views/HardwareStatus/Inventory/InventoryTableBmcManager.vue
@@ -147,7 +147,7 @@ const { t } = useI18n();
 
 const bmcStore = stores.BmcStore();
 
-const isBusy = ref(false);
+const isBusy = ref(true);
 
 const fields = reactive([
   {
diff --git a/src/views/HardwareStatus/Inventory/InventoryTableDimmSlot.vue b/src/views/HardwareStatus/Inventory/InventoryTableDimmSlot.vue
index 1187bd4939..8537ddbff8 100644
--- a/src/views/HardwareStatus/Inventory/InventoryTableDimmSlot.vue
+++ b/src/views/HardwareStatus/Inventory/InventoryTableDimmSlot.vue
@@ -181,7 +181,7 @@ const { successToast, errorToast } = useToast();
 
 const memoryStore = stores.MemoryStore();
 
-const isBusy = ref(false);
+const isBusy = ref(true);
 const searchTotalFilteredRows = ref(0);
 
 const fields = reactive([
@@ -308,7 +308,7 @@ function getStatusTooltip(status) {
     transform: rotate(180deg);
   }
 }
-.total-fixed-header ::v-deep thead th {
+.total-fixed-header :deep(thead th) {
   position: sticky;
   top: 0;
   z-index: 1;
diff --git a/src/views/HardwareStatus/Inventory/InventoryTableFans.vue b/src/views/HardwareStatus/Inventory/InventoryTableFans.vue
index 649912fd9c..7eb569a9f8 100644
--- a/src/views/HardwareStatus/Inventory/InventoryTableFans.vue
+++ b/src/views/HardwareStatus/Inventory/InventoryTableFans.vue
@@ -189,7 +189,7 @@ const props = defineProps({
   },
 });
 
-const isBusy = ref(false);
+const isBusy = ref(true);
 const searchTotalFilteredRows = ref(0);
 
 const fields = reactive([
diff --git a/src/views/HardwareStatus/Inventory/InventoryTablePcieSlots.vue b/src/views/HardwareStatus/Inventory/InventoryTablePcieSlots.vue
index f57d5e9fdd..04270f4116 100644
--- a/src/views/HardwareStatus/Inventory/InventoryTablePcieSlots.vue
+++ b/src/views/HardwareStatus/Inventory/InventoryTablePcieSlots.vue
@@ -79,14 +79,7 @@
 <script setup>
 import PageSection from '@/components/Global/PageSection.vue';
 import TableCellCount from '@/components/Global/TableCellCount.vue';
-import {
-  defineProps,
-  reactive,
-  ref,
-  computed,
-  watch,
-  onBeforeMount,
-} from 'vue';
+import { reactive, ref, computed, watch, onBeforeMount } from 'vue';
 
 import InfoTooltip from '@/components/Global/InfoTooltip.vue';
 import useSearchFilterComposable from '../../../components/Composables/useSearchFilterComposable';
@@ -210,7 +203,7 @@ function hasIdentifyLed(identifyLed) {
 
 <style lang="scss" scoped>
 .no-underline-link {
-  ::v-deep a {
+  :deep(a) {
     text-decoration: none;
     &:hover {
       text-decoration: underline;
diff --git a/src/views/HardwareStatus/Inventory/InventoryTablePowerSupplies.vue b/src/views/HardwareStatus/Inventory/InventoryTablePowerSupplies.vue
index 91a7b5929f..c6a776d76e 100644
--- a/src/views/HardwareStatus/Inventory/InventoryTablePowerSupplies.vue
+++ b/src/views/HardwareStatus/Inventory/InventoryTablePowerSupplies.vue
@@ -170,14 +170,7 @@ import InfoTooltip from '@/components/Global/InfoTooltip.vue';
 import Search from '@/components/Global/Search.vue';
 import useTableRowExpandComposable from '../../../components/Composables/useTableRowExpandComposable';
 import useSearchFilterComposable from '../../../components/Composables/useSearchFilterComposable';
-import {
-  defineProps,
-  ref,
-  reactive,
-  computed,
-  watch,
-  onBeforeMount,
-} from 'vue';
+import { ref, reactive, computed, watch, onBeforeMount } from 'vue';
 import { useI18n } from 'vue-i18n';
 import stores from '../../../store';
 import eventBus from '@/eventBus';
@@ -202,7 +195,7 @@ const props = defineProps({
   },
 });
 
-const isBusy = ref(false);
+const isBusy = ref(true);
 const fields = reactive([
   {
     key: 'expandRow',
diff --git a/src/views/HardwareStatus/PcieTopology/IdentifyLedsModal.vue b/src/views/HardwareStatus/PcieTopology/IdentifyLedsModal.vue
index 9d36e9dff9..74d246ad4c 100644
--- a/src/views/HardwareStatus/PcieTopology/IdentifyLedsModal.vue
+++ b/src/views/HardwareStatus/PcieTopology/IdentifyLedsModal.vue
@@ -92,7 +92,7 @@
 </template>
 
 <script setup>
-import { ref, defineProps, watch, computed, nextTick } from 'vue';
+import { ref, watch, computed, nextTick } from 'vue';
 import stores from '../../../store';
 import useDataFormatterGlobal from '../../../components/Composables/useDataFormatterGlobal';
 import useToast from '@/components/Composables/useToastComposable';
diff --git a/src/views/HardwareStatus/PcieTopology/PcieTopology.vue b/src/views/HardwareStatus/PcieTopology/PcieTopology.vue
index 887fdd206c..0badd2fd80 100644
--- a/src/views/HardwareStatus/PcieTopology/PcieTopology.vue
+++ b/src/views/HardwareStatus/PcieTopology/PcieTopology.vue
@@ -517,7 +517,7 @@ function onFiltered(filteredItems) {
 }
 
 .alert-message-link {
-  ::v-deep a {
+  :deep(a) {
     text-decoration: none;
     &:hover {
       text-decoration: underline;
diff --git a/src/views/Logs/DeconfigurationRecords/DeconfigurationRecords.vue b/src/views/Logs/DeconfigurationRecords/DeconfigurationRecords.vue
index 9777afb495..52ba01e8f1 100644
--- a/src/views/Logs/DeconfigurationRecords/DeconfigurationRecords.vue
+++ b/src/views/Logs/DeconfigurationRecords/DeconfigurationRecords.vue
@@ -448,7 +448,7 @@ const toggleAll = (checked) => {
   overflow-x: hidden;
 }
 .deconfig-records-title {
-  ::v-deep a {
+  :deep(a) {
     text-decoration: none;
     &:hover {
       text-decoration: underline;
diff --git a/src/views/Operations/FactoryReset/FactoryResetModal.vue b/src/views/Operations/FactoryReset/FactoryResetModal.vue
index b3c4dababd..182238f039 100644
--- a/src/views/Operations/FactoryReset/FactoryResetModal.vue
+++ b/src/views/Operations/FactoryReset/FactoryResetModal.vue
@@ -49,7 +49,7 @@
 </template>
 
 <script setup>
-import { computed, defineProps, ref, defineEmits } from 'vue';
+import { computed, ref } from 'vue';
 import stores from '@/store';
 import useVuelidateComposable from '@/components/Composables/useVuelidateComposable';
 import { useVuelidate } from '@vuelidate/core';
diff --git a/src/views/Operations/Firmware/FirmwareCardsBmc.vue b/src/views/Operations/Firmware/FirmwareCardsBmc.vue
index d1d53c63f3..726823c420 100644
--- a/src/views/Operations/Firmware/FirmwareCardsBmc.vue
+++ b/src/views/Operations/Firmware/FirmwareCardsBmc.vue
@@ -68,7 +68,7 @@
 </template>
 
 <script setup>
-import { ref, computed, watch, defineEmits } from 'vue';
+import { ref, computed, watch } from 'vue';
 import i18n from '@/i18n';
 import eventBus from '@/eventBus';
 import useLoadingBar, {
diff --git a/src/views/Operations/Firmware/FirmwareFormUpdate.vue b/src/views/Operations/Firmware/FirmwareFormUpdate.vue
index 65bd58a179..bdd8650234 100644
--- a/src/views/Operations/Firmware/FirmwareFormUpdate.vue
+++ b/src/views/Operations/Firmware/FirmwareFormUpdate.vue
@@ -82,7 +82,7 @@
 </template>
 
 <script setup>
-import { ref, computed, watch, defineEmits, onBeforeMount } from 'vue';
+import { ref, computed, watch, onBeforeMount } from 'vue';
 import { useVuelidate } from '@vuelidate/core';
 import { requiredIf } from '@vuelidate/validators';
 import i18n from '@/i18n';
diff --git a/src/views/Overview/ModalAssetTag.vue b/src/views/Overview/ModalAssetTag.vue
index 63b8a675ef..3b51596257 100644
--- a/src/views/Overview/ModalAssetTag.vue
+++ b/src/views/Overview/ModalAssetTag.vue
@@ -39,7 +39,7 @@
 </template>
 
 <script setup>
-import { ref, watch, defineProps, nextTick, computed } from 'vue';
+import { ref, watch, nextTick, computed } from 'vue';
 import useVuelidateComposable from '@/components/Composables/useVuelidateComposable';
 import { useVuelidate } from '@vuelidate/core';
 import { required } from '@vuelidate/validators';
diff --git a/src/views/ResourceManagement/CapacityOnDemand/CapacityOnDemandOrderInfo.vue b/src/views/ResourceManagement/CapacityOnDemand/CapacityOnDemandOrderInfo.vue
index b19e2364ac..0aae13b87b 100644
--- a/src/views/ResourceManagement/CapacityOnDemand/CapacityOnDemandOrderInfo.vue
+++ b/src/views/ResourceManagement/CapacityOnDemand/CapacityOnDemandOrderInfo.vue
@@ -191,7 +191,7 @@ const systemAnchor = computed(() => {
 
 <style lang="scss" scoped>
 .no-underline-link {
-  ::v-deep a {
+  :deep(a) {
     text-decoration: none;
     &:hover {
       text-decoration: underline;
diff --git a/src/views/ResourceManagement/SystemParameters/AggressivePrefetch.vue b/src/views/ResourceManagement/SystemParameters/AggressivePrefetch.vue
index de232af857..defed89508 100644
--- a/src/views/ResourceManagement/SystemParameters/AggressivePrefetch.vue
+++ b/src/views/ResourceManagement/SystemParameters/AggressivePrefetch.vue
@@ -28,7 +28,7 @@
 </template>
 
 <script setup>
-import { computed, defineProps } from 'vue';
+import { computed } from 'vue';
 import InfoTooltip from '@/components/Global/InfoTooltip.vue';
 import useToastComposable from '@/components/Composables/useToastComposable';
 import stores from '@/store';
diff --git a/src/views/ResourceManagement/SystemParameters/FrequencyCap.vue b/src/views/ResourceManagement/SystemParameters/FrequencyCap.vue
index 35c32d583a..3ab9ef4174 100644
--- a/src/views/ResourceManagement/SystemParameters/FrequencyCap.vue
+++ b/src/views/ResourceManagement/SystemParameters/FrequencyCap.vue
@@ -91,7 +91,7 @@
 </template>
 
 <script setup>
-import { computed, defineProps, ref, onBeforeMount } from 'vue';
+import { computed, ref, onBeforeMount } from 'vue';
 import { requiredIf, between, numeric } from '@vuelidate/validators';
 import stores from '@/store';
 import { useVuelidate } from '@vuelidate/core';
diff --git a/src/views/ResourceManagement/SystemParameters/LateralCastOut.vue b/src/views/ResourceManagement/SystemParameters/LateralCastOut.vue
index 6cf33b9f38..ac6381334d 100644
--- a/src/views/ResourceManagement/SystemParameters/LateralCastOut.vue
+++ b/src/views/ResourceManagement/SystemParameters/LateralCastOut.vue
@@ -32,7 +32,7 @@
 <script setup>
 import InfoTooltip from '@/components/Global/InfoTooltip.vue';
 import stores from '@/store';
-import { computed, defineProps } from 'vue';
+import { computed } from 'vue';
 import useToastComposable from '@/components/Composables/useToastComposable';
 
 const Toast = useToastComposable();
diff --git a/src/views/ResourceManagement/SystemParameters/RuntimeProcessorDiagnostic.vue b/src/views/ResourceManagement/SystemParameters/RuntimeProcessorDiagnostic.vue
index 78216b21c7..84493fdbdd 100644
--- a/src/views/ResourceManagement/SystemParameters/RuntimeProcessorDiagnostic.vue
+++ b/src/views/ResourceManagement/SystemParameters/RuntimeProcessorDiagnostic.vue
@@ -202,7 +202,7 @@
 </template>
 
 <script setup>
-import { computed, defineProps } from 'vue';
+import { computed } from 'vue';
 import InfoTooltip from '@/components/Global/InfoTooltip.vue';
 import useToastComposable from '@/components/Composables/useToastComposable';
 import useLoadingBar from '@/components/Composables/useLoadingBarComposable';
diff --git a/src/views/SecurityAndAccess/Certificates/ModalUploadCertificate.vue b/src/views/SecurityAndAccess/Certificates/ModalUploadCertificate.vue
index 64c4072c17..23b9cfdb28 100644
--- a/src/views/SecurityAndAccess/Certificates/ModalUploadCertificate.vue
+++ b/src/views/SecurityAndAccess/Certificates/ModalUploadCertificate.vue
@@ -80,7 +80,7 @@
 <script setup>
 import { required, requiredIf } from '@vuelidate/validators';
 import { useVuelidate } from '@vuelidate/core';
-import { computed, defineProps, ref, watch, defineEmits } from 'vue';
+import { computed, ref, watch } from 'vue';
 import stores from '@/store';
 import useVuelidateComposable from '@/components/Composables/useVuelidateComposable';
 import FormFile from '@/components/Global/FormFile.vue';
diff --git a/src/views/SecurityAndAccess/Ldap/Ldap.vue b/src/views/SecurityAndAccess/Ldap/Ldap.vue
index c48b4d349b..7c96de02eb 100644
--- a/src/views/SecurityAndAccess/Ldap/Ldap.vue
+++ b/src/views/SecurityAndAccess/Ldap/Ldap.vue
@@ -478,7 +478,7 @@ function updateInputType(passwordType) {
 
 <style lang="scss" scoped>
 .no-underline-link {
-  ::v-deep a {
+  :deep(a) {
     text-decoration: none;
     &:hover {
       text-decoration: underline;
diff --git a/src/views/SecurityAndAccess/UserManagement/ModalSettings.vue b/src/views/SecurityAndAccess/UserManagement/ModalSettings.vue
index c1456ad8c7..3efd44a5d3 100644
--- a/src/views/SecurityAndAccess/UserManagement/ModalSettings.vue
+++ b/src/views/SecurityAndAccess/UserManagement/ModalSettings.vue
@@ -122,7 +122,7 @@
 </template>
 
 <script setup>
-import { ref, defineEmits } from 'vue';
+import { ref } from 'vue';
 import useVuelidateComposable from '@/components/Composables/useVuelidateComposable';
 import { useVuelidate } from '@vuelidate/core';
 import eventBus from '@/eventBus';
@@ -197,7 +197,7 @@ function handleSubmit() {
 function onOk(bvModalEvt) {
   bvModalEvt.preventDefault();
   handleSubmit();
-};
+}
 
 const closeModal = () => {
   v$.value.$reset();
diff --git a/src/views/SecurityAndAccess/UserManagement/ModalUser.vue b/src/views/SecurityAndAccess/UserManagement/ModalUser.vue
index d85156cf88..df7994a30d 100644
--- a/src/views/SecurityAndAccess/UserManagement/ModalUser.vue
+++ b/src/views/SecurityAndAccess/UserManagement/ModalUser.vue
@@ -273,7 +273,7 @@
 </template>
 
 <script setup>
-import { ref, defineProps, watch, computed, nextTick } from 'vue';
+import { ref, watch, computed, nextTick } from 'vue';
 import {
   required,
   maxLength,
diff --git a/src/views/Settings/DateTime/DateTime.vue b/src/views/Settings/DateTime/DateTime.vue
index 81619063dd..4c934e454f 100644
--- a/src/views/Settings/DateTime/DateTime.vue
+++ b/src/views/Settings/DateTime/DateTime.vue
@@ -596,7 +596,7 @@ const showCollapse = () => {
   color: black !important;
 }
 .no-underline-link {
-  ::v-deep a {
+  :deep(a) {
     text-decoration: none;
     &:hover {
       text-decoration: underline;
diff --git a/src/views/Settings/HardwareDeconfiguration/HardwareDeconfiguration.vue b/src/views/Settings/HardwareDeconfiguration/HardwareDeconfiguration.vue
index 15c56dfbe5..342cf3a5d8 100644
--- a/src/views/Settings/HardwareDeconfiguration/HardwareDeconfiguration.vue
+++ b/src/views/Settings/HardwareDeconfiguration/HardwareDeconfiguration.vue
@@ -67,7 +67,7 @@ onBeforeMount(() => {
 
 <style lang="scss" scoped>
 .hw-deconfig-title {
-  ::v-deep a {
+  :deep(a) {
     text-decoration: none;
     &:hover {
       text-decoration: underline;

From 5b6baf3029f77fe3f16a6ef25931372c684d3c2f Mon Sep 17 00:00:00 2001
From: tiwari-nishant <tiwari.nishant@ibm.com>
Date: Fri, 26 Sep 2025 14:57:11 +0530
Subject: [PATCH 2/6] Removed loading animations for tables

---
 src/locales/en-US.json                           |  1 +
 .../Inventory/InventoryFabricAdapters.vue        |  9 ++++++---
 .../Inventory/InventoryTableAssembly.vue         |  9 ++++++---
 .../Inventory/InventoryTableBmcManager.vue       |  8 +++++---
 .../Inventory/InventoryTableChassis.vue          |  8 +++++---
 .../Inventory/InventoryTableDimmSlot.vue         |  8 +++++---
 .../Inventory/InventoryTableFans.vue             |  9 ++++++---
 .../Inventory/InventoryTablePcieSlots.vue        |  9 ++++++---
 .../Inventory/InventoryTablePowerSupplies.vue    |  9 ++++++---
 .../Inventory/InventoryTableProcessors.vue       |  8 +++++---
 .../Inventory/InventoryTableSystem.vue           |  8 +++++---
 .../HardwareStatus/PcieTopology/PcieTopology.vue |  7 +++++--
 src/views/HardwareStatus/Sensors/Sensors.vue     |  7 +++++--
 src/views/Logs/AuditLogs/AuditLogs.vue           |  7 +++++--
 .../DeconfigurationRecords.vue                   | 16 ++++++++++++----
 src/views/Logs/Dumps/Dumps.vue                   |  7 +++++--
 src/views/Logs/EventLogs/EventLogs.vue           |  7 +++++--
 src/views/Logs/PostCodeLogs/PostCodeLogs.vue     |  7 +++++--
 .../Certificates/Certificates.vue                |  7 +++++--
 .../SecurityAndAccess/Ldap/TableRoleGroups.vue   |  7 +++++--
 .../SecurityAndAccess/Sessions/Sessions.vue      |  7 +++++--
 .../UserManagement/UserManagement.vue            |  7 +++++--
 .../HardwareDeconfiguration/MemoryDimms.vue      |  7 +++++--
 .../HardwareDeconfiguration/ProcessorCores.vue   |  7 +++++--
 24 files changed, 128 insertions(+), 58 deletions(-)

diff --git a/src/locales/en-US.json b/src/locales/en-US.json
index 8561f09e09..bb68c47411 100644
--- a/src/locales/en-US.json
+++ b/src/locales/en-US.json
@@ -105,6 +105,7 @@
       "fromDate": "From date",
       "items": "%{count} items",
       "itemsPerPage": "Items per page",
+      "loading": "Loading...",
       "selectAll": "Select all",
       "selectedItems": "%{filterCount} of %{count} items",
       "selectItem": "Select item",
diff --git a/src/views/HardwareStatus/Inventory/InventoryFabricAdapters.vue b/src/views/HardwareStatus/Inventory/InventoryFabricAdapters.vue
index bb07b5aa89..13d73bea2a 100644
--- a/src/views/HardwareStatus/Inventory/InventoryFabricAdapters.vue
+++ b/src/views/HardwareStatus/Inventory/InventoryFabricAdapters.vue
@@ -25,9 +25,10 @@
       :sort-desc="false"
       :filter="searchFilterInput"
       class="no-scroll-sticky"
-      :empty-text="$t('global.table.emptyMessage')"
+      :empty-text="
+        isBusy ? $t('global.table.loading') : $t('global.table.emptyMessage')
+      "
       :empty-filtered-text="$t('global.table.emptySearchMessage')"
-      :busy="isBusy"
       @filtered="onFiltered"
     >
       <template #head(identifyLed)="row">
@@ -179,7 +180,7 @@ const props = defineProps({
   },
 });
 
-const isBusy = ref(true);
+const isBusy = ref(false);
 const searchTotalFilteredRows = ref(0);
 const fields = reactive([
   {
@@ -222,6 +223,7 @@ const fields = reactive([
 ]);
 
 onBeforeMount(() => {
+  isBusy.value = true;
   fabricAdaptersStore
     .getFabricAdaptersInfo({ uri: props.chassis })
     .finally(() => {
@@ -270,6 +272,7 @@ const fabricAdapters = computed(() => {
 watch(
   () => props.chassis,
   () => {
+    isBusy.value = true;
     fabricAdaptersStore
       .getFabricAdaptersInfo({ uri: props.chassis })
       .finally(() => {
diff --git a/src/views/HardwareStatus/Inventory/InventoryTableAssembly.vue b/src/views/HardwareStatus/Inventory/InventoryTableAssembly.vue
index 4f521b6619..6d5a6e26eb 100644
--- a/src/views/HardwareStatus/Inventory/InventoryTableAssembly.vue
+++ b/src/views/HardwareStatus/Inventory/InventoryTableAssembly.vue
@@ -23,9 +23,10 @@
       :fields="tableHeaders"
       :filter="searchFilterInput"
       show-empty
-      :empty-text="$t('global.table.emptyMessage')"
+      :empty-text="
+        isBusy ? $t('global.table.loading') : $t('global.table.emptyMessage')
+      "
       :empty-filtered-text="$t('global.table.emptySearchMessage')"
-      :busy="isBusy"
       @filtered="onFiltered"
     >
       <template #head(identifyLed)="row">
@@ -181,7 +182,7 @@ const { t } = useI18n();
 const globalStore = stores.GlobalStore();
 const assemblyStore = stores.AssemblyStore();
 
-const isBusy = ref(true);
+const isBusy = ref(false);
 const searchTotalFilteredRows = ref(0);
 
 const fields = reactive([
@@ -224,6 +225,7 @@ const fields = reactive([
 ]);
 
 onBeforeMount(() => {
+  isBusy.value = true;
   assemblyStore.getAssemblyInfo({ uri: props.chassis }).finally(() => {
     // Emit initial data fetch complete to parent component
     eventBus.emit('hardware-status-assembly-complete');
@@ -291,6 +293,7 @@ const tableHeaders = computed(() => {
 watch(
   () => props.chassis,
   (value) => {
+    isBusy.value = true;
     assemblyStore.getAssemblyInfo({ uri: value }).finally(() => {
       // Emit initial data fetch complete to parent component
       eventBus.emit('hardware-status-assembly-complete');
diff --git a/src/views/HardwareStatus/Inventory/InventoryTableBmcManager.vue b/src/views/HardwareStatus/Inventory/InventoryTableBmcManager.vue
index 6a0ee547ac..f559a4e46c 100644
--- a/src/views/HardwareStatus/Inventory/InventoryTableBmcManager.vue
+++ b/src/views/HardwareStatus/Inventory/InventoryTableBmcManager.vue
@@ -7,8 +7,9 @@
       :items="items"
       :fields="fields"
       show-empty
-      :empty-text="$t('global.table.emptyMessage')"
-      :busy="isBusy"
+      :empty-text="
+        isBusy ? $t('global.table.loading') : $t('global.table.emptyMessage')
+      "
     >
       <!-- Expand chevron icon -->
       <template #cell(expandRow)="row">
@@ -147,7 +148,7 @@ const { t } = useI18n();
 
 const bmcStore = stores.BmcStore();
 
-const isBusy = ref(true);
+const isBusy = ref(false);
 
 const fields = reactive([
   {
@@ -184,6 +185,7 @@ const fields = reactive([
 ]);
 
 onBeforeMount(() => {
+  isBusy.value = true;
   bmcStore.getBmcInfo().finally(() => {
     // Emit initial data fetch complete to parent component
     eventBus.emit('hardware-status-bmc-manager-complete');
diff --git a/src/views/HardwareStatus/Inventory/InventoryTableChassis.vue b/src/views/HardwareStatus/Inventory/InventoryTableChassis.vue
index 83a0f947e0..e9dd4d638b 100644
--- a/src/views/HardwareStatus/Inventory/InventoryTableChassis.vue
+++ b/src/views/HardwareStatus/Inventory/InventoryTableChassis.vue
@@ -7,8 +7,9 @@
       sticky-header="75vh"
       :items="chassis"
       :fields="fields"
-      :empty-text="$t('global.table.emptyMessage')"
-      :busy="isBusy"
+      :empty-text="
+        isBusy ? $t('global.table.loading') : $t('global.table.emptyMessage')
+      "
     >
       <!-- Expand chevron icon -->
       <template #cell(expandRow)="row">
@@ -126,7 +127,7 @@ import useToast from '@/components/Composables/useToastComposable';
 
 const { successToast, errorToast } = useToast();
 const { t } = useI18n();
-const isBusy = ref(true);
+const isBusy = ref(false);
 const { dataFormatter, statusIconValue } = useDataFormatterGlobal();
 const { expandRowLabel, toggleRow } = useTableRowExpandComposable();
 
@@ -168,6 +169,7 @@ const fields = reactive([
 ]);
 
 onBeforeMount(() => {
+  isBusy.value = true;
   chassisStore.fetchGetChassisInfo().finally(() => {
     // Emit initial data fetch complete to parent component
     eventBus.emit('hardware-status-chassis-complete');
diff --git a/src/views/HardwareStatus/Inventory/InventoryTableDimmSlot.vue b/src/views/HardwareStatus/Inventory/InventoryTableDimmSlot.vue
index 8537ddbff8..7bfad647ae 100644
--- a/src/views/HardwareStatus/Inventory/InventoryTableDimmSlot.vue
+++ b/src/views/HardwareStatus/Inventory/InventoryTableDimmSlot.vue
@@ -23,9 +23,10 @@
       :fields="fields"
       :sort-desc="false"
       :filter="searchFilterInput"
-      :empty-text="$t('global.table.emptyMessage')"
+      :empty-text="
+        isBusy ? $t('global.table.loading') : $t('global.table.emptyMessage')
+      "
       :empty-filtered-text="$t('global.table.emptySearchMessage')"
-      :busy="isBusy"
       @filtered="onFiltered"
     >
       <template #head(identifyLed)="row">
@@ -181,7 +182,7 @@ const { successToast, errorToast } = useToast();
 
 const memoryStore = stores.MemoryStore();
 
-const isBusy = ref(true);
+const isBusy = ref(false);
 const searchTotalFilteredRows = ref(0);
 
 const fields = reactive([
@@ -225,6 +226,7 @@ const fields = reactive([
 ]);
 
 onBeforeMount(() => {
+  isBusy.value = true;
   memoryStore.getDimms().finally(() => {
     // Emit initial data fetch complete to parent component
     eventBus.emit('hardware-status-dimm-slot-complete');
diff --git a/src/views/HardwareStatus/Inventory/InventoryTableFans.vue b/src/views/HardwareStatus/Inventory/InventoryTableFans.vue
index 7eb569a9f8..960c42190e 100644
--- a/src/views/HardwareStatus/Inventory/InventoryTableFans.vue
+++ b/src/views/HardwareStatus/Inventory/InventoryTableFans.vue
@@ -23,9 +23,10 @@
       :fields="fields"
       :sort-desc="false"
       :filter="searchFilterInput"
-      :empty-text="$t('global.table.emptyMessage')"
+      :empty-text="
+        isBusy ? $t('global.table.loading') : $t('global.table.emptyMessage')
+      "
       :empty-filtered-text="$t('global.table.emptySearchMessage')"
-      :busy="isBusy"
       class="no-scroll-sticky"
       @filtered="onFiltered"
     >
@@ -189,7 +190,7 @@ const props = defineProps({
   },
 });
 
-const isBusy = ref(true);
+const isBusy = ref(false);
 const searchTotalFilteredRows = ref(0);
 
 const fields = reactive([
@@ -233,6 +234,7 @@ const fields = reactive([
 ]);
 
 onBeforeMount(() => {
+  isBusy.value = true;
   fanStore.getAllFans({ uri: props.chassis }).finally(() => {
     // Emit initial data fetch complete to parent component
     eventBus.emit('hardware-status-fans-complete');
@@ -279,6 +281,7 @@ const isIoExpansionChassis = computed(() => {
 watch(
   () => props.chassis,
   (value) => {
+    isBusy.value = true;
     fanStore.getAllFans({ uri: value }).finally(() => {
       // Emit initial data fetch complete to parent component
       eventBus.emit('hardware-status-fans-complete');
diff --git a/src/views/HardwareStatus/Inventory/InventoryTablePcieSlots.vue b/src/views/HardwareStatus/Inventory/InventoryTablePcieSlots.vue
index 04270f4116..073bca5741 100644
--- a/src/views/HardwareStatus/Inventory/InventoryTablePcieSlots.vue
+++ b/src/views/HardwareStatus/Inventory/InventoryTablePcieSlots.vue
@@ -30,9 +30,10 @@
       :fields="fields"
       :sort-desc="false"
       :filter="searchFilterInput"
-      :empty-text="$t('global.table.emptyMessage')"
+      :empty-text="
+        isBusy ? $t('global.table.loading') : $t('global.table.emptyMessage')
+      "
       :empty-filtered-text="$t('global.table.emptySearchMessage')"
-      :busy="isBusy"
       class="no-scroll-sticky"
       @filtered="onFiltered"
     >
@@ -107,7 +108,7 @@ const props = defineProps({
 });
 
 const searchTotalFilteredRows = ref(0);
-const isBusy = ref(true);
+const isBusy = ref(false);
 const slotListLength = ref(0);
 
 const fields = reactive([
@@ -132,6 +133,7 @@ const fields = reactive([
 ]);
 
 onBeforeMount(() => {
+  isBusy.value = true;
   pcieSlotsStore.getPcieSlotsInfo({ uri: props.chassis }).finally(() => {
     eventBus.emit('hardware-status-pcie-slots-complete');
     isBusy.value = false;
@@ -169,6 +171,7 @@ const serverStatus = computed(() => {
 watch(
   () => props.chassis,
   (value) => {
+    isBusy.value = true;
     pcieSlotsStore.getPcieSlotsInfo({ uri: value }).finally(() => {
       eventBus.emit('hardware-status-pcie-slots-complete');
       isBusy.value = false;
diff --git a/src/views/HardwareStatus/Inventory/InventoryTablePowerSupplies.vue b/src/views/HardwareStatus/Inventory/InventoryTablePowerSupplies.vue
index c6a776d76e..ac4f481234 100644
--- a/src/views/HardwareStatus/Inventory/InventoryTablePowerSupplies.vue
+++ b/src/views/HardwareStatus/Inventory/InventoryTablePowerSupplies.vue
@@ -23,9 +23,10 @@
       :fields="fields"
       :sort-desc="false"
       :filter="searchFilterInput"
-      :empty-text="$t('global.table.emptyMessage')"
+      :empty-text="
+        isBusy ? $t('global.table.loading') : $t('global.table.emptyMessage')
+      "
       :empty-filtered-text="$t('global.table.emptySearchMessage')"
-      :busy="isBusy"
       class="no-scroll-sticky"
       @filtered="onFiltered"
     >
@@ -195,7 +196,7 @@ const props = defineProps({
   },
 });
 
-const isBusy = ref(true);
+const isBusy = ref(false);
 const fields = reactive([
   {
     key: 'expandRow',
@@ -245,6 +246,7 @@ const filteredRows = computed(() => {
 });
 
 onBeforeMount(() => {
+  isBusy.value = true;
   powerSupplyStore.getAllPowerSupplies({ uri: props.chassis }).finally(() => {
     // Emit initial data fetch complete to parent component
     eventBus.emit('hardware-status-power-supplies-complete');
@@ -282,6 +284,7 @@ const powerSupplies = computed(() => {
 watch(
   () => props.chassis,
   (value) => {
+    isBusy.value = true;
     powerSupplyStore.getAllPowerSupplies({ uri: value }).finally(() => {
       // Emit initial data fetch complete to parent component
       eventBus.emit('hardware-status-power-supplies-complete');
diff --git a/src/views/HardwareStatus/Inventory/InventoryTableProcessors.vue b/src/views/HardwareStatus/Inventory/InventoryTableProcessors.vue
index 9c8aa6adc3..449a121428 100644
--- a/src/views/HardwareStatus/Inventory/InventoryTableProcessors.vue
+++ b/src/views/HardwareStatus/Inventory/InventoryTableProcessors.vue
@@ -24,9 +24,10 @@
       :fields="fields"
       :sort-desc="false"
       :filter="searchFilterInput"
-      :empty-text="$t('global.table.emptyMessage')"
+      :empty-text="
+        isBusy ? $t('global.table.loading') : $t('global.table.emptyMessage')
+      "
       :empty-filtered-text="$t('global.table.emptySearchMessage')"
-      :busy="isBusy"
       class="no-scroll-sticky"
       @filtered="onFiltered"
     >
@@ -182,7 +183,7 @@ const { expandRowLabel } = useTableRowExpandComposable();
 
 const processorStore = ProcessorStore();
 
-const isBusy = ref(true);
+const isBusy = ref(false);
 const searchTotalFilteredRows = ref(0);
 
 const fields = reactive([
@@ -227,6 +228,7 @@ const fields = reactive([
 ]);
 
 onBeforeMount(() => {
+  isBusy.value = true;
   processorStore.getProcessorsInfo().finally(() => {
     // Emit initial data fetch complete to parent component
     eventBus.emit('hardware-status-processors-complete');
diff --git a/src/views/HardwareStatus/Inventory/InventoryTableSystem.vue b/src/views/HardwareStatus/Inventory/InventoryTableSystem.vue
index 97112d7048..bfe2081a6a 100644
--- a/src/views/HardwareStatus/Inventory/InventoryTableSystem.vue
+++ b/src/views/HardwareStatus/Inventory/InventoryTableSystem.vue
@@ -7,8 +7,9 @@
       sticky-header="75vh"
       :items="systems"
       :fields="fields"
-      :empty-text="$t('global.table.emptyMessage')"
-      :busy="isBusy"
+      :empty-text="
+        isBusy ? $t('global.table.loading') : $t('global.table.emptyMessage')
+      "
     >
       <!-- Expand chevron icon -->
       <template #cell(expandRow)="row">
@@ -136,7 +137,7 @@ const { t } = useI18n();
 
 const systemStore = stores.SystemStore();
 
-const isBusy = ref(true);
+const isBusy = ref(false);
 const fields = reactive([
   {
     key: 'expandRow',
@@ -163,6 +164,7 @@ const fields = reactive([
 ]);
 
 onBeforeMount(() => {
+  isBusy.value = true;
   systemStore.getSystem().finally(() => {
     eventBus.emit('hardware-status-system-complete');
     isBusy.value = false;
diff --git a/src/views/HardwareStatus/PcieTopology/PcieTopology.vue b/src/views/HardwareStatus/PcieTopology/PcieTopology.vue
index 0badd2fd80..c161db1190 100644
--- a/src/views/HardwareStatus/PcieTopology/PcieTopology.vue
+++ b/src/views/HardwareStatus/PcieTopology/PcieTopology.vue
@@ -66,9 +66,12 @@
           sticky-header="75vh"
           sort-by="id"
           :fields="fields"
-          :busy="tableIsBusy"
           :filter="searchFilterInput"
-          :empty-text="$t('global.table.emptyMessage')"
+          :empty-text="
+            tableIsBusy
+              ? $t('global.table.loading')
+              : $t('global.table.emptyMessage')
+          "
           :empty-filtered-text="$t('global.table.emptySearchMessage')"
           :items="filteredEntries"
           :per-page="
diff --git a/src/views/HardwareStatus/Sensors/Sensors.vue b/src/views/HardwareStatus/Sensors/Sensors.vue
index bc7f725084..6d4d6f813f 100644
--- a/src/views/HardwareStatus/Sensors/Sensors.vue
+++ b/src/views/HardwareStatus/Sensors/Sensors.vue
@@ -45,7 +45,6 @@
           hover
           sticky-header="75vh"
           :sort-by="[{ key: 'status', order: 'asc' }]"
-          :busy="isBusy"
           show-empty
           :no-border-collapse="true"
           :items="filteredSensors"
@@ -55,7 +54,11 @@
           "
           :current-page="currentPageNo"
           :filter="searchFilterInput"
-          :empty-text="$t('global.table.emptyMessage')"
+          :empty-text="
+            isBusy
+              ? $t('global.table.loading')
+              : $t('global.table.emptyMessage')
+          "
           :empty-filtered-text="$t('global.table.emptySearchMessage')"
           @filtered="onFiltered"
           @row-selected="onRowSelected($event, filteredSensors.length)"
diff --git a/src/views/Logs/AuditLogs/AuditLogs.vue b/src/views/Logs/AuditLogs/AuditLogs.vue
index eb41546795..e2d37b862e 100644
--- a/src/views/Logs/AuditLogs/AuditLogs.vue
+++ b/src/views/Logs/AuditLogs/AuditLogs.vue
@@ -50,12 +50,15 @@
           show-empty
           :fields="fields"
           :items="filteredLogs"
-          :empty-text="$t('global.table.emptyMessage')"
+          :empty-text="
+            isBusy
+              ? $t('global.table.loading')
+              : $t('global.table.emptyMessage')
+          "
           :empty-filtered-text="$t('global.table.emptySearchMessage')"
           :per-page="itemPerPage === 0 ? filteredLogs.length || 1 : itemPerPage"
           :current-page="currentPageNo"
           :filter="searchFilterInput"
-          :busy="isBusy"
           @filtered="onFiltered"
         >
           <!-- Expand chevron icon -->
diff --git a/src/views/Logs/DeconfigurationRecords/DeconfigurationRecords.vue b/src/views/Logs/DeconfigurationRecords/DeconfigurationRecords.vue
index 52ba01e8f1..0c6a48a882 100644
--- a/src/views/Logs/DeconfigurationRecords/DeconfigurationRecords.vue
+++ b/src/views/Logs/DeconfigurationRecords/DeconfigurationRecords.vue
@@ -57,7 +57,11 @@
           sort-desc.sync="status"
           :fields="fields"
           :items="filteredLogs"
-          :empty-text="$t('global.table.emptyMessage')"
+          :empty-text="
+            isBusy
+              ? $t('global.table.loading')
+              : $t('global.table.emptyMessage')
+          "
           :current-page="currentPageNo"
           :per-page="itemPerPage === 0 ? filteredLogs.length || 1 : itemPerPage"
           @row-selected="onRowSelected($event, filteredLogs.length)"
@@ -271,6 +275,7 @@ const deconfigurationRecoredsStore = stores.DeconfigurationRecordsStore();
 const global = stores.GlobalStore();
 
 const tableDeconfigurationRecordsRef = ref(null);
+const isBusy = ref(false);
 const fields = ref([
   {
     key: 'expandRow',
@@ -332,14 +337,17 @@ const openModal = ref(false);
 const isAllSelected = ref(false);
 
 onBeforeRouteLeave(() => {
+  isBusy.value = false;
   hideLoader();
 });
 
 onBeforeMount(() => {
   startLoader();
-  deconfigurationRecoredsStore
-    .getDeconfigurationRecordInfo()
-    .finally(() => endLoader());
+  isBusy.value = true;
+  deconfigurationRecoredsStore.getDeconfigurationRecordInfo().finally(() => {
+    isBusy.value = false;
+    endLoader();
+  });
   eventBus.on('clear-selected', () => {
     deconfigurationRecoredsStore?.deconfigRecordsGetter?.map(
       (singleConnection) => {
diff --git a/src/views/Logs/Dumps/Dumps.vue b/src/views/Logs/Dumps/Dumps.vue
index 132ccfd0f9..d590c13684 100644
--- a/src/views/Logs/Dumps/Dumps.vue
+++ b/src/views/Logs/Dumps/Dumps.vue
@@ -95,14 +95,17 @@
             sticky-header="75vh"
             :fields="fields"
             :items="filteredDumps"
-            :empty-text="$t('global.table.emptyMessage')"
+            :empty-text="
+              isBusy
+                ? $t('global.table.loading')
+                : $t('global.table.emptyMessage')
+            "
             :empty-filtered-text="$t('global.table.emptySearchMessage')"
             :per-page="
               itemPerPage === 0 ? filteredDumps.length || 1 : itemPerPage
             "
             :current-page="currentPageNo"
             :filter="searchFilterInput"
-            :busy="isBusy"
             @filtered="onFiltered"
             @row-selected="onRowSelected($event, filteredDumps.length)"
           >
diff --git a/src/views/Logs/EventLogs/EventLogs.vue b/src/views/Logs/EventLogs/EventLogs.vue
index 8bac7ff727..a10023585b 100644
--- a/src/views/Logs/EventLogs/EventLogs.vue
+++ b/src/views/Logs/EventLogs/EventLogs.vue
@@ -74,12 +74,15 @@
           :fields="fields"
           :items="filteredLogs"
           :sort-compare="onSortCompare"
-          :empty-text="$t('global.table.emptyMessage')"
+          :empty-text="
+            isBusy
+              ? $t('global.table.loading')
+              : $t('global.table.emptyMessage')
+          "
           :empty-filtered-text="$t('global.table.emptySearchMessage')"
           :per-page="perPage === 0 ? filteredLogs.length || 1 : perPage"
           :current-page="currentPage"
           :filter="searchFilter"
-          :busy="isBusy"
           @filtered="onFiltered"
           @row-selected="onRowSelected($event, filteredLogs.length)"
         >
diff --git a/src/views/Logs/PostCodeLogs/PostCodeLogs.vue b/src/views/Logs/PostCodeLogs/PostCodeLogs.vue
index 9b72b7a151..292b936597 100644
--- a/src/views/Logs/PostCodeLogs/PostCodeLogs.vue
+++ b/src/views/Logs/PostCodeLogs/PostCodeLogs.vue
@@ -45,12 +45,15 @@
           show-empty
           :fields="fields"
           :items="filteredLogs"
-          :empty-text="$t('global.table.emptyMessage')"
+          :empty-text="
+            isBusy
+              ? $t('global.table.loading')
+              : $t('global.table.emptyMessage')
+          "
           :empty-filtered-text="$t('global.table.emptySearchMessage')"
           :per-page="perPageVal === 0 ? filteredLogs.length || 1 : perPageVal"
           :current-page="currentPageNo"
           :filter="searchFilterInputVal"
-          :busy="isBusy"
           @filtered="onFiltered"
           @row-selected="onRowSelected($event, filteredLogs.length)"
         >
diff --git a/src/views/SecurityAndAccess/Certificates/Certificates.vue b/src/views/SecurityAndAccess/Certificates/Certificates.vue
index 6674764f61..a0ffb09945 100644
--- a/src/views/SecurityAndAccess/Certificates/Certificates.vue
+++ b/src/views/SecurityAndAccess/Certificates/Certificates.vue
@@ -58,10 +58,13 @@
           show-empty
           sticky-header="75vh"
           hover
-          :busy="isBusy"
           :fields="fields"
           :items="tableItems"
-          :empty-text="$t('global.table.emptyMessage')"
+          :empty-text="
+            isBusy
+              ? $t('global.table.loading')
+              : $t('global.table.emptyMessage')
+          "
         >
           <!-- Certificate -->
           <template #cell(certificate)="row">
diff --git a/src/views/SecurityAndAccess/Ldap/TableRoleGroups.vue b/src/views/SecurityAndAccess/Ldap/TableRoleGroups.vue
index 9fc9655d36..090dcb424d 100644
--- a/src/views/SecurityAndAccess/Ldap/TableRoleGroups.vue
+++ b/src/views/SecurityAndAccess/Ldap/TableRoleGroups.vue
@@ -38,10 +38,13 @@
           hover
           no-sort-reset
           sort-icon-left
-          :busy="isBusy"
           :items="tableItems"
           :fields="fields"
-          :empty-text="$t('global.table.emptyMessage')"
+          :empty-text="
+            isBusy
+              ? $t('global.table.loading')
+              : $t('global.table.emptyMessage')
+          "
           @row-selected="onRowSelected($event, tableItems.length)"
         >
           <!-- Checkbox column -->
diff --git a/src/views/SecurityAndAccess/Sessions/Sessions.vue b/src/views/SecurityAndAccess/Sessions/Sessions.vue
index 38f36d4883..589bebed07 100644
--- a/src/views/SecurityAndAccess/Sessions/Sessions.vue
+++ b/src/views/SecurityAndAccess/Sessions/Sessions.vue
@@ -48,12 +48,15 @@
           hover
           sticky-header="75vh"
           :sort-by="[{ key: 'clientID', order: 'asc' }]"
-          :busy="isBusy"
           show-empty
           :fields="fields"
           :items="allConnections"
           :filter="searchFilterInput"
-          :empty-text="$t('global.table.emptyMessage')"
+          :empty-text="
+            isBusy
+              ? $t('global.table.loading')
+              : $t('global.table.emptyMessage')
+          "
           :per-page="
             itemPerPage === 0 ? allConnections.length || 1 : itemPerPage
           "
diff --git a/src/views/SecurityAndAccess/UserManagement/UserManagement.vue b/src/views/SecurityAndAccess/UserManagement/UserManagement.vue
index f1d7fdcbe0..5bc4674d4d 100644
--- a/src/views/SecurityAndAccess/UserManagement/UserManagement.vue
+++ b/src/views/SecurityAndAccess/UserManagement/UserManagement.vue
@@ -35,10 +35,13 @@
           no-select-on-click
           sticky-header="75vh"
           hover
-          :busy="isBusy"
           :fields="fields"
           :items="tableItems"
-          :empty-text="$t('global.table.emptyMessage')"
+          :empty-text="
+            isBusy
+              ? $t('global.table.loading')
+              : $t('global.table.emptyMessage')
+          "
           @row-selected="onRowSelected($event, tableItems.length)"
         >
           <!-- Checkbox column -->
diff --git a/src/views/Settings/HardwareDeconfiguration/MemoryDimms.vue b/src/views/Settings/HardwareDeconfiguration/MemoryDimms.vue
index 4b5ee7885c..6ea6cab883 100644
--- a/src/views/Settings/HardwareDeconfiguration/MemoryDimms.vue
+++ b/src/views/Settings/HardwareDeconfiguration/MemoryDimms.vue
@@ -25,9 +25,12 @@
           "
           :current-page="currentPageNo"
           :filter="searchFilter"
-          :empty-text="$t('global.table.emptyMessage')"
+          :empty-text="
+            isBusy
+              ? $t('global.table.loading')
+              : $t('global.table.emptyMessage')
+          "
           :empty-filtered-text="$t('global.table.emptySearchMessage')"
-          :busy="isBusy"
           @filtered="onFiltered"
         >
           <template #cell(functionalState)="{ value }">
diff --git a/src/views/Settings/HardwareDeconfiguration/ProcessorCores.vue b/src/views/Settings/HardwareDeconfiguration/ProcessorCores.vue
index 421874a954..e440ced85d 100644
--- a/src/views/Settings/HardwareDeconfiguration/ProcessorCores.vue
+++ b/src/views/Settings/HardwareDeconfiguration/ProcessorCores.vue
@@ -37,9 +37,12 @@
           "
           :current-page="currentPageNo"
           :filter="searchFilterInput"
-          :empty-text="$t('global.table.emptyMessage')"
+          :empty-text="
+            isBusy
+              ? $t('global.table.loading')
+              : $t('global.table.emptyMessage')
+          "
           :empty-filtered-text="$t('global.table.emptySearchMessage')"
-          :busy="isBusy"
           @filtered="onFiltered"
           @row-selected="onRowSelected($event, filteredCores.length)"
         >

From 89bb3f2690073afef2e0bc285e1a1a0eeb5f5e11 Mon Sep 17 00:00:00 2001
From: Nikhil Ashoka <a.nikhil@ibm.com>
Date: Fri, 26 Sep 2025 17:55:39 +0530
Subject: [PATCH 3/6] Removed unused code

- Removed unused code in styling
---
 docs/.vitepress/styles/palette.styl           |  4 ++--
 src/assets/styles/_obmc-custom.scss           |  1 -
 .../styles/bmc/custom/_bootstrap-grid.scss    |  5 ----
 src/assets/styles/bmc/custom/_tables.scss     | 23 -------------------
 src/assets/styles/bootstrap/_index.scss       |  5 ----
 src/env/assets/styles/_ibm.scss               |  1 -
 src/store/index.js                            |  3 ---
 7 files changed, 2 insertions(+), 40 deletions(-)

diff --git a/docs/.vitepress/styles/palette.styl b/docs/.vitepress/styles/palette.styl
index 4d79601e2d..ef089e01d8 100644
--- a/docs/.vitepress/styles/palette.styl
+++ b/docs/.vitepress/styles/palette.styl
@@ -1,4 +1,4 @@
-// VuePress Theme overrides
+// VitePress Theme overrides
 // Change content to be left aligned
 .theme-default-content:not(.custom),
 .page-nav
@@ -7,7 +7,7 @@
   padding 2rem
 
 // Overide default margins for p tags
-// VuePress is nesting li content in p tags
+// VitePress is nesting li content in p tags
 // unless they are nested li elements creating
 // inconsistent margins between different lists
 li p
diff --git a/src/assets/styles/_obmc-custom.scss b/src/assets/styles/_obmc-custom.scss
index 3ef9f7d4a7..183b942d9a 100644
--- a/src/assets/styles/_obmc-custom.scss
+++ b/src/assets/styles/_obmc-custom.scss
@@ -2,5 +2,4 @@
 @import './bootstrap';
 
 // Custom BMC styles
-// @import "./bmc/helpers";
 @import './bmc/custom';
diff --git a/src/assets/styles/bmc/custom/_bootstrap-grid.scss b/src/assets/styles/bmc/custom/_bootstrap-grid.scss
index 161693d53d..c76afbb5c6 100644
--- a/src/assets/styles/bmc/custom/_bootstrap-grid.scss
+++ b/src/assets/styles/bmc/custom/_bootstrap-grid.scss
@@ -1,9 +1,4 @@
 .container-xl {
-  // Fluid layout container class sets 100%
-  // width until xl breakpoint. Once a max-width
-  // is set, setting the left margin to 0 is needed
-  // so the content doesn't center align
-  // https://bootstrap-vue.org/docs/components/layout#fluid-width-container
   margin-left: 0;
 }
 
diff --git a/src/assets/styles/bmc/custom/_tables.scss b/src/assets/styles/bmc/custom/_tables.scss
index 4a976d71df..aa6db527bf 100644
--- a/src/assets/styles/bmc/custom/_tables.scss
+++ b/src/assets/styles/bmc/custom/_tables.scss
@@ -1,5 +1,4 @@
 @use 'sass:math';
-// @import "/node_modules/bootstrap/scss/variables";
 .b-table-sticky-header {
   max-height: 75vh;
   min-height: 100px;
@@ -14,17 +13,6 @@
             left: -3px !important;
             top: 38% !important;
           }
-          // svg {
-          //   background-position: left calc(1.5rem / 2) center !important;
-          //   padding-left: calc(1.2rem + 0.65em) !important;
-          //   &:focus {
-          //     outline: none;
-          //     box-shadow: inset 0 0 0 2px $primary !important;
-          //   }
-          //   &:hover {
-          //     background-color: $light;
-          //   }
-          // }
           vertical-align: middle;
           border-top: 1px solid $gray-300;
           border-bottom: 1px solid $gray-300;
@@ -132,17 +120,6 @@
       padding-left: calc(50px + (#{$table-cell-padding-y} * 2));
       padding-right: calc(50px + (#{$table-cell-padding-y} * 2));
     }
-    // dl {
-    //   margin: 0;
-    // }
-    // dt {
-    //   float: left;
-    //   clear: left;
-    //   margin-right: math.div($spacer, 2);
-    // }
-    // dd {
-    //   line-height: 1.2;
-    // }
   }
 
   .table-row-expand {
diff --git a/src/assets/styles/bootstrap/_index.scss b/src/assets/styles/bootstrap/_index.scss
index 750a518889..b4b9b6b0fc 100644
--- a/src/assets/styles/bootstrap/_index.scss
+++ b/src/assets/styles/bootstrap/_index.scss
@@ -13,15 +13,11 @@
 @import "/node_modules/bootstrap/scss/buttons";
 @import "/node_modules/bootstrap/scss/card";
 @import "/node_modules/bootstrap/scss/close";
-// @import "/node_modules/bootstrap/scss/code";
-// @import "/node_modules/bootstrap/scss/custom-forms";
 @import "/node_modules/bootstrap/scss/dropdown";
 @import "/node_modules/bootstrap/scss/forms";
 @import "/node_modules/bootstrap/scss/grid";
 @import "/node_modules/bootstrap/scss/images";
-// @import "/node_modules/bootstrap/scss/input-group";
 @import "/node_modules/bootstrap/scss/list-group";
-// @import "/node_modules/bootstrap/scss/media";
 @import "/node_modules/bootstrap/scss/modal";
 @import "/node_modules/bootstrap/scss/nav";
 @import "/node_modules/bootstrap/scss/navbar";
@@ -35,4 +31,3 @@
 
 // Utils
 @import "/node_modules/bootstrap/scss/utilities";
-// @import "/node_modules/bootstrap/scss/print";
diff --git a/src/env/assets/styles/_ibm.scss b/src/env/assets/styles/_ibm.scss
index 48d2cc8fa9..988d3ed449 100644
--- a/src/env/assets/styles/_ibm.scss
+++ b/src/env/assets/styles/_ibm.scss
@@ -36,7 +36,6 @@
 }
 
 // IBM Plex with Bootstrap default as fallbacks
-// https://getbootstrap.com/docs/4.4/content/reboot/#native-font-stack
 
 $font-family-base: 'Plex', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 $standard-easing--productive: ease-in-out;
diff --git a/src/store/index.js b/src/store/index.js
index fee59da64a..1aff68ae1c 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -11,7 +11,6 @@ import PowerControlStore from './modules/ResourceManagement/PowerControlStore';
 import PowerPolicyStore from './modules/Settings/PowerPolicyStore';
 import NetworkStore from './modules/Settings/NetworkStore';
 import EventLogStore from './modules/Logs/EventLogStore';
-// import SensorsStore from './modules/HardwareStatus/SensorsStore';
 import SystemStore from './modules/HardwareStatus/SystemStore';
 import PowerSupplyStore from './modules/HardwareStatus/PowerSupplyStore';
 import MemoryStore from './modules/HardwareStatus/MemoryStore';
@@ -23,14 +22,12 @@ import AssemblyStore from './modules/HardwareStatus/AssemblyStore';
 import PcieTopologyStore from './modules/HardwareStatus/PcieTopologyStore';
 import PostCodeLogsStore from './modules/Logs/PostCodeLogsStore';
 import AuditLogsStore from './modules/Logs/AuditLogsStore';
-// import PoliciesStore from './modules/SecurityAndAccess/PoliciesStore';
 import FactoryResetStore from './modules/Operations/FactoryResetStore';
 import HardwareDeconfigurationStore from './modules/Settings/HardwareDeconfigurationStore';
 import KeyClearStore from './modules/Operations/KeyClearStore';
 import NetworkSettingsStore from './modules/Operations/NetworkSettingsStore';
 import IBMiServiceFunctionsStore from './modules/Logs/IBMiServiceFunctionsStore';
 import SnmpAlertsStore from './modules/Settings/SnmpAlertsStore';
-// import WebSocketPlugin from './plugins/WebSocketPlugin';
 import DateTimeStore from './modules/Settings/DateTimeStore';
 import ResourceMemoryStore from './modules/ResourceManagement/ResourceMemoryStore';
 import SystemParametersStore from './modules/ResourceManagement/SystemParametersStore';

From 2cc75434c798d26938b6b244a091cc0e5cfb2900 Mon Sep 17 00:00:00 2001
From: Nikhil Ashoka <a.nikhil@ibm.com>
Date: Mon, 29 Sep 2025 12:12:05 +0530
Subject: [PATCH 4/6] Updated Docs

- Updated Docs files.
---
 .env.ibm                                |  1 -
 .env.intel                              |  9 ++---
 docs/.vitepress/styles/palette.styl     |  2 +-
 docs/customization/build.md             | 49 +++++++++++------------
 docs/customization/index.md             | 28 ++++++-------
 docs/customization/theme.md             | 15 +++----
 load-build.sh                           | 52 +++++++++++++++++++++++++
 src/components/Global/PageContainer.vue |  2 +-
 src/components/Global/StatusIcon.vue    |  2 +-
 9 files changed, 103 insertions(+), 57 deletions(-)
 create mode 100755 load-build.sh

diff --git a/.env.ibm b/.env.ibm
index f17c7f3839..cc91ed0d47 100644
--- a/.env.ibm
+++ b/.env.ibm
@@ -1,4 +1,3 @@
-# NODE_ENV=production
 VITE_CUSTOM_ENV=production
 VITE_APP_ENV_NAME=ibm
 VITE_APP_COMPANY_NAME="IBM"
diff --git a/.env.intel b/.env.intel
index b8b743e4a3..a345f2bda9 100644
--- a/.env.intel
+++ b/.env.intel
@@ -1,4 +1,3 @@
-# NODE_ENV=production
 VITE_CUSTOM_ENV=production
 VITE_APP_ENV_NAME="intel"
 VITE_APP_COMPANY_NAME="intel"
@@ -10,7 +9,7 @@ VITE_APP_VIRTUAL_MEDIA_LIST_ENABLED="true"
 VITE_APP_EVENT_LOGS_DELETE_BUTTON_DISABLED="true"
 VITE_APP_EVENT_LOGS_TOGGLE_BUTTON_DISABLED="true"
 VITE_APP_FAN_DATA_FROM_THERMAL_SUBSYSTEM="true"
-CUSTOM_STYLES="true"
-CUSTOM_APP_NAV="true"
-CUSTOM_STORE="true"
-CUSTOM_ROUTER="true"
\ No newline at end of file
+VITE_CUSTOM_STYLES="true"
+VITE_CUSTOM_APP_NAV="true"
+VITE_CUSTOM_STORE="true"
+VITE_CUSTOM_ROUTER="true"
\ No newline at end of file
diff --git a/docs/.vitepress/styles/palette.styl b/docs/.vitepress/styles/palette.styl
index ef089e01d8..b965d500d3 100644
--- a/docs/.vitepress/styles/palette.styl
+++ b/docs/.vitepress/styles/palette.styl
@@ -6,7 +6,7 @@
   margin 0
   padding 2rem
 
-// Overide default margins for p tags
+// Override default margins for p tags
 // VitePress is nesting li content in p tags
 // unless they are nested li elements creating
 // inconsistent margins between different lists
diff --git a/docs/customization/build.md b/docs/customization/build.md
index b10fd9dbcf..db67e8ab1f 100644
--- a/docs/customization/build.md
+++ b/docs/customization/build.md
@@ -14,46 +14,47 @@ modifications to the Web UI.
 ## Setup
 
 1. Create a `.env.<ENV_NAME>` file in the project root
-2. Add `NODE_ENV=production` key value pair in the file
-3. Add `VUE_APP_ENV_NAME` key with the value set to the new environment name
+2. Add `VITE_CUSTOM_ENV=production` key value pair in the file
+3. Add `VITE_APP_ENV_NAME` key with the value set to the new environment name
 
 Example `.env.ibm`:
 
 ```
-NODE_ENV=production
-VUE_APP_ENV_NAME=ibm
+VITE_CUSTOM_ENV=production
+VITE_APP_ENV_NAME=ibm
 ```
 
 ## Store
 
 :::tip
-[Vuex store modules](https://vuex.vuejs.org/guide/modules.html) contain the
+[Pinia store core concepts](https://pinia.vuejs.org/core-concepts/) contain the
 application's API calls.
 :::
 
-1. If making customizations to the default store, add `CUSTOM_STORE=true` key
+1. If making customizations to the default store, add `VITE_CUSTOM_STORE=true` key
    value pair to the new .env file.
 2. Create a `<ENV_NAME>.js` file in `src/env/store`
    :::danger
-   The filename needs to match the `VUE_APP_ENV_NAME` value defined in the
+   The filename needs to match the `VITE_APP_ENV_NAME` value defined in the
    .env file. The store import in `src/main.js` will resolve to this new
    file.
    :::
 3. Import the base store
 4. Import environment specific store modules
-5. Use the [Vuex](https://vuex.vuejs.org/api/#registermodule) `registerModule`
-   and `unregisterModule` instance methods to add/remove store modules
+5. Assign the Objects required to the base store.
 6. Add default export
 
 Example `src/env/store/ibm.js`:
 
 ```
-import store from '@/store; //@ aliases to src directory
-import HmcStore from './Hmc/HmcStore';
+import stores from '@/store; //@ aliases to src directory
+import DumpsStore from '../../store/modules/Logs/DumpsStore.js';
 
-store.registerModule('hmc', HmcStore);
+Object.assign(stores, {
+  DumpsStore: DumpsStore,
+});
 
-export default store;
+export default stores;
 ```
 
 ## Router
@@ -63,11 +64,11 @@ export default store;
 accessible in the UI.
 :::
 
-1. If making customizations to the default router, add `CUSTOM_ROUTER=true` key
+1. If making customizations to the default router, add `VITE_CUSTOM_ROUTER=true` key
    value pair to the new .env file.
 2. Create a `<ENV_NAME>.js` file in `src/env/router`
    :::danger
-   The filename needs to match the `VUE_APP_ENV_NAME` value defined in the
+   The filename needs to match the `VITE_APP_ENV_NAME` value defined in the
    .env file. The routes import in `src/router/index.js` will resolve to this
    new file.
    :::
@@ -86,17 +87,17 @@ application routes which is not always the same as what is visible in the app
 navigation. This configuration will make customizations to the rendered markup
 in src/components/AppNavigation/AppNavigation.vue.
 
-1. If making customizations to the app navigation, add `CUSTOM_APP_NAV=true` key
+1. If making customizations to the app navigation, add `VITE_CUSTOM_APP_NAV=true` key
    value pair to the new .env file.
 2. Create a `<ENV_NAME>.js` file in `src/env/components/AppNavigation`
    :::danger
-   The filename needs to match the `VUE_APP_ENV_NAME` value defined in the
-   .env file. The AppNavigationMixin import in
+   The filename needs to match the `VITE_APP_ENV_NAME` value defined in the
+   .env file. The AppNavigationData import in
    `src/components/AppNavigation/AppNavigation.vue` will resolve to this new
    file.
    :::
 3. Your custom mixin should follow a very similar structure to the default
-   AppNavigationMixin.js file. It should include a data property named
+   AppNavigationData.js file. It should include a data property named
    `navigationItems` that should be an array of of navigation objects. Each
    navigation object should have an `id` and `label` property defined.
    Optionally it can include `icon`, `route`, or `children` properties.
@@ -109,11 +110,11 @@ in src/components/AppNavigation/AppNavigation.vue.
 allows for easy visual customizations.
 :::
 
-1. If making customizations to the default styles, add `CUSTOM_STYLES=true` key
+1. If making customizations to the default styles, add `VITE_CUSTOM_STYLES=true` key
    value pair to the new .env file.
 2. Create a `_<ENV_NAME>.scss` partial in `src/env/assets/styles`
    :::danger
-   The filename needs to match the `VUE_APP_ENV_NAME` value defined in the
+   The filename needs to match the `VITE_APP_ENV_NAME` value defined in the
    .env file. The webpack sass loader will attempt to import a file with this
    name.
    :::
@@ -136,8 +137,8 @@ $success: lime;
 
 ## Local development
 
-1. Add the same `VUE_APP_ENV_NAME` key value pair to your
-   `env.development.local` file.
+1. Add the same `VITE_APP_ENV_NAME` key value pair to your
+   `env.local` file.
 2. Use serve script
    ```
    npm run serve
@@ -158,5 +159,5 @@ npm run build -- --mode ibm
 pass env variable directly to script
 
 ```
-VUE_APP_ENV_NAME=ibm npm run build
+VITE_APP_ENV_NAME=ibm npm run build
 ```
diff --git a/docs/customization/index.md b/docs/customization/index.md
index e3b9dc2dde..63ce0605aa 100644
--- a/docs/customization/index.md
+++ b/docs/customization/index.md
@@ -182,11 +182,11 @@ set color highlights for some pseudo-elements like `: hover`.
 // This function is usually used to get a lighter
 // theme variant color to use as a background color
 @function theme-color-light($variant) {
-  @return theme-color-level($variant, -11.3);
+  @return color-level($variant, -11.3);
 }
 
 @function theme-color-dark($variant) {
-  @return theme-color-level($variant, 2);
+  @return color-level($variant, 2);
 }
 ```
 
@@ -194,21 +194,21 @@ set color highlights for some pseudo-elements like `: hover`.
 
 ```scss{8-10,16}
 .b-table-sort-icon-left {
-    background-position: left calc(1.5rem / 2) center !important;
-    padding-left: calc(1.2rem + 0.65em) !important;
-    &:focus {
-      outline: none;
-      box-shadow: inset 0 0 0 2px theme-color('primary') !important;
-    }
-    &:hover {
-      background-color: theme-color-dark('light');
-    }
+  background-position: left calc(1.5rem / 2) center !important;
+  padding-left: calc(1.2rem + 0.65em) !important;
+  &:focus {
+    outline: none;
+    box-shadow: inset 0 0 0 2px $primary !important;
+  }
+  &:hover {
+    background-color: theme-color-dark($light);
+  }
 }
 
 &.alert-info {
-border-left-color: theme-color("info");
-background-color: theme-color-light("info");
-fill: theme-color("info");
+  border-left-color: $info;
+  background-color: theme-color-light($info);
+  fill: $info;
 }
 ```
 
diff --git a/docs/customization/theme.md b/docs/customization/theme.md
index 3646e23c1c..c182781608 100644
--- a/docs/customization/theme.md
+++ b/docs/customization/theme.md
@@ -1,6 +1,6 @@
 # Theme customization
 Customization of the application requires knowledge of Sass and CSS. It also
-will require becoming familiar with the Bootstrap and Bootstrap-Vue component
+will require becoming familiar with the Bootstrap and Bootstrap-vue-next component
 libraries. This section outlines the global options and variables that can be
 removed or updated to meet organizational brand guidelines.
 
@@ -11,11 +11,6 @@ application navigation, and theming.
 
 [Read more in the Build Customization section](/customization/build)
 
-<!-- ### Configuring environment specific builds
-The complete instructions can be found in the `env` directory in a file called
-env.md or by viewing the [Configuring environment specific builds
-page](./env.md) -->
-
 ## Bootstrap Sass Options
 The Bootstrap Sass options are global styling toggles. The naming convention for
 these built-in variables is `enabled-*`.
@@ -37,7 +32,7 @@ some custom forms for validation states.
 
 ## Bootstrap Sass Variables
 These are global variables that Bootstrap defines in the
-`/node_modules/bootstrap/scss/variables.scss` helper file. Adding a variable
+`/node_modules/bootstrap/scss/_variables.scss` helper file. Adding a variable
 listed in this file to the `/src/assets/styles/bmc/helpers/_variables.scss` file
 will override the Bootstrap defined value.
 
@@ -163,10 +158,10 @@ gray variable values.
 [Learn more about Bootstrap
 colors](https://getbootstrap.com/docs/4.0/getting-started/theming/#color)
 
-### Bootstrap Color Functions
+<!-- ### Bootstrap Color Functions
 - `color('<color map key>)`
 - `theme-color('<theme color map key>)`
-- `gray('<gray color palette key'>)`
+- `gray('<gray color palette key'>)` -->
 
 
 #### Example
@@ -174,7 +169,7 @@ colors](https://getbootstrap.com/docs/4.0/getting-started/theming/#color)
 .some-selector {
   color: color("blue");
   background: theme-color("light");
-  border: 1px solid gray("900")
+  border: 1px solid $gray-900;
 }
 ```
 
diff --git a/load-build.sh b/load-build.sh
new file mode 100755
index 0000000000..6eb3c6a369
--- /dev/null
+++ b/load-build.sh
@@ -0,0 +1,52 @@
+#!/bin/bash
+set -euo pipefail
+
+# Usage check
+if [ $# -ne 2 ]; then
+  echo "Usage: $0 <remote_machine_ip> <password>"
+  exit 1
+fi
+
+REMOTE_IP=$1
+REMOTE_PASS=$2
+REMOTE_USER="service"
+
+# Check if sshpass is installed
+if ! command -v sshpass &> /dev/null; then
+  echo "sshpass not found. Please install it first (e.g., brew install sshpass)"
+  exit 1
+fi
+
+echo ">>> Cleaning old build"
+rm -rf dist
+
+echo ">>> Building project"
+npm run build || { echo "Build failed"; exit 1; }
+
+echo ">>> Copying dist to remote machine $REMOTE_IP"
+sshpass -p "$REMOTE_PASS" scp  -o  StrictHostKeyChecking=no -r dist/* ${REMOTE_USER}@${REMOTE_IP}:/tmp/ || { echo "SCP failed"; exit 1; }
+
+echo ">>> Running remote build steps on $REMOTE_IP"
+sshpass -p "$REMOTE_PASS" ssh -o StrictHostKeyChecking=no ${REMOTE_USER}@${REMOTE_IP} bash -s << 'EOF'
+  set -euo pipefail
+
+  echo ">>> Creating overlay directories and mounting"
+  sudo mkdir -p /tmp/usr-share /tmp/usr-share-work
+  sudo mount -t overlay -o lowerdir=/usr/share,upperdir=/tmp/usr-share,workdir=/tmp/usr-share-work overlay /usr/share || true
+
+  echo ">>> Moving into /tmp"
+  cd /tmp
+
+  echo ">>> Setting permissions"
+  sudo chmod 777 index.html favicon.ico || true
+  sudo chmod -R 777 assets || true
+
+  echo ">>> Copying files to /usr/share/www"
+  sudo cp index.html favicon.ico /usr/share/www/
+  sudo cp -R assets /usr/share/www/
+
+  echo ">>> Restarting bmcweb service"
+  sudo systemctl restart bmcweb
+EOF
+
+echo ">>> Deployment completed successfully on $REMOTE_IP"
\ No newline at end of file
diff --git a/src/components/Global/PageContainer.vue b/src/components/Global/PageContainer.vue
index 3a93ead8d7..011df0b8f9 100644
--- a/src/components/Global/PageContainer.vue
+++ b/src/components/Global/PageContainer.vue
@@ -33,7 +33,7 @@ main {
   padding-right: $spacer;
 
   &:focus-visible {
-    box-shadow: inset 0 0 0 2px theme-color('primary');
+    box-shadow: inset 0 0 0 2px theme-color-light($info);
     outline: none;
   }
 
diff --git a/src/components/Global/StatusIcon.vue b/src/components/Global/StatusIcon.vue
index ad559ce2c8..7008aedc53 100644
--- a/src/components/Global/StatusIcon.vue
+++ b/src/components/Global/StatusIcon.vue
@@ -37,7 +37,7 @@ defineProps({
     color: $danger;
   }
   &.secondary {
-    color: gray('600');
+    color: $gray-600;
     transform: rotate(-45deg);
   }
   &.warning {

From d2caa560a16b09956dee5a45aa0a82234ec0b06a Mon Sep 17 00:00:00 2001
From: Nikhil Ashoka <a.nikhil@ibm.com>
Date: Mon, 29 Sep 2025 13:59:01 +0530
Subject: [PATCH 5/6] Removed load-build

- Removed load-build.sh
---
 load-build.sh | 52 ---------------------------------------------------
 1 file changed, 52 deletions(-)
 delete mode 100755 load-build.sh

diff --git a/load-build.sh b/load-build.sh
deleted file mode 100755
index 6eb3c6a369..0000000000
--- a/load-build.sh
+++ /dev/null
@@ -1,52 +0,0 @@
-#!/bin/bash
-set -euo pipefail
-
-# Usage check
-if [ $# -ne 2 ]; then
-  echo "Usage: $0 <remote_machine_ip> <password>"
-  exit 1
-fi
-
-REMOTE_IP=$1
-REMOTE_PASS=$2
-REMOTE_USER="service"
-
-# Check if sshpass is installed
-if ! command -v sshpass &> /dev/null; then
-  echo "sshpass not found. Please install it first (e.g., brew install sshpass)"
-  exit 1
-fi
-
-echo ">>> Cleaning old build"
-rm -rf dist
-
-echo ">>> Building project"
-npm run build || { echo "Build failed"; exit 1; }
-
-echo ">>> Copying dist to remote machine $REMOTE_IP"
-sshpass -p "$REMOTE_PASS" scp  -o  StrictHostKeyChecking=no -r dist/* ${REMOTE_USER}@${REMOTE_IP}:/tmp/ || { echo "SCP failed"; exit 1; }
-
-echo ">>> Running remote build steps on $REMOTE_IP"
-sshpass -p "$REMOTE_PASS" ssh -o StrictHostKeyChecking=no ${REMOTE_USER}@${REMOTE_IP} bash -s << 'EOF'
-  set -euo pipefail
-
-  echo ">>> Creating overlay directories and mounting"
-  sudo mkdir -p /tmp/usr-share /tmp/usr-share-work
-  sudo mount -t overlay -o lowerdir=/usr/share,upperdir=/tmp/usr-share,workdir=/tmp/usr-share-work overlay /usr/share || true
-
-  echo ">>> Moving into /tmp"
-  cd /tmp
-
-  echo ">>> Setting permissions"
-  sudo chmod 777 index.html favicon.ico || true
-  sudo chmod -R 777 assets || true
-
-  echo ">>> Copying files to /usr/share/www"
-  sudo cp index.html favicon.ico /usr/share/www/
-  sudo cp -R assets /usr/share/www/
-
-  echo ">>> Restarting bmcweb service"
-  sudo systemctl restart bmcweb
-EOF
-
-echo ">>> Deployment completed successfully on $REMOTE_IP"
\ No newline at end of file

From ec241d2dd439a81ee61c8abf8240bccdfdb3270f Mon Sep 17 00:00:00 2001
From: Nikhil Ashoka <a.nikhil@ibm.com>
Date: Mon, 29 Sep 2025 16:00:13 +0530
Subject: [PATCH 6/6] Updated Readme

- Updated README.md
---
 README.md | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 7d4f9ef2ea..6441eaff12 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,3 @@
-<!-- Work Requird -->
 # webui-vue
 
 webui-vue is a web-based user interface for the OpenBMC firmware stack built on
@@ -49,7 +48,7 @@ roadmap
 
 
 ## Documentation
-The documentation for coding standards and components is located in the `docs` directory. It is created using the [VuePress](https://vuepress.vuejs.org/) static site generator. Information about how to write documentation can be found on the [VuePress website](https://vuepress.vuejs.org/).
+The documentation for coding standards and components is located in the `docs` directory. It is created using the [VitePress](https://vitepress.dev/guide/using-vue) static site generator. Information about how to write documentation can be found on the [VitePress website](https://vitepress.dev/guide/using-vue).
 
 ## Recommended IDE Setup