Update dependency primereact to v10.9.6

Reviewed-on: #273

.github/workflows/playwright.yml

@@ -9,7 +9,6 @@ concurrency:
   cancel-in-progress: true
 jobs:
   test:
-    if: false
     timeout-minutes: 60
     runs-on: ubuntu-latest
     container:
@@ -22,10 +21,15 @@ jobs:
     - name: Install dependencies
       run: npm install -g pnpm && pnpm install
     - name: Build the service that will be tested
-      run: npm run build
+      run: |
+        pnpm run build
+        cp -r public .next/standalone/
+        cp -r .next/static .next/standalone/.next/
     - name: Install Playwright Browsers
       run: pnpm exec playwright install --with-deps
     - name: Run the service that will be tested
-      run: npm run start &
+      run: HOSTNAME=127.0.0.1 node .next/standalone/server.js &
+    - name: Wait for the service to be ready
+      run: npx wait-on http://127.0.0.1:3000/default/ --timeout 30000
     - name: Run Playwright tests
       run: pnpm exec playwright test

app/[slug]/dashboard/guests/page.tsx

@@ -15,37 +15,43 @@ import SkeletonTable from '@/app/ui/guests/skeleton-row';
 import GuestsTable from '@/app/ui/guests/table';
 import { TabPanel, TabView } from 'primereact/tabview';
 import { Toast } from 'primereact/toast';
