PxlLoewe/var-monorepo
1
0
Fork 0
Code Issues 22 Pull Requests Actions Packages Projects Releases 2 Wiki Activity

Merge branch 'main' of https://github.com/VAR-Virtual-Air-Rescue/var-monorepo

Browse Source
This commit is contained in:
Nicolas
2025-02-28 03:13:50 +01:00
parent cda2dec67c bbcde2eb4a
commit bc06cec4d3
107 changed files with 18565 additions and 17809 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/hub/.gitignore vendored
View File

@@ -38,3 +38,5 @@ yarn-error.log*
# typescript
*.tsbuildinfo
next-env.d.ts
certificates

33
apps/hub/app/(app)/admin/event/[id]/page.tsx
View File

@@ -1,26 +1,13 @@
import { prisma } from '@repo/db';
import { Form } from '../_components/Form';
import { prisma } from "@repo/db";
import { Form } from "../_components/Form";
export default async ({ params }: { params: Promise<{ id: string }> }) => {
const { id } = await params;
const event = await prisma.event.findUnique({
where: {
id: parseInt(id),
},
});
const users = await prisma.user.findMany({
select: {
id: true,
firstname: true,
lastname: true,
publicId: true,
},
});
const appointments = await prisma.eventAppointment.findMany({
where: {
eventId: parseInt(id),
},
});
if (!event) return <div>Event not found</div>;
return <Form event={event} users={users} appointments={appointments} />;
const { id } = await params;
const event = await prisma.event.findUnique({
where: {
id: parseInt(id),
},
});
if (!event) return <div>Event not found</div>;
return <Form event={event} />;
};

531
apps/hub/app/(app)/admin/event/_components/Form.tsx
View File

