From abf34f1fc449f7fe08078ab493b2a3f45b21747f Mon Sep 17 00:00:00 2001
From: Maschga <88616799+Maschga@users.noreply.github.com>
Date: Fri, 20 Jun 2025 17:33:52 +0200
Subject: [PATCH] chore: Typescript: Rewrite utils (#21660)

Co-authored-by: Michael Geers <michael@geers.tv>
---
 .../Battery/BatterySettingsModal.vue          |  6 +--
 .../components/ChargingPlans/ChargingPlan.vue |  2 +-
 .../ChargingPlans/PlanStaticSettings.vue      |  6 +--
 .../ChargingPlans/Preview.stories.ts          | 12 +++---
 .../js/components/ChargingPlans/Preview.vue   |  7 ++--
 .../js/components/Energyflow/Energyflow.vue   | 13 +++++--
 .../GlobalSettings/UserInterfaceSettings.vue  |  6 +--
 assets/js/components/Loadpoints/Loadpoint.vue | 13 +++++--
 .../js/components/Loadpoints/Loadpoints.vue   |  4 +-
 .../components/Loadpoints/SettingsModal.vue   |  6 +--
 assets/js/components/Site/Site.vue            |  5 ++-
 .../js/components/Tariff/SmartCostLimit.vue   | 16 +++++---
 .../components/Vehicles/LimitEnergySelect.vue | 10 ++---
 assets/js/components/Vehicles/Status.vue      |  7 ++--
 assets/js/components/Vehicles/Vehicle.vue     |  6 +--
 assets/js/types/evcc.ts                       | 19 +++++++++
 assets/js/units.js                            | 39 -------------------
 assets/js/units.ts                            | 32 +++++++++++++++
 .../js/utils/{deepEqual.js => deepEqual.ts}   |  2 +-
 .../{energyOptions.js => energyOptions.ts}    | 24 +++++++++---
 assets/js/utils/{fatal.js => fatal.ts}        |  8 ++--
 assets/js/utils/{native.js => native.ts}      |  4 +-
 assets/js/utils/smartCostAvailable.js         |  5 ---
 assets/js/utils/smartCostAvailable.ts         |  5 +++
 package-lock.json                             |  6 +--
 package.json                                  |  2 +-
 26 files changed, 154 insertions(+), 111 deletions(-)
 delete mode 100644 assets/js/units.js
 create mode 100644 assets/js/units.ts
 rename assets/js/utils/{deepEqual.js => deepEqual.ts} (50%)
 rename assets/js/utils/{energyOptions.js => energyOptions.ts} (62%)
 rename assets/js/utils/{fatal.js => fatal.ts} (59%)
 rename assets/js/utils/{native.js => native.ts} (74%)
 delete mode 100644 assets/js/utils/smartCostAvailable.js
 create mode 100644 assets/js/utils/smartCostAvailable.ts

diff --git a/assets/js/components/Battery/BatterySettingsModal.vue b/assets/js/components/Battery/BatterySettingsModal.vue
index 5eb510ae6..76bac76e3 100644
--- a/assets/js/components/Battery/BatterySettingsModal.vue
+++ b/assets/js/components/Battery/BatterySettingsModal.vue
@@ -258,11 +258,11 @@ 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";
-import collector from "@/mixins/collector";
+import collector from "@/mixins/collector.js";
 import api from "@/api";
 import smartCostAvailable from "@/utils/smartCostAvailable";
 import { defineComponent, type PropType } from "vue";
-import type { Battery, SelectOption } from "@/types/evcc";
+import type { Battery, SelectOption, SMART_COST_TYPE } from "@/types/evcc";
 
 export default defineComponent({
 	name: "BatterySettingsModal",
@@ -276,7 +276,7 @@ export default defineComponent({
 		batteryDischargeControl: Boolean,
 		battery: { type: Array as PropType<Battery[]>, default: () => [] },
 		batteryGridChargeLimit: { type: Number, default: null },
-		smartCostType: String,
+		smartCostType: String as PropType<SMART_COST_TYPE>,
 		tariffGrid: Number,
 		currency: String,
 	},
diff --git a/assets/js/components/ChargingPlans/ChargingPlan.vue b/assets/js/components/ChargingPlans/ChargingPlan.vue
index b66c70dec..6d3e6ff91 100644
--- a/assets/js/components/ChargingPlans/ChargingPlan.vue
+++ b/assets/js/components/ChargingPlans/ChargingPlan.vue
@@ -111,7 +111,7 @@ import Arrival from "./Arrival.vue";
 import formatter from "@/mixins/formatter";
 import collector from "@/mixins/collector";
 import api from "@/api";
-import { optionStep, fmtEnergy } from "@/utils/energyOptions";
+import { optionStep, fmtEnergy } from "@/utils/energyOptions.ts";
 import { defineComponent, type PropType } from "vue";
 import type { CURRENCY, Timeout, Vehicle } from "@/types/evcc";
 import type { StaticPlan, StaticSocPlan, StaticEnergyPlan, RepeatingPlan } from "./types";
diff --git a/assets/js/components/ChargingPlans/PlanStaticSettings.vue b/assets/js/components/ChargingPlans/PlanStaticSettings.vue
index 23d7f2448..0598bfbfb 100644
--- a/assets/js/components/ChargingPlans/PlanStaticSettings.vue
+++ b/assets/js/components/ChargingPlans/PlanStaticSettings.vue
@@ -182,7 +182,7 @@ import "@h2d2/shopicons/es/regular/checkmark";
 import { distanceUnit } from "@/units";
 
 import formatter from "@/mixins/formatter";
-import { energyOptions } from "@/utils/energyOptions";
+import { energyOptions } from "@/utils/energyOptions.ts";
 import { defineComponent } from "vue";
 import PreconditionSelect from "./PreconditionSelect.vue";
 
@@ -233,10 +233,10 @@ export default defineComponent({
 			const options = energyOptions(
 				0,
 				this.capacity || 100,
-				this.socPerKwh,
 				this.fmtWh,
 				this.fmtPercentage,
-				"-"
+				"-",
+				this.socPerKwh
 			);
 			// remove the first entry (0)
 			return options.slice(1);
diff --git a/assets/js/components/ChargingPlans/Preview.stories.ts b/assets/js/components/ChargingPlans/Preview.stories.ts
index 07c8cddab..3bc47a2c5 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";
+import { CURRENCY, SMART_COST_TYPE, type Rate } from "@/types/evcc";
 import Preview from "./Preview.vue";
 import type { StoryFn } from "@storybook/vue3";
 
@@ -32,7 +32,7 @@ const co2Data = {
   ].map((value, i) => createRate(value, i)),
   duration: 8695,
   plan: [createRate(213, 4), createRate(336, 11), createRate(336, 12)],
-  smartCostType: "co2",
+  smartCostType: SMART_COST_TYPE.CO2,
   targetTime: createDate(14),
 };
 
@@ -40,7 +40,7 @@ const fixedData = {
   rates: [createRate(0.442, 0, 50)],
   duration: 8695,
   plan: [createRate(0.442, 12, 3)],
-  smartCostType: "price",
+  smartCostType: SMART_COST_TYPE.PRICE_DYNAMIC,
   currency: CURRENCY.EUR,
   targetTime: createDate(14),
 };
@@ -55,7 +55,7 @@ const zonedData = {
   ],
   duration: 8695,
   plan: [createRate(2.39, 13, 3)],
-  smartCostType: "price",
+  smartCostType: SMART_COST_TYPE.PRICE_FORECAST,
   currency: CURRENCY.DKK,
   targetTime: createDate(17),
 };
@@ -64,7 +64,7 @@ const unknownData = {
   rates: co2Data.rates.slice(0, 16),
   duration: 8695,
   plan: [createRate(213, 4), createRate(336, 11), createRate(336, 12)],
-  smartCostType: "co2",
+  smartCostType: SMART_COST_TYPE.CO2,
   targetTime: createDate(14),
 };
 
@@ -74,7 +74,7 @@ const dynamicData = {
   ),
   duration: 8695,
   plan: [createRate(0.23, 2, 5)],
-  smartCostType: "price",
+  smartCostType: SMART_COST_TYPE.PRICE_DYNAMIC,
   currency: CURRENCY.EUR,
   targetTime: createDate(13),
 };
diff --git a/assets/js/components/ChargingPlans/Preview.vue b/assets/js/components/ChargingPlans/Preview.vue
index e954211e5..8dcb4c470 100644
--- a/assets/js/components/ChargingPlans/Preview.vue
+++ b/assets/js/components/ChargingPlans/Preview.vue
@@ -37,9 +37,8 @@
 <script lang="ts">
 import { defineComponent, type PropType } from "vue";
 import formatter from "@/mixins/formatter";
-import { CO2_TYPE } from "@/units";
 import TariffChart from "../Tariff/TariffChart.vue";
-import type { CURRENCY, Rate, Slot } from "@/types/evcc";
+import { SMART_COST_TYPE, type CURRENCY, type Rate, type Slot } from "@/types/evcc";
 
 export default defineComponent({
 	name: "ChargingPlanPreview",
@@ -50,7 +49,7 @@ export default defineComponent({
 		power: Number,
 		rates: Array as PropType<Rate[]>,
 		plan: Array as PropType<Rate[]>,
-		smartCostType: String,
+		smartCostType: String as PropType<SMART_COST_TYPE>,
 		targetTime: [Date, null],
 		currency: String as PropType<CURRENCY>,
 	},
@@ -81,7 +80,7 @@ export default defineComponent({
 			return null;
 		},
 		isCo2(): boolean {
-			return this.smartCostType === CO2_TYPE;
+			return this.smartCostType === SMART_COST_TYPE.CO2;
 		},
 		hasTariff(): boolean {
 			return (this.rates?.length || 0) > 1;
diff --git a/assets/js/components/Energyflow/Energyflow.vue b/assets/js/components/Energyflow/Energyflow.vue
index 29422e63c..3e1cdcf4f 100644
--- a/assets/js/components/Energyflow/Energyflow.vue
+++ b/assets/js/components/Energyflow/Energyflow.vue
@@ -287,10 +287,15 @@ import Entry from "./Entry.vue";
 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 collector from "@/mixins/collector.js";
 import { defineComponent, type PropType } from "vue";
-import type { Battery, CURRENCY, Forecast, LoadpointCompact } from "@/types/evcc";
+import {
+	SMART_COST_TYPE,
+	type Battery,
+	type CURRENCY,
+	type Forecast,
+	type LoadpointCompact,
+} from "@/types/evcc";
 
 export default defineComponent({
 	name: "Energyflow",
@@ -419,7 +424,7 @@ export default defineComponent({
 			return (temp: number) => this.fmtTemperature(temp);
 		},
 		co2Available() {
-			return this.smartCostType === CO2_TYPE;
+			return this.smartCostType === SMART_COST_TYPE.CO2;
 		},
 		pvPossible() {
 			return this.pvConfigured || this.gridConfigured;
diff --git a/assets/js/components/GlobalSettings/UserInterfaceSettings.vue b/assets/js/components/GlobalSettings/UserInterfaceSettings.vue
index 5e1c67bbb..a87dd7d33 100644
--- a/assets/js/components/GlobalSettings/UserInterfaceSettings.vue
+++ b/assets/js/components/GlobalSettings/UserInterfaceSettings.vue
@@ -102,11 +102,11 @@ import {
 	removeLocalePreference,
 } from "@/i18n.ts";
 import { getThemePreference, setThemePreference } from "@/theme.ts";
-import { getUnits, setUnits, UNITS, is12hFormat, set12hFormat } from "@/units";
+import { getUnits, setUnits, is12hFormat, set12hFormat } from "@/units";
 import { getHiddenFeatures, setHiddenFeatures } from "@/featureflags.ts";
 import { isApp } from "@/utils/native";
 import { defineComponent, type PropType } from "vue";
-import { THEME, type Sponsor } from "@/types/evcc";
+import { LENGTH_UNIT, THEME, type Sponsor } from "@/types/evcc";
 
 const TIME_12H = "12";
 const TIME_24H = "24";
@@ -126,7 +126,7 @@ export default defineComponent({
 			hiddenFeatures: getHiddenFeatures(),
 			fullscreenActive: false,
 			THEMES: Object.values(THEME),
-			UNITS,
+			UNITS: Object.values(LENGTH_UNIT),
 			TIME_FORMATS: [TIME_24H, TIME_12H],
 		};
 	},
diff --git a/assets/js/components/Loadpoints/Loadpoint.vue b/assets/js/components/Loadpoints/Loadpoint.vue
index 14360c279..b35bc7cab 100644
--- a/assets/js/components/Loadpoints/Loadpoint.vue
+++ b/assets/js/components/Loadpoints/Loadpoint.vue
@@ -100,7 +100,7 @@ import VehicleComponent from "../Vehicles/Vehicle.vue";
 import Phases from "./Phases.vue";
 import LabelAndValue from "../Helper/LabelAndValue.vue";
 import formatter, { POWER_UNIT } from "@/mixins/formatter";
-import collector from "@/mixins/collector";
+import collector from "@/mixins/collector.js";
 import SettingsButton from "./SettingsButton.vue";
 import SettingsModal from "./SettingsModal.vue";
 import VehicleIcon from "../VehicleIcon";
@@ -108,7 +108,14 @@ import SessionInfo from "./SessionInfo.vue";
 import smartCostAvailable from "@/utils/smartCostAvailable";
 import Modal from "bootstrap/js/dist/modal";
 import { defineComponent, type PropType } from "vue";
-import type { CHARGE_MODE, PHASES, Timeout, Vehicle, Forecast } from "@/types/evcc";
+import type {
+	CHARGE_MODE,
+	PHASES,
+	Timeout,
+	Vehicle,
+	Forecast,
+	SMART_COST_TYPE,
+} from "@/types/evcc";
 
 export default defineComponent({
 	name: "Loadpoint",
@@ -199,7 +206,7 @@ export default defineComponent({
 		pvRemaining: { type: Number, default: 0 },
 		pvAction: String,
 		smartCostLimit: { type: Number, default: null },
-		smartCostType: String,
+		smartCostType: String as PropType<SMART_COST_TYPE>,
 		smartCostActive: Boolean,
 		smartCostNextStart: String,
 		tariffGrid: Number,
diff --git a/assets/js/components/Loadpoints/Loadpoints.vue b/assets/js/components/Loadpoints/Loadpoints.vue
index d4742f919..ab3d75456 100644
--- a/assets/js/components/Loadpoints/Loadpoints.vue
+++ b/assets/js/components/Loadpoints/Loadpoints.vue
@@ -61,7 +61,7 @@ import "@h2d2/shopicons/es/filled/lightning";
 
 import Loadpoint from "./Loadpoint.vue";
 import { defineComponent, type PropType } from "vue";
-import type { LoadpointCompact, Timeout, Vehicle } from "@/types/evcc";
+import type { LoadpointCompact, SMART_COST_TYPE, Timeout, Vehicle } from "@/types/evcc";
 
 export default defineComponent({
 	name: "Loadpoints",
@@ -69,7 +69,7 @@ export default defineComponent({
 	props: {
 		loadpoints: { type: Array as PropType<LoadpointCompact[]>, default: () => [] },
 		vehicles: { type: Array as PropType<Vehicle[]> },
-		smartCostType: String,
+		smartCostType: String as PropType<SMART_COST_TYPE>,
 		tariffGrid: Number,
 		tariffCo2: Number,
 		currency: String,
diff --git a/assets/js/components/Loadpoints/SettingsModal.vue b/assets/js/components/Loadpoints/SettingsModal.vue
index ab560ef51..a6b783024 100644
--- a/assets/js/components/Loadpoints/SettingsModal.vue
+++ b/assets/js/components/Loadpoints/SettingsModal.vue
@@ -157,13 +157,13 @@
 </template>
 
 <script lang="ts">
-import collector from "@/mixins/collector";
+import collector from "@/mixins/collector.ts";
 import formatter from "@/mixins/formatter";
 import SmartCostLimit from "../Tariff/SmartCostLimit.vue";
 import smartCostAvailable from "@/utils/smartCostAvailable";
 import SettingsBatteryBoost from "./SettingsBatteryBoost.vue";
 import { defineComponent, type PropType } from "vue";
-import { CURRENCY, PHASES } from "@/types/evcc";
+import { PHASES, CURRENCY, SMART_COST_TYPE } from "@/types/evcc";
 
 const V = 230;
 
@@ -198,7 +198,7 @@ export default defineComponent({
 		minCurrent: { type: Number, default: 0 },
 		title: String,
 		smartCostLimit: { type: Number as PropType<number | null>, default: null },
-		smartCostType: String,
+		smartCostType: String as PropType<SMART_COST_TYPE>,
 		tariffGrid: Number,
 		currency: String as PropType<CURRENCY>,
 		multipleLoadpoints: Boolean,
diff --git a/assets/js/components/Site/Site.vue b/assets/js/components/Site/Site.vue
index 9ba0251fa..e7d2dd686 100644
--- a/assets/js/components/Site/Site.vue
+++ b/assets/js/components/Site/Site.vue
@@ -74,7 +74,7 @@ import Energyflow from "../Energyflow/Energyflow.vue";
 import Loadpoints from "../Loadpoints/Loadpoints.vue";
 import Footer from "../Footer/Footer.vue";
 import formatter from "@/mixins/formatter";
-import collector from "@/mixins/collector";
+import collector from "@/mixins/collector.ts";
 import WelcomeIcons from "./WelcomeIcons.vue";
 import { defineComponent, type PropType } from "vue";
 import type {
@@ -84,6 +84,7 @@ import type {
 	Forecast,
 	LoadpointCompact,
 	Notification,
+	SMART_COST_TYPE,
 	Sponsor,
 } from "@/types/evcc";
 import type { Grid } from "./types";
@@ -144,7 +145,7 @@ export default defineComponent({
 		uploadMessage: String,
 		uploadProgress: Number,
 		sponsor: { type: Object as PropType<Sponsor>, default: () => ({}) },
-		smartCostType: String,
+		smartCostType: String as PropType<SMART_COST_TYPE>,
 		fatal: Object,
 		forecast: Object as PropType<Forecast>,
 	},
diff --git a/assets/js/components/Tariff/SmartCostLimit.vue b/assets/js/components/Tariff/SmartCostLimit.vue
index 47036420a..8f86d386e 100644
--- a/assets/js/components/Tariff/SmartCostLimit.vue
+++ b/assets/js/components/Tariff/SmartCostLimit.vue
@@ -85,11 +85,17 @@
 <script lang="ts">
 import formatter from "@/mixins/formatter";
 import TariffChart from "./TariffChart.vue";
-import { CO2_TYPE } from "@/units";
-import api, { allowClientError } from "@/api";
+import api, { allowClientError } from "@/api.ts";
 import convertRates from "@/utils/convertRates";
 import { defineComponent, type PropType } from "vue";
-import type { Tariff, CURRENCY, Rate, SelectOption, Slot } from "@/types/evcc";
+import {
+	type Tariff,
+	type CURRENCY,
+	type Rate,
+	type SelectOption,
+	type Slot,
+	SMART_COST_TYPE,
+} from "@/types/evcc";
 
 export default defineComponent({
 	name: "SmartCostLimit",
@@ -100,7 +106,7 @@ export default defineComponent({
 			type: [Number, null] as PropType<number | null>,
 			required: true,
 		},
-		smartCostType: String,
+		smartCostType: String as PropType<SMART_COST_TYPE>,
 		tariffGrid: Number,
 		currency: String as PropType<CURRENCY>,
 		loadpointId: Number,
@@ -118,7 +124,7 @@ export default defineComponent({
 	},
 	computed: {
 		isCo2(): boolean {
-			return this.smartCostType === CO2_TYPE;
+			return this.smartCostType === SMART_COST_TYPE.CO2;
 		},
 		costOptions(): SelectOption<number>[] {
 			const { max } = this.costRange(this.totalSlots);
diff --git a/assets/js/components/Vehicles/LimitEnergySelect.vue b/assets/js/components/Vehicles/LimitEnergySelect.vue
index 86c88ec45..44c734d10 100644
--- a/assets/js/components/Vehicles/LimitEnergySelect.vue
+++ b/assets/js/components/Vehicles/LimitEnergySelect.vue
@@ -37,7 +37,7 @@
 import LabelAndValue from "../Helper/LabelAndValue.vue";
 import AnimatedNumber from "../Helper/AnimatedNumber.vue";
 import formatter from "@/mixins/formatter";
-import { estimatedSoc, energyOptions, optionStep, fmtEnergy } from "@/utils/energyOptions";
+import { estimatedSoc, energyOptions, optionStep, fmtEnergy } from "@/utils/energyOptions.ts";
 import { defineComponent } from "vue";
 
 export default defineComponent({
@@ -45,9 +45,9 @@ export default defineComponent({
 	components: { LabelAndValue, AnimatedNumber },
 	mixins: [formatter],
 	props: {
-		limitEnergy: Number,
+		limitEnergy: { type: Number, default: 0 },
 		socPerKwh: Number,
-		chargedEnergy: Number,
+		chargedEnergy: { type: Number, required: true },
 		capacity: Number,
 	},
 	emits: ["limit-energy-updated"],
@@ -56,10 +56,10 @@ export default defineComponent({
 			return energyOptions(
 				this.chargedEnergy,
 				this.capacity || 100,
-				this.socPerKwh,
 				this.fmtWh,
 				this.fmtPercentage,
-				this.$t("main.targetEnergy.noLimit")
+				this.$t("main.targetEnergy.noLimit"),
+				this.socPerKwh
 			);
 		},
 		step() {
diff --git a/assets/js/components/Vehicles/Status.vue b/assets/js/components/Vehicles/Status.vue
index d8350110c..51a991250 100644
--- a/assets/js/components/Vehicles/Status.vue
+++ b/assets/js/components/Vehicles/Status.vue
@@ -183,9 +183,8 @@ 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";
+import { DEFAULT_LOCALE } from "@/i18n.ts";
 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";
@@ -202,7 +201,7 @@ import VehicleMinSocIcon from "../MaterialIcon/VehicleMinSoc.vue";
 import WelcomeIcon from "../MaterialIcon/Welcome.vue";
 import BatteryBoostIcon from "../MaterialIcon/BatteryBoost.vue";
 import { defineComponent, type PropType } from "vue";
-import type { CURRENCY, Timeout } from "@/types/evcc";
+import { SMART_COST_TYPE, type CURRENCY, type Timeout } from "@/types/evcc";
 const REASON_AUTH = "waitingforauthorization";
 const REASON_DISCONNECT = "disconnectrequired";
 
@@ -455,7 +454,7 @@ export default defineComponent({
 			return this.$t(`${prefix}EnergySet`);
 		},
 		smartCostPrice() {
-			return this.smartCostType !== CO2_TYPE;
+			return this.smartCostType !== SMART_COST_TYPE.CO2;
 		},
 		smartCostNowVisible() {
 			if (this.smartCostPrice) {
diff --git a/assets/js/components/Vehicles/Vehicle.vue b/assets/js/components/Vehicles/Vehicle.vue
index f4edf3857..251841209 100644
--- a/assets/js/components/Vehicles/Vehicle.vue
+++ b/assets/js/components/Vehicles/Vehicle.vue
@@ -68,7 +68,7 @@
 </template>
 
 <script lang="ts">
-import collector from "@/mixins/collector";
+import collector from "@/mixins/collector.ts";
 import formatter, { POWER_UNIT } from "@/mixins/formatter";
 import LabelAndValue from "../Helper/LabelAndValue.vue";
 import Title from "./Title.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";
+import { distanceUnit, distanceValue } from "@/units.ts";
 import { defineComponent, type PropType } from "vue";
 import { CHARGE_MODE, type Forecast, type Vehicle } from "@/types/evcc";
 
@@ -136,7 +136,7 @@ export default defineComponent({
 		vehicle: Object as PropType<Vehicle>,
 		vehicleDetectionActive: Boolean,
 		vehicleName: String,
-		vehicleRange: Number,
+		vehicleRange: { type: Number, default: 0 },
 		vehicles: Array,
 		vehicleSoc: { type: Number, default: 0 },
 		vehicleLimitSoc: Number,
diff --git a/assets/js/types/evcc.ts b/assets/js/types/evcc.ts
index 166c09356..ded90e70c 100644
--- a/assets/js/types/evcc.ts
+++ b/assets/js/types/evcc.ts
@@ -1,6 +1,11 @@
 import type { StaticPlan, RepeatingPlan } from "../components/ChargingPlans/types";
 import type { ForecastSlot, SolarDetails } from "../components/Forecast/types";
 
+// react-native-webview
+interface WebView {
+  postMessage: (message: string) => void;
+}
+
 declare global {
   interface Window {
     app: any;
@@ -10,6 +15,9 @@ declare global {
       customCss: string;
     };
   }
+  interface Window {
+    ReactNativeWebView?: WebView;
+  }
 }
 
 export interface Auth {
@@ -34,6 +42,17 @@ export interface State {
   vehicles: Vehicle[];
 }
 
+export enum SMART_COST_TYPE {
+  CO2 = "co2",
+  PRICE_DYNAMIC = "pricedynamic",
+  PRICE_FORECAST = "priceforecast",
+}
+
+export enum LENGTH_UNIT {
+  KM = "km",
+  MILES = "mi",
+}
+
 export interface LoadpointCompact {
   icon: string;
   title: string;
diff --git a/assets/js/units.js b/assets/js/units.js
deleted file mode 100644
index b763ca1fb..000000000
--- a/assets/js/units.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import settings from "./settings";
-
-const KM = "km";
-const MILES = "mi";
-export const UNITS = [KM, MILES];
-
-export const CO2_TYPE = "co2";
-export const PRICE_DYNAMIC_TYPE = "pricedynamic";
-export const PRICE_FORECAST_TYPE = "priceforecast";
-
-const MILES_FACTOR = 0.6213711922;
-
-function isMiles() {
-  return settings.unit === MILES;
-}
-
-export function distanceValue(value) {
-  return isMiles() ? value * MILES_FACTOR : value;
-}
-
-export function distanceUnit() {
-  return isMiles() ? "mi" : "km";
-}
-
-export function getUnits() {
-  return isMiles() ? MILES : KM;
-}
-
-export function setUnits(value) {
-  settings.unit = value;
-}
-
-export function is12hFormat() {
-  return settings.is12hFormat;
-}
-
-export function set12hFormat(value) {
-  settings.is12hFormat = value;
-}
diff --git a/assets/js/units.ts b/assets/js/units.ts
new file mode 100644
index 000000000..cf50379be
--- /dev/null
+++ b/assets/js/units.ts
@@ -0,0 +1,32 @@
+import settings from "./settings";
+import { LENGTH_UNIT } from "./types/evcc";
+
+const MILES_FACTOR = 0.6213711922;
+
+function isMiles() {
+  return settings.unit === LENGTH_UNIT.MILES;
+}
+
+export function distanceValue(value: number) {
+  return isMiles() ? value * MILES_FACTOR : value;
+}
+
+export function distanceUnit() {
+  return isMiles() ? "mi" : "km";
+}
+
+export function getUnits() {
+  return isMiles() ? LENGTH_UNIT.MILES : LENGTH_UNIT.KM;
+}
+
+export function setUnits(value: LENGTH_UNIT) {
+  settings.unit = value;
+}
+
+export function is12hFormat() {
+  return settings.is12hFormat;
+}
+
+export function set12hFormat(value: boolean) {
+  settings.is12hFormat = value;
+}
diff --git a/assets/js/utils/deepEqual.js b/assets/js/utils/deepEqual.ts
similarity index 50%
rename from assets/js/utils/deepEqual.js
rename to assets/js/utils/deepEqual.ts
index 62623d763..440132509 100644
--- a/assets/js/utils/deepEqual.js
+++ b/assets/js/utils/deepEqual.ts
@@ -1,3 +1,3 @@
-export default function (obj1, obj2) {
+export default function (obj1: any, obj2: any): boolean {
   return JSON.stringify(obj1) === JSON.stringify(obj2);
 }
diff --git a/assets/js/utils/energyOptions.js b/assets/js/utils/energyOptions.ts
similarity index 62%
rename from assets/js/utils/energyOptions.js
rename to assets/js/utils/energyOptions.ts
index 5da299080..264fcb412 100644
--- a/assets/js/utils/energyOptions.js
+++ b/assets/js/utils/energyOptions.ts
@@ -1,6 +1,6 @@
-import { POWER_UNIT } from "../mixins/formatter";
+import formatter, { POWER_UNIT } from "../mixins/formatter";
 
-export function optionStep(maxEnergy) {
+export function optionStep(maxEnergy: number) {
   if (maxEnergy < 0.1) return 0.005;
   if (maxEnergy < 1) return 0.05;
   if (maxEnergy < 2) return 0.1;
@@ -11,7 +11,12 @@ export function optionStep(maxEnergy) {
   return 5;
 }
 
-export function fmtEnergy(energy, step, fmtWh, zeroText) {
+export function fmtEnergy(
+  energy: number = 0,
+  step: number,
+  fmtWh: InstanceType<typeof formatter>["fmtWh"],
+  zeroText: any
+) {
   if (energy === 0) {
     return zeroText;
   }
@@ -20,12 +25,19 @@ export function fmtEnergy(energy, step, fmtWh, zeroText) {
   return fmtWh(energy * 1e3, inKWh ? POWER_UNIT.KW : POWER_UNIT.W, true, digits);
 }
 
-export function estimatedSoc(energy, socPerKwh) {
+export function estimatedSoc(energy: number, socPerKwh?: number) {
   if (!socPerKwh) return null;
   return Math.round(energy * socPerKwh);
 }
 
-export function energyOptions(fromEnergy, maxEnergy, socPerKwh, fmtWh, fmtPercentage, zeroText) {
+export function energyOptions(
+  fromEnergy: number,
+  maxEnergy: number,
+  fmtWh: InstanceType<typeof formatter>["fmtWh"],
+  fmtPercentage: InstanceType<typeof formatter>["fmtPercentage"],
+  zeroText: string,
+  socPerKwh?: number
+) {
   const step = optionStep(maxEnergy);
   const result = [];
   for (let energy = 0; energy <= maxEnergy; energy += step) {
@@ -36,7 +48,7 @@ export function energyOptions(fromEnergy, maxEnergy, socPerKwh, fmtWh, fmtPercen
       text += ` (+${fmtPercentage(soc)})`;
     }
     // prevent rounding errors
-    const energyNormal = energy.toFixed(3) * 1;
+    const energyNormal = parseFloat(energy.toFixed(3));
     result.push({ energy: energyNormal, text, disabled });
   }
   return result;
diff --git a/assets/js/utils/fatal.js b/assets/js/utils/fatal.ts
similarity index 59%
rename from assets/js/utils/fatal.js
rename to assets/js/utils/fatal.ts
index 78682d746..b78134a39 100644
--- a/assets/js/utils/fatal.js
+++ b/assets/js/utils/fatal.ts
@@ -1,10 +1,12 @@
+import type { FatalError } from "@/types/evcc";
+
 const FATALS = ["configfile", "database"];
 
-function isError(fatal) {
+function isError(fatal?: FatalError) {
   return !!fatal?.error;
 }
 
-export function isUserConfigError(fatal) {
+export function isUserConfigError(fatal?: FatalError) {
   if (!isError(fatal)) {
     return false;
   }
@@ -16,6 +18,6 @@ export function isUserConfigError(fatal) {
   return true;
 }
 
-export function isSystemError(fatal) {
+export function isSystemError(fatal?: FatalError) {
   return isError(fatal) && !isUserConfigError(fatal);
 }
diff --git a/assets/js/utils/native.js b/assets/js/utils/native.ts
similarity index 74%
rename from assets/js/utils/native.js
rename to assets/js/utils/native.ts
index fb5368992..852f9d6bb 100644
--- a/assets/js/utils/native.js
+++ b/assets/js/utils/native.ts
@@ -5,10 +5,10 @@ export function isApp() {
 export function appDetection() {
   if (isApp()) {
     const $html = document.querySelector("html");
-    $html.classList.add("app");
+    $html?.classList.add("app");
   }
 }
 
-export function sendToApp(data) {
+export function sendToApp(data: { type: string }) {
   window.ReactNativeWebView?.postMessage(JSON.stringify(data));
 }
diff --git a/assets/js/utils/smartCostAvailable.js b/assets/js/utils/smartCostAvailable.js
deleted file mode 100644
index a3d02435e..000000000
--- a/assets/js/utils/smartCostAvailable.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import { CO2_TYPE, PRICE_DYNAMIC_TYPE, PRICE_FORECAST_TYPE } from "../units";
-
-export default function (smartCostType) {
-  return [CO2_TYPE, PRICE_DYNAMIC_TYPE, PRICE_FORECAST_TYPE].includes(smartCostType);
-}
diff --git a/assets/js/utils/smartCostAvailable.ts b/assets/js/utils/smartCostAvailable.ts
new file mode 100644
index 000000000..6e71504fa
--- /dev/null
+++ b/assets/js/utils/smartCostAvailable.ts
@@ -0,0 +1,5 @@
+import { SMART_COST_TYPE } from "@/types/evcc";
+
+export default function (smartCostType?: SMART_COST_TYPE) {
+  return smartCostType && Object.values(SMART_COST_TYPE).includes(smartCostType);
+}
diff --git a/package-lock.json b/package-lock.json
index 4538986ba..8e02a417c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -455,9 +455,9 @@
       }
     },
     "node_modules/@babel/parser": {
-      "version": "7.27.3",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.27.3.tgz",
-      "integrity": "sha512-xyYxRj6+tLNDTWi0KCBcZ9V7yg3/lwL9DWh9Uwh/RIVlIfFidggcgxKX3GCXwCiswwcGRawBKbEg2LG/Y8eJhw==",
+      "version": "7.27.5",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.27.5.tgz",
+      "integrity": "sha512-OsQd175SxWkGlzbny8J3K8TnnDD0N3lrIUtB92xwyRpzaenGZhxDvxN/JgU00U3CDZNj9tPuDJ5H0WS4Nt3vKg==",
       "license": "MIT",
       "dependencies": {
         "@babel/types": "^7.27.3"
diff --git a/package.json b/package.json
index b699d83ca..b2027bcf8 100644
--- a/package.json
+++ b/package.json
@@ -91,8 +91,8 @@
     "@storybook/vue3": "^8.6.4",
     "@storybook/vue3-vite": "^8.6.4",
     "@types/body-parser": "^1.19.6",
-    "@types/wait-on": "^5.3.4",
     "@types/smoothscroll-polyfill": "^0.3.4",
+    "@types/wait-on": "^5.3.4",
     "cross-env": "^7.0.3",
     "eslint-plugin-storybook": "^0.12.0",
     "prettier-plugin-sort-json": "^4.1.1",