.dockerignore

@@ -1,13 +0,0 @@
-node_modules
-npm-debug.log
-Dockerfile*
-docker-compose*
-.dockerignore
-.git
-.gitignore
-README.md
-LICENSE
-.vscode
-.next
-*.swp
-/scripts

.github/workflows/build.yml

@@ -1,13 +1,15 @@
 name: Build Nginx-based docker image
 on:
   push:
+    branches:
+      - main
+  pull_request:
 concurrency:
   group: ${{ github.ref }}
   cancel-in-progress: true
 jobs:
   build-static-assets:
     runs-on: ubuntu-latest
-    timeout-minutes: 30
     steps:
       - uses: actions/checkout@v4
         with:
@@ -23,31 +25,12 @@ jobs:
           username: ${{ secrets.PRIVATE_REGISTRY_USERNAME }}
           password: ${{ secrets.PRIVATE_REGISTRY_TOKEN }}
         
-      - name: Build and push intermediate stages (deps)
+      - name: Build and push
         uses: docker/build-push-action@v6
         with:
           context: .
-          target: deps
+          push: ${{ github.event_name != 'pull_request' }}
-          push: ${{ github.ref == 'refs/heads/main' }}
+          tags: |
-          tags: ${{ secrets.PRIVATE_REGISTRY_HOST }}/${{ env.GITHUB_REPOSITORY }}:deps
+            ${{ secrets.PRIVATE_REGISTRY_HOST }}/${{ env.GITHUB_REPOSITORY }}:latest
-          cache-from: type=registry,ref=${{ secrets.PRIVATE_REGISTRY_HOST }}/${{ env.GITHUB_REPOSITORY }}:deps
+          cache-from: type=registry,ref=user/app:latest
-          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

@@ -3,9 +3,6 @@ on:
   pull_request:
 permissions:
   contents: write
-concurrency:
-  group: ${{ github.ref }}
-  cancel-in-progress: true
 jobs:
   copyright_notice:
     runs-on: ubuntu-latest
@@ -16,7 +13,7 @@ jobs:
           ref: ${{ github.head_ref }}
       - uses: VinnyBabuManjaly/copyright-action@v1.0.0
         with:
-          CopyrightString: '/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/\n\n'
+          CopyrightString: '/* Copyright (C) 2024 Manuel Bustillo*/\n\n'
           FileType: '.tsx, .jsx, .ts'
           Path: 'app/, config/, db/'
           IgnorePath: 'testfolder1/a/, testfolder3'

.github/workflows/playwright.yml

@@ -17,19 +17,14 @@ jobs:
     - uses: actions/checkout@v4
     - uses: actions/setup-node@v4
       with:
-        node-version-file: .nvmrc
+        node-version: lts/*
     - name: Install dependencies
       run: npm install -g pnpm && pnpm install
     - name: Build the service that will be tested
-      run: |
+      run: npm run build
-        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: HOSTNAME=127.0.0.1 node .next/standalone/server.js &
+      run: npm run start &
-    - 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

.nvmrc

@@ -1 +1 @@
-24.8.0
+22.11.0

Dockerfile

@@ -1,6 +1,6 @@
 # Based on https://github.com/vercel/next.js/blob/canary/examples/with-docker/Dockerfile
 
-FROM node:24-alpine AS base
+FROM node:22-alpine AS base
 
 # Install dependencies only when needed
 FROM base AS deps

Dockerfile.dev

@@ -1,28 +0,0 @@
-# Based on https://github.com/vercel/next.js/blob/canary/examples/with-docker/Dockerfile
-
-FROM node:24-alpine AS base
-
-# Install dependencies only when needed
-FROM base AS deps
-# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
-RUN apk add --no-cache libc6-compat
-WORKDIR /app
-
-# Install dependencies based on the preferred package manager
-COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./
-RUN \
-  if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
-  elif [ -f package-lock.json ]; then npm ci; \
-  elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm i --frozen-lockfile; \
-  else echo "Lockfile not found." && exit 1; \
-  fi
-
-COPY . /app/
-
-ENV NODE_ENV development
-ENV NEXT_TELEMETRY_DISABLED 1
-
-EXPOSE 3000
-ENV PORT=3000
-
-CMD HOSTNAME="0.0.0.0" pnpm run dev

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

@@ -1,45 +0,0 @@
-/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
-
-'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="flex flex-col w-full items-center justify-between">
-        <button onClick={() => setExpenseBeingEdited({})} className={classNames('primary')}>Add new</button>
-        <ExpenseFormDialog
-          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,180 +0,0 @@
-/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
-
-'use client';
-
-import { AbstractApi, } from '@/app/api/abstract-api';
-import { Group, GroupSerializer } from '@/app/lib/group';
-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 { Toast } from 'primereact/toast';
-import { Suspense, useEffect, useRef, useState } from 'react';
-import InvitationsBoard from '@/app/ui/invitations/board';
-import { Invitation, InvitationSerializer } from '@/app/lib/invitation';
-import { Entity } from '@/app/lib/definitions';
-
-
-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);
-    });
-  }
-
-  function refreshGroups() {
-    new AbstractApi<Group>().getAll(new GroupSerializer(), (objects: Group[]) => {
-      setGroups(objects);
-    });
-  }
-
-  function refreshInvitations() {
-    new AbstractApi<Invitation>().getAll(new InvitationSerializer(), (objects: Invitation[]) => {
-      setInvitations(objects);
-    });
-  }
-
-  function resetAffinities() {
-    fetch(`/api/${slug}/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 [groups, setGroups] = useState<Array<Group>>([]);
-  const [groupBeingEdited, setGroupBeingEdited] = useState<Group | undefined>(undefined);
-
-  const [groupAffinitiesBeingEditted, setGroupAffinitiesBeingEditted] = useState<Group | undefined>(undefined);
-
-  const [guests, setGuests] = useState<Array<Guest>>([]);
-  const [guestBeingEdited, setGuestBeingEdited] = useState<Guest | undefined>(undefined);
-
-  const [invitations, setInvitations] = useState<Array<Invitation>>([]);
-
-  function updateList<T extends Entity>(originalList: T[], element: T): T[] {
-    {
-      const index = originalList.findIndex(g => g.id === element?.id);
-      if (index !== -1) {
-        // Replace existing element
-        return [
-          element!,
-          ...originalList.slice(0, index),
-          ...originalList.slice(index + 1)
-        ];
-      } else {
-        // Add new element at the start
-        return [element!, ...originalList];
-      }
-    }
-  }
-
-  return (
-    <div className="w-full">
-      <TabView>
-        <TabPanel header="Guests" leftIcon="pi pi-users mx-2">
-          <div className="flex flex-col w-full items-center justify-between">
-            <button onClick={() => setGuestBeingEdited({})} className={classNames('primary')}>Add new</button>
-            <GuestFormDialog
-              key={guestBeingEdited?.id}
-              groups={groups}
-              onCreate={(newGuest) => {
-                setGuests(guests => updateList(guests, newGuest));
-                setGuestBeingEdited(undefined);
-              }}
-              guest={guestBeingEdited}
-              visible={guestBeingEdited !== undefined}
-              onHide={() => { setGuestBeingEdited(undefined) }}
-            />
-            <Suspense fallback={<SkeletonTable />}>
-              <GuestsTable
-                guests={guests}
-                onUpdate={refreshGuests}
-                onEdit={(guest) => setGuestBeingEdited(guest)}
-              />
-            </Suspense>
-          </div>
-        </ TabPanel>
-        <TabPanel header="Groups" leftIcon="pi pi-sitemap mx-2">
-          <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={(newGroup) => {
-                setGroups(groups => updateList(groups, newGroup));
-                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}
-                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/page.tsx

@@ -1,26 +0,0 @@
-/* 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 summary={globalSummary} />
-  );
-}

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

@@ -1,44 +0,0 @@
-/* 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 ArrangementsTable from '@/app/ui/arrangements/arrangements-table';
-import { classNames } from '@/app/ui/components/button';
-import { Toast } from 'primereact/toast';
-import React, { useEffect, 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]/dashboard/website/page.tsx

@@ -1,65 +0,0 @@
-/* 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

@@ -1,40 +0,0 @@
-/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
-
-'use client';
-
-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();
-    }
-
-    if (typeof window !== 'undefined') {
-      localStorage.setItem('slug', 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/[slug]/site/invitation/[id]/page.tsx

@@ -1,119 +0,0 @@
-/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
-
-'use client'
-
-import { AbstractApi } from "@/app/api/abstract-api";
-import { Invitation, InvitationSerializer } from "@/app/lib/invitation";
-import { useParams } from "next/navigation";
-import { useEffect, useState } from "react";
-import { FloatLabel } from "primereact/floatlabel";
-import { Dropdown } from "primereact/dropdown";
-import { Guest, GuestSerializer, GuestStatus } from "@/app/lib/guest";
-import { Button } from "primereact/button";
-
-type FormResponse = {
-  attendance: GuestStatus;
-};
-
-function GuestForm({ guest, idx }: { guest: Guest, idx: number }) {
-  const [response, setResponse] = useState<FormResponse>({
-    attendance: guest.status!
-  });
-
-  const [pendingChanges, setPendingChanges] = useState(false);
-  const [sending, setSending] = useState(false);
-
-  console.log('GuestForm response', response.attendance);
-
-  const attendanceOptions: { name: string, code: GuestStatus }[] = [
-    {
-      name: 'Attending',
-      code: 'confirmed'
-    },
-    {
-      name: 'Declined',
-      code: 'declined'
-    },
-    {
-      name: 'Tentative',
-      code: 'tentative'
-    }
-  ];
-
-  const api = new AbstractApi<Guest>();
-  const serializer = new GuestSerializer();
-
-  const submitForm = () => {
-    setSending(true);
-    setPendingChanges(false);
-    api.update(serializer, {
-      id: guest.id!,
-      status: response.attendance,
-    }, () => setSending(false));
-  }
-
-  return (
-    <div
-      key={guest.id}
-      className={`px-2 py-6 flex flex-col items-center ${idx !== 0 ? 'border-t border-gray-300' : ''}`}
-    >
-      <h2 className="m-2 text-xl font-semibold">{guest.name}</h2>
-
-      <Dropdown
-        value={response.attendance}
-        options={attendanceOptions}
-        optionLabel="name"
-        optionValue="code"
-        className="rounded-md w-full max-w-xs border border-gray-300"
-        checkmark={true}
-        highlightOnSelect={false}
-        onChange={(e) => {
-          setPendingChanges(true);
-          setResponse({ ...response, attendance: e.value })
-        }}
-      />
-
-      <Button
-        label="Save"
-        icon="pi pi-save"
-        loading={sending}
-        onClick={submitForm}
-        disabled={!pendingChanges || sending}
-        className="mt-4 max-w-xs"
-      />
-    </div>
-  )
-}
-
-export default function Page() {
-  const params = useParams<{ slug: string, id: string }>()
-
-  const [invitation, setInvitation] = useState<Invitation>();
-
-  useEffect(() => {
-    localStorage.setItem('slug', params.slug);
-
-    const api = new AbstractApi<Invitation>();
-    const serializer = new InvitationSerializer();
-
-    api.get(serializer, params.id, (invitation: Invitation) => {
-      setInvitation(invitation);
-    });
-  }, []);
-
-  return (
-    <div className="flex flex-col items-center">
-      <h1 className="text-2xl font-bold mb-4">Invitation</h1>
-      {invitation ? (
-        <div>
-          <p>We have reserved {invitation.guests.length} seats in your honor. Please, confirm attendance submitting the following form:</p>
-          {invitation.guests.map((guest, idx) => (
-            <GuestForm key={guest.id} guest={guest} idx={idx} />
-          ))}
-        </div>
-      ) : (
-        <p>Loading...</p>
-      )}
-    </div>
-  );
-}

app/[slug]/site/layout.tsx

@@ -1,41 +0,0 @@
-/* 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 lg:py-24 py-2 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

@@ -1,34 +0,0 @@
-/* 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";
-import { useParams } from 'next/navigation';
-
-export default function Page() {
-    const params = useParams<{ slug: string }>()
-  
-    useEffect(() => {
-      if (typeof window !== 'undefined') {
-        localStorage.setItem('slug', params.slug);
-      }
-    }, []);
-
-  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

@@ -1,113 +0,0 @@
-/* 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: (object: T) => void): void;
-  update(serializable: Serializable<T>, object: T, callback: () => void): void;
-  destroy(serializable: Serializable<T>, object: T, callback: () => void): void;
-
-  post(serializable: Serializable<T>, path: string, 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 [];
-      });
-  }
-
-  getAllPdf(serializable: Serializable<T>, callback: () => void): void {
-    fetch(`/api/${getSlug()}/${serializable.apiPath()}`, {
-      headers: {
-        'Accept': 'application/pdf',
-      }
-    }).then(res => res.blob())
-      .then(blob => {
-        var file = window.URL.createObjectURL(blob);
-        window.location.assign(file);
-      });
-  }
-
-  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));
-      }, (error) => {
-        return [];
-      });
-  }
-
-  update(serializable: Serializable<T>, object: T, callback: (updatedObject: T) => void): void {
-    const endpoint = object.id ? `/api/${getSlug()}/${serializable.apiPath()}/${object.id}` : `/api/${getSlug()}/${serializable.apiPath()}`;
-
-    fetch(endpoint, {
-      method: 'PUT',
-      body: serializable.toJson(object),
-      headers: {
-        'Content-Type': 'application/json',
-        'Accept': 'application/json',
-        'X-CSRF-TOKEN': getCsrfToken(),
-      }
-    }).then((response) => response.json())
-      .then((data) => {
-        callback(serializable.fromJson(data));
-      })
-      .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',
-        'Accept': '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));
-  }
-
-  post(serializable: Serializable<T>, path: string, callback: () => void): void {
-    fetch(`/api/${getSlug()}/${serializable.apiPath()}/${path}`, {
-      method: 'POST',
-      headers: {
-        'X-CSRF-TOKEN': getCsrfToken(),
-      }
-    }).then(callback)
-      .catch((error) => console.error(error));
-  }
-}

app/api/authentication.tsx

@@ -1,86 +0,0 @@
-/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
-
-import { asArray, getCsrfToken, getSlug } from '@/app/lib/utils';
-import { Captcha, StructuredErrors, User } from '@/app/lib/definitions';
-
-export function login({ email, password, onLogin }: { email: string, password: string, onLogin: (user: User) => void }) {
-  return fetch(`/api/${getSlug()}/users/sign_in`, {
-    method: 'POST',
-    body: JSON.stringify({ user: { email, password } }),
-    headers: {
-      'Accept': 'application/json',
-      'Content-Type': 'application/json',
-      'X-CSRF-TOKEN': getCsrfToken(),
-    }
-  })
-    .then((response) => response.json())
-    .then((data: any) => {
-      console.log(data);
-      onLogin({
-        id: data.id || '',
-        email: data.email || '',
-      });
-    })
-    .catch((error) => console.error(error));
-}
-
-export function logout({ onLogout }: { onLogout: () => void }) {
-  fetch(`/api/${getSlug()}/users/sign_out`, {
-    method: 'DELETE',
-    headers: {
-      'X-CSRF-TOKEN': getCsrfToken(),
-    }
-  }).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

@@ -1,19 +0,0 @@
-/* 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/health/route.ts

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

app/api/tableSimulations.tsx

@@ -1,23 +0,0 @@
-/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
-
-import { TableArrangement } from '@/app/lib/definitions';
-import { getSlug } from '../lib/utils';
-
-export function loadTableSimulations(onLoad?: (tableSimulations: TableArrangement[]) => void) {
-  fetch(`/api/${getSlug()}/tables_arrangements`)
-    .then((response) => response.json())
-    .then((data) => {
-      onLoad && onLoad(data.map((record: any) => {
-        return ({
-          id: record.id,
-          name: record.name,
-          discomfort: record.discomfort,
-          valid: record.valid,
-          progress: record.progress,
-          status : record.status
-        });
-      }));
-    }, (error) => {
-      return [];
-    });
-}

app/components/Tiptap.tsx

@@ -1,22 +0,0 @@
-/* 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/dashboard/expenses/page.tsx

@@ -0,0 +1,16 @@
+/* Copyright (C) 2024 Manuel Bustillo*/
+
+import { lusitana } from '@/app/ui/fonts';
+import ExpenseSummary from '@/app/ui/expenses/summary';
+ 
+export default  function Page () {
+  return (
+    <div className="w-full">
+      <div className="w-full items-center justify-between">
+        <h1 className={`${lusitana.className} text-2xl`}>Expenses</h1>
+        <h2 className={`${lusitana.className} text-xl`}>Summary</h2>
+        <ExpenseSummary />
+      </div>
+    </div>
+  );
+}

