Merge pull request 'Update dependency zod to v3.25.46' (#263) from renovate/zod-3.x-lockfile into main

Reviewed-on: #263

.github/workflows/build.yml

@@ -1,8 +1,6 @@
 name: Build Nginx-based docker image
 on:
   push:
-    branches:
-      - main
 concurrency:
   group: ${{ github.ref }}
   cancel-in-progress: true
@@ -25,12 +23,31 @@ jobs:
           username: ${{ secrets.PRIVATE_REGISTRY_USERNAME }}
           password: ${{ secrets.PRIVATE_REGISTRY_TOKEN }}
 
-      - name: Build and push
+      - name: Build and push intermediate stages (deps)
         uses: docker/build-push-action@v6
         with:
           context: .
-          push: ${{ github.event_name != 'pull_request' }}
+          target: deps
-          tags: |
+          push: ${{ github.ref == 'refs/heads/main' }}
-            ${{ secrets.PRIVATE_REGISTRY_HOST }}/${{ env.GITHUB_REPOSITORY }}:latest
+          tags: ${{ secrets.PRIVATE_REGISTRY_HOST }}/${{ env.GITHUB_REPOSITORY }}:deps
-          cache-from: type=registry,ref=user/app:latest
+          cache-from: type=registry,ref=${{ secrets.PRIVATE_REGISTRY_HOST }}/${{ env.GITHUB_REPOSITORY }}:deps
+          cache-to: type=inline
+
+      - name: Build and push intermediate stages (builder)
+        uses: docker/build-push-action@v6
+        with:
+          context: .
+          target: builder
+          push: ${{ github.ref == 'refs/heads/main' }}
+          tags: ${{ secrets.PRIVATE_REGISTRY_HOST }}/${{ env.GITHUB_REPOSITORY }}:builder
+          cache-from: type=registry,ref=${{ secrets.PRIVATE_REGISTRY_HOST }}/${{ env.GITHUB_REPOSITORY }}:builder
+          cache-to: type=inline
+        
+      - name: Build and push (final)
+        uses: docker/build-push-action@v6
+        with:
+          context: .
+          push: ${{ github.ref == 'refs/heads/main' }}
+          tags: ${{ secrets.PRIVATE_REGISTRY_HOST }}/${{ env.GITHUB_REPOSITORY }}:latest
+          cache-from: type=registry,ref=${{ secrets.PRIVATE_REGISTRY_HOST }}/${{ env.GITHUB_REPOSITORY }}:latest
           cache-to: type=inline

.github/workflows/copyright_notice.yml

@@ -16,7 +16,7 @@ jobs:
           ref: ${{ github.head_ref }}
       - uses: VinnyBabuManjaly/copyright-action@v1.0.0
         with:
-          CopyrightString: '/* Copyright (C) 2024 Manuel Bustillo*/\n\n'
+          CopyrightString: '/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/\n\n'
           FileType: '.tsx, .jsx, .ts'
           Path: 'app/, config/, db/'
           IgnorePath: 'testfolder1/a/, testfolder3'

.nvmrc

@@ -1 +1 @@
-23.3.0
+23.11.1

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

@@ -1,15 +1,44 @@
-/* Copyright (C) 2024 Manuel Bustillo*/
+/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
 
-import { lusitana } from '@/app/ui/fonts';
+'use client'
+
+import { AbstractApi } from '@/app/api/abstract-api';
+import { Expense, ExpenseSerializer } from '@/app/lib/expense';
+import { classNames } from '@/app/ui/components/button';
+import ExpenseFormDialog from '@/app/ui/components/expense-form-dialog';
 import ExpensesTable from '@/app/ui/expenses/table';
+import SkeletonTable from '@/app/ui/guests/skeleton-row';
+import { Suspense, useEffect, useState } from 'react';
 
 export default function Page() {
+  const refreshExpenses = () => {
+    new AbstractApi<Expense>().getAll(new ExpenseSerializer(), (expenses: Expense[]) => {
+      setExpenses(expenses);
+    });
+  }
+
+  const [expenses, setExpenses] = useState<Expense[]>([]);
+  const [expenseBeingEdited, setExpenseBeingEdited] = useState<Expense | undefined>(undefined);
+  useEffect(() => { refreshExpenses() }, []);
+
   return (
     <div className="w-full">
-      <div className="w-full items-center justify-between">
+      <div className="flex flex-col w-full items-center justify-between">
-        <h1 className={`${lusitana.className} text-2xl`}>Expenses</h1>
+        <button onClick={() => setExpenseBeingEdited({})} className={classNames('primary')}>Add new</button>
-        <h2 className={`${lusitana.className} text-xl`}>Summary</h2>
+        <ExpenseFormDialog
-        <ExpensesTable />
+          key={expenseBeingEdited?.id}
+          onCreate={() => { refreshExpenses(); setExpenseBeingEdited(undefined) }}
+          expense={expenseBeingEdited}
+          visible={expenseBeingEdited !== undefined}
+          onHide={() => { setExpenseBeingEdited(undefined) }}
+        />
+        <Suspense fallback={<SkeletonTable />}>
+          <ExpensesTable
+            expenses={expenses}
+            onUpdate={refreshExpenses}
+            onEdit={(expense) => setExpenseBeingEdited(expense)}
+          />
+        </Suspense>
       </div>
     </div>
   );

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

@@ -1,43 +1,94 @@
-/* Copyright (C) 2024 Manuel Bustillo*/
+/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
 
 'use client';
 
-import { loadGroups } from '@/app/api/groups';
+import { AbstractApi, } from '@/app/api/abstract-api';
-import { loadGuests } from '@/app/api/guests';
+import { Group, GroupSerializer } from '@/app/lib/group';
-import { Group, Guest } from '@/app/lib/definitions';
+import { Guest, GuestSerializer } from '@/app/lib/guest';
+import { getCsrfToken, getSlug } from '@/app/lib/utils';
+import AffinitiesFormDialog from '@/app/ui/components/affinities-form-dialog';
 import { classNames } from '@/app/ui/components/button';
+import GroupFormDialog from '@/app/ui/components/group-form-dialog';
 import GuestFormDialog from '@/app/ui/components/guest-form-dialog';
 import GroupsTable from '@/app/ui/groups/table';
 import SkeletonTable from '@/app/ui/guests/skeleton-row';
 import GuestsTable from '@/app/ui/guests/table';
 import { TabPanel, TabView } from 'primereact/tabview';
-import { Suspense, useState } from 'react';
+import { Toast } from 'primereact/toast';
+import { Suspense, useRef, useState } from 'react';
+import InvitationsBoard from '@/app/ui/invitations/board';
+import { Invitation, InvitationSerializer } from '@/app/lib/invitation';
 
 
 export default function Page() {
+  const toast = useRef<Toast>(null);
+  
   function refreshGuests() {
-    loadGuests((guests) => {
+    new AbstractApi<Guest>().getAll(new GuestSerializer(), (objects: Guest[]) => {
-      setGuests(guests);
+      setGuests(objects);
       setGuestsLoaded(true);
     });
   }
 
   function refreshGroups() {
-    loadGroups((groups) => {
+    new AbstractApi<Group>().getAll(new GroupSerializer(), (objects: Group[]) => {
-      setGroups(groups);
+      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`, {
+      method: 'POST',
+      headers: {
+      'Accept': 'application/json',
+      'X-CSRF-TOKEN': getCsrfToken(),
+      }
+    })
+    .then(response => {
+      if (response.ok) {
+      showAffinitiesResetSuccess();
+      } else {
+      console.error('Failed to reset affinities');
+      }
+    })
+    .catch(error => {
+      console.error('Error resetting affinities:', error);
+    });
+  }
+
+  function showAffinitiesResetSuccess() {
+    toast.current?.show({
+      severity: 'success',
+      summary: 'Affinities reset',
+      detail: 'All affinities have been reset to default values.'
+    });
+  }
+
   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">
@@ -54,17 +105,52 @@ export default function Page() {
               onHide={() => { setGuestBeingEdited(undefined) }}
             />
             <Suspense fallback={<SkeletonTable />}>
-              <GuestsTable guests={guests} onUpdate={refreshGuests} onEdit={(guest) => setGuestBeingEdited(guest)} />
+              <GuestsTable
+                guests={guests}
+                onUpdate={refreshGuests}
+                onEdit={(guest) => setGuestBeingEdited(guest)}
+              />
             </Suspense>
           </div>
         </ TabPanel>
         <TabPanel header="Groups" leftIcon="pi pi-sitemap mx-2">
-          <div className="flex w-full items-center justify-between">
+          <div className="flex flex-col w-full items-center justify-between">
+
+            <div>
+              <Toast ref={toast} />
+              <button onClick={() => setGroupBeingEdited({})} className={classNames('primary')}>Add new</button>
+              <button onClick={resetAffinities} className={classNames('yellow')}>Reset affinities</button>
+            </div>
+
+            <GroupFormDialog
+              key={groupBeingEdited?.id}
+              groups={groups}
+              onCreate={() => { refreshGroups(); setGroupBeingEdited(undefined) }}
+              group={groupBeingEdited}
+              visible={groupBeingEdited !== undefined}
+              onHide={() => { setGroupBeingEdited(undefined) }}
+            />
+
+            <AffinitiesFormDialog
+              groups={groups}
+              group={groupAffinitiesBeingEditted}
+              visible={groupAffinitiesBeingEditted !== undefined}
+              onHide={() => { setGroupAffinitiesBeingEditted(undefined) }}
+            />
+
             <Suspense fallback={<SkeletonTable />}>
-              <GroupsTable groups={groups} />
+              <GroupsTable
+                groups={groups}
+                onUpdate={refreshGroups}
+                onEdit={(group) => setGroupBeingEdited(group)}
+                onEditAffinities={(group) => setGroupAffinitiesBeingEditted(group)}
+              />
             </Suspense>
           </div>
         </ TabPanel>
+        <TabPanel header="Invitations" leftIcon="pi pi-envelope mx-2">
+          <InvitationsBoard guests={guests} invitations={invitations}/>
+        </TabPanel>
       </ TabView>
     </div>
 

app/[slug]/dashboard/layout.tsx

@@ -1,4 +1,4 @@
-/* Copyright (C) 2024 Manuel Bustillo*/
+/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
 
 import SideNav from '@/app/ui/dashboard/sidenav';
  

app/[slug]/dashboard/page.tsx

@@ -1,9 +1,26 @@
-/* Copyright (C) 2024 Manuel Bustillo*/
+/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
 
+'use client'
+
+import { GlobalSummary as Summary } from '@/app/lib/definitions';
+import { getSlug } from '@/app/lib/utils';
 import GlobalSummary from '@/app/ui/dashboard/global-summary';
+import { useEffect, useState } from 'react';
 
 export default function Page() {
+  const [globalSummary, setGlobalSummary] = useState<Summary | undefined>(undefined);
+
+  function refreshSummary() {
+    fetch(`/api/${getSlug()}/summary`)
+      .then((response) => response.json())
+      .then((data) => {
+        setGlobalSummary(data);
+      })
+  }
+
+  useEffect(refreshSummary, []);
+
   return (
-    <GlobalSummary />
+    globalSummary && <GlobalSummary summary={globalSummary} />
   );
 }

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

@@ -1,16 +1,42 @@
-/* Copyright (C) 2024 Manuel Bustillo*/
+/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
 
 'use client';
 
+import { AbstractApi } from '@/app/api/abstract-api';
+import { TableSimulation, TableSimulationSerializer } from '@/app/lib/tableSimulation';
 import Arrangement from '@/app/ui/arrangements/arrangement';
-import React, { useState } from 'react';
 import ArrangementsTable from '@/app/ui/arrangements/arrangements-table';
+import { classNames } from '@/app/ui/components/button';
+import { Toast } from 'primereact/toast';
+import React, { useRef, useState } from 'react';
 
 export default function Page() {
+  const toast = useRef<Toast>(null);
+
+  const show = () => {
+    toast.current?.show({
+      severity: 'success',
+      summary: 'Simulation created',
+      detail: 'Table distributions will be calculated shortly, please come back in some minutes'
+    });
+  };
+
   const [currentArrangement, setCurrentArrangement] = useState<string | null>(null);
 
+  function createSimulation() {
+    const api = new AbstractApi<TableSimulation>();
+    const serializer = new TableSimulationSerializer();
+    api.create(serializer, new TableSimulation(), show);
+  }
+
   return (
     <>
+
+      <div className="flex flex-col w-full items-center justify-between">
+        <Toast ref={toast} />
+        <button onClick={createSimulation} className={classNames('primary')}>Add new</button>
+      </div>
+
       <ArrangementsTable onArrangementSelected={setCurrentArrangement} />
       {currentArrangement && <Arrangement key={currentArrangement} id={currentArrangement} />}
     </>

app/[slug]/page.tsx

@@ -1,30 +1,40 @@
-/* Copyright (C) 2024 Manuel Bustillo*/
+/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
 
 'use client';
-import Link from 'next/link';
+
-import styles from '@/app/ui/home.module.css';
 import LoginForm from '@/app/ui/components/login-form';
+import RegistrationForm from '@/app/ui/components/registration-form';
+import { useParams } from 'next/navigation'
+import { useEffect } from 'react';
+import { retrieveCSRFToken } from '../api/authentication';
+import { getCsrfToken } from '../lib/utils';
 
+export default async function Page() {
+  const params = useParams<{ slug: string }>()
 
+  useEffect(() => {
+    if (getCsrfToken() == 'unknown') {
+      retrieveCSRFToken();
+    }
+  }, []);
 
-export default async function Page({ params }: { params: Promise<{ slug: string }> }) {
+  if (typeof window !== 'undefined') {
+    localStorage.setItem('slug', await params.slug);
+  }
 
-  localStorage.setItem('slug', (await params).slug)
   return (
     <main className="flex min-h-screen flex-col p-6">
       <div className="flex flex-row">
         <div className="w-1/2">
-
           Already have an account? Sign in
-
           <LoginForm />
         </div>
 
         <div className="w-1/2">
           Don't have an account? Register now!
+          <RegistrationForm />
         </div>
       </div>
-
     </main>
   );
 }

app/api/abstract-api.tsx

@@ -0,0 +1,80 @@
+/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
+
+import { Entity } from '@/app/lib/definitions';
+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;
+  update(serializable: Serializable<T>, object: T, callback: () => void): void;
+  destroy(serializable: Serializable<T>, object: T, callback: () => void): void;
+}
+
+export interface Serializable<T> {
+  fromJson(json: any): T;
+  toJson(object: T): string;
+  apiPath(): string;
+}
+
+export class AbstractApi<T extends Entity> implements Api<T> {
+  getAll(serializable: Serializable<T>, callback: (objets: T[]) => void): void {
+    fetch(`/api/${getSlug()}/${serializable.apiPath()}`)
+      .then((response) => response.json())
+      .then((data) => {
+        callback(data.map((record: any) => {
+          return serializable.fromJson(record);
+        }));
+      }, (error) => {
+        return [];
+      });
+  }
+
+  get(serializable: Serializable<T>, id: string, callback: (object: T) => void): void {
+    fetch(`/api/${getSlug()}/${serializable.apiPath()}/${id}`)
+      .then((response) => response.json())
+      .then((data) => {
+        callback(serializable.fromJson(data));
+      }, (error) => {
+        return [];
+      });
+  }
+
+  update(serializable: Serializable<T>, object: T, callback: () => void): void {
+    fetch(`/api/${getSlug()}/${serializable.apiPath()}/${object.id}`, {
+      method: 'PUT',
+      body: serializable.toJson(object),
+      headers: {
+        'Content-Type': 'application/json',
+        'X-CSRF-TOKEN': getCsrfToken(),
+      }
+    }).then(callback)
+      .catch((error) => console.error(error));
+  }
+
+  create(serializable: Serializable<T>, object: T, callback: (createdObject: T) => void): void {
+    fetch(`/api/${getSlug()}/${serializable.apiPath()}`, {
+      method: 'POST',
+      body: serializable.toJson(object),
+      headers: {
+        'Content-Type': 'application/json',
+        'X-CSRF-TOKEN': getCsrfToken(),
+      }
+    })
+      .then((response) => response.json())
+      .then((data) => {
+        callback(serializable.fromJson(data));
+      })
+      .catch((error) => console.error(error));
+  }
+
+  destroy(serializable: Serializable<T>, object: T, callback: () => void): void {
+    fetch(`/api/${getSlug()}/${serializable.apiPath()}/${object.id}`, {
+      method: 'DELETE',
+      headers: {
+        'X-CSRF-TOKEN': getCsrfToken(),
+      }
+    }).then(callback)
+      .catch((error) => console.error(error));
+  }
+}

app/api/authentication.tsx

@@ -1,10 +1,9 @@
-/* Copyright (C) 2024 Manuel Bustillo*/
+/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
 
-import { getCsrfToken, getSlug } from '@/app/lib/utils';
+import { asArray, getCsrfToken, getSlug } from '@/app/lib/utils';
-import { User } from '@/app/lib/definitions';
+import { Captcha, StructuredErrors, User } from '@/app/lib/definitions';
 
 export function login({ email, password, onLogin }: { email: string, password: string, onLogin: (user: User) => void }) {
-  console.log(email, password);
   return fetch(`/api/${getSlug()}/users/sign_in`, {
     method: 'POST',
     body: JSON.stringify({ user: { email, password } }),
@@ -34,3 +33,54 @@ export function logout({ onLogout }: { onLogout: () => void }) {
   }).then(onLogout)
     .catch((error) => console.error(error));
 }
+
+function flattenErrors(errors: StructuredErrors): string[] {
+  if (errors instanceof Array) {
+    return errors;
+  }
+  return Object.keys(errors).map((key) => {
+    return `${key}: ${asArray(errors[key]).join(', ')}`;
+  });
+}
+
+// At this moment we're making an initial request to get a valid CSRF token
+export function retrieveCSRFToken() {
+  return fetch(`/api/token`, {
+    headers: {
+      'Accept': 'application/json',
+    }
+  }).then((response) => { return null });
+}
+
+export function register({ slug, email, password, passwordConfirmation, captcha, onRegister, onError }: {
+  slug: string,
+  email: string,
+  password: string,
+  passwordConfirmation: string,
+  captcha: Captcha,
+  onRegister: () => void,
+  onError: (errors: string[]) => void
+}) {
+  fetch(`/api/${slug}/users`, {
+    method: 'POST',
+    body: JSON.stringify(
+      {
+        user: { email, password, password_confirmation: passwordConfirmation },
+        captcha: { id: captcha.id, answer: captcha.answer }
+      }
+    ),
+    headers: {
+      'Accept': 'application/json',
+      'Content-Type': 'application/json',
+      'X-CSRF-TOKEN': getCsrfToken(),
+    }
+  }).then((response) => {
+    if (response.ok) {
+      response.json().then(onRegister);
+    } else {
+      response.json().then((data: any) => {
+        onError(data.errors && flattenErrors(data.errors) || [data.error]);
+      });
+    }
+  })
+}

app/api/captcha.tsx

@@ -0,0 +1,19 @@
+/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
+
+import { data } from "autoprefixer";
+import { getCsrfToken } from "../lib/utils";
+
+export function getCaptchaChallenge({onRetrieve}: {onRetrieve: (id: string, url: string) => void}){
+  return fetch('/api/captcha', {
+    method: 'POST',
+    headers: {
+      'Accept': 'application/json',
+      'X-CSRF-TOKEN': getCsrfToken(),
+    }
+  })
+    .then((response) => response.json())
+    .then((data: any) => {
+      onRetrieve(data.id, data.media_url)
+    })
+    .catch((error) => console.error(error));
+}

app/api/expenses.tsx

@@ -1,40 +0,0 @@
-/* Copyright (C) 2024 Manuel Bustillo*/
-
-import { Expense } from '@/app/lib/definitions';
-import { getCsrfToken, getSlug } from '@/app/lib/utils';
-
-export function loadExpenses(onLoad?: (expenses: Expense[]) => void) {
-  fetch(`/api/${getSlug()}/expenses`)
-    .then((response) => response.json())
-    .then((data) => {
-      onLoad && onLoad(data.map((record: any) => {
-        return ({
-          id: record.id,
-          name: record.name,
-          amount: record.amount,
-          pricingType: record.pricing_type
-        });
-      }));
-    }, (error) => {
-      return [];
-    });
-}
-
-export function updateExpense(expense: Expense) {
-  fetch(`/api/${getSlug()}/expenses/${expense.id}`,
-    {
-      method: 'PUT',
-      body: JSON.stringify({
-        expense: {
-          name: expense.name,
-          amount: expense.amount,
-          pricing_type: expense.pricingType,
-        }
-      }),
-      headers: {
-        'Content-Type': 'application/json',
-        'X-CSRF-TOKEN': getCsrfToken(),
-      }
-    })
-    .catch((error) => console.error(error));
-}

app/api/groups.tsx

@@ -1,28 +0,0 @@
-/* Copyright (C) 2024 Manuel Bustillo*/
-
-import { Group } from '@/app/lib/definitions';
-import { getSlug } from '../lib/utils';
-
-export function loadGroups(onLoad?: (groups: Group[]) => void) {
-  fetch(`/api/${getSlug()}/groups`)
-    .then((response) => response.json())
-    .then((data) => {
-      onLoad && onLoad(data.map((record: any) => {
-        return ({
-          id: record.id,
-          name: record.name,
-          color: record.color,
-          attendance: {
-            considered: record.considered,
-            invited: record.invited,
-            confirmed: record.confirmed,
-            tentative: record.tentative,
-            declined: record.declined,
-            total: record.total,
-          }
-        });
-      }));
-    }, (error) => {
-      return [];
-    });
-}

app/api/guests.tsx

@@ -1,65 +0,0 @@
-/* Copyright (C) 2024 Manuel Bustillo*/
-
-import { Guest } from '@/app/lib/definitions';
-import { getCsrfToken, getSlug } from '@/app/lib/utils';
-
-export function loadGuests(onLoad?: (guests: Guest[]) => void) {
-  fetch(`/api/${getSlug()}/guests`)
-    .then((response) => response.json())
-    .then((data) => {
-      onLoad && onLoad(data.map((record: any) => {
-        return ({
-          id: record.id,
-          name: record.name,
-          status: record.status,
-          group_name: record.group.name,
-          groupId: record.group.id,
-        });
-      }));
-    }, (error) => {
-      return [];
-    });
-};
-
-export function updateGuest(guest: Guest) {
-  return fetch(`/api/${getSlug()}/guests/${guest.id}`,
-    {
-      method: 'PUT',
-      body: JSON.stringify({ guest: { name: guest.name, status: guest.status, group_id: guest.groupId } }),
-      headers: {
-        'Content-Type': 'application/json',
-        'X-CSRF-TOKEN': getCsrfToken(),
-      }
-    })
-    .catch((error) => console.error(error));
-}
-
-export function createGuest(guest: Guest, onCreate?: () => void) {
-  fetch(`/api/${getSlug()}/guests`, {
-    method: 'POST',
-    body: JSON.stringify({ name: guest.name, group_id: guest.groupId, status: guest.status }),
-    headers: {
-      'Content-Type': 'application/json',
-      'X-CSRF-TOKEN': getCsrfToken(),
-    }
-  })
-    .then((response) => response.json())
-    .then((data) => {
-      onCreate && onCreate();
-    })
-    .catch((error) => console.error(error));
-}
-
-export function destroyGuest(guest: Guest, onDestroy?: () => void) {
-  fetch(`/api/${getSlug()}/guests/${guest.id}`, {
-    method: 'DELETE',
-    headers: {
-      'X-CSRF-TOKEN': getCsrfToken(),
-    }
-  })
-    .then((response) => response.json())
-    .then((data) => {
-      onDestroy && onDestroy();
-    })
-    .catch((error) => console.error(error));
-}

app/api/health/route.ts

@@ -0,0 +1,7 @@
+/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
+
+import { NextResponse } from "next/server";
+
+export function GET() {
+  return NextResponse.json({});
+}

app/api/tableSimulations.tsx

@@ -1,4 +1,4 @@
-/* Copyright (C) 2024 Manuel Bustillo*/
+/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
 
 import { TableArrangement } from '@/app/lib/definitions';
 import { getSlug } from '../lib/utils';
@@ -12,6 +12,7 @@ export function loadTableSimulations(onLoad?: (tableSimulations: TableArrangemen
           id: record.id,
           name: record.name,
           discomfort: record.discomfort,
+          valid: record.valid,
         });
       }));
     }, (error) => {

app/layout.tsx

@@ -1,4 +1,4 @@
-/* Copyright (C) 2024 Manuel Bustillo*/
+/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
 
 import '@/app/ui/global.css'
 

app/lib/affinities.tsx

@@ -0,0 +1,5 @@
+/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
+
+export class Affinities {
+  [key:string]: number;
+}

app/lib/definitions.ts

@@ -1,67 +1,50 @@
-/* Copyright (C) 2024 Manuel Bustillo*/
+/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
 
-// This file contains type definitions for your data.
+import { AttendanceSummary } from "./group";
-// It describes the shape of the data, and what data type each property should accept.
+import { Guest } from "./guest";
-// For simplicity of teaching, we're manually defining these types.
-// However, these types are generated automatically if you're using an ORM such as Prisma.
 
-export const guestStatuses = ['considered', 'invited', 'confirmed', 'declined', 'tentative'] as const;
+export interface Entity {
-export type GuestStatus = typeof guestStatuses[number];
-export type Guest = {
   id?: string;
-  name?: string;
-  group_name?: string;
-  groupId?: string;
-  color?: string;
-  status?: GuestStatus
 }
 
-export type Expense = {
-  id: string;
-  name: string;
-  amount: number;
-  pricingType: 'fixed' | 'per person';
-};
-
 export type TableArrangement = {
   id: string;
   number: number;
   name: string;
   guests?: Guest[];
-  discomfort?: number
+  discomfort?: number;
+  valid?: boolean;
 }
 
-export type Group = {
-  id: string;
-  name: string;
-  guest_count: number;
-  icon: string;
-  children: Group[];
-  color?: string;
-  attendance?: AttendanceSummary
-};
-
-export type AttendanceSummary = {
-  considered: number;
-  invited: number;
-  confirmed: number;
-  declined: number;
-  tentative: number;
-  total: number;
-}
-
-export type guestsTable = {
-  id: string;
-  customer_id: string;
-  name: string;
-  email: string;
-  image_url: string;
-  date: string;
-  amount: number;
-  status: 'pending' | 'paid';
-};
-
 export type User = {
   id: string;
   email: string;
 }
+
+export type Captcha = {
+  id: string;
+  answer: string;
+}
+
+export type StructuredErrors = {
+  [key: string]: string[] | string;
+};
+
+export type GlobalSummary = {
+  expenses: ExpenseSummary; 
+  guests: AttendanceSummary
+}
+
+export type ExpenseSummary = {
+  projected: ExpensePossibleSummary;
+  confirmed: ExpensePossibleSummary;
+  status: StatusSummary;
+}
+
+export type ExpensePossibleSummary = {
+  total: number;
+  guests: number;
+}
+export type StatusSummary = {
+  paid: number;
+}

app/lib/expense.tsx

@@ -0,0 +1,41 @@
+/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
+
+import { Serializable } from "../api/abstract-api";
+import { Entity } from "./definitions";
+
+export const pricingTypes = ['fixed', 'per_person'] as const;
+export type PricingType = typeof pricingTypes[number];
+
+export class Expense implements Entity {
+  id?: string;
+  name?: string;
+  amount?: number;
+  pricingType?: PricingType;
+
+  constructor(id?: string, name?: string, amount?: number, pricingType?: PricingType) {
+    this.id = id;
+    this.name = name || '';
+    this.amount = amount || 0;
+    this.pricingType = pricingType || 'fixed';
+  }
+}
+
+export class ExpenseSerializer implements Serializable<Expense>{
+  fromJson(data: any): Expense {
+    return new Expense(data.id, data.name, data.amount, data.pricing_type);
+  }
+
+  toJson(expense: Expense): string {
+    return JSON.stringify({
+      expense: {
+        name: expense.name,
+        amount: expense.amount,
+        pricing_type: expense.pricingType
+      }
+    });
+  }
+
+  apiPath(): string {
+    return 'expenses';
+  }
+}

app/lib/group.tsx

@@ -0,0 +1,64 @@
+/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
+
+import { Entity } from "./definitions";
+
+export type AttendanceSummary = {
+  considered: number;
+  invited: number;
+  confirmed: number;
+  declined: number;
+  tentative: number;
+  total: number;
+}
+
+export class Group implements Entity {
+  id?: string;
+  name?: string;
+  guest_count?: number;
+  icon?: string;
+  children?: Group[];
+  parentId?: string;
+  color?: string;
+  attendance?: AttendanceSummary
+
+  constructor(id?: string, name?: string, guest_count?: number, icon?: string, children?: Group[], parentId?: string, color?: string, attendance?: AttendanceSummary) {
+    this.id = id;
+    this.name = name;
+    this.guest_count = guest_count;
+    this.icon = icon;
+    this.children = children;
+    this.parentId = parentId;
+    this.color = color;
+    this.attendance = attendance;
+  }
+}
+
+export class GroupSerializer {
+  fromJson(data: any): Group {
+    return new Group(
+      data.id,
+      data.name,
+      data.guest_count,
+      data.icon,
+      data.children,
+      data.parent_id,
+      data.color,
+      data.attendance
+    );
+  }
+
+  toJson(group: Group): string {
+    return JSON.stringify({
+      group: {
+        name: group.name,
+        color: group.color,
+        icon: group.icon,
+        parent_id: group.parentId
+      }
+    });
+  }
+
+  apiPath(): string {
+    return 'groups';
+  }
+}

app/lib/guest.tsx

@@ -0,0 +1,42 @@
+/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
+
+import { Serializable } from "../api/abstract-api";
+import { Entity } from "./definitions";
+
+export const guestStatuses = ['considered', 'invited', 'confirmed', 'declined', 'tentative'] as const;
+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[];
+
+  constructor(id?: string, name?: string, group_name?: string, groupId?: string, color?: string, status?: GuestStatus, children?: Guest[]) {
+    this.id = id;
+    this.name = name;
+    this.group_name = group_name;
+    this.groupId = groupId;
+    this.color = color;
+    this.status = status;
+    this.children = children;
+  }
+}
+
+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);
+  }
+
+  toJson(guest: Guest): string {
+    return JSON.stringify({ guest: { name: guest.name, status: guest.status, group_id: guest.groupId } });
+  }
+
+  apiPath(): string {
+    return 'guests';
+  }
+}
+

app/lib/invitation.tsx

@@ -0,0 +1,28 @@
+/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
+
+import { Entity } from "./definitions";
+import { Guest } from "./guest";
+
+export class Invitation implements Entity {
+  id?: string;
+  guests: Array<Guest>;
+
+  constructor(id?: string, guests: Array<Guest> = []) {
+    this.id = id;
+    this.guests = guests;
+  }
+}
+
+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)));
+  }
+
+  toJson(invitation: Invitation): string {
+    return JSON.stringify({ invitation: { guest_ids: invitation.guests.map(guest => guest.id) } });
+  }
+
+  apiPath(): string {
+    return 'invitations';
+  }
+}

app/lib/tableSimulation.tsx

@@ -0,0 +1,71 @@
+/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
+
+import { Serializable } from "../api/abstract-api";
+import { Entity } from "./definitions";
+import { Guest } from "./guest";
+
+export type Discomfort = {
+  discomfort: number;
+  breakdown: {
+    tableSizePenalty: number;
+    cohesionPenalty: number;
+  }
+}
+
+export type Table = {
+  number: number;
+  guests: Guest[];
+  discomfort: Discomfort;
+}
+
+export class TableSimulation implements Entity {
+  id?: string;
+  tables: Table[];
+
+  constructor(id?: string, tables?: Table[]) {
+    this.id = id;
+    this.tables = tables || [];
+  }
+}
+
+export class TableSimulationSerializer implements Serializable<TableSimulation> {
+  fromJson(data: any): TableSimulation {
+    return new TableSimulation(data.id, data.tables.map((table: any) => {
+      return {
+        number: table.number,
+        guests: table.guests.map((guest: any) => new Guest(guest.id, guest.name, guest.group?.name, guest.group?.id, guest.color)),
+        discomfort: {
+          discomfort: table.discomfort.discomfort,
+          breakdown: {
+            tableSizePenalty: table.discomfort.breakdown.table_size_penalty,
+            cohesionPenalty: table.discomfort.breakdown.cohesion_penalty,
+          }
+        },
+      }
+    }));
+  }
+
+  toJson(simulation: TableSimulation): string {
+    return JSON.stringify({ simulation: { tables: simulation.tables.map((table) => {
+      return {
+        number: table.number,
+        guests: table.guests.map((guest) => {
+          return {
+            id: guest.id,
+            name: guest.name,
+            group_id: guest.groupId,
+            color: guest.color,
+            status: guest.status,
+            children: guest.children,
+          }
+        }),
+        discomfort: table.discomfort,
+      }
+    }) } });
+  }
+
+  apiPath(): string {
+    return 'tables_arrangements';
+  }
+}
+

app/lib/utils.ts

@@ -1,4 +1,4 @@
-/* Copyright (C) 2024 Manuel Bustillo*/
+/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
 
 export const getCsrfToken = () => {
   return document.cookie
@@ -13,3 +13,8 @@ export const getSlug = () => localStorage.getItem('slug') || 'default';
 export const capitalize = (val:string) => {
   return String(val).charAt(0).toUpperCase() + String(val).slice(1);
 }
+
+// From https://stackoverflow.com/a/62118163/3607039
+export function asArray<T>(value: T | T[]): T[] {
+  return ([] as T[]).concat(value)
+}

app/types.tsx

@@ -1,4 +1,4 @@
-/* Copyright (C) 2024 Manuel Bustillo*/
+/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
 
 import * as HeroIcon from '@heroicons/react/24/outline'
 import { ComponentProps } from 'react'

app/ui/arrangements/arrangement.tsx

@@ -1,40 +1,34 @@
-/* Copyright (C) 2024 Manuel Bustillo*/
+/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
 
 'use client';
 
-import React, { useState } from 'react';
+import { AbstractApi } from '@/app/api/abstract-api';
-import { TableArrangement, Guest } from '@/app/lib/definitions';
+import { TableArrangement } from '@/app/lib/definitions';
-import { lusitana } from '@/app/ui/fonts';
+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';
 
 export default function Arrangement({ id }: { id: string }) {
 
-    const [tables, setTables] = useState<Array<TableArrangement>>([]);
+  const [simulation, setSimulation] = useState<TableSimulation | undefined>(undefined);
 
-    function loadTables() {
+  function loadSimulation() {
-        fetch(`/api/tables_arrangements/${id}`)
+    new AbstractApi<TableSimulation>().get(new TableSimulationSerializer(), id, (object: TableSimulation) => {
-            .then((response) => response.json())
+      setSimulation(object);
-            .then((data) => {
-                setTables(data.map((record: any) => {
-                    return ({
-                        id: record.number,
-                        guests: record.guests
-                    });
-                }));
-            }, (error) => {
-                return [];
     });
   }
 
-    tables.length === 0 && loadTables();
+  useEffect(loadSimulation, []);
 
   return (
     <div className="w-full">
       <div className="w-full items-center justify-between">
         <h1 className={`${lusitana.className} text-2xl my-5`}>Table distributions</h1>
         <div className="flex flex-row flex-wrap justify-around">
-                    {tables.map((table) => (
+          {simulation && simulation.tables.map((table) => (
-                        <Table key={table.number} guests={table.guests || []} style="rounded" />
+            <Table key={table.number} table={table} style="rounded" />
           ))}
         </div>
       </div>

app/ui/arrangements/arrangements-table.tsx

@@ -1,4 +1,4 @@
-/* Copyright (C) 2024 Manuel Bustillo*/
+/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
 
 'use client'
 
@@ -7,6 +7,9 @@ import { TableArrangement } from '@/app/lib/definitions';
 import { classNames } from "../components/button";
 import TableOfContents from "../components/table-of-contents";
 import { loadTableSimulations } from "@/app/api/tableSimulations";
+import { ArchiveBoxXMarkIcon, CheckBadgeIcon } from "@heroicons/react/24/outline";
+import { Tooltip } from "primereact/tooltip";
+import clsx from "clsx";
 
 export default function ArrangementsTable({ onArrangementSelected }: { onArrangementSelected: (arrangementId: string) => void }) {
   const [arrangements, setArrangements] = useState<Array<TableArrangement>>([]);
@@ -27,12 +30,15 @@ export default function ArrangementsTable ({onArrangementSelected}: {onArrangeme
 
   return (
     <TableOfContents
-        headers={['Name', 'Discomfort', 'Actions']}
+      headers={['Name', 'Discomfort', 'Actions', 'Status']}
       caption='Simulations'
       elements={arrangements}
       rowRender={(arrangement) => (
-          <tr key={arrangement.id} className="bg-white border-b odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800">
+        <tr key={arrangement.id} className={clsx("border-b", {
-            <th scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
+          "bg-white odd:bg-white even:bg-gray-50": arrangement.valid,
+          "bg-red-50 odd:bg-red-50 even:bg-red-100": !arrangement.valid
+        })}>
+          <th scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap">
             {arrangement.name}
           </th>
           <td className="px-6 py-4">
@@ -41,6 +47,15 @@ export default function ArrangementsTable ({onArrangementSelected}: {onArrangeme
           <td>
             <button data-arrangement-id={arrangement.id} onClick={arrangementClicked} className={classNames('primary')}>Load</button>
           </td>
+          <td>
+            <Tooltip target=".tooltip-status" />
+
+            {
+              arrangement.valid ?
+                <CheckBadgeIcon className='size-6 tooltip-status' data-pr-position="right" data-pr-tooltip="Simulation is valid" /> :
+                <ArchiveBoxXMarkIcon className='size-6 tooltip-status' data-pr-position="right" data-pr-tooltip="Simulation is expired due to attendance or affinity changes" />
+            }
+          </td>
         </tr>
       )}
     />

app/ui/button.tsx

@@ -1,4 +1,4 @@
-/* Copyright (C) 2024 Manuel Bustillo*/
+/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
 
 import clsx from 'clsx';
 

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

@@ -0,0 +1,82 @@
+/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
+
+'use client';
+
+import { Affinities } from '@/app/lib/affinities';
+import { Group } from '@/app/lib/group';
+import { getCsrfToken, getSlug } from '@/app/lib/utils';
+import { classNames } from '@/app/ui/components/button';
+import { Dialog } from 'primereact/dialog';
+import { useEffect, useState } from 'react';
+import AffinitySlider from './form/affinitySlider';
+
+export default function AffinitiesFormDialog({ groups, group, visible, onHide }: {
+  groups: Group[],
+  group?: Group,
+  visible: boolean,
+  onHide: () => void,
+}) {
+  const [affinities, setAffinities] = useState<Affinities>({});
+  const [isLoadingAffinities, setIsLoadingAffinities] = useState(true);
+
+  useEffect(() => {
+    setIsLoadingAffinities(true);
+    if (group?.id === undefined) {
+      setAffinities({});
+      setIsLoadingAffinities(false)
+    } else {
+      fetch(`/api/${getSlug()}/groups/${group?.id}/affinities`)
+        .then((response) => response.json())
+        .then((data) => {
+          setAffinities(data);
+          setIsLoadingAffinities(false)
+        });
+    }
+  }, [group]);
+
+  function submitAffinities() {
+    const formattedAffinities = Object.entries(affinities).map(([groupId, affinity]) => ({ group_id: groupId, affinity: affinity }));
+    fetch(`/api/${getSlug()}/groups/${group?.id}/affinities/bulk_update`, {
+      method: 'PUT',
+      headers: {
+        'Content-Type': 'application/json',
+        'X-CSRF-TOKEN': getCsrfToken(),
+      },
+      body: JSON.stringify({ affinities: formattedAffinities })
+    }).then(() => {
+      onHide();
+    });
+  }
+
+  function resetAffinities() {
+    fetch(`/api/${getSlug()}/groups/${group?.id}/affinities/default`, {
+      method: 'GET',
+      headers: {
+        'Accept': 'application/json',
+      }
+    }).then((response) => response.json())
+      .then(setAffinities);
+  }
+
+  return (
+    <Dialog header="Update affinities" visible={visible} style={{ width: '60vw' }} onHide={onHide}>
+      {!isLoadingAffinities && <div className="card justify-evenly py-5 bg-gray-200 flex flex-col">
+        <span className="text-center p-4">Describe the affinity with the rest of the groups</span>
+
+        {
+          groups.filter((currentGroup) => currentGroup.id !== group?.id).map((group) =>
+            <div key={group.id} className="flex flex-row hover:bg-gray-300 px-3 py-2 items-center">
+              <span className="w-1/3 text-right px-4">{group.name}</span>
+              <AffinitySlider value={group.id && affinities[group.id] || 1} onChange={(value) => setAffinities({ ...affinities, [group.id || "default"]: value })} />
+            </div>)
+        }
+
+        <div className="flex justify-center">
+          <button className={classNames('gray')} onClick={resetAffinities} >Reset</button>
+          <button className={classNames('primary')} onClick={submitAffinities} >Update</button>
+        </div>
+      </div>
+      }
+    </Dialog>
+  );
+}

app/ui/components/button.tsx

@@ -1,14 +1,15 @@
-/* Copyright (C) 2024 Manuel Bustillo*/
+/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
 
 import clsx from "clsx";
 
-type ButtonColor = 'primary' | 'blue' | 'green' | 'red' | 'yellow';
+type ButtonColor = 'primary' | 'blue' | 'green' | 'red' | 'yellow' | 'gray';
 
 export function classNames(type: ButtonColor) {
     return (clsx("text-white py-1 px-2 mx-1 rounded disabled:opacity-50 disabled:cursor-not-allowed", {
         'bg-blue-400 hover:bg-blue-600': type === 'primary' || type === 'blue',
         'bg-green-500 hover:bg-green-600': type === 'green',
         'bg-red-500 hover:bg-red-600': type === 'red',
-        'bg-yellow-500 hover:bg-yellow-700': type === 'yellow'
+        'bg-yellow-500 hover:bg-yellow-700': type === 'yellow',
+        'bg-gray-500 hover:bg-gray-700': type === 'gray'
     }))
 }

app/ui/components/dashboard-cards.tsx

@@ -1,4 +1,4 @@
-/* Copyright (C) 2024 Manuel Bustillo*/
+/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
 
 import clsx from "clsx"
 import { Icon } from "../../types";
@@ -21,7 +21,7 @@ const colorClasses = (style: Style) => {
     }
 }
 
-export async function MainCard({ amount, title, subtitle, style, iconName }:
+export function MainCard({ amount, title, subtitle, style, iconName }:
     {
         amount: string,
         title: string,
@@ -42,7 +42,7 @@ export async function MainCard({ amount, title, subtitle, style, iconName }:
     );
 }
 
-export async function SecondaryCard({ amount, title, iconName, style }: { amount: string, title: string, iconName: keyof typeof HeroIcon, style: Style }) {
+export function SecondaryCard({ amount, title, iconName, style }: { amount: string, title: string, iconName: keyof typeof HeroIcon, style: Style }) {
     return (
         <div className={`h-12 w-80 m-1 p-2 text-white flex flex-row items-center ${colorClasses(style)}`}>
             <Icon className="m-3 h-7 w-7" name={iconName} />

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

@@ -0,0 +1,83 @@
+/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
+
+'use client';
+
+import { AbstractApi } from '@/app/api/abstract-api';
+import { Expense, ExpenseSerializer, PricingType, pricingTypes } from '@/app/lib/expense';
+import { capitalize } from '@/app/lib/utils';
+import { classNames } from '@/app/ui/components/button';
+import { Dialog } from 'primereact/dialog';
+import { Dropdown } from 'primereact/dropdown';
+import { FloatLabel } from 'primereact/floatlabel';
+import { InputText } from 'primereact/inputtext';
+import { useState } from 'react';
+
+export default function ExpenseFormDialog({ onCreate, onHide, expense, visible }: {
+  onCreate?: () => void,
+  onHide: () => void,
+  expense?: Expense,
+  visible: boolean,
+}) {
+
+  const [name, setName] = useState<string>(expense?.name || '');
+  const [amount, setAmount] = useState<number>(expense?.amount || 0);
+  const [pricingType, setPricingType] = useState<PricingType>(expense?.pricingType || 'fixed');
+
+  const api = new AbstractApi<Expense>();
+  const serializer = new ExpenseSerializer();
+
+  function resetForm() {
+    setName('');
+    setAmount(0);
+    setPricingType('fixed');
+  }
+
+  function submitGroup() {
+    if (expense?.id !== undefined) {
+      expense.name = name;
+      expense.amount = amount;
+      expense.pricingType = pricingType;
+
+      api.update(serializer, expense, () => {
+        resetForm();
+        onCreate && onCreate();
+      });
+    } else {
+
+      api.create(serializer, new Expense(undefined, name, amount, pricingType), () => {
+        resetForm();
+        onCreate && onCreate();
+      });
+    }
+  }
+
+  return (
+    <>
+
+      <Dialog header="Add/edit expense" visible={visible} style={{ width: '60vw' }} onHide={onHide}>
+        <div className="card flex justify-evenly py-5">
+          <FloatLabel>
+            <InputText id="name" className='rounded-sm' value={name} onChange={(e) => setName(e.target.value)} />
+            <label htmlFor="name">Name</label>
+          </FloatLabel>
+          <FloatLabel>
+            <InputText id="amount" className='rounded-sm' value={amount.toString()} onChange={(e) => setAmount(parseFloat(e.target.value))} />
+            <label htmlFor="amount">Amount</label>
+          </FloatLabel>
+          <FloatLabel>
+            <Dropdown id="pricingType" className='rounded-sm min-w-32' value={pricingType} onChange={(e) => setPricingType(e.target.value)} options={
+              pricingTypes.map((type) => {
+                return { label: capitalize(type), value: type };
+              })
+            } />
+            <label htmlFor="pricingType">Pricing type</label>
+          </FloatLabel>
+
+          <button className={classNames('primary')} onClick={submitGroup} disabled={!(name.length > 0)}>
+            {expense?.id !== undefined ? 'Update' : 'Create'}
+          </button>
+        </div>
+      </Dialog>
+    </>
+  );
+}

app/ui/components/form/affinitySlider.tsx

@@ -0,0 +1,40 @@
+/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
+
+import { Slider } from 'primereact/slider';
+
+export default function AffinitySlider({ value, onChange }: { value: number, onChange: (value: number) => void }) {
+
+  const toNumber = (value : number | [number, number])  => {
+    if(value instanceof Array) {
+      return value[0];
+    }
+    return value;
+  }
+
+  const label = (value: number) => {
+    if (value < 0.2) {
+      return 'Nemesis';
+    } else if (value < 0.5) {
+      return 'Enemies';
+    } else if (value < 0.9) {
+      return 'Bad vibes';
+    } else if (value < 1.1) {
+      return 'Neutral';
+    } else if (value < 1.5) {
+      return 'Good vibes';
+    } else if (value < 1.8) {
+      return 'Good friends';
+    } else {
+      return 'Besties';
+    }
+  }
+
+  return (
+    <>
+      <Slider value={value} min={0} max={2} step={.1} onChange={(e) => onChange(toNumber(e.value))} className='w-80 bg-gray-400' />
+      <span className="px-4 w-1/5">
+        {label(value)}
+      </span>
+    </>
+  )
+}

app/ui/components/form/inlineTextField.tsx

@@ -1,4 +1,4 @@
-/* Copyright (C) 2024 Manuel Bustillo*/
+/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
 
 import React, { useState } from 'react';
 

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

@@ -0,0 +1,95 @@
+/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
+
+'use client';
+
+import { AbstractApi } from '@/app/api/abstract-api';
+import { Group, GroupSerializer } from '@/app/lib/group';
+import { classNames } from '@/app/ui/components/button';
+import { ColorPicker } from 'primereact/colorpicker';
+import { Dialog } from 'primereact/dialog';
+import { Dropdown } from 'primereact/dropdown';
+import { FloatLabel } from 'primereact/floatlabel';
+import { InputText } from 'primereact/inputtext';
+import { useState } from 'react';
+
+export default function GroupFormDialog({ groups, onCreate, onHide, group, visible }: {
+  groups: Group[],
+  onCreate?: () => void,
+  onHide: () => void,
+  group?: Group,
+  visible: boolean,
+}) {
+
+  const [name, setName] = useState(group?.name || '');
+  const [icon, setIcon] = useState(group?.icon || '');
+  const [color, setColor] = useState<string>(group?.color || '');
+  const [parentId, setParentId] = useState(group?.parentId || '');
+
+  const api = new AbstractApi<Group>();
+  const serializer = new GroupSerializer();
+
+  function resetForm() {
+    setName('');
+    setIcon('');
+    setColor('');
+    setParentId('');
+  }
+
+  function submitGroup() {
+    if (!(name)) {
+      return
+    }
+
+    if (group?.id !== undefined) {
+      group.name = name;
+      group.icon = icon;
+      group.color = color;
+      group.parentId = parentId;
+
+      api.update(serializer, group, () => {
+        resetForm();
+        onCreate && onCreate();
+      });
+    } else {
+
+      api.create(serializer, new Group(undefined, name, undefined, icon, undefined, parentId, color), () => {
+        resetForm();
+        onCreate && onCreate();
+      });
+    }
+  }
+
+  return (
+    <>
+
+      <Dialog header="Add group" visible={visible} style={{ width: '60vw' }} onHide={onHide}>
+        <div className="card flex justify-evenly py-5">
+          <FloatLabel>
+            <InputText id="name" className='rounded-sm' value={name} onChange={(e) => setName(e.target.value)} />
+            <label htmlFor="name">Name</label>
+          </FloatLabel>
+          <FloatLabel>
+            <InputText id="icon" className='rounded-sm' value={icon} onChange={(e) => setIcon(e.target.value)} />
+            <label htmlFor="icon">Icon</label>
+          </FloatLabel>
+          <FloatLabel>
+            <ColorPicker value={color} format='hex' onChange={(e) => setColor(`#${e.value}`)} />
+            <label htmlFor="color" />
+          </FloatLabel>
+          <FloatLabel>
+            <Dropdown id="parentId" className='rounded-sm min-w-32' value={parentId} onChange={(e) => setParentId(e.target.value)} options={
+              groups.map((group) => {
+                return { label: group.name, value: group.id };
+              })
+            } />
+            <label htmlFor="parentId">Parent</label>
+          </FloatLabel>
+
+          <button className={classNames('primary')} onClick={submitGroup} disabled={!(name.length > 0)}>
+            {group?.id !== undefined ? 'Update' : 'Create'}
+          </button>
+        </div>
+      </Dialog>
+    </>
+  );
+}

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

@@ -1,9 +1,10 @@
-/* Copyright (C) 2024 Manuel Bustillo*/
+/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
 
 'use client';
 
-import { createGuest, updateGuest } from '@/app/api/guests';
+import { AbstractApi } from '@/app/api/abstract-api';
-import { Group, Guest, GuestStatus, guestStatuses } from '@/app/lib/definitions';
+import { Group } from '@/app/lib/group';
+import { Guest, GuestSerializer, GuestStatus, guestStatuses } from '@/app/lib/guest';
 import { capitalize } from '@/app/lib/utils';
 import { classNames } from '@/app/ui/components/button';
 import { Dialog } from 'primereact/dialog';
@@ -24,6 +25,9 @@ export default function GuestFormDialog({ groups, onCreate, onHide, guest, visib
   const [group, setGroup] = useState(guest?.groupId || null);
   const [status, setStatus] = useState<GuestStatus | null>(guest?.status || null);
 
+  const api = new AbstractApi<Guest>();
+  const serializer = new GuestSerializer();
+
   function resetForm() {
     setName('');
     setGroup(null);
@@ -39,12 +43,13 @@ export default function GuestFormDialog({ groups, onCreate, onHide, guest, visib
       guest.name = name;
       guest.groupId = group;  
       guest.status = status;
-      updateGuest(guest).then(() => {
+     
+      api.update(serializer, guest, () => {
         resetForm();
         onCreate && onCreate();
       });
     } else {
-      guest && createGuest({name: name, groupId: group, status: status}, () => {
+      api.create(serializer, new Guest(undefined, name, undefined, group, undefined, status), ()=> {
         resetForm();
         onCreate && onCreate();
       });
@@ -54,7 +59,7 @@ export default function GuestFormDialog({ groups, onCreate, onHide, guest, visib
   return (
     <>
 
-      <Dialog header="Add guest" visible={visible} style={{ width: '50vw' }} onHide={onHide}>
+      <Dialog header="Add guest" visible={visible} style={{ width: '60vw' }} onHide={onHide}>
         <div className="card flex justify-evenly py-5">
           <FloatLabel>
             <InputText id="username" className='rounded-sm' value={name} onChange={(e) => setName(e.target.value)} />

app/ui/components/login-form.tsx

@@ -1,4 +1,4 @@
-/* Copyright (C) 2024 Manuel Bustillo*/
+/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
 
 'use client';
 

app/ui/components/registration-form.tsx

@@ -0,0 +1,98 @@
+/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
+
+'use client';
+
+import { FloatLabel } from 'primereact/floatlabel';
+import { InputText } from 'primereact/inputtext';
+import { useState, useEffect } from 'react';
+import { classNames } from './button';
+import { getSlug } from '@/app/lib/utils';
+import { register } from '@/app/api/authentication';
+import { getCaptchaChallenge } from '@/app/api/captcha';
+
+export default function RegistrationForm() {
+  const [submitted, setSubmitted] = useState<boolean>(false);
+  const [errors, setErrors] = useState<string[]>([]);
+
+  const [email, setEmail] = useState<string>("");
+  const [password, setPassword] = useState<string>("");
+  const [passwordConfirmation, setPasswordConfirmation] = useState<string>("");
+  const [slug, setSlug] = useState<string>(getSlug());
+
+  const [captchaId, setCaptchaId] = useState<string>("");
+  const [captchaUrl, setCaptchaUrl] = useState<string>("");
+  const [captchaAnswer, setCaptchaAnswer] = useState<string>("");
+
+  const refreshCaptcha = () => {
+    getCaptchaChallenge({
+      onRetrieve: (id, url) => {
+        console.log(id, url);
+        setCaptchaId(id);
+        setCaptchaUrl(url);
+        setCaptchaAnswer("");
+      }
+    });
+  }
+
+  useEffect(refreshCaptcha, [])
+
+  return (
+    submitted ? (
+      <div className="card flex justify-evenly py-5 flex-col">
+        <div className="text-green-500">Registration successful. Check your email for a confirmation link.</div>
+      </div>
+    ) : (
+
+      <div className="card flex justify-evenly py-5 flex-col">
+        <FloatLabel className="my-4">
+          <InputText id="email" type="email" className='rounded-sm' onChange={(e) => setEmail(e.target.value)} />
+          <label htmlFor="email">Email</label>
+        </FloatLabel>
+        <FloatLabel className="my-4">
+          <InputText id="password" type="password" className='rounded-sm' onChange={(e) => setPassword(e.target.value)} />
+          <label htmlFor="password">Password</label>
+        </FloatLabel>
+        <FloatLabel className="my-4">
+          <InputText id="passwordConfirmation" type="password" className='rounded-sm' onChange={(e) => setPasswordConfirmation(e.target.value)} />
+          <label htmlFor="passwordConfirmation">Confirm Password</label>
+        </FloatLabel>
+        <FloatLabel className="my-4">
+          <InputText id="slug" type="text" className='rounded-sm' onChange={(e) => setSlug(e.target.value)} />
+          <label htmlFor="slug">Slug</label>
+        </FloatLabel>
+        <img className="w-96" src={captchaUrl} alt="captcha" />
+        <FloatLabel className="my-4">
+          <InputText id="captcha" type="text" className='rounded-sm' value={captchaAnswer} onChange={(e) => setCaptchaAnswer(e.target.value)} />
+          <label htmlFor="captcha">Captcha</label>
+        </FloatLabel>
+
+        {errors.map((error, index) => (
+          <div key={index} className="text-red-500">{error}</div>
+        ))}
+
+
+        <button
+          className={classNames('primary')}
+          disabled={!(email && password && passwordConfirmation && slug && captchaAnswer)}
+          onClick={() => register(
+            {
+              slug: slug,
+              email: email,
+              password: password,
+              passwordConfirmation: passwordConfirmation,
+              captcha: {
+                id: captchaId,
+                answer: captchaAnswer
+              },
+              onRegister: () => { setErrors([]); setSubmitted(true) },
+              onError: (errors) => { refreshCaptcha(); setErrors(errors) }
+            }
+          )}
+        >
+          Register
+        </button>
+      </div>
+    )
+
+  );
+}

app/ui/components/table-of-contents.tsx

@@ -1,4 +1,4 @@
-/* Copyright (C) 2024 Manuel Bustillo*/
+/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
 
 export default function TableOfContents<Type>({ headers, caption, elements, rowRender }: { headers: string[], caption: string, elements: Type[], rowRender: (element: Type) => JSX.Element }) {
     return (

app/ui/components/table.tsx

@@ -1,6 +1,12 @@
-/* Copyright (C) 2024 Manuel Bustillo*/
+/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
+
+import { Guest } from "@/app/lib/guest";
+import { Table as TableType } from "@/app/lib/tableSimulation";
+import { RectangleGroupIcon, UserGroupIcon } from "@heroicons/react/24/outline";
+import { v4 as uuidv4 } from 'uuid';
+import { Tooltip } from "primereact/tooltip";
+import clsx from "clsx";
 
-import { Guest } from "@/app/lib/definitions";
 
 function Dish({ guest, rotation }: { guest: Guest, rotation?: number }) {
   rotation = rotation || 0
@@ -14,7 +20,6 @@ function Dish({ guest, rotation }: { guest: Guest, rotation?: number }) {
   )
 }
 
-
 function GuestRow({ guests }: { guests: Guest[] }) {
   return (
     <div className="justify-around flex flex-row">
@@ -23,7 +28,8 @@ function GuestRow({ guests }: { guests: Guest[] }) {
   )
 }
 
-function RectangularTable({ guests }: { guests: Guest[] }) {
+function RectangularTable({ table }: { table: TableType }) {
+  const guests = table.guests;
   const halfwayThrough = Math.floor(guests.length / 2)
   const arrayFirstHalf = guests.slice(0, halfwayThrough);
   const arraySecondHalf = guests.slice(halfwayThrough, guests.length);
@@ -36,11 +42,24 @@ function RectangularTable({ guests }: { guests: Guest[] }) {
   )
 }
 
-function RoundedTable({ guests }: { guests: Guest[] }) {
+function RoundedTable({ table }: { table: TableType }) {
+  const guests = table.guests;
   const size = 500
   const rotation = 360 / guests.length
+
+  const className = (penalty: number) => {
+    return clsx("px-2 tooltip-cohesion", {
+      "hidden": penalty === 0,
+      "text-orange-300": penalty <= 5,
+      "text-orange-500": penalty > 5 && penalty <= 10,
+      "text-orange-700": penalty > 10,
+    })
+  }
+
+
   return (
-        <div className={`m-12 rounded-full bg-cyan-800 relative z-0`} style={{ width: `${size}px`, height: `${size}px` }}>
+    <div className={`m-12 rounded-full bg-cyan-800 relative z-0 grid flex items-center justify-items-center`} style={{ width: `${size}px`, height: `${size}px` }}>
+
       {
         guests.map((guest, index) => {
           return (
@@ -54,15 +73,35 @@ function RoundedTable({ guests }: { guests: Guest[] }) {
           )
         })
       }
+
+      <div className="bg-zinc-200 w-48 h-12 p-3 flex flex-row rounded z-10">
+        <div className="px-2 text-slate-800">{`Table #${table.number}`}</div>
+
+
+        <Tooltip target=".tooltip-cohesion" />
+        <Tooltip target=".tooltip-size" />
+
+        <RectangleGroupIcon
+          className={className(table.discomfort.breakdown.cohesionPenalty)}
+          data-pr-tooltip={`Cohesion penalty: ${Math.round(table.discomfort.breakdown.cohesionPenalty)}`}
+          data-pr-position="top"
+        />
+
+        <UserGroupIcon
+          className={className(table.discomfort.breakdown.tableSizePenalty)}
+          data-pr-tooltip={`Table size penalty: ${Math.round(table.discomfort.breakdown.tableSizePenalty)}`}
+          data-pr-position="top"
+        />
+      </div>
     </div>
   )
 }
 
-export function Table({ guests, style }: { guests: Guest[], style: "rectangular" | "rounded" }) {
+export function Table({ table, style }: { table: TableType, style: "rectangular" | "rounded" }) {
   return (
     <>
-            {style === "rectangular" && <RectangularTable guests={guests} />}
+      {style === "rectangular" && <RectangularTable table={table} />}
-            {style === "rounded" && <RoundedTable guests={guests} />}
+      {style === "rounded" && <RoundedTable table={table} />}
     </>
   )
 }

app/ui/dashboard/global-summary.tsx

@@ -1,45 +1,41 @@
-/* Copyright (C) 2024 Manuel Bustillo*/
+/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
 
+import { GlobalSummary as Summary} from '@/app/lib/definitions';
 import { MainCard, SecondaryCard } from '../components/dashboard-cards';
 
-export default async function GlobalSummary() {
+export default function GlobalSummary({ summary }: { summary: Summary }) {
   return (
     <div className="my-4">
-
       <div className="flex flex-row w-full my-2">
-                <MainCard style="green" amount="65000€" title="Projected" subtitle="150 guests" iconName="ArrowTrendingUpIcon" />
-
         <div className="flex flex-col">
-                    <MainCard amount="10000€" title="Paid already" iconName="Square3Stack3DIcon" style='blue' />
+          <MainCard amount={`${summary.expenses.projected.total}€`} title="Projected" subtitle={`${summary.expenses.projected.guests} guests`} style="blue" iconName="ArrowTrendingUpIcon" />
-                    <MainCard amount="198€" title="/ guest" iconName="UserIcon" style='blue' />
+          <MainCard amount={`${Math.round(summary.expenses.projected.total / summary.expenses.projected.guests)}€`} title="/ guest" iconName="UserIcon" style='blue' />
         </div>
         <div className="flex flex-col">
-                    <MainCard amount="78000€" title="Max." subtitle='200 guests' iconName="ChevronDoubleUpIcon" style="orange" />
+          <MainCard amount={`${summary.expenses.confirmed.total}€`} title="Min." subtitle={`${summary.expenses.confirmed.guests} guests`} iconName="ChevronDoubleDownIcon" style="green" />
-                    <MainCard amount="45000€" title="Min." subtitle="125 guests" iconName="ChevronDoubleDownIcon" style="green" />
+          <MainCard amount={`${Math.round(summary.expenses.confirmed.total / summary.expenses.confirmed.guests)}€`} title="/ guest" iconName="UserIcon" style='green' />
+
+        </div>
+        <div className="flex flex-col">
+          <MainCard amount={`${summary.expenses.status.paid}€`} title="Paid already" subtitle={`${Math.round(summary.expenses.status.paid / summary.expenses.projected.total * 100)}% of projected`} iconName="CheckIcon" style='blue' />
+          <MainCard amount={`${summary.expenses.projected.total - summary.expenses.status.paid}€`} title="To pay" subtitle={`${100 - Math.round(summary.expenses.status.paid / summary.expenses.projected.total * 100)}% of projected`} iconName="BanknotesIcon" style="orange" />
         </div>
 
       </div>
 
       <div className="flex flex-row w-full my-2">
-                <MainCard style="blue" amount="150" title="Invites sent" iconName="UsersIcon" />
+        <MainCard style="blue" amount={summary.guests.total.toString()} title="Invites sent" iconName="UsersIcon" />
 
         <div className="flex flex-col">
-                    <SecondaryCard amount="31%" title="confirmed (27 guests)" iconName="CheckIcon" style='green' />
+          <SecondaryCard amount={`${Math.round(summary.guests.confirmed / summary.guests.total * 100)}%`} title={`confirmed (${summary.guests.confirmed} guests)`} iconName="CheckIcon" style='green' />
-                    <SecondaryCard amount="5%" title="declined (8 guests)" iconName="XMarkIcon" style='red' />
+          <SecondaryCard amount={`${Math.round(summary.guests.declined / summary.guests.total * 100)}%`} title={`declined (${summary.guests.declined} guests)`} iconName="XMarkIcon" style='red' />
         </div>
 
         <div className="flex flex-col">
-                <SecondaryCard amount="17%" title="tentative (14 guests)" iconName="QuestionMarkCircleIcon" style='orange' />
+          <SecondaryCard amount={`${Math.round(summary.guests.tentative / summary.guests.total * 100)}%`} title={`tentative (${summary.guests.tentative} guests)`} iconName="QuestionMarkCircleIcon" style='orange' />
-                    <SecondaryCard amount="65%" title="awaiting (72 guests)" iconName="EllipsisHorizontalIcon" style='gray' />
+          <SecondaryCard amount={`${Math.round(summary.guests.invited / summary.guests.total * 100)}%`} title={`awaiting (${summary.guests.invited} guests)`} iconName="EllipsisHorizontalIcon" style='gray' />
-
         </div>
       </div>
-
-            <div className="flex flex-row w-full my-2">
-                <MainCard style="blue" amount="5" title="Table simulations" iconName="ServerStackIcon" />
-                <MainCard style="blue" amount="9" title="Bus simulations" iconName="TruckIcon" />
-                <MainCard style="blue" amount="98" title="QR codes" iconName="QrCodeIcon" />
-            </div>
     </div>
   );
 }

app/ui/dashboard/loading.tsx

@@ -1,4 +1,4 @@
-/* Copyright (C) 2024 Manuel Bustillo*/
+/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
 
 export default function Loading() {
     return <div>Loading...</div>;

app/ui/dashboard/nav-links.tsx

@@ -1,4 +1,4 @@
-/* Copyright (C) 2024 Manuel Bustillo*/
+/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
 
 'use client'
 

app/ui/dashboard/sidenav.tsx

@@ -1,4 +1,4 @@
-/* Copyright (C) 2024 Manuel Bustillo*/
+/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
 
 'use client';
 
@@ -17,7 +17,7 @@ export default function SideNav() {
     <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="/dashboard/guests"
+        href={`/${getSlug()}/dashboard`}
       >
         <div className={`${gloriaHallelujah.className} "w-32 text-white md:w-40 antialiased`}>
           <h1>Wedding Planner</h1>

app/ui/expenses/table.tsx

@@ -1,42 +1,44 @@
-/* Copyright (C) 2024 Manuel Bustillo*/
+/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
 
 'use client'
 
-import { loadExpenses, updateExpense } from '@/app/api/expenses';
+import { AbstractApi } from '@/app/api/abstract-api';
-import { Expense } from '@/app/lib/definitions';
+import { Expense, ExpenseSerializer } from '@/app/lib/expense';
-import { useState } from "react";
+import { PencilIcon, TrashIcon } from '@heroicons/react/24/outline';
-import InlineTextField from "../components/form/inlineTextField";
 import TableOfContents from "../components/table-of-contents";
 
-export default function ExpensesTable() {
-  const [expenses, setExpenses] = useState<Array<Expense>>([]);
-  const [expensesLoaded, setExpensesLoaded] = useState(false);
 
-  function refreshExpenses() {
+export default function ExpensesTable({ expenses, onUpdate, onEdit }: {
-    loadExpenses((expenses) => {
+  expenses: Expense[],
-      setExpenses(expenses);
+  onUpdate: () => void,
-      setExpensesLoaded(true);
+  onEdit: (expense: Expense) => void,
-    });
+}) {
-  }
 
-  !expensesLoaded && refreshExpenses();
+  const api = new AbstractApi<Expense>();
+  const serializer = new ExpenseSerializer();
 
   return (
     <TableOfContents
-      headers={['Name', 'Amount (€)', 'Pricing Type']}
+      headers={['Name', 'Amount (€)', 'Pricing Type', 'Actions']}
       caption='Expenses'
       elements={expenses}
       rowRender={(expense) => (
         <tr key={expense.id} className="bg-white border-b odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800">
           <th scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
-            <InlineTextField initialValue={expense.name} onChange={(value) => { expense.name = value; updateExpense(expense) }} />
+            {expense.name}
           </th>
           <td className="px-6 py-4">
-            <InlineTextField initialValue={expense.amount.toString()} onChange={(value) => { expense.amount = parseFloat(value); updateExpense(expense) }} />
+            {expense.amount}
           </td>
           <td>
             {expense.pricingType}
           </td>
+          <td>
+            <div className="flex flex-row items-center">
+              <TrashIcon className='size-6 cursor-pointer' onClick={() => { api.destroy(serializer, expense, onUpdate) }} />
+              <PencilIcon className='size-6 cursor-pointer' onClick={() => onEdit(expense)} />
+            </div>
+          </td>
         </tr>
       )}
     />

app/ui/fonts.ts

@@ -1,4 +1,4 @@
-/* Copyright (C) 2024 Manuel Bustillo*/
+/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
 
 import { Inter, Lusitana, Gloria_Hallelujah} from 'next/font/google';
  

app/ui/groups/table.tsx

@@ -1,45 +1,105 @@
-/* Copyright (C) 2024 Manuel Bustillo*/
+/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
 
 'use client';
 
-import { Group } from '@/app/lib/definitions';
+import { AbstractApi } from '@/app/api/abstract-api';
-import TableOfContents from '../components/table-of-contents';
+import { Group, GroupSerializer } from '@/app/lib/group';
+import { AdjustmentsHorizontalIcon, PencilIcon, TrashIcon } from '@heroicons/react/24/outline';
+import { Column } from 'primereact/column';
+import { TreeNode } from 'primereact/treenode';
+import { TreeTable } from 'primereact/treetable';
 
-export default function GroupsTable({ groups }: { groups: Group[] }) {
+export default function GroupsTable({ groups, onUpdate, onEdit, onEditAffinities }: {
+  groups: Group[],
+  onUpdate: () => void,
+  onEdit: (group: Group) => void,
+  onEditAffinities: (group: Group) => void,
+}) {
+
+  const api = new AbstractApi<Group>();
+  const serializer = new GroupSerializer();
+
+  const actions = (group: Group) => (
+    <div className="flex flex-row items-center">
+      <TrashIcon className='size-6 cursor-pointer' onClick={() => { api.destroy(serializer, group, onUpdate) }} />
+      <PencilIcon className='size-6 cursor-pointer' onClick={() => onEdit(group)} />
+      <AdjustmentsHorizontalIcon className='size-6 cursor-pointer' onClick={() => onEditAffinities(group)} />
+    </div>
+  );
+
+  const index = groups.reduce((acc, group) => {
+    if (group.id) {
+      acc.set(group.id, group)
+    }
+
+    return acc;
+  }, new Map());
+
+  groups.forEach(group => group.children = []);
+  groups.forEach(group => {
+    if (group.parentId) {
+      const parent = index.get(group.parentId);
+      if (parent) {
+        if (!parent.children) {
+          parent.children = [];
+        }
+        parent.children.push(group);
+      }
+    }
+  });
+
+  const renderTree = (group: Group): TreeNode => {
+    const childrenAttendance = (group.children || []).reduce((acc, child) => {
+      acc.confirmed += child.attendance?.confirmed || 0;
+      acc.tentative += child.attendance?.tentative || 0;
+      acc.invited += child.attendance?.invited || 0;
+      acc.declined += child.attendance?.declined || 0;
+      acc.considered += child.attendance?.considered || 0;
+      acc.total += child.attendance?.total || 0;
+      return acc;
+    }, { confirmed: 0, tentative: 0, invited: 0, declined: 0, considered: 0, total: 0 });
+
+    return {
+      id: group.id,
+      key: group.id,
+      label: group.name,
+      data: {
+        name: group.name,
+        color: <div className="w-8 h-8 rounded-full" style={{ backgroundColor: group.color }} />,
+        confirmed: childrenAttendance.confirmed + (group.attendance?.confirmed || 0),
+        tentative: childrenAttendance.tentative + (group.attendance?.tentative || 0),
+        pending: childrenAttendance.invited + (group.attendance?.invited || 0),
+        declined: childrenAttendance.declined + (group.attendance?.declined || 0),
+        considered: childrenAttendance.considered + (group.attendance?.considered || 0),
+        total: childrenAttendance.total + (group.attendance?.total || 0),
+        actions: actions(group),
+      },
+      children: group.children?.map(renderTree),
+    }
+  }
+
+  const nodes: TreeNode[] = groups
+    .filter(group => !group.parentId)
+    .map(renderTree)
+
+  const headers = ['Name', 'Color', 'Confirmed', 'Tentative', 'Pending', 'Declined', 'Considered', 'Total', 'Actions'];
+  const rowClassName = () => {
+    return { 'border-b odd:bg-white even:bg-gray-50 hover:bg-gray-100': true };
+  }
 
   return (
-    <TableOfContents
+    <>
-      headers={['Name', 'Color', 'Confirmed', 'Tentative', 'Pending', 'Declined', 'Considered', 'Total']}
+      <TreeTable value={nodes} rowClassName={rowClassName} className='py-4'>
-      caption='Groups'
+        <Column expander field="name" header="Name" className='w-2/5' />
-      elements={groups}
+        <Column field="color" header="Color" bodyClassName="text-sm" />
-      rowRender={(group) => (
+        <Column field="confirmed" header="Confirmed" bodyClassName="text-sm" />
-        <tr key={group.id} className="bg-white border-b odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800">
+        <Column field="tentative" header="Tentative" bodyClassName="text-sm" />
-          <td scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
+        <Column field="pending" header="Pending" bodyClassName="text-sm" />
-            {group.name}
+        <Column field="declined" header="Declined" bodyClassName="text-sm" />
-          </td>
+        <Column field="considered" header="Considered" bodyClassName="text-sm" />
-          <td className="px-6">
+        <Column field="total" header="Total" bodyClassName="text-sm" />
-            <div className="w-8 h-8 rounded-full" style={{ backgroundColor: group.color }}></div>
+        <Column field="actions" header="Actions" />
-          </td>
+      </TreeTable>
-          <td className="px-6 text-lg">
+    </>
-            {group.attendance?.confirmed}
-          </td>
-          <td className="px-6 text-sm">
-            {group.attendance?.tentative}
-          </td>
-          <td className="px-6 text-sm">
-            {group.attendance?.invited}
-          </td>
-          <td className="px-6 text-sm">
-            {group.attendance?.declined}
-          </td>
-          <td className="px-6 text-sm">
-            {group.attendance?.considered}
-          </td>
-          <td className="px-6 text-sm">
-            {group.attendance?.total}
-          </td>
-        </tr>
-      )}
-    />
   )
 }

app/ui/guests/skeleton-row.tsx

@@ -1,4 +1,4 @@
-/* Copyright (C) 2024 Manuel Bustillo*/
+/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
 
 import Skeleton from '@/app/ui/skeleton';
 

app/ui/guests/table.tsx

@@ -1,10 +1,9 @@
-/* Copyright (C) 2024 Manuel Bustillo*/
+/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
 
 'use client';
 
-import { destroyGuest, updateGuest } from '@/app/api/guests';
+import { AbstractApi } from '@/app/api/abstract-api';
-import { Guest, GuestStatus } from '@/app/lib/definitions';
+import { Guest , GuestSerializer} from '@/app/lib/guest';
-import { classNames } from '@/app/ui/components/button';
 import { PencilIcon, TrashIcon } from '@heroicons/react/24/outline';
 import clsx from 'clsx';
 import TableOfContents from '../components/table-of-contents';
@@ -14,6 +13,10 @@ export default function guestsTable({ guests, onUpdate, onEdit }: {
   onUpdate: () => void,
   onEdit: (guest: Guest) => void
 }) {
+
+  const api = new AbstractApi<Guest>();
+  const serializer = new GuestSerializer();
+
   return (
     <TableOfContents
       headers={['Name', 'Group', 'Status', 'Actions']}
@@ -45,7 +48,7 @@ export default function guestsTable({ guests, onUpdate, onEdit }: {
           </td>
           <td>
             <div className="flex flex-row items-center">
-              <TrashIcon className='size-6 cursor-pointer' onClick={() => { destroyGuest(guest, () => onUpdate()) }} />
+              <TrashIcon className='size-6 cursor-pointer' onClick={() => { api.destroy(serializer, guest, onUpdate)}} />
               <PencilIcon className='size-6 cursor-pointer' onClick={() => onEdit(guest)} />
             </div>
           </td>

app/ui/invitations/board.tsx

@@ -0,0 +1,187 @@
+/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
+
+'use client';
+
+import { AbstractApi } from "@/app/api/abstract-api";
+import { Guest } from "@/app/lib/guest";
+import { Invitation, InvitationSerializer } from "@/app/lib/invitation";
+import { draggable, dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
+import { TrashIcon } from "@heroicons/react/24/outline";
+import { useEffect, useRef } from "react";
+import { useState } from "react";
+
+function InvitationCard({ invitation, allGuests, onGuestAdded, onDestroy }: {
+  invitation: Invitation,
+  allGuests: Guest[],
+  onGuestAdded: (guest: Guest) => void,
+  onDestroy: (invitation: Invitation) => void
+}
+) {
+  const [guests, setGuests] = useState<Guest[]>(invitation.guests);
+
+  const ref = useRef<HTMLDivElement | null>(null);
+
+  const api = new AbstractApi<Invitation>();
+  const serializer = new InvitationSerializer();
+
+  useEffect(() => {
+    if (ref.current) {
+      return dropTargetForElements({
+        element: ref.current,
+        onDrop: (data) => {
+          const guestId = data.source.element.dataset.guestId;
+          if (guestId) {
+            const guestToAdd = allGuests.find((guest) => guest.id === guestId);
+            if (guestToAdd) {
+              setGuests((prevGuests) => [...prevGuests, guestToAdd]);
+              invitation.guests.push(guestToAdd);
+
+              api.update(serializer, invitation, () => {
+                onGuestAdded(guestToAdd);
+              });
+            }
+          }
+        },
+      });
+    }
+  }, []);
+
+  return (
+    <div
+      key={invitation.id}
+      ref={ref}
+      className="relative flex items-center justify-center w-full bg-green-800 border border-green-900 group"
+      style={{ aspectRatio: "1.618 / 1" }}
+    >
+      <TrashIcon
+        className="w-5 h-5 text-white absolute top-2 right-2 opacity-0 group-hover:opacity-100 cursor-pointer"
+        onClick={() => {
+          if (window.confirm("Are you sure you want to delete this invitation?")) {
+            api.destroy(serializer, invitation, () => {
+              onDestroy(invitation);
+            });
+          }
+        }}
+      />
+
+      {guests.length === 0 ? (
+        <p className="text-center text-yellow-500 text-lg italic">
+          (empty invitation)
+        </p>
+      ) : (
+        <ul className="text-center text-yellow-500 text-lg">
+          {guests.map((guest) => (
+            <li key={guest.id}>{guest.name}</li>
+          ))}
+        </ul>
+      )}
+    </div>
+  )
+}
+
+function GuestCard(guest: Guest) {
+  const ref = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    if (ref.current) {
+      return draggable({
+        element: ref.current,
+      });
+    }
+  }, [guest.id]);
+
+  return (
+    <div
+      key={guest.id}
+      ref={ref}
+      className="mb-4 p-4 border border-gray-300 rounded-lg shadow-sm bg-white cursor-move"
+      draggable="true"
+      data-guest-id={guest.id}>
+      <h3 className="text-md font-medium">{guest.name}</h3>
+    </div>
+  )
+}
+
+export default function InvitationsBoard({ guests, invitations: originalInvitations }: {
+  guests: Array<Guest>,
+  invitations: Array<Invitation>
+}) {
+  const api = new AbstractApi<Invitation>();
+  const serializer = new InvitationSerializer();
+
+  const [invitations, setInvitations] = useState<Invitation[]>(originalInvitations);
+  const [unassignedGuests, setUnassignedGuests] = useState<Guest[]>(
+    guests.filter(
+      (guest) =>
+        guest.status !== 'considered' &&
+        !invitations.some((invitation) =>
+          invitation.guests.some((invitedGuest) => invitedGuest.id === guest.id)
+        )
+    )
+  );
+
+
+  // Sort invitations to display those without guests at the top
+  const sortedInvitations = [...invitations].sort((a, b) => {
+    if (a.guests.length === 0 && b.guests.length > 0) return -1;
+    if (a.guests.length > 0 && b.guests.length === 0) return 1;
+    return 0;
+  });
+
+  function handleCreateInvitation() {
+    api.create(serializer, new Invitation(), (createdInvitation) => {
+      setInvitations((prevInvitations) => [createdInvitation, ...prevInvitations]);
+    });
+  }
+
+  return (
+    <div className="flex h-screen">
+      {/* Left Column: Guests */}
+      <div className="w-1/4 h-full overflow-auto border-r border-gray-300 p-4">
+        <h2 className="text-lg font-semibold mb-4">{unassignedGuests.length} guests without invitation</h2>
+        <div>
+          {unassignedGuests.map((guest) => (
+            <GuestCard key={guest.id} {...guest} />
+          ))}
+        </div>
+      </div>
+
+      {/* Right Column: Invitations */}
+      <div className="w-3/4 h-full overflow-auto p-4">
+        <h2 className="text-lg font-semibold mb-4">
+          {invitations.length} invitations
+        </h2>
+
+        <button
+          onClick={handleCreateInvitation}
+          className="mb-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
+        >
+          Create New Invitation
+        </button>
+
+
+        <div className="grid grid-cols-4 gap-6">
+
+          {sortedInvitations.map((invitation) => (
+            <InvitationCard
+              key={invitation.id}
+              invitation={invitation}
+              allGuests={guests}
+              onGuestAdded={(guestAdded: Guest) => {
+                setUnassignedGuests((prevUnassignedGuests) => prevUnassignedGuests.filter(g => g.id !== guestAdded.id));
+              }}
+              onDestroy={(invitationToDestroy: Invitation) => {
+                setInvitations((prevInvitations) => prevInvitations.filter(i => i.id !== invitationToDestroy.id));
+                setUnassignedGuests((prevUnassignedGuests) => [
+                  ...prevUnassignedGuests,
+                  ...invitationToDestroy.guests
+                ]);
+              }}
+            />
+          ))}
+        </div>
+
+      </div>
+    </div>
+  );
+}

app/ui/search.tsx

@@ -1,4 +1,4 @@
-/* Copyright (C) 2024 Manuel Bustillo*/
+/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
 
 'use client';
 

app/ui/skeleton.tsx

@@ -1,4 +1,4 @@
-/* Copyright (C) 2024 Manuel Bustillo*/
+/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
 
 export default function Skeleton({ className }: { className: string }) {
     return <div className={`bg-slate-200 motion-safe:animate-pulse rounded ${className}`} />;

package.json

@@ -6,32 +6,34 @@
     "start": "next start"
   },
   "dependencies": {
+    "@atlaskit/pragmatic-drag-and-drop": "^1.7.0",
     "@heroicons/react": "^2.1.4",
     "@tailwindcss/forms": "^0.5.7",
-    "autoprefixer": "10.4.20",
+    "autoprefixer": "10.4.21",
     "bcrypt": "^5.1.1",
     "clsx": "^2.1.1",
-    "next": "15.0.3",
+    "next": "15.3.3",
-    "next-auth": "5.0.0-beta.25",
+    "next-auth": "5.0.0-beta.28",
-    "postcss": "8.4.49",
+    "postcss": "8.5.4",
     "primeicons": "^7.0.0",
     "primereact": "^10.8.2",
     "react": "19.0.0-rc-f38c22b244-20240704",
     "react-dom": "19.0.0-rc-f38c22b244-20240704",
-    "tailwindcss": "3.4.15",
+    "tailwindcss": "3.4.17",
-    "typescript": "5.7.2",
+    "typescript": "5.8.3",
     "use-debounce": "^10.0.1",
+    "uuid": "11.1.0",
     "zod": "^3.23.8"
   },
   "devDependencies": {
     "@playwright/test": "^1.46.0",
     "@types/bcrypt": "^5.0.2",
-    "@types/node": "22.10.1",
+    "@types/node": "22.15.29",
-    "@types/react": "18.3.12",
+    "@types/react": "18.3.23",
-    "@types/react-dom": "18.3.1"
+    "@types/react-dom": "18.3.7"
   },
   "engines": {
     "node": ">=23.0.0"
   },
-  "packageManager": "pnpm@9.14.4+sha512.c8180b3fbe4e4bca02c94234717896b5529740a6cbadf19fa78254270403ea2f27d4e1d46a08a0f56c89b63dc8ebfd3ee53326da720273794e6200fcf0d184ab"
+  "packageManager": "pnpm@10.11.0+sha512.6540583f41cc5f628eb3d9773ecee802f4f9ef9923cc45b69890fb47991d4b092964694ec3a4f738a420c918a333062c8b925d312f42e4f0c263eb603551f977"
 }