@@ -1,277 +1,264 @@
'use client';
import { zodResolver } from '@hookform/resolvers/zod';
"use client";
import { zodResolver } from "@hookform/resolvers/zod";
import {
EventAppointmentOptionalDefaults,
EventAppointmentOptionalDefaultsSchema,
EventOptionalDefaults,
EventOptionalDefaultsSchema,
ParticipantOptionalDefaultsSchema,
} from '@repo/db/zod';
import { set, useForm } from 'react-hook-form';
import { BADGES, Event, EventAppointment, User } from '@repo/db';
import { Bot, Calendar, FileText, UserIcon } from 'lucide-react';
import { Input } from '../../../../_components/ui/Input';
import { useRef, useState } from 'react';
import { deleteEvent, upsertAppointment, upsertEvent } from '../action';
import { Button } from '../../../../_components/ui/Button';
import { redirect, useRouter } from 'next/navigation';
import { Switch } from '../../../../_components/ui/Switch';
EventAppointmentOptionalDefaults,
EventAppointmentOptionalDefaultsSchema,
EventOptionalDefaults,
EventOptionalDefaultsSchema,
ParticipantOptionalDefaultsSchema,
} from "@repo/db/zod";
import { set, useForm } from "react-hook-form";
import { BADGES, Event, EventAppointment, User } from "@repo/db";
import { Bot, Calendar, FileText, UserIcon } from "lucide-react";
import { Input } from "../../../../_components/ui/Input";
import { useRef, useState } from "react";
import { deleteEvent, upsertAppointment, upsertEvent } from "../action";
import { Button } from "../../../../_components/ui/Button";
import { redirect, useRouter } from "next/navigation";
import { Switch } from "../../../../_components/ui/Switch";
import {
PaginatedTable,
PaginatedTableRef,
} from '../../../../_components/PaginatedTable';
import { Select } from '../../../../_components/ui/Select';
import { useSession } from 'next-auth/react';
import { MarkdownEditor } from '../../../../_components/ui/MDEditor';
PaginatedTable,
PaginatedTableRef,
} from "../../../../_components/PaginatedTable";
import { Select } from "../../../../_components/ui/Select";
import { useSession } from "next-auth/react";
import { MarkdownEditor } from "../../../../_components/ui/MDEditor";
export const Form = ({
event,
users,
appointments = [],
}: {
event?: Event;
users: {
id: string;
firstname: string;
lastname: string;
publicId: string;
}[];
appointments?: EventAppointment[];
}) => {
const { data: session } = useSession();
const form = useForm({
resolver: zodResolver(EventOptionalDefaultsSchema),
defaultValues: event,
});
const appointmentForm = useForm<EventAppointmentOptionalDefaults>({
resolver: zodResolver(EventAppointmentOptionalDefaultsSchema),
defaultValues: {
eventId: event?.id,
presenterId: session?.user?.id,
},
});
const appointmentsTableRef = useRef<PaginatedTableRef>(null);
const [loading, setLoading] = useState(false);
const [deleteLoading, setDeleteLoading] = useState(false);
const addParticipantModal = useRef<HTMLDialogElement>(null);
return (
<>
<dialog ref={addParticipantModal} className="modal">
<div className="modal-box">
<form method="dialog">
{/* if there is a button in form, it will close the modal */}
<button className="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">
✕
</button>
</form>
<h3 className="font-bold text-lg">Termin hinzufügen</h3>
<form
onSubmit={appointmentForm.handleSubmit(async (values) => {
if (!event) return;
const createdAppointment = await upsertAppointment({
appointmentDate: values.appointmentDate,
eventId: event?.id,
presenterId: values.presenterId,
});
console.log(createdAppointment);
addParticipantModal.current?.close();
appointmentsTableRef.current?.refresh();
})}
className="flex flex-col"
>
<Input
form={appointmentForm}
label="Datum"
name="appointmentDate"
type="date"
/>
<div className="modal-action">
<Button type="submit" className="btn btn-primary">
Hinzufügen
</Button>
</div>
</form>
</div>
</dialog>
<form
onSubmit={form.handleSubmit(async (values) => {
setLoading(true);
const createdEvent = await upsertEvent(values, event?.id);
setLoading(false);
if (!event) redirect(`/admin/event`);
})}
className="grid grid-cols-6 gap-3"
>
<div className="card bg-base-200 shadow-xl col-span-2 max-xl:col-span-6">
<div className="card-body">
<h2 className="card-title">
<FileText className="w-5 h-5" /> Allgemeines
</h2>
<Input form={form} label="Name" name="name" className="input-sm" />
<MarkdownEditor form={form} name="description" />
<Input
form={form}
label="Maximale Teilnehmer (Nur für live Events)"
className="input-sm"
{...form.register('maxParticipants', {
valueAsNumber: true,
})}
/>
<Switch form={form} name="hidden" label="Versteckt" />
</div>
</div>
<div className="card bg-base-200 shadow-xl col-span-2 max-xl:col-span-6">
<div className="card-body">
<h2 className="card-title">
<Bot className="w-5 h-5" /> Automation
</h2>
<Input
form={form}
name="starterMoodleCourseId"
label="Moodle Anmelde Kurs ID"
className="input-sm"
/>
<Input
name="finisherMoodleCourseId"
form={form}
label="Moodle Abschluss Kurs ID"
className="input-sm"
/>
<Select
isMulti
form={form}
name="finishedBadges"
label="Badges bei Abschluss"
options={Object.entries(BADGES).map(([key, value]) => ({
label: value,
value: key,
}))}
/>
<Select
isMulti
form={form}
name="requiredBadges"
label="Benötigte Badges"
options={Object.entries(BADGES).map(([key, value]) => ({
label: value,
value: key,
}))}
/>
<Switch
form={form}
name="hasPresenceEvents"
label="Hat Live Event"
/>
</div>
</div>
<div className="card bg-base-200 shadow-xl col-span-2 max-xl:col-span-6">
<div className="card-body">
<div className="flex justify-between">
<h2 className="card-title">
<Calendar className="w-5 h-5" /> Termine
</h2>
{event && (
<button
className="btn btn-primary btn-outline"
onClick={() => addParticipantModal.current?.showModal()}
>
Hinzufügen
</button>
)}
</div>
export const Form = ({ event }: { event?: Event }) => {
const { data: session } = useSession();
const form = useForm({
resolver: zodResolver(EventOptionalDefaultsSchema),
defaultValues: event,
});
const appointmentForm = useForm<EventAppointmentOptionalDefaults>({
resolver: zodResolver(EventAppointmentOptionalDefaultsSchema),
defaultValues: {
eventId: event?.id,
presenterId: session?.user?.id,
},
});
const appointmentsTableRef = useRef<PaginatedTableRef>(null);
const [loading, setLoading] = useState(false);
const [deleteLoading, setDeleteLoading] = useState(false);
const addParticipantModal = useRef<HTMLDialogElement>(null);
return (
<>
<dialog ref={addParticipantModal} className="modal">
<div className="modal-box">
<form method="dialog">
{/* if there is a button in form, it will close the modal */}
<button className="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">
✕
</button>
</form>
<h3 className="font-bold text-lg">Termin hinzufügen</h3>
<form
onSubmit={appointmentForm.handleSubmit(async (values) => {
if (!event) return;
const createdAppointment = await upsertAppointment({
appointmentDate: values.appointmentDate,
eventId: event?.id,
presenterId: values.presenterId,
});
console.log(createdAppointment);
addParticipantModal.current?.close();
appointmentsTableRef.current?.refresh();
})}
className="flex flex-col"
>
<Input
form={appointmentForm}
label="Datum"
name="appointmentDate"
type="date"
/>
<div className="modal-action">
<Button type="submit" className="btn btn-primary">
Hinzufügen
</Button>
</div>
</form>
</div>
</dialog>
<form
onSubmit={form.handleSubmit(async (values) => {
setLoading(true);
const createdEvent = await upsertEvent(values, event?.id);
setLoading(false);
if (!event) redirect(`/admin/event`);
})}
className="grid grid-cols-6 gap-3"
>
<div className="card bg-base-200 shadow-xl col-span-3 max-xl:col-span-6">
<div className="card-body">
<h2 className="card-title">
<FileText className="w-5 h-5" /> Allgemeines
</h2>
<Input form={form} label="Name" name="name" className="input-sm" />
<MarkdownEditor form={form} name="description" />
<Input
form={form}
label="Maximale Teilnehmer (Nur für live Events)"
className="input-sm"
{...form.register("maxParticipants", {
valueAsNumber: true,
})}
/>
<Switch form={form} name="hidden" label="Versteckt" />
</div>
</div>
<div className="card bg-base-200 shadow-xl col-span-3 max-xl:col-span-6">
<div className="card-body">
<h2 className="card-title">
<Bot className="w-5 h-5" /> Automation
</h2>
<Input
form={form}
name="starterMoodleCourseId"
label="Moodle Anmelde Kurs ID"
className="input-sm"
/>
<Input
name="finisherMoodleCourseId"
form={form}
label="Moodle Abschluss Kurs ID"
className="input-sm"
/>
<Select
isMulti
form={form}
name="finishedBadges"
label="Badges bei Abschluss"
options={Object.entries(BADGES).map(([key, value]) => ({
label: value,
value: key,
}))}
/>
<Select
isMulti
form={form}
name="requiredBadges"
label="Benötigte Badges"
options={Object.entries(BADGES).map(([key, value]) => ({
label: value,
value: key,
}))}
/>
<Switch
form={form}
name="hasPresenceEvents"
label="Hat Live Event"
/>
</div>
</div>
<div className="card bg-base-200 shadow-xl col-span-6">
<div className="card-body">
<div className="flex justify-between">
<h2 className="card-title">
<Calendar className="w-5 h-5" /> Termine
</h2>
{event && (
<button
className="btn btn-primary btn-outline"
onClick={() => addParticipantModal.current?.showModal()}
>
Hinzufügen
</button>
)}
</div>
<PaginatedTable
ref={appointmentsTableRef}
prismaModel={'eventAppointment'}
filter={{
eventId: event?.id,
}}
include={{
Presenter: true,
Participants: true,
}}
columns={[
{
header: 'Datum',
accessorKey: 'appointmentDate',
accessorFn: (date) =>
new Date(date.appointmentDate).toLocaleDateString(),
},
{
header: 'Presenter',
accessorKey: 'presenter',
cell: ({ row }) => (
<div className="flex items-center">
<span className="ml-2">
{(row.original as any).Presenter.firstname}{' '}
{(row.original as any).Presenter.lastname}
</span>
</div>
),
},
{
header: 'Teilnehmer',
accessorKey: 'Participants',
cell: ({ row }) => (
<div className="flex items-center">
<UserIcon className="w-5 h-5" />
<span className="ml-2">
{row.original.Participants.length}
</span>
</div>
),
},
{
header: 'Aktionen',
cell: ({ row }) => {
return (
<div className="flex gap-2">
<button
onSubmit={() => false}
type="button"
onClick={() => {
console.log(row.original);
// TODO: open modal to edit appointment
}}
className="btn btn-sm btn-outline"
>
Bearbeiten
</button>
</div>
);
},
},
]}
/>
</div>
</div>
<div className="card bg-base-200 shadow-xl col-span-6">
<div className="card-body ">
<div className="flex w-full gap-4">
<Button
isLoading={loading}
type="submit"
className="btn btn-primary flex-1"
>
Speichern
</Button>
{event && (
<Button
isLoading={deleteLoading}
onClick={async () => {
setDeleteLoading(true);
await deleteEvent(event.id);
redirect('/admin/event');
}}
className="btn btn-error"
>
Löschen
</Button>
)}
</div>
</div>
</div>
</form>
</>
);
<PaginatedTable
ref={appointmentsTableRef}
prismaModel={"eventAppointment"}
filter={{
eventId: event?.id,
}}
include={{
Presenter: true,
Participants: true,
}}
columns={[
{
header: "Datum",
accessorKey: "appointmentDate",
accessorFn: (date) =>
new Date(date.appointmentDate).toLocaleDateString(),
},
{
header: "Presenter",
accessorKey: "presenter",
cell: ({ row }) => (
<div className="flex items-center">
<span className="ml-2">
{(row.original as any).Presenter.firstname}{" "}
{(row.original as any).Presenter.lastname}
</span>
</div>
),
},
{
header: "Teilnehmer",
accessorKey: "Participants",
cell: ({ row }) => (
<div className="flex items-center">
<UserIcon className="w-5 h-5" />
<span className="ml-2">
{row.original.Participants.length}
</span>
</div>
),
},
{
header: "Aktionen",
cell: ({ row }) => {
return (
<div className="flex gap-2">
<button
onSubmit={() => false}
type="button"
onClick={() => {
console.log(row.original);
// TODO: open modal to edit appointment
}}
className="btn btn-sm btn-outline"
>
Bearbeiten
</button>
</div>
);
},
},
]}
/>
</div>
</div>
<div className="card bg-base-200 shadow-xl col-span-6">
<div className="card-body ">
<div className="flex w-full gap-4">
<Button
isLoading={loading}
type="submit"
className="btn btn-primary flex-1"
>
Speichern
</Button>
{event && (
<Button
isLoading={deleteLoading}
onClick={async () => {
setDeleteLoading(true);
await deleteEvent(event.id);
redirect("/admin/event");
}}
className="btn btn-error"
>
Löschen
</Button>
)}
</div>
</div>
</div>
</form>
</>
);
};

14
apps/hub/app/(app)/admin/event/new/page.tsx
View File

@@ -1,14 +1,6 @@
import { prisma } from '@repo/db';
import { Form } from '../_components/Form';
import { prisma } from "@repo/db";
import { Form } from "../_components/Form";
export default async () => {
const users = await prisma.user.findMany({
select: {
id: true,
firstname: true,
lastname: true,
publicId: true,
},
});
return <Form users={users} />;
return <Form />;
};

481
apps/hub/app/(app)/admin/station/_components/Form.tsx
View File

@@ -1,246 +1,245 @@
'use client';
import { zodResolver } from '@hookform/resolvers/zod';
import { StationOptionalDefaultsSchema } from '@repo/db/zod';
import { set, useForm } from 'react-hook-form';
import { z } from 'zod';
import { BosUse, Country, Station } from '@repo/db';
import { FileText, LocateIcon, PlaneIcon } from 'lucide-react';
import { Input } from '../../../../_components/ui/Input';
import { useState } from 'react';
import { deleteStation, upsertStation } from '../action';
import { Button } from '../../../../_components/ui/Button';
import { redirect } from 'next/navigation';
"use client";
import { zodResolver } from "@hookform/resolvers/zod";
import { StationOptionalDefaultsSchema } from "@repo/db/zod";
import { set, useForm } from "react-hook-form";
import { z } from "zod";
import { BosUse, Country, Station } from "@repo/db";
import { FileText, LocateIcon, PlaneIcon } from "lucide-react";
import { Input } from "../../../../_components/ui/Input";
import { useState } from "react";
import { deleteStation, upsertStation } from "../action";
import { Button } from "../../../../_components/ui/Button";
import { redirect } from "next/navigation";
export const StationForm = ({ station }: { station?: Station }) => {
const form = useForm<z.infer<typeof StationOptionalDefaultsSchema>>({
resolver: zodResolver(StationOptionalDefaultsSchema),
defaultValues: station,
});
const [loading, setLoading] = useState(false);
const [deleteLoading, setDeleteLoading] = useState(false);
console.log(form.formState.errors);
return (
<>
<form
onSubmit={form.handleSubmit(async (values) => {
setLoading(true);
const createdStation = await upsertStation(values, station?.id);
setLoading(false);
if (!station) redirect(`/admin/station`);
})}
className="grid grid-cols-6 gap-3"
>
<div className="card bg-base-200 shadow-xl col-span-2 max-xl:col-span-6">
<div className="card-body">
<h2 className="card-title">
<FileText className="w-5 h-5" /> Allgemeines
</h2>
<Input
form={form}
label="BOS Rufname"
name="bosCallsign"
className="input-sm"
/>
<Input
form={form}
label="BOS Rufname (kurz)"
name="bosCallsignShort"
className="input-sm"
/>
<Input
form={form}
label="Betreiber"
name="operator"
className="input-sm"
/>
<Input
form={form}
label="ATC Rufname"
name="atcCallsign"
className="input-sm"
/>
<Input
form={form}
label="FIR (Flight Information Region)"
name="fir"
className="input-sm"
/>
<Input
form={form}
label="Leitstelle Rufname"
name="bosRadioArea"
className="input-sm"
/>
const form = useForm<z.infer<typeof StationOptionalDefaultsSchema>>({
resolver: zodResolver(StationOptionalDefaultsSchema),
defaultValues: station,
});
const [loading, setLoading] = useState(false);
const [deleteLoading, setDeleteLoading] = useState(false);
return (
<>
<form
onSubmit={form.handleSubmit(async (values) => {
setLoading(true);
const createdStation = await upsertStation(values, station?.id);
setLoading(false);
if (!station) redirect(`/admin/station`);
})}
className="grid grid-cols-6 gap-3"
>
<div className="card bg-base-200 shadow-xl col-span-2 max-xl:col-span-6">
<div className="card-body">
<h2 className="card-title">
<FileText className="w-5 h-5" /> Allgemeines
</h2>
<Input
form={form}
label="BOS Rufname"
name="bosCallsign"
className="input-sm"
/>
<Input
form={form}
label="BOS Rufname (kurz)"
name="bosCallsignShort"
className="input-sm"
/>
<Input
form={form}
label="Betreiber"
name="operator"
className="input-sm"
/>
<Input
form={form}
label="ATC Rufname"
name="atcCallsign"
className="input-sm"
/>
<Input
form={form}
label="FIR (Flight Information Region)"
name="fir"
className="input-sm"
/>
<Input
form={form}
label="Leitstelle Rufname"
name="bosRadioArea"
className="input-sm"
/>
<label className="form-control w-full">
<span className="label-text text-lg flex items-center gap-2">
BOS Nutzung
</span>
<select
className="input-sm select select-bordered select-sm"
{...form.register('bosUse')}
>
{Object.keys(BosUse).map((use) => (
<option key={use} value={use}>
{use}
</option>
))}
</select>
</label>
</div>
</div>
<div className="card bg-base-200 shadow-xl col-span-2 max-xl:col-span-6">
<div className="card-body">
<h2 className="card-title">
<LocateIcon className="w-5 h-5" /> Standort + Ausrüstung
</h2>
<label className="form-control w-full">
<span className="label-text text-lg flex items-center gap-2">
Land
</span>
<select
className="input-sm select select-bordered select-sm"
{...form.register('country', {})}
>
{Object.keys(Country).map((use) => (
<option key={use} value={use}>
{use}
</option>
))}
</select>
</label>
<Input
form={form}
label="Bundesland"
name="locationState"
className="input-sm"
/>
<Input
form={form}
label="Bundesland (kurz)"
name="locationStateShort"
className="input-sm"
/>
<span className="label-text text-lg flex items-center gap-2">
Ausgerüstet mit:
</span>
<div className="form-control">
<label className="label cursor-pointer">
<span>Winde</span>
<input
type="checkbox"
className="toggle"
{...form.register('hasWinch')}
/>
</label>
<label className="label cursor-pointer">
<span>Nachtsicht Gerät</span>
<input
type="checkbox"
className="toggle"
{...form.register('hasNvg')}
/>
</label>
<label className="label cursor-pointer">
<span>24-Stunden Einsatzfähig</span>
<input
type="checkbox"
className="toggle"
{...form.register('is24h')}
/>
</label>
<label className="label cursor-pointer">
<span>Bergetau</span>
<input
type="checkbox"
className="toggle"
{...form.register('hasRope')}
/>
</label>
</div>
<label className="form-control w-full">
<span className="label-text text-lg flex items-center gap-2">
BOS Nutzung
</span>
<select
className="input-sm select select-bordered select-sm"
{...form.register("bosUse")}
>
{Object.keys(BosUse).map((use) => (
<option key={use} value={use}>
{use}
</option>
))}
</select>
</label>
</div>
</div>
<div className="card bg-base-200 shadow-xl col-span-2 max-xl:col-span-6">
<div className="card-body">
<h2 className="card-title">
<LocateIcon className="w-5 h-5" /> Standort + Ausrüstung
</h2>
<label className="form-control w-full">
<span className="label-text text-lg flex items-center gap-2">
Land
</span>
<select
className="input-sm select select-bordered select-sm"
{...form.register("country", {})}
>
{Object.keys(Country).map((use) => (
<option key={use} value={use}>
{use}
</option>
))}
</select>
</label>
<Input
form={form}
label="Bundesland"
name="locationState"
className="input-sm"
/>
<Input
form={form}
label="Bundesland (kurz)"
name="locationStateShort"
className="input-sm"
/>
<span className="label-text text-lg flex items-center gap-2">
Ausgerüstet mit:
</span>
<div className="form-control">
<label className="label cursor-pointer">
<span>Winde</span>
<input
type="checkbox"
className="toggle"
{...form.register("hasWinch")}
/>
</label>
<label className="label cursor-pointer">
<span>Nachtsicht Gerät</span>
<input
type="checkbox"
className="toggle"
{...form.register("hasNvg")}
/>
</label>
<label className="label cursor-pointer">
<span>24-Stunden Einsatzfähig</span>
<input
type="checkbox"
className="toggle"
{...form.register("is24h")}
/>
</label>
<label className="label cursor-pointer">
<span>Bergetau</span>
<input
type="checkbox"
className="toggle"
{...form.register("hasRope")}
/>
</label>
</div>
<Input
form={form}
label="Breitengrad"
name="latitude"
className="input-sm"
formOptions={{ valueAsNumber: true }}
type="number"
step="any"
/>
<Input
form={form}
label="Längengrad"
name="longitude"
className="input-sm"
formOptions={{ valueAsNumber: true }}
type="number"
step="any"
/>
<label className="label cursor-pointer">
<span className="text-lg">Reichweiten ausblenden</span>
<input
type="checkbox"
className="toggle"
{...form.register('hideRangeRings')}
/>
</label>
</div>
</div>
<div className="card bg-base-200 shadow-xl col-span-2 max-xl:col-span-6">
<div className="card-body">
<h2 className="card-title">
<PlaneIcon className="w-5 h-5" /> Hubschrauber
</h2>
<Input
form={form}
label="Hubschrauber Typ"
name="aircraft"
className="input-sm"
/>
<Input
form={form}
formOptions={{ valueAsNumber: true }}
type="number"
label="Hubschrauber Geschwindigkeit"
className="input-sm"
name="aircraftSpeed"
/>
<Input
form={form}
label="Hubschrauber Registrierung"
name="aircraftRegistration"
className="input-sm"
/>
</div>
</div>
<div className="card bg-base-200 shadow-xl col-span-6">
<div className="card-body ">
<div className="flex w-full gap-4">
<Button
isLoading={loading}
type="submit"
className="btn btn-primary flex-1"
>
Speichern
</Button>
{station && (
<Button
isLoading={deleteLoading}
onClick={async () => {
setDeleteLoading(true);
await deleteStation(station.id);
redirect('/admin/station');
}}
className="btn btn-error"
>
Löschen
</Button>
)}
</div>
</div>
</div>
</form>
</>
);
<Input
form={form}
label="Breitengrad"
name="latitude"
className="input-sm"
formOptions={{ valueAsNumber: true }}
type="number"
step="any"
/>
<Input
form={form}
label="Längengrad"
name="longitude"
className="input-sm"
formOptions={{ valueAsNumber: true }}
type="number"
step="any"
/>
<label className="label cursor-pointer">
<span className="text-lg">Reichweiten ausblenden</span>
<input
type="checkbox"
className="toggle"
{...form.register("hideRangeRings")}
/>
</label>
</div>
</div>
<div className="card bg-base-200 shadow-xl col-span-2 max-xl:col-span-6">
<div className="card-body">
<h2 className="card-title">
<PlaneIcon className="w-5 h-5" /> Hubschrauber
</h2>
<Input
form={form}
label="Hubschrauber Typ"
name="aircraft"
className="input-sm"
/>
<Input
form={form}
formOptions={{ valueAsNumber: true }}
type="number"
label="Hubschrauber Geschwindigkeit"
className="input-sm"
name="aircraftSpeed"
/>
<Input
form={form}
label="Hubschrauber Registrierung"
name="aircraftRegistration"
className="input-sm"
/>
</div>
</div>
<div className="card bg-base-200 shadow-xl col-span-6">
<div className="card-body ">
<div className="flex w-full gap-4">
<Button
isLoading={loading}
type="submit"
className="btn btn-primary flex-1"
>
Speichern
</Button>
{station && (
<Button
isLoading={deleteLoading}
onClick={async () => {
setDeleteLoading(true);
await deleteStation(station.id);
redirect("/admin/station");
}}
className="btn btn-error"
>
Löschen
</Button>
)}
</div>
</div>
</div>
</form>
</>
);
};

36
apps/hub/app/(app)/admin/user/[id]/page.tsx
View File

@@ -1,22 +1,22 @@
import { PrismaClient } from '@repo/db';
import { PrismaClient } from "@repo/db";
export default async ({ params }: { params: Promise<{ id: string }> }) => {
const prisma = new PrismaClient();
const { id } = await params;
const prisma = new PrismaClient();
const { id } = await params;
const user = await prisma.user.findUnique({
where: {
id: id,
},
});
console.log(user);
return (
<div>
<h1>
{user?.firstname} {user?.lastname}
</h1>
<p>{user?.email}</p>
{/* TODO: Hier Nutzerdaten bearbeiten */}
</div>
);
const user = await prisma.user.findUnique({
where: {
id: id,
},
});
console.log(user);
return (
<div>
<h1>
{user?.firstname} {user?.lastname}
</h1>
<p>{user?.email}</p>
{/* TODO: Hier Nutzerdaten bearbeiten */}
</div>
);
};

202
apps/hub/app/(app)/events/_components/item.tsx
View File

@@ -1,107 +1,107 @@
'use client';
import { DrawingPinFilledIcon, EnterIcon } from '@radix-ui/react-icons';
import { Event, User } from '@repo/db';
import ModalBtn from './modalBtn';
import MDEditor from '@uiw/react-md-editor';
"use client";
import { DrawingPinFilledIcon, EnterIcon } from "@radix-ui/react-icons";
import { Event, User } from "@repo/db";
import ModalBtn from "./modalBtn";
import MDEditor from "@uiw/react-md-editor";
export const KursItem = ({ user, event }: { user: User; event: Event }) => {
return (
<div className="col-span-full">
<div className="card bg-base-200 shadow-xl mb-4">
<div className="card-body">
<h2 className="card-title">{event.name}</h2>
<div className="absolute top-0 right-0 m-4">
<span className="badge badge-info badge-outline">
Zusatzqualifikation
</span>
</div>
<div className="grid grid-cols-6 gap-4">
<div className="col-span-4">
<div className="text-left text-balance">
<MDEditor.Markdown
source={event.description}
className="whitespace-pre-wrap"
style={{
backgroundColor: 'transparent',
}}
/>
</div>
</div>
<div className="col-span-2">{event.finishedBadges}</div>
</div>
<div className="card-actions flex justify-between items-center mt-5">
<div>
<p className="text-gray-600 text-left flex items-center gap-2">
<DrawingPinFilledIcon /> <b>Teilnahmevoraussetzungen: </b>
{(!event.starterMoodleCourseId ||
!event.requiredBadges.length) &&
'Keine'}
{event.starterMoodleCourseId && (
<a className="link link-info" href="">
Moodle Kurs {event.starterMoodleCourseId}
</a>
)}
</p>
{!!event.requiredBadges.length && (
<div className="flex ml-6">
<b className="text-gray-600 text-left">Abzeichen:</b>
<div className="flex gap-2">
{event.requiredBadges.map((badge) => (
<div className="badge badge-secondary badge-outline">
{badge}
</div>
))}
</div>
</div>
)}
</div>
<ModalBtn
title={event.name}
dates={['Dienstag, 25 Februar 2025', 'Mittwoch, 26 Februar 2025']}
modalId={`${event.name}_modal.${event.id}`}
/>
</div>
</div>
</div>
</div>
);
return (
<div className="col-span-full">
<div className="card bg-base-200 shadow-xl mb-4">
<div className="card-body">
<h2 className="card-title">{event.name}</h2>
<div className="absolute top-0 right-0 m-4">
<span className="badge badge-info badge-outline">
Zusatzqualifikation
</span>
</div>
<div className="grid grid-cols-6 gap-4">
<div className="col-span-4">
<div className="text-left text-balance">
<MDEditor.Markdown
source={event.description}
className="whitespace-pre-wrap"
style={{
backgroundColor: "transparent",
}}
/>
</div>
</div>
<div className="col-span-2">{event.finishedBadges}</div>
</div>
<div className="card-actions flex justify-between items-center mt-5">
<div>
<p className="text-gray-600 text-left flex items-center gap-2">
<DrawingPinFilledIcon /> <b>Teilnahmevoraussetzungen: </b>
{(!event.starterMoodleCourseId ||
!event.requiredBadges.length) &&
"Keine"}
{event.starterMoodleCourseId && (
<a className="link link-info" href="">
Moodle Kurs {event.starterMoodleCourseId}
</a>
)}
</p>
{!!event.requiredBadges.length && (
<div className="flex ml-6">
<b className="text-gray-600 text-left">Abzeichen:</b>
<div className="flex gap-2">
{event.requiredBadges.map((badge) => (
<div className="badge badge-secondary badge-outline">
{badge}
</div>
))}
</div>
</div>
)}
</div>
<ModalBtn
title={event.name}
dates={["Dienstag, 25 Februar 2025", "Mittwoch, 26 Februar 2025"]}
modalId={`${event.name}_modal.${event.id}`}
/>
</div>
</div>
</div>
</div>
);
};
export const PilotKurs = ({ user }: { user: User }) => {
{
/* STATISCH, DA FÜR ALLE NEUEN MITGLIEDER MANDATORY, WIRD AUSGEBLENDET WENN ABSOLVIERT */
}
return (
<div className="col-span-full">
<div className="card card-bordered border-secondary bg-base-200 shadow-xl mb-4">
<div className="card-body">
<h2 className="card-title">Einsteigerkurs für Piloten</h2>
<div className="absolute top-0 right-0 m-4">
<span className="badge badge-secondary badge-outline">
Verpflichtend
</span>
</div>
<div className="grid grid-cols-6 gap-4">
<div className="col-span-4">
<p className="text-left text-balance">
In diesem Kurs lernen Piloten die Grundlagen der Luftrettung,
Einsatzverfahren, den Umgang mit dem BOS-Funk und einige
medizinische Basics. Der Kurs bietet eine ideale Vorbereitung
für alle Standard Operations bei Virtual Air Rescue.
</p>
</div>
<div className="col-span-2">Badge</div>
</div>
<div className="card-actions flex justify-between items-center mt-5">
<p className="text-gray-600 text-left flex items-center gap-2">
<DrawingPinFilledIcon /> <b>Teilnahmevoraussetzungen:</b> Keine
</p>
<button className="btn btn-outline btn-secondary btn-wide">
<EnterIcon /> Zum Moodle Kurs
</button>
</div>
</div>
</div>
</div>
);
{
/* STATISCH, DA FÜR ALLE NEUEN MITGLIEDER MANDATORY, WIRD AUSGEBLENDET WENN ABSOLVIERT */
}
return (
<div className="col-span-full">
<div className="card card-bordered border-secondary bg-base-200 shadow-xl mb-4">
<div className="card-body">
<h2 className="card-title">Einsteigerkurs für Piloten</h2>
<div className="absolute top-0 right-0 m-4">
<span className="badge badge-secondary badge-outline">
Verpflichtend
</span>
</div>
<div className="grid grid-cols-6 gap-4">
<div className="col-span-4">
<p className="text-left text-balance">
In diesem Kurs lernen Piloten die Grundlagen der Luftrettung,
Einsatzverfahren, den Umgang mit dem BOS-Funk und einige
medizinische Basics. Der Kurs bietet eine ideale Vorbereitung
für alle Standard Operations bei Virtual Air Rescue.
</p>
</div>
<div className="col-span-2">Badge</div>
</div>
<div className="card-actions flex justify-between items-center mt-5">
<p className="text-gray-600 text-left flex items-center gap-2">
<DrawingPinFilledIcon /> <b>Teilnahmevoraussetzungen:</b> Keine
</p>
<button className="btn btn-outline btn-secondary btn-wide">
<EnterIcon /> Zum Moodle Kurs
</button>
</div>
</div>
</div>
</div>
);
};

164
apps/hub/app/(app)/layout.tsx
View File

@@ -1,8 +1,8 @@
import type { Metadata } from "next";
import {
DiscordLogoIcon,
InstagramLogoIcon,
ReaderIcon,
DiscordLogoIcon,
InstagramLogoIcon,
ReaderIcon,
} from "@radix-ui/react-icons";
import { HorizontalNav, VerticalNav } from "../_components/Nav";
import { Toaster } from "react-hot-toast";
@@ -11,95 +11,95 @@ import { getServerSession } from "../api/auth/[...nextauth]/auth";
import { headers } from "next/headers";
export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
title: "Create Next App",
description: "Generated by create next app",
};
export default async function RootLayout({
children,
children,
}: Readonly<{
children: React.ReactNode;
children: React.ReactNode;
}>) {
const session = await getServerSession();
const session = await getServerSession();
if (!session) redirect(`/login`);
if (!session) redirect(`/login`);
return (
<div
className="hero min-h-screen"
style={{
backgroundImage: "url('/bg.png')",
}}
>
<div className="hero-overlay bg-opacity-30"></div>
<div>
<Toaster position="top-center" reverseOrder={false} />
</div>
{/* Card */}
<div className="hero-content text-neutral-content text-center w-full max-w-full h-full m-10">
<div className="card bg-base-100 shadow-2xl w-full min-h-full h-full max-h-[calc(100vh-13rem)] p-4 flex flex-col mr-24 ml-24">
{/* Top Navbar */}
<HorizontalNav />
return (
<div
className="hero min-h-screen"
style={{
backgroundImage: "url('/bg.png')",
}}
>
<div className="hero-overlay bg-opacity-30"></div>
<div>
<Toaster position="top-center" reverseOrder={false} />
</div>
{/* Card */}
<div className="hero-content text-neutral-content text-center w-full max-w-full h-full m-10">
<div className="card bg-base-100 shadow-2xl w-full min-h-full h-full max-h-[calc(100vh-13rem)] p-4 flex flex-col mr-24 ml-24">
{/* Top Navbar */}
<HorizontalNav />
{/* Hauptlayout: Sidebar + Content (nimmt Resthöhe ein) */}
<div className="flex grow overflow-hidden">
{/* Linke Sidebar */}
<VerticalNav />
{/* Hauptlayout: Sidebar + Content (nimmt Resthöhe ein) */}
<div className="flex grow overflow-hidden">
{/* Linke Sidebar */}
<VerticalNav />
{/* Scrollbarer Content-Bereich */}
<div className="flex-grow bg-base-100 p-6 rounded-lg shadow-md ml-4 overflow-auto h-full max-w-full w-full">
{children}
</div>
</div>
{/* Scrollbarer Content-Bereich */}
<div className="flex-grow bg-base-100 p-6 rounded-lg shadow-md ml-4 overflow-auto h-full max-w-full w-full">
{children}
</div>
</div>
{/* Footer */}
<footer className="footer flex justify-between items-center p-4 bg-base-200 mt-4 rounded-lg shadow-md">
{/* Left: Impressum & Datenschutz */}
<div className="flex gap-4 text-sm">
<a href="/impressum" className="hover:text-primary">
Impressum
</a>
<a href="/datenschutz" className="hover:text-primary">
Datenschutzerklärung
</a>
</div>
{/* Footer */}
<footer className="footer flex justify-between items-center p-4 bg-base-200 mt-4 rounded-lg shadow-md">
{/* Left: Impressum & Datenschutz */}
<div className="flex gap-4 text-sm">
<a href="/impressum" className="hover:text-primary">
Impressum
</a>
<a href="/datenschutz" className="hover:text-primary">
Datenschutzerklärung
</a>
</div>
{/* Center: Copyright */}
<p className="text-sm">
Copyright © {new Date().getFullYear()} - Virtual Air Rescue
</p>
{/* Center: Copyright */}
<p className="text-sm">
Copyright © {new Date().getFullYear()} - Virtual Air Rescue
</p>
{/* Right: Social Icons */}
<div className="flex gap-4">
<div className="tooltip tooltip-top" data-tip="Discord">
<a
href="https://discord.com"
target="_blank"
rel="noopener noreferrer"
className="hover:text-primary"
>
<DiscordLogoIcon className="w-5 h-5" />
</a>
</div>
<div className="tooltip tooltip-top" data-tip="Instagram">
<a
href="https://instagram.com"
target="_blank"
rel="noopener noreferrer"
className="hover:text-primary"
>
<InstagramLogoIcon className="w-5 h-5" />
</a>
</div>
<div className="tooltip tooltip-top" data-tip="Knowledgebase">
<a href="/docs" className="hover:text-primary">
<ReaderIcon className="w-5 h-5" />
</a>
</div>
</div>
</footer>
</div>
</div>
</div>
);
{/* Right: Social Icons */}
<div className="flex gap-4">
<div className="tooltip tooltip-top" data-tip="Discord">
<a
href="https://discord.com"
target="_blank"
rel="noopener noreferrer"
className="hover:text-primary"
>
<DiscordLogoIcon className="w-5 h-5" />
</a>
</div>
<div className="tooltip tooltip-top" data-tip="Instagram">
<a
href="https://instagram.com"
target="_blank"
rel="noopener noreferrer"
className="hover:text-primary"
>
<InstagramLogoIcon className="w-5 h-5" />
</a>
</div>
<div className="tooltip tooltip-top" data-tip="Knowledgebase">
<a href="/docs" className="hover:text-primary">
<ReaderIcon className="w-5 h-5" />
</a>
</div>
</div>
</footer>
</div>
</div>
</div>
);
}