app/dashboard/guests/page.tsx

@@ -0,0 +1,24 @@
+/* Copyright (C) 2024 Manuel Bustillo*/
+
+import { lusitana } from '@/app/ui/fonts';
+import AffinityGroupsTree from '@/app/ui/guests/affinity-groups-tree';
+import GuestsTable from '@/app/ui/guests/table';
+import React, { Suspense } from 'react';
+import SkeletonTable from '@/app/ui/guests/skeleton-row';
+
+
+
+export default function Page() {
+  return (
+    <div className="w-full">
+      <AffinityGroupsTree />
+
+      <h1 className={`${lusitana.className} text-2xl py-4`}>Guests</h1>
+      <div className="flex w-full items-center justify-between">
+        <Suspense fallback={<SkeletonTable />}>
+          <GuestsTable />
+        </Suspense>
+      </div>
+    </div>
+  );
+}

app/dashboard/layout.tsx

@@ -1,4 +1,4 @@
-/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
+/* Copyright (C) 2024 Manuel Bustillo*/
 
 import SideNav from '@/app/ui/dashboard/sidenav';
  
@@ -8,7 +8,7 @@ export default function Layout({ children }: { children: React.ReactNode }) {
       <div className="w-full flex-none md:w-64">
         <SideNav />
       </div>
-      <div data-testid="main-container" className="flex-grow p-6 md:overflow-y-auto md:p-12">{children}</div>
+      <div className="flex-grow p-6 md:overflow-y-auto md:p-12">{children}</div>
     </div>
   );
 }

app/dashboard/page.tsx

@@ -0,0 +1,5 @@
+/* Copyright (C) 2024 Manuel Bustillo*/
+
+export default function Page() {
+  return <p>Dashboard Page</p>;
+}

app/dashboard/tables/page.tsx

@@ -0,0 +1,13 @@
+/* Copyright (C) 2024 Manuel Bustillo*/
+
+import { lusitana } from '@/app/ui/fonts';
+ 
+export default  function Page () {
+  return (
+    <div className="w-full">
+      <div className="flex w-full items-center justify-between">
+        <h1 className={`${lusitana.className} text-2xl`}>Table distributions</h1>
+      </div>
+    </div>
+  );
+}

app/layout.tsx

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

app/lib/affinities.tsx

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

app/lib/definitions.ts

@@ -1,52 +1,106 @@
-/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
+/* Copyright (C) 2024 Manuel Bustillo*/
-
-import { AttendanceSummary } from "./group";
-import { Guest } from "./guest";
-
-export interface Entity {
-  id?: string;
-}
-
-export type TableArrangement = {
-  id: string;
-  number: number;
-  name: string;
-  guests?: Guest[];
-  discomfort?: number;
-  valid?: boolean;
-  progress: number;
-  status: 'in_progress' | 'completed' | 'not_started';
-}
 
+// This file contains type definitions for your data.
+// It describes the shape of the data, and what data type each property should accept.
+// 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 type User = {
   id: string;
+  name: string;
   email: string;
-}
+  password: string;
-
-export type Captcha = {
-  id: string;
-  answer: string;
-}
-
-export type StructuredErrors = {
-  [key: string]: string[] | string;
 };
 
-export type GlobalSummary = {
+export type Customer = {
-  expenses: ExpenseSummary; 
+  id: string;
-  guests: AttendanceSummary
+  name: string;
+  email: string;
+  image_url: string;
+};
+
+export type Guest = {
+  id: string;
+  name: string;
+  email: string;
+  group_name: string;
+  status: 'Considered' | 'Invited' | 'Confirmed' | 'Declined' | 'Tentative';
 }
 
-export type ExpenseSummary = {
+export type Group = {
-  projected: ExpensePossibleSummary;
+  id: string;
-  confirmed: ExpensePossibleSummary;
+  name: string;
-  status: StatusSummary;
+  guest_count: number;
-}
+  icon: string;
+  children: Group[];
+};
 
-export type ExpensePossibleSummary = {
+export type Invoice = {
-  total: number;
+  id: string;
-  guests: number;
+  customer_id: string;
-}
+  amount: number;
-export type StatusSummary = {
+  date: string;
-  paid: number;
+  // In TypeScript, this is called a string union type.
-}
+  // It means that the "status" property can only be one of the two strings: 'pending' or 'paid'.
+  status: 'pending' | 'paid';
+};
+
+export type Revenue = {
+  month: string;
+  revenue: number;
+};
+
+export type LatestInvoice = {
+  id: string;
+  name: string;
+  image_url: string;
+  email: string;
+  amount: string;
+};
+
+// The database returns a number for amount, but we later format it to a string with the formatCurrency function
+export type LatestInvoiceRaw = Omit<LatestInvoice, 'amount'> & {
+  amount: 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 CustomersTableType = {
+  id: string;
+  name: string;
+  email: string;
+  image_url: string;
+  total_guests: number;
+  total_pending: number;
+  total_paid: number;
+};
+
+export type FormattedCustomersTable = {
+  id: string;
+  name: string;
+  email: string;
+  image_url: string;
+  total_guests: number;
+  total_pending: string;
+  total_paid: string;
+};
+
+export type CustomerField = {
+  id: string;
+  name: string;
+};
+
+export type InvoiceForm = {
+  id: string;
+  customer_id: string;
+  amount: number;
+  status: 'pending' | 'paid';
+};

app/lib/expense.tsx

@@ -1,41 +0,0 @@
-/* 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

@@ -1,64 +0,0 @@
-/* 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

@@ -1,41 +0,0 @@
-/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
-
-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];
-
-export class Guest implements Entity {
-  id?: string;
-  name?: string;
-  color?: string;
-  status?: GuestStatus;
-  children?: Guest[];
-  group?: Group;
-
-  constructor(id?: string, name?: string, color?: string, status?: GuestStatus, children?: Guest[], Group?: Group) {
-    this.id = id;
-    this.name = name;
-    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.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.group?.id } });
-  }
-
-  apiPath(): string {
-    return 'guests';
-  }
-}
-

app/lib/invitation.tsx

@@ -1,28 +0,0 @@
-/* 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.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/placeholder-data.ts

@@ -0,0 +1,149 @@
+/* Copyright (C) 2024 Manuel Bustillo*/
+
+// This file contains placeholder data that you'll be replacing with real data in the Data Fetching chapter:
+// https://nextjs.org/learn/dashboard-app/fetching-data
+const users = [
+  {
+    id: '410544b2-4001-4271-9855-fec4b6a6442a',
+    name: 'User',
+    email: 'user@nextmail.com',
+    password: '123456',
+  },
+];
+
+const customers = [
+  {
+    id: 'd6e15727-9fe1-4961-8c5b-ea44a9bd81aa',
+    name: 'Evil Rabbit',
+    email: 'evil@rabbit.com',
+    image_url: '/customers/evil-rabbit.png',
+  },
+  {
+    id: '3958dc9e-712f-4377-85e9-fec4b6a6442a',
+    name: 'Delba de Oliveira',
+    email: 'delba@oliveira.com',
+    image_url: '/customers/delba-de-oliveira.png',
+  },
+  {
+    id: '3958dc9e-742f-4377-85e9-fec4b6a6442a',
+    name: 'Lee Robinson',
+    email: 'lee@robinson.com',
+    image_url: '/customers/lee-robinson.png',
+  },
+  {
+    id: '76d65c26-f784-44a2-ac19-586678f7c2f2',
+    name: 'Michael Novotny',
+    email: 'michael@novotny.com',
+    image_url: '/customers/michael-novotny.png',
+  },
+  {
+    id: 'CC27C14A-0ACF-4F4A-A6C9-D45682C144B9',
+    name: 'Amy Burns',
+    email: 'amy@burns.com',
+    image_url: '/customers/amy-burns.png',
+  },
+  {
+    id: '13D07535-C59E-4157-A011-F8D2EF4E0CBB',
+    name: 'Balazs Orban',
+    email: 'balazs@orban.com',
+    image_url: '/customers/balazs-orban.png',
+  },
+];
+
+const guests = [
+  {
+    customer_id: customers[0].id,
+    amount: 15795,
+    status: 'pending',
+    date: '2022-12-06',
+  },
+  {
+    customer_id: customers[1].id,
+    amount: 20348,
+    status: 'pending',
+    date: '2022-11-14',
+  },
+  {
+    customer_id: customers[4].id,
+    amount: 3040,
+    status: 'paid',
+    date: '2022-10-29',
+  },
+  {
+    customer_id: customers[3].id,
+    amount: 44800,
+    status: 'paid',
+    date: '2023-09-10',
+  },
+  {
+    customer_id: customers[5].id,
+    amount: 34577,
+    status: 'pending',
+    date: '2023-08-05',
+  },
+  {
+    customer_id: customers[2].id,
+    amount: 54246,
+    status: 'pending',
+    date: '2023-07-16',
+  },
+  {
+    customer_id: customers[0].id,
+    amount: 666,
+    status: 'pending',
+    date: '2023-06-27',
+  },
+  {
+    customer_id: customers[3].id,
+    amount: 32545,
+    status: 'paid',
+    date: '2023-06-09',
+  },
+  {
+    customer_id: customers[4].id,
+    amount: 1250,
+    status: 'paid',
+    date: '2023-06-17',
+  },
+  {
+    customer_id: customers[5].id,
+    amount: 8546,
+    status: 'paid',
+    date: '2023-06-07',
+  },
+  {
+    customer_id: customers[1].id,
+    amount: 500,
+    status: 'paid',
+    date: '2023-08-19',
+  },
+  {
+    customer_id: customers[5].id,
+    amount: 8945,
+    status: 'paid',
+    date: '2023-06-03',
+  },
+  {
+    customer_id: customers[2].id,
+    amount: 1000,
+    status: 'paid',
+    date: '2022-06-05',
+  },
+];
+
+const revenue = [
+  { month: 'Jan', revenue: 2000 },
+  { month: 'Feb', revenue: 1800 },
+  { month: 'Mar', revenue: 2200 },
+  { month: 'Apr', revenue: 2500 },
+  { month: 'May', revenue: 2300 },
+  { month: 'Jun', revenue: 3200 },
+  { month: 'Jul', revenue: 3500 },
+  { month: 'Aug', revenue: 3700 },
+  { month: 'Sep', revenue: 2500 },
+  { month: 'Oct', revenue: 2800 },
+  { month: 'Nov', revenue: 3000 },
+  { month: 'Dec', revenue: 4800 },
+];
+
+export { users, customers, guests, revenue };

app/lib/tableSimulation.tsx

@@ -1,74 +0,0 @@
-/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
-
-import { Serializable } from "../api/abstract-api";
-import { Entity } from "./definitions";
-import { Group } from "./group";
-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[];
-  progress: number;
-
-  constructor(id?: string, tables?: Table[], progress?: number) {
-    this.id = id;
-    this.tables = tables || [];
-    this.progress = progress || 0;
-  }
-}
-
-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.color, guest.status, [], guest.group)),
-        discomfort: {
-          discomfort: table.discomfort.discomfort,
-          breakdown: {
-            tableSizePenalty: table.discomfort.breakdown.table_size_penalty,
-            cohesionPenalty: table.discomfort.breakdown.cohesion_penalty,
-          }
-        },
-      }
-    }), data.progress);
-  }
-
-  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,
-            color: guest.color,
-            status: guest.status,
-            children: guest.children,
-            group: new Group(guest.group?.id, guest.group?.name)
-          }
-        }),
-        discomfort: table.discomfort,
-      }
-    }) } });
-  }
-
-  apiPath(): string {
-    return 'tables_arrangements';
-  }
-}
-