-import { Suspense, useRef, useState } from 'react';
+import { Suspense, useEffect, useRef, useState } from 'react';
 import InvitationsBoard from '@/app/ui/invitations/board';
 import { Invitation, InvitationSerializer } from '@/app/lib/invitation';
 
 
 export default function Page() {
+  const [slug, setSlug] = useState<string>("default");
+
+  useEffect(() => {
+    setSlug(getSlug());
+    refreshGroups();
+    refreshGuests();
+    refreshInvitations();
+  }, []);
+  
   const toast = useRef<Toast>(null);
   
   function refreshGuests() {
     new AbstractApi<Guest>().getAll(new GuestSerializer(), (objects: Guest[]) => {
       setGuests(objects);
-      setGuestsLoaded(true);
     });
   }
 
   function refreshGroups() {
     new AbstractApi<Group>().getAll(new GroupSerializer(), (objects: Group[]) => {
       setGroups(objects);
-      setGroupsLoaded(true);
     });
   }
 
   function refreshInvitations() {
     new AbstractApi<Invitation>().getAll(new InvitationSerializer(), (objects: Invitation[]) => {
       setInvitations(objects);
-      setInvitationsLoaded(true);
     });
   }
 
   function resetAffinities() {
-    fetch(`/api/${getSlug()}/groups/affinities/reset`, {
+    fetch(`/api/${slug}/groups/affinities/reset`, {
       method: 'POST',
       headers: {
       'Accept': 'application/json',
@@ -72,23 +78,17 @@ export default function Page() {
     });
   }
 
-  const [groupsLoaded, setGroupsLoaded] = useState(false);
   const [groups, setGroups] = useState<Array<Group>>([]);
   const [groupBeingEdited, setGroupBeingEdited] = useState<Group | undefined>(undefined);
 
   const [groupAffinitiesBeingEditted, setGroupAffinitiesBeingEditted] = useState<Group | undefined>(undefined);
 
-  const [guestsLoaded, setGuestsLoaded] = useState(false);
   const [guests, setGuests] = useState<Array<Guest>>([]);
   const [guestBeingEdited, setGuestBeingEdited] = useState<Guest | undefined>(undefined);
 
-  const [invitationsLoaded, setInvitationsLoaded] = useState(false);
   const [invitations, setInvitations] = useState<Array<Invitation>>([]);
-  const [invitationBeingEdited, setInvitationBeingEdited] = useState<Invitation | undefined>(undefined);
 
-  !groupsLoaded && refreshGroups();
-  !guestsLoaded && refreshGuests();
-  !invitationsLoaded && refreshInvitations();
+
 
   return (
     <div className="w-full">
@@ -99,7 +99,10 @@ export default function Page() {
             <GuestFormDialog
               key={guestBeingEdited?.id}
               groups={groups}
-              onCreate={() => { refreshGuests(); setGuestBeingEdited(undefined) }}
+              onCreate={(newGuest) => { 
+                setGuests([newGuest!, ...guests]); 
+                setGuestBeingEdited(undefined) ;
+              }}
               guest={guestBeingEdited}
               visible={guestBeingEdited !== undefined}
               onHide={() => { setGuestBeingEdited(undefined) }}

app/[slug]/dashboard/website/page.tsx

@@ -0,0 +1,65 @@
+/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
+
+'use client'
+
+import { AbstractApi } from '@/app/api/abstract-api';
+import { getSlug } from '@/app/lib/utils';
+import { Website, WebsiteSerializer } from '@/app/lib/website';
+import { useEffect, useState } from 'react';
+import Tiptap from '../../../components/Tiptap';
+
+
+export default function Page() {
+
+  const [website, setWebsite] = useState<Website>()
+  const api = new AbstractApi<Website>();
+  const serializer = new WebsiteSerializer();
+
+  const [slug, setSlug] = useState<string>("default");
+  useEffect(() => { setSlug(getSlug()) }, []);
+
+  const [iframeKey, setIframeKey] = useState<number>(Math.random());
+
+  const [timeoutId, setTimeoutId] = useState<NodeJS.Timeout | null>(null);
+
+  useEffect(() => {
+    api.get(serializer, undefined, (loadedWebsite) => {
+      setWebsite(loadedWebsite);
+    });
+  }, []);
+
+  const updateWebsite = (newContent: string) => {
+    // Debounce API update: send after 500ms of no further changes
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+    }
+
+    setTimeoutId(
+      setTimeout(() => {
+        api.update(serializer, new Website('', newContent), () => {
+          setIframeKey(Math.random()); // Change key to force iframe reload
+        });
+      }, 500)
+    );
+  }
+
+  return (
+    <div className="flex">
+      <div className="w-1/2 border rounded-lg p-4">
+        <Tiptap
+          key={website?.content ?? 'empty'}
+          content={website?.content || ''}
+          onUpdate={updateWebsite}
+        />
+      </div>
+      <div className="w-1/2 border rounded-lg p-4 ml-4">
+        <iframe
+          key={iframeKey}
+          src={`/${slug}/site`}
+          title="Website Preview"
+          className="w-full h-[80vh] rounded"
+        />
+      </div>
+    </div>
+  );
+}

app/[slug]/page.tsx

@@ -16,11 +16,11 @@ export default async function Page() {
     if (getCsrfToken() == 'unknown') {
       retrieveCSRFToken();
     }
-  }, []);
 
     if (typeof window !== 'undefined') {
-    localStorage.setItem('slug', await params.slug);
+      localStorage.setItem('slug', params.slug);
     }
+  }, []);
 
   return (
     <main className="flex min-h-screen flex-col p-6">

app/[slug]/site/layout.tsx

@@ -0,0 +1,41 @@
+/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
+
+import SideNav from '@/app/ui/dashboard/sidenav';
+import Image from 'next/image';
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="flex h-screen flex-col">
+      <div className="w-full lg:h-72 h-36 relative">
+        <Image
+          src="/header.png"
+          alt="Header"
+          fill
+          style={{ objectFit: 'cover', objectPosition: 'center', zIndex: 0 }}
+          priority
+        />
+      </div>
+      <div className="flex-grow flex items-center justify-center lg:p-24 py-8 bg-[#e1d5c7] relative">
+        <div className="absolute left-1/2 lg:top-24 top-8 z-10 -translate-x-1/2 -translate-y-1/2 flex justify-center w-full pointer-events-none w-12 h-12 lg:w-24 lg:h-24">
+          <Image
+            src="/stamp.png"
+            alt="Stamp"
+            width={120}
+            height={120}
+            className="object-contain"
+            priority
+          />
+        </div>
+
+        <div className="max-w-4xl w-full h-full bg-[#f9f9f7] shadow-lg">
+            <div
+              className="max-w-4xl lg:m-6 m-3 lg:px-6 px-3 py-24 border-2 border-[#d3d3d1] rounded-xl text-[#958971] flex justify-center"
+              style={{ height: 'calc(100% - 3rem)' }}
+            >
+              {children}
+            </div>
+        </div>
+      </div>
+    </div>
+  );
+}

app/[slug]/site/page.tsx

@@ -0,0 +1,26 @@
+/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
+
+'use client'
+
+import { AbstractApi } from '@/app/api/abstract-api';
+import { Website, WebsiteSerializer } from '@/app/lib/website';
+import { useState, useEffect } from 'react';
+import DOMPurify from "dompurify";
+
+export default function Page() {
+
+  const [websiteContent, setWebsiteContent] = useState<string>("");
+
+  const api = new AbstractApi<Website>();
+  const serializer = new WebsiteSerializer();
+
+  useEffect(() => {
+    api.get(serializer, undefined, (loadedWebsite) => {
+      setWebsiteContent(loadedWebsite.content || "");
+    });
+  }, []);
+
+  return (
+    <div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(websiteContent) }} />
+  );
+}