30
apps/hub/app/(app)/page.tsx
View File

@@ -15,21 +15,21 @@ Aktive Events / Mandatory Events
*/
export default function Home() {
const [isChecked, setIsChecked] = useState(true);
const [isChecked, setIsChecked] = useState(true);
const handleCheckboxChange = (event: React.ChangeEvent<HTMLInputElement>) => {
setIsChecked(event.target.checked);
};
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} />
</div>
</div>
);
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} />
</div>
</div>
);
}

635
apps/hub/app/(app)/settings/_components/forms.tsx
View File

@@ -10,339 +10,338 @@ import { useSession } from "next-auth/react";
import { useRouter } from "next/navigation";
import { Button } from "../../../_components/ui/Button";
import {
PersonIcon,
EnvelopeClosedIcon,
BookmarkIcon,
DiscordLogoIcon,
PaperPlaneIcon,
Link2Icon,
MixerHorizontalIcon,
LockClosedIcon,
LockOpen2Icon,
LockOpen1Icon,
PersonIcon,
EnvelopeClosedIcon,
BookmarkIcon,
DiscordLogoIcon,
PaperPlaneIcon,
Link2Icon,
MixerHorizontalIcon,
LockClosedIcon,
LockOpen2Icon,
LockOpen1Icon,
} from "@radix-ui/react-icons";
export const ProfileForm = ({ user }: { user: User }) => {
const schema = z.object({
firstname: z.string().min(2).max(30),
lastname: z.string().min(2).max(30),
email: z.string().email({
message: "Bitte gebe eine gültige E-Mail Adresse ein",
}),
});
const [isLoading, setIsLoading] = useState(false);
type IFormInput = z.infer<typeof schema>;
const schema = z.object({
firstname: z.string().min(2).max(30),
lastname: z.string().min(2).max(30),
email: z.string().email({
message: "Bitte gebe eine gültige E-Mail Adresse ein",
}),
});
const [isLoading, setIsLoading] = useState(false);
type IFormInput = z.infer<typeof schema>;
const form = useForm<IFormInput>({
defaultValues: {
firstname: user.firstname,
lastname: user.lastname,
email: user.email,
},
resolver: zodResolver(schema),
});
return (
<form
className="card-body"
onSubmit={form.handleSubmit(async (values) => {
setIsLoading(true);
await updateUser(values);
form.reset(values);
setIsLoading(false);
toast.success("Deine Änderungen wurden gespeichert!", {
style: {
background: "var(--color-base-100)",
color: "var(--color-base-content)",
},
});
})}
>
<h2 className="card-title">
<MixerHorizontalIcon className="w-5 h-5" /> Persönliche Informationen
</h2>
<div className="text-left">
<label className="floating-label w-full mb-5 mt-5">
<span className="text-lg flex items-center gap-2">
<PersonIcon /> Vorname
</span>
<input
{...form.register("firstname")}
type="text"
className="input input-bordered w-full"
defaultValue={user.firstname}
placeholder="Vorname"
/>
</label>
{form.formState.errors.firstname && (
<p className="text-error">
{form.formState.errors.firstname.message}
</p>
)}
<label className="floating-label w-full mb-5">
<span className="text-lg flex items-center gap-2">
<PersonIcon /> Nachname
</span>
<input
{...form.register("lastname")}
type="text"
className="input input-bordered w-full"
defaultValue={user.lastname}
placeholder="Nachname"
/>
</label>
{form.formState.errors.lastname && (
<p className="text-error">
{form.formState.errors.lastname?.message}
</p>
)}
<label className="floating-label w-full">
<span className="text-lg flex items-center gap-2">
<EnvelopeClosedIcon /> E-Mail
</span>
<input
{...form.register("email")}
type="text"
className="input input-bordered w-full"
defaultValue={user.email}
placeholder="E-Mail"
/>
</label>
{form.formState.errors.email && (
<p className="text-error">{form.formState.errors.email?.message}</p>
)}
<div className="card-actions justify-center pt-6">
<Button
role="submit"
className="btn-sm btn-wide btn-outline btn-primary"
disabled={!form.formState.isDirty}
isLoading={isLoading}
>
<BookmarkIcon /> Speichern
</Button>
</div>
</div>
</form>
);
const form = useForm<IFormInput>({
defaultValues: {
firstname: user.firstname,
lastname: user.lastname,
email: user.email,
},
resolver: zodResolver(schema),
});
return (
<form
className="card-body"
onSubmit={form.handleSubmit(async (values) => {
setIsLoading(true);
await updateUser(values);
form.reset(values);
setIsLoading(false);
toast.success("Deine Änderungen wurden gespeichert!", {
style: {
background: "var(--color-base-100)",
color: "var(--color-base-content)",
},
});
})}
>
<h2 className="card-title">
<MixerHorizontalIcon className="w-5 h-5" /> Persönliche Informationen
</h2>
<div className="text-left">
<label className="floating-label w-full mb-5 mt-5">
<span className="text-lg flex items-center gap-2">
<PersonIcon /> Vorname
</span>
<input
{...form.register("firstname")}
type="text"
className="input input-bordered w-full"
defaultValue={user.firstname}
placeholder="Vorname"
/>
</label>
{form.formState.errors.firstname && (
<p className="text-error">
{form.formState.errors.firstname.message}
</p>
)}
<label className="floating-label w-full mb-5">
<span className="text-lg flex items-center gap-2">
<PersonIcon /> Nachname
</span>
<input
{...form.register("lastname")}
type="text"
className="input input-bordered w-full"
defaultValue={user.lastname}
placeholder="Nachname"
/>
</label>
{form.formState.errors.lastname && (
<p className="text-error">
{form.formState.errors.lastname?.message}
</p>
)}
<label className="floating-label w-full">
<span className="text-lg flex items-center gap-2">
<EnvelopeClosedIcon /> E-Mail
</span>
<input
{...form.register("email")}
type="text"
className="input input-bordered w-full"
defaultValue={user.email}
placeholder="E-Mail"
/>
</label>
{form.formState.errors.email && (
<p className="text-error">{form.formState.errors.email?.message}</p>
)}
<div className="card-actions justify-center pt-6">
<Button
role="submit"
className="btn-sm btn-wide btn-outline btn-primary"
disabled={!form.formState.isDirty}
isLoading={isLoading}
>
<BookmarkIcon /> Speichern
</Button>
</div>
</div>
</form>
);
};
export const SocialForm = ({
discordAccount,
user,
discordAccount,
user,
}: {
discordAccount?: DiscordAccount;
user: User;
discordAccount?: DiscordAccount;
user: User;
}) => {
const [isLoading, setIsLoading] = useState(false);
const [vatsimLoading, setVatsimLoading] = useState(false);
const router = useRouter();
const [isLoading, setIsLoading] = useState(false);
const [vatsimLoading, setVatsimLoading] = useState(false);
const router = useRouter();
const schema = z.object({
vatsimCid: z.number().min(1000).max(9999999),
});
const schema = z.object({
vatsimCid: z.number().min(1000).max(9999999),
});
type IFormInput = z.infer<typeof schema>;
type IFormInput = z.infer<typeof schema>;
const form = useForm<IFormInput>({
defaultValues: {
vatsimCid: user?.vatsimCid || undefined,
},
resolver: zodResolver(schema),
});
const form = useForm<IFormInput>({
defaultValues: {
vatsimCid: user?.vatsimCid || undefined,
},
resolver: zodResolver(schema),
});
if (!user) return null;
console.log("Dirty", form.formState.isDirty);
return (
<form
className="card-body"
onSubmit={form.handleSubmit(async (values) => {
form.handleSubmit(async () => {
setVatsimLoading(true);
});
await updateUser({
vatsimCid: values.vatsimCid,
});
setVatsimLoading(false);
form.reset(values);
toast.success("Deine Änderungen wurden gespeichert!", {
style: {
background: "var(--color-base-100)",
color: "var(--color-base-content)",
},
});
})}
>
<h2 className="card-title mb-5">
<Link2Icon className="w-5 h-5" /> Verbindungen & Benachrichtigungen
</h2>
<div>
<div>
{discordAccount ? (
<Button
className="btn-success btn-block btn-outline group transition-all duration-0 hover:btn-error"
isLoading={isLoading}
onClick={async () => {
setIsLoading(true);
await unlinkDiscord(user.id);
router.refresh();
setIsLoading(false);
}}
>
<DiscordLogoIcon className="w-5 h-5" />
<span className="group-hover:hidden">
Verbunden mit {discordAccount.username}
</span>
<span className="hidden group-hover:inline">
Verbindung trennen{isLoading && "..."}
</span>
</Button>
) : (
<a href={process.env.NEXT_PUBLIC_DISCORD_URL}>
<button
type="button"
className="btn btn-primary btn-block"
onSubmit={() => false}
>
<DiscordLogoIcon className="w-5 h-5" /> Mit Discord verbinden
</button>
</a>
)}
</div>
</div>
<div className="content-center">
<label className="floating-label w-full mt-5">
<span className="text-lg flex items-center gap-2">
<PaperPlaneIcon /> VATSIM-CID
</span>
<input
type="number"
className="input input-bordered w-full"
placeholder="1445241"
defaultValue={user.vatsimCid as number | undefined}
{...form.register("vatsimCid", {
valueAsNumber: true,
})}
/>
</label>
{form.formState.errors.vatsimCid && (
<p className="text-error">
{form.formState.errors.vatsimCid.message}
</p>
)}
</div>
<div className="card-actions justify-center pt-6 mt-auto">
<Button
className="btn-sm btn-wide btn-outline btn-primary"
isLoading={vatsimLoading}
disabled={!form.formState.isDirty}
role="submit"
>
<BookmarkIcon /> Speichern
</Button>
</div>
</form>
);
if (!user) return null;
return (
<form
className="card-body"
onSubmit={form.handleSubmit(async (values) => {
form.handleSubmit(async () => {
setVatsimLoading(true);
});
await updateUser({
vatsimCid: values.vatsimCid,
});
setVatsimLoading(false);
form.reset(values);
toast.success("Deine Änderungen wurden gespeichert!", {
style: {
background: "var(--color-base-100)",
color: "var(--color-base-content)",
},
});
})}
>
<h2 className="card-title mb-5">
<Link2Icon className="w-5 h-5" /> Verbindungen & Benachrichtigungen
</h2>
<div>
<div>
{discordAccount ? (
<Button
className="btn-success btn-block btn-outline group transition-all duration-0 hover:btn-error"
isLoading={isLoading}
onClick={async () => {
setIsLoading(true);
await unlinkDiscord(user.id);
router.refresh();
setIsLoading(false);
}}
>
<DiscordLogoIcon className="w-5 h-5" />
<span className="group-hover:hidden">
Verbunden mit {discordAccount.username}
</span>
<span className="hidden group-hover:inline">
Verbindung trennen{isLoading && "..."}
</span>
</Button>
) : (
<a href={process.env.NEXT_PUBLIC_DISCORD_URL}>
<button
type="button"
className="btn btn-primary btn-block"
onSubmit={() => false}
>
<DiscordLogoIcon className="w-5 h-5" /> Mit Discord verbinden
</button>
</a>
)}
</div>
</div>
<div className="content-center">
<label className="floating-label w-full mt-5">
<span className="text-lg flex items-center gap-2">
<PaperPlaneIcon /> VATSIM-CID
</span>
<input
type="number"
className="input input-bordered w-full"
placeholder="1445241"
defaultValue={user.vatsimCid as number | undefined}
{...form.register("vatsimCid", {
valueAsNumber: true,
})}
/>
</label>
{form.formState.errors.vatsimCid && (
<p className="text-error">
{form.formState.errors.vatsimCid.message}
</p>
)}
</div>
<div className="card-actions justify-center pt-6 mt-auto">
<Button
className="btn-sm btn-wide btn-outline btn-primary"
isLoading={vatsimLoading}
disabled={!form.formState.isDirty}
role="submit"
>
<BookmarkIcon /> Speichern
</Button>
</div>
</form>
);
};
export const PasswordForm = ({ user }: { user: User }) => {
const schema = z.object({
password: z.string().min(2).max(30),
newPassword: z.string().min(2).max(30),
newPasswordConfirm: z.string().min(2).max(30),
});
const [isLoading, setIsLoading] = useState(false);
type IFormInput = z.infer<typeof schema>;
const schema = z.object({
password: z.string().min(2).max(30),
newPassword: z.string().min(2).max(30),
newPasswordConfirm: z.string().min(2).max(30),
});
const [isLoading, setIsLoading] = useState(false);
type IFormInput = z.infer<typeof schema>;
const form = useForm<IFormInput>({
defaultValues: {},
resolver: zodResolver(schema),
});
return (
<form
className="card-body"
onSubmit={form.handleSubmit(async (values) => {
setIsLoading(true);
const result = await changePassword(
values.password,
values.newPassword
);
form.reset(values);
setIsLoading(false);
if (result.error) {
form.setError("password", {
type: "manual",
message: result.error,
});
} else if (result.success) {
toast.success("Dein Passwort wurde geändert!", {
style: {
background: "var(--color-base-100)",
color: "var(--color-base-content)",
},
});
}
})}
>
<h2 className="card-title">
<LockClosedIcon className="w-5 h-5" /> Password Ändern
</h2>
<div className="">
<label className="floating-label w-full mt-5 mb-5">
<span className="text-lg flex items-center gap-2">
<LockOpen2Icon /> Aktuelles Passwort
</span>
<input
{...form.register("password")}
type="text"
className="input input-bordered w-full"
defaultValue={""}
/>
</label>
{form.formState.errors.password && (
<p className="text-error">{form.formState.errors.password.message}</p>
)}
<label className="floating-label w-full mb-5">
<span className="text-lg flex items-center gap-2">
<LockOpen1Icon /> Neues Passwort
</span>
<input
{...form.register("newPassword")}
type="text"
className="input input-bordered w-full"
defaultValue={""}
/>
</label>
{form.formState.errors.newPassword && (
<p className="text-error">
{form.formState.errors.newPassword?.message}
</p>
)}
<label className="floating-label w-full">
<span className="text-lg flex items-center gap-2">
<LockOpen1Icon /> Passwort wiederholen
</span>
<input
{...form.register("newPasswordConfirm")}
type="text"
className="input input-bordered w-full"
defaultValue={""}
/>
</label>
{form.formState.errors.newPasswordConfirm && (
<p className="text-error">
{form.formState.errors.newPasswordConfirm?.message}
</p>
)}
<div className="card-actions justify-center pt-6">
<Button
role="submit"
className="btn-sm btn-wide btn-outline btn-primary"
disabled={!form.formState.isDirty}
isLoading={isLoading}
>
<BookmarkIcon /> Speichern
</Button>
</div>
</div>
</form>
);
const form = useForm<IFormInput>({
defaultValues: {},
resolver: zodResolver(schema),
});
return (
<form
className="card-body"
onSubmit={form.handleSubmit(async (values) => {
setIsLoading(true);
const result = await changePassword(
values.password,
values.newPassword,
);
form.reset(values);
setIsLoading(false);
if (result.error) {
form.setError("password", {
type: "manual",
message: result.error,
});
} else if (result.success) {
toast.success("Dein Passwort wurde geändert!", {
style: {
background: "var(--color-base-100)",
color: "var(--color-base-content)",
},
});
}
})}
>
<h2 className="card-title">
<LockClosedIcon className="w-5 h-5" /> Password Ändern
</h2>
<div className="">
<label className="floating-label w-full mt-5 mb-5">
<span className="text-lg flex items-center gap-2">
<LockOpen2Icon /> Aktuelles Passwort
</span>
<input
{...form.register("password")}
type="text"
className="input input-bordered w-full"
defaultValue={""}
/>
</label>
{form.formState.errors.password && (
<p className="text-error">{form.formState.errors.password.message}</p>
)}
<label className="floating-label w-full mb-5">
<span className="text-lg flex items-center gap-2">
<LockOpen1Icon /> Neues Passwort
</span>
<input
{...form.register("newPassword")}
type="text"
className="input input-bordered w-full"
defaultValue={""}
/>
</label>
{form.formState.errors.newPassword && (
<p className="text-error">
{form.formState.errors.newPassword?.message}
</p>
)}
<label className="floating-label w-full">
<span className="text-lg flex items-center gap-2">
<LockOpen1Icon /> Passwort wiederholen
</span>
<input
{...form.register("newPasswordConfirm")}
type="text"
className="input input-bordered w-full"
defaultValue={""}
/>
</label>
{form.formState.errors.newPasswordConfirm && (
<p className="text-error">
{form.formState.errors.newPasswordConfirm?.message}
</p>
)}
<div className="card-actions justify-center pt-6">
<Button
role="submit"
className="btn-sm btn-wide btn-outline btn-primary"
disabled={!form.formState.isDirty}
isLoading={isLoading}
>
<BookmarkIcon /> Speichern
</Button>
</div>
</div>
</form>
);
};