app/lib/utils.ts

@@ -1,4 +1,13 @@
-/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
+/* Copyright (C) 2024 Manuel Bustillo*/
+
+import { Revenue } from './definitions';
+
+export const formatCurrency = (amount: number) => {
+  return (amount / 100).toLocaleString('en-US', {
+    style: 'currency',
+    currency: 'USD',
+  });
+};
 
 export const getCsrfToken = () => {
   return document.cookie
@@ -7,14 +16,63 @@ export const getCsrfToken = () => {
       ?.split("=")[1] || 'unknown';
 }
 
-export const getSlug = () => localStorage.getItem('slug') || 'default';
+export const formatDateToLocal = (
+  dateStr: string,
+  locale: string = 'en-US',
+) => {
+  const date = new Date(dateStr);
+  const options: Intl.DateTimeFormatOptions = {
+    day: 'numeric',
+    month: 'short',
+    year: 'numeric',
+  };
+  const formatter = new Intl.DateTimeFormat(locale, options);
+  return formatter.format(date);
+};
 
-// From https://stackoverflow.com/a/1026087/3607039
+export const generateYAxis = (revenue: Revenue[]) => {
-export const capitalize = (val:string) => {
+  // Calculate what labels we need to display on the y-axis
-  return String(val).charAt(0).toUpperCase() + String(val).slice(1);
+  // based on highest record and in 1000s
+  const yAxisLabels = [];
+  const highestRecord = Math.max(...revenue.map((month) => month.revenue));
+  const topLabel = Math.ceil(highestRecord / 1000) * 1000;
+
+  for (let i = topLabel; i >= 0; i -= 1000) {
+    yAxisLabels.push(`$${i / 1000}K`);
   }
 
-// From https://stackoverflow.com/a/62118163/3607039
+  return { yAxisLabels, topLabel };
-export function asArray<T>(value: T | T[]): T[] {
+};
-  return ([] as T[]).concat(value)
+
+export const generatePagination = (currentPage: number, totalPages: number) => {
+  // If the total number of pages is 7 or less,
+  // display all pages without any ellipsis.
+  if (totalPages <= 7) {
+    return Array.from({ length: totalPages }, (_, i) => i + 1);
   }
+
+  // If the current page is among the first 3 pages,
+  // show the first 3, an ellipsis, and the last 2 pages.
+  if (currentPage <= 3) {
+    return [1, 2, 3, '...', totalPages - 1, totalPages];
+  }
+
+  // If the current page is among the last 3 pages,
+  // show the first 2, an ellipsis, and the last 3 pages.
+  if (currentPage >= totalPages - 2) {
+    return [1, 2, '...', totalPages - 2, totalPages - 1, totalPages];
+  }
+
+  // If the current page is somewhere in the middle,
+  // show the first page, an ellipsis, the current page and its neighbors,
+  // another ellipsis, and the last page.
+  return [
+    1,
+    '...',
+    currentPage - 1,
+    currentPage,
+    currentPage + 1,
+    '...',
+    totalPages,
+  ];
+};

app/lib/website.tsx

@@ -1,30 +0,0 @@
-/* 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/page.tsx

@@ -0,0 +1,12 @@
+/* Copyright (C) 2024 Manuel Bustillo*/
+
+import Link from 'next/link';
+import styles from '@/app/ui/home.module.css';
+
+export default function Page() {
+  return (
+    <main className="flex min-h-screen flex-col p-6">
+     
+    </main>
+  );
+}

app/seed/route.ts

@@ -0,0 +1,124 @@
+/* Copyright (C) 2024 Manuel Bustillo*/
+
+// import bcrypt from 'bcrypt';
+// import { db } from '@vercel/postgres';
+// import { guests, customers, revenue, users } from '../lib/placeholder-data';
+
+// const client = await db.connect();
+
+// async function seedUsers() {
+//   await client.sql`CREATE EXTENSION IF NOT EXISTS "uuid-ossp"`;
+//   await client.sql`
+//     CREATE TABLE IF NOT EXISTS users (
+//       id UUID DEFAULT uuid_generate_v4() PRIMARY KEY,
+//       name VARCHAR(255) NOT NULL,
+//       email TEXT NOT NULL UNIQUE,
+//       password TEXT NOT NULL
+//     );
+//   `;
+
+//   const insertedUsers = await Promise.all(
+//     users.map(async (user) => {
+//       const hashedPassword = await bcrypt.hash(user.password, 10);
+//       return client.sql`
+//         INSERT INTO users (id, name, email, password)
+//         VALUES (${user.id}, ${user.name}, ${user.email}, ${hashedPassword})
+//         ON CONFLICT (id) DO NOTHING;
+//       `;
+//     }),
+//   );
+
+//   return insertedUsers;
+// }
+
+// async function seedguests() {
+//   await client.sql`CREATE EXTENSION IF NOT EXISTS "uuid-ossp"`;
+
+//   await client.sql`
+//     CREATE TABLE IF NOT EXISTS guests (
+//       id UUID DEFAULT uuid_generate_v4() PRIMARY KEY,
+//       customer_id UUID NOT NULL,
+//       amount INT NOT NULL,
+//       status VARCHAR(255) NOT NULL,
+//       date DATE NOT NULL
+//     );
+//   `;
+
+//   const insertedguests = await Promise.all(
+//     guests.map(
+//       (invoice) => client.sql`
+//         INSERT INTO guests (customer_id, amount, status, date)
+//         VALUES (${invoice.customer_id}, ${invoice.amount}, ${invoice.status}, ${invoice.date})
+//         ON CONFLICT (id) DO NOTHING;
+//       `,
+//     ),
+//   );
+
+//   return insertedguests;
+// }
+
+// async function seedCustomers() {
+//   await client.sql`CREATE EXTENSION IF NOT EXISTS "uuid-ossp"`;
+
+//   await client.sql`
+//     CREATE TABLE IF NOT EXISTS customers (
+//       id UUID DEFAULT uuid_generate_v4() PRIMARY KEY,
+//       name VARCHAR(255) NOT NULL,
+//       email VARCHAR(255) NOT NULL,
+//       image_url VARCHAR(255) NOT NULL
+//     );
+//   `;
+
+//   const insertedCustomers = await Promise.all(
+//     customers.map(
+//       (customer) => client.sql`
+//         INSERT INTO customers (id, name, email, image_url)
+//         VALUES (${customer.id}, ${customer.name}, ${customer.email}, ${customer.image_url})
+//         ON CONFLICT (id) DO NOTHING;
+//       `,
+//     ),
+//   );
+
+//   return insertedCustomers;
+// }
+
+// async function seedRevenue() {
+//   await client.sql`
+//     CREATE TABLE IF NOT EXISTS revenue (
+//       month VARCHAR(4) NOT NULL UNIQUE,
+//       revenue INT NOT NULL
+//     );
+//   `;
+
+//   const insertedRevenue = await Promise.all(
+//     revenue.map(
+//       (rev) => client.sql`
+//         INSERT INTO revenue (month, revenue)
+//         VALUES (${rev.month}, ${rev.revenue})
+//         ON CONFLICT (month) DO NOTHING;
+//       `,
+//     ),
+//   );
+
+//   return insertedRevenue;
+// }
+
+export async function GET() {
+  return Response.json({
+    message:
+      'Uncomment this file and remove this line. You can delete this file when you are finished.',
+  });
+  // try {
+  //   await client.sql`BEGIN`;
+  //   await seedUsers();
+  //   await seedCustomers();
+  //   await seedguests();
+  //   await seedRevenue();
+  //   await client.sql`COMMIT`;
+
+  //   return Response.json({ message: 'Database seeded successfully' });
+  // } catch (error) {
+  //   await client.sql`ROLLBACK`;
+  //   return Response.json({ error }, { status: 500 });
+  // }
+}

app/types.tsx

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

app/ui/arrangements/arrangement.tsx

@@ -1,37 +0,0 @@
-/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
-
-'use client';
-
-import { AbstractApi } from '@/app/api/abstract-api';
-import { TableArrangement } from '@/app/lib/definitions';
-import { TableSimulation, TableSimulationSerializer } from '@/app/lib/tableSimulation';
-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 [simulation, setSimulation] = useState<TableSimulation | undefined>(undefined);
-
-  function loadSimulation() {
-    new AbstractApi<TableSimulation>().get(new TableSimulationSerializer(), id, (object: TableSimulation) => {
-      setSimulation(object);
-    });
-  }
-
-  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">
-          {simulation && simulation.tables.map((table) => (
-            <Table key={table.number} table={table} style="rounded" />
-          ))}
-        </div>
-      </div>
-    </div>
-  )
-
-}

app/ui/arrangements/arrangements-table.tsx

@@ -1,72 +0,0 @@
-/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
-
-'use client'
-
-import React, { useState } from "react"
-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";
-import { ProgressBar } from "primereact/progressbar";
-import { useEffect } from "react";
-import { TableSimulation, TableSimulationSerializer } from "@/app/lib/tableSimulation";
-import { AbstractApi } from "@/app/api/abstract-api";
-
-export default function ArrangementsTable({ onArrangementSelected }: { onArrangementSelected: (arrangementId: string) => void }) {
-  const [arrangements, setArrangements] = useState<Array<TableArrangement>>([]);
-  const [arrangementsLoaded, setArrangementsLoaded] = useState(false);
-
-  useEffect(() => {
-    refreshSimulations();
-    const interval = setInterval(refreshSimulations, 10000);
-    return () => clearInterval(interval);
-  }, []);
-
-  function refreshSimulations() {
-    loadTableSimulations((arrangements) => {
-      setArrangements(arrangements);
-      setArrangementsLoaded(true);
-    });
-  }
-
-  function arrangementClicked(e: React.MouseEvent<HTMLElement>) {
-    onArrangementSelected(e.currentTarget.getAttribute('data-arrangement-id') || '');
-  }
-
-  return (
-    <TableOfContents
-      headers={['Name', 'Discomfort', 'Status', 'Actions']}
-      caption='Simulations'
-      elements={arrangements}
-      rowRender={(arrangement) => (
-        <tr key={arrangement.id} className={clsx("border-b", {
-          "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">
-            {arrangement.discomfort}
-          </td>
-          <td className="px-4">
-            <Tooltip target=".tooltip-status" />
-
-            <>
-              { arrangement.valid && arrangement.status === 'not_started' && <ProgressBar mode="indeterminate" style={{ height: '6px' }}></ProgressBar>  }
-              { arrangement.valid && arrangement.status !== 'not_started' && <ProgressBar value={(100 * arrangement.progress).toFixed(2) }></ProgressBar> }
-
-              { !arrangement.valid && 'The list of potential guests has changed since this simulation.' }
-            </>
-          </td>
-          <td>
-            <button data-arrangement-id={arrangement.id} onClick={arrangementClicked} className={classNames('primary')}>Load</button>
-          </td>
-        </tr>
-      )}
-    />
-  );
-}

app/ui/button.tsx

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

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

@@ -1,82 +0,0 @@
-/* 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,15 +0,0 @@
-/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
-
-import clsx from "clsx";
-
-type ButtonColor = 'primary' | 'blue' | 'green' | 'red' | 'yellow' | 'gray';
-
-export function classNames(type: ButtonColor) {
-    return (clsx("text-white py-1 px-2 m-2 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-gray-500 hover:bg-gray-700': type === 'gray'
-    }))
-}

app/ui/components/dashboard-cards.tsx

@@ -1,4 +1,4 @@
-/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
+/* Copyright (C) 2024 Manuel Bustillo*/
 
 import clsx from "clsx"
 import { Icon } from "../../types";
@@ -21,7 +21,7 @@ const colorClasses = (style: Style) => {
     }
 }
 
-export function MainCard({ amount, title, subtitle, style, iconName }:
+export async function MainCard({ amount, title, subtitle, style, iconName }:
     {
         amount: string,
         title: string,
@@ -42,7 +42,7 @@ export function MainCard({ amount, title, subtitle, style, iconName }:
     );
 }
 
-export function SecondaryCard({ amount, title, iconName, style }: { amount: string, title: string, iconName: keyof typeof HeroIcon, style: Style }) {
+export async 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

@@ -1,83 +0,0 @@
-/* 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

@@ -1,40 +0,0 @@
-/* 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,34 +0,0 @@
-/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
-
-import React, { useState } from 'react';
-
-export default function InlineTextField({ initialValue, onChange }: { initialValue: string, onChange: (value: string) => void }) {
-    const [editing, setEditing] = useState(false);
-    const [value, setValue] = useState(initialValue);
-
-    const renderText = () => <span onClick={() => setEditing(true)}>{value}</span>
-
-    const onConfirm = () => {
-        onChange(value);
-        setEditing(false);
-    }
-
-    function renderForm() {
-        return (
-            <div className="flex flex-row">
-                <input
-                    type="text"
-                    value={value}
-                    className="px-2 py-0 h-5 max-w-48"
-                    onChange={(e) => setValue(e.target.value)}
-                    onBlur={onConfirm}
-                    autoFocus
-                />
-            </div>
-        )
-    }
-
-    return (
-        editing ? (renderForm()) : (renderText())
-    );
-}

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

@@ -1,95 +0,0 @@
-/* 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?: (newGroup: Group) => 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, (newGroup) => {
-        resetForm();
-        onCreate && onCreate(newGroup);
-      });
-    } else {
-
-      api.create(serializer, new Group(undefined, name, undefined, icon, undefined, parentId, color), (newGroup) => {
-        resetForm();
-        onCreate && onCreate(newGroup);
-      });
-    }
-  }
-
-  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,91 +0,0 @@
-/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
-
-'use client';
-
-import { AbstractApi } from '@/app/api/abstract-api';
-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';
-import { Dropdown } from 'primereact/dropdown';
-import { FloatLabel } from 'primereact/floatlabel';
-import { InputText } from 'primereact/inputtext';
-import { useState } from 'react';
-
-export default function GuestFormDialog({ groups, onCreate, onHide, guest, visible }: {
-  groups: Group[],
-  onCreate?: (guest: Guest) => void,
-  onHide: () => void,
-  guest?: Guest,
-  visible: boolean,
-}) {
-
-  const [name, setName] = useState(guest?.name || '');
-  const [group, setGroup] = useState(guest?.group?.id || null);
-  const [status, setStatus] = useState<GuestStatus | null>(guest?.status || null);
-
-  const api = new AbstractApi<Guest>();
-  const serializer = new GuestSerializer();
-
-  function resetForm() {
-    setName('');
-    setGroup(null);
-    setStatus(null);
-  }
-
-  function submitGuest() {
-    if (!(name && group && status)) {
-      return
-    }
-
-    if (guest?.id !== undefined) {
-      guest.name = name;
-      guest.group!.id = group;  
-      guest.status = status;
-     
-      api.update(serializer, guest, (updatedGuest) => {
-        resetForm();
-        onCreate && onCreate(updatedGuest);
-      });
-    } else {
-      api.create(serializer, new Guest(undefined, name, undefined, status, [], groups.find((g) => g.id === group)), (newGuest)=> {
-        resetForm();
-        onCreate && onCreate(newGuest);
-      });
-    }
-  }
-
-  return (
-    <>
-
-      <Dialog header="Add guest" 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>
-            <Dropdown id="group" className='rounded-sm min-w-32' value={group} onChange={(e) => setGroup(e.target.value)} options={
-              groups.map((group) => {
-                return { label: group.name, value: group.id };
-              })
-            } />
-            <label htmlFor="group">Group</label>
-          </FloatLabel>
-          <FloatLabel>
-            <Dropdown id="status" className='rounded-sm min-w-32' value={status} onChange={(e) => setStatus(e.target.value)} options={
-              guestStatuses.map((status) => {
-                return { label: capitalize(status), value: status };
-              })
-            } />
-            <label htmlFor="status">Status</label>
-          </FloatLabel>
-          <button className={classNames('primary')} onClick={submitGuest} disabled={!(name.length > 0 && group && status)}>
-            {guest?.id !== undefined ? 'Update' : 'Create'}
-          </button>
-        </div>
-      </Dialog>
-    </>
-  );
-}

app/ui/components/login-form.tsx

@@ -1,54 +0,0 @@
-/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
-
-'use client';
-
-import { FloatLabel } from 'primereact/floatlabel';
-import { InputText } from 'primereact/inputtext';
-import { login } from '../../api/authentication';
-import { useState, useEffect } from 'react';
-import { classNames } from './button';
-import { useRouter } from 'next/navigation'
-import { User } from '../../lib/definitions';
-import { getSlug } from '@/app/lib/utils';
-
-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);
-
-  useEffect(() => {
-    localStorage.setItem('currentUser', JSON.stringify(currentUser));
-  }, [currentUser]);
-
-  return (
-    <div className="card flex justify-evenly py-5">
-      <FloatLabel>
-        <InputText id="email" type="email" className='rounded-sm' onChange={(e) => setEmail(e.target.value)} />
-        <label htmlFor="email">Email</label>
-      </FloatLabel>
-      <FloatLabel>
-        <InputText id="password" type="password" className='rounded-sm' onChange={(e) => setPassword(e.target.value)} />
-        <label htmlFor="password">Password</label>
-      </FloatLabel>
-      <button
-        className={classNames('primary')}
-        disabled={email.length == 0 || password.length == 0}
-        onClick={() => login({
-          email: email,
-          password: password,
-          onLogin: (user) => {
-            setCurrentUser(user);
-            router.push(`${slug}/dashboard`)
-          }
-        })}>
-        Sign in
-      </button>
-    </div>
-  )
-}

app/ui/components/registration-form.tsx

@@ -1,100 +0,0 @@
-/* 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>("default");
-  useEffect(() => { setSlug(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,28 +0,0 @@
-/* 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 (
-        <div className="w-full relative overflow-x-auto shadow-md sm:rounded-lg">
-            <table className="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
-                <caption className="p-5 text-lg font-semibold text-left rtl:text-right text-gray-900 bg-white dark:text-white dark:bg-gray-800">
-                    {caption}
-                    <p className="mt-1 text-sm font-normal text-gray-500 dark:text-gray-400">
-                        There are {elements.length} elements in the list
-                    </p>
-                </caption>
-                <thead className="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
-                    <tr>
-                        {headers.map((header) => (
-                            <th scope="col" className="px-6 py-3">
-                                {header}
-                            </th>
-                        ))}
-                    </tr>
-                </thead>
-                <tbody>
-                    {elements.map((element) => rowRender(element))}
-                </tbody>
-            </table>
-        </div>
-    )
-}

app/ui/components/table.tsx

@@ -1,107 +0,0 @@
-/* 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";
-
-
-function Dish({ guest, rotation }: { guest: Guest, rotation?: number }) {
-  rotation = rotation || 0
-  return (
-    <div className={`m-3 w-24 h-24 rounded-full content-center text-center cursor-default`} style={{
-      rotate: `${360 - rotation}deg`,
-      backgroundColor: guest.color,
-    }}>
-      {guest.name}
-    </div>
-  )
-}
-
-function GuestRow({ guests }: { guests: Guest[] }) {
-  return (
-    <div className="justify-around flex flex-row">
-      {guests.map((guest) => <Dish key={guest.id} guest={guest} />)}
-    </div>
-  )
-}
-
-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);
-
-  return (
-    <div className="m-12 h-64 bg-cyan-800 flex flex-col justify-between">
-      <GuestRow guests={arrayFirstHalf} />
-      <GuestRow guests={arraySecondHalf} />
-    </div>
-  )
-}
-
-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 grid flex items-center justify-items-center`} style={{ width: `${size}px`, height: `${size}px` }}>
-
-      {
-        guests.map((guest, index) => {
-          return (
-            <div key={guest.id} className={`border-dashed grid justify-items-center absolute inset-0`} style={{
-              rotate: `${index * rotation}deg`,
-              height: `${size}px`,
-              width: `${size}px`,
-            }}>
-              <Dish guest={guest} rotation={index * rotation} />
-            </div>
-          )
-        })
-      }
-
-      <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({ table, style }: { table: TableType, style: "rectangular" | "rounded" }) {
-  return (
-    <>
-      {style === "rectangular" && <RectangularTable table={table} />}
-      {style === "rounded" && <RoundedTable table={table} />}
-    </>
-  )
-}

app/ui/customers/table.tsx

@@ -0,0 +1,125 @@
+/* Copyright (C) 2024 Manuel Bustillo*/
+
+import Image from 'next/image';
+import { lusitana } from '@/app/ui/fonts';
+import Search from '@/app/ui/search';
+import {
+  CustomersTableType,
+  FormattedCustomersTable,
+} from '@/app/lib/definitions';
+
+export default async function CustomersTable({
+  customers,
+}: {
+  customers: FormattedCustomersTable[];
+}) {
+  return (
+    <div className="w-full">
+      <h1 className={`${lusitana.className} mb-8 text-xl md:text-2xl`}>
+        Customers
+      </h1>
+      <Search placeholder="Search customers..." />
+      <div className="mt-6 flow-root">
+        <div className="overflow-x-auto">
+          <div className="inline-block min-w-full align-middle">
+            <div className="overflow-hidden rounded-md bg-gray-50 p-2 md:pt-0">
+              <div className="md:hidden">
+                {customers?.map((customer) => (
+                  <div
+                    key={customer.id}
+                    className="mb-2 w-full rounded-md bg-white p-4"
+                  >
+                    <div className="flex items-center justify-between border-b pb-4">
+                      <div>
+                        <div className="mb-2 flex items-center">
+                          <div className="flex items-center gap-3">
+                            <Image
+                              src={customer.image_url}
+                              className="rounded-full"
+                              alt={`${customer.name}'s profile picture`}
+                              width={28}
+                              height={28}
+                            />
+                            <p>{customer.name}</p>
+                          </div>
+                        </div>
+                        <p className="text-sm text-gray-500">
+                          {customer.email}
+                        </p>
+                      </div>
+                    </div>
+                    <div className="flex w-full items-center justify-between border-b py-5">
+                      <div className="flex w-1/2 flex-col">
+                        <p className="text-xs">Pending</p>
+                        <p className="font-medium">{customer.total_pending}</p>
+                      </div>
+                      <div className="flex w-1/2 flex-col">
+                        <p className="text-xs">Paid</p>
+                        <p className="font-medium">{customer.total_paid}</p>
+                      </div>
+                    </div>
+                    <div className="pt-4 text-sm">
+                      <p>{customer.total_guests} guests</p>
+                    </div>
+                  </div>
+                ))}
+              </div>
+              <table className="hidden min-w-full rounded-md text-gray-900 md:table">
+                <thead className="rounded-md bg-gray-50 text-left text-sm font-normal">
+                  <tr>
+                    <th scope="col" className="px-4 py-5 font-medium sm:pl-6">
+                      Name
+                    </th>
+                    <th scope="col" className="px-3 py-5 font-medium">
+                      Email
+                    </th>
+                    <th scope="col" className="px-3 py-5 font-medium">
+                      Total guests
+                    </th>
+                    <th scope="col" className="px-3 py-5 font-medium">
+                      Total Pending
+                    </th>
+                    <th scope="col" className="px-4 py-5 font-medium">
+                      Total Paid
+                    </th>
+                  </tr>
+                </thead>
+
+                <tbody className="divide-y divide-gray-200 text-gray-900">
+                  {customers.map((customer) => (
+                    <tr key={customer.id} className="group">
+                      <td className="whitespace-nowrap bg-white py-5 pl-4 pr-3 text-sm text-black group-first-of-type:rounded-md group-last-of-type:rounded-md sm:pl-6">
+                        <div className="flex items-center gap-3">
+                          <Image
+                            src={customer.image_url}
+                            className="rounded-full"
+                            alt={`${customer.name}'s profile picture`}
+                            width={28}
+                            height={28}
+                          />
+                          <p>{customer.name}</p>
+                        </div>
+                      </td>
+                      <td className="whitespace-nowrap bg-white px-4 py-5 text-sm">
+                        {customer.email}
+                      </td>
+                      <td className="whitespace-nowrap bg-white px-4 py-5 text-sm">
+                        {customer.total_guests}
+                      </td>
+                      <td className="whitespace-nowrap bg-white px-4 py-5 text-sm">
+                        {customer.total_pending}
+                      </td>
+                      <td className="whitespace-nowrap bg-white px-4 py-5 text-sm group-first-of-type:rounded-md group-last-of-type:rounded-md">
+                        {customer.total_paid}
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

app/ui/dashboard/cards.tsx

@@ -0,0 +1,60 @@
+/* Copyright (C) 2024 Manuel Bustillo*/
+
+import {
+  BanknotesIcon,
+  ClockIcon,
+  UserGroupIcon,
+  InboxIcon,
+} from '@heroicons/react/24/outline';
+import { lusitana } from '@/app/ui/fonts';
+
+const iconMap = {
+  collected: BanknotesIcon,
+  customers: UserGroupIcon,
+  pending: ClockIcon,
+  guests: InboxIcon,
+};
+
+export default async function CardWrapper() {
+  return (
+    <>
+      {/* NOTE: Uncomment this code in Chapter 9 */}
+
+      {/* <Card title="Collected" value={totalPaidguests} type="collected" />
+      <Card title="Pending" value={totalPendingguests} type="pending" />
+      <Card title="Total guests" value={numberOfguests} type="guests" />
+      <Card
+        title="Total Customers"
+        value={numberOfCustomers}
+        type="customers"
+      /> */}
+    </>
+  );
+}
+
+export function Card({
+  title,
+  value,
+  type,
+}: {
+  title: string;
+  value: number | string;
+  type: 'guests' | 'customers' | 'pending' | 'collected';
+}) {
+  const Icon = iconMap[type];
+
+  return (
+    <div className="rounded-xl bg-gray-50 p-2 shadow-sm">
+      <div className="flex p-4">
+        {Icon ? <Icon className="h-5 w-5 text-gray-700" /> : null}
+        <h3 className="ml-2 text-sm font-medium">{title}</h3>
+      </div>
+      <p
+        className={`${lusitana.className}
+          truncate rounded-xl bg-white px-4 py-8 text-center text-2xl`}
+      >
+        {value}
+      </p>
+    </div>
+  );
+}

app/ui/dashboard/global-summary.tsx

@@ -1,41 +0,0 @@
-/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
-
-import { GlobalSummary as Summary} from '@/app/lib/definitions';
-import { MainCard, SecondaryCard } from '../components/dashboard-cards';
-
-export default function GlobalSummary({ summary }: { summary: Summary }) {
-  return (
-    <div className="my-4">
-      <div className="flex flex-row w-full my-2">
-        <div className="flex flex-col">
-          <MainCard amount={`${summary.expenses.projected.total}€`} title="Projected" subtitle={`${summary.expenses.projected.guests} guests`} style="blue" iconName="ArrowTrendingUpIcon" />
-          <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={`${summary.expenses.confirmed.total}€`} title="Min." subtitle={`${summary.expenses.confirmed.guests} 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={summary.guests.total.toString()} title="Invites sent" iconName="UsersIcon" />
-
-        <div className="flex flex-col">
-          <SecondaryCard amount={`${Math.round(summary.guests.confirmed / summary.guests.total * 100)}%`} title={`confirmed (${summary.guests.confirmed} guests)`} iconName="CheckIcon" style='green' />
-          <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={`${Math.round(summary.guests.tentative / summary.guests.total * 100)}%`} title={`tentative (${summary.guests.tentative} guests)`} iconName="QuestionMarkCircleIcon" style='orange' />
-          <SecondaryCard amount={`${Math.round(summary.guests.invited / summary.guests.total * 100)}%`} title={`awaiting (${summary.guests.invited} guests)`} iconName="EllipsisHorizontalIcon" style='gray' />
-        </div>
-      </div>
-    </div>
-  );
-}

app/ui/dashboard/latest-invoices.tsx

@@ -0,0 +1,66 @@
+/* Copyright (C) 2024 Manuel Bustillo*/
+
+import { ArrowPathIcon } from '@heroicons/react/24/outline';
+import clsx from 'clsx';
+import Image from 'next/image';
+import { lusitana } from '@/app/ui/fonts';
+import { LatestInvoice } from '@/app/lib/definitions';
+export default async function Latestguests({
+  latestguests,
+}: {
+  latestguests: LatestInvoice[];
+}) {
+  return (
+    <div className="flex w-full flex-col md:col-span-4">
+      <h2 className={`${lusitana.className} mb-4 text-xl md:text-2xl`}>
+        Latest guests
+      </h2>
+      <div className="flex grow flex-col justify-between rounded-xl bg-gray-50 p-4">
+        {/* NOTE: Uncomment this code in Chapter 7 */}
+
+        {/* <div className="bg-white px-6">
+          {latestguests.map((invoice, i) => {
+            return (
+              <div
+                key={invoice.id}
+                className={clsx(
+                  'flex flex-row items-center justify-between py-4',
+                  {
+                    'border-t': i !== 0,
+                  },
+                )}
+              >
+                <div className="flex items-center">
+                  <Image
+                    src={invoice.image_url}
+                    alt={`${invoice.name}'s profile picture`}
+                    className="mr-4 rounded-full"
+                    width={32}
+                    height={32}
+                  />
+                  <div className="min-w-0">
+                    <p className="truncate text-sm font-semibold md:text-base">
+                      {invoice.name}
+                    </p>
+                    <p className="hidden text-sm text-gray-500 sm:block">
+                      {invoice.email}
+                    </p>
+                  </div>
+                </div>
+                <p
+                  className={`${lusitana.className} truncate text-sm font-medium md:text-base`}
+                >
+                  {invoice.amount}
+                </p>
+              </div>
+            );
+          })}
+        </div> */}
+        <div className="flex items-center pb-2 pt-6">
+          <ArrowPathIcon className="h-5 w-5 text-gray-500" />
+          <h3 className="ml-2 text-sm text-gray-500 ">Updated just now</h3>
+        </div>
+      </div>
+    </div>
+  );
+}

app/ui/dashboard/loading.tsx

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

app/ui/dashboard/nav-links.tsx

@@ -1,4 +1,4 @@
-/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
+/* Copyright (C) 2024 Manuel Bustillo*/
 
 'use client'
 
@@ -6,30 +6,23 @@ 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: '/dashboard/guests', icon: UserGroupIcon },
+  { name: 'Expenses', href: '/dashboard/expenses', icon: BanknotesIcon },
+  { name: 'Table distributions', href: '/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/revenue-chart.tsx

@@ -0,0 +1,67 @@
+/* Copyright (C) 2024 Manuel Bustillo*/
+
+import { generateYAxis } from '@/app/lib/utils';
+import { CalendarIcon } from '@heroicons/react/24/outline';
+import { lusitana } from '@/app/ui/fonts';
+import { Revenue } from '@/app/lib/definitions';
+
+// This component is representational only.
+// For data visualization UI, check out:
+// https://www.tremor.so/
+// https://www.chartjs.org/
+// https://airbnb.io/visx/
+
+export default async function RevenueChart({
+  revenue,
+}: {
+  revenue: Revenue[];
+}) {
+  const chartHeight = 350;
+  // NOTE: Uncomment this code in Chapter 7
+
+  // const { yAxisLabels, topLabel } = generateYAxis(revenue);
+
+  // if (!revenue || revenue.length === 0) {
+  //   return <p className="mt-4 text-gray-400">No data available.</p>;
+  // }
+
+  return (
+    <div className="w-full md:col-span-4">
+      <h2 className={`${lusitana.className} mb-4 text-xl md:text-2xl`}>
+        Recent Revenue
+      </h2>
+      {/* NOTE: Uncomment this code in Chapter 7 */}
+
+      {/* <div className="rounded-xl bg-gray-50 p-4">
+        <div className="sm:grid-cols-13 mt-0 grid grid-cols-12 items-end gap-2 rounded-md bg-white p-4 md:gap-4">
+          <div
+            className="mb-6 hidden flex-col justify-between text-sm text-gray-400 sm:flex"
+            style={{ height: `${chartHeight}px` }}
+          >
+            {yAxisLabels.map((label) => (
+              <p key={label}>{label}</p>
+            ))}
+          </div>
+
+          {revenue.map((month) => (
+            <div key={month.month} className="flex flex-col items-center gap-2">
+              <div
+                className="w-full rounded-md bg-blue-300"
+                style={{
+                  height: `${(chartHeight / topLabel) * month.revenue}px`,
+                }}
+              ></div>
+              <p className="-rotate-90 text-sm text-gray-400 sm:rotate-0">
+                {month.month}
+              </p>
+            </div>
+          ))}
+        </div>
+        <div className="flex items-center pb-2 pt-6">
+          <CalendarIcon className="h-5 w-5 text-gray-500" />
+          <h3 className="ml-2 text-sm text-gray-500 ">Last 12 months</h3>
+        </div>
+      </div> */}
+    </div>
+  );
+}

app/ui/dashboard/sidenav.tsx

@@ -1,31 +1,16 @@
-/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
+/* Copyright (C) 2024 Manuel Bustillo*/
-
-'use client';
 
 import Link from 'next/link';
 import NavLinks from '@/app/ui/dashboard/nav-links';
 import { PowerIcon } from '@heroicons/react/24/outline';
 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={`/${slug}/dashboard`}
+        href="/dashboard/guests"
       >
         <div className={`${gloriaHallelujah.className} "w-32 text-white md:w-40 antialiased` }>
           <h1>Wedding Planner</h1>
@@ -34,21 +19,12 @@ 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 {currentUser?.email}</span>
+        <form>
-        <button
+          <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">
-          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(`/${slug}`);
-              }
-            });
-          }}
-        >
             <PowerIcon className="w-6" />
             <div className="hidden md:block">Sign Out</div>
           </button>
+        </form>
       </div>
     </div>
   );

app/ui/expenses/summary.tsx

@@ -0,0 +1,45 @@
+/* Copyright (C) 2024 Manuel Bustillo*/
+
+import { MainCard, SecondaryCard } from '../components/dashboard-cards';
+
+export default async function ExpenseSummary() {
+    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="198€" 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="45000€" title="Min." subtitle="125 guests" iconName="ChevronDoubleDownIcon" style="green" />
+                </div>
+
+            </div>
+
+            <div className="flex flex-row w-full my-2">
+                <MainCard style="blue" amount="150" title="Invites sent" iconName="UsersIcon" />
+
+                <div className="flex flex-col">
+                    <SecondaryCard amount="31%" title="confirmed (27 guests)" iconName="CheckIcon" style='green' />
+                    <SecondaryCard amount="5%" title="declined (8 guests)" iconName="XMarkIcon" style='red' />
+                </div>
+
+                <div className="flex flex-col">
+                <SecondaryCard amount="17%" title="tentative (14 guests)" iconName="QuestionMarkCircleIcon" style='orange' />
+                    <SecondaryCard amount="65%" title="awaiting (72 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/expenses/table.tsx

@@ -1,46 +0,0 @@
-/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
-
-'use client'
-
-import { AbstractApi } from '@/app/api/abstract-api';
-import { Expense, ExpenseSerializer } from '@/app/lib/expense';
-import { PencilIcon, TrashIcon } from '@heroicons/react/24/outline';
-import TableOfContents from "../components/table-of-contents";
-
-
-export default function ExpensesTable({ expenses, onUpdate, onEdit }: {
-  expenses: Expense[],
-  onUpdate: () => void,
-  onEdit: (expense: Expense) => void,
-}) {
-
-  const api = new AbstractApi<Expense>();
-  const serializer = new ExpenseSerializer();
-
-  return (
-    <TableOfContents
-      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">
-            {expense.name}
-          </th>
-          <td className="px-6 py-4">
-            {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-2025 LibreWeddingPlanner contributors*/
+/* Copyright (C) 2024 Manuel Bustillo*/
 
 import { Inter, Lusitana, Gloria_Hallelujah} from 'next/font/google';
  

app/ui/groups/table.tsx

@@ -1,110 +0,0 @@
-/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
-
-'use client';
-
-import { AbstractApi } from '@/app/api/abstract-api';
-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, 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={() => {
-        if (window.confirm(`Are you sure you want to delete guest "${group.name}"?`)) {
-          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 (
-    <>
-      <TreeTable value={nodes} rowClassName={rowClassName} className='py-4'>
-        <Column expander field="name" header="Name" className='w-2/5' />
-        <Column field="color" header="Color" bodyClassName="text-sm" />
-        <Column field="confirmed" header="Confirmed" bodyClassName="text-sm" />
-        <Column field="tentative" header="Tentative" bodyClassName="text-sm" />
-        <Column field="pending" header="Pending" bodyClassName="text-sm" />
-        <Column field="declined" header="Declined" bodyClassName="text-sm" />
-        <Column field="considered" header="Considered" bodyClassName="text-sm" />
-        <Column field="total" header="Total" bodyClassName="text-sm" />
-        <Column field="actions" header="Actions" />
-      </TreeTable>
-    </>
-  )
-}

app/ui/guests/affinity-groups-tree.tsx

@@ -0,0 +1,65 @@
+/* Copyright (C) 2024 Manuel Bustillo*/
+
+'use client'
+
+import React, { useState, useEffect, Suspense } from 'react';
+import { Tree } from 'primereact/tree';
+import { PrimeIcons } from 'primereact/api';
+import { debug } from 'console';
+import { Group } from '@/app/lib/definitions';
+
+export default function AffinityGroupsTree() {
+    const [nodes, setNodes] = useState([]);
+
+    const groupToNode = (group: Group): any => {
+        return({
+            key: group.id,
+            label: `${group.name} (${group.guest_count})`,
+            icon: group.icon,
+            children: group.children.map((child) => groupToNode(child)),
+            className: "px-4",
+        })
+    }
+
+    const parseNode = (record: any, included: any[]): Group => {
+        if (!record.attributes) {
+            record = included.find((a) => a.id === record.id);
+        }
+        
+        const children: Group[] = (record?.relationships?.children?.data || []).map((child: any) => {
+            return (parseNode(child, included));
+        });
+
+        const children_guest_count: number = children.reduce((acc: number, child: Group) => acc + child.guest_count, 0);
+
+        return ({
+            id: record.id,
+            name: record.attributes.name,
+            guest_count: record.attributes.guest_count + children_guest_count,
+            icon: record.attributes.icon,
+            children: children,
+        })
+    }
+
+
+    useEffect(() => {
+        if (nodes.length > 0) {
+            return;
+        }
+        fetch("/api/groups.json")
+            .then((response) => response.json())
+            .then((data) => {
+                setNodes(data.data.map((record: any) => {
+                    return (groupToNode(parseNode(record, data.included)));
+                }))
+            });
+    });
+
+    return (
+        <div className="card flex justify-content-center">
+            <Suspense>
+                <Tree value={nodes} dragdropScope="affinity-groups" onDragDrop={(e) => setNodes(e.value as any)} className="w-full md:w-30rem" />
+            </Suspense>
+        </div>
+    )
+}

app/ui/guests/breadcrumbs.tsx

@@ -0,0 +1,38 @@
+/* Copyright (C) 2024 Manuel Bustillo*/
+
+import { clsx } from 'clsx';
+import Link from 'next/link';
+import { lusitana } from '@/app/ui/fonts';
+
+interface Breadcrumb {
+  label: string;
+  href: string;
+  active?: boolean;
+}
+
+export default function Breadcrumbs({
+  breadcrumbs,
+}: {
+  breadcrumbs: Breadcrumb[];
+}) {
+  return (
+    <nav aria-label="Breadcrumb" className="mb-6 block">
+      <ol className={clsx(lusitana.className, 'flex text-xl md:text-2xl')}>
+        {breadcrumbs.map((breadcrumb, index) => (
+          <li
+            key={breadcrumb.href}
+            aria-current={breadcrumb.active}
+            className={clsx(
+              breadcrumb.active ? 'text-gray-900' : 'text-gray-500',
+            )}
+          >
+            <Link href={breadcrumb.href}>{breadcrumb.label}</Link>
+            {index < breadcrumbs.length - 1 ? (
+              <span className="mx-3 inline-block">/</span>
+            ) : null}
+          </li>
+        ))}
+      </ol>
+    </nav>
+  );
+}

app/ui/guests/buttons.tsx

@@ -0,0 +1,38 @@
+/* Copyright (C) 2024 Manuel Bustillo*/
+
+import { PencilIcon, PlusIcon, TrashIcon } from '@heroicons/react/24/outline';
+import Link from 'next/link';
+
+export function CreateInvoice() {
+  return (
+    <Link
+      href="/dashboard/guests/create"
+      className="flex h-10 items-center rounded-lg bg-blue-600 px-4 text-sm font-medium text-white transition-colors hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
+    >
+      <span className="hidden md:block">Create Invoice</span>{' '}
+      <PlusIcon className="h-5 md:ml-4" />
+    </Link>
+  );
+}
+
+export function UpdateInvoice({ id }: { id: string }) {
+  return (
+    <Link
+      href="/dashboard/guests"
+      className="rounded-md border p-2 hover:bg-gray-100"
+    >
+      <PencilIcon className="w-5" />
+    </Link>
+  );
+}
+
+export function DeleteInvoice({ id }: { id: string }) {
+  return (
+    <>
+      <button className="rounded-md border p-2 hover:bg-gray-100">
+        <span className="sr-only">Delete</span>
+        <TrashIcon className="w-5" />
+      </button>
+    </>
+  );
+}

app/ui/guests/create-form.tsx

@@ -0,0 +1,114 @@
+/* Copyright (C) 2024 Manuel Bustillo*/
+
+import { CustomerField } from '@/app/lib/definitions';
+import Link from 'next/link';
+import {
+  CheckIcon,
+  ClockIcon,
+  CurrencyDollarIcon,
+  UserCircleIcon,
+} from '@heroicons/react/24/outline';
+import { Button } from '@/app/ui/button';
+
+export default function Form({ customers }: { customers: CustomerField[] }) {
+  return (
+    <form>
+      <div className="rounded-md bg-gray-50 p-4 md:p-6">
+        {/* Customer Name */}
+        <div className="mb-4">
+          <label htmlFor="customer" className="mb-2 block text-sm font-medium">
+            Choose customer
+          </label>
+          <div className="relative">
+            <select
+              id="customer"
+              name="customerId"
+              className="peer block w-full cursor-pointer rounded-md border border-gray-200 py-2 pl-10 text-sm outline-2 placeholder:text-gray-500"
+              defaultValue=""
+            >
+              <option value="" disabled>
+                Select a customer
+              </option>
+              {customers.map((customer) => (
+                <option key={customer.id} value={customer.id}>
+                  {customer.name}
+                </option>
+              ))}
+            </select>
+            <UserCircleIcon className="pointer-events-none absolute left-3 top-1/2 h-[18px] w-[18px] -translate-y-1/2 text-gray-500" />
+          </div>
+        </div>
+
+        {/* Invoice Amount */}
+        <div className="mb-4">
+          <label htmlFor="amount" className="mb-2 block text-sm font-medium">
+            Choose an amount
+          </label>
+          <div className="relative mt-2 rounded-md">
+            <div className="relative">
+              <input
+                id="amount"
+                name="amount"
+                type="number"
+                step="0.01"
+                placeholder="Enter USD amount"
+                className="peer block w-full rounded-md border border-gray-200 py-2 pl-10 text-sm outline-2 placeholder:text-gray-500"
+              />
+              <CurrencyDollarIcon className="pointer-events-none absolute left-3 top-1/2 h-[18px] w-[18px] -translate-y-1/2 text-gray-500 peer-focus:text-gray-900" />
+            </div>
+          </div>
+        </div>
+
+        {/* Invoice Status */}
+        <fieldset>
+          <legend className="mb-2 block text-sm font-medium">
+            Set the invoice status
+          </legend>
+          <div className="rounded-md border border-gray-200 bg-white px-[14px] py-3">
+            <div className="flex gap-4">
+              <div className="flex items-center">
+                <input
+                  id="pending"
+                  name="status"
+                  type="radio"
+                  value="pending"
+                  className="h-4 w-4 cursor-pointer border-gray-300 bg-gray-100 text-gray-600 focus:ring-2"
+                />
+                <label
+                  htmlFor="pending"
+                  className="ml-2 flex cursor-pointer items-center gap-1.5 rounded-full bg-gray-100 px-3 py-1.5 text-xs font-medium text-gray-600"
+                >
+                  Pending <ClockIcon className="h-4 w-4" />
+                </label>
+              </div>
+              <div className="flex items-center">
+                <input
+                  id="paid"
+                  name="status"
+                  type="radio"
+                  value="paid"
+                  className="h-4 w-4 cursor-pointer border-gray-300 bg-gray-100 text-gray-600 focus:ring-2"
+                />
+                <label
+                  htmlFor="paid"
+                  className="ml-2 flex cursor-pointer items-center gap-1.5 rounded-full bg-green-500 px-3 py-1.5 text-xs font-medium text-white"
+                >
+                  Paid <CheckIcon className="h-4 w-4" />
+                </label>
+              </div>
+            </div>
+          </div>
+        </fieldset>
+      </div>
+      <div className="mt-6 flex justify-end gap-4">
+        <Link
+          href="/dashboard/guests"
+          className="flex h-10 items-center rounded-lg bg-gray-100 px-4 text-sm font-medium text-gray-600 transition-colors hover:bg-gray-200"
+        >
+          Cancel
+        </Link>
+        <Button type="submit">Create Invoice</Button>
+      </div>
+    </form>
+  );
+}

app/ui/guests/edit-form.tsx

@@ -0,0 +1,125 @@
+/* Copyright (C) 2024 Manuel Bustillo*/
+
+'use client';
+
+import { CustomerField, InvoiceForm } from '@/app/lib/definitions';
+import {
+  CheckIcon,
+  ClockIcon,
+  CurrencyDollarIcon,
+  UserCircleIcon,
+} from '@heroicons/react/24/outline';
+import Link from 'next/link';
+import { Button } from '@/app/ui/button';
+
+export default function EditInvoiceForm({
+  invoice,
+  customers,
+}: {
+  invoice: InvoiceForm;
+  customers: CustomerField[];
+}) {
+  return (
+    <form>
+      <div className="rounded-md bg-gray-50 p-4 md:p-6">
+        {/* Customer Name */}
+        <div className="mb-4">
+          <label htmlFor="customer" className="mb-2 block text-sm font-medium">
+            Choose customer
+          </label>
+          <div className="relative">
+            <select
+              id="customer"
+              name="customerId"
+              className="peer block w-full cursor-pointer rounded-md border border-gray-200 py-2 pl-10 text-sm outline-2 placeholder:text-gray-500"
+              defaultValue={invoice.customer_id}
+            >
+              <option value="" disabled>
+                Select a customer
+              </option>
+              {customers.map((customer) => (
+                <option key={customer.id} value={customer.id}>
+                  {customer.name}
+                </option>
+              ))}
+            </select>
+            <UserCircleIcon className="pointer-events-none absolute left-3 top-1/2 h-[18px] w-[18px] -translate-y-1/2 text-gray-500" />
+          </div>
+        </div>
+
+        {/* Invoice Amount */}
+        <div className="mb-4">
+          <label htmlFor="amount" className="mb-2 block text-sm font-medium">
+            Choose an amount
+          </label>
+          <div className="relative mt-2 rounded-md">
+            <div className="relative">
+              <input
+                id="amount"
+                name="amount"
+                type="number"
+                step="0.01"
+                defaultValue={invoice.amount}
+                placeholder="Enter USD amount"
+                className="peer block w-full rounded-md border border-gray-200 py-2 pl-10 text-sm outline-2 placeholder:text-gray-500"
+              />
+              <CurrencyDollarIcon className="pointer-events-none absolute left-3 top-1/2 h-[18px] w-[18px] -translate-y-1/2 text-gray-500 peer-focus:text-gray-900" />
+            </div>
+          </div>
+        </div>
+
+        {/* Invoice Status */}
+        <fieldset>
+          <legend className="mb-2 block text-sm font-medium">
+            Set the invoice status
+          </legend>
+          <div className="rounded-md border border-gray-200 bg-white px-[14px] py-3">
+            <div className="flex gap-4">
+              <div className="flex items-center">
+                <input
+                  id="pending"
+                  name="status"
+                  type="radio"
+                  value="pending"
+                  defaultChecked={invoice.status === 'pending'}
+                  className="h-4 w-4 cursor-pointer border-gray-300 bg-gray-100 text-gray-600 focus:ring-2"
+                />
+                <label
+                  htmlFor="pending"
+                  className="ml-2 flex cursor-pointer items-center gap-1.5 rounded-full bg-gray-100 px-3 py-1.5 text-xs font-medium text-gray-600"
+                >
+                  Pending <ClockIcon className="h-4 w-4" />
+                </label>
+              </div>
+              <div className="flex items-center">
+                <input
+                  id="paid"
+                  name="status"
+                  type="radio"
+                  value="paid"
+                  defaultChecked={invoice.status === 'paid'}
+                  className="h-4 w-4 cursor-pointer border-gray-300 bg-gray-100 text-gray-600 focus:ring-2"
+                />
+                <label
+                  htmlFor="paid"
+                  className="ml-2 flex cursor-pointer items-center gap-1.5 rounded-full bg-green-500 px-3 py-1.5 text-xs font-medium text-white"
+                >
+                  Paid <CheckIcon className="h-4 w-4" />
+                </label>
+              </div>
+            </div>
+          </div>
+        </fieldset>
+      </div>
+      <div className="mt-6 flex justify-end gap-4">
+        <Link
+          href="/dashboard/guests"
+          className="flex h-10 items-center rounded-lg bg-gray-100 px-4 text-sm font-medium text-gray-600 transition-colors hover:bg-gray-200"
+        >
+          Cancel
+        </Link>
+        <Button type="submit">Edit Invoice</Button>
+      </div>
+    </form>
+  );
+}

app/ui/guests/pagination.tsx

@@ -0,0 +1,121 @@
+/* Copyright (C) 2024 Manuel Bustillo*/
+
+'use client';
+
+import { ArrowLeftIcon, ArrowRightIcon } from '@heroicons/react/24/outline';
+import clsx from 'clsx';
+import Link from 'next/link';
+import { generatePagination } from '@/app/lib/utils';
+
+export default function Pagination({ totalPages }: { totalPages: number }) {
+  // NOTE: Uncomment this code in Chapter 11
+
+  // const allPages = generatePagination(currentPage, totalPages);
+
+  return (
+    <>
+      {/*  NOTE: Uncomment this code in Chapter 11 */}
+
+      {/* <div className="inline-flex">
+        <PaginationArrow
+          direction="left"
+          href={createPageURL(currentPage - 1)}
+          isDisabled={currentPage <= 1}
+        />
+
+        <div className="flex -space-x-px">
+          {allPages.map((page, index) => {
+            let position: 'first' | 'last' | 'single' | 'middle' | undefined;
+
+            if (index === 0) position = 'first';
+            if (index === allPages.length - 1) position = 'last';
+            if (allPages.length === 1) position = 'single';
+            if (page === '...') position = 'middle';
+
+            return (
+              <PaginationNumber
+                key={page}
+                href={createPageURL(page)}
+                page={page}
+                position={position}
+                isActive={currentPage === page}
+              />
+            );
+          })}
+        </div>
+
+        <PaginationArrow
+          direction="right"
+          href={createPageURL(currentPage + 1)}
+          isDisabled={currentPage >= totalPages}
+        />
+      </div> */}
+    </>
+  );
+}
+
+function PaginationNumber({
+  page,
+  href,
+  isActive,
+  position,
+}: {
+  page: number | string;
+  href: string;
+  position?: 'first' | 'last' | 'middle' | 'single';
+  isActive: boolean;
+}) {
+  const className = clsx(
+    'flex h-10 w-10 items-center justify-center text-sm border',
+    {
+      'rounded-l-md': position === 'first' || position === 'single',
+      'rounded-r-md': position === 'last' || position === 'single',
+      'z-10 bg-blue-600 border-blue-600 text-white': isActive,
+      'hover:bg-gray-100': !isActive && position !== 'middle',
+      'text-gray-300': position === 'middle',
+    },
+  );
+
+  return isActive || position === 'middle' ? (
+    <div className={className}>{page}</div>
+  ) : (
+    <Link href={href} className={className}>
+      {page}
+    </Link>
+  );
+}
+
+function PaginationArrow({
+  href,
+  direction,
+  isDisabled,
+}: {
+  href: string;
+  direction: 'left' | 'right';
+  isDisabled?: boolean;
+}) {
+  const className = clsx(
+    'flex h-10 w-10 items-center justify-center rounded-md border',
+    {
+      'pointer-events-none text-gray-300': isDisabled,
+      'hover:bg-gray-100': !isDisabled,
+      'mr-2 md:mr-4': direction === 'left',
+      'ml-2 md:ml-4': direction === 'right',
+    },
+  );
+
+  const icon =
+    direction === 'left' ? (
+      <ArrowLeftIcon className="w-4" />
+    ) : (
+      <ArrowRightIcon className="w-4" />
+    );
+
+  return isDisabled ? (
+    <div className={className}>{icon}</div>
+  ) : (
+    <Link className={className} href={href}>
+      {icon}
+    </Link>
+  );
+}

app/ui/guests/skeleton-row.tsx

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

app/ui/guests/status.tsx

@@ -0,0 +1,31 @@
+/* Copyright (C) 2024 Manuel Bustillo*/
+
+import { CheckIcon, ClockIcon } from '@heroicons/react/24/outline';
+import clsx from 'clsx';
+
+export default function gueststatus({ status }: { status: string }) {
+  return (
+    <span
+      className={clsx(
+        'inline-flex items-center rounded-full px-2 py-1 text-xs',
+        {
+          'bg-gray-100 text-gray-500': status === 'pending',
+          'bg-green-500 text-white': status === 'paid',
+        },
+      )}
+    >
+      {status === 'pending' ? (
+        <>
+          Pending
+          <ClockIcon className="ml-1 w-4 text-gray-500" />
+        </>
+      ) : null}
+      {status === 'paid' ? (
+        <>
+          Paid
+          <CheckIcon className="ml-1 w-4 text-white" />
+        </>
+      ) : null}
+    </span>
+  );
+}

app/ui/guests/table.tsx

@@ -1,45 +1,103 @@
-/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
+/* Copyright (C) 2024 Manuel Bustillo*/
 
 'use client';
 
-import { AbstractApi } from '@/app/api/abstract-api';
-import { Guest, GuestSerializer } from '@/app/lib/guest';
-import { PencilIcon, TrashIcon } from '@heroicons/react/24/outline';
 import clsx from 'clsx';
-import TableOfContents from '../components/table-of-contents';
+import React, { useState, useEffect } from 'react';
+import { Guest } from '@/app/lib/definitions';
+import { getCsrfToken } from '@/app/lib/utils';
 
-export default function guestsTable({ guests, onUpdate, onEdit }: {
+export default function guestsTable() {
-  guests: Guest[],
+  const [guests, setGuests] = useState<Array<Guest>>([]);
-  onUpdate: () => void,
-  onEdit: (guest: Guest) => void
-}) {
 
-  const api = new AbstractApi<Guest>();
+  function loadGuests() {
-  const serializer = new GuestSerializer();
+    fetch("/api/guests.json")
+      .then((response) => response.json())
+      .then((data) => {
+        setGuests(data.data.map((record: any) => {
+          return ({
+            id: record.id,
+            name: record.attributes.name,
+            email: record.attributes.email,
+            group_name: record.attributes.group_name,
+            status: record.attributes.status
+          });
+        }));
+      }, (error) => {
+        return [];
+      });
+  };
+
+  const handleInviteGuest = (e: React.MouseEvent<HTMLElement>) => handleGuestChange(e, 'invited');
+  const handleConfirmGuest = (e: React.MouseEvent<HTMLElement>) => handleGuestChange(e, 'confirmed');
+  const handleDeclineGuest = (e: React.MouseEvent<HTMLElement>) => handleGuestChange(e, 'declined');
+  const handleTentativeGuest = (e: React.MouseEvent<HTMLElement>) => handleGuestChange(e, 'tentative');
+
+  const handleGuestChange = (e: React.MouseEvent<HTMLElement>, status:string) => {
+    fetch("/api/guests/bulk_update.json",
+      {
+        method: 'POST',
+        body: JSON.stringify({ properties: { status: status }, guest_ids: [e.currentTarget.getAttribute('data-guest-id')] }),
+        headers: {
+          'Content-Type': 'application/json',
+          'X-CSRF-TOKEN': getCsrfToken(),
+        }
+      })
+      .then(() => loadGuests())
+      .catch((error) => console.error(error));
+  }
+
+  guests.length === 0 && loadGuests();
+  const ctaClassName = "text-white py-1 px-2 mx-1 rounded";
 
   return (
-    <TableOfContents
+    <div className="w-full relative overflow-x-auto shadow-md sm:rounded-lg">
-      headers={['Name', 'Group', 'Status', 'Actions']}
+      <table className="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
-      caption='Guests'
+        <caption className="p-5 text-lg font-semibold text-left rtl:text-right text-gray-900 bg-white dark:text-white dark:bg-gray-800">
-      elements={guests}
+          Guests
-      rowRender={(guest) => (
+          <p className="mt-1 text-sm font-normal text-gray-500 dark:text-gray-400">
+            There are {guests.length} guests in the list
+          </p>
+        </caption>
+        <thead className="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
+          <tr>
+            <th scope="col" className="px-6 py-3">
+              Name
+            </th>
+            <th scope="col" className="px-6 py-3">
+              Email
+            </th>
+            <th scope="col" className="px-6 py-3">
+              Group
+            </th>
+            <th scope="col" className="px-6 py-3">
+              Status
+            </th>
+            <th>Actions</th>
+          </tr>
+        </thead>
+        <tbody>
+          {guests.map((guest) => (
             <tr key={guest.id} className="bg-white border-b odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800">
-          <td scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
+              <th scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                 {guest.name}
+              </th>
+              <td className="px-6 py-4">
+                {guest.email}
               </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">
                   <span className={clsx(
                     'flex w-2.5 h-2.5 rounded-full me-1.5 flex-shrink-0',
                     {
-                  'bg-gray-400': guest.status === 'considered',
+                      'bg-gray-400': guest.status === 'Considered',
-                  'bg-blue-400': guest.status === 'invited',
+                      'bg-blue-400': guest.status === 'Invited',
-                  'bg-green-600': guest.status === 'confirmed',
+                      'bg-green-600': guest.status === 'Confirmed',
-                  'bg-red-400': guest.status === 'declined',
+                      'bg-red-400': guest.status === 'Declined',
-                  'bg-yellow-400': guest.status === 'tentative',
+                      'bg-yellow-400': guest.status === 'Tentative',
                     }
                   )}>
                   </span>
@@ -47,18 +105,21 @@ export default function guestsTable({ guests, onUpdate, onEdit }: {
                 </span>
               </td>
               <td>
-            <div className="flex flex-row items-center">
+                {guest.status === 'Considered' && (<button data-guest-id={guest.id} onClick={handleInviteGuest} className={`${ctaClassName} bg-blue-400 hover:bg-blue-600`}>
-              <TrashIcon className='size-6 cursor-pointer' onClick={() => {
+                  Invite
-                if (window.confirm(`Are you sure you want to delete guest "${guest.name}"?`)) {
+                </button>)}
-                  api.destroy(serializer, guest, onUpdate)
+                {(guest.status === 'Invited' || guest.status === 'Tentative') && (
-                }
+                  <>
-              }}
+                    <button data-guest-id={guest.id} onClick={handleConfirmGuest} className={`${ctaClassName} bg-green-500 hover:bg-green-600`}>Confirm</button>
-              />
+                    {guest.status != 'Tentative' && <button data-guest-id={guest.id} onClick={handleDeclineGuest} className={`${ctaClassName} bg-yellow-500 hover:bg-yellow-700`}>Tentative</button>}
-              <PencilIcon className='size-6 cursor-pointer' onClick={() => onEdit(guest)} />
+                    <button data-guest-id={guest.id} onClick={handleDeclineGuest} className={`${ctaClassName} bg-red-500 hover:bg-red-600`}>Decline</button>
-            </div>
+                  </>
+                )}
               </td>
             </tr>
-      )}
+          ))}
-    />
+        </tbody>
+      </table>
+    </div>
   );
 }

app/ui/invitations/board.tsx

@@ -1,218 +0,0 @@
-/* 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 { getSlug } from "@/app/lib/utils";
-import { draggable, dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
-import { LinkIcon, TrashIcon } from "@heroicons/react/24/outline";
-import { useEffect, useRef } from "react";
-import { useState } from "react";
-import { classNames } from "../components/button";
-import { Toast } from "primereact/toast";
-
-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();
-
-  const iconClassName = "w-5 h-5 text-white absolute top-2 opacity-0 group-hover:opacity-100 cursor-pointer";
-
-  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" }}
-    >
-      <LinkIcon
-        className={`${iconClassName} right-8`}
-        onClick={() => {
-            navigator.clipboard.writeText(`https://${window.location.host}/${getSlug()}/site/invitation/${invitation.id}`);
-        }}
-      />
-      <TrashIcon
-        className={`${iconClassName} right-2`}
-        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 toast = useRef<Toast>(null);
-  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]);
-    });
-  }
-
-  function handleDownloadQrCodes() {
-    api.post(serializer, 'email', () => {
-      toast.current?.show({
-        severity: 'success',
-        summary: 'Email scheduled',
-        detail: 'A document with the QR codes will be sent to the organizer\'s email.'
-    });
-    })
-  }
-
-  return (
-    <div className="flex h-screen">
-      {/* Left Column: Guests */}
-      <Toast ref={toast} />
-      <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={classNames('primary')}
-        >
-          Create New Invitation
-        </button>
-
-        <button
-          onClick={handleDownloadQrCodes}
-          className={classNames('primary')}
-        >
-          Send QR codes via email
-        </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/login-form.tsx

@@ -0,0 +1,69 @@
+/* Copyright (C) 2024 Manuel Bustillo*/
+
+import { lusitana } from '@/app/ui/fonts';
+import {
+  AtSymbolIcon,
+  KeyIcon,
+  ExclamationCircleIcon,
+} from '@heroicons/react/24/outline';
+import { ArrowRightIcon } from '@heroicons/react/20/solid';
+import { Button } from './button';
+
+export default function LoginForm() {
+  return (
+    <form className="space-y-3">
+      <div className="flex-1 rounded-lg bg-gray-50 px-6 pb-4 pt-8">
+        <h1 className={`${lusitana.className} mb-3 text-2xl`}>
+          Please log in to continue.
+        </h1>
+        <div className="w-full">
+          <div>
+            <label
+              className="mb-3 mt-5 block text-xs font-medium text-gray-900"
+              htmlFor="email"
+            >
+              Email
+            </label>
+            <div className="relative">
+              <input
+                className="peer block w-full rounded-md border border-gray-200 py-[9px] pl-10 text-sm outline-2 placeholder:text-gray-500"
+                id="email"
+                type="email"
+                name="email"
+                placeholder="Enter your email address"
+                required
+              />
+              <AtSymbolIcon className="pointer-events-none absolute left-3 top-1/2 h-[18px] w-[18px] -translate-y-1/2 text-gray-500 peer-focus:text-gray-900" />
+            </div>
+          </div>
+          <div className="mt-4">
+            <label
+              className="mb-3 mt-5 block text-xs font-medium text-gray-900"
+              htmlFor="password"
+            >
+              Password
+            </label>
+            <div className="relative">
+              <input
+                className="peer block w-full rounded-md border border-gray-200 py-[9px] pl-10 text-sm outline-2 placeholder:text-gray-500"
+                id="password"
+                type="password"
+                name="password"
+                placeholder="Enter password"
+                required
+                minLength={6}
+              />
+              <KeyIcon className="pointer-events-none absolute left-3 top-1/2 h-[18px] w-[18px] -translate-y-1/2 text-gray-500 peer-focus:text-gray-900" />
+            </div>
+          </div>
+        </div>
+        <Button className="mt-4 w-full">
+          Log in <ArrowRightIcon className="ml-auto h-5 w-5 text-gray-50" />
+        </Button>
+        <div className="flex h-8 items-end space-x-1">
+          {/* Add form errors here */}
+        </div>
+      </div>
+    </form>
+  );
+}

app/ui/search.tsx

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

app/ui/skeleton.tsx

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

package.json

@@ -6,39 +6,31 @@
     "start": "next start"
   },
   "dependencies": {
-    "@atlaskit/pragmatic-drag-and-drop": "^1.7.0",
     "@heroicons/react": "^2.1.4",
     "@tailwindcss/forms": "^0.5.7",
-    "@tiptap/pm": "^2.14.0",
+    "autoprefixer": "10.4.20",
-    "@tiptap/react": "^2.14.0",
+    "bcrypt": "^5.1.1",
-    "@tiptap/starter-kit": "^2.14.0",
-    "autoprefixer": "10.4.21",
-    "bcrypt": "^6.0.0",
     "clsx": "^2.1.1",
-    "dompurify": "^3.2.6",
+    "next": "15.0.2",
-    "next": "15.4.5",
+    "next-auth": "5.0.0-beta.25",
-    "next-auth": "5.0.0-beta.29",
+    "postcss": "8.4.47",
-    "postcss": "8.5.6",
     "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.17",
+    "tailwindcss": "3.4.14",
-    "typescript": "5.8.3",
+    "typescript": "5.6.3",
     "use-debounce": "^10.0.1",
-    "uuid": "11.1.0",
+    "zod": "^3.23.8"
-    "zod": "^4.0.0"
   },
   "devDependencies": {
-    "@playwright/test": "^1.52.0",
+    "@playwright/test": "^1.46.0",
     "@types/bcrypt": "^5.0.2",
-    "@types/node": "24.3.1",
+    "@types/node": "22.8.6",
-    "@types/react": "18.3.23",
+    "@types/react": "18.3.5",
-    "@types/react-dom": "18.3.7",
+    "@types/react-dom": "18.3.1"
-    "wait-on": "^8.0.3"
   },
   "engines": {
-    "node": ">=23.0.0"
+    "node": ">=20.12.0"
-  },
+  }
-  "packageManager": "pnpm@10.13.1+sha512.37ebf1a5c7a30d5fabe0c5df44ee8da4c965ca0c5af3dbab28c3a1681b70a256218d05c81c9c0dcf767ef6b8551eb5b960042b9ed4300c59242336377e01cfad"
 }

playwright.config.ts

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

tests/groups.spec.ts

@@ -1,82 +0,0 @@
-import { test, expect, Page } from '@playwright/test'
-import mockGroupsAPI from './mocks/groups';
-import mockGuestsAPI from './mocks/guests';
-
-test('should allow CRUD on groups', async ({ page }) => {
-  await mockGuestsAPI({ page });
-  await mockGroupsAPI({ page });
-
-  await page.goto('/default/dashboard/guests');
-  await page.getByRole('tab', { name: 'Groups' }).click();
-
-  await expect(page.getByRole('button', { name: 'Add new' })).toBeVisible();
-  await expect(page.getByRole('button', { name: 'Reset affinities' })).toBeVisible();
-
-
-  // List all groups
-  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);
-
-  // Add a new group
-  await page.getByRole('button', { name: 'Add new' }).click();
-  const dialog = page.getByRole('dialog');
-  await expect(dialog).toBeVisible();
-
-  await dialog.getByLabel('Name').fill("Pam's friends");
-  await dialog.getByRole('button', { name: 'Create' }).click();
-
-  await expect(page.getByRole('row')).toHaveCount(4); // 1 header row + 3 data rows
-
-  await expect(dialog).not.toBeVisible();
-
-  await expect(page.getByRole('row').nth(1).getByRole('cell').nth(0)).toContainText('Pam\'s friends');
-  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('0');
-  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('0');
-  await expect(page.getByRole('row').nth(1).getByRole('cell').nth(7)).toHaveText('0');
-  await expect(page.getByRole('row').nth(1).locator('svg:visible')).toHaveCount(3);
-
-  // Modify the newly added group
-  await page.getByRole('row').nth(1).locator('svg').nth(2).click(); // Click edit icon
-  await expect(dialog).toBeVisible();
-  await expect(dialog.getByLabel('Name')).toHaveValue("Pam's friends");
-  await dialog.getByLabel('Name').fill('Pam\'s best friends');
-  await dialog.getByRole('button', { name: 'Update' }).click();
-
-  await expect(page.getByRole('row').nth(1).getByRole('cell').nth(0)).toContainText('Pam\'s best friends');
-
-  // Delete the newly added group
-  page.on('dialog', dialog => dialog.accept());
-
-  await page.getByRole('row').nth(1).locator('svg').nth(1).click(); // Click delete icon
-  await expect(page.getByRole('row')).toHaveCount(3); // 1 header row + 2 data rows
-});

tests/guests.spec.ts

@@ -1,76 +1,7 @@
-import { expect, test } from '@playwright/test';
+import { test, expect } from '@playwright/test'
-import mockGroupsAPI from './mocks/groups';
-import mockGuestsAPI from './mocks/guests';
  
-test('should allow CRUD on guests', async ({ page }) => {
+test('should navigate to the guests page', async ({ page }) => {
-  await mockGuestsAPI({ page });
+  await page.goto('/dashboard/guests')
-  await mockGroupsAPI({ page });
 
-  await page.goto('/default/dashboard/guests');
+  await expect(page.getByRole('heading', { name: 'Guests' })).toContainText('Guests')
-
+})
-  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();
-
-  // List all guests
-  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: "Pam's family" })).toBeVisible();
-  await expect(page.getByRole('row').nth(1).getByRole('cell', { name: 'Tentative' })).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: "Pam's work" })).toBeVisible();
-  await expect(page.getByRole('row').nth(2).getByRole('cell', { name: 'Invited' })).toBeVisible();
-  await expect(page.getByRole('row').nth(2).locator('svg')).toHaveCount(2);
-
-  // Add a new guest
-  await page.getByRole('button', { name: 'Add new' }).click();
-
-  await page.getByRole('dialog').getByLabel('Name').fill('John Snow');
-
-  await page.locator('#group').click();
-  await page.getByRole('option', { name: "Pam's work" }).click();
-
-  await page.locator('#status').click();
-  await page.getByRole('option', { name: 'Invited' }).click();
-
-  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: "Pam\'s 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);
-
-  // Edit the just-added John Snow
-  await page.getByRole('row').nth(1).locator('svg').nth(1).click(); // Click edit icon
-
-  const dialog = page.getByRole('dialog');
-  await expect(dialog.getByLabel('Name')).toHaveValue('John Snow');
-  await dialog.getByLabel('Name').fill('John Fire');
-
-  await dialog.locator('#group').click();
-  await page.getByRole('option', { name: "Pam's family" }).click();
-
-  await dialog.locator('#status').click();
-  await page.getByRole('option', { name: 'Declined' }).click();
-
-  await dialog.getByRole('button', { name: 'Update' }).click();
-
-  await expect(page.getByRole('row').nth(1).getByRole('cell', { name: 'John Fire' })).toBeVisible();
-  await expect(page.getByRole('row').nth(1).getByRole('cell', { name: 'Pam\'s Family' })).toBeVisible();
-  await expect(page.getByRole('row').nth(1).getByRole('cell', { name: 'Declined' })).toBeVisible();
-
-  await expect(page.getByText('There are 3 elements in the list')).toBeVisible();
-
-  // Delete John Fire
-  page.on('dialog', dialog => dialog.accept());
-  await page.getByRole('row').nth(1).locator('svg').nth(0).click(); // Click delete icon
-  await expect(page.getByText('There are 2 elements in the list')).toBeVisible();
-});

