Dashboard Design continue

apps/hub/app/(app)/page.tsx

@@ -1,8 +1,8 @@
-"use client";
-
-import { useState } from "react";
-import { Header } from "./_components/Header";
-import { Stats } from "./_components/stats";
+import Logbook from "./_components/Logbook";
+import { ArrowRight, NotebookText, Award, RocketIcon } from "lucide-react";
+import Link from "next/link";
+import Events from "./_components/Events";
+import StatsClientWrapper from "./_components/StatsClientWrapper";
 
 /*
 ✔️ Einlog-Zeit
@@ -15,21 +15,45 @@ Aktive Events / Mandatory Events
 */
 
 export default function Home() {
-	const [isChecked, setIsChecked] = useState(true);
-
-	const handleCheckboxChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-		setIsChecked(event.target.checked);
-	};
-
 	return (
 		<div>
-			<Header
-				isChecked={isChecked}
-				handleCheckboxChange={handleCheckboxChange}
-			/>
-			<div className="card bg-base-200 shadow-xl mb-4 col-span-6 xl:col-span-3">
-				<Stats isChecked={isChecked} />
+			<StatsClientWrapper />
+
+			<div className="grid grid-cols-6 gap-4">
+				<div className="card bg-base-200 shadow-xl mb-4 col-span-6 xl:col-span-3">
+					<div className="card-body">
+						<h2 className="card-title justify-between">
+							<span className="card-title">
+								<NotebookText className="w-4 h-4" /> Logbook
+							</span>
+							<Link
+								className="badge badge-sm badge-info badge-outline"
+								href="/settings"
+							>
+								Zum vollständigen Logbook <ArrowRight className="w-4 h-4" />
+							</Link>
+						</h2>
+						<Logbook />
+					</div>
+				</div>
+				<div className="card bg-base-200 shadow-xl mb-4 col-span-6 xl:col-span-3">
+					<div className="card-body">
+						<h2 className="card-title justify-between">
+							<span className="card-title">
+								<Award className="w-4 h-4" /> Verdiente Abzeichen
+							</span>
+						</h2>
+						Badges
+					</div>
+				</div>
 			</div>
+
+			<div className="col-span-full">
+				<p className="text-xl font-semibold text-left flex items-center gap-2 mb-2 mt-5">
+					<RocketIcon className="w-4 h-4" /> Laufende Events & Kurse
+				</p>
+			</div>
+			<Events />
 		</div>
 	);
 }