42
apps/hub/app/(auth)/layout.tsx
View File

@@ -1,27 +1,27 @@
import { NextPage } from 'next';
import { ReactNode } from 'react';
import { NextPage } from "next";
import { ReactNode } from "react";
const AuthLayout: NextPage<
Readonly<{
children: React.ReactNode;
}>
Readonly<{
children: React.ReactNode;
}>
> = ({ children }) => (
<div
className="hero min-h-screen"
style={{
backgroundImage:
'url(https://img.daisyui.com/images/stock/photo-1507358522600-9f71e620c44e.webp)',
}}
>
<div className="hero-overlay bg-neutral/60"></div>
<div className="hero-content text-center ">
<div className="max-w-lg">
<div className="card rounded-2xl bg-base-100 w-full min-w-[500px] shadow-2xl max-md:min-w-[400px]">
{children}
</div>
</div>
</div>
</div>
<div
className="hero min-h-screen"
style={{
backgroundImage:
"url(https://img.daisyui.com/images/stock/photo-1507358522600-9f71e620c44e.webp)",
}}
>
<div className="hero-overlay bg-neutral/60"></div>
<div className="hero-content text-center ">
<div className="max-w-lg">
<div className="card rounded-2xl bg-base-100 w-full min-w-[500px] shadow-2xl max-md:min-w-[400px]">
{children}
</div>
</div>
</div>
</div>
);
export default AuthLayout;

