From 3f4c77ef3903066e848b35a9e63f8cacc702e276 Mon Sep 17 00:00:00 2001 From: Nicolas Date: Sun, 2 Mar 2025 12:52:03 +0100 Subject: [PATCH] Dashboard Design continue --- apps/hub/app/(app)/_components/Events.tsx | 56 +++++ apps/hub/app/(app)/_components/Header.tsx | 2 +- apps/hub/app/(app)/_components/Logbook.tsx | 66 +++++ .../(app)/_components/StatsClientWrapper.tsx | 25 ++ apps/hub/app/(app)/_components/stats.tsx | 226 +++++++++--------- apps/hub/app/(app)/page.tsx | 58 +++-- apps/hub/app/_components/Nav.tsx | 20 +- 7 files changed, 315 insertions(+), 138 deletions(-) create mode 100644 apps/hub/app/(app)/_components/Events.tsx create mode 100644 apps/hub/app/(app)/_components/Logbook.tsx create mode 100644 apps/hub/app/(app)/_components/StatsClientWrapper.tsx diff --git a/apps/hub/app/(app)/_components/Events.tsx b/apps/hub/app/(app)/_components/Events.tsx new file mode 100644 index 00000000..2fcc767f --- /dev/null +++ b/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 ( +
+ {events.map((event) => { + return ( + + ); + })} +
+ ); +}; diff --git a/apps/hub/app/(app)/_components/Header.tsx b/apps/hub/app/(app)/_components/Header.tsx index 8a9bfddd..d914c62c 100644 --- a/apps/hub/app/(app)/_components/Header.tsx +++ b/apps/hub/app/(app)/_components/Header.tsx @@ -6,7 +6,7 @@ interface HeaderProps { handleCheckboxChange: (event: React.ChangeEvent) => void; } -export const Header = ({ isChecked, handleCheckboxChange }: HeaderProps) => { +export default ({ isChecked, handleCheckboxChange }: HeaderProps) => { const session = useSession(); return (
diff --git a/apps/hub/app/(app)/_components/Logbook.tsx b/apps/hub/app/(app)/_components/Logbook.tsx new file mode 100644 index 00000000..899f32c3 --- /dev/null +++ b/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 ( + <> + + + ); +}; diff --git a/apps/hub/app/(app)/_components/StatsClientWrapper.tsx b/apps/hub/app/(app)/_components/StatsClientWrapper.tsx new file mode 100644 index 00000000..6a2385b9 --- /dev/null +++ b/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) => { + setIsChecked(event.target.checked); + }; + + return ( + <> +
+
+ +
+ + ); +}; diff --git a/apps/hub/app/(app)/_components/stats.tsx b/apps/hub/app/(app)/_components/stats.tsx index b5c6ad2e..b43d4da9 100644 --- a/apps/hub/app/(app)/_components/stats.tsx +++ b/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 ? : ; }; export const PilotStats = (): JSX.Element => { - return ( -
-
-
- - - -
-
Einsätze geflogen
-
127
-
Du bist damit unter den top 5%!
-
+ return ( +
+
+
+ + + +
+
Einsätze geflogen
+
127
+
Du bist damit unter den top 5%!
+
-
-
- - - -
-
Pilot Login Zeit
-
35h 12m
-
Mehr als 58% aller anderen User!
-
+
+
+ + + +
+
Pilot Login Zeit
+
35h 12m
+
Mehr als 58% aller anderen User!
+
-
-
- -
-
Christoph 31
-
- War bisher dein Rettungsmittel der Wahl -
-
- 87 Stationen warten noch auf dich! -
-
-
- ); +
+
+ +
+
Christoph 31
+
+ War bisher dein Rettungsmittel der Wahl +
+
+ 87 Stationen warten noch auf dich! +
+
+
+ ); }; export const DispoStats = (): JSX.Element => { - return ( -
-
-
- - - -
-
Einsätze disponiert
-
578
-
Du bist damit unter den top 9%!
-
+ return ( +
+
+
+ + + +
+
Einsätze disponiert
+
578
+
Du bist damit unter den top 9%!
+
-
-
- - - -
-
Disponent Login Zeit
-
53h 12m
-
Mehr als 69% aller anderen User!
-
+
+
+ + + +
+
Disponent Login Zeit
+
53h 12m
+
Mehr als 69% aller anderen User!
+
-
-
- -
-
Christoph Berlin
-
Wurde von dir am meisten Disponiert
-
- 43 Stationen warten auf deine Einsätze! -
-
-
- ); +
+
+ +
+
Christoph Berlin
+
Wurde von dir am meisten Disponiert
+
+ 43 Stationen warten auf deine Einsätze! +
+
+
+ ); }; diff --git a/apps/hub/app/(app)/page.tsx b/apps/hub/app/(app)/page.tsx index 9573b411..26404e00 100644 --- a/apps/hub/app/(app)/page.tsx +++ b/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) => { - setIsChecked(event.target.checked); - }; - return (
-
-
- + + +
+
+
+

+ + Logbook + + + Zum vollständigen Logbook + +

+ +
+
+
+
+

+ + Verdiente Abzeichen + +

+ Badges +
+
+ +
+

+ Laufende Events & Kurse +

+
+
); } diff --git a/apps/hub/app/_components/Nav.tsx b/apps/hub/app/_components/Nav.tsx index d9cbbbb5..91a525d0 100644 --- a/apps/hub/app/_components/Nav.tsx +++ b/apps/hub/app/_components/Nav.tsx @@ -1,10 +1,10 @@ import { HomeIcon, - PersonIcon, GearIcon, ExitIcon, LockClosedIcon, RocketIcon, + ReaderIcon, } from "@radix-ui/react-icons"; import Link from "next/link"; @@ -22,6 +22,18 @@ export const VerticalNav = () => { Events & Kurse +
  • + + + Logbook + +
    • +
  • + + + Einstellungen + +
  • @@ -41,12 +53,6 @@ export const VerticalNav = () => {
    • -
  • - - - Einstellungen - -
    • ); };