From e0421cc7d8651e053f6b6d9b1f941155a63c8cc9 Mon Sep 17 00:00:00 2001
From: Maschga <88616799+Maschga@users.noreply.github.com>
Date: Mon, 28 Apr 2025 23:01:20 +0200
Subject: [PATCH] Chore: Typescript: Rewrite GlobalSettings (#20837)

Co-authored-by: Michael Geers <michael@geers.tv>
---
 assets/js/components/Auth/LoginModal.vue      |  4 +--
 assets/js/components/Auth/PasswordModal.vue   |  2 +-
 assets/js/components/Auth/auth.ts             |  6 ++--
 .../Battery/BatterySettingsModal.vue          | 10 +++---
 .../js/components/ChargingPlans/Arrival.vue   |  6 ++--
 .../components/ChargingPlans/ChargingPlan.vue | 14 ++++----
 .../ChargingPlans/PlanRepeatingSettings.vue   |  8 ++---
 .../ChargingPlans/PlanStaticSettings.vue      |  6 ++--
 .../ChargingPlans/PlansRepeatingSettings.vue  |  6 ++--
 .../ChargingPlans/PlansSettings.vue           | 15 ++++----
 .../ChargingPlans/PreconditionSelect.vue      |  2 +-
 .../ChargingPlans/Preview.stories.ts          |  2 +-
 .../components/ChargingPlans/Preview.test.ts  |  2 +-
 .../js/components/ChargingPlans/Preview.vue   |  6 ++--
 .../js/components/ChargingPlans/Warnings.vue  |  6 ++--
 assets/js/components/ChargingPlans/types.d.ts |  2 +-
 assets/js/components/Config/ChargerModal.vue  |  2 +-
 assets/js/components/Config/ControlModal.vue  |  4 +--
 assets/js/components/Config/DeviceTags.vue    |  2 +-
 assets/js/components/Config/FormRow.vue       |  2 +-
 assets/js/components/Config/GeneralConfig.vue |  8 ++---
 assets/js/components/Config/JsonModal.vue     |  6 ++--
 .../js/components/Config/LoadpointModal.vue   |  8 ++---
 assets/js/components/Config/MeterModal.vue    |  2 +-
 assets/js/components/Config/PropertyField.vue |  2 +-
 assets/js/components/Config/SponsorModal.vue  |  6 ++--
 assets/js/components/Config/VehicleModal.vue  |  2 +-
 assets/js/components/Config/YamlEditor.vue    |  2 +-
 assets/js/components/Config/YamlModal.vue     |  4 +--
 .../js/components/Energyflow/BatteryIcon.vue  |  2 +-
 .../Energyflow/Energyflow.stories.ts          |  2 +-
 .../js/components/Energyflow/Energyflow.vue   | 10 +++---
 assets/js/components/Energyflow/Entry.vue     |  2 +-
 .../components/Energyflow/Visualization.vue   |  4 +--
 .../js/components/Footer/OfflineIndicator.vue |  4 +--
 assets/js/components/Footer/Version.vue       |  2 +-
 assets/js/components/Forecast/ActiveSlot.vue  |  4 +--
 assets/js/components/Forecast/Chart.vue       | 10 +++---
 assets/js/components/Forecast/Details.vue     |  8 ++---
 .../js/components/Forecast/ForecastModal.vue  | 10 +++---
 assets/js/components/Forecast/TypeSelect.vue  |  2 +-
 .../GlobalSettings/GlobalSettingsModal.vue    | 10 +++---
 .../GlobalSettings/UserInterfaceSettings.vue  | 34 +++++++++----------
 assets/js/components/HelpModal.vue            |  4 +--
 assets/js/components/Helper/CustomSelect.vue  |  2 +-
 assets/js/components/Helper/MultiSelect.vue   |  4 +--
 .../components/Helper/SelectGroup.story.vue   |  2 +-
 assets/js/components/Helper/SelectGroup.vue   |  2 +-
 assets/js/components/Loadpoints/Loadpoint.vue | 10 +++---
 .../js/components/Loadpoints/SessionInfo.vue  |  4 +--
 .../Loadpoints/SettingsBatteryBoost.vue       |  2 +-
 .../components/Loadpoints/SettingsModal.vue   |  6 ++--
 assets/js/components/Loadpoints/session.ts    |  2 +-
 assets/js/components/MaterialIcon/Add.vue     |  2 +-
 .../components/MaterialIcon/BatteryBoost.vue  |  2 +-
 .../js/components/MaterialIcon/Circuits.vue   |  2 +-
 .../js/components/MaterialIcon/Climater.vue   |  2 +-
 .../components/MaterialIcon/CloudOffline.vue  |  2 +-
 .../js/components/MaterialIcon/Dropdown.vue   |  2 +-
 .../components/MaterialIcon/DynamicPrice.vue  |  2 +-
 assets/js/components/MaterialIcon/Edit.vue    |  2 +-
 assets/js/components/MaterialIcon/Eebus.vue   |  2 +-
 .../js/components/MaterialIcon/Forecast.vue   |  2 +-
 assets/js/components/MaterialIcon/Hems.vue    |  2 +-
 assets/js/components/MaterialIcon/Influx.vue  |  2 +-
 .../js/components/MaterialIcon/Loadpoint.vue  |  2 +-
 .../components/MaterialIcon/ModbusProxy.vue   |  2 +-
 assets/js/components/MaterialIcon/Mqtt.vue    |  2 +-
 .../components/MaterialIcon/Notification.vue  |  2 +-
 assets/js/components/MaterialIcon/PlanEnd.vue |  2 +-
 .../js/components/MaterialIcon/PlanStart.vue  |  2 +-
 assets/js/components/MaterialIcon/Play.vue    |  2 +-
 .../js/components/MaterialIcon/Question.vue   |  2 +-
 .../js/components/MaterialIcon/Reconnect.vue  |  2 +-
 assets/js/components/MaterialIcon/Record.vue  |  2 +-
 assets/js/components/MaterialIcon/Restart.vue |  2 +-
 .../js/components/MaterialIcon/RfidWait.vue   |  2 +-
 assets/js/components/MaterialIcon/SunDown.vue |  2 +-
 assets/js/components/MaterialIcon/SunUp.vue   |  2 +-
 assets/js/components/MaterialIcon/Sync.vue    |  2 +-
 .../js/components/MaterialIcon/TempLimit.vue  |  2 +-
 assets/js/components/MaterialIcon/Total.vue   |  2 +-
 .../components/MaterialIcon/VehicleLimit.vue  |  2 +-
 .../MaterialIcon/VehicleLimitReached.vue      |  2 +-
 .../MaterialIcon/VehicleLimitWarning.vue      |  2 +-
 .../components/MaterialIcon/VehicleMinSoc.vue |  2 +-
 assets/js/components/MaterialIcon/Welcome.vue |  2 +-
 .../js/components/Savings/LiveCommunity.vue   |  4 +--
 assets/js/components/Savings/Savings.vue      | 10 +++---
 assets/js/components/Savings/Sponsor.vue      |  2 +-
 .../Savings/SponsorTokenExpires.vue           |  2 +-
 assets/js/components/Savings/Tile.vue         |  2 +-
 .../Sessions/AvgCostGroupedChart.vue          |  4 +--
 .../components/Sessions/CostGroupedChart.vue  |  4 +--
 .../components/Sessions/CostHistoryChart.vue  |  4 +--
 .../js/components/Sessions/DateNavigator.vue  |  2 +-
 .../Sessions/EnergyGroupedChart.vue           |  4 +--
 .../Sessions/EnergyHistoryChart.vue           |  4 +--
 .../Sessions/SessionDetailsModal.vue          |  6 ++--
 .../js/components/Sessions/SessionTable.vue   |  6 ++--
 .../components/Sessions/SolarGroupedChart.vue |  4 +--
 .../js/components/Sessions/SolarYearChart.vue |  4 +--
 assets/js/components/Sessions/chartConfig.js  |  2 +-
 assets/js/components/Site/Site.vue            |  4 +--
 .../js/components/Tariff/SmartCostLimit.vue   | 10 +++---
 assets/js/components/Tariff/TariffChart.vue   |  4 +--
 assets/js/components/Top/Header.vue           |  4 +--
 assets/js/components/Top/Navigation.vue       |  8 ++---
 assets/js/components/Top/Notifications.vue    |  2 +-
 .../components/Vehicles/LimitEnergySelect.vue |  4 +--
 .../js/components/Vehicles/LimitSocSelect.vue |  4 +--
 assets/js/components/Vehicles/Soc.vue         |  2 +-
 assets/js/components/Vehicles/Status.vue      |  6 ++--
 assets/js/components/Vehicles/Title.vue       |  4 +--
 assets/js/components/Vehicles/Vehicle.vue     |  6 ++--
 assets/js/types/evcc.ts                       |  6 ++++
 tsconfig.json                                 |  2 +-
 vite.config.js                                |  6 ++++
 118 files changed, 252 insertions(+), 241 deletions(-)

diff --git a/assets/js/components/Auth/LoginModal.vue b/assets/js/components/Auth/LoginModal.vue
index 2227b0884..da6bd9eb6 100644
--- a/assets/js/components/Auth/LoginModal.vue
+++ b/assets/js/components/Auth/LoginModal.vue
@@ -60,9 +60,9 @@
 <script lang="ts">
 import GenericModal from "../Helper/GenericModal.vue";
 import Modal from "bootstrap/js/dist/modal";
-import api from "../../api.js";
+import api from "@/api";
 import { updateAuthStatus, getAndClearNextUrl, getAndClearNextModal, isLoggedIn } from "./auth";
-import { docsPrefix } from "../../i18n.js";
+import { docsPrefix } from "@/i18n";
 import { defineComponent } from "vue";
 
 export default defineComponent({
diff --git a/assets/js/components/Auth/PasswordModal.vue b/assets/js/components/Auth/PasswordModal.vue
index 6209bd452..6a940506e 100644
--- a/assets/js/components/Auth/PasswordModal.vue
+++ b/assets/js/components/Auth/PasswordModal.vue
@@ -88,7 +88,7 @@
 <script type="ts">
 import GenericModal from "../Helper/GenericModal.vue";
 import FormRow from "../Helper/FormRow.vue";
-import api from "../../api.js";
+import api from "@/api";
 import { updateAuthStatus, isConfigured } from "./auth";
 import  { defineComponent } from "vue";
 
diff --git a/assets/js/components/Auth/auth.ts b/assets/js/components/Auth/auth.ts
index 7f97bb5d3..cbc4b8520 100644
--- a/assets/js/components/Auth/auth.ts
+++ b/assets/js/components/Auth/auth.ts
@@ -1,8 +1,8 @@
 import { reactive, watch } from "vue";
-import api from "../../api.js";
-import store from "../../store.js";
+import api from "@/api";
+import store from "@/store";
 import Modal from "bootstrap/js/dist/modal";
-import { isSystemError } from "../../utils/fatal.js";
+import { isSystemError } from "@/utils/fatal.js";
 
 const auth = reactive({
 	configured: true,
diff --git a/assets/js/components/Battery/BatterySettingsModal.vue b/assets/js/components/Battery/BatterySettingsModal.vue
index 5c3a981c6..5eb510ae6 100644
--- a/assets/js/components/Battery/BatterySettingsModal.vue
+++ b/assets/js/components/Battery/BatterySettingsModal.vue
@@ -257,12 +257,12 @@ import "@h2d2/shopicons/es/regular/home";
 import SmartCostLimit from "../Tariff/SmartCostLimit.vue";
 import CustomSelect from "../Helper/CustomSelect.vue";
 import GenericModal from "../Helper/GenericModal.vue";
-import formatter, { POWER_UNIT } from "../../mixins/formatter.js";
-import collector from "../../mixins/collector.js";
-import api from "../../api.js";
-import smartCostAvailable from "../../utils/smartCostAvailable.js";
+import formatter, { POWER_UNIT } from "@/mixins/formatter";
+import collector from "@/mixins/collector";
+import api from "@/api";
+import smartCostAvailable from "@/utils/smartCostAvailable";
 import { defineComponent, type PropType } from "vue";
-import type { Battery, SelectOption } from "../../types/evcc.js";
+import type { Battery, SelectOption } from "@/types/evcc";
 
 export default defineComponent({
 	name: "BatterySettingsModal",
diff --git a/assets/js/components/ChargingPlans/Arrival.vue b/assets/js/components/ChargingPlans/Arrival.vue
index 82cfe338e..b28a4c910 100644
--- a/assets/js/components/ChargingPlans/Arrival.vue
+++ b/assets/js/components/ChargingPlans/Arrival.vue
@@ -60,9 +60,9 @@
 </template>
 
 <script lang="ts">
-import { distanceUnit } from "../../units.js";
-import formatter from "../../mixins/formatter.js";
-import type { SelectOption } from "../../types/evcc";
+import { distanceUnit } from "@/units";
+import formatter from "@/mixins/formatter";
+import type { SelectOption } from "@/types/evcc";
 import { defineComponent } from "vue";
 
 export default defineComponent({
diff --git a/assets/js/components/ChargingPlans/ChargingPlan.vue b/assets/js/components/ChargingPlans/ChargingPlan.vue
index ec7c26f8a..d3e46a829 100644
--- a/assets/js/components/ChargingPlans/ChargingPlan.vue
+++ b/assets/js/components/ChargingPlans/ChargingPlan.vue
@@ -108,14 +108,14 @@ import LabelAndValue from "../Helper/LabelAndValue.vue";
 import PlansSettings from "./PlansSettings.vue";
 import Arrival from "./Arrival.vue";
 
-import formatter from "../../mixins/formatter.js";
-import collector from "../../mixins/collector.js";
-import api from "../../api.js";
-import { optionStep, fmtEnergy } from "../../utils/energyOptions.js";
+import formatter from "@/mixins/formatter";
+import collector from "@/mixins/collector";
+import api from "@/api";
+import { optionStep, fmtEnergy } from "@/utils/energyOptions";
 import { defineComponent, type PropType } from "vue";
-import type { CURRENCY, Timeout, Vehicle } from "../../types/evcc.js";
-import type { StaticPlan, StaticSocPlan, StaticEnergyPlan, RepeatingPlan } from "./types.js";
-import type { Forecast } from "../../types/evcc.ts";
+import type { CURRENCY, Timeout, Vehicle } from "@/types/evcc";
+import type { StaticPlan, StaticSocPlan, StaticEnergyPlan, RepeatingPlan } from "./types";
+import type { Forecast } from "@/types/evcc.ts";
 const ONE_MINUTE = 60 * 1000;
 
 export default defineComponent({
diff --git a/assets/js/components/ChargingPlans/PlanRepeatingSettings.vue b/assets/js/components/ChargingPlans/PlanRepeatingSettings.vue
index 7c1abe0a9..5c012b737 100644
--- a/assets/js/components/ChargingPlans/PlanRepeatingSettings.vue
+++ b/assets/js/components/ChargingPlans/PlanRepeatingSettings.vue
@@ -166,12 +166,12 @@
 
 <script lang="ts">
 import "@h2d2/shopicons/es/regular/trash";
-import { distanceUnit } from "../../units.js";
+import { distanceUnit } from "@/units";
 import MultiSelect from "../Helper/MultiSelect.vue";
-import formatter from "../../mixins/formatter.js";
-import deepEqual from "../../utils/deepEqual.js";
+import formatter from "@/mixins/formatter";
+import deepEqual from "@/utils/deepEqual";
 import PreconditionSelect from "./PreconditionSelect.vue";
-import type { SelectOption } from "../../types/evcc";
+import type { SelectOption } from "@/types/evcc";
 import { defineComponent, type PropType } from "vue";
 
 export default defineComponent({
diff --git a/assets/js/components/ChargingPlans/PlanStaticSettings.vue b/assets/js/components/ChargingPlans/PlanStaticSettings.vue
index 98063ae6c..2c362d257 100644
--- a/assets/js/components/ChargingPlans/PlanStaticSettings.vue
+++ b/assets/js/components/ChargingPlans/PlanStaticSettings.vue
@@ -179,10 +179,10 @@
 
 <script lang="ts">
 import "@h2d2/shopicons/es/regular/checkmark";
-import { distanceUnit } from "../../units.js";
+import { distanceUnit } from "@/units";
 
-import formatter from "../../mixins/formatter.js";
-import { energyOptions } from "../../utils/energyOptions.js";
+import formatter from "@/mixins/formatter";
+import { energyOptions } from "@/utils/energyOptions";
 import { defineComponent } from "vue";
 import PreconditionSelect from "./PreconditionSelect.vue";
 
diff --git a/assets/js/components/ChargingPlans/PlansRepeatingSettings.vue b/assets/js/components/ChargingPlans/PlansRepeatingSettings.vue
index 768b26674..c07921acc 100644
--- a/assets/js/components/ChargingPlans/PlansRepeatingSettings.vue
+++ b/assets/js/components/ChargingPlans/PlansRepeatingSettings.vue
@@ -30,10 +30,10 @@
 
 <script lang="ts">
 import PlanRepeatingSettings from "./PlanRepeatingSettings.vue";
-import deepEqual from "../../utils/deepEqual.js";
-import formatter from "../../mixins/formatter.js";
+import deepEqual from "@/utils/deepEqual";
+import formatter from "@/mixins/formatter";
 import { defineComponent, type PropType } from "vue";
-import type { RepeatingPlan } from "./types.js";
+import type { RepeatingPlan } from "./types";
 
 const DEFAULT_WEEKDAYS = [1, 2, 3, 4, 5];
 const DEFAULT_TARGET_TIME = "07:00";
diff --git a/assets/js/components/ChargingPlans/PlansSettings.vue b/assets/js/components/ChargingPlans/PlansSettings.vue
index 504f64175..7e414b22a 100644
--- a/assets/js/components/ChargingPlans/PlansSettings.vue
+++ b/assets/js/components/ChargingPlans/PlansSettings.vue
@@ -72,14 +72,14 @@ import Preview from "./Preview.vue";
 import PlanStaticSettings from "./PlanStaticSettings.vue";
 import RepeatingSettings from "./PlansRepeatingSettings.vue";
 import Warnings from "./Warnings.vue";
-import formatter from "../../mixins/formatter.js";
-import collector from "../../mixins/collector.js";
-import api from "../../api.js";
+import formatter from "@/mixins/formatter";
+import collector from "@/mixins/collector";
+import api from "@/api";
 import CustomSelect from "../Helper/CustomSelect.vue";
-import deepEqual from "../../utils/deepEqual.js";
-import convertRates from "../../utils/convertRates";
+import deepEqual from "@/utils/deepEqual";
+import convertRates from "@/utils/convertRates";
 import { defineComponent, type PropType } from "vue";
-import type { Vehicle, PartialBy, Timeout, SelectOption, CURRENCY } from "../../types/evcc";
+import type { Vehicle, PartialBy, Timeout, SelectOption, CURRENCY, Forecast } from "@/types/evcc";
 import type {
 	StaticPlan,
 	RepeatingPlan,
@@ -87,8 +87,7 @@ import type {
 	StaticSocPlan,
 	StaticEnergyPlan,
 	PlanResponse,
-} from "./types.js";
-import type { Forecast } from "../../types/evcc.ts";
+} from "./types";
 
 export default defineComponent({
 	name: "ChargingPlansSettings",
diff --git a/assets/js/components/ChargingPlans/PreconditionSelect.vue b/assets/js/components/ChargingPlans/PreconditionSelect.vue
index a57e1afe3..b132e642f 100644
--- a/assets/js/components/ChargingPlans/PreconditionSelect.vue
+++ b/assets/js/components/ChargingPlans/PreconditionSelect.vue
@@ -60,7 +60,7 @@
 <script lang="ts">
 import { defineComponent } from "vue";
 import CustomSelect from "../Helper/CustomSelect.vue";
-import formatter from "../../mixins/formatter.js";
+import formatter from "@/mixins/formatter";
 
 export default defineComponent({
 	name: "PreconditionSelect",
diff --git a/assets/js/components/ChargingPlans/Preview.stories.ts b/assets/js/components/ChargingPlans/Preview.stories.ts
index 454f752f2..40ba06e7d 100644
--- a/assets/js/components/ChargingPlans/Preview.stories.ts
+++ b/assets/js/components/ChargingPlans/Preview.stories.ts
@@ -1,4 +1,4 @@
-import { CURRENCY, type Rate } from "../../types/evcc.js";
+import { CURRENCY, type Rate } from "@/types/evcc";
 import Preview from "./Preview.vue";
 import type { StoryFn } from "@storybook/vue3";
 
diff --git a/assets/js/components/ChargingPlans/Preview.test.ts b/assets/js/components/ChargingPlans/Preview.test.ts
index e17454277..beb681b33 100644
--- a/assets/js/components/ChargingPlans/Preview.test.ts
+++ b/assets/js/components/ChargingPlans/Preview.test.ts
@@ -1,7 +1,7 @@
 import { mount, config } from "@vue/test-utils";
 import { beforeAll, describe, expect, test } from "vitest";
 import Preview from "./Preview.vue";
-import type { Slot } from "../../types/evcc.js";
+import type { Slot } from "@/types/evcc";
 
 config.global.mocks["$i18n"] = { locale: "de-DE" };
 config.global.mocks["$t"] = (a: any) => a;
diff --git a/assets/js/components/ChargingPlans/Preview.vue b/assets/js/components/ChargingPlans/Preview.vue
index ee6833008..04a9f800b 100644
--- a/assets/js/components/ChargingPlans/Preview.vue
+++ b/assets/js/components/ChargingPlans/Preview.vue
@@ -36,10 +36,10 @@
 
 <script lang="ts">
 import { defineComponent, type PropType } from "vue";
-import formatter from "../../mixins/formatter.js";
-import { CO2_TYPE } from "../../units.js";
+import formatter from "@/mixins/formatter";
+import { CO2_TYPE } from "@/units";
 import TariffChart from "../Tariff/TariffChart.vue";
-import type { CURRENCY, Rate, Slot } from "../../types/evcc.js";
+import type { CURRENCY, Rate, Slot } from "@/types/evcc";
 
 export default defineComponent({
 	name: "ChargingPlanPreview",
diff --git a/assets/js/components/ChargingPlans/Warnings.vue b/assets/js/components/ChargingPlans/Warnings.vue
index 39284f382..bc85e3a1d 100644
--- a/assets/js/components/ChargingPlans/Warnings.vue
+++ b/assets/js/components/ChargingPlans/Warnings.vue
@@ -20,9 +20,9 @@
 
 <script lang="ts">
 import { defineComponent, type PropType } from "vue";
-import formatter from "../../mixins/formatter.js";
-import type { PlanWrapper } from "./types.js";
-import type { Tariff } from "../../types/evcc.js";
+import formatter from "@/mixins/formatter";
+import type { PlanWrapper } from "./types";
+import type { Tariff } from "@/types/evcc";
 
 export default defineComponent({
 	name: "ChargingPlanWarnings",
diff --git a/assets/js/components/ChargingPlans/types.d.ts b/assets/js/components/ChargingPlans/types.d.ts
index 4400c0b82..6115a395c 100644
--- a/assets/js/components/ChargingPlans/types.d.ts
+++ b/assets/js/components/ChargingPlans/types.d.ts
@@ -1,4 +1,4 @@
-import type { Rate } from "../../types/evcc";
+import type { Rate } from "@/types/evcc";
 
 export interface RepeatingPlan {
 	weekdays: number[];
diff --git a/assets/js/components/Config/ChargerModal.vue b/assets/js/components/Config/ChargerModal.vue
index d0e20151c..128d4392c 100644
--- a/assets/js/components/Config/ChargerModal.vue
+++ b/assets/js/components/Config/ChargerModal.vue
@@ -167,7 +167,7 @@ import FormRow from "./FormRow.vue";
 import PropertyEntry from "./PropertyEntry.vue";
 import PropertyCollapsible from "./PropertyCollapsible.vue";
 import TestResult from "./TestResult.vue";
-import api from "../../api";
+import api from "@/api";
 import test from "./mixins/test";
 import Modbus from "./Modbus.vue";
 import GenericModal from "../Helper/GenericModal.vue";
diff --git a/assets/js/components/Config/ControlModal.vue b/assets/js/components/Config/ControlModal.vue
index d661137d0..5cb76327b 100644
--- a/assets/js/components/Config/ControlModal.vue
+++ b/assets/js/components/Config/ControlModal.vue
@@ -82,8 +82,8 @@
 <script>
 import GenericModal from "../Helper/GenericModal.vue";
 import FormRow from "./FormRow.vue";
-import store from "../../store";
-import api from "../../api";
+import store from "@/store";
+import api from "@/api";
 
 export default {
 	name: "ControlModal",
diff --git a/assets/js/components/Config/DeviceTags.vue b/assets/js/components/Config/DeviceTags.vue
index ea38e8d13..c34e6edc4 100644
--- a/assets/js/components/Config/DeviceTags.vue
+++ b/assets/js/components/Config/DeviceTags.vue
@@ -25,7 +25,7 @@
 	</div>
 </template>
 <script>
-import formatter, { POWER_UNIT } from "../../mixins/formatter";
+import formatter, { POWER_UNIT } from "@/mixins/formatter";
 
 const NO_TRUNCATE = ["phasePowers", "phaseVoltages", "phaseCurrents"];
 
diff --git a/assets/js/components/Config/FormRow.vue b/assets/js/components/Config/FormRow.vue
index 6d1a950cb..7e24a7550 100644
--- a/assets/js/components/Config/FormRow.vue
+++ b/assets/js/components/Config/FormRow.vue
@@ -34,7 +34,7 @@
 </template>
 
 <script>
-import { docsPrefix } from "../../i18n";
+import { docsPrefix } from "@/i18n";
 import Markdown from "./Markdown.vue";
 
 export default {
diff --git a/assets/js/components/Config/GeneralConfig.vue b/assets/js/components/Config/GeneralConfig.vue
index d69c48d0a..e7fa4edba 100644
--- a/assets/js/components/Config/GeneralConfig.vue
+++ b/assets/js/components/Config/GeneralConfig.vue
@@ -109,10 +109,10 @@
 import Modal from "bootstrap/js/dist/modal";
 import TitleModal from "./TitleModal.vue";
 import EditIcon from "../MaterialIcon/Edit.vue";
-import api from "../../api";
-import settings from "../../settings";
-import store from "../../store";
-import formatter from "../../mixins/formatter";
+import api from "@/api";
+import settings from "@/settings";
+import store from "@/store";
+import formatter from "@/mixins/formatter";
 
 export default {
 	name: "GeneralConfig",
diff --git a/assets/js/components/Config/JsonModal.vue b/assets/js/components/Config/JsonModal.vue
index 82d9af692..7224ae2ba 100644
--- a/assets/js/components/Config/JsonModal.vue
+++ b/assets/js/components/Config/JsonModal.vue
@@ -64,9 +64,9 @@
 
 <script>
 import GenericModal from "../Helper/GenericModal.vue";
-import api from "../../api";
-import { docsPrefix } from "../../i18n";
-import store from "../../store";
+import api from "@/api";
+import { docsPrefix } from "@/i18n";
+import store from "@/store";
 
 export default {
 	name: "JsonModal",
diff --git a/assets/js/components/Config/LoadpointModal.vue b/assets/js/components/Config/LoadpointModal.vue
index 50211dd75..488ec3b2c 100644
--- a/assets/js/components/Config/LoadpointModal.vue
+++ b/assets/js/components/Config/LoadpointModal.vue
@@ -552,11 +552,11 @@
 import FormRow from "./FormRow.vue";
 import PropertyField from "./PropertyField.vue";
 import SelectGroup from "../Helper/SelectGroup.vue";
-import api from "../../api";
+import api from "@/api";
 import GenericModal from "../Helper/GenericModal.vue";
-import deepClone from "../../utils/deepClone";
-import deepEqual from "../../utils/deepEqual";
-import formatter, { POWER_UNIT } from "../../mixins/formatter";
+import deepClone from "@/utils/deepClone";
+import deepEqual from "@/utils/deepEqual";
+import formatter, { POWER_UNIT } from "@/mixins/formatter";
 import EditIcon from "../MaterialIcon/Edit.vue";
 
 const nsPerMin = 60 * 1e9;
diff --git a/assets/js/components/Config/MeterModal.vue b/assets/js/components/Config/MeterModal.vue
index d7533ddaf..190d0f547 100644
--- a/assets/js/components/Config/MeterModal.vue
+++ b/assets/js/components/Config/MeterModal.vue
@@ -181,7 +181,7 @@ import FormRow from "./FormRow.vue";
 import PropertyEntry from "./PropertyEntry.vue";
 import PropertyCollapsible from "./PropertyCollapsible.vue";
 import TestResult from "./TestResult.vue";
-import api from "../../api";
+import api from "@/api";
 import test from "./mixins/test";
 import NewDeviceButton from "./NewDeviceButton.vue";
 import Modbus from "./Modbus.vue";
diff --git a/assets/js/components/Config/PropertyField.vue b/assets/js/components/Config/PropertyField.vue
index 30b9f9cbe..71514ef7f 100644
--- a/assets/js/components/Config/PropertyField.vue
+++ b/assets/js/components/Config/PropertyField.vue
@@ -93,7 +93,7 @@
 import "@h2d2/shopicons/es/regular/minus";
 import VehicleIcon from "../VehicleIcon";
 import SelectGroup from "../Helper/SelectGroup.vue";
-import formatter from "../../mixins/formatter";
+import formatter from "@/mixins/formatter";
 
 const NS_PER_SECOND = 1000000000;
 
diff --git a/assets/js/components/Config/SponsorModal.vue b/assets/js/components/Config/SponsorModal.vue
index 61c437b91..5eef01860 100644
--- a/assets/js/components/Config/SponsorModal.vue
+++ b/assets/js/components/Config/SponsorModal.vue
@@ -66,9 +66,9 @@ import JsonModal from "./JsonModal.vue";
 import FormRow from "./FormRow.vue";
 import Sponsor, { VICTRON_DEVICE } from "../Savings/Sponsor.vue";
 import SponsorTokenExpires from "../Savings/SponsorTokenExpires.vue";
-import store from "../../store";
-import { docsPrefix } from "../../i18n";
-import { cleanYaml } from "../../utils/cleanYaml";
+import store from "@/store";
+import { docsPrefix } from "@/i18n";
+import { cleanYaml } from "@/utils/cleanYaml";
 export default {
 	name: "SponsorModal",
 	components: { FormRow, JsonModal, Sponsor, SponsorTokenExpires },
diff --git a/assets/js/components/Config/VehicleModal.vue b/assets/js/components/Config/VehicleModal.vue
index e2fa90d72..503543538 100644
--- a/assets/js/components/Config/VehicleModal.vue
+++ b/assets/js/components/Config/VehicleModal.vue
@@ -248,7 +248,7 @@ import PropertyEntry from "./PropertyEntry.vue";
 import PropertyCollapsible from "./PropertyCollapsible.vue";
 import GenericModal from "../Helper/GenericModal.vue";
 import Markdown from "./Markdown.vue";
-import api from "../../api";
+import api from "@/api";
 import test from "./mixins/test";
 
 const initialValues = { type: "template", icon: "car" };
diff --git a/assets/js/components/Config/YamlEditor.vue b/assets/js/components/Config/YamlEditor.vue
index 00661a109..4a4da51d7 100644
--- a/assets/js/components/Config/YamlEditor.vue
+++ b/assets/js/components/Config/YamlEditor.vue
@@ -25,7 +25,7 @@
 
 <script>
 import { VueMonacoEditor, loader } from "@guolao/vue-monaco-editor";
-import { cleanYaml } from "../../utils/cleanYaml";
+import { cleanYaml } from "@/utils/cleanYaml.js";
 
 const $html = document.querySelector("html");
 export default {
diff --git a/assets/js/components/Config/YamlModal.vue b/assets/js/components/Config/YamlModal.vue
index b1d1970d1..e728a95c9 100644
--- a/assets/js/components/Config/YamlModal.vue
+++ b/assets/js/components/Config/YamlModal.vue
@@ -46,8 +46,8 @@
 
 <script>
 import GenericModal from "../Helper/GenericModal.vue";
-import api from "../../api";
-import { docsPrefix } from "../../i18n";
+import api from "@/api";
+import { docsPrefix } from "@/i18n";
 import YamlEditor from "./YamlEditor.vue";
 
 export default {
diff --git a/assets/js/components/Energyflow/BatteryIcon.vue b/assets/js/components/Energyflow/BatteryIcon.vue
index e03a7c826..d0fb83fae 100644
--- a/assets/js/components/Energyflow/BatteryIcon.vue
+++ b/assets/js/components/Energyflow/BatteryIcon.vue
@@ -21,7 +21,7 @@
 
 <script lang="ts">
 import { defineComponent } from "vue";
-import icon from "../../mixins/icon";
+import icon from "@/mixins/icon";
 
 export default defineComponent({
 	name: "BatteryIcon",
diff --git a/assets/js/components/Energyflow/Energyflow.stories.ts b/assets/js/components/Energyflow/Energyflow.stories.ts
index 71309fa71..93e831a50 100644
--- a/assets/js/components/Energyflow/Energyflow.stories.ts
+++ b/assets/js/components/Energyflow/Energyflow.stories.ts
@@ -1,6 +1,6 @@
 import type { Meta, StoryFn } from "@storybook/vue3";
 import Energyflow from "./Energyflow.vue";
-import { CURRENCY } from "../../types/evcc";
+import { CURRENCY } from "@/types/evcc";
 
 export default {
 	title: "Energyflow/Energyflow",
diff --git a/assets/js/components/Energyflow/Energyflow.vue b/assets/js/components/Energyflow/Energyflow.vue
index e58f3e9f3..b0142bfd1 100644
--- a/assets/js/components/Energyflow/Energyflow.vue
+++ b/assets/js/components/Energyflow/Energyflow.vue
@@ -284,13 +284,13 @@ import "@h2d2/shopicons/es/filled/square";
 import Modal from "bootstrap/js/dist/modal";
 import Visualization from "./Visualization.vue";
 import Entry from "./Entry.vue";
-import formatter, { POWER_UNIT } from "../../mixins/formatter";
+import formatter, { POWER_UNIT } from "@/mixins/formatter";
 import AnimatedNumber from "../Helper/AnimatedNumber.vue";
-import settings from "../../settings";
-import { CO2_TYPE } from "../../units";
-import collector from "../../mixins/collector";
+import settings from "@/settings";
+import { CO2_TYPE } from "@/units";
+import collector from "@/mixins/collector";
 import { defineComponent, type PropType } from "vue";
-import type { Battery, CURRENCY, Forecast, LoadpointCompact } from "../../types/evcc";
+import type { Battery, CURRENCY, Forecast, LoadpointCompact } from "@/types/evcc";
 
 export default defineComponent({
 	name: "Energyflow",
diff --git a/assets/js/components/Energyflow/Entry.vue b/assets/js/components/Energyflow/Entry.vue
index 40a960816..326ca5351 100644
--- a/assets/js/components/Energyflow/Entry.vue
+++ b/assets/js/components/Energyflow/Entry.vue
@@ -74,7 +74,7 @@ import "@h2d2/shopicons/es/regular/home";
 import "@h2d2/shopicons/es/regular/arrowdropdown";
 import Tooltip from "bootstrap/js/dist/tooltip";
 import BatteryIcon from "./BatteryIcon.vue";
-import formatter, { POWER_UNIT } from "../../mixins/formatter";
+import formatter, { POWER_UNIT } from "@/mixins/formatter";
 import AnimatedNumber from "../Helper/AnimatedNumber.vue";
 import VehicleIcon from "../VehicleIcon";
 import ForecastIcon from "../MaterialIcon/Forecast.vue";
diff --git a/assets/js/components/Energyflow/Visualization.vue b/assets/js/components/Energyflow/Visualization.vue
index 19e88bbca..9f4fb4f89 100644
--- a/assets/js/components/Energyflow/Visualization.vue
+++ b/assets/js/components/Energyflow/Visualization.vue
@@ -107,7 +107,7 @@
 </template>
 
 <script lang="ts">
-import formatter, { POWER_UNIT } from "../../mixins/formatter";
+import formatter, { POWER_UNIT } from "@/mixins/formatter";
 import BatteryIcon from "./BatteryIcon.vue";
 import LabelBar from "./LabelBar.vue";
 import AnimatedNumber from "../Helper/AnimatedNumber.vue";
@@ -116,7 +116,7 @@ import QuestionIcon from "../MaterialIcon/Question.vue";
 import "@h2d2/shopicons/es/regular/sun";
 import "@h2d2/shopicons/es/regular/home";
 import { defineComponent, type PropType } from "vue";
-import type { LoadpointCompact } from "../../types/evcc";
+import type { LoadpointCompact } from "@/types/evcc";
 
 export default defineComponent({
 	name: "Visualization",
diff --git a/assets/js/components/Footer/OfflineIndicator.vue b/assets/js/components/Footer/OfflineIndicator.vue
index 96cfc4cba..c8142e2ac 100644
--- a/assets/js/components/Footer/OfflineIndicator.vue
+++ b/assets/js/components/Footer/OfflineIndicator.vue
@@ -77,8 +77,8 @@ import { defineComponent, type PropType } from "vue";
 import "@h2d2/shopicons/es/regular/car1";
 import CloudOffline from "../MaterialIcon/CloudOffline.vue";
 import Sync from "../MaterialIcon/Sync.vue";
-import restart, { performRestart, restartComplete } from "../../restart.js";
-import type { FatalError } from "assets/js/types/evcc.js";
+import restart, { performRestart, restartComplete } from "@/restart";
+import type { FatalError } from "@/types/evcc";
 
 export default defineComponent({
 	name: "OfflineIndicator",
diff --git a/assets/js/components/Footer/Version.vue b/assets/js/components/Footer/Version.vue
index cb6d608c0..62bc4064d 100644
--- a/assets/js/components/Footer/Version.vue
+++ b/assets/js/components/Footer/Version.vue
@@ -129,7 +129,7 @@
 import Modal from "bootstrap/js/dist/modal";
 import "@h2d2/shopicons/es/regular/gift";
 import "@h2d2/shopicons/es/regular/moonstars";
-import api from "../../api.js";
+import api from "@/api";
 import Logo from "./Logo.vue";
 import { defineComponent } from "vue";
 
diff --git a/assets/js/components/Forecast/ActiveSlot.vue b/assets/js/components/Forecast/ActiveSlot.vue
index 123c30c47..918f3852a 100644
--- a/assets/js/components/Forecast/ActiveSlot.vue
+++ b/assets/js/components/Forecast/ActiveSlot.vue
@@ -10,8 +10,8 @@
 
 <script lang="ts">
 import { defineComponent, type PropType } from "vue";
-import formatter from "../../mixins/formatter";
-import { isForecastSlot, type ForecastSlot, type TimeseriesEntry } from "./types.js";
+import formatter from "@/mixins/formatter";
+import { isForecastSlot, type ForecastSlot, type TimeseriesEntry } from "./types";
 
 export default defineComponent({
 	name: "ForecastActiveSlot",
diff --git a/assets/js/components/Forecast/Chart.vue b/assets/js/components/Forecast/Chart.vue
index da2df59a2..1f4564c07 100644
--- a/assets/js/components/Forecast/Chart.vue
+++ b/assets/js/components/Forecast/Chart.vue
@@ -33,11 +33,11 @@ import {
 import ChartDataLabels, { type Context } from "chartjs-plugin-datalabels";
 import "chartjs-adapter-dayjs-4/dist/chartjs-adapter-dayjs-4.esm";
 import { registerChartComponents, commonOptions } from "../Sessions/chartConfig";
-import formatter, { POWER_UNIT } from "../../mixins/formatter.ts";
-import colors, { lighterColor } from "../../colors.ts";
-import type { CURRENCY } from "../../types/evcc.ts";
-import { ForecastType, highestSlotIndexByDay } from "../../utils/forecast.ts";
-import type { ForecastSlot, SolarDetails, TimeseriesEntry } from "./types.ts";
+import formatter, { POWER_UNIT } from "@/mixins/formatter";
+import colors, { lighterColor } from "@/colors";
+import type { CURRENCY } from "@/types/evcc";
+import { ForecastType, highestSlotIndexByDay } from "@/utils/forecast";
+import type { ForecastSlot, SolarDetails, TimeseriesEntry } from "./types";
 
 registerChartComponents([
 	BarController,
diff --git a/assets/js/components/Forecast/Details.vue b/assets/js/components/Forecast/Details.vue
index e581c95f0..003529ed9 100644
--- a/assets/js/components/Forecast/Details.vue
+++ b/assets/js/components/Forecast/Details.vue
@@ -64,11 +64,11 @@
 
 <script lang="ts">
 import { defineComponent, type PropType } from "vue";
-import formatter, { POWER_UNIT } from "../../mixins/formatter.ts";
+import formatter, { POWER_UNIT } from "@/mixins/formatter";
 import AnimatedNumber from "../Helper/AnimatedNumber.vue";
-import type { CURRENCY, Timeout } from "../../types/evcc.ts";
-import { ForecastType } from "../../utils/forecast.ts";
-import type { ForecastSlot, SolarDetails } from "./types.ts";
+import type { CURRENCY, Timeout } from "@/types/evcc";
+import { ForecastType } from "@/utils/forecast";
+import type { ForecastSlot, SolarDetails } from "./types";
 const LOCALES_WITHOUT_DAY_AFTER_TOMORROW = ["en", "tr"];
 
 export interface Energy {
diff --git a/assets/js/components/Forecast/ForecastModal.vue b/assets/js/components/Forecast/ForecastModal.vue
index 6e3ae7909..05cc2455d 100644
--- a/assets/js/components/Forecast/ForecastModal.vue
+++ b/assets/js/components/Forecast/ForecastModal.vue
@@ -59,11 +59,11 @@ import TypeSelect from "./TypeSelect.vue";
 import Details from "./Details.vue";
 import ActiveSlot from "./ActiveSlot.vue";
 
-import formatter from "../../mixins/formatter.ts";
-import settings from "../../settings";
-import type { CURRENCY, Forecast } from "../../types/evcc.ts";
-import { ForecastType, adjustedSolar } from "../../utils/forecast.ts";
-import type { ForecastSlot, TimeseriesEntry } from "./types.ts";
+import formatter from "@/mixins/formatter";
+import settings from "@/settings";
+import type { CURRENCY, Forecast } from "@/types/evcc";
+import { ForecastType, adjustedSolar } from "@/utils/forecast";
+import type { ForecastSlot, TimeseriesEntry } from "./types";
 export default defineComponent({
 	name: "ForecastModal",
 	components: {
diff --git a/assets/js/components/Forecast/TypeSelect.vue b/assets/js/components/Forecast/TypeSelect.vue
index de82fa974..769134f1c 100644
--- a/assets/js/components/Forecast/TypeSelect.vue
+++ b/assets/js/components/Forecast/TypeSelect.vue
@@ -21,7 +21,7 @@ import { defineComponent } from "vue";
 import IconSelectItem from "../Helper/IconSelectItem.vue";
 import IconSelectGroup from "../Helper/IconSelectGroup.vue";
 import DynamicPriceIcon from "../MaterialIcon/DynamicPrice.vue";
-import { ForecastType } from "../../utils/forecast.ts";
+import { ForecastType } from "@/utils/forecast";
 
 export default defineComponent({
 	name: "ForecastTypeSelect",
diff --git a/assets/js/components/GlobalSettings/GlobalSettingsModal.vue b/assets/js/components/GlobalSettings/GlobalSettingsModal.vue
index c7bdb797d..2f102d7b8 100644
--- a/assets/js/components/GlobalSettings/GlobalSettingsModal.vue
+++ b/assets/js/components/GlobalSettings/GlobalSettingsModal.vue
@@ -28,14 +28,16 @@
 	</Teleport>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent, type PropType } from "vue";
 import UserInterfaceSettings from "./UserInterfaceSettings.vue";
+import type { Sponsor } from "@/types/evcc";
 
-export default {
+export default defineComponent({
 	name: "GlobalSettingsModal",
 	components: { UserInterfaceSettings },
 	props: {
-		sponsor: { type: Object, default: () => ({}) },
+		sponsor: { type: Object as PropType<Sponsor>, default: () => ({}) },
 	},
-};
+});
 </script>
diff --git a/assets/js/components/GlobalSettings/UserInterfaceSettings.vue b/assets/js/components/GlobalSettings/UserInterfaceSettings.vue
index 4af25ac19..df6746b23 100644
--- a/assets/js/components/GlobalSettings/UserInterfaceSettings.vue
+++ b/assets/js/components/GlobalSettings/UserInterfaceSettings.vue
@@ -22,7 +22,7 @@
 				class="form-select form-select-sm w-75"
 			>
 				<option value="">{{ $t("settings.language.auto") }}</option>
-				<option v-for="option in languageOptions" :key="option" :value="option.value">
+				<option v-for="option in languageOptions" :key="option.value" :value="option.value">
 					{{ option.name }}
 				</option>
 			</select>
@@ -43,7 +43,7 @@
 			/>
 		</FormRow>
 		<FormRow id="telemetryEnabled" :label="$t('settings.telemetry.label')">
-			<TelemetrySettings :sponsorActive="!!sponsor.name" class="mt-1 mb-0" />
+			<TelemetrySettings :sponsorActive="sponsor && !!sponsor.name" class="mt-1 mb-0" />
 		</FormRow>
 		<FormRow id="hiddenFeaturesEnabled" :label="`${$t('settings.hiddenFeatures.label')} 🧪`">
 			<div class="form-check form-switch my-1">
@@ -76,26 +76,23 @@
 	</div>
 </template>
 
-<script>
+<script lang="ts">
 import TelemetrySettings from "../TelemetrySettings.vue";
 import FormRow from "../Helper/FormRow.vue";
 import SelectGroup from "../Helper/SelectGroup.vue";
-import {
-	getLocalePreference,
-	setLocalePreference,
-	LOCALES,
-	removeLocalePreference,
-} from "../../i18n.js";
-import { getThemePreference, setThemePreference, THEMES } from "../../theme.js";
-import { getUnits, setUnits, UNITS } from "../../units.js";
-import { getHiddenFeatures, setHiddenFeatures } from "../../featureflags.js";
-import { isApp } from "../../utils/native.js";
+import { getLocalePreference, setLocalePreference, LOCALES, removeLocalePreference } from "@/i18n";
+import { getThemePreference, setThemePreference, THEMES } from "@/theme";
+import { getUnits, setUnits, UNITS } from "@/units";
+import { getHiddenFeatures, setHiddenFeatures } from "@/featureflags";
+import { isApp } from "@/utils/native";
+import { defineComponent, type PropType } from "vue";
+import type { Sponsor } from "@/types/evcc";
 
-export default {
+export default defineComponent({
 	name: "UserInterfaceSettings",
 	components: { TelemetrySettings, FormRow, SelectGroup },
 	props: {
-		sponsor: Object,
+		sponsor: Object as PropType<Sponsor>,
 	},
 	data() {
 		return {
@@ -120,7 +117,8 @@ export default {
 		fullscreenAvailable: () => {
 			const isSupported = document.fullscreenEnabled;
 			const isPwa =
-				navigator.standalone || window.matchMedia("(display-mode: standalone)").matches;
+				(navigator as any).standalone ||
+				window.matchMedia("(display-mode: standalone)").matches;
 			return isSupported && !isPwa && !isApp();
 		},
 	},
@@ -135,7 +133,7 @@ export default {
 			setHiddenFeatures(value);
 		},
 		language(value) {
-			const i18n = this.$root.$i18n;
+			const i18n = this.$root?.$i18n;
 			if (value) {
 				setLocalePreference(i18n, value);
 			} else {
@@ -160,5 +158,5 @@ export default {
 			this.fullscreenActive = !!document.fullscreenElement;
 		},
 	},
-};
+});
 </script>
diff --git a/assets/js/components/HelpModal.vue b/assets/js/components/HelpModal.vue
index dd952e6b5..d649bb9b9 100644
--- a/assets/js/components/HelpModal.vue
+++ b/assets/js/components/HelpModal.vue
@@ -138,8 +138,8 @@
 
 <script>
 import Modal from "bootstrap/js/dist/modal";
-import { docsPrefix } from "../i18n.js";
-import { performRestart } from "../restart.js";
+import { docsPrefix } from "../i18n";
+import { performRestart } from "../restart";
 import { isLoggedIn, openLoginModal } from "./Auth/auth";
 
 export default {
diff --git a/assets/js/components/Helper/CustomSelect.vue b/assets/js/components/Helper/CustomSelect.vue
index bc07a9bca..3758ff750 100644
--- a/assets/js/components/Helper/CustomSelect.vue
+++ b/assets/js/components/Helper/CustomSelect.vue
@@ -15,7 +15,7 @@
 </template>
 
 <script lang="ts">
-import type { SelectOption } from "../../types/evcc";
+import type { SelectOption } from "@/types/evcc";
 import { defineComponent, type PropType } from "vue";
 
 export default defineComponent({
diff --git a/assets/js/components/Helper/MultiSelect.vue b/assets/js/components/Helper/MultiSelect.vue
index 6300725c6..e59f0da0f 100644
--- a/assets/js/components/Helper/MultiSelect.vue
+++ b/assets/js/components/Helper/MultiSelect.vue
@@ -50,9 +50,9 @@
 
 <script lang="ts">
 import Dropdown from "bootstrap/js/dist/dropdown";
-import deepEqual from "../../utils/deepEqual.js";
+import deepEqual from "@/utils/deepEqual";
 import { defineComponent, type PropType } from "vue";
-import type { SelectOption } from "assets/js/types/evcc.js";
+import type { SelectOption } from "@/types/evcc";
 
 export default defineComponent({
 	name: "MultiSelect",
diff --git a/assets/js/components/Helper/SelectGroup.story.vue b/assets/js/components/Helper/SelectGroup.story.vue
index 40bea0ae6..d752cb1ee 100644
--- a/assets/js/components/Helper/SelectGroup.story.vue
+++ b/assets/js/components/Helper/SelectGroup.story.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { reactive } from "vue";
 import SelectGroup from "./SelectGroup.vue";
-import type { SelectOption } from "assets/js/types/evcc";
+import type { SelectOption } from "@/types/evcc";
 
 const state = reactive({
 	value: "orange",
diff --git a/assets/js/components/Helper/SelectGroup.vue b/assets/js/components/Helper/SelectGroup.vue
index d410094c6..c3d796a06 100644
--- a/assets/js/components/Helper/SelectGroup.vue
+++ b/assets/js/components/Helper/SelectGroup.vue
@@ -18,7 +18,7 @@
 </template>
 
 <script lang="ts">
-import type { SelectOption } from "assets/js/types/evcc";
+import type { SelectOption } from "@/types/evcc";
 import { defineComponent, type PropType } from "vue";
 
 export default defineComponent({
diff --git a/assets/js/components/Loadpoints/Loadpoint.vue b/assets/js/components/Loadpoints/Loadpoint.vue
index 118105a08..1261fc5be 100644
--- a/assets/js/components/Loadpoints/Loadpoint.vue
+++ b/assets/js/components/Loadpoints/Loadpoint.vue
@@ -93,18 +93,18 @@
 <script>
 import "@h2d2/shopicons/es/regular/lightning";
 import "@h2d2/shopicons/es/regular/adjust";
-import api from "../../api.js";
+import api from "@/api";
 import Mode from "./Mode.vue";
 import Vehicle from "../Vehicles/Vehicle.vue";
 import Phases from "./Phases.vue";
 import LabelAndValue from "../Helper/LabelAndValue.vue";
-import formatter, { POWER_UNIT } from "../../mixins/formatter.js";
-import collector from "../../mixins/collector.js";
+import formatter, { POWER_UNIT } from "@/mixins/formatter";
+import collector from "@/mixins/collector";
 import SettingsButton from "./SettingsButton.vue";
 import SettingsModal from "./SettingsModal.vue";
-import VehicleIcon from "../VehicleIcon/index.js";
+import VehicleIcon from "../VehicleIcon";
 import SessionInfo from "./SessionInfo.vue";
-import smartCostAvailable from "../../utils/smartCostAvailable.js";
+import smartCostAvailable from "@/utils/smartCostAvailable";
 import Modal from "bootstrap/js/dist/modal";
 
 export default {
diff --git a/assets/js/components/Loadpoints/SessionInfo.vue b/assets/js/components/Loadpoints/SessionInfo.vue
index 22ecb62d9..520a95de4 100644
--- a/assets/js/components/Loadpoints/SessionInfo.vue
+++ b/assets/js/components/Loadpoints/SessionInfo.vue
@@ -29,8 +29,8 @@
 <script>
 import LabelAndValue from "../Helper/LabelAndValue.vue";
 import CustomSelect from "../Helper/CustomSelect.vue";
-import formatter from "../../mixins/formatter.ts";
-import { getSessionInfo, setSessionInfo } from "./session.ts";
+import formatter from "@/mixins/formatter";
+import { getSessionInfo, setSessionInfo } from "./session";
 
 export default {
 	name: "LoadpointSessionInfo",
diff --git a/assets/js/components/Loadpoints/SettingsBatteryBoost.vue b/assets/js/components/Loadpoints/SettingsBatteryBoost.vue
index 530522fb0..b71dff2a6 100644
--- a/assets/js/components/Loadpoints/SettingsBatteryBoost.vue
+++ b/assets/js/components/Loadpoints/SettingsBatteryBoost.vue
@@ -38,7 +38,7 @@
 </template>
 
 <script>
-import formatter from "../../mixins/formatter.js";
+import formatter from "@/mixins/formatter";
 
 export default {
 	mixins: [formatter],
diff --git a/assets/js/components/Loadpoints/SettingsModal.vue b/assets/js/components/Loadpoints/SettingsModal.vue
index 52a6e4c2f..209b32271 100644
--- a/assets/js/components/Loadpoints/SettingsModal.vue
+++ b/assets/js/components/Loadpoints/SettingsModal.vue
@@ -156,10 +156,10 @@
 </template>
 
 <script>
-import collector from "../../mixins/collector.js";
-import formatter from "../../mixins/formatter.js";
+import collector from "@/mixins/collector";
+import formatter from "@/mixins/formatter";
 import SmartCostLimit from "../Tariff/SmartCostLimit.vue";
-import smartCostAvailable from "../../utils/smartCostAvailable.js";
+import smartCostAvailable from "@/utils/smartCostAvailable";
 import SettingsBatteryBoost from "./SettingsBatteryBoost.vue";
 
 const V = 230;
diff --git a/assets/js/components/Loadpoints/session.ts b/assets/js/components/Loadpoints/session.ts
index fb78e827f..0b52db5d5 100644
--- a/assets/js/components/Loadpoints/session.ts
+++ b/assets/js/components/Loadpoints/session.ts
@@ -1,4 +1,4 @@
-import settings from "../../settings.js";
+import settings from "@/settings";
 
 export function getSessionInfo(index: number, fallback: string) {
 	return settings.sessionInfo[index - 1] || fallback;
diff --git a/assets/js/components/MaterialIcon/Add.vue b/assets/js/components/MaterialIcon/Add.vue
index 1e76afc8e..e8b83d25c 100644
--- a/assets/js/components/MaterialIcon/Add.vue
+++ b/assets/js/components/MaterialIcon/Add.vue
@@ -5,7 +5,7 @@
 </template>
 
 <script>
-import icon from "../../mixins/icon";
+import icon from "@/mixins/icon";
 
 export default {
 	name: "Add",
diff --git a/assets/js/components/MaterialIcon/BatteryBoost.vue b/assets/js/components/MaterialIcon/BatteryBoost.vue
index 1055928c6..8d8eaa0ec 100644
--- a/assets/js/components/MaterialIcon/BatteryBoost.vue
+++ b/assets/js/components/MaterialIcon/BatteryBoost.vue
@@ -14,7 +14,7 @@
 </template>
 
 <script>
-import icon from "../../mixins/icon";
+import icon from "@/mixins/icon";
 
 export default {
 	name: "BatteryBoost",
diff --git a/assets/js/components/MaterialIcon/Circuits.vue b/assets/js/components/MaterialIcon/Circuits.vue
index 2a7e78ee4..d54296512 100644
--- a/assets/js/components/MaterialIcon/Circuits.vue
+++ b/assets/js/components/MaterialIcon/Circuits.vue
@@ -8,7 +8,7 @@
 </template>
 
 <script>
-import icon from "../../mixins/icon";
+import icon from "@/mixins/icon";
 
 export default {
 	name: "Circuits",
diff --git a/assets/js/components/MaterialIcon/Climater.vue b/assets/js/components/MaterialIcon/Climater.vue
index 0b27a8fb8..36814a9d5 100644
--- a/assets/js/components/MaterialIcon/Climater.vue
+++ b/assets/js/components/MaterialIcon/Climater.vue
@@ -8,7 +8,7 @@
 </template>
 
 <script>
-import icon from "../../mixins/icon";
+import icon from "@/mixins/icon";
 
 export default {
 	name: "Climater",
diff --git a/assets/js/components/MaterialIcon/CloudOffline.vue b/assets/js/components/MaterialIcon/CloudOffline.vue
index 75dbc8a68..d24e683a8 100644
--- a/assets/js/components/MaterialIcon/CloudOffline.vue
+++ b/assets/js/components/MaterialIcon/CloudOffline.vue
@@ -8,7 +8,7 @@
 </template>
 
 <script>
-import icon from "../../mixins/icon";
+import icon from "@/mixins/icon";
 
 export default {
 	name: "CloudOffline",
diff --git a/assets/js/components/MaterialIcon/Dropdown.vue b/assets/js/components/MaterialIcon/Dropdown.vue
index ac82b03ef..0fda5c81f 100644
--- a/assets/js/components/MaterialIcon/Dropdown.vue
+++ b/assets/js/components/MaterialIcon/Dropdown.vue
@@ -8,7 +8,7 @@
 </template>
 
 <script>
-import icon from "../../mixins/icon";
+import icon from "@/mixins/icon";
 
 export default {
 	name: "Dropdown",
diff --git a/assets/js/components/MaterialIcon/DynamicPrice.vue b/assets/js/components/MaterialIcon/DynamicPrice.vue
index 7c9a5c7e0..da0056dc1 100644
--- a/assets/js/components/MaterialIcon/DynamicPrice.vue
+++ b/assets/js/components/MaterialIcon/DynamicPrice.vue
@@ -15,7 +15,7 @@
 </template>
 
 <script>
-import icon from "../../mixins/icon";
+import icon from "@/mixins/icon";
 
 export default {
 	name: "DynamicPrice",
diff --git a/assets/js/components/MaterialIcon/Edit.vue b/assets/js/components/MaterialIcon/Edit.vue
index 3858ab208..66f2186f6 100644
--- a/assets/js/components/MaterialIcon/Edit.vue
+++ b/assets/js/components/MaterialIcon/Edit.vue
@@ -8,7 +8,7 @@
 </template>
 
 <script>
-import icon from "../../mixins/icon";
+import icon from "@/mixins/icon";
 
 export default {
 	name: "Edit",
diff --git a/assets/js/components/MaterialIcon/Eebus.vue b/assets/js/components/MaterialIcon/Eebus.vue
index 49ce8f5cd..00fd9d2b0 100644
--- a/assets/js/components/MaterialIcon/Eebus.vue
+++ b/assets/js/components/MaterialIcon/Eebus.vue
@@ -12,7 +12,7 @@
 </template>
 
 <script>
-import icon from "../../mixins/icon";
+import icon from "@/mixins/icon";
 
 export default {
 	name: "Eebus",
diff --git a/assets/js/components/MaterialIcon/Forecast.vue b/assets/js/components/MaterialIcon/Forecast.vue
index 8870e8c97..186e0e254 100644
--- a/assets/js/components/MaterialIcon/Forecast.vue
+++ b/assets/js/components/MaterialIcon/Forecast.vue
@@ -8,7 +8,7 @@
 </template>
 
 <script>
-import icon from "../../mixins/icon";
+import icon from "@/mixins/icon";
 
 export default {
 	name: "Forecast",
diff --git a/assets/js/components/MaterialIcon/Hems.vue b/assets/js/components/MaterialIcon/Hems.vue
index 056e7bdb8..e1dbd7b12 100644
--- a/assets/js/components/MaterialIcon/Hems.vue
+++ b/assets/js/components/MaterialIcon/Hems.vue
@@ -8,7 +8,7 @@
 </template>
 
 <script>
-import icon from "../../mixins/icon";
+import icon from "@/mixins/icon";
 
 export default {
 	name: "Hems",
diff --git a/assets/js/components/MaterialIcon/Influx.vue b/assets/js/components/MaterialIcon/Influx.vue
index 638a658c7..44b0dd54d 100644
--- a/assets/js/components/MaterialIcon/Influx.vue
+++ b/assets/js/components/MaterialIcon/Influx.vue
@@ -8,7 +8,7 @@
 </template>
 
 <script>
-import icon from "../../mixins/icon";
+import icon from "@/mixins/icon";
 
 export default {
 	name: "Influx",
diff --git a/assets/js/components/MaterialIcon/Loadpoint.vue b/assets/js/components/MaterialIcon/Loadpoint.vue
index 5defffd0c..f323445df 100644
--- a/assets/js/components/MaterialIcon/Loadpoint.vue
+++ b/assets/js/components/MaterialIcon/Loadpoint.vue
@@ -8,7 +8,7 @@
 </template>
 
 <script>
-import icon from "../../mixins/icon";
+import icon from "@/mixins/icon";
 
 export default {
 	name: "Loadpoint",
diff --git a/assets/js/components/MaterialIcon/ModbusProxy.vue b/assets/js/components/MaterialIcon/ModbusProxy.vue
index 6da4061d9..68b6a0db6 100644
--- a/assets/js/components/MaterialIcon/ModbusProxy.vue
+++ b/assets/js/components/MaterialIcon/ModbusProxy.vue
@@ -8,7 +8,7 @@
 </template>
 
 <script>
-import icon from "../../mixins/icon";
+import icon from "@/mixins/icon";
 
 export default {
 	name: "ModbusProxy",
diff --git a/assets/js/components/MaterialIcon/Mqtt.vue b/assets/js/components/MaterialIcon/Mqtt.vue
index dde328135..5ead19b71 100644
--- a/assets/js/components/MaterialIcon/Mqtt.vue
+++ b/assets/js/components/MaterialIcon/Mqtt.vue
@@ -24,7 +24,7 @@
 </template>
 
 <script>
-import icon from "../../mixins/icon";
+import icon from "@/mixins/icon";
 
 export default {
 	name: "Mqtt",
diff --git a/assets/js/components/MaterialIcon/Notification.vue b/assets/js/components/MaterialIcon/Notification.vue
index c7826c2a8..88653afbc 100644
--- a/assets/js/components/MaterialIcon/Notification.vue
+++ b/assets/js/components/MaterialIcon/Notification.vue
@@ -8,7 +8,7 @@
 </template>
 
 <script>
-import icon from "../../mixins/icon";
+import icon from "@/mixins/icon";
 
 export default {
 	name: "Notification",
diff --git a/assets/js/components/MaterialIcon/PlanEnd.vue b/assets/js/components/MaterialIcon/PlanEnd.vue
index 004a35c21..689deb356 100644
--- a/assets/js/components/MaterialIcon/PlanEnd.vue
+++ b/assets/js/components/MaterialIcon/PlanEnd.vue
@@ -8,7 +8,7 @@
 </template>
 
 <script>
-import icon from "../../mixins/icon";
+import icon from "@/mixins/icon";
 
 export default {
 	name: "PlanEnd",
diff --git a/assets/js/components/MaterialIcon/PlanStart.vue b/assets/js/components/MaterialIcon/PlanStart.vue
index c8c101c01..4c2339542 100644
--- a/assets/js/components/MaterialIcon/PlanStart.vue
+++ b/assets/js/components/MaterialIcon/PlanStart.vue
@@ -8,7 +8,7 @@
 </template>
 
 <script>
-import icon from "../../mixins/icon";
+import icon from "@/mixins/icon";
 
 export default {
 	name: "PlanStart",
diff --git a/assets/js/components/MaterialIcon/Play.vue b/assets/js/components/MaterialIcon/Play.vue
index af5016df1..489d1734d 100644
--- a/assets/js/components/MaterialIcon/Play.vue
+++ b/assets/js/components/MaterialIcon/Play.vue
@@ -8,7 +8,7 @@
 </template>
 
 <script>
-import icon from "../../mixins/icon";
+import icon from "@/mixins/icon";
 
 export default {
 	name: "Play",
diff --git a/assets/js/components/MaterialIcon/Question.vue b/assets/js/components/MaterialIcon/Question.vue
index 8c94bd1bc..cd889a1ad 100644
--- a/assets/js/components/MaterialIcon/Question.vue
+++ b/assets/js/components/MaterialIcon/Question.vue
@@ -8,7 +8,7 @@
 </template>
 
 <script>
-import icon from "../../mixins/icon";
+import icon from "@/mixins/icon";
 
 export default {
 	name: "Question",
diff --git a/assets/js/components/MaterialIcon/Reconnect.vue b/assets/js/components/MaterialIcon/Reconnect.vue
index 302d6274e..b8cbb74a9 100644
--- a/assets/js/components/MaterialIcon/Reconnect.vue
+++ b/assets/js/components/MaterialIcon/Reconnect.vue
@@ -12,7 +12,7 @@
 </template>
 
 <script>
-import icon from "../../mixins/icon";
+import icon from "@/mixins/icon";
 
 export default {
 	name: "Reconnect",
diff --git a/assets/js/components/MaterialIcon/Record.vue b/assets/js/components/MaterialIcon/Record.vue
index 32f821788..427838a34 100644
--- a/assets/js/components/MaterialIcon/Record.vue
+++ b/assets/js/components/MaterialIcon/Record.vue
@@ -8,7 +8,7 @@
 </template>
 
 <script>
-import icon from "../../mixins/icon";
+import icon from "@/mixins/icon";
 
 export default {
 	name: "Record",
diff --git a/assets/js/components/MaterialIcon/Restart.vue b/assets/js/components/MaterialIcon/Restart.vue
index 2465a0ef1..2b0c66fd4 100644
--- a/assets/js/components/MaterialIcon/Restart.vue
+++ b/assets/js/components/MaterialIcon/Restart.vue
@@ -8,7 +8,7 @@
 </template>
 
 <script>
-import icon from "../../mixins/icon";
+import icon from "@/mixins/icon";
 
 export default {
 	name: "Restart",
diff --git a/assets/js/components/MaterialIcon/RfidWait.vue b/assets/js/components/MaterialIcon/RfidWait.vue
index 4d4a91fcb..57d8246e4 100644
--- a/assets/js/components/MaterialIcon/RfidWait.vue
+++ b/assets/js/components/MaterialIcon/RfidWait.vue
@@ -12,7 +12,7 @@
 </template>
 
 <script>
-import icon from "../../mixins/icon";
+import icon from "@/mixins/icon";
 
 export default {
 	name: "RfidWait",
diff --git a/assets/js/components/MaterialIcon/SunDown.vue b/assets/js/components/MaterialIcon/SunDown.vue
index 3736aadc3..8338700d0 100644
--- a/assets/js/components/MaterialIcon/SunDown.vue
+++ b/assets/js/components/MaterialIcon/SunDown.vue
@@ -13,7 +13,7 @@
 </template>
 
 <script>
-import icon from "../../mixins/icon";
+import icon from "@/mixins/icon";
 
 export default {
 	name: "SunDown",
diff --git a/assets/js/components/MaterialIcon/SunUp.vue b/assets/js/components/MaterialIcon/SunUp.vue
index 17f36f332..4048025c7 100644
--- a/assets/js/components/MaterialIcon/SunUp.vue
+++ b/assets/js/components/MaterialIcon/SunUp.vue
@@ -13,7 +13,7 @@
 </template>
 
 <script>
-import icon from "../../mixins/icon";
+import icon from "@/mixins/icon";
 
 export default {
 	name: "SunUp",
diff --git a/assets/js/components/MaterialIcon/Sync.vue b/assets/js/components/MaterialIcon/Sync.vue
index 7da9f2d1d..152973a3d 100644
--- a/assets/js/components/MaterialIcon/Sync.vue
+++ b/assets/js/components/MaterialIcon/Sync.vue
@@ -8,7 +8,7 @@
 </template>
 
 <script>
-import icon from "../../mixins/icon";
+import icon from "@/mixins/icon";
 
 export default {
 	name: "Sync",
diff --git a/assets/js/components/MaterialIcon/TempLimit.vue b/assets/js/components/MaterialIcon/TempLimit.vue
index 262b808cf..2e80236dd 100644
--- a/assets/js/components/MaterialIcon/TempLimit.vue
+++ b/assets/js/components/MaterialIcon/TempLimit.vue
@@ -8,7 +8,7 @@
 </template>
 
 <script>
-import icon from "../../mixins/icon";
+import icon from "@/mixins/icon";
 
 export default {
 	name: "TempLimit",
diff --git a/assets/js/components/MaterialIcon/Total.vue b/assets/js/components/MaterialIcon/Total.vue
index a3d30ef82..03ca36b9f 100644
--- a/assets/js/components/MaterialIcon/Total.vue
+++ b/assets/js/components/MaterialIcon/Total.vue
@@ -8,7 +8,7 @@
 </template>
 
 <script>
-import icon from "../../mixins/icon";
+import icon from "@/mixins/icon";
 
 export default {
 	name: "Total",
diff --git a/assets/js/components/MaterialIcon/VehicleLimit.vue b/assets/js/components/MaterialIcon/VehicleLimit.vue
index 4cfd6d610..7e6a2f2b7 100644
--- a/assets/js/components/MaterialIcon/VehicleLimit.vue
+++ b/assets/js/components/MaterialIcon/VehicleLimit.vue
@@ -8,7 +8,7 @@
 </template>
 
 <script>
-import icon from "../../mixins/icon";
+import icon from "@/mixins/icon";
 
 export default {
 	name: "VehicleLimit",
diff --git a/assets/js/components/MaterialIcon/VehicleLimitReached.vue b/assets/js/components/MaterialIcon/VehicleLimitReached.vue
index 8c52e73a8..44ff81cb9 100644
--- a/assets/js/components/MaterialIcon/VehicleLimitReached.vue
+++ b/assets/js/components/MaterialIcon/VehicleLimitReached.vue
@@ -8,7 +8,7 @@
 </template>
 
 <script>
-import icon from "../../mixins/icon";
+import icon from "@/mixins/icon";
 
 export default {
 	name: "VehicleLimitReached",
diff --git a/assets/js/components/MaterialIcon/VehicleLimitWarning.vue b/assets/js/components/MaterialIcon/VehicleLimitWarning.vue
index e9e094cc4..32888637a 100644
--- a/assets/js/components/MaterialIcon/VehicleLimitWarning.vue
+++ b/assets/js/components/MaterialIcon/VehicleLimitWarning.vue
@@ -8,7 +8,7 @@
 </template>
 
 <script>
-import icon from "../../mixins/icon";
+import icon from "@/mixins/icon";
 
 export default {
 	name: "VehicleLimitWarning",
diff --git a/assets/js/components/MaterialIcon/VehicleMinSoc.vue b/assets/js/components/MaterialIcon/VehicleMinSoc.vue
index 346f1d62b..a3948aa23 100644
--- a/assets/js/components/MaterialIcon/VehicleMinSoc.vue
+++ b/assets/js/components/MaterialIcon/VehicleMinSoc.vue
@@ -14,7 +14,7 @@
 </template>
 
 <script>
-import icon from "../../mixins/icon";
+import icon from "@/mixins/icon";
 
 export default {
 	name: "VehicleMinSoc",
diff --git a/assets/js/components/MaterialIcon/Welcome.vue b/assets/js/components/MaterialIcon/Welcome.vue
index 29bd3464a..908abec8a 100644
--- a/assets/js/components/MaterialIcon/Welcome.vue
+++ b/assets/js/components/MaterialIcon/Welcome.vue
@@ -8,7 +8,7 @@
 </template>
 
 <script>
-import icon from "../../mixins/icon";
+import icon from "@/mixins/icon";
 
 export default {
 	name: "Welcome",
diff --git a/assets/js/components/Savings/LiveCommunity.vue b/assets/js/components/Savings/LiveCommunity.vue
index be7183086..dd56f77cd 100644
--- a/assets/js/components/Savings/LiveCommunity.vue
+++ b/assets/js/components/Savings/LiveCommunity.vue
@@ -38,8 +38,8 @@
 <script>
 import Tile from "./Tile.vue";
 
-import formatter from "../../mixins/formatter.js";
-import communityApi from "./communityApi.js";
+import formatter from "@/mixins/formatter";
+import communityApi from "./communityApi";
 
 const UPDATE_INTERVAL_SECONDS = 10;
 
diff --git a/assets/js/components/Savings/Savings.vue b/assets/js/components/Savings/Savings.vue
index a3f86d633..ac1ade8ca 100644
--- a/assets/js/components/Savings/Savings.vue
+++ b/assets/js/components/Savings/Savings.vue
@@ -203,16 +203,16 @@
 
 <script>
 import Modal from "bootstrap/js/dist/modal";
-import formatter from "../../mixins/formatter.js";
+import formatter from "@/mixins/formatter";
 import Sponsor from "./Sponsor.vue";
 import Tile from "./Tile.vue";
 import LiveCommunity from "./LiveCommunity.vue";
 import TelemetrySettings from "../TelemetrySettings.vue";
 import CustomSelect from "../Helper/CustomSelect.vue";
-import co2Reference from "./co2Reference.js";
-import settings from "../../settings.js";
-import api, { allowClientError } from "../../api.js";
-import { docsPrefix } from "../../i18n.js";
+import co2Reference from "./co2Reference";
+import settings from "@/settings";
+import api, { allowClientError } from "@/api";
+import { docsPrefix } from "@/i18n";
 
 export default {
 	name: "Savings",
diff --git a/assets/js/components/Savings/Sponsor.vue b/assets/js/components/Savings/Sponsor.vue
index 5eb73a0dc..f5703256d 100644
--- a/assets/js/components/Savings/Sponsor.vue
+++ b/assets/js/components/Savings/Sponsor.vue
@@ -66,7 +66,7 @@ import confetti from "canvas-confetti";
 import "@h2d2/shopicons/es/regular/heart";
 import "@h2d2/shopicons/es/regular/stars";
 import "@h2d2/shopicons/es/regular/clock";
-import { docsPrefix } from "../../i18n.js";
+import { docsPrefix } from "@/i18n";
 
 export const TRIAL = "trial";
 export const VICTRON_DEVICE = "victron";
diff --git a/assets/js/components/Savings/SponsorTokenExpires.vue b/assets/js/components/Savings/SponsorTokenExpires.vue
index ba3215bb2..ba8cef7ea 100644
--- a/assets/js/components/Savings/SponsorTokenExpires.vue
+++ b/assets/js/components/Savings/SponsorTokenExpires.vue
@@ -18,7 +18,7 @@
 </template>
 
 <script>
-import formatter from "../../mixins/formatter.js";
+import formatter from "@/mixins/formatter";
 import { TRIAL } from "./Sponsor.vue";
 
 export default {
diff --git a/assets/js/components/Savings/Tile.vue b/assets/js/components/Savings/Tile.vue
index 03040a115..cab5f28d1 100644
--- a/assets/js/components/Savings/Tile.vue
+++ b/assets/js/components/Savings/Tile.vue
@@ -39,7 +39,7 @@ import "@h2d2/shopicons/es/regular/receivepayment";
 import "@h2d2/shopicons/es/regular/car3";
 import "@h2d2/shopicons/es/regular/eco1";
 import AnimatedNumber from "../Helper/AnimatedNumber.vue";
-import formatter from "../../mixins/formatter.js";
+import formatter from "@/mixins/formatter";
 
 export default {
 	name: "SavingsTile",
diff --git a/assets/js/components/Sessions/AvgCostGroupedChart.vue b/assets/js/components/Sessions/AvgCostGroupedChart.vue
index 3af675bf0..a825f034b 100644
--- a/assets/js/components/Sessions/AvgCostGroupedChart.vue
+++ b/assets/js/components/Sessions/AvgCostGroupedChart.vue
@@ -13,8 +13,8 @@
 import { PolarArea } from "vue-chartjs";
 import { RadialLinearScale, ArcElement, Legend, Tooltip } from "chart.js";
 import { registerChartComponents, commonOptions, tooltipLabelColor } from "./chartConfig";
-import formatter from "../../mixins/formatter";
-import colors, { dimColor } from "../../colors";
+import formatter from "@/mixins/formatter";
+import colors, { dimColor } from "@/colors";
 import { TYPES, GROUPS } from "./types";
 import LegendList from "./LegendList.vue";
 
diff --git a/assets/js/components/Sessions/CostGroupedChart.vue b/assets/js/components/Sessions/CostGroupedChart.vue
index fc010d1a2..8a7b5d55e 100644
--- a/assets/js/components/Sessions/CostGroupedChart.vue
+++ b/assets/js/components/Sessions/CostGroupedChart.vue
@@ -14,8 +14,8 @@ import { Doughnut } from "vue-chartjs";
 import { DoughnutController, ArcElement, LinearScale, Legend, Tooltip } from "chart.js";
 import LegendList from "./LegendList.vue";
 import { registerChartComponents, commonOptions, tooltipLabelColor } from "./chartConfig";
-import formatter from "../../mixins/formatter";
-import colors from "../../colors";
+import formatter from "@/mixins/formatter";
+import colors from "@/colors";
 import { TYPES, GROUPS } from "./types";
 
 registerChartComponents([DoughnutController, ArcElement, LinearScale, Legend, Tooltip]);
diff --git a/assets/js/components/Sessions/CostHistoryChart.vue b/assets/js/components/Sessions/CostHistoryChart.vue
index c9334fd53..00bdf4fb5 100644
--- a/assets/js/components/Sessions/CostHistoryChart.vue
+++ b/assets/js/components/Sessions/CostHistoryChart.vue
@@ -21,8 +21,8 @@ import {
 } from "chart.js";
 import { registerChartComponents, commonOptions, tooltipLabelColor } from "./chartConfig";
 import LegendList from "./LegendList.vue";
-import formatter from "../../mixins/formatter";
-import colors from "../../colors";
+import formatter from "@/mixins/formatter";
+import colors from "@/colors";
 import { TYPES, GROUPS, PERIODS } from "./types";
 
 registerChartComponents([
diff --git a/assets/js/components/Sessions/DateNavigator.vue b/assets/js/components/Sessions/DateNavigator.vue
index 34a180566..aba04ccc1 100644
--- a/assets/js/components/Sessions/DateNavigator.vue
+++ b/assets/js/components/Sessions/DateNavigator.vue
@@ -96,7 +96,7 @@
 <script>
 import CustomSelect from "../Helper/CustomSelect.vue";
 import DateNavigatorButton from "./DateNavigatorButton.vue";
-import formatter from "../../mixins/formatter";
+import formatter from "@/mixins/formatter";
 
 export default {
 	name: "DateNavigator",
diff --git a/assets/js/components/Sessions/EnergyGroupedChart.vue b/assets/js/components/Sessions/EnergyGroupedChart.vue
index 560e788e3..2aa784cf6 100644
--- a/assets/js/components/Sessions/EnergyGroupedChart.vue
+++ b/assets/js/components/Sessions/EnergyGroupedChart.vue
@@ -14,8 +14,8 @@ import { Doughnut } from "vue-chartjs";
 import { DoughnutController, ArcElement, LinearScale, Legend, Tooltip } from "chart.js";
 import LegendList from "./LegendList.vue";
 import { registerChartComponents, commonOptions, tooltipLabelColor } from "./chartConfig";
-import formatter, { POWER_UNIT } from "../../mixins/formatter";
-import colors from "../../colors";
+import formatter, { POWER_UNIT } from "@/mixins/formatter";
+import colors from "@/colors";
 import { GROUPS } from "./types";
 
 registerChartComponents([DoughnutController, ArcElement, LinearScale, Legend, Tooltip]);
diff --git a/assets/js/components/Sessions/EnergyHistoryChart.vue b/assets/js/components/Sessions/EnergyHistoryChart.vue
index 1f2d61a54..550a676b9 100644
--- a/assets/js/components/Sessions/EnergyHistoryChart.vue
+++ b/assets/js/components/Sessions/EnergyHistoryChart.vue
@@ -12,8 +12,8 @@ import { Bar } from "vue-chartjs";
 import { BarController, BarElement, CategoryScale, LinearScale, Legend, Tooltip } from "chart.js";
 import { registerChartComponents, commonOptions, tooltipLabelColor } from "./chartConfig";
 import LegendList from "./LegendList.vue";
-import formatter, { POWER_UNIT } from "../../mixins/formatter";
-import colors from "../../colors";
+import formatter, { POWER_UNIT } from "@/mixins/formatter";
+import colors from "@/colors";
 import { GROUPS, PERIODS } from "./types";
 
 registerChartComponents([BarController, BarElement, CategoryScale, LinearScale, Legend, Tooltip]);
diff --git a/assets/js/components/Sessions/SessionDetailsModal.vue b/assets/js/components/Sessions/SessionDetailsModal.vue
index 07613d592..9f4ec8daa 100644
--- a/assets/js/components/Sessions/SessionDetailsModal.vue
+++ b/assets/js/components/Sessions/SessionDetailsModal.vue
@@ -197,11 +197,11 @@
 <script>
 import "@h2d2/shopicons/es/regular/checkmark";
 import Modal from "bootstrap/js/dist/modal";
-import formatter from "../../mixins/formatter";
+import formatter from "@/mixins/formatter";
 import Options from "../Vehicles/Options.vue";
 import CustomSelect from "../Helper/CustomSelect.vue";
-import { distanceUnit, distanceValue } from "../../units";
-import api from "../../api";
+import { distanceUnit, distanceValue } from "@/units";
+import api from "@/api";
 
 export default {
 	name: "SessionDetailsModal",
diff --git a/assets/js/components/Sessions/SessionTable.vue b/assets/js/components/Sessions/SessionTable.vue
index 1502d5817..b5b5fdec5 100644
--- a/assets/js/components/Sessions/SessionTable.vue
+++ b/assets/js/components/Sessions/SessionTable.vue
@@ -158,9 +158,9 @@
 
 <script>
 import CustomSelect from "../Helper/CustomSelect.vue";
-import formatter, { POWER_UNIT } from "../../mixins/formatter";
-import breakpoint from "../../mixins/breakpoint";
-import settings from "../../settings";
+import formatter, { POWER_UNIT } from "@/mixins/formatter";
+import breakpoint from "@/mixins/breakpoint";
+import settings from "@/settings";
 
 const COLUMNS_PER_BREAKPOINT = {
 	xs: 1,
diff --git a/assets/js/components/Sessions/SolarGroupedChart.vue b/assets/js/components/Sessions/SolarGroupedChart.vue
index 4c374d046..5e27d442b 100644
--- a/assets/js/components/Sessions/SolarGroupedChart.vue
+++ b/assets/js/components/Sessions/SolarGroupedChart.vue
@@ -13,8 +13,8 @@
 import { PolarArea } from "vue-chartjs";
 import { RadialLinearScale, ArcElement, Legend, Tooltip } from "chart.js";
 import { registerChartComponents, commonOptions, tooltipLabelColor } from "./chartConfig";
-import formatter from "../../mixins/formatter";
-import colors, { dimColor } from "../../colors";
+import formatter from "@/mixins/formatter";
+import colors, { dimColor } from "@/colors";
 import LegendList from "./LegendList.vue";
 import { GROUPS } from "./types";
 
diff --git a/assets/js/components/Sessions/SolarYearChart.vue b/assets/js/components/Sessions/SolarYearChart.vue
index 1d60d4bc9..6c6df4588 100644
--- a/assets/js/components/Sessions/SolarYearChart.vue
+++ b/assets/js/components/Sessions/SolarYearChart.vue
@@ -13,8 +13,8 @@
 import { Radar } from "vue-chartjs";
 import { RadialLinearScale, PointElement, LineElement, Filler, Tooltip } from "chart.js";
 import { registerChartComponents, commonOptions, tooltipLabelColor } from "./chartConfig";
-import formatter from "../../mixins/formatter";
-import colors, { dimColor } from "../../colors";
+import formatter from "@/mixins/formatter";
+import colors, { dimColor } from "@/colors";
 import LegendList from "./LegendList.vue";
 
 registerChartComponents([RadialLinearScale, PointElement, LineElement, Filler, Tooltip]);
diff --git a/assets/js/components/Sessions/chartConfig.js b/assets/js/components/Sessions/chartConfig.js
index 6bde1c0dc..37e2767d2 100644
--- a/assets/js/components/Sessions/chartConfig.js
+++ b/assets/js/components/Sessions/chartConfig.js
@@ -1,5 +1,5 @@
 import { Chart, Tooltip } from "chart.js";
-import colors from "../../colors";
+import colors from "@/colors";
 // Register common components
 export function registerChartComponents(components) {
   Chart.register(...components);
diff --git a/assets/js/components/Site/Site.vue b/assets/js/components/Site/Site.vue
index a54effb58..7786df566 100644
--- a/assets/js/components/Site/Site.vue
+++ b/assets/js/components/Site/Site.vue
@@ -70,8 +70,8 @@ import Notifications from "../Top/Notifications.vue";
 import Energyflow from "../Energyflow/Energyflow.vue";
 import Loadpoints from "../Loadpoints/Loadpoints.vue";
 import Footer from "../Footer/Footer.vue";
-import formatter from "../../mixins/formatter.js";
-import collector from "../../mixins/collector.js";
+import formatter from "@/mixins/formatter";
+import collector from "@/mixins/collector";
 import WelcomeIcons from "./WelcomeIcons.vue";
 
 export default {
diff --git a/assets/js/components/Tariff/SmartCostLimit.vue b/assets/js/components/Tariff/SmartCostLimit.vue
index 02e84eb4f..45afe638c 100644
--- a/assets/js/components/Tariff/SmartCostLimit.vue
+++ b/assets/js/components/Tariff/SmartCostLimit.vue
@@ -83,13 +83,13 @@
 </template>
 
 <script lang="ts">
-import formatter from "../../mixins/formatter.js";
+import formatter from "@/mixins/formatter";
 import TariffChart from "./TariffChart.vue";
-import { CO2_TYPE } from "../../units.js";
-import api, { allowClientError } from "../../api.js";
-import convertRates from "../../utils/convertRates";
+import { CO2_TYPE } from "@/units";
+import api, { allowClientError } from "@/api";
+import convertRates from "@/utils/convertRates";
 import type { PropType } from "vue";
-import type { Tariff, CURRENCY, Rate, SelectOption, Slot } from "../../types/evcc";
+import type { Tariff, CURRENCY, Rate, SelectOption, Slot } from "@/types/evcc";
 
 export default {
 	name: "SmartCostLimit",
diff --git a/assets/js/components/Tariff/TariffChart.vue b/assets/js/components/Tariff/TariffChart.vue
index 51dd883f1..ffe735d62 100644
--- a/assets/js/components/Tariff/TariffChart.vue
+++ b/assets/js/components/Tariff/TariffChart.vue
@@ -56,8 +56,8 @@
 import type { PropType } from "vue";
 import "@h2d2/shopicons/es/regular/arrowright";
 import PlanEndIcon from "../MaterialIcon/PlanEnd.vue";
-import formatter from "../../mixins/formatter.js";
-import type { Slot } from "../../types/evcc.ts";
+import formatter from "@/mixins/formatter";
+import type { Slot } from "@/types/evcc";
 
 const BAR_WIDTH = 20;
 
diff --git a/assets/js/components/Top/Header.vue b/assets/js/components/Top/Header.vue
index ae6f4d149..552057178 100644
--- a/assets/js/components/Top/Header.vue
+++ b/assets/js/components/Top/Header.vue
@@ -25,8 +25,8 @@
 import "@h2d2/shopicons/es/regular/home";
 import "@h2d2/shopicons/es/regular/settings";
 import Navigation from "./Navigation.vue";
-import collector from "../../mixins/collector.js";
-import store from "../../store.js";
+import collector from "@/mixins/collector";
+import store from "@/store";
 
 export default {
 	name: "TopHeader",
diff --git a/assets/js/components/Top/Navigation.vue b/assets/js/components/Top/Navigation.vue
index bbcbd061d..4d6af8a56 100644
--- a/assets/js/components/Top/Navigation.vue
+++ b/assets/js/components/Top/Navigation.vue
@@ -130,11 +130,11 @@ import "@h2d2/shopicons/es/regular/gift";
 import "@h2d2/shopicons/es/regular/moonstars";
 import "@h2d2/shopicons/es/regular/menu";
 import "@h2d2/shopicons/es/regular/newtab";
-import collector from "../../mixins/collector.js";
+import collector from "@/mixins/collector";
 import { logout, isLoggedIn, openLoginModal } from "../Auth/auth";
-import baseAPI from "./baseapi.js";
-import { isApp, sendToApp } from "../../utils/native.js";
-import { isUserConfigError } from "../../utils/fatal.js";
+import baseAPI from "./baseapi";
+import { isApp, sendToApp } from "@/utils/native";
+import { isUserConfigError } from "@/utils/fatal";
 
 export default {
 	name: "TopNavigation",
diff --git a/assets/js/components/Top/Notifications.vue b/assets/js/components/Top/Notifications.vue
index cb25def6a..d5c478623 100644
--- a/assets/js/components/Top/Notifications.vue
+++ b/assets/js/components/Top/Notifications.vue
@@ -88,7 +88,7 @@
 
 <script>
 import "@h2d2/shopicons/es/regular/exclamationtriangle";
-import formatter from "../../mixins/formatter.js";
+import formatter from "@/mixins/formatter";
 
 export default {
 	name: "Notifications",
diff --git a/assets/js/components/Vehicles/LimitEnergySelect.vue b/assets/js/components/Vehicles/LimitEnergySelect.vue
index d4eb49719..b6827a3cb 100644
--- a/assets/js/components/Vehicles/LimitEnergySelect.vue
+++ b/assets/js/components/Vehicles/LimitEnergySelect.vue
@@ -36,8 +36,8 @@
 <script>
 import LabelAndValue from "../Helper/LabelAndValue.vue";
 import AnimatedNumber from "../Helper/AnimatedNumber.vue";
-import formatter from "../../mixins/formatter.js";
-import { estimatedSoc, energyOptions, optionStep, fmtEnergy } from "../../utils/energyOptions.js";
+import formatter from "@/mixins/formatter";
+import { estimatedSoc, energyOptions, optionStep, fmtEnergy } from "@/utils/energyOptions";
 
 export default {
 	name: "LimitEnergySelect",
diff --git a/assets/js/components/Vehicles/LimitSocSelect.vue b/assets/js/components/Vehicles/LimitSocSelect.vue
index 3610e6c5a..8d85b5b0b 100644
--- a/assets/js/components/Vehicles/LimitSocSelect.vue
+++ b/assets/js/components/Vehicles/LimitSocSelect.vue
@@ -22,8 +22,8 @@
 <script>
 import LabelAndValue from "../Helper/LabelAndValue.vue";
 import AnimatedNumber from "../Helper/AnimatedNumber.vue";
-import { distanceUnit } from "../../units.js";
-import formatter from "../../mixins/formatter.js";
+import { distanceUnit } from "@/units";
+import formatter from "@/mixins/formatter";
 
 export default {
 	name: "LimitSocSelect",
diff --git a/assets/js/components/Vehicles/Soc.vue b/assets/js/components/Vehicles/Soc.vue
index f1b10f0df..70ec4aa49 100644
--- a/assets/js/components/Vehicles/Soc.vue
+++ b/assets/js/components/Vehicles/Soc.vue
@@ -72,7 +72,7 @@
 <script>
 import Tooltip from "bootstrap/js/dist/tooltip";
 import "@h2d2/shopicons/es/regular/clock";
-import formatter from "../../mixins/formatter.js";
+import formatter from "@/mixins/formatter";
 
 export default {
 	name: "VehicleSoc",
diff --git a/assets/js/components/Vehicles/Status.vue b/assets/js/components/Vehicles/Status.vue
index 5a8996ef7..accb98d3e 100644
--- a/assets/js/components/Vehicles/Status.vue
+++ b/assets/js/components/Vehicles/Status.vue
@@ -183,9 +183,9 @@ import "@h2d2/shopicons/es/regular/eco1";
 import "@h2d2/shopicons/es/regular/angledoublerightsmall";
 import "@h2d2/shopicons/es/regular/clock";
 import DynamicPriceIcon from "../MaterialIcon/DynamicPrice.vue";
-import { DEFAULT_LOCALE } from "../../i18n.js";
-import formatter from "../../mixins/formatter.js";
-import { CO2_TYPE } from "../../units.js";
+import { DEFAULT_LOCALE } from "@/i18n";
+import formatter from "@/mixins/formatter";
+import { CO2_TYPE } from "@/units";
 import ClimaterIcon from "../MaterialIcon/Climater.vue";
 import PlanEndIcon from "../MaterialIcon/PlanEnd.vue";
 import PlanStartIcon from "../MaterialIcon/PlanStart.vue";
diff --git a/assets/js/components/Vehicles/Title.vue b/assets/js/components/Vehicles/Title.vue
index 1ef62a591..67af42c4a 100644
--- a/assets/js/components/Vehicles/Title.vue
+++ b/assets/js/components/Vehicles/Title.vue
@@ -55,11 +55,11 @@
 import "@h2d2/shopicons/es/regular/cablecharge";
 import Tooltip from "bootstrap/js/dist/tooltip";
 import Modal from "bootstrap/js/dist/modal";
-import VehicleIcon from "../VehicleIcon/index.js";
+import VehicleIcon from "../VehicleIcon";
 import Options from "./Options.vue";
 import CloudOffline from "../MaterialIcon/CloudOffline.vue";
 import Sync from "../MaterialIcon/Sync.vue";
-import collector from "../../mixins/collector.js";
+import collector from "@/mixins/collector";
 
 export default {
 	name: "VehicleTitle",
diff --git a/assets/js/components/Vehicles/Vehicle.vue b/assets/js/components/Vehicles/Vehicle.vue
index 9295a710d..1dcb00000 100644
--- a/assets/js/components/Vehicles/Vehicle.vue
+++ b/assets/js/components/Vehicles/Vehicle.vue
@@ -68,8 +68,8 @@
 </template>
 
 <script>
-import collector from "../../mixins/collector.js";
-import formatter, { POWER_UNIT } from "../../mixins/formatter.js";
+import collector from "@/mixins/collector";
+import formatter, { POWER_UNIT } from "@/mixins/formatter";
 import LabelAndValue from "../Helper/LabelAndValue.vue";
 import Title from "./Title.vue";
 import Soc from "./Soc.vue";
@@ -77,7 +77,7 @@ import Status from "./Status.vue";
 import ChargingPlan from "../ChargingPlans/ChargingPlan.vue";
 import LimitSocSelect from "./LimitSocSelect.vue";
 import LimitEnergySelect from "./LimitEnergySelect.vue";
-import { distanceUnit, distanceValue } from "../../units.js";
+import { distanceUnit, distanceValue } from "@/units";
 
 export default {
 	name: "Vehicle",
diff --git a/assets/js/types/evcc.ts b/assets/js/types/evcc.ts
index 816bd2cc9..88f6ed91d 100644
--- a/assets/js/types/evcc.ts
+++ b/assets/js/types/evcc.ts
@@ -34,6 +34,12 @@ export enum CURRENCY {
 	USD = "USD",
 	DKK = "DKK",
 }
+
+export interface Sponsor {
+	name: string;
+	expiresAt: Date;
+}
+
 export interface Battery {
 	power: number;
 	soc: number;
diff --git a/tsconfig.json b/tsconfig.json
index 67389490e..734a65cfd 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -13,7 +13,7 @@
     "allowJs": true,
     "baseUrl": ".",
     "paths": {
-      "@/*": ["./src/*"]
+      "@/*": ["assets/js/*"]
     },
     "plugins": [
       {
diff --git a/vite.config.js b/vite.config.js
index 7eb0d154d..41a442120 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -3,11 +3,17 @@ import vuePlugin from "@vitejs/plugin-vue";
 import { ViteToml } from "vite-plugin-toml";
 import legacy from "@vitejs/plugin-legacy";
 import { visualizer } from "rollup-plugin-visualizer";
+import path from "path";
 
 export default defineConfig({
   root: "./assets",
   publicDir: "public",
   base: "./",
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./assets/js"),
+    },
+  },
   build: {
     outDir: "../dist/",
     emptyOutDir: true,