94
apps/hub/app/(auth)/oauth/_components/Authorize.tsx
View File

@@ -1,48 +1,54 @@
'use client';
import { redirect, useSearchParams } from 'next/navigation';
import { Service } from '../page';
import { generateToken } from './action';
import { useSession } from 'next-auth/react';
"use client";
import { redirect, useSearchParams } from "next/navigation";
import { Service } from "../page";
import { generateToken } from "./action";
import { useSession } from "next-auth/react";
export const Authorize = ({ service }: { service: Service }) => {
const searchParams = useSearchParams();
const legitimeUrl = service.approvedUrls.some((url) =>
searchParams.get('redirect_uri')?.startsWith(url)
);
const { data: session } = useSession();
console.log(session);
if (!session)
redirect('/login?redirect=' + encodeURIComponent(window.location.href));
if (!legitimeUrl)
return (
<div className="card-body">
<h1 className="text-4xl font-bold">Unerlaubter Zugriff</h1>
<p>Du greifst von einem nicht genehmigtem Server auf diese URL zu</p>
</div>
);
const searchParams = useSearchParams();
const legitimeUrl = service.approvedUrls.some((url) =>
searchParams.get("redirect_uri")?.startsWith(url),
);
const { data: session } = useSession();
if (!session)
redirect("/login?redirect=" + encodeURIComponent(window.location.href));
if (!legitimeUrl)
return (
<div className="card-body">
<h1 className="text-4xl font-bold">Unerlaubter Zugriff</h1>
<p>Du greifst von einem nicht genehmigtem Server auf diese URL zu</p>
</div>
);
return (
<form className="card-body" onSubmit={(e) => e.preventDefault()}>
<h1 className="text-4xl font-bold">Zugriff zulassen</h1>
<p>
Die Anwendung <strong>{service.name}</strong> möchte auf deine Daten
zugreifen.
</p>
<div className="space-x-4">
<button type="button" className="btn">
Verweigern
</button>
<button
type="submit"
className="btn btn-primary"
onClick={async () => {
const code = await generateToken(service);
window.location.href = `${searchParams.get('redirect_uri')}?code=${code?.accessToken}`;
}}
>
Zulassen
</button>
</div>
</form>
);
return (
<form className="card-body" onSubmit={(e) => e.preventDefault()}>
<h1 className="text-4xl font-bold">Zugriff zulassen</h1>
<p>
Die Anwendung <strong>{service.name}</strong> möchte auf deine Daten
zugreifen.
</p>
<div className="space-x-4">
<button type="button" className="btn">
Verweigern
</button>
<button
type="submit"
className="btn btn-primary"
onClick={async () => {
const code = await generateToken(service);
const url = new URL(searchParams.get("redirect_uri") as string);
url.searchParams.append("code", code?.accessToken as string);
url.searchParams.append(
"state",
searchParams.get("state") as string,
);
window.location.href = url.href;
}}
>
Zulassen
</button>
</div>
</form>
);
};

