Update .gitea/workflows/build-docker-container.yml

.vscode/extensions.json

@@ -8,7 +8,9 @@
     "pflannery.vscode-versionlens",
     "editorconfig.editorconfig",
     "prisma.prisma",
-    "graphql.vscode-graphql"
+    "graphql.vscode-graphql",
+    "csstools.postcss",
+    "bradlc.vscode-tailwindcss"
   ],
   "unwantedRecommendations": []
-}
+}

.vscode/settings.json

@@ -7,5 +7,11 @@
   },
   "[prisma]": {
     "editor.formatOnSave": true
-  }
+  },
+  "tailwindCSS.classAttributes": [
+    "class",
+    "className",
+    "activeClassName",
+    "errorClassName"
+  ]
 }

api/db/migrations/20241004073828_intoroduce_posts_schema/migration.sql

@@ -0,0 +1,8 @@
+-- CreateTable
+CREATE TABLE "Post" (
+    "id" INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,
+    "title" TEXT NOT NULL,
+    "body" TEXT NOT NULL,
+    "createdAt" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" DATETIME NOT NULL
+);

api/db/migrations/20241004081930_add_roles_to_user/migration.sql

@@ -0,0 +1,22 @@
+-- RedefineTables
+PRAGMA defer_foreign_keys=ON;
+PRAGMA foreign_keys=OFF;
+CREATE TABLE "new_User" (
+    "id" INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,
+    "email" TEXT NOT NULL,
+    "firstName" TEXT,
+    "lastName" TEXT,
+    "hashedPassword" TEXT,
+    "salt" TEXT,
+    "resetToken" TEXT,
+    "resetTokenExpiresAt" DATETIME,
+    "createdAt" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" DATETIME NOT NULL,
+    "roles" TEXT NOT NULL DEFAULT 'user'
+);
+INSERT INTO "new_User" ("createdAt", "email", "firstName", "hashedPassword", "id", "lastName", "resetToken", "resetTokenExpiresAt", "salt", "updatedAt") SELECT "createdAt", "email", "firstName", "hashedPassword", "id", "lastName", "resetToken", "resetTokenExpiresAt", "salt", "updatedAt" FROM "User";
+DROP TABLE "User";
+ALTER TABLE "new_User" RENAME TO "User";
+CREATE UNIQUE INDEX "User_email_key" ON "User"("email");
+PRAGMA foreign_keys=ON;
+PRAGMA defer_foreign_keys=OFF;

api/db/migrations/20241004120724_nachhilfeangebot_erstellen/migration.sql

@@ -0,0 +1,7 @@
+-- CreateTable
+CREATE TABLE "Nachhilfeangebot" (
+    "id" INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,
+    "subject" TEXT NOT NULL,
+    "currentClass" TEXT NOT NULL,
+    "cost" DECIMAL NOT NULL
+);

api/db/migrations/20241004122139_created_at/migration.sql

@@ -0,0 +1,22 @@
+/*
+  Warnings:
+
+  - Added the required column `userId` to the `Nachhilfeangebot` table without a default value. This is not possible if the table is not empty.
+
+*/
+-- RedefineTables
+PRAGMA defer_foreign_keys=ON;
+PRAGMA foreign_keys=OFF;
+CREATE TABLE "new_Nachhilfeangebot" (
+    "id" INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,
+    "subject" TEXT NOT NULL,
+    "currentClass" TEXT NOT NULL,
+    "cost" DECIMAL NOT NULL,
+    "userId" INTEGER NOT NULL,
+    CONSTRAINT "Nachhilfeangebot_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User" ("id") ON DELETE RESTRICT ON UPDATE CASCADE
+);
+INSERT INTO "new_Nachhilfeangebot" ("cost", "currentClass", "id", "subject") SELECT "cost", "currentClass", "id", "subject" FROM "Nachhilfeangebot";
+DROP TABLE "Nachhilfeangebot";
+ALTER TABLE "new_Nachhilfeangebot" RENAME TO "Nachhilfeangebot";
+PRAGMA foreign_keys=ON;
+PRAGMA defer_foreign_keys=OFF;

api/db/schema.prisma

