🚗 Leasing Tracker Card

A custom Lovelace card for the Leasing Tracker integration.

🌐 Language / Sprache: 🇬🇧 English · 🇩🇪 Deutsch

🇬🇧 English

📸 Screenshots

1st version on my test system

On my live system

✨ Features

🔍 Smart sensor detection - Automatically finds all sensors of a Leasing Tracker vehicle
🚗 Multiple vehicles - One card per vehicle
🎨 Color coding - Green/Yellow/Red status
📱 Responsive - Works everywhere
⚙️ Graphical editor - Configure everything with clicks, no YAML required
🌐 Automatic translation - Texts follow the Home Assistant system language (German / English)

⚠️ Important

This card requires the Leasing Tracker Integration!

Install the integration first, then this card.

🔍 How does the sensor detection work?

One entity - all data!

You only provide one entity - the status sensor:

entity: sensor.my_leasing_status

The card then automatically finds all other sensors of the same vehicle.

How? The card determines the device of the status sensor and reads all associated sensors directly from the device registry. This is language- and rename-proof - it doesn't matter whether the sensors are named in German, English or Dutch, or whether you renamed them.

Note: Older card versions (< 1.2.0) searched for the sensors by their names. With the new Leasing Tracker integration this no longer works reliably - therefore the device registry is used from v1.2.0 onwards.

Debug: What was found?

Open the browser console (F12) and look for:

Leasing Tracker Card - Gefundene Sensoren: {...}

There you can see which sensors the card has found.

🚗 Multiple leasing contracts

Each contract = its own card

Example: You have 2 cars

Car 1: BMW Leasing

Integration config: Name = "BMW Leasing" → Creates sensors with prefix: bmw_leasing_

type: custom:leasing-tracker-card
entity: sensor.bmw_leasing_status
title: BMW 3 Series

Car 2: Audi Leasing

Integration config: Name = "Audi Leasing" → Creates sensors with prefix: audi_leasing_

type: custom:leasing-tracker-card
entity: sensor.audi_leasing_status
title: Audi A4

Dashboard with both

type: vertical-stack
cards:
  - type: custom:leasing-tracker-card
    entity: sensor.bmw_leasing_status
    title: BMW 3 Series

  - type: custom:leasing-tracker-card
    entity: sensor.audi_leasing_status
    title: Audi A4

Or side by side

type: horizontal-stack
cards:
  - type: custom:leasing-tracker-card
    entity: sensor.bmw_leasing_status
    title: BMW 3 Series

  - type: custom:leasing-tracker-card
    entity: sensor.audi_leasing_status
    title: Audi A4

📦 Installation

Via HACS (recommended)

HACS → Frontend → ⋮ → Custom repositories
URL: https://github.com/foxxxhater/leasing-tracker-card
Category: Dashboard
Install
Clear browser cache (Ctrl + F5)

Manual

Download leasing-tracker-card.js
Copy the file to /config/www/leasing-tracker-card/ - create the path if necessary
Register the resource:
- Settings → Dashboards → ⋮ → Resources
- URL: /local/leasing-tracker-card/leasing-tracker-card.js
- Type: JavaScript Module
Restart Home Assistant
Clear browser cache (Ctrl + Shift + R)

⚙️ Configuration

Via YAML

Minimal:

type: custom:leasing-tracker-card
entity: sensor.my_leasing_status

With title:

type: custom:leasing-tracker-card
entity: sensor.my_leasing_status
title: My BMW 3 Series

Only important sensors:

type: custom:leasing-tracker-card
entity: sensor.my_leasing_status
title: My Car
show_km_remaining_month: true
show_km_difference: true
show_progress: true
show_km_remaining_year: false
show_km_driven: false
show_average_day: false

🎛️ Options

