Status route, preparing to make Overlay/Portal component

src/routes/[qrcode]/status/+page.svelte

@@ -1,3 +1,49 @@
-<div class="bg-black pointer-events-auto">
-  STATUS CARD
-</div>
+<script lang="ts">
+  import { onMount } from "svelte";
+  import { invalidate } from "$app/navigation";
+  import BatteryIcon from "$lib/icons/BatteryIcon.svelte";
+
+  let { data } = $props();
+
+  onMount(() => {
+    const interval = setInterval(() => {
+      invalidate('app:chargecontroller');
+    }, 5000);
+    return () => {
+      clearInterval(interval);
+    };
+  });
+
+  const energykWh: string = $derived.by(() => {
+    const wh = data.chargecontroller.active_charge?.energy_wh ?? 0;
+    return (wh / 1000).toFixed(2);
+  });
+  const powerkWh: string = $derived.by(() => {
+    const wh = data.chargecontroller.active_charge?.last_power?.power ?? 0;
+    return (wh / 1000).toFixed(2);
+  });
+
+  // TODO: Add Modal from bottom to confirm
+</script>
+
+<div class="pointer-events-auto bg-green-700/80 h-full w-full flex flex-col justify-center items-center gap-12">
+  <div>
+    <BatteryIcon/>
+  </div>
+  <div class="text-center">
+    <p>Energia erogata a {data.user.username}:</p>
+    <p class="text-4xl"><span class="text-5xl">{energykWh}</span> kWh</p>
+    <p class="text-sm">Potenza misurata: {powerkWh} kW</p>
+  </div>
+  <div class="w-[90%]">
+    <button class="btn btn-warning btn-xl w-full">Interrompere la ricarica</button>
+  </div>
+  <div class="text-center w-[70%] flex flex-col gap-5 text-sm">
+    <p>
+      «Ciò che sta accadendo ci pone di fronte all’urgenza di procedere in una coraggiosa rivoluzione culturale.»
+    </p>
+    <p>
+      Papa Francesco, Enciclica Laudato Si’
+    </p>
+  </div>
+</div>