tests/mocks/groups.tsx

@@ -1,86 +0,0 @@
-import { Page } from "@playwright/test";
-
-export default async function mockGroupsAPI({ page }: { page: Page }): Promise<void> {
-  page.route('*/**/api/default/groups', async route => {
-    if (route.request().method() === 'GET') {
-      const json = [
-        {
-          "id": "ee44ffb9-1147-4842-a378-9eaeb0f0871a",
-          "name": "Pam's family",
-          "icon": "pi pi-users",
-          "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": null,
-          "color": "#00ff00",
-          "attendance": {
-            "total": 2,
-            "considered": 0,
-            "invited": 0,
-            "confirmed": 0,
-            "declined": 0,
-            "tentative": 2
-          }
-        },
-      ];
-
-      await route.fulfill({ json })
-    } else if (route.request().method() === 'POST') {
-      const json = {
-        "id": "4d55bc34-6f42-4e2e-82a1-71ae32da2466",
-        "name": "Pam's friends",
-        "icon": "pi pi-desktop",
-        "parent_id": null,
-        "color": "#0000ff",
-        "attendance": {
-          "total": 0,
-          "considered": 0,
-          "invited": 0,
-          "confirmed": 0,
-          "declined": 0,
-          "tentative": 0
-        }
-      }
-
-      await route.fulfill({ json })
-    }
-  })
-
-  page.route("*/**/api/default/groups/*", async route => {
-    if (route.request().method() === 'PUT') {
-      const json = {
-        "id": "4d55bc34-6f42-4e2e-82a1-71ae32da2466",
-        "name": "Pam's best friends",
-        "icon": "pi pi-desktop",
-        "parent_id": null,
-        "color": "#0000ff",
-        "attendance": {
-          "total": 0,
-          "considered": 0,
-          "invited": 0,
-          "confirmed": 0,
-          "declined": 0,
-          "tentative": 0
-        }
-      }
-
-      await route.fulfill({ json });
-    } else if (route.request().method() === 'DELETE') {
-      const json = {}
-
-      await route.fulfill({ json });
-    }
-  });
-}

