Dashboard Startseite

src/modules/Dashboard/DashboardModule.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { BenutzerClient, GebaeudeClient } from "#components/Ausweis/types";
+
+	export let user: BenutzerClient;
+	export let gebaeudeArray: GebaeudeClient[];
+</script>
+
+<h1 class="text-4xl font-medium my-8">Willkommen zurück, {user.vorname}!</h1>
+<p class="text-lg">
+	Hier finden Sie eine Übersicht über all ihre Ausweise und Gebäude.
+</p>
+
+<h1 class="text-4xl font-medium my-8">Gebäude</h1>
+<div class="grid grid-cols-1 gap-4 lg:grid-cols-2">
+	{#each gebaeudeArray as gebaeude}
+	<div class="card lg:card-side bg-base-200 card-bordered border-base-300">
+		<figure class="lg:w-1/2">
+			<img
+				src={(gebaeude.gebaeude_bilder && `/bilder/${gebaeude.gebaeude_bilder[0]?.uid}.webp`) || "/images/placeholder.jpg"}
+				class="object-cover w-full h-full"
+				alt="Gebäudebild"
+			/>
+		</figure>
+		<div class="card-body lg:w-1/2 p-4">
+			<h4 class="text-lg font-semibold">{gebaeude.adresse}, {gebaeude.plz} {gebaeude.ort}</h4>
+		</div>
+	</div>
+{/each}
+</div>

src/pages/dashboard/index.astro

@@ -1,13 +1,21 @@
 ---
+import { createCaller } from "#lib/caller";
 import UserLayout from "../../layouts/UserLayout.astro";
 import { validateAccessTokenServer } from "src/server/lib/validateAccessToken";
+import DashboardModule from "#modules/Dashboard/DashboardModule.svelte";
 
 const accessTokenValid = await validateAccessTokenServer(Astro);
 
 if (!accessTokenValid) {
 	return Astro.redirect("/auth/login")
 }
+
+const caller = createCaller(Astro);
+
+const user = await caller.v1.benutzer.self();
+const gebaeudeArray = await caller.v1.gebaeude.getMany({ limit: 5 });
 ---
 
 <UserLayout title="Dashboard">
+	<DashboardModule user={user} gebaeudeArray={gebaeudeArray} />
 </UserLayout>