55
apps/hub/app/(auth)/oauth/page.tsx
View File

@@ -1,32 +1,45 @@
import { Authorize } from './_components/Authorize';
import { Authorize } from "./_components/Authorize";
export const services = [
{
id: '123456',
service: 'dispatch',
name: 'Leitstellendisposition',
approvedUrls: ['http://localhost:3001'],
},
{
id: '789456',
service: 'desktop',
name: 'Desktop client',
approvedUrls: ['var'],
},
{
id: "1",
service: "dispatch",
name: "Leitstellendisposition",
approvedUrls: ["http://localhost:3001"],
},
{
id: "2",
service: "desktop",
name: "Desktop client",
approvedUrls: ["var"],
},
{
id: "3",
secret: "d0f3e4e4",
service: "moodle",
name: "Moodle",
approvedUrls: [
"http://localhost:8081",
"https://moodle.virtualairrescue.com",
],
},
];
export type Service = (typeof services)[number];
export default async ({
searchParams,
searchParams,
}: {
searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
}) => {
const { service: serviceId } = await searchParams;
const service = services.find((service) => service.id === serviceId);
const { service: serviceId, client_id: clientId } = await searchParams;
if (!service) {
return <div>Service not found</div>;
}
const service = services.find(
(service) => service.id === serviceId || service.id === clientId,
);
return <Authorize service={service} />;
if (!service) {
return <div>Service not found</div>;
}
return <Authorize service={service} />;
};

14
apps/hub/app/_components/AuthSessionProvider.tsx
View File

@@ -1,12 +1,12 @@
'use client';
"use client";
import { SessionProvider } from 'next-auth/react';
import { Session } from 'next-auth';
import { SessionProvider } from "next-auth/react";
import { Session } from "next-auth";
export const NextAuthSessionProvider = ({
children,
session,
children,
session,
}: {
children: React.ReactNode;
session: Session | null;
children: React.ReactNode;
session: Session | null;
}) => <SessionProvider session={session}>{children}</SessionProvider>;

142
apps/hub/app/_components/Nav.tsx
View File

@@ -1,80 +1,80 @@
import {
HomeIcon,
PersonIcon,
GearIcon,
ExitIcon,
LockClosedIcon,
RocketIcon,
HomeIcon,
PersonIcon,
GearIcon,
ExitIcon,
LockClosedIcon,
RocketIcon,
} from "@radix-ui/react-icons";
import Link from "next/link";
export const VerticalNav = () => {
return (
<ul className="menu w-64 bg-base-300 p-4 rounded-lg shadow-md">
<li>
<Link href="/">
<HomeIcon /> Dashboard
</Link>
</li>
<li>
<Link href="/events">
<RocketIcon />
Events & Kurse
</Link>
</li>
<li>
<details open>
<summary>
<LockClosedIcon />
Admin
</summary>
<ul>
<li>
<Link href="/admin/user">Benutzer</Link>
</li>
<li>
<Link href="/admin/station">Stationen</Link>
</li>
<li>
<Link href="/admin/event">Events</Link>
</li>
</ul>
</details>
</li>
<li>
<Link href="/settings">
<GearIcon />
Einstellungen
</Link>
</li>
</ul>
);
return (
<ul className="menu w-64 bg-base-300 p-4 rounded-lg shadow-md">
<li>
<Link href="/">
<HomeIcon /> Dashboard
</Link>
</li>
<li>
<Link href="/events">
<RocketIcon />
Events & Kurse
</Link>
</li>
<li>
<details open>
<summary>
<LockClosedIcon />
Admin
</summary>
<ul>
<li>
<Link href="/admin/user">Benutzer</Link>
</li>
<li>
<Link href="/admin/station">Stationen</Link>
</li>
<li>
<Link href="/admin/event">Events</Link>
</li>
</ul>
</details>
</li>
<li>
<Link href="/settings">
<GearIcon />
Einstellungen
</Link>
</li>
</ul>
);
};
export const HorizontalNav = () => (
<div className="navbar bg-base-200 shadow-md rounded-lg mb-4">
<div className="flex items-center">
<a className="btn btn-ghost normal-case text-xl">
Virtual Air Rescue - HUB
</a>
</div>
<div className="flex items-center ml-auto">
<ul className="flex space-x-2 px-1">
<li>
<Link href="/">
<button className="btn btn-sm btn-outline btn-primary">
Zur Leitstelle
</button>
</Link>
</li>
<li>
<Link href="/logout">
<button className="btn btn-sm btn-ghost">
<ExitIcon /> Logout
</button>
</Link>
</li>
</ul>
</div>
</div>
<div className="navbar bg-base-200 shadow-md rounded-lg mb-4">
<div className="flex items-center">
<a className="btn btn-ghost normal-case text-xl">
Virtual Air Rescue - HUB
</a>
</div>
<div className="flex items-center ml-auto">
<ul className="flex space-x-2 px-1">
<li>
<Link href="/">
<button className="btn btn-sm btn-outline btn-primary">
Zur Leitstelle
</button>
</Link>
</li>
<li>
<Link href="/logout">
<button className="btn btn-sm btn-ghost">
<ExitIcon /> Logout
</button>
</Link>
</li>
</ul>
</div>
</div>
);

209
apps/hub/app/_components/PaginatedTable.tsx
View File

