Cars: log what charging costs, and drag the provider readings

Three things, all on a car's page.

A Charging cost tab, which is the Fuel cost tab written for an electric
car: charges in kWh, consumption in kWh/100km beside km per kWh, cost per
km and price per kWh, and the same summary panel over the whole history.
It keeps the reference-point method too, and has to — a session records
the energy that went in, not what was left in the battery, so a given
number of kWh only maps to a distance between two charges that ended at
the same state. A charge to the car's usual full point plays the part of
the full tank; partial charges still count towards the cost and roll into
the next full one; and a charge taken without logging it leaves its
window uncomputed rather than reporting an implausibly good figure.
Sessions live in their own collection, the figures are derived on read
like the fuel ones, and logging a charge advances the odometer exactly as
a refill does. The tab switches off from the gear like every other, so a
petrol car need never see it.

The headline readings on the connected-service tab now drag into any
order, saved on drop. Stored on the car as metricOrder, like the
Information rows, rather than per device the way the collapsed cards are:
an arrangement is something everyone the car is shared with should see,
where a folded card is one browser's reading habit. Only what the
provider reported can be arranged, so a reading that turns up later joins
the end rather than displacing the arrangement.

Fuel is now Fuel cost, tab and heading, which is what the tab has always
been about and what pairs it with Charging cost.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

Web App/web/src/api.js

