.github/workflows/playwright.yml

@@ -9,7 +9,6 @@ concurrency:
   cancel-in-progress: true
 jobs:
   test:
-    if: false
     timeout-minutes: 60
     runs-on: ubuntu-latest
     container:

.nvmrc

@@ -1 +1 @@
-23.3.0
+23.2.0

app/[slug]/page.tsx

@@ -1,30 +0,0 @@
-/* Copyright (C) 2024 Manuel Bustillo*/
-
-'use client'; 
-import Link from 'next/link';
-import styles from '@/app/ui/home.module.css';
-import LoginForm from '@/app/ui/components/login-form';
-
-
-
-export default async function Page({ params }: { params: Promise<{ slug: string }> }) {
-
-  localStorage.setItem('slug', (await params).slug)
-  return (
-    <main className="flex min-h-screen flex-col p-6">
-      <div className="flex flex-row">
-        <div className="w-1/2">
-
-          Already have an account? Sign in
-
-          <LoginForm />
-        </div>
-
-        <div className="w-1/2">
-          Don't have an account? Register now!
-        </div>
-      </div>
-
-    </main>
-  );
-}

app/api/authentication.tsx

@@ -1,36 +0,0 @@
-/* Copyright (C) 2024 Manuel Bustillo*/
-
-import { getCsrfToken, getSlug } from '@/app/lib/utils';
-import { User } from '@/app/lib/definitions';
-
-export function login({ email, password, onLogin }: { email: string, password: string, onLogin: (user: User) => void }) {
-  console.log(email, password);
-  return fetch(`/api/${getSlug()}/users/sign_in`, {
-    method: 'POST',
-    body: JSON.stringify({ user: { email, password } }),
-    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));
-}

app/api/expenses.tsx

@@ -1,10 +1,10 @@
 /* Copyright (C) 2024 Manuel Bustillo*/
 
 import { Expense } from '@/app/lib/definitions';