@@ -1,122 +1,121 @@
'use client';
"use client";
import {
useEffect,
useState,
useCallback,
Ref,
useImperativeHandle,
} from 'react';
import SortableTable, { Pagination, SortableTableProps } from './Table';
import { PrismaClient } from '@repo/db';
import { getData } from './pagiantedTableActions';
useEffect,
useState,
useCallback,
Ref,
useImperativeHandle,
} from "react";
import SortableTable, { Pagination, SortableTableProps } from "./Table";
import { PrismaClient } from "@repo/db";
import { getData } from "./pagiantedTableActions";
export interface PaginatedTableRef {
refresh: () => void;
refresh: () => void;
}
interface PaginatedTableProps<TData>
extends Omit<SortableTableProps<TData>, 'data'> {
prismaModel: keyof PrismaClient;
filter?: Record<string, any>;
rowsPerPage?: number;
showEditButton?: boolean;
searchFields?: string[];
include?: Record<string, boolean>;
leftOfSearch?: React.ReactNode;
rightOfSearch?: React.ReactNode;
ref?: Ref<PaginatedTableRef>;
extends Omit<SortableTableProps<TData>, "data"> {
prismaModel: keyof PrismaClient;
filter?: Record<string, any>;
rowsPerPage?: number;
showEditButton?: boolean;
searchFields?: string[];
include?: Record<string, boolean>;
leftOfSearch?: React.ReactNode;
rightOfSearch?: React.ReactNode;
ref?: Ref<PaginatedTableRef>;
}
export function PaginatedTable<TData>({
prismaModel,
rowsPerPage = 10,
showEditButton = false,
searchFields = [],
filter,
include,
ref,
leftOfSearch,
rightOfSearch,
...restProps
prismaModel,
rowsPerPage = 10,
showEditButton = false,
searchFields = [],
filter,
include,
ref,
leftOfSearch,
rightOfSearch,
...restProps
}: PaginatedTableProps<TData>) {
const [data, setData] = useState<TData[]>([]);
const [page, setPage] = useState(0);
const [total, setTotal] = useState(0);
const [searchTerm, setSearchTerm] = useState('');
const [debouncedSearchTerm, setDebouncedSearchTerm] = useState(searchTerm);
const [data, setData] = useState<TData[]>([]);
const [page, setPage] = useState(0);
const [total, setTotal] = useState(0);
const [searchTerm, setSearchTerm] = useState("");
const [debouncedSearchTerm, setDebouncedSearchTerm] = useState(searchTerm);
const RefreshTableData = async () => {
getData(
prismaModel,
rowsPerPage,
page * rowsPerPage,
debouncedSearchTerm,
searchFields,
filter,
include
).then((result) => {
if (result) {
setData(result.data);
setTotal(result.total);
}
});
};
const RefreshTableData = async () => {
getData(
prismaModel,
rowsPerPage,
page * rowsPerPage,
debouncedSearchTerm,
searchFields,
filter,
include,
).then((result) => {
if (result) {
setData(result.data);
setTotal(result.total);
}
});
};
useImperativeHandle(ref, () => ({
refresh: () => {
console.log('refresh');
RefreshTableData();
},
}));
useImperativeHandle(ref, () => ({
refresh: () => {
RefreshTableData();
},
}));
const debounce = (func: Function, delay: number) => {
let timer: NodeJS.Timeout;
return (...args: any[]) => {
clearTimeout(timer);
timer = setTimeout(() => func(...args), delay);
};
};
const debounce = (func: Function, delay: number) => {
let timer: NodeJS.Timeout;
return (...args: any[]) => {
clearTimeout(timer);
timer = setTimeout(() => func(...args), delay);
};
};
const handleSearchChange = useCallback(
debounce((value: string) => {
setDebouncedSearchTerm(value);
}, 500),
[]
);
const handleSearchChange = useCallback(
debounce((value: string) => {
setDebouncedSearchTerm(value);
}, 500),
[],
);
useEffect(() => {
RefreshTableData();
}, [page, debouncedSearchTerm]);
useEffect(() => {
RefreshTableData();
}, [page, debouncedSearchTerm]);
return (
<div className="space-y-4 m-4">
<div className="flex items-center gap-2">
<div className="flex-1">{leftOfSearch}</div>
{searchFields.length > 0 && (
<input
type="text"
placeholder="Suchen..."
value={searchTerm}
onChange={(e) => {
setSearchTerm(e.target.value);
handleSearchChange(e.target.value);
}}
className="input input-bordered w-full max-w-xs justify-end"
/>
)}
<div className="flex justify-center">{rightOfSearch}</div>
</div>
<SortableTable
data={data}
prismaModel={prismaModel}
showEditButton={showEditButton}
{...restProps}
/>
<Pagination
totalPages={Math.ceil(total / rowsPerPage)}
page={page}
setPage={setPage}
/>
</div>
);
return (
<div className="space-y-4 m-4">
<div className="flex items-center gap-2">
<div className="flex-1">{leftOfSearch}</div>
{searchFields.length > 0 && (
<input
type="text"
placeholder="Suchen..."
value={searchTerm}
onChange={(e) => {
setSearchTerm(e.target.value);
handleSearchChange(e.target.value);
}}
className="input input-bordered w-full max-w-xs justify-end"
/>
)}
<div className="flex justify-center">{rightOfSearch}</div>
</div>
<SortableTable
data={data}
prismaModel={prismaModel}
showEditButton={showEditButton}
{...restProps}
/>
<Pagination
totalPages={Math.ceil(total / rowsPerPage)}
page={page}
setPage={setPage}
/>
</div>
);
}

246
apps/hub/app/_components/Table.tsx
View File

@@ -1,138 +1,138 @@
'use client';
import { useState } from 'react';
"use client";
import { useState } from "react";
import {
useReactTable,
getCoreRowModel,
getSortedRowModel,
ColumnDef,
SortingState,
flexRender,
} from '@tanstack/react-table';
import { ArrowLeft, ArrowRight, ChevronDown, ChevronUp } from 'lucide-react'; // Icons for sorting
import Link from 'next/link';
import { PrismaClient } from '@repo/db';
useReactTable,
getCoreRowModel,
getSortedRowModel,
ColumnDef,
SortingState,
flexRender,
} from "@tanstack/react-table";
import { ArrowLeft, ArrowRight, ChevronDown, ChevronUp } from "lucide-react"; // Icons for sorting
import Link from "next/link";
import { PrismaClient } from "@repo/db";
export interface SortableTableProps<TData> {
data: TData[];
columns: ColumnDef<TData>[];
showEditButton?: boolean;
prismaModel?: keyof PrismaClient;
data: TData[];
columns: ColumnDef<TData>[];
showEditButton?: boolean;
prismaModel?: keyof PrismaClient;
}
export default function SortableTable<TData>({
data,
columns,
prismaModel,
showEditButton,
data,
columns,
prismaModel,
showEditButton,
}: SortableTableProps<TData>) {
const [sorting, setSorting] = useState<SortingState>([]);
const [sorting, setSorting] = useState<SortingState>([]);
const table = useReactTable({
data,
columns: showEditButton
? [
...columns,
{
header: 'Actions',
cell: ({ row }) => (
<div className="flex items-center gap-1">
<Link
href={`/admin/${prismaModel as string}/${(row.original as any).id}`}
>
<button className="btn btn-sm">Edit</button>
</Link>
</div>
),
},
]
: columns,
getCoreRowModel: getCoreRowModel(),
getSortedRowModel: getSortedRowModel(),
onSortingChange: setSorting,
state: { sorting },
});
const table = useReactTable({
data,
columns: showEditButton
? [
...columns,
{
header: "Actions",
cell: ({ row }) => (
<div className="flex items-center gap-1">
<Link
href={`/admin/${prismaModel as string}/${(row.original as any).id}`}
>
<button className="btn btn-sm">Edit</button>
</Link>
</div>
),
},
]
: columns,
getCoreRowModel: getCoreRowModel(),
getSortedRowModel: getSortedRowModel(),
onSortingChange: setSorting,
state: { sorting },
});
return (
<div className="overflow-x-auto">
<table className="table table-zebra w-full">
<thead>
{table.getHeaderGroups().map((headerGroup) => (
<tr key={headerGroup.id}>
{headerGroup.headers.map((header) => (
<th
key={header.id}
onClick={header.column.getToggleSortingHandler()}
>
<div className="flex items-center gap-1 cursor-pointer">
{flexRender(
header.column.columnDef.header,
header.getContext()
)}
{header.column.getIsSorted() === 'asc' && (
<ChevronUp size={16} />
)}
{header.column.getIsSorted() === 'desc' && (
<ChevronDown size={16} />
)}
</div>
</th>
))}
</tr>
))}
</thead>
<tbody>
{table.getRowModel().rows.map((row) => (
<tr key={row.id}>
{row.getVisibleCells().map((cell) => (
<td key={cell.id}>
{flexRender(cell.column.columnDef.cell, cell.getContext())}
</td>
))}
</tr>
))}
</tbody>
</table>
</div>
);
return (
<div className="overflow-x-auto">
<table className="table table-zebra w-full">
<thead>
{table.getHeaderGroups().map((headerGroup) => (
<tr key={headerGroup.id}>
{headerGroup.headers.map((header) => (
<th
key={header.id}
onClick={header.column.getToggleSortingHandler()}
>
<div className="flex items-center gap-1 cursor-pointer">
{flexRender(
header.column.columnDef.header,
header.getContext(),
)}
{header.column.getIsSorted() === "asc" && (
<ChevronUp size={16} />
)}
{header.column.getIsSorted() === "desc" && (
<ChevronDown size={16} />
)}
</div>
</th>
))}
</tr>
))}
</thead>
<tbody>
{table.getRowModel().rows.map((row) => (
<tr key={row.id}>
{row.getVisibleCells().map((cell) => (
<td key={cell.id}>
{flexRender(cell.column.columnDef.cell, cell.getContext())}
</td>
))}
</tr>
))}
</tbody>
</table>
</div>
);
}
export const Pagination = ({
page,
totalPages,
setPage,
page,
totalPages,
setPage,
}: {
page: number;
totalPages: number;
setPage: (page: number) => void;
page: number;
totalPages: number;
setPage: (page: number) => void;
}) => {
if (totalPages === 0) return null;
return (
<div className="join w-full justify-end">
<button
className="join-item btn"
disabled={page === 0}
onClick={() => setPage(page - 1)}
>
<ArrowLeft size={16} />
</button>
<select
className="select join-item w-16"
value={page}
onChange={(e) => setPage(Number(e.target.value))}
>
{Array.from({ length: totalPages }).map((_, i) => (
<option key={i} value={i}>
{i + 1}
</option>
))}
</select>
<button
className="join-item btn"
disabled={page === totalPages - 1}
onClick={() => page < totalPages && setPage(page + 1)}
>
<ArrowRight size={16} />
</button>
</div>
);
if (totalPages === 0) return null;
return (
<div className="join w-full justify-end">
<button
className="join-item btn"
disabled={page === 0}
onClick={() => setPage(page - 1)}
>
<ArrowLeft size={16} />
</button>
<select
className="select join-item w-16"
value={page}
onChange={(e) => setPage(Number(e.target.value))}
>
{Array.from({ length: totalPages }).map((_, i) => (
<option key={i} value={i}>
{i + 1}
</option>
))}
</select>
<button
className="join-item btn"
disabled={page === totalPages - 1}
onClick={() => page < totalPages && setPage(page + 1)}
>
<ArrowRight size={16} />
</button>
</div>
);
};

70
apps/hub/app/_components/pagiantedTableActions.ts
View File

@@ -1,47 +1,47 @@
'use server';
import { PrismaClient } from '@repo/db';
"use server";
import { PrismaClient } from "@repo/db";
const prisma = new PrismaClient();
export async function getData(
model: keyof PrismaClient,
limit: number,
offset: number,
searchTerm: string,
searchFields: string[],
filter?: Record<string, any>,
include?: Record<string, boolean>
model: keyof PrismaClient,
limit: number,
offset: number,
searchTerm: string,
searchFields: string[],
filter?: Record<string, any>,
include?: Record<string, boolean>,
) {
if (!model || !prisma[model]) {
return { data: [], total: 0 };
}
if (!model || !prisma[model]) {
return { data: [], total: 0 };
}
const formattedId = searchTerm.match(/^VAR(\d+)$/)?.[1];
const formattedId = searchTerm.match(/^VAR(\d+)$/)?.[1];
const where = searchTerm
? {
OR: [
formattedId ? { id: formattedId } : undefined,
...searchFields.map((field) => ({
[field]: { contains: searchTerm },
})),
].filter(Boolean),
...filter,
}
: { ...filter };
const where = searchTerm
? {
OR: [
formattedId ? { id: formattedId } : undefined,
...searchFields.map((field) => ({
[field]: { contains: searchTerm },
})),
].filter(Boolean),
...filter,
}
: { ...filter };
if (!prisma[model]) {
return { data: [], total: 0 };
}
if (!prisma[model]) {
return { data: [], total: 0 };
}
const data = await (prisma[model] as any).findMany({
where,
take: limit,
skip: offset,
include,
});
const data = await (prisma[model] as any).findMany({
where,
take: limit,
skip: offset,
include,
});
const total = await (prisma[model] as any).count({ where });
const total = await (prisma[model] as any).count({ where });
return { data, total };
return { data, total };
}

117
apps/hub/app/api/auth/[...nextauth]/auth.ts
View File

@@ -1,67 +1,66 @@
import {
AuthOptions,
getServerSession as getNextAuthServerSession,
} from 'next-auth';
import { PrismaAdapter } from '@next-auth/prisma-adapter';
import Credentials from 'next-auth/providers/credentials';
import { PrismaClient } from '@repo/db';
import bcrypt from 'bcryptjs';
AuthOptions,
getServerSession as getNextAuthServerSession,
} from "next-auth";
import { PrismaAdapter } from "@next-auth/prisma-adapter";
import Credentials from "next-auth/providers/credentials";
import { PrismaClient } from "@repo/db";
import bcrypt from "bcryptjs";
const prisma = new PrismaClient();
export const options: AuthOptions = {
providers: [
Credentials({
credentials: {
email: { label: 'Email', type: 'email', placeholder: 'E-Mail' },
password: { label: 'Password', type: 'password' },
},
async authorize(credentials, req) {
try {
if (!credentials) throw new Error('No credentials provided');
const user = await prisma.user.findFirstOrThrow({
where: { email: credentials.email },
});
if (bcrypt.compareSync(credentials.password, user.password)) {
console.log('User found and password correct', user);
return user;
}
return null;
} catch (error) {
return null;
}
},
}),
],
secret: process.env.NEXTAUTH_SECRET,
session: {
strategy: 'jwt',
maxAge: 30 * 24 * 60 * 60,
},
providers: [
Credentials({
credentials: {
email: { label: "Email", type: "email", placeholder: "E-Mail" },
password: { label: "Password", type: "password" },
},
async authorize(credentials, req) {
try {
if (!credentials) throw new Error("No credentials provided");
const user = await prisma.user.findFirstOrThrow({
where: { email: credentials.email },
});
if (bcrypt.compareSync(credentials.password, user.password)) {
return user;
}
return null;
} catch (error) {
return null;
}
},
}),
],
secret: process.env.NEXTAUTH_SECRET,
session: {
strategy: "jwt",
maxAge: 30 * 24 * 60 * 60,
},
adapter: PrismaAdapter(prisma as any),
callbacks: {
jwt: async ({ token, user }) => {
if (user && 'firstname' in user) {
return {
...token,
...user,
};
}
return token;
},
session: async ({ session, user, token }) => {
return {
...session,
user: token,
};
},
},
pages: {
signIn: '/login',
signOut: '/logout',
error: '/authError',
newUser: '/register',
},
adapter: PrismaAdapter(prisma as any),
callbacks: {
jwt: async ({ token, user }) => {
if (user && "firstname" in user) {
return {
...token,
...user,
};
}
return token;
},
session: async ({ session, user, token }) => {
return {
...session,
user: token,
};
},
},
pages: {
signIn: "/login",
signOut: "/logout",
error: "/authError",
newUser: "/register",
},
} satisfies AuthOptions;
export const getServerSession = async () => getNextAuthServerSession(options);

82
apps/hub/app/api/auth/accessToken/route.ts
View File