Option	Default	Description
`entity`	required	Status sensor
`title`	`Leasing Tracker`	Title
`show_title`	`true`	Show/hide title
`show_status`	`true`	Show/hide status badge
`show_km_remaining_month`	`true`	Remaining (month)
`show_km_remaining_year`	`true`	Remaining (year)
`show_km_remaining_total`	`true`	Remaining (total)
`show_km_driven`	`true`	Distance driven
`show_km_difference`	`true`	Difference to plan
`show_average_day`	`true`	Ø per day
`show_average_month`	`true`	Ø per month
`show_remaining_days`	`true`	Remaining days
`show_end_date`	`true`	Lease end date
`show_estimated_lease_end`	`true`	Estimated odometer at lease end
`show_excess_km`	`true`	Estimated excess distance
`show_excess_cost`	`true`	Estimated excess cost
`show_progress`	`true`	Progress bar
`columns`	`2`	Number of columns (desktop)
`columns_mobile`	`1`	Number of columns (mobile, < 600px)
`date_format`	(HA setting)	Override date format: `DMY`, `MDY` or `YMD`. If omitted, the Home Assistant locale setting is used
`metric_background`	-	Background color of the individual tiles
`metric_background_hover`	-	Background color on mouse hover

Tip: From v1.2.0 onwards all options can also be set conveniently in the graphical editor - including selecting the status sensor via dropdown.

🎨 Color coding

Status

🟢 On Plan - Green
🟡 Over Plan - Yellow
🔴 Significantly Over Plan - Red

Remaining distance

🟢 > 500 km - Green
🟡 0-500 km - Yellow
🔴 < 0 km - Red

Difference

🟢 < 0 - Under plan
🟡 0-1000 - Slightly over plan
🔴 > 1000 - Significantly over plan

💡 Examples

Dashboard for a company car fleet

type: grid
columns: 3
cards:
  - type: custom:leasing-tracker-card
    entity: sensor.car_1_leasing_status
    title: Car 1

  - type: custom:leasing-tracker-card
    entity: sensor.car_2_leasing_status
    title: Car 2

  - type: custom:leasing-tracker-card
    entity: sensor.car_3_leasing_status
    title: Car 3

Compact overview

type: custom:leasing-tracker-card
entity: sensor.my_leasing_status
show_km_remaining_month: true
show_km_difference: true
show_progress: true
# Hide everything else
show_km_remaining_year: false
show_km_remaining_total: false
show_km_driven: false
show_average_day: false
show_average_month: false
show_remaining_days: false

📊 Documentation

📝 Changelog

🤝 Compatibility

Home Assistant: 2023.x+
Leasing Tracker Integration: v1.1.3+ (new sensors require v1.4.0+)

Tested with:

Core: 2026.1.2 and 2026.1.3
Supervisor: 2026.01.1
OS: 16.x and 17.0
Frontend: 20260107.2

Support

GitHub Repository Documentation Issues

📄 License

MIT License

🇩🇪 Deutsch

📸 Screenshots

1. Version auf meinem Test System

Auf meinem Live System

✨ Features

🔍 Intelligente Sensor-Suche - Findet automatisch alle Sensoren eines Leasing-Tracker-Fahrzeugs
🚗 Mehrere Fahrzeuge - Eine Card pro Fahrzeug
🎨 Farbcodierung - Grün/Gelb/Rot Status
📱 Responsive - Funktioniert überall
⚙️ Grafischer Editor - Alles per Klick konfigurierbar, kein YAML nötig
🌐 Automatische Übersetzung - Texte richten sich nach der Systemsprache von Home Assistant (Deutsch / Englisch)

⚠️ Wichtig

Diese Card benötigt die Leasing Tracker Integration!

Installiere zuerst die Integration, dann diese Card.

🔍 Wie funktioniert die Sensor-Suche?

Eine Entity - alle Daten!

Es wird nur eine Entity angegeben - der Status-Sensor:

entity: sensor.mein_leasing_status

Die Card findet dann automatisch alle anderen Sensoren des gleichen Fahrzeugs.

Wie? Die Card ermittelt das Gerät (Device) des Status-Sensors und liest alle dazugehörigen Sensoren direkt aus der Geräte-Registry aus. Das ist sprach- und umbenennungssicher - egal ob die Sensoren auf Deutsch, Englisch oder Niederländisch benannt sind oder ob du sie umbenannt hast.

Hinweis: Ältere Karten-Versionen (< 1.2.0) haben die Sensoren über deren Namen gesucht. Mit der neuen Leasing-Tracker-Integration funktioniert das nicht mehr zuverlässig - daher wird ab v1.2.0 die Geräte-Registry verwendet.

Debug: Was wurde gefunden?

Öffnen Sie die Browser-Console (F12) und suchen Sie nach:

