fixed styles, improved PaginatedTableStyling

apps/hub/app/(app)/admin/event/page.tsx

@@ -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>
+        }
       />
     </>
   );

apps/hub/app/(app)/admin/station/page.tsx

@@ -1,42 +1,46 @@
-import { DatabaseBackupIcon } from "lucide-react";
+import { DatabaseBackupIcon } from 'lucide-react';
-import { PaginatedTable } from "../../../_components/PaginatedTable";
+import { PaginatedTable } from '../../../_components/PaginatedTable';
-import Link from "next/link";
+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",
+            header: 'BOS Name',
-            accessorKey: "bosCallsign",
+            accessorKey: 'bosCallsign',
           },
           {
-            header: "Bos Use",
+            header: 'Bos Use',
-            accessorKey: "bosUse",
+            accessorKey: 'bosUse',
           },
           {
-            header: "Country",
+            header: 'Country',
-            accessorKey: "country",
+            accessorKey: 'country',
           },
           {
-            header: "operator",
+            header: 'operator',
-            accessorKey: "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>
+        }
       />
     </>
   );

apps/hub/app/(app)/admin/user/page.tsx

@@ -1,34 +1,36 @@
-import { User2 } from "lucide-react";
+import { User2 } from 'lucide-react';
-import { PaginatedTable } from "../../../_components/PaginatedTable";
+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",
+            header: 'ID',
-            accessorKey: "publicId",
+            accessorKey: 'publicId',
           },
           {
-            header: "Vorname",
+            header: 'Vorname',
-            accessorKey: "firstname",
+            accessorKey: 'firstname',
           },
           {
-            header: "Nachname",
+            header: 'Nachname',
-            accessorKey: "lastname",
+            accessorKey: 'lastname',
           },
           {
-            header: "Email",
+            header: 'Email',
-            accessorKey: "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>
+        }
       />
     </>
   );

apps/hub/app/(app)/layout.tsx

@@ -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"

apps/hub/app/(auth)/layout.tsx

@@ -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-overlay bg-neutral/60"></div>
-    <div className="hero-content text-neutral-content text-center ">
+    <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>

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

@@ -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">
+      <div className="card-actions mt-6">
-        <button
+        <button className="btn btn-primary btn-block" disabled={isLoading}>
-          className="btn btn-primary"
-          name="loginBtn"
-          disabled={isLoading}
-        >
           {isLoading && (
             <span className="loading loading-spinner loading-sm"></span>
           )}

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

@@ -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>
+        <div className="divider">Account</div>
-        <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"
@@ -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}
           >

apps/hub/app/_components/Nav.tsx

@@ -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>

apps/hub/app/_components/PaginatedTable.tsx

@@ -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

apps/hub/app/_components/Table.tsx

@@ -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))}
       >

apps/hub/app/globals.css

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