@@ -168,6 +168,16 @@ export const api = {
     request(`/fuel-entries/${id}`, { method: "PATCH", body: JSON.stringify(body) }),
   deleteFuel: (id) => request(`/fuel-entries/${id}`, { method: "DELETE" }),
 
+  // Charging — the EV counterpart of fuel, on the same terms: the kWh/100km
+  // figures and the charging-stats rollup are derived server-side from the full
+  // history, so nothing here is stored.
+  listCarCharging: (carId) => request(`/cars/${carId}/charging-sessions`),
+  getCarChargingStats: (carId) => request(`/cars/${carId}/charging-stats`),
+  createCharging: (body) => request("/charging-sessions", { method: "POST", body: JSON.stringify(body) }),
+  updateCharging: (id, body) =>
+    request(`/charging-sessions/${id}`, { method: "PATCH", body: JSON.stringify(body) }),
+  deleteCharging: (id) => request(`/charging-sessions/${id}`, { method: "DELETE" }),
+
   // Maintenance log — workshop visits and repairs (not the service schedule).
   listCarMaintenance: (carId) => request(`/cars/${carId}/maintenance`),
   createMaintenance: (body) => request("/maintenance", { method: "POST", body: JSON.stringify(body) }),
@@ -190,6 +200,7 @@ export const api = {
     technical: attachment("/technical-checks"),
     maintenance: attachment("/maintenance"),
     fuel: attachment("/fuel-entries"),
+    charging: attachment("/charging-sessions"),
     parts: attachment("/parts"),
   },
 

Web App/web/src/components/ChargingFormModal.vue

@@ -0,0 +1,147 @@
+<script setup>
+// One charging session. The EV counterpart of FuelFormModal and deliberately
+// the same form: energy in place of litres, and a charge to the car's usual full
+// point in place of the full tank, which is what makes the session count towards
+// the kWh/100km figures.
+import { ref, computed } from "vue";
+import { api } from "../api";
+import { applyAttachment } from "../lib/attachment.js";
+import { t, tSplit } from "../i18n";
+import AttachmentField from "./AttachmentField.vue";
+import Modal from "./Modal.vue";
+
+const props = defineProps({
+  carId: { type: String, required: true },
+  entry: { type: Object, default: null },
+});
+const emit = defineEmits(["saved", "close"]);
+
+const isEdit = !!props.entry;
+const saving = ref(false);
+const error = ref("");
+
+const form = ref({
+  date: props.entry ? toDateInput(props.entry.date) : new Date().toISOString().slice(0, 10),
+  km: props.entry?.km ?? "",
+  kwh: props.entry?.kwh ?? "",
+  cost: props.entry?.cost ?? "",
+  // A charge to the usual full point is the one that makes the session count
+  // towards efficiency, so it is the default — as the full tank is for fuel.
+  fullCharge: props.entry ? props.entry.fullCharge : true,
+  missedSession: props.entry ? props.entry.missedSession : false,
+  location: props.entry?.location ?? "",
+  notes: props.entry?.notes ?? "",
+});
+
+const file = ref(null);
+const removeFile = ref(false);
+
+function toDateInput(value) {
+  const d = new Date(value);
+  return isNaN(d) ? "" : d.toISOString().slice(0, 10);
+}
+
+const pricePerKwh = computed(() => {
+  const k = Number(form.value.kwh);
+  const c = Number(form.value.cost);
+  if (!k || !c) return null;
+  return (c / k).toFixed(3);
+});
+
+async function submit() {
+  saving.value = true;
+  error.value = "";
+  try {
+    const saved = await (isEdit
+      ? api.updateCharging(props.entry.id, payload())
+      : api.createCharging(payload()));
+    emit("saved", await applyAttachment(api.files.charging, saved, {
+      file: file.value,
+      remove: removeFile.value,
+    }));
+  } catch (e) {
+    error.value = e.message;
+  } finally {
+    saving.value = false;
+  }
+}
+
+function payload() {
+  return {
+    car: props.carId,
+    date: new Date(form.value.date).toISOString(),
+    km: form.value.km ? Number(form.value.km) : 0,
+    kwh: form.value.kwh ? Number(form.value.kwh) : 0,
+    cost: form.value.cost ? Number(form.value.cost) : 0,
+    fullCharge: form.value.fullCharge,
+    missedSession: form.value.missedSession,
+    location: form.value.location.trim(),
+    notes: form.value.notes.trim(),
+  };
+}
+</script>
+
+<template>
+  <Modal :title="isEdit ? t('forms.charging.editTitle') : t('forms.charging.addTitle')" @close="emit('close')">
+    <p v-if="error" class="mb-3 rounded-control bg-danger-soft px-3 py-2 text-sm font-medium text-danger">{{ error }}</p>
+    <form class="space-y-3" @submit.prevent="submit">
+      <div class="grid grid-cols-2 gap-2">
+        <div>
+          <label class="dh-label">{{ t("forms.charging.date") }}</label>
+          <input v-model="form.date" type="date" required class="dh-input data" />
+        </div>
+        <div>
+          <label class="dh-label">{{ t("forms.charging.odometer") }}</label>
+          <input v-model="form.km" type="number" min="1" required placeholder="16138" class="dh-input data" />
+        </div>
+      </div>
+
+      <div class="grid grid-cols-2 gap-2">
+        <div>
+          <label class="dh-label">{{ t("forms.charging.kwh") }}</label>
+          <input v-model="form.kwh" type="number" step="0.01" min="0.01" required placeholder="42.5" class="dh-input data" />
+        </div>
+        <div>
+          <label class="dh-label">{{ t("forms.charging.cost") }}</label>
+          <input v-model="form.cost" type="number" step="0.01" min="0" placeholder="85.00" class="dh-input data" />
+        </div>
+      </div>
+
+      <p v-if="pricePerKwh" class="text-xs text-muted">
+        {{ tSplit("forms.charging.pricePerKwh", "price").before
+        }}<span class="data text-strong">{{ pricePerKwh }}</span>{{ tSplit("forms.charging.pricePerKwh", "price").after }}
+      </p>
+
+      <fieldset class="rounded-control border border-subtle p-3">
+        <legend class="eyebrow px-1">{{ t("forms.charging.battery") }}</legend>
+        <label class="flex items-center gap-2 py-1 text-sm text-body">
+          <input type="checkbox" v-model="form.fullCharge" class="accent-[var(--accent)]" /> {{ t("forms.charging.fullCharge") }}
+        </label>
+        <label class="flex items-center gap-2 py-1 text-sm text-body">
+          <input type="checkbox" v-model="form.missedSession" class="accent-[var(--accent)]" /> {{ t("forms.charging.missedSession") }}
+        </label>
+        <p class="mt-1.5 text-xs text-muted">{{ t("forms.charging.batteryHint") }}</p>
+      </fieldset>
+
+      <div class="grid grid-cols-2 gap-2">
+        <div>
+          <label class="dh-label">{{ t("forms.charging.location") }}</label>
+          <input v-model="form.location" :placeholder="t('forms.charging.locationPlaceholder')" class="dh-input" />
+        </div>
+        <div>
+          <label class="dh-label">{{ t("forms.charging.notes") }}</label>
+          <input v-model="form.notes" class="dh-input" />
+        </div>
+      </div>
+
+      <AttachmentField v-model:file="file" v-model:remove="removeFile" :record="entry" :legend="t('forms.charging.attachmentLegend')" />
+
+      <div class="mt-4 flex justify-end gap-2">
+        <button type="button" class="dh-btn dh-btn-ghost" @click="emit('close')">{{ t("common.cancel") }}</button>
+        <button type="submit" :disabled="saving" class="dh-btn dh-btn-primary">
+          {{ saving ? t("common.saving") : isEdit ? t("common.saveChanges") : t("forms.charging.submit") }}
+        </button>
+      </div>
+    </form>
+  </Modal>
+</template>

Web App/web/src/components/ProviderPanel.vue

@@ -179,6 +179,85 @@ function toggleCard(id) {
   }
 }
 