@@ -24,17 +24,19 @@ model UserExample {
 }
 
 model User {
-  id                  Int        @id @default(autoincrement())
-  email               String     @unique
+  id                  Int                @id @default(autoincrement())
+  email               String             @unique
   firstName           String?
   lastName            String?
   hashedPassword      String?
   salt                String?
-  identites           Identity[]
   resetToken          String?
   resetTokenExpiresAt DateTime?
-  createdAt           DateTime   @default(now())
-  updatedAt           DateTime   @updatedAt
+  createdAt           DateTime           @default(now())
+  updatedAt           DateTime           @updatedAt
+  roles               String             @default("user")
+  identites           Identity[]
+  Nachhilfeangebot    Nachhilfeangebot[]
 }
 
 model Identity {
@@ -52,3 +54,20 @@ model Identity {
   @@unique([provider, uid])
   @@index(userId)
 }
+
+model Post {
+  id        Int      @id @default(autoincrement())
+  title     String
+  body      String
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+}
+
+model Nachhilfeangebot {
+  id           Int     @id @default(autoincrement())
+  subject      String
+  currentClass String
+  cost         Decimal
+  userId       Int
+  user         User    @relation(fields: [userId], references: [id])
+}

api/src/functions/auth.ts

@@ -6,11 +6,26 @@ import type { DbAuthHandlerOptions, UserType } from '@redwoodjs/auth-dbauth-api'
 import { cookieName } from 'src/lib/auth'
 import { db } from 'src/lib/db'
 
+export const cookie = {
+  attributes: {
+    HttpOnly: true,
+    Path: '/',
+    SameSite: 'Strict',
+    Secure: process.env.NODE_ENV !== 'development',
+
+    // If you need to allow other domains (besides the api side) access to
+    // the dbAuth session cookie:
+    // Domain: 'example.com',
+  },
+  name: cookieName,
+}
+
 export const handler = async (
   event: APIGatewayProxyEvent,
   context: Context
 ) => {
   const forgotPasswordOptions: DbAuthHandlerOptions['forgotPassword'] = {
+    enabled: false,
     // handler() is invoked after verifying that a user was found with the given
     // username. This is where you can send the user an email with a link to
     // reset their password. With the default dbAuth routes and field names, the
@@ -61,6 +76,7 @@ export const handler = async (
     // didn't validate their email yet), throw an error and it will be returned
     // by the `logIn()` function from `useAuth()` in the form of:
     // `{ message: 'Error message' }`
+    enabled: false,
     handler: (user) => {
       return user
     },
@@ -86,6 +102,7 @@ export const handler = async (
     handler: (_user) => {
       return true
     },
+    enabled: false,
 
     // If `false` then the new password MUST be different from the current one
     allowReusedPassword: true,
@@ -125,6 +142,7 @@ export const handler = async (
     //
     // If this returns anything else, it will be returned by the
     // `signUp()` function in the form of: `{ message: 'String here' }`.
+    enabled: false,
     handler: ({
       username,
       hashedPassword,
@@ -183,19 +201,7 @@ export const handler = async (
 
     // Specifies attributes on the cookie that dbAuth sets in order to remember
     // who is logged in. See https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies#restrict_access_to_cookies
-    cookie: {
-      attributes: {
-        HttpOnly: true,
-        Path: '/',
-        SameSite: 'Strict',
-        Secure: process.env.NODE_ENV !== 'development',
-
-        // If you need to allow other domains (besides the api side) access to
-        // the dbAuth session cookie:
-        // Domain: 'example.com',
-      },
-      name: cookieName,
-    },
+    cookie,
 
     forgotPassword: forgotPasswordOptions,
     login: loginOptions,

api/src/functions/oauth/oauth.ts

@@ -107,7 +107,7 @@ const secureCookie = (user) => {
     process.env.SESSION_SECRET
   ).toString()
 
-  return [`session=${encrypted}`, ...cookieAttrs].join('; ')
+  return [`session_8911=${encrypted}`, ...cookieAttrs].join('; ')
 }
 
 const getUser = async ({ providerUser, accessToken, scope }) => {

api/src/graphql/identities.sdl.ts

@@ -0,0 +1,36 @@
+export const schema = gql`
+  type Identity {
+    id: Int!
+    provider: String!
+    # uid: String!
+    userId: Int!
+    user: User!
+    # accessToken: String
+    # scope: String
+    lastLoginAt: DateTime!
+    createdAt: DateTime!
+    updatedAt: DateTime!
+  }
+
+  type Query {
+    identities: [Identity!]! @requireAuth
+  }
+
+  input CreateIdentityInput {
+    provider: String!
+    uid: String!
+    userId: Int!
+    accessToken: String
+    scope: String
+    lastLoginAt: DateTime!
+  }
+
+  input UpdateIdentityInput {
+    provider: String
+    uid: String
+    userId: Int
+    accessToken: String
+    scope: String
+    lastLoginAt: DateTime
+  }
+`

api/src/graphql/nachhilfeangebots.sdl.ts

@@ -0,0 +1,37 @@
+export const schema = gql`
+  type Nachhilfeangebot {
+    id: Int!
+    subject: String!
+    currentClass: String!
+    cost: Float!
+    user: User!
+  }
+
+  type Query {
+    nachhilfeangebots: [Nachhilfeangebot!]! @requireAuth
+    nachhilfeangebot(id: Int!): Nachhilfeangebot @requireAuth
+  }
+
+  input CreateNachhilfeangebotInput {
+    subject: String!
+    currentClass: String!
+    cost: Float!
+  }
+
+  input UpdateNachhilfeangebotInput {
+    subject: String
+    currentClass: String
+    cost: Float
+  }
+
+  type Mutation {
+    createNachhilfeangebot(
+      input: CreateNachhilfeangebotInput!
+    ): Nachhilfeangebot! @requireAuth
+    updateNachhilfeangebot(
+      id: Int!
+      input: UpdateNachhilfeangebotInput!
+    ): Nachhilfeangebot! @requireAuth
+    deleteNachhilfeangebot(id: Int!): Nachhilfeangebot! @requireAuth
+  }
+`

api/src/graphql/posts.sdl.ts

@@ -0,0 +1,30 @@
+export const schema = gql`
+  type Post {
+    id: Int!
+    title: String!
+    body: String!
+    createdAt: DateTime!
+    updatedAt: DateTime!
+  }
+
+  type Query {
+    posts: [Post!]! @requireAuth
+    post(id: Int!): Post @requireAuth
+  }
+
+  input CreatePostInput {
+    title: String!
+    body: String!
+  }
+
+  input UpdatePostInput {
+    title: String
+    body: String
+  }
+
+  type Mutation {
+    createPost(input: CreatePostInput!): Post! @requireAuth
+    updatePost(id: Int!, input: UpdatePostInput!): Post! @requireAuth
+    deletePost(id: Int!): Post! @requireAuth
+  }
+`

api/src/graphql/users.sdl.ts

@@ -0,0 +1,43 @@
+export const schema = gql`
+  type User {
+    id: Int!
+    email: String!
+    firstName: String
+    lastName: String
+    # hashedPassword: String
+    # salt: String
+    # resetToken: String
+    # resetTokenExpiresAt: DateTime
+    createdAt: DateTime!
+    updatedAt: DateTime!
+    roles: String!
+    identites: [Identity]!
+    Nachhilfeangebot: [Nachhilfeangebot]!
+  }
+
+  type Query {
+    users: [User!]! @requireAuth
+  }
+
+  input CreateUserInput {
+    email: String!
+    firstName: String
+    lastName: String
+    hashedPassword: String
+    salt: String
+    resetToken: String
+    resetTokenExpiresAt: DateTime
+    roles: String!
+  }
+
+  input UpdateUserInput {
+    email: String
+    firstName: String
+    lastName: String
+    hashedPassword: String
+    salt: String
+    resetToken: String
+    resetTokenExpiresAt: DateTime
+    roles: String
+  }
+`

api/src/lib/auth.ts

@@ -36,7 +36,13 @@ export const getCurrentUser = async (session: Decoded) => {
 
   return await db.user.findUnique({
     where: { id: session.id },
-    select: { id: true },
+    select: {
+      id: true,
+      email: true,
+      roles: true,
+      firstName: true,
+      lastName: true,
+    },
   })
 }
 

api/src/services/identities/identities.scenarios.ts

@@ -0,0 +1,35 @@
+import type { Prisma, Identity } from '@prisma/client'
+import type { ScenarioData } from '@redwoodjs/testing/api'
+
+export const standard = defineScenario<Prisma.IdentityCreateArgs>({
+  identity: {
+    one: {
+      data: {
+        provider: 'String',
+        uid: 'String',
+        updatedAt: '2024-10-04T12:47:55.457Z',
+        user: {
+          create: {
+            email: 'String3211260',
+            updatedAt: '2024-10-04T12:47:55.457Z',
+          },
+        },
+      },
+    },
+    two: {
+      data: {
+        provider: 'String',
+        uid: 'String',
+        updatedAt: '2024-10-04T12:47:55.457Z',
+        user: {
+          create: {
+            email: 'String2559297',
+            updatedAt: '2024-10-04T12:47:55.457Z',
+          },
+        },
+      },
+    },
+  },
+})
+
+export type StandardScenario = ScenarioData<Identity, 'identity'>

api/src/services/identities/identities.test.ts

@@ -0,0 +1,18 @@
+import type { Identity } from '@prisma/client'
+
+import { identities } from './identities'
+import type { StandardScenario } from './identities.scenarios'
+
+// Generated boilerplate tests do not account for all circumstances
+// and can fail without adjustments, e.g. Float.
+//           Please refer to the RedwoodJS Testing Docs:
+//       https://redwoodjs.com/docs/testing#testing-services
+// https://redwoodjs.com/docs/testing#jest-expect-type-considerations
+
+describe('identities', () => {
+  scenario('returns all identities', async (scenario: StandardScenario) => {
+    const result = await identities()
+
+    expect(result.length).toEqual(Object.keys(scenario.identity).length)
+  })
+})

api/src/services/identities/identities.ts

@@ -0,0 +1,19 @@
+import type { QueryResolvers, IdentityRelationResolvers } from 'types/graphql'
+
+import { db } from 'src/lib/db'
+
+export const identities: QueryResolvers['identities'] = () => {
+  return db.identity.findMany()
+}
+
+export const identity: QueryResolvers['identity'] = ({ id }) => {
+  return db.identity.findUnique({
+    where: { id },
+  })
+}
+
+export const Identity: IdentityRelationResolvers = {
+  user: (_obj, { root }) => {
+    return db.identity.findUnique({ where: { id: root?.id } }).user()
+  },
+}

api/src/services/nachhilfeangebots/nachhilfeangebots.scenarios.ts

@@ -0,0 +1,26 @@
+import type { Prisma, Nachhilfeangebot } from '@prisma/client'
+import type { ScenarioData } from '@redwoodjs/testing/api'
+
+export const standard = defineScenario<Prisma.NachhilfeangebotCreateArgs>({
+  nachhilfeangebot: {
+    one: {
+      data: {
+        subject: 'String',
+        currentClass: 'String',
+        cost: 9626711.68060984,
+      },
+    },
+    two: {
+      data: {
+        subject: 'String',
+        currentClass: 'String',
+        cost: 3400746.9395209556,
+      },
+    },
+  },
+})
+
+export type StandardScenario = ScenarioData<
+  Nachhilfeangebot,
+  'nachhilfeangebot'
+>

api/src/services/nachhilfeangebots/nachhilfeangebots.test.ts

@@ -0,0 +1,75 @@
+import { Prisma, Nachhilfeangebot } from '@prisma/client'
+
+import {
+  nachhilfeangebots,
+  nachhilfeangebot,
+  createNachhilfeangebot,
+  updateNachhilfeangebot,
+  deleteNachhilfeangebot,
+} from './nachhilfeangebots'
+import type { StandardScenario } from './nachhilfeangebots.scenarios'
+
+// Generated boilerplate tests do not account for all circumstances
+// and can fail without adjustments, e.g. Float.
+//           Please refer to the RedwoodJS Testing Docs:
+//       https://redwoodjs.com/docs/testing#testing-services
+// https://redwoodjs.com/docs/testing#jest-expect-type-considerations
+
+describe('nachhilfeangebots', () => {
+  scenario(
+    'returns all nachhilfeangebots',
+    async (scenario: StandardScenario) => {
+      const result = await nachhilfeangebots()
+
+      expect(result.length).toEqual(
+        Object.keys(scenario.nachhilfeangebot).length
+      )
+    }
+  )
+
+  scenario(
+    'returns a single nachhilfeangebot',
+    async (scenario: StandardScenario) => {
+      const result = await nachhilfeangebot({
+        id: scenario.nachhilfeangebot.one.id,
+      })
+
+      expect(result).toEqual(scenario.nachhilfeangebot.one)
+    }
+  )
+
+  scenario('creates a nachhilfeangebot', async () => {
+    const result = await createNachhilfeangebot({
+      input: {
+        subject: 'String',
+        currentClass: 'String',
+        cost: 3443924.824820386,
+      },
+    })
+
+    expect(result.subject).toEqual('String')
+    expect(result.currentClass).toEqual('String')
+    expect(result.cost).toEqual(new Prisma.Decimal(3443924.824820386))
+  })
+
+  scenario('updates a nachhilfeangebot', async (scenario: StandardScenario) => {
+    const original = (await nachhilfeangebot({
+      id: scenario.nachhilfeangebot.one.id,
+    })) as Nachhilfeangebot
+    const result = await updateNachhilfeangebot({
+      id: original.id,
+      input: { subject: 'String2' },
+    })
+
+    expect(result.subject).toEqual('String2')
+  })
+
+  scenario('deletes a nachhilfeangebot', async (scenario: StandardScenario) => {
+    const original = (await deleteNachhilfeangebot({
+      id: scenario.nachhilfeangebot.one.id,
+    })) as Nachhilfeangebot
+    const result = await nachhilfeangebot({ id: original.id })
+
+    expect(result).toEqual(null)
+  })
+})

api/src/services/nachhilfeangebots/nachhilfeangebots.ts

@@ -0,0 +1,43 @@
+import type { QueryResolvers, MutationResolvers } from 'types/graphql'
+
+import { db } from 'src/lib/db'
+
+export const nachhilfeangebots: QueryResolvers['nachhilfeangebots'] = () => {
+  return db.nachhilfeangebot.findMany()
+}
+
+export const nachhilfeangebot: QueryResolvers['nachhilfeangebot'] = ({
+  id,
+}) => {
+  return {
+    ...db.nachhilfeangebot.findUnique({
+      where: { id },
+    }),
+    user: db.nachhilfeangebot.findUnique({ where: { id } }).user(),
+  }
+}
+
+export const createNachhilfeangebot: MutationResolvers['createNachhilfeangebot'] =
+  ({ input }) => {
+    return db.nachhilfeangebot.create({
+      data: {
+        ...input,
+        userId: context.currentUser.id,
+      },
+    })
+  }
+
+export const updateNachhilfeangebot: MutationResolvers['updateNachhilfeangebot'] =
+  ({ id, input }) => {
+    return db.nachhilfeangebot.update({
+      data: input,
+      where: { id },
+    })
+  }
+
+export const deleteNachhilfeangebot: MutationResolvers['deleteNachhilfeangebot'] =
+  ({ id }) => {
+    return db.nachhilfeangebot.delete({
+      where: { id },
+    })
+  }

api/src/services/posts/posts.scenarios.ts

@@ -0,0 +1,23 @@
+import type { Prisma, Post } from '@prisma/client'
+import type { ScenarioData } from '@redwoodjs/testing/api'
+
+export const standard = defineScenario<Prisma.PostCreateArgs>({
+  post: {
+    one: {
+      data: {
+        title: 'String',
+        body: 'String',
+        updatedAt: '2024-10-04T07:38:59.006Z',
+      },
+    },
+    two: {
+      data: {
+        title: 'String',
+        body: 'String',
+        updatedAt: '2024-10-04T07:38:59.006Z',
+      },
+    },
+  },
+})
+
+export type StandardScenario = ScenarioData<Post, 'post'>

api/src/services/posts/posts.test.ts

@@ -0,0 +1,55 @@
+import type { Post } from '@prisma/client'
+
+import { posts, post, createPost, updatePost, deletePost } from './posts'
+import type { StandardScenario } from './posts.scenarios'
+
+// Generated boilerplate tests do not account for all circumstances
+// and can fail without adjustments, e.g. Float.
+//           Please refer to the RedwoodJS Testing Docs:
+//       https://redwoodjs.com/docs/testing#testing-services
+// https://redwoodjs.com/docs/testing#jest-expect-type-considerations
+
+describe('posts', () => {
+  scenario('returns all posts', async (scenario: StandardScenario) => {
+    const result = await posts()
+
+    expect(result.length).toEqual(Object.keys(scenario.post).length)
+  })
+
+  scenario('returns a single post', async (scenario: StandardScenario) => {
+    const result = await post({ id: scenario.post.one.id })
+
+    expect(result).toEqual(scenario.post.one)
+  })
+
+  scenario('creates a post', async () => {
+    const result = await createPost({
+      input: {
+        title: 'String',
+        body: 'String',
+        updatedAt: '2024-10-04T07:38:58.985Z',
+      },
+    })
+
+    expect(result.title).toEqual('String')
+    expect(result.body).toEqual('String')
+    expect(result.updatedAt).toEqual(new Date('2024-10-04T07:38:58.985Z'))
+  })
+
+  scenario('updates a post', async (scenario: StandardScenario) => {
+    const original = (await post({ id: scenario.post.one.id })) as Post
+    const result = await updatePost({
+      id: original.id,
+      input: { title: 'String2' },
+    })
+
+    expect(result.title).toEqual('String2')
+  })
+
+  scenario('deletes a post', async (scenario: StandardScenario) => {
+    const original = (await deletePost({ id: scenario.post.one.id })) as Post
+    const result = await post({ id: original.id })
+
+    expect(result).toEqual(null)
+  })
+})

api/src/services/posts/posts.ts

@@ -0,0 +1,32 @@
+import type { QueryResolvers, MutationResolvers } from 'types/graphql'
+
+import { db } from 'src/lib/db'
+
+export const posts: QueryResolvers['posts'] = () => {
+  return db.post.findMany()
+}
+
+export const post: QueryResolvers['post'] = ({ id }) => {
+  return db.post.findUnique({
+    where: { id },
+  })
+}
+
+export const createPost: MutationResolvers['createPost'] = ({ input }) => {
+  return db.post.create({
+    data: input,
+  })
+}
+
+export const updatePost: MutationResolvers['updatePost'] = ({ id, input }) => {
+  return db.post.update({
+    data: input,
+    where: { id },
+  })
+}
+
+export const deletePost: MutationResolvers['deletePost'] = ({ id }) => {
+  return db.post.delete({
+    where: { id },
+  })
+}

api/src/services/users/users.scenarios.ts

@@ -0,0 +1,15 @@
+import type { Prisma, User } from '@prisma/client'
+import type { ScenarioData } from '@redwoodjs/testing/api'
+
+export const standard = defineScenario<Prisma.UserCreateArgs>({
+  user: {
+    one: {
+      data: { email: 'String5874784', updatedAt: '2024-10-04T12:47:22.490Z' },
+    },
+    two: {
+      data: { email: 'String7499025', updatedAt: '2024-10-04T12:47:22.490Z' },
+    },
+  },
+})
+
+export type StandardScenario = ScenarioData<User, 'user'>

api/src/services/users/users.test.ts

@@ -0,0 +1,18 @@
+import type { User } from '@prisma/client'
+
+import { users } from './users'
+import type { StandardScenario } from './users.scenarios'
+
+// Generated boilerplate tests do not account for all circumstances
+// and can fail without adjustments, e.g. Float.
+//           Please refer to the RedwoodJS Testing Docs:
+//       https://redwoodjs.com/docs/testing#testing-services
+// https://redwoodjs.com/docs/testing#jest-expect-type-considerations
+
+describe('users', () => {
+  scenario('returns all users', async (scenario: StandardScenario) => {
+    const result = await users()
+
+    expect(result.length).toEqual(Object.keys(scenario.user).length)
+  })
+})

api/src/services/users/users.ts

@@ -0,0 +1,22 @@
+import type { QueryResolvers, UserRelationResolvers } from 'types/graphql'
+
+import { db } from 'src/lib/db'
+
+export const users: QueryResolvers['users'] = () => {
+  return db.user.findMany()
+}
+
+export const user: QueryResolvers['user'] = ({ id }) => {
+  return db.user.findUnique({
+    where: { id },
+  })
+}
+
+export const User: UserRelationResolvers = {
+  identites: (_obj, { root }) => {
+    return db.user.findUnique({ where: { id: root?.id } }).identites()
+  },
+  Nachhilfeangebot: (_obj, { root }) => {
+    return db.user.findUnique({ where: { id: root?.id } }).Nachhilfeangebot()
+  },
+}

package.json

@@ -8,8 +8,10 @@
   },
   "devDependencies": {
     "@redwoodjs/auth-dbauth-setup": "8.3.0",
+    "@redwoodjs/cli-storybook-vite": "8.3.0",
     "@redwoodjs/core": "8.3.0",
-    "@redwoodjs/project-config": "8.3.0"
+    "@redwoodjs/project-config": "8.3.0",
+    "prettier-plugin-tailwindcss": "^0.5.12"
   },
   "eslintConfig": {
     "extends": "@redwoodjs/eslint-config",
@@ -26,6 +28,7 @@
     "@storybook/react-dom-shim@npm:7.6.17": "https://verdaccio.tobbe.dev/@storybook/react-dom-shim/-/react-dom-shim-8.0.8.tgz"
   },
   "dependencies": {
+    "@headlessui/react": "^2.1.9",
     "crypto-js": "^4.2.0"
   }
 }

prettier.config.js

@@ -15,4 +15,6 @@ module.exports = {
       },
     },
   ],
+  tailwindConfig: './web/config/tailwind.config.js',
+  plugins: ['prettier-plugin-tailwindcss'],
 }

web/.storybook/main.ts

@@ -0,0 +1,19 @@
+import type { StorybookConfig } from 'storybook-framework-redwoodjs-vite'
+
+import { getPaths, importStatementPath } from '@redwoodjs/project-config'
+
+const redwoodProjectPaths = getPaths()
+
+const config: StorybookConfig = {
+  framework: 'storybook-framework-redwoodjs-vite',
+
+  stories: [
+    `${importStatementPath(
+      redwoodProjectPaths.web.src
+    )}/**/*.stories.@(js|jsx|ts|tsx|mdx)`,
+  ],
+
+  addons: ['@storybook/addon-essentials'],
+}
+
+export default config

web/.storybook/preview-body.html

@@ -0,0 +1 @@
+<div id="redwood-app"></div>

web/config/postcss.config.js

@@ -0,0 +1,9 @@
+const path = require('path')
+
+module.exports = {
+  plugins: [
+    require('tailwindcss/nesting'),
+    require('tailwindcss')(path.resolve(__dirname, 'tailwind.config.js')),
+    require('autoprefixer'),
+  ],
+}

web/config/tailwind.config.js

@@ -0,0 +1,9 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ['src/**/*.{js,jsx,ts,tsx}'],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+

web/package.json

@@ -11,17 +11,23 @@
     ]
   },
   "dependencies": {
+    "@heroicons/react": "^2.1.5",
     "@redwoodjs/auth-dbauth-web": "8.3.0",
     "@redwoodjs/forms": "8.3.0",
     "@redwoodjs/router": "8.3.0",
     "@redwoodjs/web": "8.3.0",
     "@redwoodjs/web-server": "8.3.0",
+    "humanize-string": "2.1.0",
     "react": "18.3.1",
     "react-dom": "18.3.1"
   },
   "devDependencies": {
     "@redwoodjs/vite": "8.3.0",
     "@types/react": "^18.2.55",
-    "@types/react-dom": "^18.2.19"
+    "@types/react-dom": "^18.2.19",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.47",
+    "postcss-loader": "^8.1.1",
+    "tailwindcss": "^3.4.13"
   }
 }

web/src/Routes.tsx

@@ -7,17 +7,37 @@
 // 'src/pages/HomePage/HomePage.js'         -> HomePage
 // 'src/pages/Admin/BooksPage/BooksPage.js' -> AdminBooksPage
 
-import { Router, Route } from '@redwoodjs/router'
+import { Set, Router, Route, PrivateSet } from '@redwoodjs/router'
+
+import NavigationLayout from 'src/layouts/NavigationLayout'
+import ScaffoldLayout from 'src/layouts/ScaffoldLayout'
 
 import { useAuth } from './auth'
 
 const Routes = () => {
   return (
     <Router useAuth={useAuth}>
-      <Route path="/login" page={LoginPage} name="login" />
-      <Route path="/signup" page={SignupPage} name="signup" />
-      <Route path="/forgot-password" page={ForgotPasswordPage} name="forgotPassword" />
-      <Route path="/reset-password" page={ResetPasswordPage} name="resetPassword" />
+      <PrivateSet wrap={NavigationLayout} unauthenticated="home">
+        <Route path="/dashboard" page={DashboardPage} name="dashboard" />
+        <PrivateSet unauthenticated="home" roles="admin">
+          <Set wrap={ScaffoldLayout} title="Posts" titleTo="posts" buttonLabel="New Post" buttonTo="newPost">
+            <Route path="/admin/posts/new" page={PostNewPostPage} name="newPost" />
+            <Route path="/admin/posts/{id:Int}/edit" page={PostEditPostPage} name="editPost" />
+            <Route path="/admin/posts/{id:Int}" page={PostPostPage} name="post" />
+            <Route path="/admin/posts" page={PostPostsPage} name="posts" />
+          </Set>
+          <Set wrap={ScaffoldLayout} title="Nachhilfeangebote" titleTo="nachhilfeangebote" buttonLabel="New Nachhilfeangebot" buttonTo="newNachhilfeangebot">
+            <Route path="/admin/nachhilfeangebote/new" page={NachhilfeangebotNewNachhilfeangebotPage} name="newNachhilfeangebot" />
+            <Route path="/admin/nachhilfeangebote/{id:Int}/edit" page={NachhilfeangebotEditNachhilfeangebotPage} name="editNachhilfeangebot" />
+            <Route path="/admin/nachhilfeangebote/{id:Int}" page={NachhilfeangebotNachhilfeangebotPage} name="nachhilfeangebot" />
+            <Route path="/admin/nachhilfeangebote" page={NachhilfeangebotNachhilfeangebotsPage} name="nachhilfeangebote" />
+          </Set>
+        </PrivateSet>
+      </PrivateSet>
+      {/* <Route path="/login" page={LoginPage} name="login" /> */}
+      {/* <Route path="/signup" page={SignupPage} name="signup" /> */}
+      {/* <Route path="/forgot-password" page={ForgotPasswordPage} name="forgotPassword" /> */}
+      {/* <Route path="/reset-password" page={ResetPasswordPage} name="resetPassword" /> */}
       <Route path="/" page={HomePage} name="home" />
       <Route notfound page={NotFoundPage} />
     </Router>

web/src/components/Hero/Hero.stories.tsx

@@ -0,0 +1,26 @@
+// Pass props to your component by passing an `args` object to your story
+//
+// ```tsx
+// export const Primary: Story = {
+//  args: {
+//    propName: propValue
+//  }
+// }
+// ```
+//
+// See https://storybook.js.org/docs/react/writing-stories/args.
+
+import type { Meta, StoryObj } from '@storybook/react'
+
+import Hero from './Hero'
+
+const meta: Meta<typeof Hero> = {
+  component: Hero,
+  tags: ['autodocs'],
+}
+
+export default meta
+
+type Story = StoryObj<typeof Hero>
+
+export const Primary: Story = {}

web/src/components/Hero/Hero.test.tsx

@@ -0,0 +1,14 @@
+import { render } from '@redwoodjs/testing/web'
+
+import Hero from './Hero'
+
+//   Improve this test with help from the Redwood Testing Doc:
+//    https://redwoodjs.com/docs/testing#testing-components
+
+describe('Hero', () => {
+  it('renders successfully', () => {
+    expect(() => {
+      render(<Hero />)
+    }).not.toThrow()
+  })
+})

web/src/components/Hero/Hero.tsx

@@ -0,0 +1,117 @@
+import React, { useEffect } from 'react'
+
+import { ChevronRightIcon } from '@heroicons/react/20/solid'
+
+import { navigate, routes } from '@redwoodjs/router'
+
+import { useAuth } from 'src/auth'
+
+export default function Hero() {
+  const { isAuthenticated } = useAuth()
+
+  useEffect(() => {
+    if (isAuthenticated) {
+      navigate(routes.dashboard())
+    }
+  }, [isAuthenticated])
+
+  return (
+    <div className="bg-white">
+      <div className="relative isolate overflow-hidden bg-gradient-to-b from-indigo-100/20">
+        <div className="mx-auto max-w-7xl pb-24 pt-10 sm:pb-32 lg:grid lg:grid-cols-2 lg:gap-x-8 lg:px-8 lg:py-40">
+          <div className="px-6 lg:px-0 lg:pt-4">
+            <div className="mx-auto max-w-2xl">
+              <div className="max-w-lg">
+                <img
+                  className="h-11"
+                  src="https://tailwindui.com/plus/img/logos/mark.svg?color=indigo&shade=600"
+                  alt="Your Company"
+                />
+                <div className="mt-24 sm:mt-32 lg:mt-16">
+                  <a
+                    href="https://git.kocoder.xyz/kocoded/Nachhilfesystem24/releases"
+                    className="inline-flex space-x-6"
+                  >
+                    <span className="rounded-full bg-indigo-600/10 px-3 py-1 text-sm font-semibold leading-6 text-indigo-600 ring-1 ring-inset ring-indigo-600/10">
+                      What&quot;s new
+                    </span>
+                    <span className="inline-flex items-center space-x-2 text-sm font-medium leading-6 text-gray-600">
+                      <span>Just shipped v0.1.0</span>
+                      <ChevronRightIcon
+                        className="h-5 w-5 text-gray-400"
+                        aria-hidden="true"
+                      />
+                    </span>
+                  </a>
+                </div>
+                <h1 className="mt-10 text-4xl font-bold tracking-tight text-gray-900 sm:text-6xl">
+                  Nachhilfesystem SZU
+                </h1>
+                <p className="mt-6 text-lg leading-8 text-gray-600">
+                  Hier ist das neue Nachhilfesystem für das SZU! Klicke unten
+                  auf den Link, um dich mit deinem Microsoft Konto anzumelden.
+                </p>
+                <div className="mt-10 flex items-center gap-x-6">
+                  <a
+                    href={`https://login.microsoftonline.com/common/oauth2/v2.0/authorize?client_id=${
+                      process.env.MICROSOFT_OAUTH_CLIENT_ID
+                    }&grant_type=authorization_code&response_type=code&redirect_uri=${
+                      process.env.MICROSOFT_OAUTH_REDIRECT_URI
+                    }&scope=${process.env.MICROSOFT_OAUTH_SCOPES.split(' ').join('+')}`}
+                    className="rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+                  >
+                    Anmelden
+                  </a>
+                  <a
+                    href="https://git.kocoder.xyz/kocoded/Nachhilfesystem24"
+                    className="text-sm font-semibold leading-6 text-gray-900"
+                  >
+                    View on Gitea <span aria-hidden="true">→</span>
+                  </a>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className="mt-20 sm:mt-24 md:mx-auto md:max-w-2xl lg:mx-0 lg:mt-0 lg:w-screen">
+            <div
+              className="absolute inset-y-0 right-1/2 -z-10 -mr-10 w-[200%] skew-x-[-30deg] bg-white shadow-xl shadow-indigo-600/10 ring-1 ring-indigo-50 md:-mr-20 lg:-mr-36"
+              aria-hidden="true"
+            />
+            <div className="shadow-lg md:rounded-3xl">
+              <div className="bg-indigo-500 [clip-path:inset(0)] md:[clip-path:inset(0_round_theme(borderRadius.3xl))]">
+                <div
+                  className="absolute -inset-y-px left-1/2 -z-10 ml-10 w-[200%] skew-x-[-30deg] bg-indigo-100 opacity-20 ring-1 ring-inset ring-white md:ml-20 lg:ml-36"
+                  aria-hidden="true"
+                />
+                <div className="relative px-6 pt-8 sm:pt-16 md:pl-16 md:pr-0">
+                  <div className="mx-auto max-w-2xl md:mx-0 md:max-w-none">
+                    <div className="w-screen overflow-hidden rounded-tl-xl bg-gray-900">
+                      <div className="flex bg-gray-800/40 ring-1 ring-white/5">
+                        <div className="-mb-px flex text-sm font-medium leading-6 text-gray-400">
+                          <div className="border-b border-r border-b-white/20 border-r-white/10 bg-white/5 px-4 py-2 text-white">
+                            NotificationSetting.jsx
+                          </div>
+                          <div className="border-r border-gray-600/10 px-4 py-2">
+                            App.jsx
+                          </div>
+                        </div>
+                      </div>
+                      <div className="px-6 pb-14 pt-6">
+                        {/* Your code example */}
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    className="pointer-events-none absolute inset-0 ring-1 ring-inset ring-black/10 md:rounded-3xl"
+                    aria-hidden="true"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="absolute inset-x-0 bottom-0 -z-10 h-24 bg-gradient-to-t from-white sm:h-32" />
+      </div>
+    </div>
+  )
+}

web/src/components/Nachhilfeangebot/EditNachhilfeangebotCell/EditNachhilfeangebotCell.tsx

@@ -0,0 +1,92 @@
+import type {
+  EditNachhilfeangebotById,
+  UpdateNachhilfeangebotInput,
+  UpdateNachhilfeangebotMutationVariables,
+} from 'types/graphql'
+
+import { navigate, routes } from '@redwoodjs/router'
+import type {
+  CellSuccessProps,
+  CellFailureProps,
+  TypedDocumentNode,
+} from '@redwoodjs/web'
+import { useMutation } from '@redwoodjs/web'
+import { toast } from '@redwoodjs/web/toast'
+
+import NachhilfeangebotForm from 'src/components/Nachhilfeangebot/NachhilfeangebotForm'
+
+export const QUERY: TypedDocumentNode<EditNachhilfeangebotById> = gql`
+  query EditNachhilfeangebotById($id: Int!) {
+    nachhilfeangebot: nachhilfeangebot(id: $id) {
+      id
+      subject
+      currentClass
+      cost
+    }
+  }
+`
+
+const UPDATE_NACHHILFEANGEBOT_MUTATION: TypedDocumentNode<
+  EditNachhilfeangebotById,
+  UpdateNachhilfeangebotMutationVariables
+> = gql`
+  mutation UpdateNachhilfeangebotMutation(
+    $id: Int!
+    $input: UpdateNachhilfeangebotInput!
+  ) {
+    updateNachhilfeangebot(id: $id, input: $input) {
+      id
+      subject
+      currentClass
+      cost
+    }
+  }
+`
+
+export const Loading = () => <div>Loading...</div>
+
+export const Failure = ({ error }: CellFailureProps) => (
+  <div className="rw-cell-error">{error?.message}</div>
+)
+
+export const Success = ({
+  nachhilfeangebot,
+}: CellSuccessProps<EditNachhilfeangebotById>) => {
+  const [updateNachhilfeangebot, { loading, error }] = useMutation(
+    UPDATE_NACHHILFEANGEBOT_MUTATION,
+    {
+      onCompleted: () => {
+        toast.success('Nachhilfeangebot updated')
+        navigate(routes.nachhilfeangebots())
+      },
+      onError: (error) => {
+        toast.error(error.message)
+      },
+    }
+  )
+
+  const onSave = (
+    input: UpdateNachhilfeangebotInput,
+    id: EditNachhilfeangebotById['nachhilfeangebot']['id']
+  ) => {
+    updateNachhilfeangebot({ variables: { id, input } })
+  }
+
+  return (
+    <div className="rw-segment">
+      <header className="rw-segment-header">
+        <h2 className="rw-heading rw-heading-secondary">
+          Edit Nachhilfeangebot {nachhilfeangebot?.id}
+        </h2>
+      </header>
+      <div className="rw-segment-main">
+        <NachhilfeangebotForm
+          nachhilfeangebot={nachhilfeangebot}
+          onSave={onSave}
+          error={error}
+          loading={loading}
+        />
+      </div>
+    </div>
+  )
+}

web/src/components/Nachhilfeangebot/Nachhilfeangebot/Nachhilfeangebot.tsx

@@ -0,0 +1,99 @@
+import type {
+  DeleteNachhilfeangebotMutation,
+  DeleteNachhilfeangebotMutationVariables,
+  FindNachhilfeangebotById,
+} from 'types/graphql'
+
+import { Link, routes, navigate } from '@redwoodjs/router'
+import { useMutation } from '@redwoodjs/web'
+import type { TypedDocumentNode } from '@redwoodjs/web'
+import { toast } from '@redwoodjs/web/toast'
+
+import {} from 'src/lib/formatters'
+
+const DELETE_NACHHILFEANGEBOT_MUTATION: TypedDocumentNode<
+  DeleteNachhilfeangebotMutation,
+  DeleteNachhilfeangebotMutationVariables
+> = gql`
+  mutation DeleteNachhilfeangebotMutation($id: Int!) {
+    deleteNachhilfeangebot(id: $id) {
+      id
+    }
+  }
+`
+
+interface Props {
+  nachhilfeangebot: NonNullable<FindNachhilfeangebotById['nachhilfeangebot']>
+}
+
+const Nachhilfeangebot = ({ nachhilfeangebot }: Props) => {
+  const [deleteNachhilfeangebot] = useMutation(
+    DELETE_NACHHILFEANGEBOT_MUTATION,
+    {
+      onCompleted: () => {
+        toast.success('Nachhilfeangebot deleted')
+        navigate(routes.nachhilfeangebote())
+      },
+      onError: (error) => {
+        toast.error(error.message)
+      },
+    }
+  )
+
+  const onDeleteClick = (id: DeleteNachhilfeangebotMutationVariables['id']) => {
+    if (
+      confirm('Are you sure you want to delete nachhilfeangebot ' + id + '?')
+    ) {
+      deleteNachhilfeangebot({ variables: { id } })
+    }
+  }
+
+  return (
+    <>
+      <div className="rw-segment">
+        <header className="rw-segment-header">
+          <h2 className="rw-heading rw-heading-secondary">
+            Nachhilfeangebot {nachhilfeangebot.id} Detail
+          </h2>
+        </header>
+        <table className="rw-table">
+          <tbody>
+            <tr>
+              <th>Id</th>
+              <td>{nachhilfeangebot.id}</td>
+            </tr>
+            <tr>
+              <th>Subject</th>
+              <td>{nachhilfeangebot.subject}</td>
+            </tr>
+            <tr>
+              <th>Current class</th>
+              <td>{nachhilfeangebot.currentClass}</td>
+            </tr>
+            <tr>
+              <th>Cost</th>
+              <td>{nachhilfeangebot.cost}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <nav className="rw-button-group">
+        <Link
+          to={routes.editNachhilfeangebot({ id: nachhilfeangebot.id })}
+          className="rw-button rw-button-blue"
+        >
+          Edit
+        </Link>
+        <button
+          type="button"
+          className="rw-button rw-button-red"
+          onClick={() => onDeleteClick(nachhilfeangebot.id)}
+        >
+          Delete
+        </button>
+      </nav>
+    </>
+  )
+}
+
+export default Nachhilfeangebot

web/src/components/Nachhilfeangebot/NachhilfeangebotCell/NachhilfeangebotCell.tsx

@@ -0,0 +1,45 @@
+import type {
+  FindNachhilfeangebotById,
+  FindNachhilfeangebotByIdVariables,
+} from 'types/graphql'
+
+import type {
+  CellSuccessProps,
+  CellFailureProps,
+  TypedDocumentNode,
+} from '@redwoodjs/web'
+
+import Nachhilfeangebot from 'src/components/Nachhilfeangebot/Nachhilfeangebot'
+
+export const QUERY: TypedDocumentNode<
+  FindNachhilfeangebotById,
+  FindNachhilfeangebotByIdVariables
+> = gql`
+  query FindNachhilfeangebotById($id: Int!) {
+    nachhilfeangebot: nachhilfeangebot(id: $id) {
+      id
+      subject
+      currentClass
+      cost
+    }
+  }
+`
+
+export const Loading = () => <div>Loading...</div>
+
+export const Empty = () => <div>Nachhilfeangebot not found</div>
+
+export const Failure = ({
+  error,
+}: CellFailureProps<FindNachhilfeangebotByIdVariables>) => (
+  <div className="rw-cell-error">{error?.message}</div>
+)
+
+export const Success = ({
+  nachhilfeangebot,
+}: CellSuccessProps<
+  FindNachhilfeangebotById,
+  FindNachhilfeangebotByIdVariables
+>) => {
+  return <Nachhilfeangebot nachhilfeangebot={nachhilfeangebot} />
+}

web/src/components/Nachhilfeangebot/NachhilfeangebotForm/NachhilfeangebotForm.tsx

@@ -0,0 +1,109 @@
+import type {
+  EditNachhilfeangebotById,
+  UpdateNachhilfeangebotInput,
+} from 'types/graphql'
+
+import type { RWGqlError } from '@redwoodjs/forms'
+import {
+  Form,
+  FormError,
+  FieldError,
+  Label,
+  TextField,
+  Submit,
+} from '@redwoodjs/forms'
+
+type FormNachhilfeangebot = NonNullable<
+  EditNachhilfeangebotById['nachhilfeangebot']
+>
+
+interface NachhilfeangebotFormProps {
+  nachhilfeangebot?: EditNachhilfeangebotById['nachhilfeangebot']
+  onSave: (
+    data: UpdateNachhilfeangebotInput,
+    id?: FormNachhilfeangebot['id']
+  ) => void
+  error: RWGqlError
+  loading: boolean
+}
+
+const NachhilfeangebotForm = (props: NachhilfeangebotFormProps) => {
+  const onSubmit = (data: FormNachhilfeangebot) => {
+    props.onSave(data, props?.nachhilfeangebot?.id)
+  }
+
+  return (
+    <div className="rw-form-wrapper">
+      <Form<FormNachhilfeangebot> onSubmit={onSubmit} error={props.error}>
+        <FormError
+          error={props.error}
+          wrapperClassName="rw-form-error-wrapper"
+          titleClassName="rw-form-error-title"
+          listClassName="rw-form-error-list"
+        />
+
+        <Label
+          name="subject"
+          className="rw-label"
+          errorClassName="rw-label rw-label-error"
+        >
+          Subject
+        </Label>
+
+        <TextField
+          name="subject"
+          defaultValue={props.nachhilfeangebot?.subject}
+          className="rw-input"
+          errorClassName="rw-input rw-input-error"
+          validation={{ required: true }}
+        />
+
+        <FieldError name="subject" className="rw-field-error" />
+
+        <Label
+          name="currentClass"
+          className="rw-label"
+          errorClassName="rw-label rw-label-error"
+        >
+          Current class
+        </Label>
+
+        <TextField
+          name="currentClass"
+          defaultValue={props.nachhilfeangebot?.currentClass}
+          className="rw-input"
+          errorClassName="rw-input rw-input-error"
+          validation={{ required: true }}
+        />
+
+        <FieldError name="currentClass" className="rw-field-error" />
+
+        <Label
+          name="cost"
+          className="rw-label"
+          errorClassName="rw-label rw-label-error"
+        >
+          Cost
+        </Label>
+
+        <TextField
+          name="cost"
+          defaultValue={props.nachhilfeangebot?.cost}
+          className="rw-input"
+          errorClassName="rw-input rw-input-error"
+          validation={{ valueAsNumber: true, required: true }}
+        />
+
+        <FieldError name="cost" className="rw-field-error" />
+
+        <div className="rw-button-group">
+          <Submit disabled={props.loading} className="rw-button rw-button-blue">
+            Save
+          </Submit>
+        </div>
+      </Form>
+    </div>
+  )
+}
+
+export default NachhilfeangebotForm

web/src/components/Nachhilfeangebot/Nachhilfeangebots/Nachhilfeangebots.tsx

@@ -0,0 +1,111 @@
+import type {
+  DeleteNachhilfeangebotMutation,
+  DeleteNachhilfeangebotMutationVariables,
+  FindNachhilfeangebots,
+} from 'types/graphql'
+
+import { Link, routes } from '@redwoodjs/router'
+import { useMutation } from '@redwoodjs/web'
+import type { TypedDocumentNode } from '@redwoodjs/web'
+import { toast } from '@redwoodjs/web/toast'
+
+import { QUERY } from 'src/components/Nachhilfeangebot/NachhilfeangebotsCell'
+import { truncate } from 'src/lib/formatters'
+
+const DELETE_NACHHILFEANGEBOT_MUTATION: TypedDocumentNode<
+  DeleteNachhilfeangebotMutation,
+  DeleteNachhilfeangebotMutationVariables
+> = gql`
+  mutation DeleteNachhilfeangebotMutation($id: Int!) {
+    deleteNachhilfeangebot(id: $id) {
+      id
+    }
+  }
+`
+
+const NachhilfeangebotsList = ({
+  nachhilfeangebots,
+}: FindNachhilfeangebots) => {
+  const [deleteNachhilfeangebot] = useMutation(
+    DELETE_NACHHILFEANGEBOT_MUTATION,
+    {
+      onCompleted: () => {
+        toast.success('Nachhilfeangebot deleted')
+      },
+      onError: (error) => {
+        toast.error(error.message)
+      },
+      // This refetches the query on the list page. Read more about other ways to
+      // update the cache over here:
+      // https://www.apollographql.com/docs/react/data/mutations/#making-all-other-cache-updates
+      refetchQueries: [{ query: QUERY }],
+      awaitRefetchQueries: true,
+    }
+  )
+
+  const onDeleteClick = (id: DeleteNachhilfeangebotMutationVariables['id']) => {
+    if (
+      confirm('Are you sure you want to delete nachhilfeangebot ' + id + '?')
+    ) {
+      deleteNachhilfeangebot({ variables: { id } })
+    }
+  }
+
+  return (
+    <div className="rw-segment rw-table-wrapper-responsive">
+      <table className="rw-table">
+        <thead>
+          <tr>
+            <th>Id</th>
+            <th>Subject</th>
+            <th>Current class</th>
+            <th>Cost</th>
+            <th>&nbsp;</th>
+          </tr>
+        </thead>
+        <tbody>
+          {nachhilfeangebots.map((nachhilfeangebot) => (
+            <tr key={nachhilfeangebot.id}>
+              <td>{truncate(nachhilfeangebot.id)}</td>
+              <td>{truncate(nachhilfeangebot.subject)}</td>
+              <td>{truncate(nachhilfeangebot.currentClass)}</td>
+              <td>{truncate(nachhilfeangebot.cost)}</td>
+              <td>
+                <nav className="rw-table-actions">
+                  <Link
+                    to={routes.nachhilfeangebot({ id: nachhilfeangebot.id })}
+                    title={
+                      'Show nachhilfeangebot ' + nachhilfeangebot.id + ' detail'
+                    }
+                    className="rw-button rw-button-small"
+                  >
+                    Show
+                  </Link>
+                  <Link
+                    to={routes.editNachhilfeangebot({
+                      id: nachhilfeangebot.id,
+                    })}
+                    title={'Edit nachhilfeangebot ' + nachhilfeangebot.id}
+                    className="rw-button rw-button-small rw-button-blue"
+                  >
+                    Edit
+                  </Link>
+                  <button
+                    type="button"
+                    title={'Delete nachhilfeangebot ' + nachhilfeangebot.id}
+                    className="rw-button rw-button-small rw-button-red"
+                    onClick={() => onDeleteClick(nachhilfeangebot.id)}
+                  >
+                    Delete
+                  </button>
+                </nav>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  )
+}
+
+export default NachhilfeangebotsList

web/src/components/Nachhilfeangebot/NachhilfeangebotsCell/NachhilfeangebotsCell.tsx

@@ -0,0 +1,50 @@
+import type {
+  FindNachhilfeangebots,
+  FindNachhilfeangebotsVariables,
+} from 'types/graphql'
+
+import { Link, routes } from '@redwoodjs/router'
+import type {
+  CellSuccessProps,
+  CellFailureProps,
+  TypedDocumentNode,
+} from '@redwoodjs/web'
+
+import Nachhilfeangebots from 'src/components/Nachhilfeangebot/Nachhilfeangebots'
+
+export const QUERY: TypedDocumentNode<
+  FindNachhilfeangebots,
+  FindNachhilfeangebotsVariables
+> = gql`
+  query FindNachhilfeangebots {
+    nachhilfeangebots {
+      id
+      subject
+      currentClass
+      cost
+    }
+  }
+`
+
+export const Loading = () => <div>Loading...</div>
+
+export const Empty = () => {
+  return (
+    <div className="rw-text-center">
+      Keine Nachhilfeangebote bis jetzt.{' '}
+      <Link to={routes.newNachhilfeangebot()} className="rw-link">
+        Ein neues erstellen?
+      </Link>
+    </div>
+  )
+}
+
+export const Failure = ({ error }: CellFailureProps<FindNachhilfeangebots>) => (
+  <div className="rw-cell-error">{error?.message}</div>
+)
+
+export const Success = ({
+  nachhilfeangebots,
+}: CellSuccessProps<FindNachhilfeangebots, FindNachhilfeangebotsVariables>) => {
+  return <Nachhilfeangebots nachhilfeangebots={nachhilfeangebots} />
+}

web/src/components/Nachhilfeangebot/NewNachhilfeangebot/NewNachhilfeangebot.tsx

@@ -0,0 +1,59 @@
+import type {
+  CreateNachhilfeangebotMutation,
+  CreateNachhilfeangebotInput,
+  CreateNachhilfeangebotMutationVariables,
+} from 'types/graphql'
+
+import { navigate, routes } from '@redwoodjs/router'
+import { useMutation } from '@redwoodjs/web'
+import type { TypedDocumentNode } from '@redwoodjs/web'
+import { toast } from '@redwoodjs/web/toast'
+
+import NachhilfeangebotForm from 'src/components/Nachhilfeangebot/NachhilfeangebotForm'
+
+const CREATE_NACHHILFEANGEBOT_MUTATION: TypedDocumentNode<
+  CreateNachhilfeangebotMutation,
+  CreateNachhilfeangebotMutationVariables
+> = gql`
+  mutation CreateNachhilfeangebotMutation(
+    $input: CreateNachhilfeangebotInput!
+  ) {
+    createNachhilfeangebot(input: $input) {
+      id
+    }
+  }
+`
+
+const NewNachhilfeangebot = () => {
+  const [createNachhilfeangebot, { loading, error }] = useMutation(
+    CREATE_NACHHILFEANGEBOT_MUTATION,
+    {
+      onCompleted: () => {
+        toast.success('Nachhilfeangebot created')
+        navigate(routes.nachhilfeangebote())
+      },
+      onError: (error) => {
+        toast.error(error.message)
+      },
+    }
+  )
+
+  const onSave = (input: CreateNachhilfeangebotInput) => {
+    createNachhilfeangebot({ variables: { input } })
+  }
+
+  return (
+    <div className="rw-segment">
+      <header className="rw-segment-header">
+        <h2 className="rw-heading rw-heading-secondary">
+          New Nachhilfeangebot
+        </h2>
+      </header>
+      <div className="rw-segment-main">
+        <NachhilfeangebotForm onSave={onSave} loading={loading} error={error} />
+      </div>
+    </div>
+  )
+}
+
+export default NewNachhilfeangebot

web/src/components/Post/EditPostCell/EditPostCell.tsx

@@ -0,0 +1,78 @@
+import type {
+  EditPostById,
+  UpdatePostInput,
+  UpdatePostMutationVariables,
+} from 'types/graphql'
+
+import { navigate, routes } from '@redwoodjs/router'
+import type {
+  CellSuccessProps,
+  CellFailureProps,
+  TypedDocumentNode,
+} from '@redwoodjs/web'
+import { useMutation } from '@redwoodjs/web'
+import { toast } from '@redwoodjs/web/toast'
+
+import PostForm from 'src/components/Post/PostForm'
+
+export const QUERY: TypedDocumentNode<EditPostById> = gql`
+  query EditPostById($id: Int!) {
+    post: post(id: $id) {
+      id
+      title
+      body
+      createdAt
+      updatedAt
+    }
+  }
+`
+
+const UPDATE_POST_MUTATION: TypedDocumentNode<
+  EditPostById,
+  UpdatePostMutationVariables
+> = gql`
+  mutation UpdatePostMutation($id: Int!, $input: UpdatePostInput!) {
+    updatePost(id: $id, input: $input) {
+      id
+      title
+      body
+      createdAt
+      updatedAt
+    }
+  }
+`
+
+export const Loading = () => <div>Loading...</div>
+
+export const Failure = ({ error }: CellFailureProps) => (
+  <div className="rw-cell-error">{error?.message}</div>
+)
+
+export const Success = ({ post }: CellSuccessProps<EditPostById>) => {
+  const [updatePost, { loading, error }] = useMutation(UPDATE_POST_MUTATION, {
+    onCompleted: () => {
+      toast.success('Post updated')
+      navigate(routes.posts())
+    },
+    onError: (error) => {
+      toast.error(error.message)
+    },
+  })
+
+  const onSave = (input: UpdatePostInput, id: EditPostById['post']['id']) => {
+    updatePost({ variables: { id, input } })
+  }
+
+  return (
+    <div className="rw-segment">
+      <header className="rw-segment-header">
+        <h2 className="rw-heading rw-heading-secondary">
+          Edit Post {post?.id}
+        </h2>
+      </header>
+      <div className="rw-segment-main">
+        <PostForm post={post} onSave={onSave} error={error} loading={loading} />
+      </div>
+    </div>
+  )
+}

web/src/components/Post/NewPost/NewPost.tsx

@@ -0,0 +1,52 @@
+import type {
+  CreatePostMutation,
+  CreatePostInput,
+  CreatePostMutationVariables,
+} from 'types/graphql'
+
+import { navigate, routes } from '@redwoodjs/router'
+import { useMutation } from '@redwoodjs/web'
+import type { TypedDocumentNode } from '@redwoodjs/web'
+import { toast } from '@redwoodjs/web/toast'
+
+import PostForm from 'src/components/Post/PostForm'
+
+const CREATE_POST_MUTATION: TypedDocumentNode<
+  CreatePostMutation,
+  CreatePostMutationVariables
+> = gql`
+  mutation CreatePostMutation($input: CreatePostInput!) {
+    createPost(input: $input) {
+      id
+    }
+  }
+`
+
+const NewPost = () => {
+  const [createPost, { loading, error }] = useMutation(CREATE_POST_MUTATION, {
+    onCompleted: () => {
+      toast.success('Post created')
+      navigate(routes.posts())
+    },
+    onError: (error) => {
+      toast.error(error.message)
+    },
+  })
+
+  const onSave = (input: CreatePostInput) => {
+    createPost({ variables: { input } })
+  }
+
+  return (
+    <div className="rw-segment">
+      <header className="rw-segment-header">
+        <h2 className="rw-heading rw-heading-secondary">New Post</h2>
+      </header>
+      <div className="rw-segment-main">
+        <PostForm onSave={onSave} loading={loading} error={error} />
+      </div>
+    </div>
+  )
+}
+
+export default NewPost

web/src/components/Post/Post/Post.tsx

@@ -0,0 +1,98 @@
+import type {
+  DeletePostMutation,
+  DeletePostMutationVariables,
+  FindPostById,
+} from 'types/graphql'
+
+import { Link, routes, navigate } from '@redwoodjs/router'
+import { useMutation } from '@redwoodjs/web'
+import type { TypedDocumentNode } from '@redwoodjs/web'
+import { toast } from '@redwoodjs/web/toast'
+
+import { timeTag } from 'src/lib/formatters'
+
+const DELETE_POST_MUTATION: TypedDocumentNode<
+  DeletePostMutation,
+  DeletePostMutationVariables
+> = gql`
+  mutation DeletePostMutation($id: Int!) {
+    deletePost(id: $id) {
+      id
+    }
+  }
+`
+
+interface Props {
+  post: NonNullable<FindPostById['post']>
+}
+
+const Post = ({ post }: Props) => {
+  const [deletePost] = useMutation(DELETE_POST_MUTATION, {
+    onCompleted: () => {
+      toast.success('Post deleted')
+      navigate(routes.posts())
+    },
+    onError: (error) => {
+      toast.error(error.message)
+    },
+  })
+
+  const onDeleteClick = (id: DeletePostMutationVariables['id']) => {
+    if (confirm('Are you sure you want to delete post ' + id + '?')) {
+      deletePost({ variables: { id } })
+    }
+  }
+
+  return (
+    <>
+      <div className="rw-segment">
+        <header className="rw-segment-header">
+          <h2 className="rw-heading rw-heading-secondary">
+            Post {post.id} Detail
+          </h2>
+        </header>
+        <table className="rw-table">
+          <tbody>
+            <tr>
+              <th>Id</th>
+              <td>{post.id}</td>
+            </tr>
+            <tr>
+              <th>Title</th>
+              <td>{post.title}</td>
+            </tr>
+            <tr>
+              <th>Body</th>
+              <td>{post.body}</td>
+            </tr>
+            <tr>
+              <th>Created at</th>
+              <td>{timeTag(post.createdAt)}</td>
+            </tr>
+            <tr>
+              <th>Updated at</th>
+              <td>{timeTag(post.updatedAt)}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <nav className="rw-button-group">
+        <Link
+          to={routes.editPost({ id: post.id })}
+          className="rw-button rw-button-blue"
+        >
+          Edit
+        </Link>
+        <button
+          type="button"
+          className="rw-button rw-button-red"
+          onClick={() => onDeleteClick(post.id)}
+        >
+          Delete
+        </button>
+      </nav>
+    </>
+  )
+}
+
+export default Post

web/src/components/Post/PostCell/PostCell.tsx

@@ -0,0 +1,36 @@
+import type { FindPostById, FindPostByIdVariables } from 'types/graphql'
+
+import type {
+  CellSuccessProps,
+  CellFailureProps,
+  TypedDocumentNode,
+} from '@redwoodjs/web'
+
+import Post from 'src/components/Post/Post'
+
+export const QUERY: TypedDocumentNode<FindPostById, FindPostByIdVariables> =
+  gql`
+    query FindPostById($id: Int!) {
+      post: post(id: $id) {
+        id
+        title
+        body
+        createdAt
+        updatedAt
+      }
+    }
+  `
+
+export const Loading = () => <div>Loading...</div>
+
+export const Empty = () => <div>Post not found</div>
+
+export const Failure = ({ error }: CellFailureProps<FindPostByIdVariables>) => (
+  <div className="rw-cell-error">{error?.message}</div>
+)
+
+export const Success = ({
+  post,
+}: CellSuccessProps<FindPostById, FindPostByIdVariables>) => {
+  return <Post post={post} />
+}

web/src/components/Post/PostForm/PostForm.tsx

@@ -0,0 +1,83 @@
+import type { EditPostById, UpdatePostInput } from 'types/graphql'
+
+import type { RWGqlError } from '@redwoodjs/forms'
+import {
+  Form,
+  FormError,
+  FieldError,
+  Label,
+  TextField,
+  Submit,
+} from '@redwoodjs/forms'
+
+type FormPost = NonNullable<EditPostById['post']>
+
+interface PostFormProps {
+  post?: EditPostById['post']
+  onSave: (data: UpdatePostInput, id?: FormPost['id']) => void
+  error: RWGqlError
+  loading: boolean
+}
+
+const PostForm = (props: PostFormProps) => {
+  const onSubmit = (data: FormPost) => {
+    props.onSave(data, props?.post?.id)
+  }
+
+  return (
+    <div className="rw-form-wrapper">
+      <Form<FormPost> onSubmit={onSubmit} error={props.error}>
+        <FormError
+          error={props.error}
+          wrapperClassName="rw-form-error-wrapper"
+          titleClassName="rw-form-error-title"
+          listClassName="rw-form-error-list"
+        />
+
+        <Label
+          name="title"
+          className="rw-label"
+          errorClassName="rw-label rw-label-error"
+        >
+          Title
+        </Label>
+
+        <TextField
+          name="title"
+          defaultValue={props.post?.title}
+          className="rw-input"
+          errorClassName="rw-input rw-input-error"
+          validation={{ required: true }}
+        />
+
+        <FieldError name="title" className="rw-field-error" />
+
+        <Label
+          name="body"
+          className="rw-label"
+          errorClassName="rw-label rw-label-error"
+        >
+          Body
+        </Label>
+
+        <TextField
+          name="body"
+          defaultValue={props.post?.body}
+          className="rw-input"
+          errorClassName="rw-input rw-input-error"
+          validation={{ required: true }}
+        />
+
+        <FieldError name="body" className="rw-field-error" />
+
+        <div className="rw-button-group">
+          <Submit disabled={props.loading} className="rw-button rw-button-blue">
+            Save
+          </Submit>
+        </div>
+      </Form>
+    </div>
+  )
+}
+
+export default PostForm

web/src/components/Post/Posts/Posts.tsx

@@ -0,0 +1,102 @@
+import type {
+  DeletePostMutation,
+  DeletePostMutationVariables,
+  FindPosts,
+} from 'types/graphql'
+
+import { Link, routes } from '@redwoodjs/router'
+import { useMutation } from '@redwoodjs/web'
+import type { TypedDocumentNode } from '@redwoodjs/web'
+import { toast } from '@redwoodjs/web/toast'
+
+import { QUERY } from 'src/components/Post/PostsCell'
+import { timeTag, truncate } from 'src/lib/formatters'
+
+const DELETE_POST_MUTATION: TypedDocumentNode<
+  DeletePostMutation,
+  DeletePostMutationVariables
+> = gql`
+  mutation DeletePostMutation($id: Int!) {
+    deletePost(id: $id) {
+      id
+    }
+  }
+`
+
+const PostsList = ({ posts }: FindPosts) => {
+  const [deletePost] = useMutation(DELETE_POST_MUTATION, {
+    onCompleted: () => {
+      toast.success('Post deleted')
+    },
+    onError: (error) => {
+      toast.error(error.message)
+    },
+    // This refetches the query on the list page. Read more about other ways to
+    // update the cache over here:
+    // https://www.apollographql.com/docs/react/data/mutations/#making-all-other-cache-updates
+    refetchQueries: [{ query: QUERY }],
+    awaitRefetchQueries: true,
+  })
+
+  const onDeleteClick = (id: DeletePostMutationVariables['id']) => {
+    if (confirm('Are you sure you want to delete post ' + id + '?')) {
+      deletePost({ variables: { id } })
+    }
+  }
+
+  return (
+    <div className="rw-segment rw-table-wrapper-responsive">
+      <table className="rw-table">
+        <thead>
+          <tr>
+            <th>Id</th>
+            <th>Title</th>
+            <th>Body</th>
+            <th>Created at</th>
+            <th>Updated at</th>
+            <th>&nbsp;</th>
+          </tr>
+        </thead>
+        <tbody>
+          {posts.map((post) => (
+            <tr key={post.id}>
+              <td>{truncate(post.id)}</td>
+              <td>{truncate(post.title)}</td>
+              <td>{truncate(post.body)}</td>
+              <td>{timeTag(post.createdAt)}</td>
+              <td>{timeTag(post.updatedAt)}</td>
+              <td>
+                <nav className="rw-table-actions">
+                  <Link
+                    to={routes.post({ id: post.id })}
+                    title={'Show post ' + post.id + ' detail'}
+                    className="rw-button rw-button-small"
+                  >
+                    Show
+                  </Link>
+                  <Link
+                    to={routes.editPost({ id: post.id })}
+                    title={'Edit post ' + post.id}
+                    className="rw-button rw-button-small rw-button-blue"
+                  >
+                    Edit
+                  </Link>
+                  <button
+                    type="button"
+                    title={'Delete post ' + post.id}
+                    className="rw-button rw-button-small rw-button-red"
+                    onClick={() => onDeleteClick(post.id)}
+                  >
+                    Delete
+                  </button>
+                </nav>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  )
+}
+
+export default PostsList

web/src/components/Post/PostsCell/PostsCell.tsx

@@ -0,0 +1,45 @@
+import type { FindPosts, FindPostsVariables } from 'types/graphql'
+
+import { Link, routes } from '@redwoodjs/router'
+import type {
+  CellSuccessProps,
+  CellFailureProps,
+  TypedDocumentNode,
+} from '@redwoodjs/web'
+
+import Posts from 'src/components/Post/Posts'
+
+export const QUERY: TypedDocumentNode<FindPosts, FindPostsVariables> = gql`
+  query FindPosts {
+    posts {
+      id
+      title
+      body
+      createdAt
+      updatedAt
+    }
+  }
+`
+
+export const Loading = () => <div>Loading...</div>
+
+export const Empty = () => {
+  return (
+    <div className="rw-text-center">
+      No posts yet.{' '}
+      <Link to={routes.newPost()} className="rw-link">
+        Create one?
+      </Link>
+    </div>
+  )
+}
+
+export const Failure = ({ error }: CellFailureProps<FindPosts>) => (
+  <div className="rw-cell-error">{error?.message}</div>
+)
+
+export const Success = ({
+  posts,
+}: CellSuccessProps<FindPosts, FindPostsVariables>) => {
+  return <Posts posts={posts} />
+}

web/src/index.css

@@ -0,0 +1,13 @@
+/**
+ * START --- SETUP TAILWINDCSS EDIT
+ *
+ * `yarn rw setup ui tailwindcss` placed these directives here
+ * to inject Tailwind's styles into your CSS.
+ * For more information, see: https://tailwindcss.com/docs/installation
+ */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+/**
+ * END --- SETUP TAILWINDCSS EDIT
+ */

web/src/layouts/NavigationLayout/NavigationLayout.stories.tsx

@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import NavigationLayout from './NavigationLayout'
+
+const meta: Meta<typeof NavigationLayout> = {
+  component: NavigationLayout,
+}
+
+export default meta
+
+type Story = StoryObj<typeof NavigationLayout>
+
+export const Primary: Story = {}

web/src/layouts/NavigationLayout/NavigationLayout.test.tsx

@@ -0,0 +1,14 @@
+import { render } from '@redwoodjs/testing/web'
+
+import NavigationLayout from './NavigationLayout'
+
+//   Improve this test with help from the Redwood Testing Doc:
+//   https://redwoodjs.com/docs/testing#testing-pages-layouts
+
+describe('NavigationLayout', () => {
+  it('renders successfully', () => {
+    expect(() => {
+      render(<NavigationLayout />)
+    }).not.toThrow()
+  })
+})

web/src/layouts/NavigationLayout/NavigationLayout.tsx

@@ -0,0 +1,266 @@
+type NavigationLayoutProps = {
+  children?: React.ReactNode
+}
+
+import { useState } from 'react'
+
+import {
+  Dialog,
+  DialogPanel,
+  Disclosure,
+  DisclosureButton,
+  DisclosurePanel,
+  Popover,
+  PopoverButton,
+  PopoverGroup,
+  PopoverPanel,
+} from '@headlessui/react'
+import {
+  ChevronDownIcon,
+  PhoneIcon,
+  PlayCircleIcon,
+} from '@heroicons/react/20/solid'
+import {
+  Bars3Icon,
+  ChartPieIcon,
+  CursorArrowRaysIcon,
+  FingerPrintIcon,
+  XMarkIcon,
+} from '@heroicons/react/24/outline'
+
+import { Link, routes } from '@redwoodjs/router'
+
+import { useAuth } from 'src/auth'
+
+const adminsites = [
+  {
+    name: 'Posts',
+    description: 'Get a better understanding of your traffic',
+    href: '/admin/posts',
+    icon: ChartPieIcon,
+  },
+  {
+    name: 'Users',
+    description: 'Speak directly to your customers',
+    href: '/admin/posts',
+    icon: CursorArrowRaysIcon,
+  },
+  {
+    name: 'Nachhilfeangebote',
+    description: 'Your customers" data will be safe and secure',
+    href: '/admin/nachhilfeangebote',
+    icon: FingerPrintIcon,
+  },
+]
+
+const callsToAction = [
+  { name: 'Watch demo', href: '#', icon: PlayCircleIcon },
+  { name: 'Contact sales', href: '#', icon: PhoneIcon },
+]
+
+export default function NavigationLayout({ children }: NavigationLayoutProps) {
+  const { logOut, hasRole } = useAuth()
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
+
+  return (
+    <>
+      <header className="bg-white">
+        <nav
+          aria-label="Global"
+          className="mx-auto flex max-w-7xl items-center justify-between p-6 lg:px-8"
+        >
+          <div className="flex lg:flex-1">
+            <Link to={routes.dashboard()} className="-m-1.5 p-1.5">
+              <span className="sr-only">Your Company</span>
+              <img
+                alt=""
+                src={`https://tailwindui.com/plus/img/logos/mark.svg?color=${hasRole('admin') ? 'red' : 'indigo'}&shade=600`}
+                className="h-8 w-auto"
+              />
+            </Link>
+          </div>
+          <div className="flex lg:hidden">
+            <button
+              type="button"
+              onClick={() => setMobileMenuOpen(true)}
+              className="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700"
+            >
+              <span className="sr-only">Open main menu</span>
+              <Bars3Icon aria-hidden="true" className="h-6 w-6" />
+            </button>
+          </div>
+          {}
+          <PopoverGroup className="hidden lg:flex lg:gap-x-12">
+            {hasRole('admin') && (
+              <Popover className="relative">
+                <PopoverButton className="flex items-center gap-x-1 text-sm font-semibold leading-6 text-gray-900">
+                  Admin
+                  <ChevronDownIcon
+                    aria-hidden="true"
+                    className="h-5 w-5 flex-none text-gray-400"
+                  />
+                </PopoverButton>
+                <PopoverPanel
+                  transition
+                  className="absolute -left-8 top-full z-10 mt-3 w-screen max-w-md overflow-hidden rounded-3xl bg-white shadow-lg ring-1 ring-gray-900/5 transition data-[closed]:translate-y-1 data-[closed]:opacity-0 data-[enter]:duration-200 data-[leave]:duration-150 data-[enter]:ease-out data-[leave]:ease-in"
+                >
+                  <div className="p-4">
+                    {adminsites.map((item) => (
+                      <div
+                        key={item.name}
+                        className="group relative flex items-center gap-x-6 rounded-lg p-4 text-sm leading-6 hover:bg-gray-50"
+                      >
+                        <div className="flex h-11 w-11 flex-none items-center justify-center rounded-lg bg-gray-50 group-hover:bg-white">
+                          <item.icon
+                            aria-hidden="true"
+                            className="h-6 w-6 text-gray-600 group-hover:text-indigo-600"
+                          />
+                        </div>
+                        <div className="flex-auto">
+                          <a
+                            href={item.href}
+                            className="block font-semibold text-gray-900"
+                          >
+                            {item.name}
+                            <span className="absolute inset-0" />
+                          </a>
+                          <p className="mt-1 text-gray-600">
+                            {item.description}
+                          </p>
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                  <div className="grid grid-cols-2 divide-x divide-gray-900/5 bg-gray-50">
+                    {callsToAction.map((item) => (
+                      <a
+                        key={item.name}
+                        href={item.href}
+                        className="flex items-center justify-center gap-x-2.5 p-3 text-sm font-semibold leading-6 text-gray-900 hover:bg-gray-100"
+                      >
+                        <item.icon
+                          aria-hidden="true"
+                          className="h-5 w-5 flex-none text-gray-400"
+                        />
+                        {item.name}
+                      </a>
+                    ))}
+                  </div>
+                </PopoverPanel>
+              </Popover>
+            )}
+            <Link
+              to="#"
+              className="text-sm font-semibold leading-6 text-gray-900"
+            >
+              Features
+            </Link>
+            <Link
+              to="#"
+              className="text-sm font-semibold leading-6 text-gray-900"
+            >
+              Marketplace
+            </Link>
+            <Link
+              to="#"
+              className="text-sm font-semibold leading-6 text-gray-900"
+            >
+              Company
+            </Link>
+          </PopoverGroup>
+          <div className="hidden lg:flex lg:flex-1 lg:justify-end">
+            <button
+              onClick={logOut}
+              className="text-sm font-semibold leading-6 text-gray-900"
+            >
+              Log out
+            </button>
+          </div>
+        </nav>
+        <Dialog
+          open={mobileMenuOpen}
+          onClose={setMobileMenuOpen}
+          className="lg:hidden"
+        >
+          <div className="fixed inset-0 z-10" />
+          <DialogPanel className="fixed inset-y-0 right-0 z-10 w-full overflow-y-auto bg-white px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10">
+            <div className="flex items-center justify-between">
+              <Link to="#" className="-m-1.5 p-1.5">
+                <span className="sr-only">Your Company</span>
+                <img
+                  alt=""
+                  src={`https://tailwindui.com/plus/img/logos/mark.svg?color=${hasRole('admin') ? 'red' : 'indigo'}&shade=600`}
+                  className="h-8 w-auto"
+                />
+              </Link>
+              <button
+                type="button"
+                onClick={() => setMobileMenuOpen(false)}
+                className="-m-2.5 rounded-md p-2.5 text-gray-700"
+              >
+                <span className="sr-only">Close menu</span>
+                <XMarkIcon aria-hidden="true" className="h-6 w-6" />
+              </button>
+            </div>
+            <div className="mt-6 flow-root">
+              <div className="-my-6 divide-y divide-gray-500/10">
+                <div className="space-y-2 py-6">
+                  {hasRole('admin') && (
+                    <Disclosure as="div" className="-mx-3">
+                      <DisclosureButton className="group flex w-full items-center justify-between rounded-lg py-2 pl-3 pr-3.5 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50">
+                        Admin
+                        <ChevronDownIcon
+                          aria-hidden="true"
+                          className="h-5 w-5 flex-none group-data-[open]:rotate-180"
+                        />
+                      </DisclosureButton>
+                      <DisclosurePanel className="mt-2 space-y-2">
+                        {[...adminsites, ...callsToAction].map((item) => (
+                          <DisclosureButton
+                            key={item.name}
+                            as="a"
+                            href={item.href}
+                            className="block rounded-lg py-2 pl-6 pr-3 text-sm font-semibold leading-7 text-gray-900 hover:bg-gray-50"
+                          >
+                            {item.name}
+                          </DisclosureButton>
+                        ))}
+                      </DisclosurePanel>
+                    </Disclosure>
+                  )}
+                  <Link
+                    to="#"
+                    className="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50"
+                  >
+                    Features
+                  </Link>
+                  <Link
+                    to="#"
+                    className="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50"
+                  >
+                    Marketplace
+                  </Link>
+                  <Link
+                    to="#"
+                    className="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50"
+                  >
+                    Company
+                  </Link>
+                </div>
+                <div className="py-6">
+                  <button
+                    onClick={logOut}
+                    className="-mx-3 block rounded-lg px-3 py-2.5 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50"
+                  >
+                    Log out
+                  </button>
+                </div>
+              </div>
+            </div>
+          </DialogPanel>
+        </Dialog>
+      </header>
+      <>{children}</>
+    </>
+  )
+}

web/src/layouts/ScaffoldLayout/ScaffoldLayout.tsx

@@ -0,0 +1,37 @@
+import { Link, routes } from '@redwoodjs/router'
+import { Toaster } from '@redwoodjs/web/toast'
+
+type LayoutProps = {
+  title: string
+  titleTo: keyof typeof routes
+  buttonLabel: string
+  buttonTo: keyof typeof routes
+  children: React.ReactNode
+}
+
+const ScaffoldLayout = ({
+  title,
+  titleTo,
+  buttonLabel,
+  buttonTo,
+  children,
+}: LayoutProps) => {
+  return (
+    <div className="rw-scaffold">
+      <Toaster toastOptions={{ className: 'rw-toast', duration: 6000 }} />
+      <header className="rw-header">
+        <h1 className="rw-heading rw-heading-primary">
+          <Link to={routes[titleTo]()} className="rw-link">
+            {title}
+          </Link>
+        </h1>
+        <Link to={routes[buttonTo]()} className="rw-button rw-button-green">
+          <div className="rw-button-icon">+</div> {buttonLabel}
+        </Link>
+      </header>
+      <main className="rw-main">{children}</main>
+    </div>
+  )
+}
+
+export default ScaffoldLayout

web/src/lib/formatters.test.tsx

@@ -0,0 +1,192 @@
+import { render, waitFor, screen } from '@redwoodjs/testing/web'
+
+import {
+  formatEnum,
+  jsonTruncate,
+  truncate,
+  timeTag,
+  jsonDisplay,
+  checkboxInputTag,
+} from './formatters'
+
+describe('formatEnum', () => {
+  it('handles nullish values', () => {
+    expect(formatEnum(null)).toEqual('')
+    expect(formatEnum('')).toEqual('')
+    expect(formatEnum(undefined)).toEqual('')
+  })
+
+  it('formats a list of values', () => {
+    expect(
+      formatEnum(['RED', 'ORANGE', 'YELLOW', 'GREEN', 'BLUE', 'VIOLET'])
+    ).toEqual('Red, Orange, Yellow, Green, Blue, Violet')
+  })
+
+  it('formats a single value', () => {
+    expect(formatEnum('DARK_BLUE')).toEqual('Dark blue')
+  })
+
+  it('returns an empty string for values of the wrong type (for JS projects)', () => {
+    // @ts-expect-error - Testing JS scenario
+    expect(formatEnum(5)).toEqual('')
+  })
+})
+
+describe('truncate', () => {
+  it('truncates really long strings', () => {
+    expect(truncate('na '.repeat(1000) + 'batman').length).toBeLessThan(1000)
+    expect(truncate('na '.repeat(1000) + 'batman')).not.toMatch(/batman/)
+  })
+
+  it('does not modify short strings', () => {
+    expect(truncate('Short strinG')).toEqual('Short strinG')
+  })
+
+  it('adds ... to the end of truncated strings', () => {
+    expect(truncate('repeat'.repeat(1000))).toMatch(/\w\.\.\.$/)
+  })
+
+  it('accepts numbers', () => {
+    expect(truncate(123)).toEqual('123')
+    expect(truncate(0)).toEqual('0')
+    expect(truncate(0o000)).toEqual('0')
+  })
+
+  it('handles arguments of invalid type', () => {
+    // @ts-expect-error - Testing JS scenario
+    expect(truncate(false)).toEqual('false')
+
+    expect(truncate(undefined)).toEqual('')
+    expect(truncate(null)).toEqual('')
+  })
+})
+
+describe('jsonTruncate', () => {
+  it('truncates large json structures', () => {
+    expect(
+      jsonTruncate({
+        foo: 'foo',
+        bar: 'bar',
+        baz: 'baz',
+        kittens: 'kittens meow',
+        bazinga: 'Sheldon',
+        nested: {
+          foobar: 'I have no imagination',
+          two: 'Second nested item',
+        },
+        five: 5,
+        bool: false,
+      })
+    ).toMatch(/.+\n.+\w\.\.\.$/s)
+  })
+})
+
+describe('timeTag', () => {
+  it('renders a date', async () => {
+    render(<div>{timeTag(new Date('1970-08-20').toUTCString())}</div>)
+
+    await waitFor(() => screen.getByText(/1970.*00:00:00/))
+  })
+
+  it('can take an empty input string', async () => {
+    expect(timeTag('')).toEqual('')
+  })
+})
+
+describe('jsonDisplay', () => {
+  it('produces the correct output', () => {
+    expect(
+      jsonDisplay({
+        title: 'TOML Example (but in JSON)',
+        database: {
+          data: [['delta', 'phi'], [3.14]],
+          enabled: true,
+          ports: [8000, 8001, 8002],
+          temp_targets: {
+            case: 72.0,
+            cpu: 79.5,
+          },
+        },
+        owner: {
+          dob: '1979-05-27T07:32:00-08:00',
+          name: 'Tom Preston-Werner',
+        },
+        servers: {
+          alpha: {
+            ip: '10.0.0.1',
+            role: 'frontend',
+          },
+          beta: {
+            ip: '10.0.0.2',
+            role: 'backend',
+          },
+        },
+      })
+    ).toMatchInlineSnapshot(`
+      <pre>
+        <code>
+          {
+        "title": "TOML Example (but in JSON)",
+        "database": {
+          "data": [
+            [
+              "delta",
+              "phi"
+            ],
+            [
+              3.14
+            ]
+          ],
+          "enabled": true,
+          "ports": [
+            8000,
+            8001,
+            8002
+          ],
+          "temp_targets": {
+            "case": 72,
+            "cpu": 79.5
+          }
+        },
+        "owner": {
+          "dob": "1979-05-27T07:32:00-08:00",
+          "name": "Tom Preston-Werner"
+        },
+        "servers": {
+          "alpha": {
+            "ip": "10.0.0.1",
+            "role": "frontend"
+          },
+          "beta": {
+            "ip": "10.0.0.2",
+            "role": "backend"
+          }
+        }
+      }
+        </code>
+      </pre>
+    `)
+  })
+})
+
+describe('checkboxInputTag', () => {
+  it('can be checked', () => {
+    render(checkboxInputTag(true))
+    expect(screen.getByRole('checkbox')).toBeChecked()
+  })
+
+  it('can be unchecked', () => {
+    render(checkboxInputTag(false))
+    expect(screen.getByRole('checkbox')).not.toBeChecked()
+  })
+
+  it('is disabled when checked', () => {
+    render(checkboxInputTag(true))
+    expect(screen.getByRole('checkbox')).toBeDisabled()
+  })
+
+  it('is disabled when unchecked', () => {
+    render(checkboxInputTag(false))
+    expect(screen.getByRole('checkbox')).toBeDisabled()
+  })
+})

web/src/lib/formatters.tsx

@@ -0,0 +1,58 @@
+import React from 'react'
+
+import humanize from 'humanize-string'
+
+const MAX_STRING_LENGTH = 150
+
+export const formatEnum = (values: string | string[] | null | undefined) => {
+  let output = ''
+
+  if (Array.isArray(values)) {
+    const humanizedValues = values.map((value) => humanize(value))
+    output = humanizedValues.join(', ')
+  } else if (typeof values === 'string') {
+    output = humanize(values)
+  }
+
+  return output
+}
+
+export const jsonDisplay = (obj: unknown) => {
+  return (
+    <pre>
+      <code>{JSON.stringify(obj, null, 2)}</code>
+    </pre>
+  )
+}
+
+export const truncate = (value: string | number) => {
+  let output = value?.toString() ?? ''
+
+  if (output.length > MAX_STRING_LENGTH) {
+    output = output.substring(0, MAX_STRING_LENGTH) + '...'
+  }
+
+  return output
+}
+
+export const jsonTruncate = (obj: unknown) => {
+  return truncate(JSON.stringify(obj, null, 2))
+}
+
+export const timeTag = (dateTime?: string) => {
+  let output: string | JSX.Element = ''
+
+  if (dateTime) {
+    output = (
+      <time dateTime={dateTime} title={dateTime}>
+        {new Date(dateTime).toUTCString()}
+      </time>
+    )
+  }
+
+  return output
+}
+
+export const checkboxInputTag = (checked: boolean) => {
+  return <input type="checkbox" checked={checked} disabled />
+}

web/src/pages/DashboardPage/DashboardPage.stories.tsx

@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import DashboardPage from './DashboardPage'
+
+const meta: Meta<typeof DashboardPage> = {
+  component: DashboardPage,
+}
+
+export default meta
+
+type Story = StoryObj<typeof DashboardPage>
+
+export const Primary: Story = {}

web/src/pages/DashboardPage/DashboardPage.test.tsx

@@ -0,0 +1,14 @@
+import { render } from '@redwoodjs/testing/web'
+
+import DashboardPage from './DashboardPage'
+
+//   Improve this test with help from the Redwood Testing Doc:
+//   https://redwoodjs.com/docs/testing#testing-pages-layouts
+
+describe('DashboardPage', () => {
+  it('renders successfully', () => {
+    expect(() => {
+      render(<DashboardPage />)
+    }).not.toThrow()
+  })
+})

web/src/pages/DashboardPage/DashboardPage.tsx

@@ -0,0 +1,21 @@
+// import { Link, routes } from '@redwoodjs/router'
+import { Metadata } from '@redwoodjs/web'
+
+import { useAuth } from 'src/auth'
+
+const DashboardPage = () => {
+  const { currentUser } = useAuth()
+  return (
+    <>
+      <Metadata title="Dashboard" description="Dashboard page" />
+
+      <div className="mx-8 my-8">
+        <h1 className="text-2xl">
+          Hello {currentUser.firstName} {currentUser.lastName}
+        </h1>
+      </div>
+    </>
+  )
+}
+
+export default DashboardPage

web/src/pages/HomePage/HomePage.tsx

@@ -1,21 +1,14 @@
 // import { Link, routes } from '@redwoodjs/router'
-import { Link } from '@redwoodjs/router'
 import { Metadata } from '@redwoodjs/web'
 
+import Hero from 'src/components/Hero'
+
 const HomePage = () => {
   return (
     <>
       <Metadata title="Home" description="Home page" />
 
-      <h1>HomePage</h1>
-      <p>
-        Find me in <code>./web/src/pages/HomePage/HomePage.tsx</code>
-      </p>
-      {/*
-          My default route is named `home`, link to me with:
-          `<Link to={routes.home()}>Home</Link>`
-      */}
-      <Link to={'/login'}>Login</Link>
+      <Hero />
     </>
   )
 }

web/src/pages/LoginPage/LoginPage.tsx

@@ -8,7 +8,7 @@ import {
   Submit,
   FieldError,
 } from '@redwoodjs/forms'
-import { Link, navigate, routes } from '@redwoodjs/router'
+import { navigate, routes } from '@redwoodjs/router'
 import { Metadata } from '@redwoodjs/web'
 import { toast, Toaster } from '@redwoodjs/web/toast'
 
@@ -101,12 +101,12 @@ const LoginPage = () => {
                   />
 
                   <div className="rw-forgot-link">
-                    <Link
+                    {/* <Link
                       to={routes.forgotPassword()}
                       className="rw-forgot-link"
                     >
                       Forgot Password?
-                    </Link>
+                    </Link> */}
                   </div>
 
                   <FieldError name="password" className="rw-field-error" />
@@ -120,9 +120,9 @@ const LoginPage = () => {
           </div>
           <div className="rw-login-link">
             <span>Don&apos;t have an account?</span>{' '}
-            <Link to={routes.signup()} className="rw-link">
+            {/* <Link to={routes.signup()} className="rw-link">
               Sign up!
-            </Link>
+            </Link> */}
           </div>
         </div>
         <a

web/src/pages/Nachhilfeangebot/EditNachhilfeangebotPage/EditNachhilfeangebotPage.tsx

@@ -0,0 +1,11 @@
+import EditNachhilfeangebotCell from 'src/components/Nachhilfeangebot/EditNachhilfeangebotCell'
+
+type NachhilfeangebotPageProps = {
+  id: number
+}
+
+const EditNachhilfeangebotPage = ({ id }: NachhilfeangebotPageProps) => {
+  return <EditNachhilfeangebotCell id={id} />
+}
+
+export default EditNachhilfeangebotPage

web/src/pages/Nachhilfeangebot/NachhilfeangebotPage/NachhilfeangebotPage.tsx

@@ -0,0 +1,11 @@
+import NachhilfeangebotCell from 'src/components/Nachhilfeangebot/NachhilfeangebotCell'
+
+type NachhilfeangebotPageProps = {
+  id: number
+}
+
+const NachhilfeangebotPage = ({ id }: NachhilfeangebotPageProps) => {
+  return <NachhilfeangebotCell id={id} />
+}
+
+export default NachhilfeangebotPage

web/src/pages/Nachhilfeangebot/NachhilfeangebotsPage/NachhilfeangebotsPage.tsx

@@ -0,0 +1,7 @@
+import NachhilfeangebotsCell from 'src/components/Nachhilfeangebot/NachhilfeangebotsCell'
+
+const NachhilfeangebotsPage = () => {
+  return <NachhilfeangebotsCell />
+}
+
+export default NachhilfeangebotsPage

web/src/pages/Nachhilfeangebot/NewNachhilfeangebotPage/NewNachhilfeangebotPage.tsx

@@ -0,0 +1,7 @@
+import NewNachhilfeangebot from 'src/components/Nachhilfeangebot/NewNachhilfeangebot'
+
+const NewNachhilfeangebotPage = () => {
+  return <NewNachhilfeangebot />
+}
+
+export default NewNachhilfeangebotPage

web/src/pages/Post/EditPostPage/EditPostPage.tsx

@@ -0,0 +1,11 @@
+import EditPostCell from 'src/components/Post/EditPostCell'
+
+type PostPageProps = {
+  id: number
+}
+
+const EditPostPage = ({ id }: PostPageProps) => {
+  return <EditPostCell id={id} />
+}
+
+export default EditPostPage

web/src/pages/Post/NewPostPage/NewPostPage.tsx

@@ -0,0 +1,7 @@
+import NewPost from 'src/components/Post/NewPost'
+
+const NewPostPage = () => {
+  return <NewPost />
+}
+
+export default NewPostPage

web/src/pages/Post/PostPage/PostPage.tsx

@@ -0,0 +1,11 @@
+import PostCell from 'src/components/Post/PostCell'
+
+type PostPageProps = {
+  id: number
+}
+
+const PostPage = ({ id }: PostPageProps) => {
+  return <PostCell id={id} />
+}
+
+export default PostPage

web/src/pages/Post/PostsPage/PostsPage.tsx

@@ -0,0 +1,7 @@
+import PostsCell from 'src/components/Post/PostsCell'
+
+const PostsPage = () => {
+  return <PostsCell />
+}
+
+export default PostsPage

web/src/scaffold.css

@@ -1,397 +1,243 @@
-/*
-  normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
-*/
-
-.rw-scaffold *,
-.rw-scaffold ::after,
-.rw-scaffold ::before {
-  box-sizing: inherit;
-}
-.rw-scaffold main {
-  color: #4a5568;
-  display: block;
+.rw-scaffold {
+  @apply bg-white text-gray-600;
 }
 .rw-scaffold h1,
 .rw-scaffold h2 {
-  margin: 0;
+  @apply m-0;
 }
 .rw-scaffold a {
-  background-color: transparent;
+  @apply bg-transparent;
 }
 .rw-scaffold ul {
-  margin: 0;
-  padding: 0;
-}
-.rw-scaffold input {
-  font-family: inherit;
-  font-size: 100%;
-  overflow: visible;
+  @apply m-0 p-0;
 }
 .rw-scaffold input:-ms-input-placeholder {
-  color: #a0aec0;
+  @apply text-gray-500;
 }
 .rw-scaffold input::-ms-input-placeholder {
-  color: #a0aec0;
+  @apply text-gray-500;
 }
 .rw-scaffold input::placeholder {
-  color: #a0aec0;
-}
-.rw-scaffold table {
-  border-collapse: collapse;
-}
-
-/*
-  Style
-*/
-
-.rw-scaffold,
-.rw-toast {
-  background-color: #fff;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
-    'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
-    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  @apply text-gray-500;
 }
 .rw-header {
-  display: flex;
-  justify-content: space-between;
-  padding: 1rem 2rem 1rem 2rem;
+  @apply flex justify-between py-4 px-8;
 }
 .rw-main {
-  margin-left: 1rem;
-  margin-right: 1rem;
-  padding-bottom: 1rem;
+  @apply mx-4 pb-4;
 }
 .rw-segment {
-  border-radius: 0.5rem;
-  border-width: 1px;
-  border-color: #e5e7eb;
-  overflow: hidden;
-  width: 100%;
-  scrollbar-color: #a1a1aa transparent;
+  @apply rounded-lg overflow-hidden w-full border border-gray-200;
+  scrollbar-color: theme('colors.zinc.400') transparent;
 }
 .rw-segment::-webkit-scrollbar {
   height: initial;
 }
 .rw-segment::-webkit-scrollbar-track {
-  background-color: transparent;
-  border-color: #e2e8f0;
-  border-style: solid;
-  border-radius: 0 0 10px 10px;
-  border-width: 1px 0 0 0;
-  padding: 2px;
+  @apply border-gray-200 bg-transparent border-solid rounded-t-none rounded-b-[10px] border-0 border-t p-[2px];
 }
 .rw-segment::-webkit-scrollbar-thumb {
-  background-color: #a1a1aa;
-  background-clip: content-box;
-  border: 3px solid transparent;
-  border-radius: 10px;
+  @apply bg-zinc-400 bg-clip-content border-[3px] border-solid border-transparent rounded-full;
 }
 .rw-segment-header {
-  background-color: #e2e8f0;
-  color: #4a5568;
-  padding: 0.75rem 1rem;
+  @apply bg-gray-200 text-gray-700 py-3 px-4;
 }
 .rw-segment-main {
-  background-color: #f7fafc;
-  padding: 1rem;
+  @apply bg-gray-100 p-4;
 }
 .rw-link {
-  color: #4299e1;
-  text-decoration: underline;
+  @apply text-blue-400 underline;
 }
 .rw-link:hover {
-  color: #2b6cb0;
+  @apply text-blue-500;
 }
 .rw-forgot-link {
-  font-size: 0.75rem;
-  color: #a0aec0;
-  text-align: right;
-  margin-top: 0.1rem;
+  @apply text-xs text-gray-400 text-right mt-1 underline;
 }
 .rw-forgot-link:hover {
-  font-size: 0.75rem;
-  color: #4299e1;
+  @apply text-blue-500;
 }
 .rw-heading {
-  font-weight: 600;
+  @apply font-semibold;
 }
 .rw-heading.rw-heading-primary {
-  font-size: 1.25rem;
+  @apply text-xl;
 }
 .rw-heading.rw-heading-secondary {
-  font-size: 0.875rem;
+  @apply text-sm;
 }
 .rw-heading .rw-link {
-  color: #4a5568;
-  text-decoration: none;
+  @apply text-gray-600 no-underline;
 }
 .rw-heading .rw-link:hover {
-  color: #1a202c;
-  text-decoration: underline;
+  @apply text-gray-900 underline;
 }
 .rw-cell-error {
-  font-size: 90%;
-  font-weight: 600;
+  @apply text-sm font-semibold;
 }
 .rw-form-wrapper {
-  box-sizing: border-box;
-  font-size: 0.875rem;
-  margin-top: -1rem;
+  @apply text-sm -mt-4;
 }
 .rw-cell-error,
 .rw-form-error-wrapper {
-  padding: 1rem;
-  background-color: #fff5f5;
-  color: #c53030;
-  border-width: 1px;
-  border-color: #feb2b2;
-  border-radius: 0.25rem;
-  margin: 1rem 0;
+  @apply p-4 bg-red-50 text-red-600 border border-red-100 rounded my-4;
 }
 .rw-form-error-title {
-  margin-top: 0;
-  margin-bottom: 0;
-  font-weight: 600;
+  @apply m-0 font-semibold;
 }
 .rw-form-error-list {
-  margin-top: 0.5rem;
-  list-style-type: disc;
-  list-style-position: inside;
+  @apply mt-2 list-disc list-inside;
 }
 .rw-button {
-  border: none;
-  color: #718096;
-  cursor: pointer;
-  display: flex;
-  justify-content: center;
-  font-size: 0.75rem;
-  font-weight: 600;
-  padding: 0.25rem 1rem;
-  text-transform: uppercase;
-  text-decoration: none;
-  letter-spacing: 0.025em;
-  border-radius: 0.25rem;
-  line-height: 2;
-  border: 0;
+  @apply flex justify-center py-1 px-4 border-0 rounded bg-gray-200 text-gray-500 text-xs font-semibold uppercase tracking-wide leading-loose no-underline cursor-pointer transition duration-100;
 }
 .rw-button:hover {
-  background-color: #718096;
-  color: #fff;
+  @apply bg-gray-500 text-white;
 }
 .rw-button.rw-button-small {
-  font-size: 0.75rem;
-  border-radius: 0.125rem;
-  padding: 0.25rem 0.5rem;
-  line-height: inherit;
+  @apply text-xs rounded-sm py-1 px-2;
 }
 .rw-button.rw-button-green {
-  background-color: #48bb78;
-  color: #fff;
+  @apply bg-green-500 text-white;
 }
 .rw-button.rw-button-green:hover {
-  background-color: #38a169;
-  color: #fff;
+  @apply bg-green-700;
 }
 .rw-button.rw-button-blue {
-  background-color: #3182ce;
-  color: #fff;
+  @apply bg-blue-500 text-white;
 }
 .rw-button.rw-button-blue:hover {
-  background-color: #2b6cb0;
+  @apply bg-blue-700;
 }
 .rw-button.rw-button-red {
-  background-color: #e53e3e;
-  color: #fff;
+  @apply bg-red-500 text-white;
 }
 .rw-button.rw-button-red:hover {
-  background-color: #c53030;
+  @apply bg-red-700 text-white;
 }
 .rw-button-icon {
-  font-size: 1.25rem;
-  line-height: 1;
-  margin-right: 0.25rem;
+  @apply text-xl leading-5 mr-1;
 }
 .rw-button-group {
-  display: flex;
-  justify-content: center;
-  margin: 0.75rem 0.5rem;
+  @apply flex justify-center my-3 mx-2;
 }
 .rw-button-group .rw-button {
-  margin: 0 0.25rem;
+  @apply mx-1;
 }
 .rw-form-wrapper .rw-button-group {
-  margin-top: 2rem;
-  margin-bottom: 0;
+  @apply mt-8;
 }
 .rw-label {
-  display: block;
-  margin-top: 1.5rem;
-  color: #4a5568;
-  font-weight: 600;
-  text-align: left;
+  @apply block mt-6 text-gray-600 font-semibold text-left;
 }
 .rw-label.rw-label-error {
-  color: #c53030;
+  @apply text-red-600;
 }
 .rw-input {
-  display: block;
-  margin-top: 0.5rem;
-  width: 100%;
-  padding: 0.5rem;
-  border-width: 1px;
-  border-style: solid;
-  border-color: #e2e8f0;
-  color: #4a5568;
-  border-radius: 0.25rem;
-  outline: none;
-}
-.rw-check-radio-item-none {
-  color: #4a5568;
+  @apply block mt-2 w-full p-2 bg-white border border-gray-200 rounded outline-none;
 }
 .rw-check-radio-items {
-  display: flex;
-  justify-items: center;
+  @apply flex justify-items-center;
 }
-.rw-input[type='checkbox'] {
-  display: inline;
-  width: 1rem;
-  margin-left: 0;
-  margin-right: 0.5rem;
-  margin-top: 0.25rem;
+.rw-check-radio-item-none {
+  @apply text-gray-600;
 }
+.rw-input[type='checkbox'],
 .rw-input[type='radio'] {
-  display: inline;
-  width: 1rem;
-  margin-left: 0;
-  margin-right: 0.5rem;
-  margin-top: 0.25rem;
+  @apply inline w-4 ml-0 mr-1 mt-1;
 }
 .rw-input:focus {
-  border-color: #a0aec0;
+  @apply border-gray-400;
 }
 .rw-input-error {
-  border-color: #c53030;
-  color: #c53030;
+  @apply border-red-600 text-red-600;
 }
-
 .rw-input-error:focus {
-  outline: none;
-  border-color: #c53030;
+  @apply border-red-600 outline-none;
   box-shadow: 0 0 5px #c53030;
 }
-
 .rw-field-error {
-  display: block;
-  margin-top: 0.25rem;
-  font-weight: 600;
-  text-transform: uppercase;
-  font-size: 0.75rem;
-  color: #c53030;
+  @apply block mt-1 font-semibold text-xs text-red-600 uppercase;
 }
 .rw-table-wrapper-responsive {
-  overflow-x: auto;
+  @apply overflow-x-auto;
 }
 .rw-table-wrapper-responsive .rw-table {
   min-width: 48rem;
 }
 .rw-table {
-  table-layout: auto;
-  width: 100%;
-  font-size: 0.875rem;
+  @apply w-full text-sm;
 }
 .rw-table th,
 .rw-table td {
-  padding: 0.75rem;
+  @apply p-3;
 }
 .rw-table td {
-  background-color: #ffffff;
-  color: #1a202c;
+  @apply bg-white text-gray-900;
 }
 .rw-table tr:nth-child(odd) td,
 .rw-table tr:nth-child(odd) th {
-  background-color: #f7fafc;
+  @apply bg-gray-50;
 }
 .rw-table thead tr {
-  color: #4a5568;
+  @apply bg-gray-200 text-gray-600;
 }
 .rw-table th {
-  font-weight: 600;
-  text-align: left;
+  @apply font-semibold text-left;
 }
 .rw-table thead th {
-  background-color: #e2e8f0;
-  text-align: left;
+  @apply text-left;
 }
 .rw-table tbody th {
-  text-align: right;
+  @apply text-right;
 }
 @media (min-width: 768px) {
   .rw-table tbody th {
-    width: 20%;
+    @apply w-1/5;
   }
 }
 .rw-table tbody tr {
-  border-top-width: 1px;
+  @apply border-t border-gray-200;
 }
 .rw-table input {
-  margin-left: 0;
+  @apply ml-0;
 }
 .rw-table-actions {
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-  height: 17px;
-  padding-right: 0.25rem;
+  @apply flex justify-end items-center h-4 pr-1;
 }
 .rw-table-actions .rw-button {
-  background-color: transparent;
+  @apply bg-transparent;
 }
 .rw-table-actions .rw-button:hover {
-  background-color: #718096;
-  color: #fff;
+  @apply bg-gray-500 text-white;
 }
 .rw-table-actions .rw-button-blue {
-  color: #3182ce;
+  @apply text-blue-500;
 }
 .rw-table-actions .rw-button-blue:hover {
-  background-color: #3182ce;
-  color: #fff;
+  @apply bg-blue-500 text-white;
 }
 .rw-table-actions .rw-button-red {
-  color: #e53e3e;
+  @apply text-red-600;
 }
 .rw-table-actions .rw-button-red:hover {
-  background-color: #e53e3e;
-  color: #fff;
+  @apply bg-red-600 text-white;
 }
 .rw-text-center {
-  text-align: center;
+  @apply text-center;
 }
 .rw-login-container {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 24rem;
-  margin: 4rem auto;
-  flex-wrap: wrap;
+  @apply flex items-center justify-center flex-wrap mx-auto w-96 my-16;
 }
 .rw-login-container .rw-form-wrapper {
-  width: 100%;
-  text-align: center;
+  @apply w-full text-center;
 }
 .rw-login-link {
-  margin-top: 1rem;
-  color: #4a5568;
-  font-size: 90%;
-  text-align: center;
-  flex-basis: 100%;
+  @apply mt-4 text-gray-600 text-sm text-center w-full;
 }
 .rw-webauthn-wrapper {
-  margin: 1.5rem 1rem 1rem;
-  line-height: 1.4;
+  @apply mt-6 mx-4 leading-6;
 }
 .rw-webauthn-wrapper h2 {
-  font-size: 150%;
-  font-weight: bold;
-  margin-bottom: 1rem;
+  @apply mb-4 text-xl font-bold;
 }