From c3b0ec0c4e94954b61792ff400aa6252ecbd8f4b Mon Sep 17 00:00:00 2001
From: =?utf8?q?J=C3=A9r=C3=B4me=20Benoit?= <jerome.benoit@sap.com>
Date: Thu, 30 Apr 2026 10:04:54 +0200
Subject: [PATCH] fix(ui-web): harmonize imports, fix promise chain ordering,
 and remove dead code

---
 ui/web/src/App.vue                            |  5 ++-
 ui/web/src/core/Constants.ts                  |  5 +++
 ui/web/src/core/index.ts                      |  5 +++
 ui/web/src/main.ts                            |  8 ++--
 .../src/shared/components/SkinLoadError.vue   |  4 +-
 ui/web/src/shared/composables/index.ts        | 13 ------
 ui/web/src/shared/composables/useFetchData.ts | 40 ++++++++++---------
 ui/web/src/shared/composables/useSkin.ts      |  2 +-
 .../src/shared/composables/useStartTxForm.ts  | 14 +++----
 .../src/shared/utils/formatSupervisionUrl.ts  |  2 +-
 ui/web/src/skins/classic/ClassicLayout.vue    |  2 +-
 .../actions/AddChargingStations.vue           |  4 +-
 .../components/actions/SetSupervisionUrl.vue  |  2 +-
 .../components/actions/StartTransaction.vue   |  6 +--
 .../components/buttons/ToggleButton.vue       |  2 +-
 .../charging-stations/CSConnector.vue         |  2 +-
 .../components/charging-stations/CSData.vue   |  6 ++-
 ui/web/src/skins/modern/ModernLayout.vue      | 16 +++++---
 .../skins/modern/components/ConnectorRow.vue  |  3 +-
 .../skins/modern/components/SimulatorBar.vue  | 10 -----
 .../skins/modern/components/StationCard.vue   |  2 +-
 .../components/dialogs/AddStationsDialog.vue  |  3 +-
 .../components/dialogs/AuthorizeDialog.vue    |  4 +-
 .../dialogs/SetSupervisionUrlDialog.vue       |  2 +-
 .../dialogs/StartTransactionDialog.vue        |  2 +-
 ui/web/tests/unit/UIClient.test.ts            |  2 +-
 ui/web/tests/unit/Utils.test.ts               |  2 +-
 ui/web/tests/unit/router.test.ts              |  2 +-
 .../shared/composables/useLayoutData.test.ts  |  4 +-
 .../composables/useSimulatorControl.test.ts   |  4 +-
 .../tests/unit/skins/classic/Actions.test.ts  |  2 +-
 .../unit/skins/classic/CSConnector.test.ts    |  2 +-
 .../tests/unit/skins/classic/CSData.test.ts   |  2 +-
 .../tests/unit/skins/classic/CSTable.test.ts  |  2 +-
 .../skins/classic/ClassicComponents.test.ts   |  2 +-
 .../unit/skins/classic/ClassicLayout.test.ts  |  2 +-
 .../unit/skins/modern/ConnectorRow.test.ts    |  2 +-
 .../tests/unit/skins/modern/Dialogs.test.ts   |  2 +-
 ui/web/tests/unit/skins/modern/Errors.test.ts |  2 +-
 .../unit/skins/modern/ModernLayout.test.ts    | 18 ++++-----
 .../unit/skins/modern/SimulatorBar.test.ts    |  7 ----
 .../unit/skins/modern/StationCard.test.ts     |  2 +-
 42 files changed, 108 insertions(+), 115 deletions(-)
 delete mode 100644 ui/web/src/shared/composables/index.ts

diff --git a/ui/web/src/App.vue b/ui/web/src/App.vue
index 5420ce0c..8b7476f4 100644
--- a/ui/web/src/App.vue
+++ b/ui/web/src/App.vue
@@ -23,6 +23,7 @@
 <script setup lang="ts">
 import { computed, defineAsyncComponent, markRaw, watch } from 'vue'
 
+import { ASYNC_COMPONENT_DELAY_MS, ASYNC_COMPONENT_TIMEOUT_MS } from '@/core/index.js'
 import SkinLoadError from '@/shared/components/SkinLoadError.vue'
 import SkinLoading from '@/shared/components/SkinLoading.vue'
 import { useSkin } from '@/shared/composables/useSkin.js'
@@ -41,11 +42,11 @@ const skinLayoutMap = new Map(
     s.id,
     markRaw(
       defineAsyncComponent({
-        delay: 200,
+        delay: ASYNC_COMPONENT_DELAY_MS,
         errorComponent: SkinLoadError,
         loader: () => s.loadLayout(),
         loadingComponent: SkinLoading,
-        timeout: 10000,
+        timeout: ASYNC_COMPONENT_TIMEOUT_MS,
       })
     ),
   ])
diff --git a/ui/web/src/core/Constants.ts b/ui/web/src/core/Constants.ts
index f904db63..e92023c9 100644
--- a/ui/web/src/core/Constants.ts
+++ b/ui/web/src/core/Constants.ts
@@ -1,6 +1,11 @@
 // Local UI project constants
 
+export const ASYNC_COMPONENT_DELAY_MS = 200
+export const ASYNC_COMPONENT_TIMEOUT_MS = 10_000
 export const EMPTY_VALUE_PLACEHOLDER = 'Ø'