+// --- Arranging the headline readings ---
+//
+// The readings drag into any order, saved on drop. Stored on the car, like the
+// arrangement of the Information rows, rather than per device the way the
+// collapsed cards above are: it is a layout choice everyone the car is shared
+// with sees, not a reading habit of this browser.
+//
+// Only the readings the provider actually reported can be arranged, so the
+// stored list is a subset; one that turns up later — an EV range on a car that
+// was parked unplugged — follows the arranged ones.
+const metrics = ref([]);
+watch(
+  [() => snap.value?.metrics, () => props.car.metricOrder],
+  ([reported, order]) => {
+    const rank = new Map((order || []).map((key, i) => [key, i]));
+    const list = [...(reported || [])];
+    list.sort((a, b) => {
+      const ra = rank.has(a.key) ? rank.get(a.key) : Infinity;
+      const rb = rank.has(b.key) ? rank.get(b.key) : Infinity;
+      return ra - rb; // equal ranks (both unarranged) keep the reported order
+    });
+    metrics.value = list;
+  },
+  { immediate: true }
+);
+
+// Same native drag events as the garage and the Information rows, so also
+// pointer-only, and it needs write access like every other choice on the car.
+const canArrangeMetrics = computed(() => props.canWrite && metrics.value.length > 1);
+const dragMetric = ref(""); // reading being dragged
+const dropMetric = ref(""); // reading it is currently hovering over
+let metricsMoved = false; // the row changed during this drag and isn't saved yet
+
+function onMetricDragStart(key, e) {
+  dragMetric.value = key;
+  metricsMoved = false;
+  e.dataTransfer.effectAllowed = "move";
+  // Firefox only starts a drag once something is on the transfer.
+  e.dataTransfer.setData("text/plain", key);
+}
+
+// Reorder live as the pointer crosses readings, so the row shows the
+// arrangement you are about to get. dragenter fires again for every child
+// element inside the same reading, so only a genuinely new one moves anything.
+function onMetricDragEnter(key) {
+  if (!dragMetric.value || key === dragMetric.value || dropMetric.value === key) return;
+  dropMetric.value = key;
+  const list = metrics.value;
+  const from = list.findIndex((m) => m.key === dragMetric.value);
+  const to = list.findIndex((m) => m.key === key);
+  if (from < 0 || to < 0) return;
+  list.splice(to, 0, ...list.splice(from, 1));
+  metricsMoved = true;
+}
+
+// Called from both drop and dragend: a reading released in the gap between two
+// of them never produces a drop, and leaving that arrangement unsaved would
+// quietly undo itself on the next load.
+async function commitMetricOrder() {
+  dragMetric.value = "";
+  dropMetric.value = "";
+  if (!metricsMoved) return;
+  metricsMoved = false;
+  error.value = "";
+  try {
+    const car = await api.updateCarView(props.car.id, {
+      metricOrder: metrics.value.map((m) => m.key),
+    });
+    // Hand the car back up so the page holds one copy of it — the watch above
+    // then rebuilds this row from what was actually stored.
+    emit("car-updated", car);
+  } catch (e) {
+    // The arrangement didn't stick; say so and refetch rather than leaving the
+    // panel showing an order the server doesn't have.
+    error.value = e.message;
+    await load();
+  }
+}
+
 function metricLabel(key) {
   return t(`car.provider.metrics.${key}`);
 }
@@ -234,17 +313,35 @@ onMounted(async () => {
         </div>
 
         <template v-else>
-          <!-- Headline readings -->
-          <div v-if="snap.metrics?.length" class="dh-card mb-4 p-6">
+          <!-- Headline readings. They drag into any order with write access;
+               the arrangement belongs to the car. -->
+          <div v-if="metrics.length" class="dh-card mb-4 p-6">
             <p class="eyebrow mb-3">{{ t("car.provider.readings") }}</p>
             <dl class="grid grid-cols-2 gap-4 text-sm sm:grid-cols-4">
-              <div v-for="m in snap.metrics" :key="m.key">
+              <div
+                v-for="m in metrics"
+                :key="m.key"
+                :draggable="canArrangeMetrics"
+                :title="canArrangeMetrics ? t('car.provider.dragHint') : ''"
+                class="-m-2 rounded-control p-2 transition-shadow duration-150"
+                :class="[
+                  canArrangeMetrics ? 'cursor-grab hover:bg-sunken active:cursor-grabbing' : '',
+                  dragMetric === m.key ? 'opacity-50' : '',
+                  dropMetric === m.key ? 'ring-2 ring-accent' : '',
+                ]"
+                @dragstart="onMetricDragStart(m.key, $event)"
+                @dragenter.prevent="onMetricDragEnter(m.key)"
+                @dragover.prevent
+                @drop.prevent="commitMetricOrder"
+                @dragend="commitMetricOrder"
+              >
                 <dt class="eyebrow">{{ metricLabel(m.key) }}</dt>
                 <dd class="mt-0.5 data text-lg font-bold text-strong">
                   {{ m.value }}<span v-if="m.unit" class="ml-1 text-sm font-medium text-muted">{{ m.unit }}</span>
                 </dd>
               </div>
             </dl>
+            <p v-if="canArrangeMetrics" class="mt-3 text-xs text-muted">{{ t("car.provider.dragHint") }}</p>
           </div>
 
           <!-- The provider's odometer is ahead of the stored one: offer to take it. -->

Web App/web/src/i18n/da.json

@@ -269,7 +269,8 @@
       "services": "Servicehistorik",
       "technical": "Synshistorik",
       "maintenance": "Værksted",
-      "fuel": "Brændstof",
+      "fuel": "Brændstofudgifter",
+      "charging": "Opladningsudgifter",
       "documents": "Dokumenter",
       "parts": "Reservedelskatalog",
       "reminders": "Påmindelser"
@@ -292,6 +293,7 @@
       "updated": "Opdateret {time}",
       "vehicle": "Køretøj",
       "readings": "Aktuelle målinger",
+      "dragHint": "Træk en aflæsning for at ændre rækkefølgen.",
       "noData": "{label} returnerede ingen data for denne bil.",
       "raw": "Rå svar",
       "allFields": "Alle oplyste felter",
@@ -402,7 +404,7 @@
     },
 
     "fuel": {
-      "title": "Brændstof",
+      "title": "Brændstofudgifter",
       "subtitle": "Forbruget måles mellem fulde tanke.",
       "add": "Registrér tankning",
       "empty": "Ingen tankninger registreret endnu.",
@@ -430,6 +432,35 @@
       "confirmDelete": "Slet denne tankning?"
     },
 
