Initial commit: Auto-Charger Logging Web-App

MQTT-Collector (Python/paho-mqtt) speichert abgeschlossene go-e
Wallbox-Ladungen in SQLite; Next.js-Web-App zeigt sie als Tabelle mit
Energie-Summen (Monat/Jahr/gesamt) im werte-next-Design. Zwei
Docker-Container mit gemeinsamem DB-Volume.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

web/components/Totals.tsx

@@ -0,0 +1,42 @@
+import { Totals as TotalsData } from "@/lib/db";
+
+function kwh(wh: number): string {
+  return (wh / 1000).toLocaleString("de-DE", {
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2,
+  });
+}
+
+function formatInstall(iso: string | null): string {
+  if (!iso) return "";
+  const [date = ""] = iso.split("T");
+  const [y, m, d] = date.split("-");
+  return y && m && d ? ` (seit ${d}.${m}.${y})` : "";
+}
+
+function Card({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="flex-1 min-w-[10rem] border border-black rounded-lg bg-white p-4 text-center">
+      <div className="text-sm text-gray-600">{label}</div>
+      <div className="text-2xl font-bold">
+        {value} <span className="text-base font-normal">kWh</span>
+      </div>
+    </div>
+  );
+}
+
+export default function Totals({ totals }: { totals: TotalsData }) {
+  return (
+    <div className="mt-6">
+      <h2 className="text-lg font-semibold mb-3">Geladene Energie</h2>
+      <div className="flex flex-wrap gap-4">
+        <Card label="Aktueller Monat" value={kwh(totals.month_wh)} />
+        <Card label="Aktuelles Jahr" value={kwh(totals.year_wh)} />
+        <Card
+          label={`Gesamt${formatInstall(totals.install_date)}`}
+          value={kwh(totals.total_wh)}
+        />
+      </div>
+    </div>
+  );
+}