HUB - Admin und Einstellungen Seiten hinzugefügt, Prisma Client Integration und Migrationen aktualisiert
This commit is contained in:
PxlLoewe
3
apps/hub/app/(app)/admin/page.tsx
Normal file
3
apps/hub/app/(app)/admin/page.tsx
Normal file
@@ -0,0 +1,3 @@
|
||||
export default () => {
|
||||
return <div>Admin Page</div>;
|
||||
};
|
||||
99
apps/hub/app/(app)/layout.tsx
Normal file
99
apps/hub/app/(app)/layout.tsx
Normal file
@@ -0,0 +1,99 @@
|
||||
import type { Metadata } from 'next';
|
||||
import {
|
||||
DiscordLogoIcon,
|
||||
InstagramLogoIcon,
|
||||
ReaderIcon,
|
||||
} from '@radix-ui/react-icons';
|
||||
import { HorizontalNav, VerticalNav } from '../_components/ui/Nav';
|
||||
import { Toaster } from 'react-hot-toast';
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'Create Next App',
|
||||
description: 'Generated by create next app',
|
||||
};
|
||||
|
||||
export default async function RootLayout({
|
||||
children,
|
||||
}: Readonly<{
|
||||
children: React.ReactNode;
|
||||
}>) {
|
||||
return (
|
||||
<div
|
||||
className="hero min-h-screen"
|
||||
style={{
|
||||
backgroundImage:
|
||||
'url(https://media.discordapp.net/attachments/1086051758461173931/1336779010109341766/d-hyan.PNG?ex=67b19238&is=67b040b8&hm=5d90bef8e44a8e620d759d1bebe0f1a3649b0f3cadc735bd9a06d5e6702f2d14&=&format=webp&quality=lossless)',
|
||||
}}
|
||||
>
|
||||
<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 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">
|
||||
{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>
|
||||
|
||||
{/* 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>
|
||||
);
|
||||
}
|
||||
81
apps/hub/app/(app)/page.tsx
Normal file
81
apps/hub/app/(app)/page.tsx
Normal file
@@ -0,0 +1,81 @@
|
||||
import Link from 'next/link';
|
||||
import { PaginatedTable } from '../_components/PaginatedTable';
|
||||
import { Header } from '../_components/ui/Header';
|
||||
import { PrismaClient } from '@repo/db';
|
||||
|
||||
export default async function Home() {
|
||||
return (
|
||||
<div>
|
||||
<Header />
|
||||
<PaginatedTable
|
||||
rowsPerPage={10}
|
||||
prismaModel={'user'}
|
||||
columns={[
|
||||
{
|
||||
header: 'ID',
|
||||
accessorKey: 'id',
|
||||
},
|
||||
{
|
||||
header: 'Email',
|
||||
accessorKey: 'email',
|
||||
},
|
||||
{
|
||||
header: 'First Name',
|
||||
accessorKey: 'firstname',
|
||||
},
|
||||
{
|
||||
header: 'Last Name',
|
||||
accessorKey: 'lastname',
|
||||
footer: 'Total',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
Map
|
||||
<br />
|
||||
Logbuch
|
||||
<br />
|
||||
Einlog-Zeit (7 Tage, total)
|
||||
<br />
|
||||
Stats
|
||||
<br />
|
||||
Badges
|
||||
<br />
|
||||
gd
|
||||
<br />
|
||||
gd
|
||||
<br />
|
||||
gd
|
||||
<br />
|
||||
gd
|
||||
<br />
|
||||
gd
|
||||
<br />
|
||||
gd
|
||||
<br />
|
||||
gd
|
||||
<br />
|
||||
gd
|
||||
<br />
|
||||
gd
|
||||
<br />
|
||||
gd
|
||||
<br />
|
||||
gd
|
||||
<br />
|
||||
gd
|
||||
<br />
|
||||
gd
|
||||
<br />
|
||||
gd
|
||||
<br />
|
||||
gd
|
||||
<br />
|
||||
gd
|
||||
<br />
|
||||
gd
|
||||
<br />
|
||||
gd
|
||||
<br />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
253
apps/hub/app/(app)/settings/account/_components/forms.tsx
Normal file
253
apps/hub/app/(app)/settings/account/_components/forms.tsx
Normal file
@@ -0,0 +1,253 @@
|
||||
'use client';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import { DiscordAccount, User } from '@repo/db';
|
||||
import { useState } from 'react';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { z } from 'zod';
|
||||
import { unlinkDiscord, updateUser } from '../actions';
|
||||
import { Toaster, toast } from 'react-hot-toast';
|
||||
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,
|
||||
} 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 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(--fallback-b1, oklch(var(--b1) / var(--tw-bg-opacity, 1)))',
|
||||
color:
|
||||
'var(--fallback-nc, oklch(var(--nc) / var(--tw-text-opacity, 1)))',
|
||||
},
|
||||
});
|
||||
})}
|
||||
>
|
||||
<h2 className="card-title">
|
||||
<MixerHorizontalIcon className="w-5 h-5" /> Persönliche Informationen
|
||||
</h2>
|
||||
<div className="">
|
||||
<label className="form-control w-full">
|
||||
<div className="label">
|
||||
<span className="label-text text-lg flex items-center gap-2">
|
||||
<PersonIcon /> Vorname
|
||||
</span>
|
||||
</div>
|
||||
<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="form-control w-full">
|
||||
<div className="label">
|
||||
<span className="label-text text-lg flex items-center gap-2">
|
||||
<PersonIcon /> Nachname
|
||||
</span>
|
||||
</div>
|
||||
<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="form-control w-full">
|
||||
<div className="label">
|
||||
<span className="label-text text-lg flex items-center gap-2">
|
||||
<EnvelopeClosedIcon /> E-Mail
|
||||
</span>
|
||||
</div>
|
||||
<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?: DiscordAccount;
|
||||
user: User;
|
||||
}) => {
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [vatsimLoading, setVatsimLoading] = useState(false);
|
||||
const router = useRouter();
|
||||
|
||||
const schema = z.object({
|
||||
vatsimCid: z.number().min(1000).max(9999999),
|
||||
});
|
||||
|
||||
type IFormInput = z.infer<typeof schema>;
|
||||
|
||||
const form = useForm<IFormInput>({
|
||||
defaultValues: {
|
||||
vatsimCid: user?.vatsimCid || undefined,
|
||||
},
|
||||
resolver: zodResolver(schema),
|
||||
});
|
||||
|
||||
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(--fallback-b1, oklch(var(--b1) / var(--tw-bg-opacity, 1)))',
|
||||
color:
|
||||
'var(--fallback-nc, oklch(var(--nc) / var(--tw-text-opacity, 1)))',
|
||||
},
|
||||
});
|
||||
})}
|
||||
>
|
||||
<h2 className="card-title">
|
||||
<Link2Icon className="w-5 h-5" /> Verbindungen & Benachrichtigungen
|
||||
</h2>
|
||||
<div>
|
||||
<div>
|
||||
<div className="label">
|
||||
<span className="label-text text-lg flex items-center gap-2">
|
||||
<DiscordLogoIcon /> Discord
|
||||
</span>
|
||||
</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 className="btn btn-primary btn-block">
|
||||
<DiscordLogoIcon className="w-5 h-5" /> Mit Discord verbinden
|
||||
</button>
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="content-center">
|
||||
<label className="form-control w-full">
|
||||
<div className="label">
|
||||
<span className="label-text text-lg flex items-center gap-2">
|
||||
<PaperPlaneIcon /> VATSIM-CID
|
||||
</span>
|
||||
</div>
|
||||
<input
|
||||
type="number"
|
||||
className="input input-bordered w-full"
|
||||
placeholder="1445241"
|
||||
{...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>
|
||||
);
|
||||
};
|
||||
26
apps/hub/app/(app)/settings/account/actions.ts
Normal file
26
apps/hub/app/(app)/settings/account/actions.ts
Normal file
@@ -0,0 +1,26 @@
|
||||
'use server';
|
||||
import { Prisma, PrismaClient } from '@repo/db';
|
||||
import { getServerSession } from '../../../api/auth/[...nextauth]/auth';
|
||||
|
||||
export const unlinkDiscord = async (userId: string) => {
|
||||
const client = new PrismaClient();
|
||||
await client.discordAccount.deleteMany({
|
||||
where: {
|
||||
userId,
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
export const updateUser = async (changes: Prisma.UserUpdateInput) => {
|
||||
const session = await getServerSession();
|
||||
if (!session) return null;
|
||||
|
||||
const client = new PrismaClient();
|
||||
|
||||
await client.user.update({
|
||||
where: {
|
||||
id: session.user.id,
|
||||
},
|
||||
data: changes,
|
||||
});
|
||||
};
|
||||
35
apps/hub/app/(app)/settings/account/page.tsx
Normal file
35
apps/hub/app/(app)/settings/account/page.tsx
Normal file
@@ -0,0 +1,35 @@
|
||||
import { getServerSession } from '../../../api/auth/[...nextauth]/auth';
|
||||
import { PrismaClient } from '@repo/db';
|
||||
import { ProfileForm, SocialForm } from './_components/forms';
|
||||
import { GearIcon } from '@radix-ui/react-icons';
|
||||
|
||||
export default async () => {
|
||||
const prisma = new PrismaClient();
|
||||
const session = await getServerSession();
|
||||
if (!session) return null;
|
||||
const user = await prisma.user.findFirst({
|
||||
where: {
|
||||
id: session.user.id,
|
||||
},
|
||||
include: {
|
||||
discordAccounts: true,
|
||||
},
|
||||
});
|
||||
if (!user) return null;
|
||||
const discordAccount = user?.discordAccounts[0];
|
||||
return (
|
||||
<div className="grid grid-cols-6 gap-4">
|
||||
<div className="col-span-full">
|
||||
<p className="text-2xl font-semibold text-left flex items-center gap-2">
|
||||
<GearIcon className="w-5 h-5" /> Einstellungen
|
||||
</p>
|
||||
</div>
|
||||
<div className="card bg-base-200 shadow-xl mb-4 col-span-6 xl:col-span-3">
|
||||
<ProfileForm user={user} />
|
||||
</div>
|
||||
<div className="card bg-base-200 shadow-xl mb-4 col-span-6 xl:col-span-3">
|
||||
<SocialForm discordAccount={discordAccount} user={user} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
8
apps/hub/app/(app)/settings/privacy/page.tsx
Normal file
8
apps/hub/app/(app)/settings/privacy/page.tsx
Normal file
@@ -0,0 +1,8 @@
|
||||
export default () => {
|
||||
return (
|
||||
<div>
|
||||
<h1>Settings</h1>
|
||||
<p>Settings page content</p>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user