-import { getCsrfToken, getSlug } from '@/app/lib/utils';
+import { getCsrfToken } from '@/app/lib/utils';
 
 export function loadExpenses(onLoad?: (expenses: Expense[]) => void) {
-  fetch(`/api/${getSlug()}/expenses`)
+  fetch("/api/expenses")
     .then((response) => response.json())
     .then((data) => {
       onLoad && onLoad(data.map((record: any) => {
@@ -21,7 +21,7 @@ export function loadExpenses(onLoad?: (expenses: Expense[]) => void) {
 }
 
 export function updateExpense(expense: Expense) {
-  fetch(`/api/${getSlug()}/expenses/${expense.id}`,
+  fetch(`/api/expenses/${expense.id}`,
     {
       method: 'PUT',
       body: JSON.stringify({

app/api/groups.tsx

@@ -1,10 +1,9 @@
 /* Copyright (C) 2024 Manuel Bustillo*/
 
 import { Group } from '@/app/lib/definitions';
-import { getSlug } from '../lib/utils';
 
 export function loadGroups(onLoad?: (groups: Group[]) => void) {
-  fetch(`/api/${getSlug()}/groups`)
+  fetch("/api/groups")
     .then((response) => response.json())
     .then((data) => {
       onLoad && onLoad(data.map((record: any) => {

app/api/guests.tsx

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

app/api/tableSimulations.tsx

@@ -1,10 +1,9 @@
 /* Copyright (C) 2024 Manuel Bustillo*/
 
 import { TableArrangement } from '@/app/lib/definitions';
-import { getSlug } from '../lib/utils';
 
 export function loadTableSimulations(onLoad?: (tableSimulations: TableArrangement[]) => void) {
-  fetch(`/api/${getSlug()}/tables_arrangements`)
+  fetch('/api/tables_arrangements')
     .then((response) => response.json())
     .then((data) => {
       onLoad && onLoad(data.map((record: any) => {

app/dashboard/guests/page.tsx

@@ -8,6 +8,7 @@ import { Group, Guest } from '@/app/lib/definitions';
 import { classNames } from '@/app/ui/components/button';
 import GuestFormDialog from '@/app/ui/components/guest-form-dialog';
 import GroupsTable from '@/app/ui/groups/table';
+import AffinityGroupsTree from '@/app/ui/guests/affinity-groups-tree';
 import SkeletonTable from '@/app/ui/guests/skeleton-row';
 import GuestsTable from '@/app/ui/guests/table';
 import { TabPanel, TabView } from 'primereact/tabview';
@@ -41,6 +42,8 @@ export default function Page() {
 
   return (
     <div className="w-full">
+      <AffinityGroupsTree />
+
       <TabView>
         <TabPanel header="Guests" leftIcon="pi pi-users mx-2">
           <div className="flex flex-col w-full items-center justify-between">

app/lib/definitions.ts

@@ -4,6 +4,19 @@
 // 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 Customer = {
+  id: string;
+  name: string;
+  email: string;
+  image_url: string;
+};
 
 export const guestStatuses = ['considered', 'invited', 'confirmed', 'declined', 'tentative'] as const;
 export type GuestStatus = typeof guestStatuses[number];
@@ -50,6 +63,34 @@ export type AttendanceSummary = {
   total: number;
 }
 
+export type Invoice = {
+  id: string;
+  customer_id: string;
+  amount: number;
+  date: string;
+  // 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;
@@ -61,7 +102,34 @@ export type guestsTable = {
   status: 'pending' | 'paid';
 };
 
-export type User = {
+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/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/utils.ts

@@ -1,5 +1,14 @@
 /* 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
       .split("; ")
@@ -7,4 +16,68 @@ export const getCsrfToken = () => {
       ?.split("=")[1] || 'unknown';
 }
 
-export const getSlug = () => localStorage.getItem('slug') || 'default';
+// From https://stackoverflow.com/a/1026087/3607039
+export const capitalize = (val:string) => {
+  return String(val).charAt(0).toUpperCase() + String(val).slice(1);
+}
+
+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);
+};
+
+export const generateYAxis = (revenue: Revenue[]) => {
+  // Calculate what labels we need to display on the y-axis
+  // 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`);
+  }
+
+  return { yAxisLabels, topLabel };
+};
+
+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/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/ui/components/login-form.tsx

@@ -1,51 +0,0 @@
-/* Copyright (C) 2024 Manuel Bustillo*/
-
-'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 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(`${getSlug()}/dashboard`)
-          }
-        })}>
-        Sign in
-      </button>
-    </div>
-  )
-}

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/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/nav-links.tsx

@@ -10,14 +10,13 @@ import {
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import clsx from 'clsx';
-import { getSlug } from '@/app/lib/utils';
 
 // Map of links to display in the side navigation.
 // Depending on the size of the application, this would be stored in a database.
 const links = [
-  { name: 'Guests', href: `/${getSlug()}/dashboard/guests`, icon: UserGroupIcon },
+  { name: 'Guests', href: '/dashboard/guests', icon: UserGroupIcon },
-  { name: 'Expenses', href: `/${getSlug()}/dashboard/expenses`, icon: BanknotesIcon },
+  { name: 'Expenses', href: '/dashboard/expenses', icon: BanknotesIcon },
-  { name: 'Table distributions', href: `/${getSlug()}/dashboard/tables`, icon: RectangleGroupIcon },
+  { name: 'Table distributions', href: '/dashboard/tables', icon: RectangleGroupIcon },
 ];
 
 

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,46 +1,30 @@
 /* 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';
 
 export default function SideNav() {
-  const router = useRouter();
-
   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="/dashboard/guests"
       >
-        <div className={`${gloriaHallelujah.className} "w-32 text-white md:w-40 antialiased`}>
+        <div className={`${gloriaHallelujah.className} "w-32 text-white md:w-40 antialiased` }>
           <h1>Wedding Planner</h1>
         </div>
       </Link>
       <div className="flex grow flex-row justify-between space-x-2 md:flex-col md:space-x-0 md:space-y-2">
         <NavLinks />
         <div className="hidden h-auto w-full grow rounded-md bg-gray-50 md:block"></div>
-        <span>Logged in as {JSON.parse(localStorage.getItem('currentUser') || '{}').email}</span>
+        <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"
+            <PowerIcon className="w-6" />
-          onClick={() => {
+            <div className="hidden md:block">Sign Out</div>
-            logout({
+          </button>
-              onLogout: () => {
+        </form>
-                localStorage.clear();
-                router.push(`/${getSlug()}`);
-              }
-            });
-          }}
-        >
-          <PowerIcon className="w-6" />
-          <div className="hidden md:block">Sign Out</div>
-        </button>
       </div>
     </div>
   );

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

package.json

@@ -19,19 +19,19 @@
     "react": "19.0.0-rc-f38c22b244-20240704",
     "react-dom": "19.0.0-rc-f38c22b244-20240704",
     "tailwindcss": "3.4.15",
-    "typescript": "5.7.2",
+    "typescript": "5.6.3",
     "use-debounce": "^10.0.1",
     "zod": "^3.23.8"
   },
   "devDependencies": {
     "@playwright/test": "^1.46.0",
     "@types/bcrypt": "^5.0.2",
-    "@types/node": "22.10.1",
+    "@types/node": "22.9.0",
     "@types/react": "18.3.12",
     "@types/react-dom": "18.3.1"
   },
   "engines": {
     "node": ">=23.0.0"
   },
-  "packageManager": "pnpm@9.14.4+sha512.c8180b3fbe4e4bca02c94234717896b5529740a6cbadf19fa78254270403ea2f27d4e1d46a08a0f56c89b63dc8ebfd3ee53326da720273794e6200fcf0d184ab"
+  "packageManager": "pnpm@9.13.2+sha512.88c9c3864450350e65a33587ab801acf946d7c814ed1134da4a924f6df5a2120fd36b46aab68f7cd1d413149112d53c7db3a4136624cfd00ff1846a0c6cef48a"
 }

pnpm-lock.yaml

@@ -10,7 +10,7 @@ importers:
     dependencies:
       '@heroicons/react':
         specifier: ^2.1.4
-        version: 2.2.0(react@19.0.0-rc-f38c22b244-20240704)
+        version: 2.1.5(react@19.0.0-rc-f38c22b244-20240704)
       '@tailwindcss/forms':
         specifier: ^0.5.7
         version: 0.5.9(tailwindcss@3.4.15)
@@ -25,10 +25,10 @@ importers:
         version: 2.1.1
       next:
         specifier: 15.0.3
-        version: 15.0.3(@playwright/test@1.49.0)(react-dom@19.0.0-rc-f38c22b244-20240704(react@19.0.0-rc-f38c22b244-20240704))(react@19.0.0-rc-f38c22b244-20240704)
+        version: 15.0.3(@playwright/test@1.48.2)(react-dom@19.0.0-rc-f38c22b244-20240704(react@19.0.0-rc-f38c22b244-20240704))(react@19.0.0-rc-f38c22b244-20240704)
       next-auth:
         specifier: 5.0.0-beta.25
-        version: 5.0.0-beta.25(next@15.0.3(@playwright/test@1.49.0)(react-dom@19.0.0-rc-f38c22b244-20240704(react@19.0.0-rc-f38c22b244-20240704))(react@19.0.0-rc-f38c22b244-20240704))(react@19.0.0-rc-f38c22b244-20240704)
+        version: 5.0.0-beta.25(next@15.0.3(@playwright/test@1.48.2)(react-dom@19.0.0-rc-f38c22b244-20240704(react@19.0.0-rc-f38c22b244-20240704))(react@19.0.0-rc-f38c22b244-20240704))(react@19.0.0-rc-f38c22b244-20240704)
       postcss:
         specifier: 8.4.49
         version: 8.4.49
@@ -37,7 +37,7 @@ importers:
         version: 7.0.0
       primereact:
         specifier: ^10.8.2
-        version: 10.8.5(@types/react@18.3.12)(react-dom@19.0.0-rc-f38c22b244-20240704(react@19.0.0-rc-f38c22b244-20240704))(react@19.0.0-rc-f38c22b244-20240704)
+        version: 10.8.4(@types/react@18.3.12)(react-dom@19.0.0-rc-f38c22b244-20240704(react@19.0.0-rc-f38c22b244-20240704))(react@19.0.0-rc-f38c22b244-20240704)
       react:
         specifier: 19.0.0-rc-f38c22b244-20240704
         version: 19.0.0-rc-f38c22b244-20240704
@@ -48,8 +48,8 @@ importers:
         specifier: 3.4.15
         version: 3.4.15
       typescript:
-        specifier: 5.7.2
+        specifier: 5.6.3
-        version: 5.7.2
+        version: 5.6.3
       use-debounce:
         specifier: ^10.0.1
         version: 10.0.4(react@19.0.0-rc-f38c22b244-20240704)
@@ -59,13 +59,13 @@ importers:
     devDependencies:
       '@playwright/test':
         specifier: ^1.46.0
-        version: 1.49.0
+        version: 1.48.2
       '@types/bcrypt':
         specifier: ^5.0.2
         version: 5.0.2
       '@types/node':
-        specifier: 22.10.1
+        specifier: 22.9.0
-        version: 22.10.1
+        version: 22.9.0
       '@types/react':
         specifier: 18.3.12
         version: 18.3.12
@@ -93,17 +93,17 @@ packages:
       nodemailer:
         optional: true
 
-  '@babel/runtime@7.26.0':
+  '@babel/runtime@7.25.7':
-    resolution: {integrity: sha512-FDSOghenHTiToteC/QRlv2q3DhPZ/oOXTBoirfWNx1Cx3TMVcGWQtMMmQcSvb/JjpNeGzx8Pq/b4fKEJuWm1sw==}
+    resolution: {integrity: sha512-FjoyLe754PMiYsFaN5C94ttGiOmBNYTf6pLr4xXHAT5uctHb092PBszndLDR5XA/jghQvn4n7JMHl7dmTgbm9w==}
     engines: {node: '>=6.9.0'}
 
   '@emnapi/runtime@1.2.0':
     resolution: {integrity: sha512-bV21/9LQmcQeCPEg3BDFtvwL6cwiTMksYNWQQ4KOxCZikEGalWtenoZ0wCiukJINlGCIi2KXx01g4FoH/LxpzQ==}
 
-  '@heroicons/react@2.2.0':
+  '@heroicons/react@2.1.5':
-    resolution: {integrity: sha512-LMcepvRaS9LYHJGsF0zzmgKCUim/X3N/DQKc4jepAXJ7l8QxJ1PmxJzqplF2Z3FE4PqBAIGyJAQ/w4B5dsqbtQ==}
+    resolution: {integrity: sha512-FuzFN+BsHa+7OxbvAERtgBTNeZpUjgM/MIizfVkSCL2/edriN0Hx/DWRCR//aPYwO5QX/YlgLGXk+E3PcfZwjA==}
     peerDependencies:
-      react: '>= 16 || ^19.0.0-rc'
+      react: '>= 16'
 
   '@img/sharp-darwin-arm64@0.33.5':
     resolution: {integrity: sha512-UT4p+iz/2H4twwAoLCqfA9UH5pI6DggwKEGuaPy7nCVQ8ZsiY5PIcrRvD1DzuY3qYL07NtIQcWnBSY/heikIFQ==}
@@ -306,8 +306,8 @@ packages:
     resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
     engines: {node: '>=14'}
 
-  '@playwright/test@1.49.0':
+  '@playwright/test@1.48.2':
-    resolution: {integrity: sha512-DMulbwQURa8rNIQrf94+jPJQ4FmOVdpE5ZppRNvWVjvhC+6sOeo28r8MgIpQRYouXRtt/FCCXU7zn20jnHR4Qw==}
+    resolution: {integrity: sha512-54w1xCWfXuax7dz4W2M9uw0gDyh+ti/0K/MxcCUxChFh37kkdxPdfZDw5QBbuPUJHr1CiHJ1hXgSs+GgeQc5Zw==}
     engines: {node: '>=18'}
     hasBin: true
 
@@ -328,8 +328,8 @@ packages:
   '@types/cookie@0.6.0':
     resolution: {integrity: sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==}
 
-  '@types/node@22.10.1':
+  '@types/node@22.9.0':
-    resolution: {integrity: sha512-qKgsUwfHZV2WCWLAnVP1JqnpE6Im6h3Y0+fYgMTasNQ7V++CBX5OT1as0g0f+OyubbFqhf6XVNIsmN4IIhEgGQ==}
+    resolution: {integrity: sha512-vuyHg81vvWA1Z1ELfvLko2c8f34gyA0zaic0+Rllc5lbCnbSyuvb2Oxpm6TAUAC/2xZN3QGqxBNggD1nNR2AfQ==}
 
   '@types/prop-types@15.7.12':
     resolution: {integrity: sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==}
@@ -839,13 +839,13 @@ packages:
     resolution: {integrity: sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==}
     engines: {node: '>= 6'}
 
-  playwright-core@1.49.0:
+  playwright-core@1.48.2:
-    resolution: {integrity: sha512-R+3KKTQF3npy5GTiKH/T+kdhoJfJojjHESR1YEWhYuEKRVfVaxH3+4+GvXE5xyCngCxhxnykk0Vlah9v8fs3jA==}
+    resolution: {integrity: sha512-sjjw+qrLFlriJo64du+EK0kJgZzoQPsabGF4lBvsid+3CNIZIYLgnMj9V6JY5VhM2Peh20DJWIVpVljLLnlawA==}
     engines: {node: '>=18'}
     hasBin: true
 
-  playwright@1.49.0:
+  playwright@1.48.2:
-    resolution: {integrity: sha512-eKpmys0UFDnfNb3vfsf8Vx2LEOtflgRebl0Im2eQQnYMA4Aqd+Zw8bEOB+7ZKvN76901mRnqdsiOGKxzVTbi7A==}
+    resolution: {integrity: sha512-NjYvYgp4BPmiwfe31j4gHLa3J7bD2WiBz8Lk2RoSsmX38SVIARZ18VYjxLjAcDsAhA+F4iSEXTSGgjua0rrlgQ==}
     engines: {node: '>=18'}
     hasBin: true
 
@@ -908,8 +908,8 @@ packages:
   primeicons@7.0.0:
     resolution: {integrity: sha512-jK3Et9UzwzTsd6tzl2RmwrVY/b8raJ3QZLzoDACj+oTJ0oX7L9Hy+XnVwgo4QVKlKpnP/Ur13SXV/pVh4LzaDw==}
 
-  primereact@10.8.5:
+  primereact@10.8.4:
-    resolution: {integrity: sha512-B1LeJdNGGAB8P1VRJE0TDYz6rZSDwxE7Ft8PLFjRYLO44+mIJNDsLYSB56LRJOoqUNRhQrRIe/5ctS5eyQAzwQ==}
+    resolution: {integrity: sha512-jwkSzq6pOHayzEh+9dgk2M71gEZtoQakwPKVo3FUJO3eEX3SoAOchON+Xm1tGCNqtd66ca8RgOWQcpv3AQoMvg==}
     engines: {node: '>=14.0.0'}
     peerDependencies:
       '@types/react': ^17.0.0 || ^18.0.0 || ^19.0.0
@@ -1096,13 +1096,13 @@ packages:
   tslib@2.6.3:
     resolution: {integrity: sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ==}
 
-  typescript@5.7.2:
+  typescript@5.6.3:
-    resolution: {integrity: sha512-i5t66RHxDvVN40HfDd1PsEThGNnlMCMT3jMUuoh9/0TaqWevNontacunWyN02LA9/fIbEWlcHZcgTKb9QoaLfg==}
+    resolution: {integrity: sha512-hjcS1mhfuyi4WW8IWtjP7brDrG2cuDZukyrYrSauoXGNgx0S7zceP07adYkJycEr56BOUTNPzbInooiN3fn1qw==}
     engines: {node: '>=14.17'}
     hasBin: true
 
-  undici-types@6.20.0:
+  undici-types@6.19.8:
-    resolution: {integrity: sha512-Ny6QZ2Nju20vw1SRHe3d9jVu6gJ+4e3+MMpqu7pqE5HT6WsTSlce++GQmK5UXS8mzV8DSYHrQH+Xrf2jVcuKNg==}
+    resolution: {integrity: sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==}
 
   update-browserslist-db@1.1.0:
     resolution: {integrity: sha512-EdRAaAyk2cUE1wOf2DkEhzxqOQvFOoRJFNS6NeyJ01Gp2beMRpBAINjM2iDXE3KCuKhwnvHIQCJm6ThL2Z+HzQ==}
@@ -1169,7 +1169,7 @@ snapshots:
       preact: 10.11.3
       preact-render-to-string: 5.2.3(preact@10.11.3)
 
-  '@babel/runtime@7.26.0':
+  '@babel/runtime@7.25.7':
     dependencies:
       regenerator-runtime: 0.14.1
 
@@ -1178,7 +1178,7 @@ snapshots:
       tslib: 2.6.3
     optional: true
 
-  '@heroicons/react@2.2.0(react@19.0.0-rc-f38c22b244-20240704)':
+  '@heroicons/react@2.1.5(react@19.0.0-rc-f38c22b244-20240704)':
     dependencies:
       react: 19.0.0-rc-f38c22b244-20240704
 
@@ -1341,9 +1341,9 @@ snapshots:
   '@pkgjs/parseargs@0.11.0':
     optional: true
 
-  '@playwright/test@1.49.0':
+  '@playwright/test@1.48.2':
     dependencies:
-      playwright: 1.49.0
+      playwright: 1.48.2
 
   '@swc/counter@0.1.3': {}
 
@@ -1358,13 +1358,13 @@ snapshots:
 
   '@types/bcrypt@5.0.2':
     dependencies:
-      '@types/node': 22.10.1
+      '@types/node': 22.9.0
 
   '@types/cookie@0.6.0': {}
 
-  '@types/node@22.10.1':
+  '@types/node@22.9.0':
     dependencies:
-      undici-types: 6.20.0
+      undici-types: 6.19.8
 
   '@types/prop-types@15.7.12': {}
 
@@ -1535,7 +1535,7 @@ snapshots:
 
   dom-helpers@5.2.1:
     dependencies:
-      '@babel/runtime': 7.26.0
+      '@babel/runtime': 7.25.7
       csstype: 3.1.3
 
   eastasianwidth@0.2.0: {}
@@ -1735,13 +1735,13 @@ snapshots:
 
   nanoid@3.3.7: {}
 
-  next-auth@5.0.0-beta.25(next@15.0.3(@playwright/test@1.49.0)(react-dom@19.0.0-rc-f38c22b244-20240704(react@19.0.0-rc-f38c22b244-20240704))(react@19.0.0-rc-f38c22b244-20240704))(react@19.0.0-rc-f38c22b244-20240704):
+  next-auth@5.0.0-beta.25(next@15.0.3(@playwright/test@1.48.2)(react-dom@19.0.0-rc-f38c22b244-20240704(react@19.0.0-rc-f38c22b244-20240704))(react@19.0.0-rc-f38c22b244-20240704))(react@19.0.0-rc-f38c22b244-20240704):
     dependencies:
       '@auth/core': 0.37.2
-      next: 15.0.3(@playwright/test@1.49.0)(react-dom@19.0.0-rc-f38c22b244-20240704(react@19.0.0-rc-f38c22b244-20240704))(react@19.0.0-rc-f38c22b244-20240704)
+      next: 15.0.3(@playwright/test@1.48.2)(react-dom@19.0.0-rc-f38c22b244-20240704(react@19.0.0-rc-f38c22b244-20240704))(react@19.0.0-rc-f38c22b244-20240704)
       react: 19.0.0-rc-f38c22b244-20240704
 
-  next@15.0.3(@playwright/test@1.49.0)(react-dom@19.0.0-rc-f38c22b244-20240704(react@19.0.0-rc-f38c22b244-20240704))(react@19.0.0-rc-f38c22b244-20240704):
+  next@15.0.3(@playwright/test@1.48.2)(react-dom@19.0.0-rc-f38c22b244-20240704(react@19.0.0-rc-f38c22b244-20240704))(react@19.0.0-rc-f38c22b244-20240704):
     dependencies:
       '@next/env': 15.0.3
       '@swc/counter': 0.1.3
@@ -1761,7 +1761,7 @@ snapshots:
       '@next/swc-linux-x64-musl': 15.0.3
       '@next/swc-win32-arm64-msvc': 15.0.3
       '@next/swc-win32-x64-msvc': 15.0.3
-      '@playwright/test': 1.49.0
+      '@playwright/test': 1.48.2
       sharp: 0.33.5
     transitivePeerDependencies:
       - '@babel/core'
@@ -1821,11 +1821,11 @@ snapshots:
 
   pirates@4.0.6: {}
 
-  playwright-core@1.49.0: {}
+  playwright-core@1.48.2: {}
 
-  playwright@1.49.0:
+  playwright@1.48.2:
     dependencies:
-      playwright-core: 1.49.0
+      playwright-core: 1.48.2
     optionalDependencies:
       fsevents: 2.3.2
 
@@ -1883,7 +1883,7 @@ snapshots:
 
   primeicons@7.0.0: {}
 
-  primereact@10.8.5(@types/react@18.3.12)(react-dom@19.0.0-rc-f38c22b244-20240704(react@19.0.0-rc-f38c22b244-20240704))(react@19.0.0-rc-f38c22b244-20240704):
+  primereact@10.8.4(@types/react@18.3.12)(react-dom@19.0.0-rc-f38c22b244-20240704(react@19.0.0-rc-f38c22b244-20240704))(react@19.0.0-rc-f38c22b244-20240704):
     dependencies:
       '@types/react-transition-group': 4.4.11
       react: 19.0.0-rc-f38c22b244-20240704
@@ -1909,7 +1909,7 @@ snapshots:
 
   react-transition-group@4.4.5(react-dom@19.0.0-rc-f38c22b244-20240704(react@19.0.0-rc-f38c22b244-20240704))(react@19.0.0-rc-f38c22b244-20240704):
     dependencies:
-      '@babel/runtime': 7.26.0
+      '@babel/runtime': 7.25.7
       dom-helpers: 5.2.1
       loose-envify: 1.4.0
       prop-types: 15.8.1
@@ -2104,9 +2104,9 @@ snapshots:
 
   tslib@2.6.3: {}
 
-  typescript@5.7.2: {}
+  typescript@5.6.3: {}
 
-  undici-types@6.20.0: {}
+  undici-types@6.19.8: {}
 
   update-browserslist-db@1.1.0(browserslist@4.23.3):
     dependencies:

tests/guests.spec.ts

@@ -1,7 +1,7 @@
 import { test, expect, Page } from '@playwright/test'
 
 const mockGuestsAPI = ({ page }: { page: Page }) => {
-  page.route('*/**/api/default/guests', async route => {
+  page.route('*/**/api/guests', async route => {
     const json = [
       {
         "id": "f4a09c28-40ea-4553-90a5-96935a59cac6",
@@ -28,7 +28,7 @@ const mockGuestsAPI = ({ page }: { page: Page }) => {
 }
 
 const mockGroupsAPI = ({ page }: { page: Page }) => {
-  page.route('*/**/api/default/groups', async route => {
+  page.route('*/**/api/groups', async route => {
     const json = [
       {
         "id": "ee44ffb9-1147-4842-a378-9eaeb0f0871a",
@@ -65,7 +65,7 @@ const mockGroupsAPI = ({ page }: { page: Page }) => {
 test('should display the list of guests', async ({ page }) => {
   await mockGuestsAPI({ page });
 
-  await page.goto('/default/dashboard/guests');
+  await page.goto('/dashboard/guests');
 
   await expect(page.getByRole('tab', { name: 'Groups' })).toBeVisible();
   await expect(page.getByRole('tab', { name: 'Guests' })).toBeVisible();
@@ -90,7 +90,7 @@ test('should display the list of guests', async ({ page }) => {
 test('should display the list of groups', async ({ page }) => {
   await mockGroupsAPI({ page });
 
-  await page.goto('/default/dashboard/guests');
+  await page.goto('/dashboard/guests');
   await page.getByRole('tab', { name: 'Groups' }).click();
 
   await expect(page.getByText('There are 2 elements in the list')).toBeVisible();