DaisyUI Integriert

package.json

@@ -68,6 +68,7 @@
     "bun-types": "^1.0.22",
     "cypress": "^13.6.2",
     "cypress-file-upload": "^5.0.8",
+    "daisyui": "^4.6.0",
     "eslint": "~8.15.0",
     "eslint-config-prettier": "8.1.0",
     "prettier": "^2.8.8",

src/components/Ausweis/Ausweisart.svelte

@@ -3,7 +3,6 @@
 	import { auditHeizungGebaeudeBaujahr } from "../Verbrauchsausweis/audits/HeizungGebaeudeBaujahr";
 	import { addNotification, deleteNotification } from "@ibcornelsen/ui";
 	import TagInput from "../TagInput.svelte";
-	import { writable } from "svelte/store";
 	import type {
 		BedarfsausweisWohnen,
 		VerbrauchsausweisGewerbe,
@@ -14,8 +13,6 @@
 	export let gebaeude: GebaeudeClient;
 	export let ausweis: VerbrauchsausweisWohnenClient | VerbrauchsausweisGewerbe | BedarfsausweisWohnen;
 
-	$: baujahrHeizung = writable(gebaeude.baujahr_heizung || []);
-	$: baujahr = writable(gebaeude.baujahr_gebaeude || []);
 </script>
 
 <div class="GRB">
@@ -28,6 +25,7 @@
 					<input
 						name="ausstellgrund"
 						type="radio"
+						class="radio radio-secondary"
 						value={ausstellgrund}
 						bind:group={ausweis.ausstellgrund}
 					/>{name}</label
@@ -147,9 +145,10 @@
 </div>
 
 <style>
+	
+
 	input[type="radio"] {
-		width: 15px;
-		height: 15px;
+		@apply w-5 h-5 rounded-full;
 	}
 
 	.radio-inline {

src/components/Ausweis/BilderZusatzsysteme.svelte

@@ -5,15 +5,24 @@
 	import DaemmungImage from "./DaemmungImage.svelte";
 	import FensterImage from "./FensterImage.svelte";
 	import Label from "../Label.svelte";
-	import type { BedarfsausweisWohnen, VerbrauchsausweisGewerbe } from "@ibcornelsen/database/client";
-	import { GebaeudeClient, UploadedGebaeudeBild, VerbrauchsausweisWohnenClient } from "./types";
+	import type {
+		BedarfsausweisWohnen,
+		VerbrauchsausweisGewerbe,
+	} from "@ibcornelsen/database/client";
+	import {
+		GebaeudeClient,
+		UploadedGebaeudeBild,
+		VerbrauchsausweisWohnenClient,
+	} from "./types";
 
 	export let gebaeude: GebaeudeClient;
-	export let ausweis: VerbrauchsausweisWohnenClient | VerbrauchsausweisGewerbe | BedarfsausweisWohnen;
-	export let images: UploadedGebaeudeBild[]
+	export let ausweis:
+		| VerbrauchsausweisWohnenClient
+		| VerbrauchsausweisGewerbe
+		| BedarfsausweisWohnen;
+	export let images: UploadedGebaeudeBild[];
 </script>
 
-
 <div class="GRB3">
 	<HelpLabel title="Heizungsanlage (bitte zutreffendes ankreuzen) *">
 		Wir benötigen diese Angaben um den allgemeinen Modernisierungsstand
@@ -29,6 +38,7 @@
 			<label class="checkbox-inline"
 				><input
 					type="checkbox"
+					class="checkbox"
 					name="zentralheizung"
 					bind:checked={gebaeude.zentralheizung}
 					value="ZH"
@@ -39,6 +49,7 @@
 			<label class="checkbox-inline"
 				><input
 					type="checkbox"
+					class="checkbox"
 					name="einzelofen"
 					bind:checked={gebaeude.einzelofen}
 					value="EO"
@@ -49,6 +60,7 @@
 			<label class="checkbox-inline"
 				><input
 					type="checkbox"
+					class="checkbox"
 					name="durchlauf_erhitzer"
 					bind:checked={gebaeude.durchlauf_erhitzer}
 					value="DH"
@@ -59,6 +71,7 @@
 			<label class="checkbox-inline"
 				><input
 					type="checkbox"
+					class="checkbox"
 					name="standard_kessel"
 					bind:checked={gebaeude.standard_kessel}
 					value="SK"
@@ -69,6 +82,7 @@
 			<label class="checkbox-inline"
 				><input
 					type="checkbox"
+					class="checkbox"
 					name="solarsystem_warmwasser"
 					bind:checked={gebaeude.solarsystem_warmwasser}
 					value="SSWW"
@@ -79,6 +93,7 @@
 			<label class="checkbox-inline"
 				><input
 					type="checkbox"
+					class="checkbox"
 					name="waermepumpe"
 					bind:checked={gebaeude.waermepumpe}
 					value="WP"
@@ -89,6 +104,7 @@
 			<label class="checkbox-inline"
 				><input
 					type="checkbox"
+					class="checkbox"
 					name="niedertemperatur_kessel"
 					bind:checked={gebaeude.niedertemperatur_kessel}
 					value="NK"
@@ -99,6 +115,7 @@
 			<label class="checkbox-inline"
 				><input
 					type="checkbox"
+					class="checkbox"
 					name="brennwert_kessel"
 					bind:checked={gebaeude.brennwert_kessel}
 					value="BWK"
@@ -109,6 +126,7 @@
 			<label class="checkbox-inline"
 				><input
 					type="checkbox"
+					class="checkbox"
 					name="warmwasser_rohre_gedaemmt"
 					bind:checked={gebaeude.warmwasser_rohre_gedaemmt}
 					value="WRGD"
@@ -119,6 +137,7 @@
 			<label class="checkbox-inline"
 				><input
 					type="checkbox"
+					class="checkbox"
 					name="heizungsrohre_gedaemmt"
 					bind:checked={gebaeude.heizungsrohre_gedaemmt}
 					value="HRGD"
@@ -129,6 +148,7 @@
 			<label class="checkbox-inline"
 				><input
 					type="checkbox"
+					class="checkbox"
 					name="zirkulation"
 					bind:checked={gebaeude.zirkulation}
 					value="ZK"
@@ -139,6 +159,7 @@
 			<label class="checkbox-inline"
 				><input
 					type="checkbox"
+					class="checkbox"
 					name="raum_temperatur_regler"
 					bind:checked={gebaeude.raum_temperatur_regler}
 					value="RTR"
@@ -168,6 +189,7 @@
 			<label class="checkbox-inline"
 				><input
 					type="checkbox"
+					class="checkbox"
 					name="einfach_verglasung"
 					bind:checked={gebaeude.einfach_verglasung}
 					value="EG"
@@ -178,6 +200,7 @@
 			<label class="checkbox-inline"
 				><input
 					type="checkbox"
+					class="checkbox"
 					name="doppel_verglasung"
 					bind:checked={gebaeude.doppel_verglasung}
 					value="DF"
@@ -188,6 +211,7 @@
 			<label class="checkbox-inline"
 				><input
 					type="checkbox"
+					class="checkbox"
 					name="isolier_verglasung"
 					bind:checked={gebaeude.isolier_verglasung}
 					value="IVG"
@@ -198,6 +222,7 @@
 			<label class="checkbox-inline"
 				><input
 					type="checkbox"
+					class="checkbox"
 					name="dreifach_verglasung"
 					bind:checked={gebaeude.dreifach_verglasung}
 					value="PHF"
@@ -208,6 +233,7 @@
 			<label class="checkbox-inline"
 				><input
 					type="checkbox"
+					class="checkbox"
 					name="fenster_dicht"
 					bind:checked={gebaeude.fenster_dicht}
 					value="FD"
@@ -218,6 +244,7 @@
 			<label class="checkbox-inline"
 				><input
 					type="checkbox"
+					class="checkbox"
 					name="fenster_teilweise_undicht"
 					bind:checked={gebaeude.fenster_teilweise_undicht}
 					value="FTUD"
@@ -228,6 +255,7 @@
 			<label class="checkbox-inline"
 				><input
 					type="checkbox"
+					class="checkbox"
 					name="tueren_dicht"
 					bind:checked={gebaeude.tueren_dicht}
 					value="TD"
@@ -238,6 +266,7 @@
 			<label class="checkbox-inline"
 				><input
 					type="checkbox"
+					class="checkbox"
 					name="tueren_undicht"
 					bind:checked={gebaeude.tueren_undicht}
 					value="TUD"
@@ -248,6 +277,7 @@
 			<label class="checkbox-inline"
 				><input
 					type="checkbox"
+					class="checkbox"
 					name="rolllaeden_kaesten_gedaemmt"
 					bind:checked={gebaeude.rolllaeden_kaesten_gedaemmt}
 					value="RKD"
@@ -280,6 +310,7 @@
 			<label class="checkbox-inline"
 				><input
 					type="checkbox"
+					class="checkbox"
 					name="aussenwand_gedaemmt"
 					bind:checked={gebaeude.aussenwand_gedaemmt}
 					value="AWD"
@@ -290,6 +321,7 @@
 			<label class="checkbox-inline"
 				><input
 					type="checkbox"
+					class="checkbox"
 					name="keller_wand_gedaemmt"
 					bind:checked={gebaeude.keller_wand_gedaemmt}
 					value="KWD"
@@ -300,6 +332,7 @@
 			<label class="checkbox-inline"
 				><input
 					type="checkbox"
+					class="checkbox"
 					name="keller_decke_gedaemmt"
 					bind:checked={gebaeude.keller_decke_gedaemmt}
 					value="KDD"
@@ -310,6 +343,7 @@
 			<label class="checkbox-inline"
 				><input
 					type="checkbox"
+					class="checkbox"
 					name="dachgeschoss_gedaemmt"
 					bind:checked={gebaeude.dachgeschoss_gedaemmt}
 					value="DGD"
@@ -320,6 +354,7 @@
 			<label class="checkbox-inline"
 				><input
 					type="checkbox"
+					class="checkbox"
 					name="oberste_geschossdecke_gedaemmt"
 					bind:checked={gebaeude.oberste_geschossdecke_gedaemmt}
 					value="OGDDW"
@@ -330,6 +365,7 @@
 			<label class="checkbox-inline"
 				><input
 					type="checkbox"
+					class="checkbox"
 					name="oberste_geschossdecke_min_12cm_gedaemmt"
 					bind:checked={gebaeude.oberste_geschossdecke_min_12cm_gedaemmt}
 					value="OGDD"

src/components/Ausweis/Verbrauch.svelte

@@ -58,6 +58,7 @@
 			</HelpLabel>
 			<input
 				type="checkbox"
+				class="checkbox"
 				name="zusaetzliche_heizquelle"
 				bind:checked={ausweis.zusaetzliche_heizquelle}
 			/>

src/components/Footer.astro

@@ -2,7 +2,7 @@
 const currentYear = new Date().getFullYear();
 ---
 
-<div class="flex flex-row justify-between px-4 items-center bg-primary py-2">
+<div class="flex flex-row justify-between px-4 items-center bg-primary py-2 mt-auto">
 	<a class="text-white font-medium text-lg" href="/impressum">Impressum und Datenschutz</a>
 	<a class="text-white font-medium text-lg" href="/">© {currentYear} IB Cornelsen Hamburg.</a>
 </div>

src/components/Label.svelte

@@ -2,6 +2,6 @@
 	export let name: string = "";
 </script>
 
-<div class="flex flex-row justify-between items-center gap-4">
+<div class="flex flex-row justify-between items-center gap-4 mb-2">
 	<label class="text-base font-medium" for={name}><slot></slot></label>
 </div>

src/components/LoginDialog.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { getClose } from "svelte-dialogs";
+
+	const close = getClose();
+	import EmbeddedLoginModule from "../modules/EmbeddedLoginModule.svelte"
+	import EmbeddedRegisterModule from "../modules/EmbeddedRegisterModule.svelte"
+
+	let route: "login" | "signup" = "login"
+
+	const navigate = (target: typeof route) => {
+		route = target
+	}
+
+	const loginData = {
+		email: "",
+		passwort: "",
+	}
+</script>
+
+{#if route == "login"}
+	<EmbeddedLoginModule onLogin={close} data={loginData} {navigate} />
+{:else}
+	<EmbeddedRegisterModule onRegister={(response) => {
+		loginData.email = response.email
+		navigate("login")
+	}} {navigate} />
+{/if}

src/components/SidebarLeft.astro

@@ -1,7 +1,7 @@
 <div class="flex flex-col gap-6">
 	<nav>
 		<div class="nav-card">
-			<div class="card-menu-option dropdown">
+			<div class="card-menu-option dropdown dropdown-right dropdown-hover">
 				<a href="/energieausweis-erstellen"
 					>Energieausweis erstellen</a
 				>
@@ -19,7 +19,7 @@
 			<a class="card-menu-option" href="/welcher-energieausweis"
 				>Welcher Energieausweis ?</a
 			>
-			<div class="card-menu-option dropdown">
+			<div class="card-menu-option dropdown dropdown-right dropdown-hover">
 				<a href="/energieausweis-erstellen/verbrauchsausweis-wohnen">Verbrauchsausweis</a>
 				<div class="dropdown-content">
 					<a
@@ -56,7 +56,7 @@
 					>
 				</div>
 			</div>
-			<div class="card-menu-option dropdown">
+			<div class="card-menu-option dropdown dropdown-right dropdown-hover">
 				<a href="/bedarfsausweis/">Bedarfsausweis</a>
 				<div class="dropdown-content">
 					<a href="/bedarfsausweis/bedarfsausweis-wohngebaeude"
@@ -87,7 +87,7 @@
 					>
 				</div>
 			</div>
-			<div class="card-menu-option dropdown">
+			<div class="card-menu-option dropdown dropdown-right dropdown-hover">
 				<a href="/">Energieausweis</a>
 				<div class="dropdown-content">
 					<a href="/energieausweis-pflicht"

src/components/TagInput.svelte

@@ -50,12 +50,11 @@
 </script>
 
 <div
-	class="flex flex-row gap-1 input"
-	style="padding: 0 !important;"
+	class="flex flex-row gap-1 h-10 p-0"
 >
 	{#if tags.length > 0}
 		{#each tags as tag, i}
-			<button class="rounded-lg bg-white px-1.5 border flex flex-row items-center justify-between gap-2" type="button" on:click={onTagClick(tag)}>
+			<button class="rounded-lg bg-white px-1.5 border border-gray-300 flex flex-row items-center justify-between gap-2" type="button" on:click={onTagClick(tag)}>
 				{tag}
 				{#if !disable && !readonly}
 					<span
@@ -75,7 +74,7 @@
 		on:keydown={onKeydown}
 		on:focusin={onFocusIn}
 		on:focusout={onFocusOut}
-		class="border-none h-full w-full {className}"
+		class="input input-bordered h-10 px-2 py-1.5 {className}"
 		disabled={disable}
 		readonly={readonly}
 		autocomplete="off"

src/components/UploadImages.svelte

@@ -80,7 +80,7 @@
 </script>
 
 {#if max > 1}
-	<input type="file" {name} multiple on:change={getAllImages} />
+	<input type="file" class="file-input file-input-ghost" {name} multiple on:change={getAllImages} />
 {:else}
-	<input type="file" {name} on:change={getAllImages} />
+	<input type="file" class="file-input file-input-ghost" {name} on:change={getAllImages} />
 {/if}

src/layouts/AusweisLayout.astro

@@ -172,7 +172,4 @@ const schema = JSON.stringify({
 		@apply flex flex-row gap-2;
 	}
 
-	input[type="checkbox"] {
-		width: auto;
-	}
 </style>

src/layouts/UserLayout.astro

@@ -1,5 +1,13 @@
 ---
-import UserSidebarLeft from "../components/UserSidebarLeft.astro";
+import i18next from "i18next";
+
+import "../style/global.scss";
+import "../../svelte-dialogs.config"
+import Footer from "../components/Footer.astro";
+import Header from "../components/Header.astro";
+import SidebarLeft from "../components/SidebarLeft.astro";
+import SidebarRight from "../components/SidebarRight.astro";
+import { NotificationWrapper } from "@ibcornelsen/ui";
 
 export interface Props {
 	title: string;
@@ -34,7 +42,7 @@ const schema = JSON.stringify({
 ---
 
 <!DOCTYPE html>
-<html lang="en">
+<html lang={i18next.language}>
 	<head>
 		<meta charset="UTF-8" />
 		<meta name="viewport" content="width=device-width" />
@@ -81,12 +89,47 @@ const schema = JSON.stringify({
 		</title>
 	</head>
 
-	<body>
-		<main class="grid grid-cols-[80px,1fr] h-[100vh]">
-			<UserSidebarLeft />
-			<article>
+	<body class="flex flex-col min-h-screen">
+		<Header />
+		<main
+			class="p-6 w-full"
+		>
 			<slot />
-			</article>
 		</main>
+		<Footer />
+		<NotificationWrapper client:load />
 	</body>
 </html>
+
+<style is:global>
+
+	article {
+		@apply rounded-lg w-full shadow-md border;
+	}
+
+	body {
+		min-height: 100vh;
+	}
+
+	.button {
+		@apply px-8 py-2 bg-secondary rounded-lg text-white font-medium hover:shadow-lg transition-all hover:underline active:bg-blue-900 text-center cursor-pointer;
+		color: #fff !important;
+	}
+
+	h3 {
+		@apply text-xl font-medium mt-6 mb-4;
+	}
+
+	input {
+		@apply py-1.5 px-4 w-full rounded-lg outline-none text-lg text-slate-700 border bg-gray-50 transition-colors;
+	}
+
+	input:hover,
+	input:focus {
+		@apply bg-gray-100;
+	}
+
+	label {
+		@apply text-base font-semibold;
+	}
+</style>

src/modules/Ausweise/VerbrauchsausweisWohnenModule.svelte

@@ -17,10 +17,11 @@
 	import { Enums } from "@ibcornelsen/database/client"
 	import { client } from "src/trpc";
 	import Overlay from "#components/Overlay.svelte";
-	import EmbeddedAuthFlowModule from "#modules/EmbeddedAuthFlowModule.svelte";
 	import AusweisGespeichertModule from "./AusweisGespeichertModule.svelte";
 	import { validateAccessTokenClient } from "src/client/lib/validateAccessToken";
 	import { UploadedGebaeudeBild, VerbrauchsausweisWohnenClient, GebaeudeClient, BenutzerClient } from "#components/Ausweis/types";
+	import { dialogs } from "svelte-dialogs";
+	import LoginDialog from "#components/LoginDialog.svelte";
 			
 	export let gebaeude: GebaeudeClient = {} as GebaeudeClient;
 	export let images: UploadedGebaeudeBild[] = [];
@@ -28,6 +29,10 @@
 	export let user: BenutzerClient = {} as BenutzerClient;
 
 	async function bilderHochladen() {
+		if (images.length == 0) {
+			return;
+		}
+
 		// Alle Bilder hochladen
 		const notification = addNotification({
 			dismissable: false,
@@ -75,12 +80,12 @@
 		// Wir prüfen also ob wir eingeloggt sind und leiten den Nutzer ggf. auf die Login Seite weiter.
 		if (!await validateAccessTokenClient()) {
 			// TOOD: Auf Dialog umstellen.
-			//await spawnLoginPrompt();
-			loginOverlayHidden = false;
-			return
-		}
+			const loggedIn = await dialogs.modal(LoginDialog);
 
-		loginOverlayHidden = true;
+			if (!loggedIn) {
+				return false;
+			}
+		}
 
 		if (ausweis.uid) {
 			// Anscheinend wurde der Ausweis bereits erstellt und hat eine UID.
@@ -138,7 +143,7 @@
 		const result = await ausweisSpeichern();
 
 		if (result === true) {
-			window.history.pushState({}, "", `/verbrauchsausweis?uid=${ausweis.uid}`);
+			window.history.pushState({}, "", `${location.pathname}?uid=${ausweis.uid}`);
 			speichernOverlayHidden = false;
 		}
 	}
@@ -173,21 +178,17 @@
 		const result = await ausweisSpeichern();
 
 		if (result === true) {
+			// Falls der Nutzer zurück navigiert, sollte er wieder auf seinen Vorgang kommen.
+			// Sonst müsste er alles neu eingeben...
+			window.history.pushState({}, "", `${location.pathname}?uid=${ausweis.uid}`);
 			window.location.href = `/kundendaten?uid=${ausweis.uid}`;
 		}
 	}
 
 	let waitOverlayHidden = true;
-	let loginOverlayHidden = true;
 	let speichernOverlayHidden = true;
 </script>
 
-<Overlay bind:hidden={loginOverlayHidden}>
-	<div class="bg-white w-full max-w-screen-sm py-8">
-		<EmbeddedAuthFlowModule onLogin={ausweisAbschicken}></EmbeddedAuthFlowModule>
-	</div>
-</Overlay>
-
 <Overlay bind:hidden={speichernOverlayHidden}>
 	<div class="bg-white w-full max-w-screen-sm py-8 px-8">
 		<AusweisGespeichertModule uid={ausweis.uid}></AusweisGespeichertModule>
@@ -207,7 +208,7 @@
 	<PerformanceScore bind:ausweis bind:gebaeude />
 </div>
 
-<form on:submit={ausweisAbschicken} name="ausweis">
+<form on:submit={ausweisAbschicken} name="ausweis" data-test="ausweis">
 	<div
 		class="bg-[rgba(252,234,187,0.2)] border-2 p-4 rounded-lg border-[#ffcc03]"
 	>
@@ -245,7 +246,7 @@
 				</HelpLabel>
 				<div>
 					<input
-						name="adresse"
+						name="adresse" data-test="adresse"
 						type="text"
 						autocomplete="off"
 						required
@@ -261,7 +262,7 @@
 				<ZipSearch
 					bind:zip={gebaeude.plz}
 					bind:city={gebaeude.ort}
-					name="plz"
+					name="plz" data-test="plz"
 				/>
 			</div>
 
@@ -271,7 +272,7 @@
 				</HelpLabel>
 				<div>
 					<input
-						name="ort"
+						name="ort" data-test="ort"
 						readonly={true}
 						bind:value={gebaeude.ort}
 						type="text"
@@ -288,7 +289,7 @@
 				</HelpLabel>
 				<div>
 					<input
-						name="flaeche"
+						name="flaeche" data-test="flaeche"
 						maxlength="4"
 						type="number"
 						required
@@ -305,7 +306,7 @@
 				<Label>Keller *</Label>
 				<div>
 					<select
-						name="keller"
+						name="keller" data-test="keller"
 						required
 						bind:value={gebaeude.keller}
 					>
@@ -321,7 +322,7 @@
 			<div class="form-group col-md-4">
 				<Label>Dachgeschoss *</Label>
 				<div>
-					<select name="dachgeschoss" bind:value={gebaeude.dachgeschoss} required>
+					<select name="dachgeschoss" data-test="dachgeschoss" bind:value={gebaeude.dachgeschoss} required>
 						<option disabled>Bitte auswählen</option>
 						<option value={Enums.Heizungsstatus.NICHT_VORHANDEN}>nicht vorhanden</option>
 						<option value={Enums.Heizungsstatus.UNBEHEIZT}>unbeheizt</option>
@@ -350,21 +351,23 @@
 			<!-- Anteil WW enthalten -->
 			<div class="flex flex-col">
 				<div class="flex flex-row gap-4 items-center">
-					<Label>Warmwasser im Verbrauch enthalten</Label>
 					<input
 							type="checkbox"
-							name="warmwasser_enthalten"
+							class="checkbox"
+							name="warmwasser_enthalten" data-test="warmwasser_enthalten"
 							bind:checked={ausweis.warmwasser_enthalten}
 						/>
+						<Label>Warmwasser im Verbrauch enthalten</Label>
 				</div>
 				<div class="flex flex-row gap-4 items-center">
-					<Label>Anteil bekannt</Label>
 					<input
 							type="checkbox"
-							name="warmwasser_anteil_bekannt"
+							class="checkbox"
+							name="warmwasser_anteil_bekannt" data-test="warmwasser_anteil_bekannt"
 							bind:checked={ausweis.warmwasser_anteil_bekannt}
 							disabled={!ausweis.warmwasser_enthalten}
 						/>
+						<Label>Anteil bekannt</Label>
 				</div>
 			</div>
 
@@ -376,11 +379,11 @@
 				</HelpLabel>
 
 				<input
-					name="anteil_warmwasser_1"
+					name="anteil_warmwasser_1" data-test="anteil_warmwasser_1"
 					maxlength="2"
 					type="number"
 					bind:value={ausweis.anteil_warmwasser_1}
-					disabled={!ausweis.warmwasser_anteil_bekannt}
+					disabled={!ausweis.warmwasser_anteil_bekannt || !ausweis.warmwasser_enthalten}
 					autocomplete="off"
 				/>
 			</div>
@@ -392,13 +395,13 @@
 					ein Anteil von 18% angenommen.
 				</HelpLabel>
 				<input
-					name="anteil_warmwasser_2"
+					name="anteil_warmwasser_2" data-test="anteil_warmwasser_2"
 					maxlength="3"
 					type="number"
 					autocomplete="off"
 					bind:value={ausweis.anteil_warmwasser_2}
 					disabled={!ausweis.zusaetzliche_heizquelle ||
-						!ausweis.warmwasser_anteil_bekannt}
+						!ausweis.warmwasser_anteil_bekannt || !ausweis.warmwasser_enthalten}
 				/>
 			</div>
 
@@ -415,7 +418,7 @@
 					<label class="checkbox-inline"
 						><input
 							type="checkbox"
-							name="alternative_heizung"
+							name="alternative_heizung" data-test="alternative_heizung"
 							bind:checked={ausweis.alternative_heizung}
 							value="Heizung"
 						/>Heizung</label
@@ -423,7 +426,7 @@
 					<label class="checkbox-inline"
 						><input
 							type="checkbox"
-							name="alternative_warmwasser"
+							name="alternative_warmwasser" data-test="alternative_warmwasser"
 							bind:checked={ausweis.alternative_warmwasser}
 							value="Warmwasser"
 						/>Warmwasser</label
@@ -431,7 +434,7 @@
 					<label class="checkbox-inline"
 						><input
 							type="checkbox"
-							name="alternative_lueftung"
+							name="alternative_lueftung" data-test="alternative_lueftung"
 							bind:checked={ausweis.alternative_lueftung}
 							value="Lüftung"
 						/>Lüftung</label
@@ -439,7 +442,7 @@
 					<label class="checkbox-inline"
 						><input
 							type="checkbox"
-							name="alternative_kuehlung"
+							name="alternative_kuehlung" data-test="alternative_kuehlung"
 							bind:checked={ausweis.alternative_kuehlung}
 							value="Kühlung"
 						/>Kühlung</label
@@ -462,7 +465,7 @@
 					Bitte wählen Sie hier den Gebäudetyp aus.
 				</HelpLabel>
 				<div>
-					<select name="gebaeudetyp" required>
+					<select name="gebaeudetyp" data-test="gebaeudetyp" required>
 						<option disabled>Bitte auswählen</option>
 						<option value="Einfamilienhaus">Einfamilienhaus</option>
 						<option value="Freistehendes Einfamilienhaus"
@@ -501,7 +504,7 @@
 					'Gewerbe'.
 				</HelpLabel>
 				<div>
-					<select name="gebaeudeteil" required>
+					<select name="gebaeudeteil" data-test="gebaeudeteil" required>
 						<option disabled>Bitte auswählen</option>
 						<option value="Gesamtgebäude">Gesamtgebäude</option>
 						<option value="Wohnen">Wohnen</option>
@@ -517,7 +520,7 @@
 				</HelpLabel>
 				<div>
 					<select
-						name="lueftung"
+						name="lueftung" data-test="lueftung"
 						required
 						bind:value={gebaeude.lueftung}
 					>
@@ -542,7 +545,7 @@
 				</HelpLabel>
 				<div>
 					<select
-						name="kuehlung"
+						name="kuehlung" data-test="kuehlung"
 						required
 						bind:value={gebaeude.kuehlung}
 					>
@@ -562,7 +565,7 @@
 				</HelpLabel>
 				<div>
 					<input
-						name="leerstand"
+						name="leerstand" data-test="leerstand"
 						maxlength="2"
 						type="number"
 						bind:value={gebaeude.leerstand}
@@ -653,6 +656,14 @@
 </RawNotificationWrapper>
 
 <style>
+	:global(input[type="number"]), :global(input[type="text"]) {
+		@apply input input-bordered py-1.5 px-2 h-auto;
+	}
+
+	:global(input[type="number"]:disabled) {
+		@apply bg-gray-200 border border-gray-300;
+	}
+	
 	:global(.linked) {
 		@apply border-2 border-red-400;
 	}

src/modules/EmbeddedLoginModule.svelte

@@ -26,7 +26,7 @@
 </script>
 
 <form style="width:50%;margin: 0 auto" on:submit={login} name="login">
-	<h1>Login</h1>
+	<h1 class="text-2xl font-semibold mb-6">Einloggen</h1>
 	<div class="flex flex-col gap-4">
 		<div>
 			<h4>Email</h4>

src/modules/UserModule.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { BenutzerClient } from "#components/Ausweis/types";
+	import { Enums } from "@ibcornelsen/database/client";
+
+	export let user: BenutzerClient;
+</script>
+
+<div class="flex flex-row justify-between">
+	<div>
+		<h1 class="text-4xl">Willkommen zurück <strong>{user.email}</strong></h1>
+	</div>
+	<div class="flex flex-col gap-2">
+		<button class="button">Account Details Ändern</button>
+		<button class="button">Ausloggen</button>
+		{#if user.rolle === Enums.BenutzerRolle.ADMIN}
+			<button class="button">Impersonate User</button>
+			<button class="button">Dashboard</button>
+			<button class="button">Ausweise Prüfen</button>
+			<button class="button">Angebotsanfragen einsehen</button>
+		{/if}
+	</div>
+</div>

src/pages/user/index.astro

@@ -1,12 +1,18 @@
 ---
 import UserLayout from "#layouts/UserLayout.astro";
+import { API_UID_COOKIE_NAME } from "#lib/constants";
+import UserModule from "#modules/UserModule.svelte";
+import { prisma } from "@ibcornelsen/database/server";
 
+const uid = Astro.cookies.get(API_UID_COOKIE_NAME).value
+
+const user = await prisma.benutzer.findUnique({
+	where: {
+		uid
+	}
+})
 ---
 
 <UserLayout title="Dashboard">
-	<h1>Willkommen zurück</h1>
-
-	<h2>Ihre Ausweise</h2>
-	<div class="grid grid-flow-row grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
-	</div>
+	<UserModule user={user}></UserModule>
 </UserLayout>

src/style/global.scss

@@ -39,3 +39,7 @@ article a {
 article select {
 	@apply rounded-lg px-2 py-1.5 outline-none;
 }
+
+.checkbox {
+	@apply h-5 w-4 checkbox-secondary;
+}

tailwind.config.cjs

@@ -1,9 +1,10 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
 	content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}", "./node_modules/@ibcornelsen/ui/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
-	theme: {
-		extend: {
-			colors: {
+	darkMode: "class",
+	plugins: [require("daisyui")],
+	daisyui: {
+		themes: [{light: {
 			primary: "rgb(255, 125, 38)",
 				secondary: "rgb(68, 79, 148)",
 				"gray-primary": "rgb(146, 151, 153)",
@@ -11,10 +12,17 @@ module.exports = {
 				"status-error": "red",
 				"status-success": "green",
 				"pdf-yellow-bright": "#f3cb00",
-				"pdf-yellow-light": "#fff6ca"
-			},
-		},
-	},
-	darkMode: "class",
-	plugins: [],
+				"pdf-yellow-light": "#fff6ca",
+				neutral: "#000",
+				"neutral-content": "#fff",
+				"base-content": "#000000"
+		}}],
+		darkTheme: "dark", // name of one of the included themes for dark mode
+		base: true, // applies background color and foreground color for root element by default
+		styled: true, // include daisyUI colors and design decisions for all components
+		utils: true, // adds responsive and modifier utility classes
+		prefix: "", // prefix for daisyUI classnames (components, modifiers and responsive class names. Not colors)
+		logs: true, // Shows info about daisyUI version and used config in the console when building your CSS
+		themeRoot: ":root", // The element that receives theme color CSS variables
+	}
 };