+export const MAX_SKIN_ERROR_RELOADS = 2
+export const MAX_STATIONS_PER_ADD = 100
+export const WH_PER_KWH = 1000
 
 export const ROUTE_NAMES = {
   ADD_CHARGING_STATIONS: 'add-charging-stations',
diff --git a/ui/web/src/core/index.ts b/ui/web/src/core/index.ts
index 1b6e7b98..e730115f 100644
--- a/ui/web/src/core/index.ts
+++ b/ui/web/src/core/index.ts
@@ -1,10 +1,15 @@
 export {
+  ASYNC_COMPONENT_DELAY_MS,
+  ASYNC_COMPONENT_TIMEOUT_MS,
   EMPTY_VALUE_PLACEHOLDER,
   LEGACY_UI_SERVER_CONFIG_KEY,
+  MAX_SKIN_ERROR_RELOADS,
+  MAX_STATIONS_PER_ADD,
   ROUTE_NAMES,
   SHARED_TOGGLE_BUTTON_KEY_PREFIX,
   TOGGLE_BUTTON_KEY_PREFIX,
   UI_SERVER_CONFIGURATION_INDEX_KEY,
+  WH_PER_KWH,
 } from './Constants.js'
 export {
   chargingStationsKey,
diff --git a/ui/web/src/main.ts b/ui/web/src/main.ts
index 48c8db14..164b0be1 100644
--- a/ui/web/src/main.ts
+++ b/ui/web/src/main.ts
@@ -19,7 +19,7 @@ import {
   UIClient,
   uiClientKey,
 } from '@/core/index.js'
-import { router } from '@/router'
+import { router } from '@/router/index.js'
 import { SKIN_STORAGE_KEY, useSkin } from '@/shared/composables/useSkin.js'
 import { DEFAULT_THEME, THEME_STORAGE_KEY, useTheme } from '@/shared/composables/useTheme.js'
 import { DEFAULT_SKIN } from '@/skins/registry.js'
@@ -40,8 +40,10 @@ import './assets/themes/tokyo-night-storm.css'
 const initializeApp = async (app: AppType, config: ConfigurationData): Promise<void> => {
   app.config.errorHandler = (error, instance, info) => {
     console.error('Error:', error)
-    console.info('Vue instance:', instance)
-    console.info('Error info:', info)
+    if (import.meta.env.DEV) {
+      console.info('Vue instance:', instance)
+      console.info('Error info:', info)
+    }
     // TODO: add code for UI notifications or other error handling logic
   }
 
diff --git a/ui/web/src/shared/components/SkinLoadError.vue b/ui/web/src/shared/components/SkinLoadError.vue
index 60dfeea5..aad03282 100644
--- a/ui/web/src/shared/components/SkinLoadError.vue
+++ b/ui/web/src/shared/components/SkinLoadError.vue
@@ -11,7 +11,7 @@
 </template>
 
 <script setup lang="ts">
-import { setToLocalStorage } from '@/core/index.js'
+import { MAX_SKIN_ERROR_RELOADS, setToLocalStorage } from '@/core/index.js'
 import { SKIN_STORAGE_KEY } from '@/shared/composables/useSkin.js'
 import { DEFAULT_SKIN, skins } from '@/skins/registry.js'
 
@@ -32,7 +32,7 @@ function resetToDefault (): void {
   } catch {
     // sessionStorage unavailable (e.g. Safari private browsing)
   }
-  if (count >= 2) {
+  if (count >= MAX_SKIN_ERROR_RELOADS) {
     // Stop infinite reload loop — show message instead
     return
   }
diff --git a/ui/web/src/shared/composables/index.ts b/ui/web/src/shared/composables/index.ts
deleted file mode 100644
index 85572fa0..00000000
--- a/ui/web/src/shared/composables/index.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-export { useAddStationsForm } from './useAddStationsForm.js'
-export { useAsyncAction } from './useAsyncAction.js'
-export { useConnectorActions } from './useConnectorActions.js'
-export { useFetchData } from './useFetchData.js'
-export { useLayoutData } from './useLayoutData.js'
-export { useSetUrlForm } from './useSetUrlForm.js'
-export { useSimulatorControl } from './useSimulatorControl.js'
-export { SKIN_STORAGE_KEY, useSkin } from './useSkin.js'
-export type { SkinName } from './useSkin.js'
-export { useStartTxForm } from './useStartTxForm.js'
-export { useStationActions } from './useStationActions.js'
-export { AVAILABLE_THEMES, DEFAULT_THEME, THEME_STORAGE_KEY, useTheme } from './useTheme.js'
-export type { ThemeName } from './useTheme.js'
diff --git a/ui/web/src/shared/composables/useFetchData.ts b/ui/web/src/shared/composables/useFetchData.ts
index 118a6321..d95871b4 100644
--- a/ui/web/src/shared/composables/useFetchData.ts
+++ b/ui/web/src/shared/composables/useFetchData.ts
@@ -13,26 +13,28 @@ export const useFetchData = (
   const fetching = vueRef(false)
   const $toast = useToast()
   const fetch = (): void => {
-    if (!fetching.value) {
-      fetching.value = true
-      clientFn()
-        .then((response: ResponsePayload) => {
-          onSuccess(response)
-          return undefined
-        })
-        .finally(() => {
-          fetching.value = false
-        })
-        .catch((error: unknown) => {
-          try {
-            onError?.()
-          } catch (callbackError: unknown) {
-            console.error('Error in onError callback:', callbackError)
-          }
-          $toast.error(errorMsg)
-          console.error(`${errorMsg}:`, error)
-        })
+    if (fetching.value) {
+      return
     }
+    fetching.value = true
+    // eslint-disable-next-line promise/catch-or-return -- .catch() is present; .finally() at end is idiomatic
+    clientFn()
+      .then((response: ResponsePayload) => {
+        onSuccess(response)
+        return undefined
+      })
+      .catch((error: unknown) => {
+        try {
+          onError?.()
+        } catch (callbackError: unknown) {
+          console.error('Error in onError callback:', callbackError)
+        }
+        $toast.error(errorMsg)
+        console.error(`${errorMsg}:`, error)
+      })
+      .finally(() => {
+        fetching.value = false
+      })
   }
   return { fetch, fetching }
 }
diff --git a/ui/web/src/shared/composables/useSkin.ts b/ui/web/src/shared/composables/useSkin.ts
index f5bc2463..47f3363d 100644
--- a/ui/web/src/shared/composables/useSkin.ts
+++ b/ui/web/src/shared/composables/useSkin.ts
@@ -134,7 +134,7 @@ async function performSkinSwitch (skinId: string): Promise<boolean> {
       /* sessionStorage unavailable */
     }
     return true
-  } catch (error) {
+  } catch (error: unknown) {
     const message = error instanceof Error ? error.message : String(error)
     console.warn(`[useSkin] Failed to load CSS for skin '${skinId}':`, message)
     lastError.value = message
diff --git a/ui/web/src/shared/composables/useStartTxForm.ts b/ui/web/src/shared/composables/useStartTxForm.ts
index c487117e..2f561594 100644
--- a/ui/web/src/shared/composables/useStartTxForm.ts
+++ b/ui/web/src/shared/composables/useStartTxForm.ts
@@ -1,14 +1,14 @@
 import { convertToInt, type OCPPVersion } from 'ui-common'
-import { readonly, ref, type Ref } from 'vue'
+import { type MaybeRef, readonly, ref, type Ref, toValue } from 'vue'
 import { useToast } from 'vue-toast-notification'
 
 import { useUIClient } from '@/core/index.js'
 
 export interface StartTxFormConfig {
   connectorId: string
-  evseId?: number
+  evseId?: MaybeRef<number | undefined>
   hashId: string
-  ocppVersion?: OCPPVersion
+  ocppVersion?: MaybeRef<OCPPVersion | undefined>
   options?: {
     onCleanup?: () => void
     onError?: (error: unknown, step?: 'authorize' | 'startTransaction') => void
@@ -67,7 +67,7 @@ export function useStartTxForm (config: StartTxFormConfig): {
         }
         try {
           await $uiClient.authorize(hashId, idTag)
-        } catch (error) {
+        } catch (error: unknown) {
           $toast.error('Error at authorizing RFID tag')
           console.error('Error at authorizing RFID tag:', error)
           options?.onError?.(error, 'authorize')
@@ -79,13 +79,13 @@ export function useStartTxForm (config: StartTxFormConfig): {
       try {
         await $uiClient.startTransaction(hashId, {
           connectorId: convertToInt(connectorId),
-          evseId,
+          evseId: toValue(evseId),
           idTag,
-          ocppVersion,
+          ocppVersion: toValue(ocppVersion),
         })
         $toast.success('Transaction successfully started')
         return true
-      } catch (error) {
+      } catch (error: unknown) {
         $toast.error('Error at starting transaction')
         console.error('Error at starting transaction:', error)
         options?.onError?.(error, 'startTransaction')
diff --git a/ui/web/src/shared/utils/formatSupervisionUrl.ts b/ui/web/src/shared/utils/formatSupervisionUrl.ts
index 0c9d6b99..f64d90e3 100644
--- a/ui/web/src/shared/utils/formatSupervisionUrl.ts
+++ b/ui/web/src/shared/utils/formatSupervisionUrl.ts
@@ -1,4 +1,4 @@
-import { EMPTY_VALUE_PLACEHOLDER } from '@/core/Constants.js'
+import { EMPTY_VALUE_PLACEHOLDER } from '@/core/index.js'
 
 export interface FormatSupervisionUrlOptions {
   /** Insert zero-width-space after dots for word-break in table cells. */
diff --git a/ui/web/src/skins/classic/ClassicLayout.vue b/ui/web/src/skins/classic/ClassicLayout.vue
index ae91b53e..316bf752 100644
--- a/ui/web/src/skins/classic/ClassicLayout.vue
+++ b/ui/web/src/skins/classic/ClassicLayout.vue
@@ -110,7 +110,7 @@ import {
   TOGGLE_BUTTON_KEY_PREFIX,
   UI_SERVER_CONFIGURATION_INDEX_KEY,
   useChargingStations,
-} from '@/core'
+} from '@/core/index.js'
 import { useLayoutData } from '@/shared/composables/useLayoutData.js'
 import { useSimulatorControl } from '@/shared/composables/useSimulatorControl.js'
 import { useSkin } from '@/shared/composables/useSkin.js'
diff --git a/ui/web/src/skins/classic/components/actions/AddChargingStations.vue b/ui/web/src/skins/classic/components/actions/AddChargingStations.vue
index 1da70e47..26b05c8c 100644
--- a/ui/web/src/skins/classic/components/actions/AddChargingStations.vue
+++ b/ui/web/src/skins/classic/components/actions/AddChargingStations.vue
@@ -25,7 +25,7 @@
     id="number-of-stations"
     v-model="formState.numberOfStations"
     class="classic-number-of-stations"
-    max="100"
+    :max="MAX_STATIONS_PER_ADD"
     min="1"
     name="number-of-stations"
     placeholder="number of stations"
@@ -123,7 +123,7 @@
 <script setup lang="ts">
 import { useRouter } from 'vue-router'
 
-import { resetToggleButtonState, ROUTE_NAMES } from '@/core'
+import { MAX_STATIONS_PER_ADD, resetToggleButtonState, ROUTE_NAMES } from '@/core/index.js'
 import { useAddStationsForm } from '@/shared/composables/useAddStationsForm.js'
 
 import Button from '../buttons/ClassicButton.vue'
diff --git a/ui/web/src/skins/classic/components/actions/SetSupervisionUrl.vue b/ui/web/src/skins/classic/components/actions/SetSupervisionUrl.vue
index d4f7d3d5..512d3fc0 100644
--- a/ui/web/src/skins/classic/components/actions/SetSupervisionUrl.vue
+++ b/ui/web/src/skins/classic/components/actions/SetSupervisionUrl.vue
@@ -44,7 +44,7 @@
 <script setup lang="ts">
 import { useRouter } from 'vue-router'
 
-import { resetToggleButtonState, ROUTE_NAMES } from '@/core'
+import { resetToggleButtonState, ROUTE_NAMES } from '@/core/index.js'
 import { useSetUrlForm } from '@/shared/composables/useSetUrlForm.js'
 
 import Button from '../buttons/ClassicButton.vue'
diff --git a/ui/web/src/skins/classic/components/actions/StartTransaction.vue b/ui/web/src/skins/classic/components/actions/StartTransaction.vue
index 762d39dd..4c51be8f 100644
--- a/ui/web/src/skins/classic/components/actions/StartTransaction.vue
+++ b/ui/web/src/skins/classic/components/actions/StartTransaction.vue
@@ -42,7 +42,7 @@ import type { OCPPVersion } from 'ui-common'
 import { computed } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 
-import { resetToggleButtonState, ROUTE_NAMES } from '@/core'
+import { resetToggleButtonState, ROUTE_NAMES } from '@/core/index.js'
 import { useStartTxForm } from '@/shared/composables/useStartTxForm.js'
 
 import Button from '../buttons/ClassicButton.vue'
@@ -70,9 +70,9 @@ const toggleButtonId = computed(
 
 const { formState, submitForm } = useStartTxForm({
   connectorId: props.connectorId,
-  evseId: evseId.value,
+  evseId,
   hashId: props.hashId,
-  ocppVersion: ocppVersion.value,
+  ocppVersion,
   options: {
     onCleanup: () => {
       resetToggleButtonState(toggleButtonId.value, true)
diff --git a/ui/web/src/skins/classic/components/buttons/ToggleButton.vue b/ui/web/src/skins/classic/components/buttons/ToggleButton.vue
index ecc38b1c..123b11d7 100644
--- a/ui/web/src/skins/classic/components/buttons/ToggleButton.vue
+++ b/ui/web/src/skins/classic/components/buttons/ToggleButton.vue
@@ -16,7 +16,7 @@ import {
   setToLocalStorage,
   SHARED_TOGGLE_BUTTON_KEY_PREFIX,
   TOGGLE_BUTTON_KEY_PREFIX,
-} from '@/core'
+} from '@/core/index.js'
 
 import Button from './ClassicButton.vue'
 
diff --git a/ui/web/src/skins/classic/components/charging-stations/CSConnector.vue b/ui/web/src/skins/classic/components/charging-stations/CSConnector.vue
index 7f33f735..fe5df88a 100644
--- a/ui/web/src/skins/classic/components/charging-stations/CSConnector.vue
+++ b/ui/web/src/skins/classic/components/charging-stations/CSConnector.vue
@@ -71,7 +71,7 @@ import type { ConnectorStatus, OCPPVersion, Status } from 'ui-common'
 import { computed } from 'vue'
 import { useRouter } from 'vue-router'
 
-import { EMPTY_VALUE_PLACEHOLDER, ROUTE_NAMES } from '@/core'
+import { EMPTY_VALUE_PLACEHOLDER, ROUTE_NAMES } from '@/core/index.js'
 import { useConnectorActions } from '@/shared/composables/useConnectorActions.js'
 
 import Button from '../buttons/ClassicButton.vue'
diff --git a/ui/web/src/skins/classic/components/charging-stations/CSData.vue b/ui/web/src/skins/classic/components/charging-stations/CSData.vue
index 0eea87c5..e8384112 100644
--- a/ui/web/src/skins/classic/components/charging-stations/CSData.vue
+++ b/ui/web/src/skins/classic/components/charging-stations/CSData.vue
@@ -125,7 +125,11 @@ import {
 } from 'ui-common'
 import { computed } from 'vue'
 
-import { deleteLocalStorageByKeyPattern, EMPTY_VALUE_PLACEHOLDER, ROUTE_NAMES } from '@/core'
+import {
+  deleteLocalStorageByKeyPattern,
+  EMPTY_VALUE_PLACEHOLDER,
+  ROUTE_NAMES,
+} from '@/core/index.js'
 import { useStationActions } from '@/shared/composables/useStationActions.js'
 import { formatSupervisionUrl } from '@/shared/utils/formatSupervisionUrl.js'
 import { getATGStatus, getConnectorEntries } from '@/shared/utils/stationStatus.js'
diff --git a/ui/web/src/skins/modern/ModernLayout.vue b/ui/web/src/skins/modern/ModernLayout.vue
index fc7f2b3b..0fce3967 100644
--- a/ui/web/src/skins/modern/ModernLayout.vue
+++ b/ui/web/src/skins/modern/ModernLayout.vue
@@ -1,14 +1,12 @@
 <template>
   <main class="modern-app">
     <SimulatorBar
-      :refresh-pending="loading"
       :selected-server-index="uiServerIndex"
       :server-switch-pending="serverSwitchPending"
       :simulator-pending="simulatorPending"
       :simulator-state="simulatorState"
       :ui-server-configurations="uiServerConfigurations"
       @add="showAddDialog = true"
-      @refresh="getData"
       @switch-server="handleUIServerChange"
       @toggle-simulator="toggleSimulator"
     />
@@ -81,7 +79,13 @@
 import { type OCPPVersion } from 'ui-common'
 import { defineAsyncComponent, ref } from 'vue'
 
-import { getFromLocalStorage, UI_SERVER_CONFIGURATION_INDEX_KEY, useChargingStations } from '@/core'
+import {
+  ASYNC_COMPONENT_DELAY_MS,
+  ASYNC_COMPONENT_TIMEOUT_MS,
+  getFromLocalStorage,
+  UI_SERVER_CONFIGURATION_INDEX_KEY,
+  useChargingStations,
+} from '@/core/index.js'
 import SkinLoadError from '@/shared/components/SkinLoadError.vue'
 import SkinLoading from '@/shared/components/SkinLoading.vue'
 import { useLayoutData } from '@/shared/composables/useLayoutData.js'
@@ -96,11 +100,11 @@ import ConfirmDialog from './components/ConfirmDialog.vue'
  */
 function defineAsyncDialog (loader: () => Promise<{ default: unknown }>) {
   return defineAsyncComponent({
-    delay: 200,
+    delay: ASYNC_COMPONENT_DELAY_MS,
     errorComponent: SkinLoadError,
     loader: loader as () => Promise<{ default: import('vue').Component }>,
     loadingComponent: SkinLoading,
-    timeout: 10000,
+    timeout: ASYNC_COMPONENT_TIMEOUT_MS,
   })
 }
 
@@ -120,7 +124,7 @@ import StationCard from './components/StationCard.vue'
 const $chargingStations = useChargingStations()
 
 const layoutData = useLayoutData()
-const { getChargingStations, getData, loading, simulatorState, uiServerConfigurations } = layoutData
+const { getChargingStations, simulatorState, uiServerConfigurations } = layoutData
 
 const uiServerIndex = ref(getFromLocalStorage<number>(UI_SERVER_CONFIGURATION_INDEX_KEY, 0))
 
diff --git a/ui/web/src/skins/modern/components/ConnectorRow.vue b/ui/web/src/skins/modern/components/ConnectorRow.vue
index 6722f077..abfa8b94 100644
--- a/ui/web/src/skins/modern/components/ConnectorRow.vue
+++ b/ui/web/src/skins/modern/components/ConnectorRow.vue
@@ -152,6 +152,7 @@ import type { ConnectorStatus, OCPPVersion, Status } from 'ui-common'
 
 import { computed } from 'vue'
 
+import { WH_PER_KWH } from '@/core/index.js'
 import { useConnectorActions } from '@/shared/composables/useConnectorActions.js'
 import { getConnectorStatusVariant } from '@/shared/utils/stationStatus.js'
 
@@ -213,7 +214,7 @@ const lockTitle = computed(() => {
 const txEnergy = computed(() => {
   const wh = props.connector.transactionEnergyActiveImportRegisterValue
   if (wh == null) return '—'
-  if (wh >= 1000) return `${(wh / 1000).toFixed(2)} kWh`
+  if (wh >= WH_PER_KWH) return `${(wh / WH_PER_KWH).toFixed(2)} kWh`
   return `${Math.round(wh)} Wh`
 })
 
diff --git a/ui/web/src/skins/modern/components/SimulatorBar.vue b/ui/web/src/skins/modern/components/SimulatorBar.vue
index 336ff834..7f187614 100644
--- a/ui/web/src/skins/modern/components/SimulatorBar.vue
+++ b/ui/web/src/skins/modern/components/SimulatorBar.vue
@@ -36,14 +36,6 @@
       </select>
     </div>
     <div class="modern-bar__group">
-      <!-- <ActionButton
-        variant="ghost"
-        :pending="refreshPending"
-        title="Refresh charging stations"
-        @click="$emit('refresh')"
-      >
-        Refresh
-      </ActionButton> -->
       <ActionButton
         variant="primary"
         @click="$emit('add')"
@@ -114,7 +106,6 @@ function getSelectIndex (e: Event): number {
 }
 
 const props = defineProps<{
-  refreshPending?: boolean
   selectedServerIndex: number
   serverSwitchPending?: boolean
   simulatorPending?: boolean
@@ -124,7 +115,6 @@ const props = defineProps<{
 
 defineEmits<{
   add: []
-  refresh: []
   'switch-server': [index: number]
   'toggle-simulator': []
 }>()
diff --git a/ui/web/src/skins/modern/components/StationCard.vue b/ui/web/src/skins/modern/components/StationCard.vue
index fe0665e3..3d056eb7 100644
--- a/ui/web/src/skins/modern/components/StationCard.vue
+++ b/ui/web/src/skins/modern/components/StationCard.vue
@@ -168,7 +168,7 @@ import {
 } from 'ui-common'
 import { computed, ref } from 'vue'
 
-import { deleteLocalStorageByKeyPattern, EMPTY_VALUE_PLACEHOLDER as EMPTY } from '@/core'
+import { deleteLocalStorageByKeyPattern, EMPTY_VALUE_PLACEHOLDER as EMPTY } from '@/core/index.js'
 import { useStationActions } from '@/shared/composables/useStationActions.js'
 import { formatSupervisionUrl } from '@/shared/utils/formatSupervisionUrl.js'
 import {
diff --git a/ui/web/src/skins/modern/components/dialogs/AddStationsDialog.vue b/ui/web/src/skins/modern/components/dialogs/AddStationsDialog.vue
index 718f72af..4c4a6a4e 100644
--- a/ui/web/src/skins/modern/components/dialogs/AddStationsDialog.vue
+++ b/ui/web/src/skins/modern/components/dialogs/AddStationsDialog.vue
@@ -42,7 +42,7 @@
           id="modern-add-count"
           v-model.number="formState.numberOfStations"
           class="modern-form__input"
-          max="100"
+          :max="MAX_STATIONS_PER_ADD"
           min="1"
           type="number"
           required
@@ -162,6 +162,7 @@
 </template>
 
 <script setup lang="ts">
+import { MAX_STATIONS_PER_ADD } from '@/core/index.js'
 import { useAddStationsForm } from '@/shared/composables/useAddStationsForm.js'
 
 import ActionButton from '../ActionButton.vue'
diff --git a/ui/web/src/skins/modern/components/dialogs/AuthorizeDialog.vue b/ui/web/src/skins/modern/components/dialogs/AuthorizeDialog.vue
index aa8ae6ba..61e8d3c8 100644
--- a/ui/web/src/skins/modern/components/dialogs/AuthorizeDialog.vue
+++ b/ui/web/src/skins/modern/components/dialogs/AuthorizeDialog.vue
@@ -63,7 +63,7 @@
 import { computed, ref } from 'vue'
 import { useToast } from 'vue-toast-notification'
 
-import { useUIClient } from '@/core'
+import { useUIClient } from '@/core/index.js'
 
 import { type FailureInfo, getFailureInfo } from '../../utils/errors.js'
 import ActionButton from '../ActionButton.vue'
@@ -104,7 +104,7 @@ const submit = async (): Promise<void> => {
     await $uiClient.authorize(props.hashId, idTag.value)
     $toast.success(`Authorized ${idTag.value}`)
     close()
-  } catch (error) {
+  } catch (error: unknown) {
     console.error('Error authorizing:', error)
     const info = getFailureInfo(error)
     lastFailure.value = info
diff --git a/ui/web/src/skins/modern/components/dialogs/SetSupervisionUrlDialog.vue b/ui/web/src/skins/modern/components/dialogs/SetSupervisionUrlDialog.vue
index 0689f786..d57764d9 100644
--- a/ui/web/src/skins/modern/components/dialogs/SetSupervisionUrlDialog.vue
+++ b/ui/web/src/skins/modern/components/dialogs/SetSupervisionUrlDialog.vue
@@ -83,7 +83,7 @@
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue'
 
-import { useChargingStations, useUIClient } from '@/core'
+import { useChargingStations, useUIClient } from '@/core/index.js'
 import { useSetUrlForm } from '@/shared/composables/useSetUrlForm.js'
 import { stripStationId } from '@/shared/utils/stripStationId.js'
 
diff --git a/ui/web/src/skins/modern/components/dialogs/StartTransactionDialog.vue b/ui/web/src/skins/modern/components/dialogs/StartTransactionDialog.vue
index 0ec8afb4..95dc8ea5 100644
--- a/ui/web/src/skins/modern/components/dialogs/StartTransactionDialog.vue
+++ b/ui/web/src/skins/modern/components/dialogs/StartTransactionDialog.vue
@@ -78,7 +78,7 @@ import { computed, ref, watch } from 'vue'
 
 import { useStartTxForm } from '@/shared/composables/useStartTxForm.js'
 
-import { type FailureInfo, getFailureInfo } from '../../utils/errors'
+import { type FailureInfo, getFailureInfo } from '../../utils/errors.js'
 import ActionButton from '../ActionButton.vue'
 import Modal from '../ModernModal.vue'
 
diff --git a/ui/web/tests/unit/UIClient.test.ts b/ui/web/tests/unit/UIClient.test.ts
index b2b7d4ef..fc1e8d69 100644
--- a/ui/web/tests/unit/UIClient.test.ts
+++ b/ui/web/tests/unit/UIClient.test.ts
@@ -14,7 +14,7 @@ import {
 } from 'ui-common'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
-import { UIClient } from '@/core'
+import { UIClient } from '@/core/index.js'
 
 import { toastMock } from '../setup'
 import { createUIServerConfig, TEST_HASH_ID, TEST_ID_TAG } from './constants'
diff --git a/ui/web/tests/unit/Utils.test.ts b/ui/web/tests/unit/Utils.test.ts
index 566a3bc0..602a7818 100644
--- a/ui/web/tests/unit/Utils.test.ts
+++ b/ui/web/tests/unit/Utils.test.ts
@@ -15,7 +15,7 @@ import {
   useChargingStations,
   useConfiguration,
   useTemplates,
-} from '@/core'
+} from '@/core/index.js'
 import { useFetchData } from '@/shared/composables/useFetchData.js'
 
 import { toastMock } from '../setup'
diff --git a/ui/web/tests/unit/router.test.ts b/ui/web/tests/unit/router.test.ts
index 52a440a6..7c34806a 100644
--- a/ui/web/tests/unit/router.test.ts
+++ b/ui/web/tests/unit/router.test.ts
@@ -4,7 +4,7 @@
  */
 import { describe, expect, it, vi } from 'vitest'
 
-import { ROUTE_NAMES } from '@/core'
+import { ROUTE_NAMES } from '@/core/index.js'
 import { router } from '@/router/index.js'
 
 vi.mock('@/shared/composables/useSkin.js', async importOriginal => {
diff --git a/ui/web/tests/unit/shared/composables/useLayoutData.test.ts b/ui/web/tests/unit/shared/composables/useLayoutData.test.ts
index 688bf39b..460816ec 100644
--- a/ui/web/tests/unit/shared/composables/useLayoutData.test.ts
+++ b/ui/web/tests/unit/shared/composables/useLayoutData.test.ts
@@ -8,9 +8,9 @@ import { flushPromises } from '@vue/test-utils'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { type Ref, ref } from 'vue'
 
-import { useChargingStations, useConfiguration, useTemplates, useUIClient } from '@/core'
+import { useChargingStations, useConfiguration, useTemplates, useUIClient } from '@/core/index.js'
 
-vi.mock('@/core', async importOriginal => {
+vi.mock('@/core/index.js', async importOriginal => {
   const actual = await importOriginal()
   return {
     ...(actual as Record<string, unknown>),
diff --git a/ui/web/tests/unit/shared/composables/useSimulatorControl.test.ts b/ui/web/tests/unit/shared/composables/useSimulatorControl.test.ts
index c408263b..b20edb59 100644
--- a/ui/web/tests/unit/shared/composables/useSimulatorControl.test.ts
+++ b/ui/web/tests/unit/shared/composables/useSimulatorControl.test.ts
@@ -15,13 +15,13 @@ import {
   useChargingStations,
   useConfiguration,
   useUIClient,
-} from '@/core'
+} from '@/core/index.js'
 
 import { toastMock } from '../../../setup.js'
 import { createUIServerConfig } from '../../constants'
 import { createMockUIClient, type MockUIClient, withSetup } from '../../helpers.js'
 
-vi.mock('@/core', async importOriginal => {
+vi.mock('@/core/index.js', async importOriginal => {
   const actual = await importOriginal()
   return {
     ...(actual as Record<string, unknown>),
diff --git a/ui/web/tests/unit/skins/classic/Actions.test.ts b/ui/web/tests/unit/skins/classic/Actions.test.ts
index 883f9da4..97f92cb0 100644
--- a/ui/web/tests/unit/skins/classic/Actions.test.ts
+++ b/ui/web/tests/unit/skins/classic/Actions.test.ts
@@ -6,7 +6,7 @@ import { flushPromises, mount } from '@vue/test-utils'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { ref, shallowRef } from 'vue'
 
-import { chargingStationsKey, configurationKey, templatesKey, uiClientKey } from '@/core'
+import { chargingStationsKey, configurationKey, templatesKey, uiClientKey } from '@/core/index.js'
 import AddChargingStations from '@/skins/classic/components/actions/AddChargingStations.vue'
 import SetSupervisionUrl from '@/skins/classic/components/actions/SetSupervisionUrl.vue'
 import StartTransaction from '@/skins/classic/components/actions/StartTransaction.vue'
diff --git a/ui/web/tests/unit/skins/classic/CSConnector.test.ts b/ui/web/tests/unit/skins/classic/CSConnector.test.ts
index a2efabf5..0596e3c3 100644
--- a/ui/web/tests/unit/skins/classic/CSConnector.test.ts
+++ b/ui/web/tests/unit/skins/classic/CSConnector.test.ts
@@ -6,7 +6,7 @@ import { flushPromises, mount } from '@vue/test-utils'
 import { type ConnectorStatus, OCPP16ChargePointStatus, OCPPVersion } from 'ui-common'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
-import { uiClientKey } from '@/core'
+import { uiClientKey } from '@/core/index.js'
 import CSConnector from '@/skins/classic/components/charging-stations/CSConnector.vue'
 
 import { toastMock } from '../../../setup.js'
diff --git a/ui/web/tests/unit/skins/classic/CSData.test.ts b/ui/web/tests/unit/skins/classic/CSData.test.ts
index 4de141ee..f6279be5 100644
--- a/ui/web/tests/unit/skins/classic/CSData.test.ts
+++ b/ui/web/tests/unit/skins/classic/CSData.test.ts
@@ -6,7 +6,7 @@ import { flushPromises, mount } from '@vue/test-utils'
 import { type ChargingStationData, OCPP16AvailabilityType, OCPPVersion } from 'ui-common'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
-import { uiClientKey } from '@/core'
+import { uiClientKey } from '@/core/index.js'
 import CSData from '@/skins/classic/components/charging-stations/CSData.vue'
 
 import { toastMock } from '../../../setup.js'
diff --git a/ui/web/tests/unit/skins/classic/CSTable.test.ts b/ui/web/tests/unit/skins/classic/CSTable.test.ts
index 1dfe9346..511326e7 100644
--- a/ui/web/tests/unit/skins/classic/CSTable.test.ts
+++ b/ui/web/tests/unit/skins/classic/CSTable.test.ts
@@ -5,7 +5,7 @@
 import { shallowMount } from '@vue/test-utils'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
-import { uiClientKey } from '@/core'
+import { uiClientKey } from '@/core/index.js'
 import CSTable from '@/skins/classic/components/charging-stations/CSTable.vue'
 
 import { createChargingStationData } from '../../constants.js'
diff --git a/ui/web/tests/unit/skins/classic/ClassicComponents.test.ts b/ui/web/tests/unit/skins/classic/ClassicComponents.test.ts
index 1f164943..305dfb92 100644
--- a/ui/web/tests/unit/skins/classic/ClassicComponents.test.ts
+++ b/ui/web/tests/unit/skins/classic/ClassicComponents.test.ts
@@ -8,7 +8,7 @@ import { flushPromises, mount } from '@vue/test-utils'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { defineComponent, shallowRef } from 'vue'
 
-import { chargingStationsKey, configurationKey, templatesKey, uiClientKey } from '@/core'
+import { chargingStationsKey, configurationKey, templatesKey, uiClientKey } from '@/core/index.js'
 import ToggleButton from '@/skins/classic/components/buttons/ToggleButton.vue'
 import CSTable from '@/skins/classic/components/charging-stations/CSTable.vue'
 
diff --git a/ui/web/tests/unit/skins/classic/ClassicLayout.test.ts b/ui/web/tests/unit/skins/classic/ClassicLayout.test.ts
index b745e6dc..86e2e840 100644
--- a/ui/web/tests/unit/skins/classic/ClassicLayout.test.ts
+++ b/ui/web/tests/unit/skins/classic/ClassicLayout.test.ts
@@ -6,7 +6,7 @@ import { flushPromises, mount } from '@vue/test-utils'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { ref } from 'vue'
 
-import { chargingStationsKey, configurationKey, templatesKey, uiClientKey } from '@/core'
+import { chargingStationsKey, configurationKey, templatesKey, uiClientKey } from '@/core/index.js'
 import ClassicLayout from '@/skins/classic/ClassicLayout.vue'
 
 import { createUIServerConfig } from '../../constants'
diff --git a/ui/web/tests/unit/skins/modern/ConnectorRow.test.ts b/ui/web/tests/unit/skins/modern/ConnectorRow.test.ts
index 93f5e267..55bdecd1 100644
--- a/ui/web/tests/unit/skins/modern/ConnectorRow.test.ts
+++ b/ui/web/tests/unit/skins/modern/ConnectorRow.test.ts
@@ -11,7 +11,7 @@ import {
 } from 'ui-common'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
-import { uiClientKey } from '@/core'
+import { uiClientKey } from '@/core/index.js'
 import ConnectorRow from '@/skins/modern/components/ConnectorRow.vue'
 
 import { toastMock } from '../../../setup.js'
diff --git a/ui/web/tests/unit/skins/modern/Dialogs.test.ts b/ui/web/tests/unit/skins/modern/Dialogs.test.ts
index 9d8d00be..feaec003 100644
--- a/ui/web/tests/unit/skins/modern/Dialogs.test.ts
+++ b/ui/web/tests/unit/skins/modern/Dialogs.test.ts
@@ -8,7 +8,7 @@ import { ResponseStatus, ServerFailureError } from 'ui-common'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { defineComponent, ref } from 'vue'
 
-import { chargingStationsKey, templatesKey, uiClientKey } from '@/core'
+import { chargingStationsKey, templatesKey, uiClientKey } from '@/core/index.js'
 
 // Mock Modal to render slots inline (no Teleport), so `wrapper.find()` works.
 vi.mock('@/skins/modern/components/ModernModal.vue', () => ({
diff --git a/ui/web/tests/unit/skins/modern/Errors.test.ts b/ui/web/tests/unit/skins/modern/Errors.test.ts
index e223b086..266db357 100644
--- a/ui/web/tests/unit/skins/modern/Errors.test.ts
+++ b/ui/web/tests/unit/skins/modern/Errors.test.ts
@@ -7,7 +7,7 @@
 import { type ResponsePayload, ResponseStatus, ServerFailureError } from 'ui-common'
 import { describe, expect, it } from 'vitest'
 
-import { getFailureInfo } from '@/skins/modern/utils/errors'
+import { getFailureInfo } from '@/skins/modern/utils/errors.js'
 
 /**
  * Builds a ResponsePayload-shaped object with custom responsesFailed entries.
diff --git a/ui/web/tests/unit/skins/modern/ModernLayout.test.ts b/ui/web/tests/unit/skins/modern/ModernLayout.test.ts
index 015fa072..ddb0006f 100644
--- a/ui/web/tests/unit/skins/modern/ModernLayout.test.ts
+++ b/ui/web/tests/unit/skins/modern/ModernLayout.test.ts
@@ -14,14 +14,14 @@ import {
   UI_SERVER_CONFIGURATION_INDEX_KEY,
   uiClientKey,
   useUIClient,
-} from '@/core'
+} from '@/core/index.js'
 import ModernLayout from '@/skins/modern/ModernLayout.vue'
 
 import { toastMock } from '../../../setup.js'
 import { createChargingStationData, createUIServerConfig } from '../../constants'
 import { createMockUIClient, type MockUIClient } from '../../helpers.js'
 
-vi.mock('@/core', async importOriginal => {
+vi.mock('@/core/index.js', async importOriginal => {
   const actual = await importOriginal()
   return { ...(actual as Record<string, unknown>), useUIClient: vi.fn() }
 })
@@ -78,16 +78,14 @@ function mountView (
         },
         SetSupervisionUrlDialog: true,
         SimulatorBar: {
-          emits: ['add', 'refresh', 'switch-server', 'toggle-simulator'],
+          emits: ['add', 'switch-server', 'toggle-simulator'],
           props: [
-            'refreshPending',
             'selectedServerIndex',
             'simulatorPending',
             'simulatorState',
             'uiServerConfigurations',
           ],
           template: `<div class="stub-sim-bar">
-            <button class="stub-refresh" @click="$emit('refresh')">r</button>
             <button class="stub-add" @click="$emit('add')">+</button>
             <button class="stub-toggle" @click="$emit('toggle-simulator')">t</button>
             <button class="stub-switch" @click="$emit('switch-server', 1)">s</button>
@@ -186,7 +184,7 @@ describe('ModernLayout', () => {
     })
     const wrapper = mountView()
     await flushPromises()
-    await wrapper.find('.stub-refresh').trigger('click')
+    getWSHandler('open')?.()
     await flushPromises()
     await wrapper.find('.stub-toggle').trigger('click')
     await flushPromises()
@@ -200,7 +198,7 @@ describe('ModernLayout', () => {
     })
     const wrapper = mountView()
     await flushPromises()
-    await wrapper.find('.stub-refresh').trigger('click')
+    getWSHandler('open')?.()
     await flushPromises()
     await wrapper.find('.stub-toggle').trigger('click')
     await flushPromises()
@@ -217,7 +215,7 @@ describe('ModernLayout', () => {
     })
     const wrapper = mountView()
     await flushPromises()
-    await wrapper.find('.stub-refresh').trigger('click')
+    getWSHandler('open')?.()
     await flushPromises()
     await wrapper.find('.stub-toggle').trigger('click')
     await flushPromises()
@@ -234,7 +232,7 @@ describe('ModernLayout', () => {
     })
     const wrapper = mountView()
     await flushPromises()
-    await wrapper.find('.stub-refresh').trigger('click')
+    getWSHandler('open')?.()
     await flushPromises()
     await wrapper.find('.stub-toggle').trigger('click')
     await flushPromises()
@@ -249,7 +247,7 @@ describe('ModernLayout', () => {
     mockClient.startSimulator = vi.fn().mockRejectedValue(new Error('x'))
     const wrapper = mountView()
     await flushPromises()
-    await wrapper.find('.stub-refresh').trigger('click')
+    getWSHandler('open')?.()
     await flushPromises()
     await wrapper.find('.stub-toggle').trigger('click')
     await flushPromises()
diff --git a/ui/web/tests/unit/skins/modern/SimulatorBar.test.ts b/ui/web/tests/unit/skins/modern/SimulatorBar.test.ts
index 7619eaf2..c9806a90 100644
--- a/ui/web/tests/unit/skins/modern/SimulatorBar.test.ts
+++ b/ui/web/tests/unit/skins/modern/SimulatorBar.test.ts
@@ -74,13 +74,6 @@ describe('SimulatorBar', () => {
     expect(wrapper.emitted('switch-server')).toEqual([[1]])
   })
 
-  // it('should emit refresh when refresh button is clicked', async () => {
-  //   const wrapper = mountBar()
-  //   const [refreshBtn] = wrapper.findAll('.modern-btn')
-  //   await refreshBtn.trigger('click')
-  //   expect(wrapper.emitted('refresh')).toHaveLength(1)
-  // })
-
   it('should emit add when add-stations button is clicked', async () => {
     const wrapper = mountBar()
     const buttons = wrapper.findAll('.modern-btn')
diff --git a/ui/web/tests/unit/skins/modern/StationCard.test.ts b/ui/web/tests/unit/skins/modern/StationCard.test.ts
index de7a083d..15072b74 100644
--- a/ui/web/tests/unit/skins/modern/StationCard.test.ts
+++ b/ui/web/tests/unit/skins/modern/StationCard.test.ts
@@ -6,7 +6,7 @@ import { flushPromises, mount } from '@vue/test-utils'
 import { type ChargingStationData, OCPP16AvailabilityType } from 'ui-common'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
-import { uiClientKey } from '@/core'
+import { uiClientKey } from '@/core/index.js'
 import StationCard from '@/skins/modern/components/StationCard.vue'
 
 import { toastMock } from '../../../setup.js'
-- 
2.43.0