@@ -1,28 +1,60 @@
import { PrismaClient } from '@repo/db';
import { NextRequest, NextResponse } from 'next/server';
import { sign } from 'jsonwebtoken';
import { prisma, PrismaClient } from "@repo/db";
import { NextRequest, NextResponse } from "next/server";
import { sign } from "jsonwebtoken";
import { services } from "../../../(auth)/oauth/page";
export const GET = async (req: NextRequest) => {
const client = new PrismaClient();
const accessToken = req.nextUrl.searchParams.get('token');
if (!accessToken)
return new Response('No access token provided', { status: 400 });
const accessRequest = await client.oAuthToken.findFirst({
where: {
accessToken: accessToken,
},
include: {
user: true,
},
});
if (!accessRequest)
return new Response('Access token not found', { status: 404 });
export const POST = async (req: NextRequest) => {
const form = new URLSearchParams(await req.text());
const client = new PrismaClient();
const accessToken = form.get("token") || form.get("code");
const clientId = form.get("client_id");
const clientSecret = form.get("client_secret");
const jwt = sign(accessRequest.user, process.env.NEXTAUTH_SECRET as string, {
expiresIn: '30d',
});
return Response.json({
user: accessRequest.user,
jwt,
});
const service = services.find((s) => s.id === clientId);
if (!accessToken)
return new Response("No access token provided", { status: 400 });
if (!clientId)
return new Response("No client ID token provided", { status: 400 });
const accessRequest = await client.oAuthToken.findFirst({
where: {
accessToken: accessToken,
clientId: clientId,
},
include: {
user: true,
},
});
if (!service || service.secret !== clientSecret)
return new Response("Invalid client ID or secret", { status: 400 });
if (!accessRequest)
return new Response("Access token not found", { status: 404 });
if (new Date().getTime() - accessRequest?.createdAt.getTime() > 60 * 1000) {
await prisma.oAuthToken.delete({
where: {
id: accessRequest.id,
},
});
return new Response("Code expired", { status: 400 });
}
const jwt = sign(
{
...accessRequest.user,
},
process.env.NEXTAUTH_SECRET as string,
{
expiresIn: "30d",
},
);
return Response.json({
access_token: jwt,
token_type: "Bearer",
});
};

47
apps/hub/app/api/user/route.ts Normal file
View File

@@ -0,0 +1,47 @@
import { NextRequest, NextResponse } from "next/server";
import { getServerSession } from "../auth/[...nextauth]/auth";
import { prisma } from "@repo/db";
import { generateToken } from "../../(auth)/oauth/_components/action";
import { decode, verify } from "jsonwebtoken";
export async function middleware(req: NextRequest) {
const authHeader = req.headers.get("authorization");
if (authHeader?.startsWith("Bearer ")) {
const token = authHeader.split(" ")[1];
if (token) {
// Hier kannst du den Token validieren (optional)
req.headers.set("x-next-auth-token", token);
}
// Falls NextAuth keine Session hat, erstellen wir eine Fake-Session
}
return NextResponse.next();
}
export const GET = async (req: NextRequest) => {
// This route is only used by Moodle, so NextAuth is not used here
const authHeader = req.headers.get("Authorization");
const token = authHeader?.split(" ")[1];
if (!authHeader || !token) {
return NextResponse.json({ error: "Not logged in" }, { status: 401 });
}
const decoded = await verify(token, process.env.NEXTAUTH_SECRET as string);
if (typeof decoded === "string")
return NextResponse.json({ error: "Invalid token" }, { status: 401 });
const user = await prisma.user.findUnique({
where: {
id: decoded.id,
},
});
return NextResponse.json({
...user,
moodleLastname: `${user?.lastname.split("")[0]}. - ${user?.publicId}`,
});
};

26
apps/hub/app/globals.css
View File

@@ -1,4 +1,4 @@
@import 'tailwindcss';
@import "tailwindcss";
@plugin "daisyui";
/*
@@ -10,22 +10,22 @@
color utility to any element that depends on these defaults.
*/
@layer base {
*,
::after,
::before,
::backdrop,
::file-selector-button {
border-color: var(--color-gray-200, currentColor);
}
*,
::after,
::before,
::backdrop,
::file-selector-button {
border-color: var(--color-gray-200, currentColor);
}
}
:root {
--background: #ffffff;
--foreground: #171717;
/* --p: 47.67% 0.2484 267.02; */
--nc: #a6adbb;
--background: #ffffff;
--foreground: #171717;
/* --p: 47.67% 0.2484 267.02; */
--nc: #a6adbb;
}
body.modal-open {
overflow: hidden;
overflow: hidden;
}

55
apps/hub/app/layout.tsx
View File

@@ -1,35 +1,34 @@
import { Geist, Geist_Mono } from "next/font/google";
import { NextAuthSessionProvider } from "./_components/AuthSessionProvider";
import { getServerSession } from "./api/auth/[...nextauth]/auth";
import './globals.css';
import "./globals.css";
const geistSans = Geist({
variable: '--font-geist-sans',
subsets: ['latin'],
});
const geistMono = Geist_Mono({
variable: '--font-geist-mono',
subsets: ['latin'],
});
variable: "--font-geist-sans",
subsets: ["latin"],
});
const geistMono = Geist_Mono({
variable: "--font-geist-mono",
subsets: ["latin"],
});
export default async ({
children,
}: Readonly<{
children: React.ReactNode;
}>) => {
const session = await getServerSession();
return (
<html lang="en">
<NextAuthSessionProvider session={session}>
<body
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
>
{children}
</body>
</NextAuthSessionProvider>
</html>
)
}
children,
}: Readonly<{
children: React.ReactNode;
}>) => {
const session = await getServerSession();
return (
<html lang="en">
<NextAuthSessionProvider session={session}>
<body
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
>
{children}
</body>
</NextAuthSessionProvider>
</html>
);
};

2
apps/hub/eslint.config.mjs
View File

@@ -1,4 +1,4 @@
import { nextJsConfig } from '@repo/eslint-config/next-js';
import { nextJsConfig } from "@repo/eslint-config/next-js";
/** @type {import("eslint").Linter.Config} */
export default nextJsConfig;

6
apps/hub/helper/cn.ts
View File

@@ -1,6 +1,6 @@
import clsx, { ClassValue } from 'clsx';
import { twMerge } from 'tailwind-merge';
import clsx, { ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";
export const cn = (...inputs: ClassValue[]) => {
return twMerge(clsx(inputs));
return twMerge(clsx(inputs));
};

5
apps/hub/next.config.ts
View File

@@ -1,5 +1,6 @@
/** @type {import('next').NextConfig} */
const removeImports = require('next-remove-imports')();
const nextConfig = removeImports({});
const removeImports = require("next-remove-imports")();
/* const nextConfig = removeImports({}); */
const nextConfig = {};
export default nextConfig;

102
apps/hub/package.json
View File

@@ -1,53 +1,53 @@
{
"name": "hub",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev --turbopack -p 3000",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"@hookform/resolvers": "^3.10.0",
"@next-auth/prisma-adapter": "^1.0.7",
"@repo/db": "*",
"@repo/ui": "*",
"@tanstack/react-table": "^8.20.6",
"@uiw/react-md-editor": "^4.0.5",
"axios": "^1.7.9",
"bcryptjs": "^2.4.3",
"clsx": "^2.1.1",
"i": "^0.3.7",
"jsonwebtoken": "^9.0.2",
"lodash": "^4.17.21",
"lucide-react": "^0.474.0",
"next": "15.1.4",
"next-auth": "^4.24.11",
"next-remove-imports": "^1.0.12",
"npm": "^11.1.0",
"react": "^19.0.0",
"react-day-picker": "^9.5.1",
"react-dom": "^19.0.0",
"react-hook-form": "^7.54.2",
"react-hot-toast": "^2.5.1",
"react-select": "^5.10.0",
"tailwind-merge": "^2.6.0",
"zod": "^3.24.1"
},
"devDependencies": {
"@eslint/eslintrc": "^3",
"@tailwindcss/postcss": "^4.0.8",
"@types/bcryptjs": "^2.4.6",
"@types/jsonwebtoken": "^9.0.8",
"@types/node": "^20",
"@types/react": "^19",
"@types/react-dom": "^19",
"daisyui": "^5.0.0-beta.8",
"eslint": "^9",
"eslint-config-next": "15.1.4",
"postcss": "^8",
"tailwindcss": "^4.0.8",
"typescript": "^5"
}
"name": "hub",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev --turbopack -p 3000",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"@hookform/resolvers": "^3.10.0",
"@next-auth/prisma-adapter": "^1.0.7",
"@repo/db": "*",
"@repo/ui": "*",
"@tanstack/react-table": "^8.20.6",
"@uiw/react-md-editor": "^4.0.5",
"axios": "^1.7.9",
"bcryptjs": "^2.4.3",
"clsx": "^2.1.1",
"i": "^0.3.7",
"jsonwebtoken": "^9.0.2",
"lodash": "^4.17.21",
"lucide-react": "^0.474.0",
"next": "15.1.4",
"next-auth": "^4.24.11",
"next-remove-imports": "^1.0.12",
"npm": "^11.1.0",
"react": "^19.0.0",
"react-day-picker": "^9.5.1",
"react-dom": "^19.0.0",
"react-hook-form": "^7.54.2",
"react-hot-toast": "^2.5.1",
"react-select": "^5.10.0",
"tailwind-merge": "^2.6.0",
"zod": "^3.24.1"
},
"devDependencies": {
"@eslint/eslintrc": "^3",
"@tailwindcss/postcss": "^4.0.8",
"@types/bcryptjs": "^2.4.6",
"@types/jsonwebtoken": "^9.0.8",
"@types/node": "^20",
"@types/react": "^19",
"@types/react-dom": "^19",
"daisyui": "^5.0.0-beta.8",
"eslint": "^9",
"eslint-config-next": "15.1.4",
"postcss": "^8",
"tailwindcss": "^4.0.8",
"typescript": "^5"
}
}

6
apps/hub/postcss.config.mjs
View File

@@ -1,8 +1,8 @@
/** @type {import('postcss-load-config').Config} */
const config = {
plugins: {
'@tailwindcss/postcss': {},
},
plugins: {
"@tailwindcss/postcss": {},
},
};
export default config;

6
apps/hub/public/file.svg
View File

@@ -1 +1,5 @@
<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>
<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<path
d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z"
clip-rule="evenodd" fill="#666" fill-rule="evenodd" />
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 391 B

After

Width:  |  Height:  |  Size: 414 B

13
apps/hub/public/globe.svg
View File

@@ -1 +1,12 @@
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
<g clip-path="url(#a)">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1"
fill="#666" />
</g>
<defs>
<clipPath id="a">
<path fill="#fff" d="M0 0h16v16H0z" />
</clipPath>
</defs>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.0 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

7
apps/hub/public/next.svg
View File

@@ -1 +1,6 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80">
<path fill="#000"
d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z" />
<path fill="#000"
d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z" />
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.4 KiB

4
apps/hub/public/vercel.svg
View File

@@ -1 +1,3 @@
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000">
<path d="m577.3 0 577.4 1000H0z" fill="#fff" />
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 128 B

After

Width:  |  Height:  |  Size: 135 B

6
apps/hub/public/window.svg
View File

@@ -1 +1,5 @@
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5"
fill="#666" />
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 385 B

After

Width:  |  Height:  |  Size: 408 B

32
apps/hub/tsconfig.json
View File

@@ -1,18 +1,18 @@
{
"extends": "@repo/typescript-config/nextjs.json",
"compilerOptions": {
"plugins": [
{
"name": "next"
}
]
},
"include": [
"**/*.ts",
"**/*.tsx",
"next-env.d.ts",
"next.config.js",
".next/types/**/*.ts"
],
"exclude": ["node_modules"]
"extends": "@repo/typescript-config/nextjs.json",
"compilerOptions": {
"plugins": [
{
"name": "next"
}
]
},
"include": [
"**/*.ts",
"**/*.tsx",
"next-env.d.ts",
"next.config.js",
".next/types/**/*.ts"
],
"exclude": ["node_modules"]
}

34
apps/hub/types/next-auth.d.ts vendored
View File

@@ -1,21 +1,21 @@
import NextAuth from 'next-auth';
import { User as IUser } from '@repo/db';
import NextAuth from "next-auth";
import { User as IUser } from "@repo/db";
declare module 'next-auth' {
/**
* Returned by `useSession`, `getSession` and received as a prop on the `SessionProvider` React Context
*/
interface Session {
user: IUser;
}
type User = IUser;
declare module "next-auth" {
/**
* Returned by `useSession`, `getSession` and received as a prop on the `SessionProvider` React Context
*/
interface Session {
user: IUser;
}
type User = IUser;
}
declare module 'next-auth/jwt' {
interface JWT {
uid: string;
firstname: string;
lastname: string;
email: string;
}
declare module "next-auth/jwt" {
interface JWT {
uid: string;
firstname: string;
lastname: string;
email: string;
}
}