Dashboard Design continue

apps/hub/app/(app)/_components/Events.tsx

@@ -0,0 +1,56 @@
+import { getServerSession } from "../../api/auth/[...nextauth]/auth";
+import { PrismaClient } from "@repo/db";
+import { KursItem } from "../events/_components/item";
+
+export default async () => {
+	const prisma = new PrismaClient();
+	const session = await getServerSession();
+	if (!session) return null;
+	const user = await prisma.user.findUnique({
+		where: {
+			id: session.user.id,
+		},
+	});
+	if (!user) return null;
+
+	const events = await prisma.event.findMany({
+		include: {
+			appointments: {
+				where: {
+					appointmentDate: {
+						gte: new Date(),
+					},
+				},
+			},
+			participants: {
+				where: {
+					userId: user.id,
+				},
+			},
+		},
+	});
+	const userAppointments = await prisma.eventAppointment.findMany({
+		where: {
+			Participants: {
+				some: {
+					userId: user.id,
+				},
+			},
+		},
+	});
+
+	return (
+		<div className="grid grid-cols-6 gap-4">
+			{events.map((event) => {
+				return (
+					<KursItem
+						selectedAppointments={userAppointments}
+						user={user}
+						event={event}
+						key={event.id}
+					/>
+				);
+			})}
+		</div>
+	);
+};

apps/hub/app/(app)/_components/Header.tsx

@@ -6,7 +6,7 @@ interface HeaderProps {
 	handleCheckboxChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
 }
 