tests/mocks/guests.tsx

@@ -1,61 +0,0 @@
-import { Page } from "@playwright/test";
-
-export default async function mockGuestsAPI({ page }: { page: Page }): Promise<void> {
-  page.route('*/**/api/default/guests', async route => {
-    if (route.request().method() === 'GET') {
-      const json = [
-        {
-          "id": "f4a09c28-40ea-4553-90a5-96935a59cac6",
-          "status": "tentative",
-          "name": "Kristofer Rohan DVM",
-          "group": {
-            "id": "ee44ffb9-1147-4842-a378-9eaeb0f0871a",
-            "name": "Pam's family",
-          }
-        },
-        {
-          "id": "bd585c40-0937-4cde-960a-bb23acfd6f18",
-          "status": "invited",
-          "name": "Olevia Quigley Jr.",
-          "group": {
-            "id": "c8bda6ca-d8af-4bb8-b2bf-e6ec1c21b1e6",
-            "name": "Pam's work",
-          }
-        },
-      ];
-
-      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": "c8bda6ca-d8af-4bb8-b2bf-e6ec1c21b1e6",
-          "name": "Pam's work",
-        }
-      };
-
-      await route.fulfill({ json });
-    }
-  })
-
-  page.route("*/**/api/default/guests/*", async route => {
-    if (route.request().method() === 'PUT') {
-      const json = {
-        "id": "ff58aa2d-643d-4c29-be9c-50e10ae6853c",
-        "name": "John Fire",
-        "status": "declined",
-        "group": {
-          "id": "ee44ffb9-1147-4842-a378-9eaeb0f0871a",
-          "name": "Pam's family",
-        }
-      }
-      await route.fulfill({ json });
-
-    } else if (route.request().method() === 'DELETE') {
-      const json = {}
-      await route.fulfill({ json });
-    }
-  });
-}