Leasing Tracker Card - Gefundene Sensoren: {...}

Dort sehen Sie welche Sensoren die Card gefunden hat.

🚗 Mehrere Leasing-Verträge

Jeder Vertrag = Eigene Card

Beispiel: Sie haben 2 Autos

Auto 1: BMW Leasing

Integration-Config: Name = "BMW Leasing" → Erstellt Sensoren mit Präfix: bmw_leasing_

type: custom:leasing-tracker-card
entity: sensor.bmw_leasing_status
title: BMW 3er

Auto 2: Audi Leasing

Integration-Config: Name = "Audi Leasing" → Erstellt Sensoren mit Präfix: audi_leasing_

type: custom:leasing-tracker-card
entity: sensor.audi_leasing_status
title: Audi A4

Dashboard mit beiden

type: vertical-stack
cards:
  - type: custom:leasing-tracker-card
    entity: sensor.bmw_leasing_status
    title: BMW 3er

  - type: custom:leasing-tracker-card
    entity: sensor.audi_leasing_status
    title: Audi A4

Oder nebeneinander

type: horizontal-stack
cards:
  - type: custom:leasing-tracker-card
    entity: sensor.bmw_leasing_status
    title: BMW 3er

  - type: custom:leasing-tracker-card
    entity: sensor.audi_leasing_status
    title: Audi A4

📦 Installation

Via HACS (empfohlen)

HACS → Frontend → ⋮ → Benutzerdefinierte Repositories
URL: https://github.com/foxxxhater/leasing-tracker-card
Kategorie: Dashboard
Installieren
Browser-Cache leeren (Strg + F5)

Manuell

Laden Sie die leasing-tracker-card.js herunter
Kopieren Sie die Datei nach /config/www/leasing-tracker-card/ - Den Pfad gegebenenfalls anlegen
Ressource registrieren:
- Einstellungen → Dashboards → ⋮ → Ressourcen
- URL: /local/leasing-tracker-card/leasing-tracker-card.js
- Typ: JavaScript-Modul
Home Assistant neu starten
Browser-Cache leeren (Strg + Shift + R)

⚙️ Konfiguration

Via YAML

Minimal:

type: custom:leasing-tracker-card
entity: sensor.mein_leasing_status

Mit Titel:

type: custom:leasing-tracker-card
entity: sensor.mein_leasing_status
title: Mein BMW 3er

Nur wichtige Sensoren:

type: custom:leasing-tracker-card
entity: sensor.mein_leasing_status
title: Mein Auto
show_km_remaining_month: true
show_km_difference: true
show_progress: true
show_km_remaining_year: false
show_km_driven: false
show_average_day: false

🎛️ Optionen

Option	Default	Beschreibung
`entity`	erforderlich	Status-Sensor
`title`	`Leasing Tracker`	Titel
`show_title`	`true`	Titel anzeigen/ausblenden
`show_status`	`true`	Status-Badge anzeigen/ausblenden
`show_km_remaining_month`	`true`	Verbleibend (Monat)
`show_km_remaining_year`	`true`	Verbleibend (Jahr)
`show_km_remaining_total`	`true`	Verbleibend (Gesamt)
`show_km_driven`	`true`	Gefahrene Strecke
`show_km_difference`	`true`	Differenz zum Plan
`show_average_day`	`true`	Ø pro Tag
`show_average_month`	`true`	Ø pro Monat
`show_remaining_days`	`true`	Verbleibende Tage
`show_end_date`	`true`	Leasing-Enddatum
`show_estimated_lease_end`	`true`	Geschätzter Stand am Leasingende
`show_excess_km`	`true`	Geschätzte Mehr-Strecke
`show_excess_cost`	`true`	Geschätzte Mehrkosten
`show_progress`	`true`	Fortschrittsbalken
`columns`	`2`	Anzahl der Spalten (Desktop)
`columns_mobile`	`1`	Anzahl der Spalten (Mobil, < 600px)
`date_format`	(HA-Einstellung)	Datumsformat überschreiben: `DMY`, `MDY` oder `YMD`. Ohne Angabe wird die Home-Assistant-Einstellung verwendet
`metric_background`	-	Hintergrundfarbe der einzelnen Elemente
`metric_background_hover`	-	Hintergrundfarbe beim Drüberfahren mit der Maus

