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

fixed styles, improved PaginatedTableStyling

Browse Source
This commit is contained in:
PxlLoewe
2025-02-22 23:20:46 +01:00
parent 52888787cf
commit cd5c57beba
11 changed files with 87 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -5,16 +5,6 @@ import Link from 'next/link';
export default () => {
return (
<>
<p className="text-2xl font-semibold text-left flex items-center gap-2 justify-between">
<span className="flex items-center gap-2">
<PartyPopperIcon className="w-5 h-5" /> Events
</span>
<Link href={'/admin/event/new'}>
<button className="btn btn-sm btn-outline btn-primary">
Erstellen
</button>
</Link>
</p>
<PaginatedTable
showEditButton
prismaModel="event"
@@ -28,6 +18,18 @@ export default () => {
accessorKey: 'hidden',
},
]}
leftOfSearch={
<span className="flex items-center gap-2">
<PartyPopperIcon className="w-5 h-5" /> Events
</span>
}
rightOfSearch={
<Link href={'/admin/event/new'}>
<button className="btn btn-sm btn-outline btn-primary">
Erstellen
</button>
</Link>
}
/>
</>
);

48
apps/hub/app/(app)/admin/station/page.tsx
View File

@@ -1,42 +1,46 @@
import { DatabaseBackupIcon } from "lucide-react";
import { PaginatedTable } from "../../../_components/PaginatedTable";
import Link from "next/link";
import { DatabaseBackupIcon } from 'lucide-react';
import { PaginatedTable } from '../../../_components/PaginatedTable';
import Link from 'next/link';
export default () => {
return (
<>
<p className="text-2xl font-semibold text-left flex items-center gap-2 justify-between">
<span className="flex items-center gap-2">
<DatabaseBackupIcon className="w-5 h-5" /> Stationen
</span>
<Link href={"/admin/station/new"}>
<button className="btn btn-sm btn-outline btn-primary">
Erstellen
</button>
</Link>
</p>
<PaginatedTable
showEditButton
prismaModel="station"
searchFields={["bosCallsign", "bosUse", "country", "operator"]}
searchFields={['bosCallsign', 'bosUse', 'country', 'operator']}
columns={[
{
header: "BOS Name",
accessorKey: "bosCallsign",
header: 'BOS Name',
accessorKey: 'bosCallsign',
},
{
header: "Bos Use",
accessorKey: "bosUse",
header: 'Bos Use',
accessorKey: 'bosUse',
},
{
header: "Country",
accessorKey: "country",
header: 'Country',
accessorKey: 'country',
},
{
header: "operator",
accessorKey: "operator",
header: 'operator',
accessorKey: 'operator',
},
]}
leftOfSearch={
<span className="flex items-center gap-2">
<DatabaseBackupIcon className="w-5 h-5" /> Stationen
</span>
}
rightOfSearch={
<p className="text-2xl font-semibold text-left flex items-center gap-2 justify-between">
<Link href={'/admin/station/new'}>
<button className="btn btn-sm btn-outline btn-primary">
Erstellen
</button>
</Link>
</p>
}
/>
</>
);

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

@@ -1,34 +1,36 @@
import { User2 } from "lucide-react";
import { PaginatedTable } from "../../../_components/PaginatedTable";
import { User2 } from 'lucide-react';
import { PaginatedTable } from '../../../_components/PaginatedTable';
export default async () => {
return (
<>
<p className="text-2xl font-semibold text-left flex items-center gap-2">
<User2 className="w-5 h-5" /> Benutzer
</p>
<PaginatedTable
showEditButton
prismaModel="user"
searchFields={["publicId", "firstname", "lastname", "email"]}
searchFields={['publicId', 'firstname', 'lastname', 'email']}
columns={[
{
header: "ID",
accessorKey: "publicId",
header: 'ID',
accessorKey: 'publicId',
},
{
header: "Vorname",
accessorKey: "firstname",
header: 'Vorname',
accessorKey: 'firstname',
},
{
header: "Nachname",
accessorKey: "lastname",
header: 'Nachname',
accessorKey: 'lastname',
},
{
header: "Email",
accessorKey: "email",
header: 'Email',
accessorKey: 'email',
},
]}
leftOfSearch={
<p className="text-2xl font-semibold text-left flex items-center gap-2">
<User2 className="w-5 h-5" /> Benutzer
</p>
}
/>
</>
);

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

@@ -6,6 +6,9 @@ import {
} from '@radix-ui/react-icons';
import { HorizontalNav, VerticalNav } from '../_components/Nav';
import { Toaster } from 'react-hot-toast';
import { redirect } from 'next/navigation';
import { getServerSession } from '../api/auth/[...nextauth]/auth';
import { headers } from 'next/headers';
export const metadata: Metadata = {
title: 'Create Next App',
@@ -17,6 +20,10 @@ export default async function RootLayout({
}: Readonly<{
children: React.ReactNode;
}>) {
const session = await getServerSession();
if (!session) redirect(`/login`);
return (
<div
className="hero min-h-screen"

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

@@ -13,10 +13,10 @@ const AuthLayout: NextPage<
'url(https://img.daisyui.com/images/stock/photo-1507358522600-9f71e620c44e.webp)',
}}
>
<div className="hero-overlay bg-opacity-60"></div>
<div className="hero-content text-neutral-content text-center ">
<div className="hero-overlay bg-neutral/60"></div>
<div className="hero-content text-center ">
<div className="max-w-lg">
<div className="card bg-base-100 w-full min-w-[500px] shadow-2xl max-md:min-w-[400px]">
<div className="card rounded-2xl bg-base-100 w-full min-w-[500px] shadow-2xl max-md:min-w-[400px]">
{children}
</div>
</div>

14
apps/hub/app/(auth)/login/_components/Login.tsx
View File

@@ -50,14 +50,14 @@ export const Login = () => {
<div>
<Toaster position="top-center" reverseOrder={false} />
</div>
<h1 className="text-3xl font-bold">Login</h1>
<h1 className="text-3xl font-bold ">Login</h1>
<span className="text-sm font-medium">
Noch keinen Account? Zur{' '}
<Link href="/register" className="link link-accent link-hover">
Registrierung
</Link>
</span>
<label className="input input-bordered flex items-center gap-2">
<label className="input input-bordered flex items-center gap-2 w-full">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
@@ -79,7 +79,7 @@ export const Login = () => {
? form.formState.errors.email.message
: ''}
</p>
<label className="input input-bordered flex items-center gap-2 mt-2">
<label className="input input-bordered flex items-center gap-2 mt-2 w-full">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
@@ -100,12 +100,8 @@ export const Login = () => {
className="grow"
/>
</label>
<div className="form-control mt-6">
<button
className="btn btn-primary"
name="loginBtn"
disabled={isLoading}
>
<div className="card-actions mt-6">
<button className="btn btn-primary btn-block" disabled={isLoading}>
{isLoading && (
<span className="loading loading-spinner loading-sm"></span>
)}

16
apps/hub/app/(auth)/register/_components/Register.tsx
View File

@@ -71,7 +71,7 @@ export const Register = () => {
</Link>
</span>
<div className="mt-5 mb-2">
<label className="input input-bordered flex items-center gap-2 mt-2">
<label className="input input-bordered flex items-center gap-2 mt-2 w-full">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
@@ -92,7 +92,7 @@ export const Register = () => {
? form.formState.errors.firstname.message
: ''}
</p>
<label className="input input-bordered flex items-center gap-2 mt-2">
<label className="input input-bordered flex items-center gap-2 mt-2 w-full">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
@@ -113,8 +113,8 @@ export const Register = () => {
? form.formState.errors.lastname.message
: ''}
</p>
<div className="divider divider-neutral">Account</div>
<label className="input input-bordered flex items-center gap-2">
<div className="divider">Account</div>
<label className="input input-bordered flex items-center gap-2 w-full">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
@@ -137,7 +137,7 @@ export const Register = () => {
? form.formState.errors.email.message
: ''}
</p>
<label className="input input-bordered flex items-center gap-2 mt-2">
<label className="input input-bordered flex items-center gap-2 mt-2 w-full">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
@@ -163,7 +163,7 @@ export const Register = () => {
? form.formState.errors.password.message
: ''}
</p>
<label className="input input-bordered flex items-center gap-2 mt-2">
<label className="input input-bordered flex items-center gap-2 mt-2 w-full">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
@@ -189,9 +189,9 @@ export const Register = () => {
? form.formState.errors.passwordConfirm.message
: ''}
</p>
<div className="form-control mt-6">
<div className="card-actions mt-6">
<button
className="btn btn-primary"
className="btn btn-primary btn-block"
name="registerBtn"
disabled={isLoading}
>

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

@@ -67,7 +67,7 @@ export const HorizontalNav = () => (
</li>
<li>
<Link href="/logout">
<button className="btn btn-sm">
<button className="btn btn-sm btn-ghost">
<ExitIcon /> Logout
</button>
</Link>

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

@@ -22,6 +22,8 @@ interface PaginatedTableProps<TData>
showEditButton?: boolean;
searchFields?: string[];
include?: Record<string, boolean>;
leftOfSearch?: React.ReactNode;
rightOfSearch?: React.ReactNode;
ref?: Ref<PaginatedTableRef>;
}
@@ -33,6 +35,8 @@ export function PaginatedTable<TData>({
filter,
include,
ref,
leftOfSearch,
rightOfSearch,
...restProps
}: PaginatedTableProps<TData>) {
const [data, setData] = useState<TData[]>([]);
@@ -87,7 +91,8 @@ export function PaginatedTable<TData>({
return (
<div className="space-y-4 m-4">
{searchFields.length > 0 && (
<div className="flex justify-end">
<div className="flex items-center gap-2">
<div className="flex-1">{leftOfSearch}</div>
<input
type="text"
placeholder="Suchen..."
@@ -98,6 +103,7 @@ export function PaginatedTable<TData>({
}}
className="input input-bordered w-full max-w-xs justify-end"
/>
<div className="flex justify-center">{rightOfSearch}</div>
</div>
)}
<SortableTable

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

@@ -116,7 +116,7 @@ export const Pagination = ({
<ArrowLeft size={16} />
</button>
<select
className="select join-item"
className="select join-item w-16"
value={page}
onChange={(e) => setPage(Number(e.target.value))}
>

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

@@ -23,4 +23,5 @@
--background: #ffffff;
--foreground: #171717;
/* --p: 47.67% 0.2484 267.02; */
--nc: #a6adbb;
}