app/api/abstract-api.tsx

@@ -6,7 +6,7 @@ import { getCsrfToken, getSlug } from '@/app/lib/utils';
 export interface Api<T extends Entity> {
   getAll(serializable: Serializable<T>, callback: (objets: T[]) => void): void;
   get(serializable: Serializable<T>, id: string, callback: (object: T) => void): void;
-  create(serializable: Serializable<T>, object: T, callback: () => void): void;
+  create(serializable: Serializable<T>, object: T, callback: (object: T) => void): void;
   update(serializable: Serializable<T>, object: T, callback: () => void): void;
   destroy(serializable: Serializable<T>, object: T, callback: () => void): void;
 }
@@ -30,8 +30,9 @@ export class AbstractApi<T extends Entity> implements Api<T> {
       });
   }
 
-  get(serializable: Serializable<T>, id: string, callback: (object: T) => void): void {
-    fetch(`/api/${getSlug()}/${serializable.apiPath()}/${id}`)
+  get(serializable: Serializable<T>, id: (string | undefined), callback: (object: T) => void): void {
+    const endpoint = id ? `/api/${getSlug()}/${serializable.apiPath()}/${id}` : `/api/${getSlug()}/${serializable.apiPath()}`;
+    fetch(endpoint)
       .then((response) => response.json())
       .then((data) => {
         callback(serializable.fromJson(data));
@@ -41,7 +42,9 @@ export class AbstractApi<T extends Entity> implements Api<T> {
   }
 
   update(serializable: Serializable<T>, object: T, callback: () => void): void {
-    fetch(`/api/${getSlug()}/${serializable.apiPath()}/${object.id}`, {
+    const endpoint = object.id ? `/api/${getSlug()}/${serializable.apiPath()}/${object.id}` : `/api/${getSlug()}/${serializable.apiPath()}`;
+
+    fetch(endpoint, {
       method: 'PUT',
       body: serializable.toJson(object),
       headers: {

app/components/Tiptap.tsx

@@ -0,0 +1,22 @@
+/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
+
+'use client'
+
+import { useEditor, EditorContent } from '@tiptap/react'
+import StarterKit from '@tiptap/starter-kit'
+
+const Tiptap = ({ content, onUpdate }: { content: string, onUpdate: (newContent:string) => void }) => {
+
+  const editor = useEditor({
+    extensions: [StarterKit],
+    content: content || '<p>Type something here...</p>',
+     onUpdate({ editor }) {
+        onUpdate(editor.getHTML());
+    },
+    immediatelyRender: false,
+  })
+
+  return <EditorContent editor={editor} />
+}
+
+export default Tiptap

app/lib/guest.tsx

@@ -2,6 +2,7 @@
 
 import { Serializable } from "../api/abstract-api";
 import { Entity } from "./definitions";
+import { Group } from "./group";
 
 export const guestStatuses = ['considered', 'invited', 'confirmed', 'declined', 'tentative'] as const;
 export type GuestStatus = typeof guestStatuses[number];
@@ -9,30 +10,28 @@ export type GuestStatus = typeof guestStatuses[number];
 export class Guest implements Entity {
   id?: string;
   name?: string;
-  group_name?: string;
-  groupId?: string;
   color?: string;
   status?: GuestStatus;
   children?: Guest[];
+  group?: Group;
 
-  constructor(id?: string, name?: string, group_name?: string, groupId?: string, color?: string, status?: GuestStatus, children?: Guest[]) {
+  constructor(id?: string, name?: string, color?: string, status?: GuestStatus, children?: Guest[], Group?: Group) {
     this.id = id;
     this.name = name;
-    this.group_name = group_name;
-    this.groupId = groupId;
     this.color = color;
     this.status = status;
     this.children = children;
+    this.group = Group;
   }
 }
 
 export class GuestSerializer implements Serializable<Guest> {
   fromJson(data: any): Guest {
-    return new Guest(data.id, data.name, data.group?.name, data.group?.id, data.color, data.status, data.children);
+    return new Guest(data.id, data.name, data.color, data.status, data.children, new Group(data.group?.id, data.group?.name));
   }
 
   toJson(guest: Guest): string {
-    return JSON.stringify({ guest: { name: guest.name, status: guest.status, group_id: guest.groupId } });
+    return JSON.stringify({ guest: { name: guest.name, status: guest.status, group_id: guest.group?.id } });
   }
 
   apiPath(): string {

app/lib/invitation.tsx

@@ -15,7 +15,7 @@ export class Invitation implements Entity {
 
 export class InvitationSerializer {
   fromJson(data: any): Invitation {
-    return new Invitation(data.id, (data.guests || []).map((guest: any) => new Guest(guest.id, guest.name, guest.group_name, guest.groupId, guest.color, guest.status, guest.children)));
+    return new Invitation(data.id, (data.guests || []).map((guest: any) => new Guest(guest.id, guest.name, guest.color, guest.status, guest.children)));
   }
 
   toJson(invitation: Invitation): string {

app/lib/tableSimulation.tsx

@@ -2,6 +2,7 @@
 
 import { Serializable } from "../api/abstract-api";
 import { Entity } from "./definitions";
+import { Group } from "./group";
 import { Guest } from "./guest";
 
 export type Discomfort = {
@@ -53,10 +54,10 @@ export class TableSimulationSerializer implements Serializable<TableSimulation>
           return {
             id: guest.id,
             name: guest.name,
-            group_id: guest.groupId,
             color: guest.color,
             status: guest.status,
             children: guest.children,
+            group: new Group(guest.group?.id, guest.group?.name)
           }
         }),
         discomfort: table.discomfort,

app/lib/website.tsx

@@ -0,0 +1,30 @@
+/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
+
+import { Serializable } from "../api/abstract-api";
+import { Entity } from "./definitions";
+
+
+export class Website implements Entity {
+  id?: string;
+  content?: string;
+
+  constructor(id: string, content: string) {
+    this.id = id;
+    this.content = content;
+  }
+}
+
+export class WebsiteSerializer implements Serializable<Website> {
+  fromJson(data: any): Website {
+    return new Website("", data.content);
+  }
+
+  toJson(website: Website): string {
+    return JSON.stringify({ website: { content: website.content } });
+  }
+
+  apiPath(): string {
+    return 'website';
+  }
+}
+

app/ui/arrangements/arrangement.tsx

@@ -5,7 +5,6 @@
 import { AbstractApi } from '@/app/api/abstract-api';
 import { TableArrangement } from '@/app/lib/definitions';
 import { TableSimulation, TableSimulationSerializer } from '@/app/lib/tableSimulation';
-import { getSlug } from '@/app/lib/utils';
 import { Table } from '@/app/ui/components/table';
 import { lusitana } from '@/app/ui/fonts';
 import { useState, useEffect } from 'react';

app/ui/components/guest-form-dialog.tsx

@@ -15,14 +15,14 @@ import { useState } from 'react';
 
 export default function GuestFormDialog({ groups, onCreate, onHide, guest, visible }: {
   groups: Group[],
-  onCreate?: () => void,
+  onCreate?: (guest: Guest) => void,
   onHide: () => void,
   guest?: Guest,
   visible: boolean,
 }) {
 
   const [name, setName] = useState(guest?.name || '');
-  const [group, setGroup] = useState(guest?.groupId || null);
+  const [group, setGroup] = useState(guest?.group?.id || null);
   const [status, setStatus] = useState<GuestStatus | null>(guest?.status || null);
 
   const api = new AbstractApi<Guest>();
@@ -41,17 +41,17 @@ export default function GuestFormDialog({ groups, onCreate, onHide, guest, visib
 
     if (guest?.id !== undefined) {
       guest.name = name;
-      guest.groupId = group;  
+      guest.group!.id = group;  
       guest.status = status;
      
       api.update(serializer, guest, () => {
         resetForm();
-        onCreate && onCreate();
+        onCreate && onCreate(guest);
       });
     } else {
-      api.create(serializer, new Guest(undefined, name, undefined, group, undefined, status), ()=> {
+      api.create(serializer, new Guest(undefined, name, undefined, status, [], groups.find((g) => g.id === group)), (newGuest)=> {
         resetForm();
-        onCreate && onCreate();
+        onCreate && onCreate(newGuest);
       });
     }
   }

app/ui/components/login-form.tsx

@@ -15,6 +15,9 @@ export default function LoginForm() {
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
 
+  const [slug, setSlug] = useState<string>("default");
+  useEffect(() => {setSlug(getSlug())}, []);
+
   const router = useRouter();
 
   const [currentUser, setCurrentUser] = useState<User | null>(null);
@@ -41,7 +44,7 @@ export default function LoginForm() {
           password: password,
           onLogin: (user) => {
             setCurrentUser(user);
-            router.push(`${getSlug()}/dashboard`)
+            router.push(`${slug}/dashboard`)
           }
         })}>
         Sign in

app/ui/components/registration-form.tsx

@@ -17,7 +17,9 @@ export default function RegistrationForm() {
   const [email, setEmail] = useState<string>("");
   const [password, setPassword] = useState<string>("");
   const [passwordConfirmation, setPasswordConfirmation] = useState<string>("");
-  const [slug, setSlug] = useState<string>(getSlug());
+
+  const [slug, setSlug] = useState<string>("default");
+  useEffect(() => { setSlug(getSlug()) }, []);
 
   const [captchaId, setCaptchaId] = useState<string>("");
   const [captchaUrl, setCaptchaUrl] = useState<string>("");

app/ui/dashboard/nav-links.tsx

@@ -6,24 +6,30 @@ import {
   UserGroupIcon,
   RectangleGroupIcon,
   BanknotesIcon,
+  GlobeAltIcon,
 } from '@heroicons/react/24/outline';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import clsx from 'clsx';
 import { getSlug } from '@/app/lib/utils';
+import { useEffect, useState } from 'react';
 
 // Map of links to display in the side navigation.
 // Depending on the size of the application, this would be stored in a database.
-const links = [
-  { name: 'Guests', href: `/${getSlug()}/dashboard/guests`, icon: UserGroupIcon },
-  { name: 'Expenses', href: `/${getSlug()}/dashboard/expenses`, icon: BanknotesIcon },
-  { name: 'Table distributions', href: `/${getSlug()}/dashboard/tables`, icon: RectangleGroupIcon },
-];
-
 
 export default function NavLinks() {
   const pathname = usePathname();
 
+  const [slug, setSlug] = useState<string>("default");
+  useEffect(() => { setSlug(getSlug()) }, []);
+
+  const links = [
+    { name: 'Guests', href: `/${slug}/dashboard/guests`, icon: UserGroupIcon },
+    { name: 'Expenses', href: `/${slug}/dashboard/expenses`, icon: BanknotesIcon },
+    { name: 'Table distributions', href: `/${slug}/dashboard/tables`, icon: RectangleGroupIcon },
+    { name: 'Website builder', href: `/${slug}/dashboard/website`, icon: GlobeAltIcon },
+  ];
+  
   return (
     <>
       {links.map((link) => {

app/ui/dashboard/sidenav.tsx

@@ -9,15 +9,23 @@ import { gloriaHallelujah } from '@/app/ui/fonts';
 import { logout } from '@/app/api/authentication';
 import { useRouter } from 'next/navigation';
 import { getSlug } from '@/app/lib/utils';
+import { useEffect, useState } from 'react';
 
 export default function SideNav() {
   const router = useRouter();
 
+  const [slug, setSlug] = useState<string>("default");
+  useEffect(() => { setSlug(getSlug()) }, []);
+
+  const [currentUser, setCurrentUser] = useState<{ email: string } | null>(null);
+  useEffect(() => { setCurrentUser(JSON.parse(localStorage.getItem('currentUser') || '{}')) }, []);
+
+
   return (
     <div className="flex h-full flex-col px-3 py-4 md:px-2">
       <Link
         className="mb-2 flex h-20 items-center justify-start rounded-md bg-blue-600 p-4 md:h-20"
-        href={`/${getSlug()}/dashboard`}
+        href={`/${slug}/dashboard`}
       >
         <div className={`${gloriaHallelujah.className} "w-32 text-white md:w-40 antialiased`}>
           <h1>Wedding Planner</h1>
@@ -26,14 +34,14 @@ export default function SideNav() {
       <div className="flex grow flex-row justify-between space-x-2 md:flex-col md:space-x-0 md:space-y-2">
         <NavLinks />
         <div className="hidden h-auto w-full grow rounded-md bg-gray-50 md:block"></div>
-        <span>Logged in as {JSON.parse(localStorage.getItem('currentUser') || '{}').email}</span>
+        <span>Logged in as {currentUser?.email}</span>
         <button
           className="flex h-[48px] w-full grow items-center justify-center gap-2 rounded-md bg-gray-50 p-3 text-sm font-medium hover:bg-sky-100 hover:text-blue-600 md:flex-none md:justify-start md:p-2 md:px-3"
           onClick={() => {
             logout({
               onLogout: () => {
                 localStorage.clear();
-                router.push(`/${getSlug()}`);
+                router.push(`/${slug}`);
               }
             });
           }}

app/ui/guests/table.tsx

@@ -28,7 +28,7 @@ export default function guestsTable({ guests, onUpdate, onEdit }: {
             {guest.name}
           </td>
           <td className="px-6 py-4">
-            {guest.group_name}
+            {guest.group?.name}
           </td>
           <td className="px-6 py-4">
             <span className="flex items-center text-sm dark:text-white me-3">

package.json

@@ -9,9 +9,13 @@
     "@atlaskit/pragmatic-drag-and-drop": "^1.7.0",
     "@heroicons/react": "^2.1.4",
     "@tailwindcss/forms": "^0.5.7",
+    "@tiptap/pm": "^2.14.0",
+    "@tiptap/react": "^2.14.0",
+    "@tiptap/starter-kit": "^2.14.0",
     "autoprefixer": "10.4.21",
     "bcrypt": "^5.1.1",
     "clsx": "^2.1.1",
+    "dompurify": "^3.2.6",
     "next": "15.3.3",
     "next-auth": "5.0.0-beta.28",
     "postcss": "8.5.4",
@@ -26,14 +30,15 @@
     "zod": "^3.23.8"
   },
   "devDependencies": {
-    "@playwright/test": "^1.46.0",
+    "@playwright/test": "^1.52.0",
     "@types/bcrypt": "^5.0.2",
     "@types/node": "22.15.29",
     "@types/react": "18.3.23",
-    "@types/react-dom": "18.3.7"
+    "@types/react-dom": "18.3.7",
+    "wait-on": "^8.0.3"
   },
   "engines": {
     "node": ">=23.0.0"
   },
-  "packageManager": "pnpm@10.11.0+sha512.6540583f41cc5f628eb3d9773ecee802f4f9ef9923cc45b69890fb47991d4b092964694ec3a4f738a420c918a333062c8b925d312f42e4f0c263eb603551f977"
+  "packageManager": "pnpm@10.11.1+sha512.e519b9f7639869dc8d5c3c5dfef73b3f091094b0a006d7317353c72b124e80e1afd429732e28705ad6bfa1ee879c1fce46c128ccebd3192101f43dd67c667912"
 }

playwright.config.ts

@@ -43,11 +43,6 @@ export default defineConfig({
       use: { ...devices['Desktop Firefox'] },
     },
 
-    {
-      name: 'webkit',
-      use: { ...devices['Desktop Safari'] },
-    },
-
     /* Test against mobile viewports. */
     // {
     //   name: 'Mobile Chrome',

tests/guests.spec.ts

@@ -1,7 +1,9 @@
 import { test, expect, Page } from '@playwright/test'
+import { mock } from 'node:test';
 
 const mockGuestsAPI = ({ page }: { page: Page }) => {
   page.route('*/**/api/default/guests', async route => {
+    if (route.request().method() === 'GET') {
       const json = [
         {
           "id": "f4a09c28-40ea-4553-90a5-96935a59cac6",
@@ -24,6 +26,19 @@ const mockGuestsAPI = ({ page }: { page: Page }) => {
       ];
 
       await route.fulfill({ json })
+    } else if (route.request().method() === 'POST') {
+      const json = {
+        "id":"ff58aa2d-643d-4c29-be9c-50e10ae6853c",
+        "name":"John Snow",
+        "status":"invited",
+        "group": {
+            "id": "da8edf26-3e1e-4cbb-b985-450c49fffe01",
+            "name": "Work",
+          }
+        };
+
+      await route.fulfill({ json });
+    }
   })
 }
 
@@ -34,27 +49,31 @@ const mockGroupsAPI = ({ page }: { page: Page }) => {
         "id": "ee44ffb9-1147-4842-a378-9eaeb0f0871a",
         "name": "Pam's family",
         "icon": "pi pi-users",
-        "parent_id": "cd9645e1-02c6-4fb9-bba6-1a960754b01c",
+        "parent_id": null,
         "color": "#ff0000",
+        "attendance": {
           "total": 3,
           "considered": 2,
           "invited": 1,
           "confirmed": 0,
           "declined": 0,
           "tentative": 0
+        }
       },
       {
         "id": "c8bda6ca-d8af-4bb8-b2bf-e6ec1c21b1e6",
         "name": "Pam's work",
         "icon": "pi pi-desktop",
-        "parent_id": "cd9645e1-02c6-4fb9-bba6-1a960754b01c",
+        "parent_id": null,
         "color": "#00ff00",
+        "attendance": {
           "total": 2,
           "considered": 0,
           "invited": 0,
           "confirmed": 0,
           "declined": 0,
           "tentative": 2
+        }
       },
     ];
 
@@ -67,24 +86,55 @@ test('should display the list of guests', async ({ page }) => {
 
   await page.goto('/default/dashboard/guests');
 
-  await expect(page.getByRole('tab', { name: 'Groups' })).toBeVisible();
+  await expect(page.getByRole('button', { name: 'Add new' })).toBeVisible();
+
   await expect(page.getByRole('tab', { name: 'Guests' })).toBeVisible();
+  await expect(page.getByRole('tab', { name: 'Groups' })).toBeVisible();
+  await expect(page.getByRole('tab', { name: 'Invitations' })).toBeVisible();
 
   await expect(page.getByText('There are 2 elements in the list')).toBeVisible();
+  await expect(page.getByRole('row')).toHaveCount(3); // 1 header row + 2 data rows
 
   await expect(page.getByRole('row').nth(1).getByRole('cell', { name: 'Kristofer Rohan DVM' })).toBeVisible();
   await expect(page.getByRole('row').nth(1).getByRole('cell', { name: 'Childhood friends' })).toBeVisible();
   await expect(page.getByRole('row').nth(1).getByRole('cell', { name: 'Tentative' })).toBeVisible();
-  await expect(page.getByRole('row').nth(1).getByRole('button', { name: 'Confirm' })).toBeVisible();
-  await expect(page.getByRole('row').nth(1).getByRole('button', { name: 'Decline' })).toBeVisible();
+  await expect(page.getByRole('row').nth(1).locator('svg')).toHaveCount(2);
 
 
   await expect(page.getByRole('row').nth(2).getByRole('cell', { name: 'Olevia Quigley Jr.' })).toBeVisible();
   await expect(page.getByRole('row').nth(2).getByRole('cell', { name: 'Work' })).toBeVisible();
   await expect(page.getByRole('row').nth(2).getByRole('cell', { name: 'Invited' })).toBeVisible();
-  await expect(page.getByRole('row').nth(2).getByRole('button', { name: 'Confirm' })).toBeVisible();
-  await expect(page.getByRole('row').nth(2).getByRole('button', { name: 'Tentative' })).toBeVisible();
-  await expect(page.getByRole('row').nth(2).getByRole('button', { name: 'Decline' })).toBeVisible();
+  await expect(page.getByRole('row').nth(2).locator('svg')).toHaveCount(2);
+});
+
+test('should allow creating a new guest', async ({ page }) => {
+  await mockGuestsAPI({ page });
+  await mockGroupsAPI({ page });
+
+  await page.goto('/default/dashboard/guests');
+  await expect(page.getByText('There are 2 elements in the list')).toBeVisible();
+  await page.getByRole('button', { name: 'Add new' }).click();
+
+  await page.getByRole('dialog').getByLabel('Name').fill('John Snow');
+
+  await page.keyboard.press('Tab');
+  await page.keyboard.press('ArrowDown');
+  await page.keyboard.press('ArrowDown');
+  await page.keyboard.press('Enter');
+
+  await page.keyboard.press('Tab');
+  await page.keyboard.press('ArrowDown');
+  await page.keyboard.press('ArrowDown');
+  await page.keyboard.press('Enter');
+
+  await page.getByRole('dialog').getByRole('button', { name: 'Create' }).click();
+
+  await expect(page.getByText('There are 3 elements in the list')).toBeVisible();
+
+  await expect(page.getByRole('row').nth(1).getByRole('cell', { name: 'John Snow' })).toBeVisible();
+  await expect(page.getByRole('row').nth(1).getByRole('cell', { name: 'Work' })).toBeVisible();
+  await expect(page.getByRole('row').nth(1).getByRole('cell', { name: 'Invited' })).toBeVisible();
+  await expect(page.getByRole('row').nth(1).locator('svg')).toHaveCount(2);
 });
 
 test('should display the list of groups', async ({ page }) => {
@@ -93,8 +143,38 @@ test('should display the list of groups', async ({ page }) => {
   await page.goto('/default/dashboard/guests');
   await page.getByRole('tab', { name: 'Groups' }).click();
 
-  await expect(page.getByText('There are 2 elements in the list')).toBeVisible();
+  await expect(page.getByRole('button', { name: 'Add new' })).toBeVisible();
+  await expect(page.getByRole('button', { name: 'Reset affinities' })).toBeVisible();
+
+  await expect(page.getByRole('row')).toHaveCount(3); // 1 header row + 2 data rows
+
+  await expect(page.getByRole('row').nth(0).getByRole('columnheader').nth(0)).toHaveText('Name');
+  await expect(page.getByRole('row').nth(0).getByRole('columnheader').nth(1)).toHaveText('Color');
+  await expect(page.getByRole('row').nth(0).getByRole('columnheader').nth(2)).toHaveText('Confirmed');
+  await expect(page.getByRole('row').nth(0).getByRole('columnheader').nth(3)).toHaveText('Tentative');
+  await expect(page.getByRole('row').nth(0).getByRole('columnheader').nth(4)).toHaveText('Pending');
+  await expect(page.getByRole('row').nth(0).getByRole('columnheader').nth(5)).toHaveText('Declined');
+  await expect(page.getByRole('row').nth(0).getByRole('columnheader').nth(6)).toHaveText('Considered');
+  await expect(page.getByRole('row').nth(0).getByRole('columnheader').nth(7)).toHaveText('Total');
+  await expect(page.getByRole('row').nth(0).getByRole('columnheader').nth(8)).toHaveText('Actions');
+
+  await expect(page.getByRole('row').nth(1).getByRole('cell').nth(0)).toContainText('Pam\'s family');
+  await expect(page.getByRole('row').nth(1).getByRole('cell').nth(2)).toHaveText('0');
+  await expect(page.getByRole('row').nth(1).getByRole('cell').nth(3)).toHaveText('0');
+  await expect(page.getByRole('row').nth(1).getByRole('cell').nth(4)).toHaveText('1');
+  await expect(page.getByRole('row').nth(1).getByRole('cell').nth(5)).toHaveText('0');
+  await expect(page.getByRole('row').nth(1).getByRole('cell').nth(6)).toHaveText('2');
+  await expect(page.getByRole('row').nth(1).getByRole('cell').nth(7)).toHaveText('3');
+  await expect(page.getByRole('row').nth(1).locator('svg:visible')).toHaveCount(3);
+
+
+  await expect(page.getByRole('row').nth(2).getByRole('cell').nth(0)).toContainText('Pam\'s work');
+  await expect(page.getByRole('row').nth(2).getByRole('cell').nth(2)).toHaveText('0');
+  await expect(page.getByRole('row').nth(2).getByRole('cell').nth(3)).toHaveText('2');
+  await expect(page.getByRole('row').nth(2).getByRole('cell').nth(4)).toHaveText('0');
+  await expect(page.getByRole('row').nth(2).getByRole('cell').nth(5)).toHaveText('0');
+  await expect(page.getByRole('row').nth(2).getByRole('cell').nth(6)).toHaveText('0');
+  await expect(page.getByRole('row').nth(2).getByRole('cell').nth(7)).toHaveText('2');
+  await expect(page.getByRole('row').nth(2).locator('svg:visible')).toHaveCount(3);
 
-  await expect(page.getByRole('row').nth(1).getByRole('cell', { name: "Pam's family" })).toBeVisible();
-  await expect(page.getByRole('row').nth(2).getByRole('cell', { name: "Pam's work" })).toBeVisible();
 });