Tipp: Ab v1.2.0 lassen sich alle Optionen auch bequem im grafischen Editor einstellen - inklusive Auswahl des Status-Sensors per Dropdown.

🎨 Farbcodierung

Status

🟢 Im Plan - Grün
🟡 Über Plan - Gelb
🔴 Deutlich über Plan - Rot

Verbleibende Strecke

🟢 > 500 km - Grün
🟡 0-500 km - Gelb
🔴 < 0 km - Rot

Differenz

🟢 < 0 - Unter Plan
🟡 0-1000 - Leicht über Plan
🔴 > 1000 - Deutlich über Plan

💡 Beispiele

Dashboard für Firmenwagen Flotte

type: grid
columns: 3
cards:
  - type: custom:leasing-tracker-card
    entity: sensor.wagen_1_leasing_status
    title: Wagen 1

  - type: custom:leasing-tracker-card
    entity: sensor.wagen_2_leasing_status
    title: Wagen 2

  - type: custom:leasing-tracker-card
    entity: sensor.wagen_3_leasing_status
    title: Wagen 3

Kompakte Übersicht

type: custom:leasing-tracker-card
entity: sensor.mein_leasing_status
show_km_remaining_month: true
show_km_difference: true
show_progress: true
# Alles andere ausblenden
show_km_remaining_year: false
show_km_remaining_total: false
show_km_driven: false
show_average_day: false
show_average_month: false
show_remaining_days: false

📊 Dokumentation

📝 Changelog

🤝 Kompatibilität

Home Assistant: 2023.x+
Leasing Tracker Integration: v1.1.3+ (neue Sensoren benötigen v1.4.0+)

Getestet mit:

Core: 2026.1.2 und 2026.1.3
Supervisor: 2026.01.1
OS: 16.x und 17.0
Frontend: 20260107.2

Support

GitHub Repository Dokumentation Issues

📄 Lizenz

MIT License

Happy Leasing Tracking! 🚗💨

P.S. Mit freundlicher Unterstützung von Claude

Name		Name	Last commit message	Last commit date
.github		.github
.gitignore		.gitignore
CHANGELOG.md		CHANGELOG.md
LICENSE		LICENSE
README.md		README.md
SCREENSHOT-2.png		SCREENSHOT-2.png
SCREENSHOT.png		SCREENSHOT.png
hacs.json		hacs.json
leasing-tracker-card.js		leasing-tracker-card.js
leasing_tracker_banner.svg		leasing_tracker_banner.svg
leasing_tracker_logo.svg		leasing_tracker_logo.svg
renovate.json		renovate.json

Latest commit

History

Folders and files

Repository files navigation

🚗 Leasing Tracker Card

🇬🇧 English

📸 Screenshots

✨ Features

⚠️ Important

🔍 How does the sensor detection work?

One entity - all data!

Debug: What was found?

🚗 Multiple leasing contracts

Each contract = its own card

Car 1: BMW Leasing

Car 2: Audi Leasing

Dashboard with both

Or side by side

📦 Installation

Via HACS (recommended)

Manual

⚙️ Configuration

Via YAML

🎛️ Options

🎨 Color coding

Status

Remaining distance

Difference

💡 Examples

Dashboard for a company car fleet

Compact overview

📊 Documentation

🤝 Compatibility

Tested with:

Support

📄 License

🇩🇪 Deutsch

📸 Screenshots

✨ Features

⚠️ Wichtig

🔍 Wie funktioniert die Sensor-Suche?

Eine Entity - alle Daten!

Debug: Was wurde gefunden?

🚗 Mehrere Leasing-Verträge

Jeder Vertrag = Eigene Card

Auto 1: BMW Leasing

Auto 2: Audi Leasing

Dashboard mit beiden

Oder nebeneinander

📦 Installation

Via HACS (empfohlen)

Manuell

⚙️ Konfiguration

Via YAML

🎛️ Optionen

🎨 Farbcodierung

Status

Verbleibende Strecke

Differenz

💡 Beispiele

Dashboard für Firmenwagen Flotte

Kompakte Übersicht

📊 Dokumentation

🤝 Kompatibilität

Getestet mit:

Support

📄 Lizenz

About

Topics

Resources

Stars

Watchers

Forks

Releases

Contributors

Languages