-export const Header = ({ isChecked, handleCheckboxChange }: HeaderProps) => {
+export default ({ isChecked, handleCheckboxChange }: HeaderProps) => {
 	const session = useSession();
 	return (
 		<header className="flex justify-between items-center p-4">

apps/hub/app/(app)/_components/Logbook.tsx

@@ -0,0 +1,66 @@
+import SortableTable from "../../_components/Table";
+
+export default async () => {
+	const columns = [
+		{
+			header: "Station",
+			accessorKey: "publicId",
+		},
+		{
+			header: "Einsatz Start",
+			accessorKey: "firstname",
+		},
+		{
+			header: "Einsatz Ende",
+			accessorKey: "lastname",
+		},
+		{
+			header: "Flugzeit",
+			accessorKey: "email",
+		},
+	];
+
+	const data: any[] = [
+		{
+			publicId: "Station 1",
+			firstname: "01.01.2021 12:00",
+			lastname: "01.01.2021 13:04",
+			email: "01h 04m",
+		},
+		{
+			publicId: "Station 1",
+			firstname: "01.01.2021 12:00",
+			lastname: "01.01.2021 13:04",
+			email: "01h 04m",
+		},
+		{
+			publicId: "Station 1",
+			firstname: "01.01.2021 12:00",
+			lastname: "01.01.2021 13:04",
+			email: "01h 04m",
+		},
+		{
+			publicId: "Station 1",
+			firstname: "01.01.2021 12:00",
+			lastname: "01.01.2021 13:04",
+			email: "01h 04m",
+		},
+		{
+			publicId: "Station 1",
+			firstname: "01.01.2021 12:00",
+			lastname: "01.01.2021 13:04",
+			email: "01h 04m",
+		},
+	];
+
+	return (
+		<>
+			<SortableTable
+				data={data}
+				columns={columns}
+				showEditButton={false} // Set to true if you want to show edit buttons
+				prismaModel="user" // Pass the prisma model if needed
+			/>
+		</>
+	);
+};

apps/hub/app/(app)/_components/StatsClientWrapper.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import { useState } from "react";
+import Header from "./Header";
+import Stats from "./stats";
+
+export default () => {
+	const [isChecked, setIsChecked] = useState(true);
+
+	const handleCheckboxChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+		setIsChecked(event.target.checked);
+	};
+
+	return (
+		<>
+			<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} />
+			</div>
+		</>
+	);
+};

apps/hub/app/(app)/_components/stats.tsx

@@ -1,129 +1,129 @@
 import { PlaneIcon } from "lucide-react";
 
 interface StatsProps {
-  isChecked: boolean;
+	isChecked: boolean;
 }
 
-export const Stats = ({ isChecked }: StatsProps) => {
-  return isChecked ? PilotStats() : DispoStats();
+export default ({ isChecked }: StatsProps) => {
+	return isChecked ? <PilotStats /> : <DispoStats />;
 };
 
 export const PilotStats = (): JSX.Element => {
-  return (
-    <div className="stats shadow">
-      <div className="stat">
-        <div className="stat-figure text-primary">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 24 24"
-            className="inline-block h-8 w-8 stroke-current"
-          >
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth="2"
-              d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
-            ></path>
-          </svg>
-        </div>
-        <div className="stat-title">Einsätze geflogen</div>
-        <div className="stat-value text-primary">127</div>
-        <div className="stat-desc">Du bist damit unter den top 5%!</div>
-      </div>
+	return (
+		<div className="stats shadow">
+			<div className="stat">
+				<div className="stat-figure text-primary">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						fill="none"
+						viewBox="0 0 24 24"
+						className="inline-block h-8 w-8 stroke-current"
+					>
+						<path
+							strokeLinecap="round"
+							strokeLinejoin="round"
+							strokeWidth="2"
+							d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
+						></path>
+					</svg>
+				</div>
+				<div className="stat-title">Einsätze geflogen</div>
+				<div className="stat-value text-primary">127</div>
+				<div className="stat-desc">Du bist damit unter den top 5%!</div>
+			</div>
 
-      <div className="stat">
-        <div className="stat-figure text-secondary">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 24 24"
-            className="inline-block h-8 w-8 stroke-current"
-          >
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth="2"
-              d="M13 10V3L4 14h7v7l9-11h-7z"
-            ></path>
-          </svg>
-        </div>
-        <div className="stat-title">Pilot Login Zeit</div>
-        <div className="stat-value text-secondary">35h 12m</div>
-        <div className="stat-desc">Mehr als 58% aller anderen User!</div>
-      </div>
+			<div className="stat">
+				<div className="stat-figure text-secondary">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						fill="none"
+						viewBox="0 0 24 24"
+						className="inline-block h-8 w-8 stroke-current"
+					>
+						<path
+							strokeLinecap="round"
+							strokeLinejoin="round"
+							strokeWidth="2"
+							d="M13 10V3L4 14h7v7l9-11h-7z"
+						></path>
+					</svg>
+				</div>
+				<div className="stat-title">Pilot Login Zeit</div>
+				<div className="stat-value text-secondary">35h 12m</div>
+				<div className="stat-desc">Mehr als 58% aller anderen User!</div>
+			</div>
 
-      <div className="stat">
-        <div className="stat-figure text-info">
-          <PlaneIcon className="w-8 h-8" />
-        </div>
-        <div className="stat-value text-info">Christoph 31</div>
-        <div className="stat-title">
-          War bisher dein Rettungsmittel der Wahl
-        </div>
-        <div className="stat-desc text-secondary">
-          87 Stationen warten noch auf dich!
-        </div>
-      </div>
-    </div>
-  );
+			<div className="stat">
+				<div className="stat-figure text-info">
+					<PlaneIcon className="w-8 h-8" />
+				</div>
+				<div className="stat-value text-info">Christoph 31</div>
+				<div className="stat-title">
+					War bisher dein Rettungsmittel der Wahl
+				</div>
+				<div className="stat-desc text-secondary">
+					87 Stationen warten noch auf dich!
+				</div>
+			</div>
+		</div>
+	);
 };
 
 export const DispoStats = (): JSX.Element => {
-  return (
-    <div className="stats shadow">
-      <div className="stat">
-        <div className="stat-figure text-primary">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 24 24"
-            className="inline-block h-8 w-8 stroke-current"
-          >
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth="2"
-              d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
-            ></path>
-          </svg>
-        </div>
-        <div className="stat-title">Einsätze disponiert</div>
-        <div className="stat-value text-primary">578</div>
-        <div className="stat-desc">Du bist damit unter den top 9%!</div>
-      </div>
+	return (
+		<div className="stats shadow">
+			<div className="stat">
+				<div className="stat-figure text-primary">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						fill="none"
+						viewBox="0 0 24 24"
+						className="inline-block h-8 w-8 stroke-current"
+					>
+						<path
+							strokeLinecap="round"
+							strokeLinejoin="round"
+							strokeWidth="2"
+							d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
+						></path>
+					</svg>
+				</div>
+				<div className="stat-title">Einsätze disponiert</div>
+				<div className="stat-value text-primary">578</div>
+				<div className="stat-desc">Du bist damit unter den top 9%!</div>
+			</div>
 
-      <div className="stat">
-        <div className="stat-figure text-secondary">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 24 24"
-            className="inline-block h-8 w-8 stroke-current"
-          >
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth="2"
-              d="M13 10V3L4 14h7v7l9-11h-7z"
-            ></path>
-          </svg>
-        </div>
-        <div className="stat-title">Disponent Login Zeit</div>
-        <div className="stat-value text-secondary">53h 12m</div>
-        <div className="stat-desc">Mehr als 69% aller anderen User!</div>
-      </div>
+			<div className="stat">
+				<div className="stat-figure text-secondary">
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						fill="none"
+						viewBox="0 0 24 24"
+						className="inline-block h-8 w-8 stroke-current"
+					>
+						<path
+							strokeLinecap="round"
+							strokeLinejoin="round"
+							strokeWidth="2"
+							d="M13 10V3L4 14h7v7l9-11h-7z"
+						></path>
+					</svg>
+				</div>
+				<div className="stat-title">Disponent Login Zeit</div>
+				<div className="stat-value text-secondary">53h 12m</div>
+				<div className="stat-desc">Mehr als 69% aller anderen User!</div>
+			</div>
 
-      <div className="stat">
-        <div className="stat-figure text-info">
-          <PlaneIcon className="w-8 h-8" />
-        </div>
-        <div className="stat-value text-info">Christoph Berlin</div>
-        <div className="stat-title">Wurde von dir am meisten Disponiert</div>
-        <div className="stat-desc text-secondary">
-          43 Stationen warten auf deine Einsätze!
-        </div>
-      </div>
-    </div>
-  );
+			<div className="stat">
+				<div className="stat-figure text-info">
+					<PlaneIcon className="w-8 h-8" />
+				</div>
+				<div className="stat-value text-info">Christoph Berlin</div>
+				<div className="stat-title">Wurde von dir am meisten Disponiert</div>
+				<div className="stat-desc text-secondary">
+					43 Stationen warten auf deine Einsätze!
+				</div>
+			</div>
+		</div>
+	);
 };