+    "charging": {
+      "title": "Opladningsudgifter",
+      "subtitle": "Forbruget måles mellem fulde opladninger.",
+      "add": "Registrér opladning",
+      "empty": "Ingen opladninger registreret endnu.",
+      "average": "Gennemsnit",
+      "best": "Bedste",
+      "worst": "Værste",
+      "costPerKm": "Pris pr. km",
+      "sessions": "Opladninger",
+      "totalKwh": "Energi i alt",
+      "totalSpent": "Brugt i alt",
+      "trackedDistance": "Målt distance",
+      "avgPrice": "Gns. pris {price}/kWh",
+      "needTwoCharges": "Registrér mindst to fulde opladninger for at se forbrugstal.",
+      "colDate": "Dato",
+      "colKm": "Km",
+      "colKwh": "kWh",
+      "colCost": "Pris",
+      "colPerKwh": "Pr. kWh",
+      "colDistance": "Distance",
+      "colConsumption": "Forbrug",
+      "colLocation": "Ladepunkt",
+      "colFile": "Fil",
+      "partial": "delvis",
+      "gap": "hul",
+      "confirmDelete": "Slet denne opladning?"
+    },
+
     "documents": {
       "title": "Dokumenter",
       "subtitle": "Forsikring, miljøattester og andre papirer med fornyelsesdatoer.",
@@ -472,7 +503,7 @@
 
     "delete": {
       "title": "Slet denne bil?",
-      "body": "Dette sletter {name} permanent sammen med alt, der er registreret på den — {services}, {maintenance}, {fuel}, {documents} og {parts}. Det kan ikke fortrydes.",
+      "body": "Dette sletter {name} permanent sammen med alt, der er registreret på den — {services}, {maintenance}, {fuel}, {charging}, {documents} og {parts}. Det kan ikke fortrydes.",
       "services": {
         "one": "{n} servicepost",
         "other": "{n} serviceposter"
@@ -485,6 +516,10 @@
         "one": "{n} tankning",
         "other": "{n} tankninger"
       },
+      "charging": {
+        "one": "{n} opladning",
+        "other": "{n} opladninger"
+      },
       "documents": {
         "one": "{n} dokument",
         "other": "{n} dokumenter"
@@ -621,6 +656,25 @@
       "submit": "Registrér tankning"
     },
 
+    "charging": {
+      "addTitle": "Registrér opladning",
+      "editTitle": "Redigér opladning",
+      "date": "Dato",
+      "odometer": "Kilometerstand (km)",
+      "kwh": "Energi (kWh)",
+      "cost": "Pris",
+      "pricePerKwh": "Det er {price} pr. kWh.",
+      "battery": "Batteri",
+      "fullCharge": "Ladet helt op",
+      "missedSession": "En opladning før denne blev ikke registreret",
+      "batteryHint": "Forbruget måles mellem fulde opladninger. Delvise opladninger tæller stadig med i prisen og indgår i den næste fulde.",
+      "location": "Ladepunkt",
+      "locationPlaceholder": "Hjemme",
+      "notes": "Noter",
+      "attachmentLegend": "Kvittering",
+      "submit": "Gem opladning"
+    },
+
     "maintenance": {
       "addTitle": "Registrér værkstedsbesøg",
       "editTitle": "Rediger værkstedsbesøg",

Web App/web/src/i18n/en.json

@@ -344,7 +344,8 @@
       "services": "Service history",
       "technical": "Technical check history",
       "maintenance": "Maintenance",
-      "fuel": "Fuel",
+      "fuel": "Fuel cost",
+      "charging": "Charging cost",
       "documents": "Documents",
       "parts": "Parts catalog",
       "reminders": "Reminders"
@@ -367,6 +368,7 @@
       "updated": "Updated {time}",
       "vehicle": "Vehicle",
       "readings": "Current readings",
+      "dragHint": "Drag a reading to rearrange them.",
       "noData": "{label} returned no data for this car.",
       "raw": "Raw response",
       "allFields": "All reported fields",
@@ -477,7 +479,7 @@
     },
 
     "fuel": {
-      "title": "Fuel",
+      "title": "Fuel cost",
       "subtitle": "Consumption is measured between full tanks.",
       "add": "Log refill",
       "empty": "No refills logged yet.",
@@ -505,6 +507,35 @@
       "confirmDelete": "Delete this refill?"
     },
 
+    "charging": {
+      "title": "Charging cost",
+      "subtitle": "Consumption is measured between full charges.",
+      "add": "Log charge",
+      "empty": "No charges logged yet.",
+      "average": "Average",
+      "best": "Best",
+      "worst": "Worst",
+      "costPerKm": "Cost per km",
+      "sessions": "Charges",
+      "totalKwh": "Total energy",
+      "totalSpent": "Total spent",
+      "trackedDistance": "Tracked distance",
+      "avgPrice": "Avg. price {price}/kWh",
+      "needTwoCharges": "Log at least two full charges to see consumption figures.",
+      "colDate": "Date",
+      "colKm": "Km",
+      "colKwh": "kWh",
+      "colCost": "Cost",
+      "colPerKwh": "Per kWh",
+      "colDistance": "Distance",
+      "colConsumption": "Consumption",
+      "colLocation": "Charge point",
+      "colFile": "File",
+      "partial": "partial",
+      "gap": "gap",
+      "confirmDelete": "Delete this charge?"
+    },
+
     "documents": {
       "title": "Documents",
       "subtitle": "Insurance, pollution certificates and other paperwork with renewal dates.",
@@ -547,7 +578,7 @@
 
     "delete": {
       "title": "Delete this car?",
-      "body": "This permanently deletes {name} and everything logged against it — {services}, {maintenance}, {fuel}, {documents} and {parts}. This cannot be undone.",
+      "body": "This permanently deletes {name} and everything logged against it — {services}, {maintenance}, {fuel}, {charging}, {documents} and {parts}. This cannot be undone.",
       "services": {
         "one": "{n} service record",
         "other": "{n} service records"
@@ -560,6 +591,10 @@
         "one": "{n} refill",
         "other": "{n} refills"
       },
+      "charging": {
+        "one": "{n} charge",
+        "other": "{n} charges"
+      },
       "documents": {
         "one": "{n} document",
         "other": "{n} documents"
@@ -696,6 +731,25 @@
       "submit": "Log refill"
     },
 
+    "charging": {
+      "addTitle": "Log charge",
+      "editTitle": "Edit charge",
+      "date": "Date",
+      "odometer": "Odometer (km)",
+      "kwh": "Energy (kWh)",
+      "cost": "Cost",
+      "pricePerKwh": "That is {price} per kWh.",
+      "battery": "Battery",
+      "fullCharge": "Charged to full",
+      "missedSession": "A charge before this one was not logged",
+      "batteryHint": "Consumption is measured between full charges. Partial charges still count towards the cost, and roll into the next full one.",
+      "location": "Charge point",
+      "locationPlaceholder": "Home",
+      "notes": "Notes",
+      "attachmentLegend": "Receipt",
+      "submit": "Save charge"
+    },
+
     "maintenance": {
       "addTitle": "Log workshop visit",
       "editTitle": "Edit workshop visit",

Web App/web/src/i18n/pl.json

@@ -273,7 +273,8 @@
       "services": "Historia serwisowa",
       "technical": "Historia przeglądów",
       "maintenance": "Naprawy",
-      "fuel": "Paliwo",
+      "fuel": "Koszty paliwa",
+      "charging": "Koszty ładowania",
       "documents": "Dokumenty",
       "parts": "Katalog części",
       "reminders": "Przypomnienia"
@@ -296,6 +297,7 @@
       "updated": "Zaktualizowano {time}",
       "vehicle": "Pojazd",
       "readings": "Aktualne odczyty",
+      "dragHint": "Przeciągnij odczyt, aby zmienić ich kolejność.",
       "noData": "{label} nie zwróciło żadnych danych dla tego samochodu.",
       "raw": "Surowa odpowiedź",
       "allFields": "Wszystkie zgłoszone pola",
@@ -406,7 +408,7 @@
     },
 
     "fuel": {
-      "title": "Paliwo",
+      "title": "Koszty paliwa",
       "subtitle": "Zużycie liczone jest między pełnymi bakami.",
       "add": "Zapisz tankowanie",
       "empty": "Brak zapisanych tankowań.",
@@ -434,6 +436,35 @@
       "confirmDelete": "Usunąć to tankowanie?"
     },
 
+    "charging": {
+      "title": "Koszty ładowania",
+      "subtitle": "Zużycie liczone jest między pełnymi ładowaniami.",
+      "add": "Zapisz ładowanie",
+      "empty": "Brak zapisanych ładowań.",
+      "average": "Średnio",
+      "best": "Najlepsze",
+      "worst": "Najgorsze",
+      "costPerKm": "Koszt na km",
+      "sessions": "Ładowania",
+      "totalKwh": "Łączna energia",
+      "totalSpent": "Łącznie wydano",
+      "trackedDistance": "Zmierzony dystans",
+      "avgPrice": "Śr. cena {price}/kWh",
+      "needTwoCharges": "Zapisz co najmniej dwa pełne ładowania, aby zobaczyć zużycie.",
+      "colDate": "Data",
+      "colKm": "Km",
+      "colKwh": "kWh",
+      "colCost": "Koszt",
+      "colPerKwh": "Za kWh",
+      "colDistance": "Dystans",
+      "colConsumption": "Zużycie",
+      "colLocation": "Ładowarka",
+      "colFile": "Plik",
+      "partial": "częściowe",
+      "gap": "przerwa",
+      "confirmDelete": "Usunąć to ładowanie?"
+    },
+
     "documents": {
       "title": "Dokumenty",
       "subtitle": "Ubezpieczenie, zaświadczenia i inne dokumenty z terminami odnowienia.",
@@ -476,7 +507,7 @@
 
     "delete": {
       "title": "Usunąć ten samochód?",
-      "body": "To trwale usunie {name} i wszystko, co zostało w nim zapisane — {services}, {maintenance}, {fuel}, {documents} i {parts}. Tej operacji nie można cofnąć.",
+      "body": "To trwale usunie {name} i wszystko, co zostało w nim zapisane — {services}, {maintenance}, {fuel}, {charging}, {documents} i {parts}. Tej operacji nie można cofnąć.",
       "services": {
         "one": "{n} wpis serwisowy",
         "few": "{n} wpisy serwisowe",
@@ -495,6 +526,10 @@
         "many": "{n} tankowań",
         "other": "{n} tankowania"
       },
+      "charging": {
+        "one": "{n} ładowanie",
+        "other": "{n} ładowań"
+      },
       "documents": {
         "one": "{n} dokument",
         "few": "{n} dokumenty",
@@ -635,6 +670,25 @@
       "submit": "Zapisz tankowanie"
     },
 
+    "charging": {
+      "addTitle": "Zapisz ładowanie",
+      "editTitle": "Edytuj ładowanie",
+      "date": "Data",
+      "odometer": "Przebieg (km)",
+      "kwh": "Energia (kWh)",
+      "cost": "Koszt",
+      "pricePerKwh": "To {price} za kWh.",
+      "battery": "Akumulator",
+      "fullCharge": "Naładowany do pełna",
+      "missedSession": "Wcześniejsze ładowanie nie zostało zapisane",
+      "batteryHint": "Zużycie liczone jest między pełnymi ładowaniami. Ładowania częściowe wliczają się do kosztów i doliczają do kolejnego pełnego.",
+      "location": "Ładowarka",
+      "locationPlaceholder": "Dom",
+      "notes": "Notatki",
+      "attachmentLegend": "Paragon",
+      "submit": "Zapisz ładowanie"
+    },
+
     "maintenance": {
       "addTitle": "Zapisz wizytę w warsztacie",
       "editTitle": "Edytuj wizytę w warsztacie",

Web App/web/src/lib/format.js

@@ -135,6 +135,24 @@ export function formatKmPerLiter(value) {
   return Number(value).toFixed(2) + " km/L";
 }
 
+// The charging equivalents of the three above. Energy keeps two decimals like
+// litres — a 7.35 kWh top-up is a real number off a charge point — and the
+// consumption figure one, for the same reason tanks do.
+export function formatKwh(value) {
+  if (value == null || value === "") return "—";
+  return Number(value).toFixed(2) + " kWh";
+}
+
+export function formatConsumptionKwh(value) {
+  if (value == null) return "—";
+  return Number(value).toFixed(1) + " kWh/100km";
+}
+
+export function formatKmPerKwh(value) {
+  if (value == null) return "—";
+  return Number(value).toFixed(2) + " km/kWh";
+}
+
 // Document renewal badge, driven by the server's expiry assessment so the client
 // never re-derives the date maths.
 const EXPIRY_STYLE = {

Web App/web/src/views/CarDetail.vue

@@ -9,6 +9,9 @@ import {
   formatMoney,
   formatConsumption,
   formatKmPerLiter,
+  formatKwh,
+  formatConsumptionKwh,
+  formatKmPerKwh,
   serviceStatus,
   expiryStatus,
   reminderStatus,
@@ -19,6 +22,7 @@ import ServiceFormModal from "../components/ServiceFormModal.vue";
 import TechnicalCheckFormModal from "../components/TechnicalCheckFormModal.vue";
 import PartFormModal from "../components/PartFormModal.vue";
 import FuelFormModal from "../components/FuelFormModal.vue";
+import ChargingFormModal from "../components/ChargingFormModal.vue";
 import MaintenanceFormModal from "../components/MaintenanceFormModal.vue";
 import DocumentFormModal from "../components/DocumentFormModal.vue";
 import ReminderFormModal from "../components/ReminderFormModal.vue";
@@ -35,6 +39,8 @@ const technicalChecks = ref([]);
 const parts = ref([]);
 const fuel = ref([]);
 const fuelStats = ref(null);
+const charging = ref([]);
+const chargingStats = ref(null);
 const maintenance = ref([]);
 const documents = ref([]);
 const reminders = ref([]);
@@ -51,6 +57,8 @@ const showPart = ref(false);
 const editingPart = ref(null);
 const showFuel = ref(false);
 const editingFuel = ref(null);
+const showCharging = ref(false);
+const editingCharging = ref(null);
 const showMaintenance = ref(false);
 const editingMaintenance = ref(null);
 const showDocument = ref(false);
@@ -119,6 +127,7 @@ const TABS = computed(() =>
     { key: "technical", label: t("car.tabs.technical") },
     { key: "maintenance", label: t("car.tabs.maintenance") },
     { key: "fuel", label: t("car.tabs.fuel") },
+    { key: "charging", label: t("car.tabs.charging") },
     { key: "documents", label: t("car.tabs.documents") },
     { key: "parts", label: t("car.tabs.parts") },
     { key: "reminders", label: t("car.tabs.reminders") },
@@ -142,7 +151,8 @@ watch(TABS, (tabs) => {
 // the page rearrange under the pointer between clicks.
 const showViewPicker = ref(false);
 const HIDEABLE_TABS = [
-  "provider", "services", "technical", "maintenance", "fuel", "documents", "parts", "reminders",
+  "provider", "services", "technical", "maintenance", "fuel", "charging",
+  "documents", "parts", "reminders",
 ];
 // The Information rows, in their default order. Keys mirror hideableCarFields
 // in the API's cars.go — the server rejects anything else.
@@ -324,6 +334,8 @@ async function load() {
       parts.value,
       fuel.value,
       fuelStats.value,
+      charging.value,
+      chargingStats.value,
       maintenance.value,
       documents.value,
       reminders.value,
@@ -334,6 +346,8 @@ async function load() {
       api.listCarParts(props.id),
       api.listCarFuel(props.id),
       api.getCarFuelStats(props.id),
+      api.listCarCharging(props.id),
+      api.getCarChargingStats(props.id),
       api.listCarMaintenance(props.id),
       api.listCarDocuments(props.id),
       api.listCarReminders(props.id),
@@ -459,6 +473,42 @@ async function deleteFuel(id) {
   }
 }
 
+// --- charging ---
+//
+// The same handling as fuel, for the same reasons: a session re-derives every
+// window it touches and advances the car's odometer, so the whole set is
+// refetched rather than the one list that was edited.
+function openAddCharging() {
+  editingCharging.value = null;
+  showCharging.value = true;
+}
+function openEditCharging(c) {
+  editingCharging.value = c;
+  showCharging.value = true;
+}
+async function reloadCharging() {
+  [charging.value, chargingStats.value, car.value, reminders.value] = await Promise.all([
+    api.listCarCharging(props.id),
+    api.getCarChargingStats(props.id),
+    api.getCar(props.id),
+    api.listCarReminders(props.id),
+  ]);
+}
+async function onChargingSaved() {
+  showCharging.value = false;
+  editingCharging.value = null;
+  await reloadCharging();
+}
+async function deleteCharging(id) {
+  if (!confirm(t("car.charging.confirmDelete"))) return;
+  try {
+    await api.deleteCharging(id);
+    await reloadCharging();
+  } catch (e) {
+    error.value = e.message;
+  }
+}
+
 // --- maintenance ---
 function openAddMaintenance() {
   editingMaintenance.value = null;
@@ -1057,6 +1107,118 @@ onMounted(load);
         </div>
       </section>
 
+      <!-- Charging cost. The EV counterpart of Fuel: energy in place of litres,
+           and a charge to the usual full point in place of the full tank. -->
+      <section v-else-if="activeTab === 'charging'">
+        <div class="mb-3 flex items-center justify-between">
+          <div>
+            <h2 class="text-lg font-bold tracking-[-0.02em] text-strong">{{ t("car.charging.title") }}</h2>
+            <p class="text-sm text-muted">{{ t("car.charging.subtitle") }}</p>
+          </div>
+          <button v-if="canWrite" class="dh-btn dh-btn-primary !px-3 !py-1.5" @click="openAddCharging">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" class="h-4 w-4"><path stroke-linecap="round" stroke-linejoin="round" d="M12 5v14M5 12h14" /></svg>
+            {{ t("car.charging.add") }}
+          </button>
+        </div>
+
+        <!-- Rollup -->
+        <div v-if="chargingStats && chargingStats.entries > 0" class="dh-card mb-4 p-6">
+          <dl class="grid grid-cols-2 gap-4 text-sm sm:grid-cols-4">
+            <div>
+              <dt class="eyebrow">{{ t("car.charging.average") }}</dt>
+              <dd class="mt-0.5 data text-lg font-bold text-strong">{{ formatConsumptionKwh(chargingStats.avgConsumptionKwh100) }}</dd>
+              <dd class="text-xs text-muted">{{ formatKmPerKwh(chargingStats.avgKmPerKwh) }}</dd>
+            </div>
+            <div>
+              <dt class="eyebrow">{{ t("car.charging.best") }}</dt>
+              <dd class="mt-0.5 data font-medium text-success">{{ formatConsumptionKwh(chargingStats.bestConsumptionKwh100) }}</dd>
+            </div>
+            <div>
+              <dt class="eyebrow">{{ t("car.charging.worst") }}</dt>
+              <dd class="mt-0.5 data font-medium text-danger">{{ formatConsumptionKwh(chargingStats.worstConsumptionKwh100) }}</dd>
+            </div>
+            <div>
+              <dt class="eyebrow">{{ t("car.charging.costPerKm") }}</dt>
+              <dd class="mt-0.5 data font-medium text-strong">{{ formatMoney(chargingStats.costPerKm) }}</dd>
+            </div>
+            <div>
+              <dt class="eyebrow">{{ t("car.charging.sessions") }}</dt>
+              <dd class="mt-0.5 data font-medium text-strong">{{ chargingStats.entries }}</dd>
+            </div>
+            <div>
+              <dt class="eyebrow">{{ t("car.charging.totalKwh") }}</dt>
+              <dd class="mt-0.5 data font-medium text-strong">{{ formatKwh(chargingStats.totalKwh) }}</dd>
+            </div>
+            <div>
+              <dt class="eyebrow">{{ t("car.charging.totalSpent") }}</dt>
+              <dd class="mt-0.5 data font-medium text-strong">{{ formatMoney(chargingStats.totalCost) }}</dd>
+            </div>
+            <div>
+              <dt class="eyebrow">{{ t("car.charging.trackedDistance") }}</dt>
+              <dd class="mt-0.5 data font-medium text-strong">{{ formatKm(chargingStats.trackedDistanceKm) }}</dd>
+              <dd class="text-xs text-muted">{{ t("car.charging.avgPrice", { price: formatMoney(chargingStats.avgPricePerKwh) }) }}</dd>
+            </div>
+          </dl>
+          <p v-if="!chargingStats.avgConsumptionKwh100" class="mt-4 text-xs text-muted">
+            {{ t("car.charging.needTwoCharges") }}
+          </p>
+        </div>
+
+        <div v-if="charging.length === 0" class="rounded-card border border-dashed border-default p-8 text-center text-muted">
+          {{ t("car.charging.empty") }}
+        </div>
+
+        <div v-else class="dh-card overflow-x-auto p-0">
+          <table class="min-w-full text-sm">
+            <thead class="bg-sunken text-left">
+              <tr class="[&>th]:eyebrow [&>th]:px-4 [&>th]:py-3">
+                <th>{{ t("car.charging.colDate") }}</th>
+                <th>{{ t("car.charging.colKm") }}</th>
+                <th class="!text-right">{{ t("car.charging.colKwh") }}</th>
+                <th class="!text-right">{{ t("car.charging.colCost") }}</th>
+                <th class="!text-right">{{ t("car.charging.colPerKwh") }}</th>
+                <th class="!text-right">{{ t("car.charging.colDistance") }}</th>
+                <th class="!text-right">{{ t("car.charging.colConsumption") }}</th>
+                <th>{{ t("car.charging.colLocation") }}</th>
+                <th>{{ t("car.charging.colFile") }}</th>
+                <th v-if="canWrite"></th>
+              </tr>
+            </thead>
+            <tbody class="divide-y divide-subtle">
+              <tr v-for="c in charging" :key="c.id" class="transition-colors hover:bg-sunken">
+                <td class="whitespace-nowrap px-4 py-3 data font-medium text-strong">
+                  {{ formatDate(c.date) }}
+                  <span v-if="!c.fullCharge" class="ml-1 text-xs font-normal text-muted">{{ t("car.charging.partial") }}</span>
+                  <span v-if="c.missedSession" class="ml-1 text-xs font-normal text-warning">{{ t("car.charging.gap") }}</span>
+                </td>
+                <td class="whitespace-nowrap px-4 py-3 data text-body">{{ formatKm(c.km) }}</td>
+                <td class="whitespace-nowrap px-4 py-3 text-right data text-body">{{ formatKwh(c.kwh) }}</td>
+                <td class="whitespace-nowrap px-4 py-3 text-right data text-body">{{ c.cost ? formatMoney(c.cost) : t("common.empty") }}</td>
+                <td class="whitespace-nowrap px-4 py-3 text-right data text-muted">{{ formatMoney(c.pricePerKwh) }}</td>
+                <td class="whitespace-nowrap px-4 py-3 text-right data text-muted">{{ c.distanceKm ? formatKm(c.distanceKm) : t("common.empty") }}</td>
+                <td class="whitespace-nowrap px-4 py-3 text-right data font-medium" :class="c.consumptionKwh100 ? 'text-strong' : 'text-muted'">
+                  {{ formatConsumptionKwh(c.consumptionKwh100) }}
+                </td>
+                <td class="px-4 py-3 text-body">
+                  {{ c.location || t("common.empty") }}
+                  <div v-if="c.notes" class="text-xs text-muted">{{ c.notes }}</div>
+                </td>
+                <td class="whitespace-nowrap px-4 py-3">
+                  <button v-if="c.hasFile" class="text-xs font-medium text-brandtext hover:underline" @click="downloadAttachment('charging', c)">
+                    {{ t("common.download") }}
+                  </button>
+                  <span v-else class="text-xs text-muted">{{ t("common.empty") }}</span>
+                </td>
+                <td v-if="canWrite" class="whitespace-nowrap px-4 py-3 text-right">
+                  <button class="text-xs font-medium text-brandtext hover:underline" @click="openEditCharging(c)">{{ t("common.edit") }}</button>
+                  <button class="ml-3 text-xs font-medium text-danger hover:underline" @click="deleteCharging(c.id)">{{ t("common.delete") }}</button>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+
       <!-- Documents -->
       <section v-else-if="activeTab === 'documents'">
         <div class="mb-3 flex items-center justify-between">
@@ -1250,6 +1412,13 @@ onMounted(load);
       @saved="onFuelSaved"
       @close="showFuel = false"
     />
+    <ChargingFormModal
+      v-if="showCharging"
+      :car-id="id"
+      :entry="editingCharging"
+      @saved="onChargingSaved"
+      @close="showCharging = false"
+    />
     <MaintenanceFormModal
       v-if="showMaintenance"
       :car-id="id"
@@ -1334,6 +1503,7 @@ onMounted(load);
             services: t("car.delete.services", { n: services.length }),
             maintenance: t("car.delete.maintenance", { n: maintenance.length }),
             fuel: t("car.delete.fuel", { n: fuel.length }),
+            charging: t("car.delete.charging", { n: charging.length }),
             documents: t("car.delete.documents", { n: documents.length }),
             parts: t("car.delete.parts", { n: parts.length }),
           }) }}