From b4596176cd8b49f96abed4780573a6fb6495601f Mon Sep 17 00:00:00 2001
From: Renovate Bot <renovate@bustikiller.com>
Date: Sun, 1 Jun 2025 02:07:36 +0000
Subject: [PATCH 01/15] Update dependency postcss to v8.5.4

---
 package.json   |  2 +-
 pnpm-lock.yaml | 51 ++++++++++++++++++++++++++++----------------------
 2 files changed, 30 insertions(+), 23 deletions(-)

diff --git a/package.json b/package.json
index b837c0a..3fb1cab 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,7 @@
     "clsx": "^2.1.1",
     "next": "15.3.3",
     "next-auth": "5.0.0-beta.28",
-    "postcss": "8.5.3",
+    "postcss": "8.5.4",
     "primeicons": "^7.0.0",
     "primereact": "^10.8.2",
     "react": "19.0.0-rc-f38c22b244-20240704",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f744bc0..bfadf08 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -16,7 +16,7 @@ importers:
         version: 0.5.10(tailwindcss@3.4.17)
       autoprefixer:
         specifier: 10.4.21
-        version: 10.4.21(postcss@8.5.3)
+        version: 10.4.21(postcss@8.5.4)
       bcrypt:
         specifier: ^5.1.1
         version: 5.1.1
@@ -30,8 +30,8 @@ importers:
         specifier: 5.0.0-beta.28
         version: 5.0.0-beta.28(next@15.3.3(@playwright/test@1.52.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)
       postcss:
-        specifier: 8.5.3
-        version: 8.5.3
+        specifier: 8.5.4
+        version: 8.5.4
       primeicons:
         specifier: ^7.0.0
         version: 7.0.0
@@ -719,6 +719,11 @@ packages:
   mz@2.7.0:
     resolution: {integrity: sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==}
 
+  nanoid@3.3.11:
+    resolution: {integrity: sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==}
+    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
+    hasBin: true
+
   nanoid@3.3.8:
     resolution: {integrity: sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==}
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
@@ -888,8 +893,8 @@ packages:
     resolution: {integrity: sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==}
     engines: {node: ^10 || ^12 || >=14}
 
-  postcss@8.5.3:
-    resolution: {integrity: sha512-dle9A3yYxlBSrt8Fu+IpjGT8SY8hN0mlaA6GY8t0P5PjIOZemULz/E2Bnm/2dcUOena75OTNkHI76uZBNUUq3A==}
+  postcss@8.5.4:
+    resolution: {integrity: sha512-QSa9EBe+uwlGTFmHsPKokv3B/oEMQZxfqW0QqNCyhpa6mB1afzulwn8hihglqAb2pOw+BJgNlmXQ8la2VeHB7w==}
     engines: {node: ^10 || ^12 || >=14}
 
   preact-render-to-string@6.5.11:
@@ -1413,14 +1418,14 @@ snapshots:
 
   arg@5.0.2: {}
 
-  autoprefixer@10.4.21(postcss@8.5.3):
+  autoprefixer@10.4.21(postcss@8.5.4):
     dependencies:
       browserslist: 4.24.4
       caniuse-lite: 1.0.30001702
       fraction.js: 4.3.7
       normalize-range: 0.1.2
       picocolors: 1.1.1
-      postcss: 8.5.3
+      postcss: 8.5.4
       postcss-value-parser: 4.2.0
 
   balanced-match@1.0.2: {}
@@ -1727,6 +1732,8 @@ snapshots:
       object-assign: 4.1.1
       thenify-all: 1.6.0
 
+  nanoid@3.3.11: {}
+
   nanoid@3.3.8: {}
 
   next-auth@5.0.0-beta.28(next@15.3.3(@playwright/test@1.52.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):
@@ -1821,28 +1828,28 @@ snapshots:
     optionalDependencies:
       fsevents: 2.3.2
 
-  postcss-import@15.1.0(postcss@8.5.3):
+  postcss-import@15.1.0(postcss@8.5.4):
     dependencies:
-      postcss: 8.5.3
+      postcss: 8.5.4
       postcss-value-parser: 4.2.0
       read-cache: 1.0.0
       resolve: 1.22.8
 
-  postcss-js@4.0.1(postcss@8.5.3):
+  postcss-js@4.0.1(postcss@8.5.4):
     dependencies:
       camelcase-css: 2.0.1
-      postcss: 8.5.3
+      postcss: 8.5.4
 
-  postcss-load-config@4.0.2(postcss@8.5.3):
+  postcss-load-config@4.0.2(postcss@8.5.4):
     dependencies:
       lilconfig: 3.1.3
       yaml: 2.4.3
     optionalDependencies:
-      postcss: 8.5.3
+      postcss: 8.5.4
 
-  postcss-nested@6.2.0(postcss@8.5.3):
+  postcss-nested@6.2.0(postcss@8.5.4):
     dependencies:
-      postcss: 8.5.3
+      postcss: 8.5.4
       postcss-selector-parser: 6.1.2
 
   postcss-selector-parser@6.1.2:
@@ -1858,9 +1865,9 @@ snapshots:
       picocolors: 1.1.1
       source-map-js: 1.2.1
 
-  postcss@8.5.3:
+  postcss@8.5.4:
     dependencies:
-      nanoid: 3.3.8
+      nanoid: 3.3.11
       picocolors: 1.1.1
       source-map-js: 1.2.1
 
@@ -2056,11 +2063,11 @@ snapshots:
       normalize-path: 3.0.0
       object-hash: 3.0.0
       picocolors: 1.1.1
-      postcss: 8.5.3
-      postcss-import: 15.1.0(postcss@8.5.3)
-      postcss-js: 4.0.1(postcss@8.5.3)
-      postcss-load-config: 4.0.2(postcss@8.5.3)
-      postcss-nested: 6.2.0(postcss@8.5.3)
+      postcss: 8.5.4
+      postcss-import: 15.1.0(postcss@8.5.4)
+      postcss-js: 4.0.1(postcss@8.5.4)
+      postcss-load-config: 4.0.2(postcss@8.5.4)
+      postcss-nested: 6.2.0(postcss@8.5.4)
       postcss-selector-parser: 6.1.2
       resolve: 1.22.8
       sucrase: 3.35.0

From af955d47f37fa6ff52d5bf275617eff4497d82c3 Mon Sep 17 00:00:00 2001
From: Renovate Bot <renovate@bustikiller.com>
Date: Sun, 1 Jun 2025 02:07:54 +0000
Subject: [PATCH 02/15] Update dependency zod to v3.25.45

---
 pnpm-lock.yaml | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f744bc0..e5727c0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -58,7 +58,7 @@ importers:
         version: 11.1.0
       zod:
         specifier: ^3.23.8
-        version: 3.24.4
+        version: 3.25.45
     devDependencies:
       '@playwright/test':
         specifier: ^1.46.0
@@ -1151,8 +1151,8 @@ packages:
     engines: {node: '>= 14'}
     hasBin: true
 
-  zod@3.24.4:
-    resolution: {integrity: sha512-OdqJE9UDRPwWsrHjLN2F8bPxvwJBK22EHLWtanu0LSYr5YqzsaaW3RMgmjwr8Rypg5k+meEJdSPXJZXE/yqOMg==}
+  zod@3.25.45:
+    resolution: {integrity: sha512-kv1swJBZqv98NQibL0oVvkQE8rXT+6qGNM1FpZkFcJG2jnz4vbtu48bgaitp85CaBPLSKXibrEsU7MzJoVoZAA==}
 
 snapshots:
 
@@ -2145,4 +2145,4 @@ snapshots:
 
   yaml@2.4.3: {}
 
-  zod@3.24.4: {}
+  zod@3.25.45: {}

From 537c285bd4eabc3b133447349e4d1a0619e34fdf Mon Sep 17 00:00:00 2001
From: Manuel Bustillo <bustikiller@bustikiller.com>
Date: Sun, 1 Jun 2025 13:29:14 +0200
Subject: [PATCH 03/15] Initial draft of the invitations board

---
 app/[slug]/dashboard/guests/page.tsx | 17 +++++++
 app/lib/invitation.tsx               | 26 ++++++++++
 app/ui/invitations/board.tsx         | 73 ++++++++++++++++++++++++++++
 3 files changed, 116 insertions(+)
 create mode 100644 app/lib/invitation.tsx
 create mode 100644 app/ui/invitations/board.tsx

diff --git a/app/[slug]/dashboard/guests/page.tsx b/app/[slug]/dashboard/guests/page.tsx
index d42b0ba..7915188 100644
--- a/app/[slug]/dashboard/guests/page.tsx
+++ b/app/[slug]/dashboard/guests/page.tsx
@@ -16,6 +16,8 @@ import GuestsTable from '@/app/ui/guests/table';
 import { TabPanel, TabView } from 'primereact/tabview';
 import { Toast } from 'primereact/toast';
 import { Suspense, useRef, useState } from 'react';
+import InvitationsBoard from '@/app/ui/invitations/board';
+import { Invitation, InvitationSerializer } from '@/app/lib/invitation';
 
 
 export default function Page() {
@@ -35,6 +37,13 @@ export default function Page() {
     });
   }
 
+  function refreshInvitations() {
+    new AbstractApi<Invitation>().getAll(new InvitationSerializer(), (objects: Invitation[]) => {
+      setInvitations(objects);
+      setInvitationsLoaded(true);
+    });
+  }
+
   function resetAffinities() {
     fetch(`/api/${getSlug()}/groups/affinities/reset`, {
       method: 'POST',
@@ -73,8 +82,13 @@ export default function Page() {
   const [guests, setGuests] = useState<Array<Guest>>([]);
   const [guestBeingEdited, setGuestBeingEdited] = useState<Guest | undefined>(undefined);
 
+  const [invitationsLoaded, setInvitationsLoaded] = useState(false);
+  const [invitations, setInvitations] = useState<Array<Invitation>>([]);
+  const [invitationBeingEdited, setInvitationBeingEdited] = useState<Invitation | undefined>(undefined);
+
   !groupsLoaded && refreshGroups();
   !guestsLoaded && refreshGuests();
+  !invitationsLoaded && refreshInvitations();
 
   return (
     <div className="w-full">
@@ -134,6 +148,9 @@ export default function Page() {
             </Suspense>
           </div>
         </ TabPanel>
+        <TabPanel header="Invitations" leftIcon="pi pi-envelope mx-2">
+          <InvitationsBoard guests={guests} invitations={invitations}/>
+        </TabPanel>
       </ TabView>
     </div>
 
diff --git a/app/lib/invitation.tsx b/app/lib/invitation.tsx
new file mode 100644
index 0000000..04dc81c
--- /dev/null
+++ b/app/lib/invitation.tsx
@@ -0,0 +1,26 @@
+import { Entity } from "./definitions";
+import { Guest } from "./guest";
+
+export class Invitation implements Entity {
+  id?: string;
+  guests: Array<Guest>;
+
+  constructor(id?: string, guests: Array<Guest> = []) {
+    this.id = id;
+    this.guests = guests;
+  }
+}
+
+export class InvitationSerializer {
+  fromJson(data: any): Invitation {
+    return new Invitation(data.id, data.guests.map((guest: any) => new Guest(guest.id, guest.name, guest.group_name, guest.groupId, guest.color, guest.status, guest.children)));
+  }
+
+  toJson(invitation: Invitation): string {
+    return JSON.stringify({ invitation: { guests: invitation.guests.map(guest => ({ id: guest.id })) } });
+  }
+
+  apiPath(): string {
+    return 'invitations';
+  }
+}
\ No newline at end of file
diff --git a/app/ui/invitations/board.tsx b/app/ui/invitations/board.tsx
new file mode 100644
index 0000000..c151cbc
--- /dev/null
+++ b/app/ui/invitations/board.tsx
@@ -0,0 +1,73 @@
+'use client';
+
+import { AbstractApi } from "@/app/api/abstract-api";
+import { Guest } from "@/app/lib/guest";
+import { Invitation, InvitationSerializer } from "@/app/lib/invitation";
+
+export default function InvitationsBoard({ guests, invitations }: {
+  guests: Array<Guest>,
+  invitations: Array<Invitation>
+}) {
+  const api = new AbstractApi<Invitation>();
+  const serializer = new InvitationSerializer();
+
+  // Filter out guests that are already in invitations
+  const availableGuests = guests.filter(
+    (guest) => !invitations.some((invitation) =>
+      invitation.guests.some((invitedGuest) => invitedGuest.id === guest.id)
+    )
+  );
+
+  function handleCreateInvitation() {
+    api.create(serializer, new Invitation(), () => {
+      console.log("Invitation created successfully");
+    });
+  }
+
+  return (
+    <div className="flex h-full">
+      {/* Left Column: Guests */}
+      <div className="w-1/4 h-full overflow-y-auto border-r border-gray-300 p-4">
+        <h2 className="text-lg font-semibold mb-4">Guests</h2>
+        <ul>
+          {availableGuests.map((guest, index) => (
+            <li
+              key={index}
+              className="mb-4 p-4 border border-gray-300 rounded-lg shadow-sm bg-white cursor-move"
+              draggable="true"
+            >
+              <h3 className="text-md font-medium">{guest.name}</h3>
+            </li>
+          ))}
+        </ul>
+      </div>
+
+      {/* Right Column: Invitations */}
+      <div className="w-3/4 h-full overflow-y-auto p-4">
+        <h2 className="text-lg font-semibold mb-4">Invitations</h2>
+
+        <button
+          onClick={handleCreateInvitation}
+          className="mb-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
+        >
+          Create New Invitation
+        </button>
+
+        <div className="grid grid-cols-3 gap-4">
+          {invitations.map((invitation, index) => (
+            <div
+              key={invitation.id}
+              className="flex items-center justify-center h-32 w-full bg-green-600 border border-green-700"
+            >
+              <ul className="text-center text-yellow-500 font-cursive text-lg">
+                {invitation.guests.map((guest) => (
+                  <li key={guest.id}>{guest.name}</li>
+                ))}
+              </ul>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

From 54da3212cb9073d085912bc92cc4b476cdb090f0 Mon Sep 17 00:00:00 2001
From: Manuel Bustillo <bustikiller@bustikiller.com>
Date: Sun, 1 Jun 2025 14:05:59 +0200
Subject: [PATCH 04/15] Add an independent scroll for each column

---
 app/ui/invitations/board.tsx | 68 ++++++++++++++++++------------------
 1 file changed, 34 insertions(+), 34 deletions(-)

diff --git a/app/ui/invitations/board.tsx b/app/ui/invitations/board.tsx
index c151cbc..36f8fda 100644
--- a/app/ui/invitations/board.tsx
+++ b/app/ui/invitations/board.tsx
@@ -25,48 +25,48 @@ export default function InvitationsBoard({ guests, invitations }: {
   }
 
   return (
-    <div className="flex h-full">
+    <div className="flex h-screen">
       {/* Left Column: Guests */}
-      <div className="w-1/4 h-full overflow-y-auto border-r border-gray-300 p-4">
-        <h2 className="text-lg font-semibold mb-4">Guests</h2>
-        <ul>
-          {availableGuests.map((guest, index) => (
-            <li
-              key={index}
-              className="mb-4 p-4 border border-gray-300 rounded-lg shadow-sm bg-white cursor-move"
-              draggable="true"
-            >
-              <h3 className="text-md font-medium">{guest.name}</h3>
-            </li>
-          ))}
-        </ul>
+      <div className="w-1/4 h-full overflow-auto border-r border-gray-300 p-4">
+      <h2 className="text-lg font-semibold mb-4">Guests</h2>
+      <ul>
+        {availableGuests.map((guest, index) => (
+        <li
+          key={index}
+          className="mb-4 p-4 border border-gray-300 rounded-lg shadow-sm bg-white cursor-move"
+          draggable="true"
+        >
+          <h3 className="text-md font-medium">{guest.name}</h3>
+        </li>
+        ))}
+      </ul>
       </div>
 
       {/* Right Column: Invitations */}
-      <div className="w-3/4 h-full overflow-y-auto p-4">
-        <h2 className="text-lg font-semibold mb-4">Invitations</h2>
+      <div className="w-3/4 h-full overflow-auto p-4">
+      <h2 className="text-lg font-semibold mb-4">Invitations</h2>
 
-        <button
-          onClick={handleCreateInvitation}
-          className="mb-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
+      <button
+        onClick={handleCreateInvitation}
+        className="mb-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
+      >
+        Create New Invitation
+      </button>
+
+      <div className="grid grid-cols-3 gap-4">
+        {invitations.map((invitation, index) => (
+        <div
+          key={invitation.id}
+          className="flex items-center justify-center h-32 w-full bg-green-600 border border-green-700"
         >
-          Create New Invitation
-        </button>
-
-        <div className="grid grid-cols-3 gap-4">
-          {invitations.map((invitation, index) => (
-            <div
-              key={invitation.id}
-              className="flex items-center justify-center h-32 w-full bg-green-600 border border-green-700"
-            >
-              <ul className="text-center text-yellow-500 font-cursive text-lg">
-                {invitation.guests.map((guest) => (
-                  <li key={guest.id}>{guest.name}</li>
-                ))}
-              </ul>
-            </div>
+          <ul className="text-center text-yellow-500 font-cursive text-lg">
+          {invitation.guests.map((guest) => (
+            <li key={guest.id}>{guest.name}</li>
           ))}
+          </ul>
         </div>
+        ))}
+      </div>
       </div>
     </div>
   );

From 94ff03f617b5bfacfd44aab965dc8320b6921cd7 Mon Sep 17 00:00:00 2001
From: Manuel Bustillo <bustikiller@bustikiller.com>
Date: Sun, 1 Jun 2025 14:17:02 +0200
Subject: [PATCH 05/15] Use a darker green and 4 columns for the invitations

---
 app/ui/invitations/board.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/app/ui/invitations/board.tsx b/app/ui/invitations/board.tsx
index 36f8fda..bea860c 100644
--- a/app/ui/invitations/board.tsx
+++ b/app/ui/invitations/board.tsx
@@ -53,15 +53,16 @@ export default function InvitationsBoard({ guests, invitations }: {
         Create New Invitation
       </button>
 
-      <div className="grid grid-cols-3 gap-4">
+      <div className="grid grid-cols-4 gap-6">
         {invitations.map((invitation, index) => (
         <div
           key={invitation.id}
-          className="flex items-center justify-center h-32 w-full bg-green-600 border border-green-700"
+          className="flex items-center justify-center w-full bg-green-800 border border-green-900"
+          style={{ aspectRatio: "1.618 / 1" }}
         >
           <ul className="text-center text-yellow-500 font-cursive text-lg">
           {invitation.guests.map((guest) => (
-            <li key={guest.id}>{guest.name}</li>
+        <li key={guest.id}>{guest.name}</li>
           ))}
           </ul>
         </div>

From 16cd9e61750854e72543020fbf8caeacca6b96e7 Mon Sep 17 00:00:00 2001
From: Manuel Bustillo <bustikiller@bustikiller.com>
Date: Sun, 1 Jun 2025 15:30:30 +0200
Subject: [PATCH 06/15] Display number of guests and invitations

---
 app/ui/invitations/board.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/app/ui/invitations/board.tsx b/app/ui/invitations/board.tsx
index bea860c..9bb95e9 100644
--- a/app/ui/invitations/board.tsx
+++ b/app/ui/invitations/board.tsx
@@ -28,7 +28,7 @@ export default function InvitationsBoard({ guests, invitations }: {
     <div className="flex h-screen">
       {/* Left Column: Guests */}
       <div className="w-1/4 h-full overflow-auto border-r border-gray-300 p-4">
-      <h2 className="text-lg font-semibold mb-4">Guests</h2>
+      <h2 className="text-lg font-semibold mb-4">{guests.length} guests without invitation</h2>
       <ul>
         {availableGuests.map((guest, index) => (
         <li
@@ -44,7 +44,9 @@ export default function InvitationsBoard({ guests, invitations }: {
 
       {/* Right Column: Invitations */}
       <div className="w-3/4 h-full overflow-auto p-4">
-      <h2 className="text-lg font-semibold mb-4">Invitations</h2>
+      <h2 className="text-lg font-semibold mb-4">
+        {invitations.length} invitations
+      </h2>
 
       <button
         onClick={handleCreateInvitation}

From ecc255014645446b7179b968d35c307f366af083 Mon Sep 17 00:00:00 2001
From: Manuel Bustillo <bustikiller@bustikiller.com>
Date: Sun, 1 Jun 2025 15:35:02 +0200
Subject: [PATCH 07/15] Display empty invitations

---
 app/ui/invitations/board.tsx | 81 +++++++++++++++++++++---------------
 1 file changed, 47 insertions(+), 34 deletions(-)

diff --git a/app/ui/invitations/board.tsx b/app/ui/invitations/board.tsx
index 9bb95e9..d34cbb8 100644
--- a/app/ui/invitations/board.tsx
+++ b/app/ui/invitations/board.tsx
@@ -18,6 +18,13 @@ export default function InvitationsBoard({ guests, invitations }: {
     )
   );
 
+  // 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(), () => {
       console.log("Invitation created successfully");
@@ -28,48 +35,54 @@ export default function InvitationsBoard({ guests, invitations }: {
     <div className="flex h-screen">
       {/* Left Column: Guests */}
       <div className="w-1/4 h-full overflow-auto border-r border-gray-300 p-4">
-      <h2 className="text-lg font-semibold mb-4">{guests.length} guests without invitation</h2>
-      <ul>
-        {availableGuests.map((guest, index) => (
-        <li
-          key={index}
-          className="mb-4 p-4 border border-gray-300 rounded-lg shadow-sm bg-white cursor-move"
-          draggable="true"
-        >
-          <h3 className="text-md font-medium">{guest.name}</h3>
-        </li>
-        ))}
-      </ul>
+        <h2 className="text-lg font-semibold mb-4">{guests.length} guests without invitation</h2>
+        <ul>
+          {availableGuests.map((guest, index) => (
+            <li
+              key={index}
+              className="mb-4 p-4 border border-gray-300 rounded-lg shadow-sm bg-white cursor-move"
+              draggable="true"
+            >
+              <h3 className="text-md font-medium">{guest.name}</h3>
+            </li>
+          ))}
+        </ul>
       </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>
+        <h2 className="text-lg font-semibold mb-4">
+          {invitations.length} invitations
+        </h2>
 
-      <button
-        onClick={handleCreateInvitation}
-        className="mb-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
-      >
-        Create New Invitation
-      </button>
-
-      <div className="grid grid-cols-4 gap-6">
-        {invitations.map((invitation, index) => (
-        <div
-          key={invitation.id}
-          className="flex items-center justify-center w-full bg-green-800 border border-green-900"
-          style={{ aspectRatio: "1.618 / 1" }}
+        <button
+          onClick={handleCreateInvitation}
+          className="mb-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
         >
-          <ul className="text-center text-yellow-500 font-cursive text-lg">
-          {invitation.guests.map((guest) => (
-        <li key={guest.id}>{guest.name}</li>
+          Create New Invitation
+        </button>
+
+        <div className="grid grid-cols-4 gap-6">
+          {sortedInvitations.map((invitation, index) => (
+            <div
+              key={invitation.id}
+              className="flex items-center justify-center w-full bg-green-800 border border-green-900"
+              style={{ aspectRatio: "1.618 / 1" }}
+            >
+                {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">
+                  {invitation.guests.map((guest) => (
+                  <li key={guest.id}>{guest.name}</li>
+                  ))}
+                </ul>
+                )}
+            </div>
           ))}
-          </ul>
         </div>
-        ))}
-      </div>
       </div>
     </div>
   );

From fb826951746eb8efd639a3dac78288ab3c48961c Mon Sep 17 00:00:00 2001
From: Manuel Bustillo <bustikiller@bustikiller.com>
Date: Sun, 1 Jun 2025 16:31:54 +0200
Subject: [PATCH 08/15] Basic drag and drop behavior

---
 app/ui/invitations/board.tsx | 108 ++++--
 package.json                 |   1 +
 pnpm-lock.yaml               | 613 +++++++++++++++++++++++++++++++++++
 3 files changed, 692 insertions(+), 30 deletions(-)

diff --git a/app/ui/invitations/board.tsx b/app/ui/invitations/board.tsx
index d34cbb8..1d887ae 100644
--- a/app/ui/invitations/board.tsx
+++ b/app/ui/invitations/board.tsx
@@ -3,6 +3,79 @@
 import { AbstractApi } from "@/app/api/abstract-api";
 import { Guest } from "@/app/lib/guest";
 import { Invitation, InvitationSerializer } from "@/app/lib/invitation";
+import { draggable, dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
+import { useEffect, useRef } from "react";
+import { useState } from "react";
+
+function InvitationCard(invitation: Invitation, allGuests: Guest[]) {
+
+  const [guests, setGuests] = useState<Guest[]>(invitation.guests);
+
+  const ref = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    if (ref.current) {
+      return dropTargetForElements({
+        element: ref.current,
+        onDrop: (data) => {
+          console.log('Dropped guest ID:', data.source.element.dataset.guestId);
+          const guestId = data.source.element.dataset.guestId;
+          if (guestId) {
+            const guestToAdd = allGuests.find((guest) => guest.id === guestId);
+            if (guestToAdd) {
+              setGuests((prevGuests) => [...prevGuests, guestToAdd]);
+            }
+          }
+        },
+      });
+    }
+  }, []);
+
+  return (
+    <div
+      key={invitation.id}
+      ref={ref}
+      className="flex items-center justify-center w-full bg-green-800 border border-green-900"
+      style={{ aspectRatio: "1.618 / 1" }}
+    >
+      {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,
+        onDragStart: () => console.log('Something started dragging in me!')
+      });
+    }
+  }, [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 }: {
   guests: Array<Guest>,
@@ -11,6 +84,7 @@ export default function InvitationsBoard({ guests, invitations }: {
   const api = new AbstractApi<Invitation>();
   const serializer = new InvitationSerializer();
 
+
   // Filter out guests that are already in invitations
   const availableGuests = guests.filter(
     (guest) => !invitations.some((invitation) =>
@@ -36,17 +110,9 @@ export default function InvitationsBoard({ guests, invitations }: {
       {/* Left Column: Guests */}
       <div className="w-1/4 h-full overflow-auto border-r border-gray-300 p-4">
         <h2 className="text-lg font-semibold mb-4">{guests.length} guests without invitation</h2>
-        <ul>
-          {availableGuests.map((guest, index) => (
-            <li
-              key={index}
-              className="mb-4 p-4 border border-gray-300 rounded-lg shadow-sm bg-white cursor-move"
-              draggable="true"
-            >
-              <h3 className="text-md font-medium">{guest.name}</h3>
-            </li>
-          ))}
-        </ul>
+        <div>
+          {availableGuests.map((guest, index) => GuestCard(guest))}
+        </div>
       </div>
 
       {/* Right Column: Invitations */}
@@ -63,25 +129,7 @@ export default function InvitationsBoard({ guests, invitations }: {
         </button>
 
         <div className="grid grid-cols-4 gap-6">
-          {sortedInvitations.map((invitation, index) => (
-            <div
-              key={invitation.id}
-              className="flex items-center justify-center w-full bg-green-800 border border-green-900"
-              style={{ aspectRatio: "1.618 / 1" }}
-            >
-                {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">
-                  {invitation.guests.map((guest) => (
-                  <li key={guest.id}>{guest.name}</li>
-                  ))}
-                </ul>
-                )}
-            </div>
-          ))}
+          {sortedInvitations.map((invitation, index) => (InvitationCard(invitation, guests)))}
         </div>
       </div>
     </div>
diff --git a/package.json b/package.json
index 962a519..7161c36 100644
--- a/package.json
+++ b/package.json
@@ -6,6 +6,7 @@
     "start": "next start"
   },
   "dependencies": {
+    "@atlaskit/pragmatic-drag-and-drop": "^1.7.0",
     "@heroicons/react": "^2.1.4",
     "@tailwindcss/forms": "^0.5.7",
     "autoprefixer": "10.4.21",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b26b08e..6cc1907 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -8,6 +8,9 @@ importers:
 
   .:
     dependencies:
+      '@atlaskit/pragmatic-drag-and-drop':
+        specifier: ^1.7.0
+        version: 1.7.0(@types/react@18.3.20)(react-dom@19.0.0-rc-f38c22b244-20240704(react@19.0.0-rc-f38c22b244-20240704))(react@19.0.0-rc-f38c22b244-20240704)
       '@heroicons/react':
         specifier: ^2.1.4
         version: 2.2.0(react@19.0.0-rc-f38c22b244-20240704)
@@ -82,6 +85,71 @@ packages:
     resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==}
     engines: {node: '>=10'}
 
+  '@atlaskit/analytics-next-stable-react-context@1.0.1':
+    resolution: {integrity: sha512-iO6+hIp09dF4iAZQarVz3vKY1kM5Ij5CExYcK9jgc2q+OH8nv8n+BPFeJTdzGOGopmbUZn5Opj9pYQvge1Gr4Q==}
+    peerDependencies:
+      react: ^16.8.0
+
+  '@atlaskit/analytics-next@11.0.0':
+    resolution: {integrity: sha512-ekts8cC3nBc3ye1ivsDQXLyWCQSlMN0uKTuspVa9ppydt8r8qvJHyI/ACX3DS5uRH/du0f2mZuhdrvdBibr0yQ==}
+    peerDependencies:
+      react: ^18.2.0
+      react-dom: ^18.2.0
+
+  '@atlaskit/app-provider@2.2.0':
+    resolution: {integrity: sha512-tPrbGhhBAmPN5zWsjv7vPgOnr0JXtbjEIYVoiDulSHempWXSm8ZWgx43WDDb+jhCNdvJQ02TxazPMLYVMziNfw==}
+    peerDependencies:
+      react: ^18.2.0
+
+  '@atlaskit/atlassian-context@0.2.0':
+    resolution: {integrity: sha512-msLRSp0qck6eflkShplgyIoOogNKxKRc6QIWGQlSvKGxHQNEbLEkRGcDzdh8PuBxSs1gda7OqYrdtQYQiPbpTQ==}
+    peerDependencies:
+      react: ^18.2.0
+
+  '@atlaskit/css@0.10.6':
+    resolution: {integrity: sha512-oSv0CMSq70NSy2UwGi4qhX0VDvZQe4IY6J4sEo5uOg7UoUChpyp8rfz8KZ5m3GqM5GyoSOw9lYhMyMNZCuY0/Q==}
+    peerDependencies:
+      react: ^18.2.0
+
+  '@atlaskit/ds-lib@4.0.0':
+    resolution: {integrity: sha512-nM0wAo8bm7FyAYuId6Ba2MFnLSVzlsZpyfRxPJ7dMFqEhJ4R53/CoT8v18mvi2Hu1Y4+d1t97lOyybHfgFyb+A==}
+    peerDependencies:
+      react: ^18.2.0
+
+  '@atlaskit/feature-gate-js-client@5.3.1':
+    resolution: {integrity: sha512-2ZsxZ3r2+J22fT341JzR/vad1N95OK5hHybJC5iVQ961+x0q6pjRikaqOtRjGfcH6tOmV4br4wb14DeHH1YcbQ==}
+
+  '@atlaskit/interaction-context@3.0.0':
+    resolution: {integrity: sha512-s2OvErvOWlDxw75kvANbsiosC8dxyXg+3A2CORYa3HigUnDg5unaM5oDNig8em0/2m9d9TYvrRuamjY0tHFnPQ==}
+    peerDependencies:
+      react: ^18.2.0
+
+  '@atlaskit/link@3.2.0':
+    resolution: {integrity: sha512-j8NmZSkwASH5307HTzbIjfROaujbUYtSpHk6Ad3wi4Ip0IxinYQ6MUm66A8AUcLBbaDdIet2hgsI1YB8AcSdNg==}
+    peerDependencies:
+      react: ^18.2.0
+
+  '@atlaskit/platform-feature-flags@1.1.1':
+    resolution: {integrity: sha512-YKuy3RsqCEoNALiMHVma0GGHkzZMSIBsEgZlV/2TPw65QRzOWJvKA3ZIKucmXzr3m7AUqg1XHwXvVlUuNZhUgg==}
+
+  '@atlaskit/pragmatic-drag-and-drop@1.7.0':
+    resolution: {integrity: sha512-ADzj3c2PT448hmcKqmeHeE1XXYNqNJguhcIgVoQHZccJ/+pNN4gW3Ct5zv7ZylSJdR5bTK0YXf8PbzRXBhIx3w==}
+
+  '@atlaskit/primitives@14.8.1':
+    resolution: {integrity: sha512-A24+9rvBJpdtDL3EIl4aucRKk+XKWOO1r8Vj16G2voiKOaB7oWVXmpfvoNOAPqrHDQVUe9zN0VZ8JzdVUoTC7Q==}
+    peerDependencies:
+      react: ^18.2.0
+
+  '@atlaskit/tokens@4.9.1':
+    resolution: {integrity: sha512-f8BvV+ZAi+0NV7xZzO12Fe4C/sPSXKaalwYOuO9tIjOeaR3ot6vY//rDGP/rKCC+HBsY6GoLcIsBs3UnERxyGQ==}
+    peerDependencies:
+      react: ^18.2.0
+
+  '@atlaskit/visually-hidden@3.0.3':
+    resolution: {integrity: sha512-tU2KX0Hdn4DTL0DejO5j27RuySBdWRQQNVEvmNs20F5YnVQla/wGt1a85Y0widuBOn3H/RgTRuHPsChk9fimHg==}
+    peerDependencies:
+      react: ^18.2.0
+
   '@auth/core@0.39.0':
     resolution: {integrity: sha512-jusviw/sUSfAh6S/wjY5tRmJOq0Itd3ImF+c/b4HB9DfmfChtcfVJTNJeqCeExeCG8oh4PBKRsMQJsn2W6NhFQ==}
     peerDependencies:
@@ -96,13 +164,96 @@ packages:
       nodemailer:
         optional: true
 
+  '@babel/code-frame@7.27.1':
+    resolution: {integrity: sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/generator@7.27.3':
+    resolution: {integrity: sha512-xnlJYj5zepml8NXtjkG0WquFUv8RskFqyFcVgTBp5k+NaA/8uw/K+OSVf8AMGw5e9HKP2ETd5xpK5MLZQD6b4Q==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-module-imports@7.27.1':
+    resolution: {integrity: sha512-0gSFWUPNXNopqtIPQvlD5WgXYI5GY2kP2cCvoT8kczjbfcfuIljTbcWrulD1CIPIX2gt1wghbDy08yE1p+/r3w==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-string-parser@7.27.1':
+    resolution: {integrity: sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/helper-validator-identifier@7.27.1':
+    resolution: {integrity: sha512-D2hP9eA+Sqx1kBZgzxZh0y1trbuU+JoDkiEwqhQ36nodYqJwyEIhPSdMNd7lOm/4io72luTPWH20Yda0xOuUow==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/parser@7.27.4':
+    resolution: {integrity: sha512-BRmLHGwpUqLFR2jzx9orBuX/ABDkj2jLKOXrHDTN2aOKL+jFDDKaRNo9nyYsIl9h/UE/7lMKdDjKQQyxKKDZ7g==}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
+
   '@babel/runtime@7.27.0':
     resolution: {integrity: sha512-VtPOkrdPHZsKc/clNqyi9WUA8TINkZ4cGk63UUE3u4pmB2k+ZMQRDuIOagv8UVd6j7k0T3+RRIb7beKTebNbcw==}
     engines: {node: '>=6.9.0'}
 
+  '@babel/template@7.27.2':
+    resolution: {integrity: sha512-LPDZ85aEJyYSd18/DkjNh4/y1ntkE5KwUHWTiqgRxruuZL2F1yuHligVHLvcHY2vMHXttKFpJn6LwfI7cw7ODw==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/traverse@7.27.4':
+    resolution: {integrity: sha512-oNcu2QbHqts9BtOWJosOVJapWjBDSxGCpFvikNR5TGDYDQf3JwpIoMzIKrvfoti93cLfPJEG4tH9SPVeyCGgdA==}
+    engines: {node: '>=6.9.0'}
+
+  '@babel/types@7.27.3':
+    resolution: {integrity: sha512-Y1GkI4ktrtvmawoSq+4FCVHNryea6uR+qUQy0AGxLSsjCX0nVmkYQMBLHDkXZuo5hGx7eYdnIaslsdBFm7zbUw==}
+    engines: {node: '>=6.9.0'}
+
+  '@compiled/react@0.18.4':
+    resolution: {integrity: sha512-tO0cAZTOMky8IcBscs6VQsMRUos8nXixIsQWPY8XWbF5JYYkIxuJ0ojpkjdUBkXBdgdjBjp6kczoub8BLPjHZg==}
+    peerDependencies:
+      react: '>= 16.12.0'
+
   '@emnapi/runtime@1.4.0':
     resolution: {integrity: sha512-64WYIf4UYcdLnbKn/umDlNjQDSS8AgZrI/R9+x5ilkUVFxXcA1Ebl+gQLc/6mERA4407Xof0R7wEyEuj091CVw==}
 
+  '@emotion/babel-plugin@11.13.5':
+    resolution: {integrity: sha512-pxHCpT2ex+0q+HH91/zsdHkw/lXd468DIN2zvfvLtPKLLMo6gQj7oLObq8PhkrxOZb/gGCq03S3Z7PDhS8pduQ==}
+
+  '@emotion/cache@11.14.0':
+    resolution: {integrity: sha512-L/B1lc/TViYk4DcpGxtAVbx0ZyiKM5ktoIyafGkH6zg/tj+mA+NE//aPYKG0k8kCHSHVJrpLpcAlOBEXQ3SavA==}
+
+  '@emotion/hash@0.9.2':
+    resolution: {integrity: sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g==}
+
+  '@emotion/memoize@0.9.0':
+    resolution: {integrity: sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==}
+
+  '@emotion/react@11.14.0':
+    resolution: {integrity: sha512-O000MLDBDdk/EohJPFUqvnp4qnHeYkVP5B0xEG0D/L7cOKP9kefu2DXn8dj74cQfsEzUqh+sr1RzFqiL1o+PpA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: '>=16.8.0'
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
+  '@emotion/serialize@1.3.3':
+    resolution: {integrity: sha512-EISGqt7sSNWHGI76hC7x1CksiXPahbxEOrC5RjmFRJTqLyEK9/9hZvBbiYn70dw4wuwMKiEMCUlR6ZXTSWQqxA==}
+
+  '@emotion/sheet@1.4.0':
+    resolution: {integrity: sha512-fTBW9/8r2w3dXWYM4HCB1Rdp8NLibOw2+XELH5m5+AkWiL/KqYX6dc0kKYlaYyKjrQ6ds33MCdMPEwgs2z1rqg==}
+
+  '@emotion/unitless@0.10.0':
+    resolution: {integrity: sha512-dFoMUuQA20zvtVTuxZww6OHoJYgrzfKM1t52mVySDJnMSEa08ruEvdYQbhvyu6soU+NeLVd3yKfTfT0NeV6qGg==}
+
+  '@emotion/use-insertion-effect-with-fallbacks@1.2.0':
+    resolution: {integrity: sha512-yJMtVdH59sxi/aVJBpk9FQq+OR8ll5GT8oWd57UpeaKEVGab41JWaCFA7FRLoMLloOZF/c/wsPoe+bfGmRKgDg==}
+    peerDependencies:
+      react: '>=16.8.0'
+
+  '@emotion/utils@1.4.2':
+    resolution: {integrity: sha512-3vLclRofFziIa3J2wDh9jjbkUz9qk5Vi3IZ/FSTKViB0k+ef0fPV7dYrUIugbgupYDx7v9ud/SjrtEP8Y4xLoA==}
+
+  '@emotion/weak-memoize@0.4.0':
+    resolution: {integrity: sha512-snKqtPW01tN0ui7yu9rGv69aJXr/a/Ywvl11sUjNtEcRc+ng/mQriFL0wLXMef74iHa/EkftbDzU9F8iFbH+zg==}
+
   '@heroicons/react@2.2.0':
     resolution: {integrity: sha512-LMcepvRaS9LYHJGsF0zzmgKCUim/X3N/DQKc4jepAXJ7l8QxJ1PmxJzqplF2Z3FE4PqBAIGyJAQ/w4B5dsqbtQ==}
     peerDependencies:
@@ -319,6 +470,12 @@ packages:
     engines: {node: '>=18'}
     hasBin: true
 
+  '@statsig/client-core@3.17.2':
+    resolution: {integrity: sha512-7jq4H2SinknR4L51lzaI2VodGR6BfO5paRRPAKubqGIG35NjwQ0Z0MozPCuR94aL0SV+VvwMsys3zavtdLV9Ng==}
+
+  '@statsig/js-client@3.17.2':
+    resolution: {integrity: sha512-wKlo0FA/h8TrNt+kJc9nHRIMcgHrpdgMrsQlK19gMy8wRDD0Xs5VIKnVN8MNP7JRNvQgEGaoXLR5eXyPQ8h3RA==}
+
   '@swc/counter@0.1.3':
     resolution: {integrity: sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==}
 
@@ -336,6 +493,9 @@ packages:
   '@types/node@22.15.0':
     resolution: {integrity: sha512-99S8dWD2DkeE6PBaEDw+In3aar7hdoBvjyJMR6vaKBTzpvR0P00ClzJMOoVrj9D2+Sy/YCwACYHnBTpMhg1UCA==}
 
+  '@types/parse-json@4.0.2':
+    resolution: {integrity: sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==}
+
   '@types/prop-types@15.7.12':
     resolution: {integrity: sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==}
 
@@ -400,6 +560,10 @@ packages:
     peerDependencies:
       postcss: ^8.1.0
 
+  babel-plugin-macros@3.1.0:
+    resolution: {integrity: sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==}
+    engines: {node: '>=10', npm: '>=6'}
+
   balanced-match@1.0.2:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
 
@@ -411,6 +575,9 @@ packages:
     resolution: {integrity: sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==}
     engines: {node: '>=8'}
 
+  bind-event-listener@3.0.0:
+    resolution: {integrity: sha512-PJvH288AWQhKs2v9zyfYdPzlPqf5bXbGMmhmUIY9x4dAUGIWgomO771oBQNwJnMQSnUIXhKu6sgzpBRXTlvb8Q==}
+
   brace-expansion@1.1.11:
     resolution: {integrity: sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==}
 
@@ -430,6 +597,10 @@ packages:
     resolution: {integrity: sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==}
     engines: {node: '>=10.16.0'}
 
+  callsites@3.1.0:
+    resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
+    engines: {node: '>=6'}
+
   camelcase-css@2.0.1:
     resolution: {integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==}
     engines: {node: '>= 6'}
@@ -480,6 +651,13 @@ packages:
   console-control-strings@1.1.0:
     resolution: {integrity: sha512-ty/fTekppD2fIwRvnZAVdeOiGd1c7YXEixbgJTNzqcxJWKQnjJ/V1bNEEE6hygpM3WjwHFUVK6HTjWSzV4a8sQ==}
 
+  convert-source-map@1.9.0:
+    resolution: {integrity: sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==}
+
+  cosmiconfig@7.1.0:
+    resolution: {integrity: sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==}
+    engines: {node: '>=10'}
+
   cross-spawn@7.0.3:
     resolution: {integrity: sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==}
     engines: {node: '>= 8'}
@@ -529,10 +707,20 @@ packages:
   emoji-regex@9.2.2:
     resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==}
 
+  error-ex@1.3.2:
+    resolution: {integrity: sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==}
+
   escalade@3.2.0:
     resolution: {integrity: sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==}
     engines: {node: '>=6'}
 
+  escape-string-regexp@4.0.0:
+    resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
+    engines: {node: '>=10'}
+
+  eventemitter2@4.1.2:
+    resolution: {integrity: sha512-erx0niBaTi8B7ywjGAcg8ilGNRl/xs/o4MO2ZMpRlpZ62mYzjGTBlOpxxRIrPQqBs9mbXkEux6aR+Sc5vQ/wUw==}
+
   fast-glob@3.3.2:
     resolution: {integrity: sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==}
     engines: {node: '>=8.6.0'}
@@ -544,6 +732,9 @@ packages:
     resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
     engines: {node: '>=8'}
 
+  find-root@1.1.0:
+    resolution: {integrity: sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==}
+
   foreground-child@3.1.1:
     resolution: {integrity: sha512-TMKDUnIte6bfb5nWv7V/caI169OHgvwjb7V4WkeUvbQQdjr5rWKqHFiKWb/fcOwB+CzBT+qbWjvj+DVwRskpIg==}
     engines: {node: '>=14'}
@@ -593,6 +784,10 @@ packages:
     resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==}
     deprecated: Glob versions prior to v9 are no longer supported
 
+  globals@11.12.0:
+    resolution: {integrity: sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==}
+    engines: {node: '>=4'}
+
   has-unicode@2.0.1:
     resolution: {integrity: sha512-8Rf9Y83NBReMnx0gFzA8JImQACstCYWUplepDa9xprwwtmgEZUF0h/i5xSA625zB/I37EtrswSST6OXxwaaIJQ==}
 
@@ -600,10 +795,17 @@ packages:
     resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
     engines: {node: '>= 0.4'}
 
+  hoist-non-react-statics@3.3.2:
+    resolution: {integrity: sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==}
+
   https-proxy-agent@5.0.1:
     resolution: {integrity: sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==}
     engines: {node: '>= 6'}
 
+  import-fresh@3.3.1:
+    resolution: {integrity: sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==}
+    engines: {node: '>=6'}
+
   inflight@1.0.6:
     resolution: {integrity: sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==}
     deprecated: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
@@ -611,6 +813,9 @@ packages:
   inherits@2.0.4:
     resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
 
+  is-arrayish@0.2.1:
+    resolution: {integrity: sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==}
+
   is-arrayish@0.3.2:
     resolution: {integrity: sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==}
 
@@ -654,6 +859,14 @@ packages:
   js-tokens@4.0.0:
     resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
 
+  jsesc@3.1.0:
+    resolution: {integrity: sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==}
+    engines: {node: '>=6'}
+    hasBin: true
+
+  json-parse-even-better-errors@2.3.1:
+    resolution: {integrity: sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==}
+
   lilconfig@3.1.3:
     resolution: {integrity: sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==}
     engines: {node: '>=14'}
@@ -807,6 +1020,14 @@ packages:
   once@1.4.0:
     resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
 
+  parent-module@1.0.1:
+    resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
+    engines: {node: '>=6'}
+
+  parse-json@5.2.0:
+    resolution: {integrity: sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==}
+    engines: {node: '>=8'}
+
   path-is-absolute@1.0.1:
     resolution: {integrity: sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==}
     engines: {node: '>=0.10.0'}
@@ -822,6 +1043,10 @@ packages:
     resolution: {integrity: sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==}
     engines: {node: '>=16 || 14 >=14.18'}
 
+  path-type@4.0.0:
+    resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
+    engines: {node: '>=8'}
+
   picocolors@1.1.1:
     resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
 
@@ -920,6 +1145,9 @@ packages:
   queue-microtask@1.2.3:
     resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
 
+  raf-schd@4.0.3:
+    resolution: {integrity: sha512-tQkJl2GRWh83ui2DiPTJz9wEiMN20syf+5oKfB03yYP7ioZcJwsIK8FjrtLwH1m7C7e+Tt2yYBlrOpdT+dyeIQ==}
+
   react-dom@19.0.0-rc-f38c22b244-20240704:
     resolution: {integrity: sha512-g89q2pf3irdpKFUMgCQgtxgqo3TSV1k1J6Sc8God4FwfxuNmAOOthkijENe5XZe6VeV1tor9DPzpjdTD9EyvNw==}
     peerDependencies:
@@ -934,6 +1162,16 @@ packages:
       react: '>=16.6.0'
       react-dom: '>=16.6.0'
 
+  react-uid@2.4.0:
+    resolution: {integrity: sha512-+MVs/25NrcZuGrmlVRWPOSsbS8y72GJOBsR7d68j3/wqOrRBF52U29XAw4+XSelw0Vm6s5VmGH5mCbTCPGVCVg==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   react@19.0.0-rc-f38c22b244-20240704:
     resolution: {integrity: sha512-OP8O6Oc1rdR9IdIKJRKaL1PYd4eGkn6f88VqiygWyyG4P4RmPPix5pp7MatqSt9TnBOcVT+lBMGoVxRgUFeudQ==}
     engines: {node: '>=0.10.0'}
@@ -952,6 +1190,10 @@ packages:
   regenerator-runtime@0.14.1:
     resolution: {integrity: sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==}
 
+  resolve-from@4.0.0:
+    resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
+    engines: {node: '>=4'}
+
   resolve@1.22.8:
     resolution: {integrity: sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==}
     hasBin: true
@@ -1017,6 +1259,10 @@ packages:
     resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
     engines: {node: '>=0.10.0'}
 
+  source-map@0.5.7:
+    resolution: {integrity: sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==}
+    engines: {node: '>=0.10.0'}
+
   streamsearch@1.1.0:
     resolution: {integrity: sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==}
     engines: {node: '>=10.0.0'}
@@ -1053,6 +1299,9 @@ packages:
       babel-plugin-macros:
         optional: true
 
+  stylis@4.2.0:
+    resolution: {integrity: sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==}
+
   sucrase@3.35.0:
     resolution: {integrity: sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==}
     engines: {node: '>=16 || 14 >=14.17'}
@@ -1078,6 +1327,9 @@ packages:
   thenify@3.3.1:
     resolution: {integrity: sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==}
 
+  tiny-invariant@1.3.3:
+    resolution: {integrity: sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==}
+
   to-regex-range@5.0.1:
     resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
     engines: {node: '>=8.0'}
@@ -1111,6 +1363,11 @@ packages:
     peerDependencies:
       react: '*'
 
+  use-memo-one@1.1.3:
+    resolution: {integrity: sha512-g66/K7ZQGYrI6dy8GLpVcMsBp4s17xNkYJVSMvTEevGy3nDxHOfE6z8BVE22+5G5x7t3+bhzrlTDB7ObrEE0cQ==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+
   util-deprecate@1.0.2:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
 
@@ -1146,6 +1403,10 @@ packages:
   yallist@4.0.0:
     resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==}
 
+  yaml@1.10.2:
+    resolution: {integrity: sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==}
+    engines: {node: '>= 6'}
+
   yaml@2.4.3:
     resolution: {integrity: sha512-sntgmxj8o7DE7g/Qi60cqpLBA3HG3STcDA0kO+WfB05jEKhZMbY7umNm2rBpQvsmZ16/lPXCJGW2672dgOUkrg==}
     engines: {node: '>= 14'}
@@ -1158,6 +1419,146 @@ snapshots:
 
   '@alloc/quick-lru@5.2.0': {}
 
+  '@atlaskit/analytics-next-stable-react-context@1.0.1(react@19.0.0-rc-f38c22b244-20240704)':
+    dependencies:
+      react: 19.0.0-rc-f38c22b244-20240704
+      tslib: 2.8.1
+
+  '@atlaskit/analytics-next@11.0.0(react-dom@19.0.0-rc-f38c22b244-20240704(react@19.0.0-rc-f38c22b244-20240704))(react@19.0.0-rc-f38c22b244-20240704)':
+    dependencies:
+      '@atlaskit/analytics-next-stable-react-context': 1.0.1(react@19.0.0-rc-f38c22b244-20240704)
+      '@atlaskit/platform-feature-flags': 1.1.1(react@19.0.0-rc-f38c22b244-20240704)
+      '@babel/runtime': 7.27.0
+      prop-types: 15.8.1
+      react: 19.0.0-rc-f38c22b244-20240704
+      react-dom: 19.0.0-rc-f38c22b244-20240704(react@19.0.0-rc-f38c22b244-20240704)
+      use-memo-one: 1.1.3(react@19.0.0-rc-f38c22b244-20240704)
+
+  '@atlaskit/app-provider@2.2.0(@types/react@18.3.20)(react@19.0.0-rc-f38c22b244-20240704)':
+    dependencies:
+      '@atlaskit/platform-feature-flags': 1.1.1(react@19.0.0-rc-f38c22b244-20240704)
+      '@atlaskit/tokens': 4.9.1(@types/react@18.3.20)(react@19.0.0-rc-f38c22b244-20240704)
+      '@babel/runtime': 7.27.0
+      bind-event-listener: 3.0.0
+      react: 19.0.0-rc-f38c22b244-20240704
+    transitivePeerDependencies:
+      - '@types/react'
+      - supports-color
+
+  '@atlaskit/atlassian-context@0.2.0(react@19.0.0-rc-f38c22b244-20240704)':
+    dependencies:
+      '@babel/runtime': 7.27.0
+      react: 19.0.0-rc-f38c22b244-20240704
+
+  '@atlaskit/css@0.10.6(@types/react@18.3.20)(react@19.0.0-rc-f38c22b244-20240704)':
+    dependencies:
+      '@atlaskit/tokens': 4.9.1(@types/react@18.3.20)(react@19.0.0-rc-f38c22b244-20240704)
+      '@babel/runtime': 7.27.0
+      '@compiled/react': 0.18.4(react@19.0.0-rc-f38c22b244-20240704)
+      react: 19.0.0-rc-f38c22b244-20240704
+    transitivePeerDependencies:
+      - '@types/react'
+      - supports-color
+
+  '@atlaskit/ds-lib@4.0.0(@types/react@18.3.20)(react@19.0.0-rc-f38c22b244-20240704)':
+    dependencies:
+      '@atlaskit/platform-feature-flags': 1.1.1(react@19.0.0-rc-f38c22b244-20240704)
+      '@babel/runtime': 7.27.0
+      bind-event-listener: 3.0.0
+      react: 19.0.0-rc-f38c22b244-20240704
+      react-uid: 2.4.0(@types/react@18.3.20)(react@19.0.0-rc-f38c22b244-20240704)
+    transitivePeerDependencies:
+      - '@types/react'
+
+  '@atlaskit/feature-gate-js-client@5.3.1(react@19.0.0-rc-f38c22b244-20240704)':
+    dependencies:
+      '@atlaskit/atlassian-context': 0.2.0(react@19.0.0-rc-f38c22b244-20240704)
+      '@babel/runtime': 7.27.0
+      '@statsig/client-core': 3.17.2
+      '@statsig/js-client': 3.17.2
+      eventemitter2: 4.1.2
+    transitivePeerDependencies:
+      - react
+
+  '@atlaskit/interaction-context@3.0.0(react@19.0.0-rc-f38c22b244-20240704)':
+    dependencies:
+      '@babel/runtime': 7.27.0
+      react: 19.0.0-rc-f38c22b244-20240704
+
+  '@atlaskit/link@3.2.0(@types/react@18.3.20)(react-dom@19.0.0-rc-f38c22b244-20240704(react@19.0.0-rc-f38c22b244-20240704))(react@19.0.0-rc-f38c22b244-20240704)':
+    dependencies:
+      '@atlaskit/css': 0.10.6(@types/react@18.3.20)(react@19.0.0-rc-f38c22b244-20240704)
+      '@atlaskit/platform-feature-flags': 1.1.1(react@19.0.0-rc-f38c22b244-20240704)
+      '@atlaskit/primitives': 14.8.1(@types/react@18.3.20)(react-dom@19.0.0-rc-f38c22b244-20240704(react@19.0.0-rc-f38c22b244-20240704))(react@19.0.0-rc-f38c22b244-20240704)
+      '@atlaskit/tokens': 4.9.1(@types/react@18.3.20)(react@19.0.0-rc-f38c22b244-20240704)
+      '@babel/runtime': 7.27.0
+      '@compiled/react': 0.18.4(react@19.0.0-rc-f38c22b244-20240704)
+      react: 19.0.0-rc-f38c22b244-20240704
+    transitivePeerDependencies:
+      - '@types/react'
+      - react-dom
+      - supports-color
+
+  '@atlaskit/platform-feature-flags@1.1.1(react@19.0.0-rc-f38c22b244-20240704)':
+    dependencies:
+      '@atlaskit/feature-gate-js-client': 5.3.1(react@19.0.0-rc-f38c22b244-20240704)
+      '@babel/runtime': 7.27.0
+    transitivePeerDependencies:
+      - react
+
+  '@atlaskit/pragmatic-drag-and-drop@1.7.0(@types/react@18.3.20)(react-dom@19.0.0-rc-f38c22b244-20240704(react@19.0.0-rc-f38c22b244-20240704))(react@19.0.0-rc-f38c22b244-20240704)':
+    dependencies:
+      '@atlaskit/link': 3.2.0(@types/react@18.3.20)(react-dom@19.0.0-rc-f38c22b244-20240704(react@19.0.0-rc-f38c22b244-20240704))(react@19.0.0-rc-f38c22b244-20240704)
+      '@atlaskit/platform-feature-flags': 1.1.1(react@19.0.0-rc-f38c22b244-20240704)
+      '@babel/runtime': 7.27.0
+      bind-event-listener: 3.0.0
+      raf-schd: 4.0.3
+    transitivePeerDependencies:
+      - '@types/react'
+      - react
+      - react-dom
+      - supports-color
+
+  '@atlaskit/primitives@14.8.1(@types/react@18.3.20)(react-dom@19.0.0-rc-f38c22b244-20240704(react@19.0.0-rc-f38c22b244-20240704))(react@19.0.0-rc-f38c22b244-20240704)':
+    dependencies:
+      '@atlaskit/analytics-next': 11.0.0(react-dom@19.0.0-rc-f38c22b244-20240704(react@19.0.0-rc-f38c22b244-20240704))(react@19.0.0-rc-f38c22b244-20240704)
+      '@atlaskit/app-provider': 2.2.0(@types/react@18.3.20)(react@19.0.0-rc-f38c22b244-20240704)
+      '@atlaskit/css': 0.10.6(@types/react@18.3.20)(react@19.0.0-rc-f38c22b244-20240704)
+      '@atlaskit/ds-lib': 4.0.0(@types/react@18.3.20)(react@19.0.0-rc-f38c22b244-20240704)
+      '@atlaskit/interaction-context': 3.0.0(react@19.0.0-rc-f38c22b244-20240704)
+      '@atlaskit/tokens': 4.9.1(@types/react@18.3.20)(react@19.0.0-rc-f38c22b244-20240704)
+      '@atlaskit/visually-hidden': 3.0.3(react@19.0.0-rc-f38c22b244-20240704)
+      '@babel/runtime': 7.27.0
+      '@compiled/react': 0.18.4(react@19.0.0-rc-f38c22b244-20240704)
+      '@emotion/react': 11.14.0(@types/react@18.3.20)(react@19.0.0-rc-f38c22b244-20240704)
+      '@emotion/serialize': 1.3.3
+      bind-event-listener: 3.0.0
+      react: 19.0.0-rc-f38c22b244-20240704
+      tiny-invariant: 1.3.3
+    transitivePeerDependencies:
+      - '@types/react'
+      - react-dom
+      - supports-color
+
+  '@atlaskit/tokens@4.9.1(@types/react@18.3.20)(react@19.0.0-rc-f38c22b244-20240704)':
+    dependencies:
+      '@atlaskit/ds-lib': 4.0.0(@types/react@18.3.20)(react@19.0.0-rc-f38c22b244-20240704)
+      '@atlaskit/platform-feature-flags': 1.1.1(react@19.0.0-rc-f38c22b244-20240704)
+      '@babel/runtime': 7.27.0
+      '@babel/traverse': 7.27.4
+      '@babel/types': 7.27.3
+      bind-event-listener: 3.0.0
+      react: 19.0.0-rc-f38c22b244-20240704
+    transitivePeerDependencies:
+      - '@types/react'
+      - supports-color
+
+  '@atlaskit/visually-hidden@3.0.3(react@19.0.0-rc-f38c22b244-20240704)':
+    dependencies:
+      '@babel/runtime': 7.27.0
+      '@compiled/react': 0.18.4(react@19.0.0-rc-f38c22b244-20240704)
+      react: 19.0.0-rc-f38c22b244-20240704
+
   '@auth/core@0.39.0':
     dependencies:
       '@panva/hkdf': 1.2.1
@@ -1166,15 +1567,136 @@ snapshots:
       preact: 10.24.3
       preact-render-to-string: 6.5.11(preact@10.24.3)
 
+  '@babel/code-frame@7.27.1':
+    dependencies:
+      '@babel/helper-validator-identifier': 7.27.1
+      js-tokens: 4.0.0
+      picocolors: 1.1.1
+
+  '@babel/generator@7.27.3':
+    dependencies:
+      '@babel/parser': 7.27.4
+      '@babel/types': 7.27.3
+      '@jridgewell/gen-mapping': 0.3.5
+      '@jridgewell/trace-mapping': 0.3.25
+      jsesc: 3.1.0
+
+  '@babel/helper-module-imports@7.27.1':
+    dependencies:
+      '@babel/traverse': 7.27.4
+      '@babel/types': 7.27.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-string-parser@7.27.1': {}
+
+  '@babel/helper-validator-identifier@7.27.1': {}
+
+  '@babel/parser@7.27.4':
+    dependencies:
+      '@babel/types': 7.27.3
+
   '@babel/runtime@7.27.0':
     dependencies:
       regenerator-runtime: 0.14.1
 
+  '@babel/template@7.27.2':
+    dependencies:
+      '@babel/code-frame': 7.27.1
+      '@babel/parser': 7.27.4
+      '@babel/types': 7.27.3
+
+  '@babel/traverse@7.27.4':
+    dependencies:
+      '@babel/code-frame': 7.27.1
+      '@babel/generator': 7.27.3
+      '@babel/parser': 7.27.4
+      '@babel/template': 7.27.2
+      '@babel/types': 7.27.3
+      debug: 4.3.5
+      globals: 11.12.0
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/types@7.27.3':
+    dependencies:
+      '@babel/helper-string-parser': 7.27.1
+      '@babel/helper-validator-identifier': 7.27.1
+
+  '@compiled/react@0.18.4(react@19.0.0-rc-f38c22b244-20240704)':
+    dependencies:
+      csstype: 3.1.3
+      react: 19.0.0-rc-f38c22b244-20240704
+
   '@emnapi/runtime@1.4.0':
     dependencies:
       tslib: 2.8.1
     optional: true
 
+  '@emotion/babel-plugin@11.13.5':
+    dependencies:
+      '@babel/helper-module-imports': 7.27.1
+      '@babel/runtime': 7.27.0
+      '@emotion/hash': 0.9.2
+      '@emotion/memoize': 0.9.0
+      '@emotion/serialize': 1.3.3
+      babel-plugin-macros: 3.1.0
+      convert-source-map: 1.9.0
+      escape-string-regexp: 4.0.0
+      find-root: 1.1.0
+      source-map: 0.5.7
+      stylis: 4.2.0
+    transitivePeerDependencies:
+      - supports-color
+
+  '@emotion/cache@11.14.0':
+    dependencies:
+      '@emotion/memoize': 0.9.0
+      '@emotion/sheet': 1.4.0
+      '@emotion/utils': 1.4.2
+      '@emotion/weak-memoize': 0.4.0
+      stylis: 4.2.0
+
+  '@emotion/hash@0.9.2': {}
+
+  '@emotion/memoize@0.9.0': {}
+
+  '@emotion/react@11.14.0(@types/react@18.3.20)(react@19.0.0-rc-f38c22b244-20240704)':
+    dependencies:
+      '@babel/runtime': 7.27.0
+      '@emotion/babel-plugin': 11.13.5
+      '@emotion/cache': 11.14.0
+      '@emotion/serialize': 1.3.3
+      '@emotion/use-insertion-effect-with-fallbacks': 1.2.0(react@19.0.0-rc-f38c22b244-20240704)
+      '@emotion/utils': 1.4.2
+      '@emotion/weak-memoize': 0.4.0
+      hoist-non-react-statics: 3.3.2
+      react: 19.0.0-rc-f38c22b244-20240704
+    optionalDependencies:
+      '@types/react': 18.3.20
+    transitivePeerDependencies:
+      - supports-color
+
+  '@emotion/serialize@1.3.3':
+    dependencies:
+      '@emotion/hash': 0.9.2
+      '@emotion/memoize': 0.9.0
+      '@emotion/unitless': 0.10.0
+      '@emotion/utils': 1.4.2
+      csstype: 3.1.3
+
+  '@emotion/sheet@1.4.0': {}
+
+  '@emotion/unitless@0.10.0': {}
+
+  '@emotion/use-insertion-effect-with-fallbacks@1.2.0(react@19.0.0-rc-f38c22b244-20240704)':
+    dependencies:
+      react: 19.0.0-rc-f38c22b244-20240704
+
+  '@emotion/utils@1.4.2': {}
+
+  '@emotion/weak-memoize@0.4.0': {}
+
   '@heroicons/react@2.2.0(react@19.0.0-rc-f38c22b244-20240704)':
     dependencies:
       react: 19.0.0-rc-f38c22b244-20240704
@@ -1345,6 +1867,12 @@ snapshots:
     dependencies:
       playwright: 1.52.0
 
+  '@statsig/client-core@3.17.2': {}
+
+  '@statsig/js-client@3.17.2':
+    dependencies:
+      '@statsig/client-core': 3.17.2
+
   '@swc/counter@0.1.3': {}
 
   '@swc/helpers@0.5.15':
@@ -1364,6 +1892,8 @@ snapshots:
     dependencies:
       undici-types: 6.21.0
 
+  '@types/parse-json@4.0.2': {}
+
   '@types/prop-types@15.7.12': {}
 
   '@types/react-dom@18.3.6(@types/react@18.3.20)':
@@ -1423,6 +1953,12 @@ snapshots:
       postcss: 8.5.3
       postcss-value-parser: 4.2.0
 
+  babel-plugin-macros@3.1.0:
+    dependencies:
+      '@babel/runtime': 7.27.0
+      cosmiconfig: 7.1.0
+      resolve: 1.22.8
+
   balanced-match@1.0.2: {}
 
   bcrypt@5.1.1:
@@ -1435,6 +1971,8 @@ snapshots:
 
   binary-extensions@2.3.0: {}
 
+  bind-event-listener@3.0.0: {}
+
   brace-expansion@1.1.11:
     dependencies:
       balanced-match: 1.0.2
@@ -1459,6 +1997,8 @@ snapshots:
     dependencies:
       streamsearch: 1.1.0
 
+  callsites@3.1.0: {}
+
   camelcase-css@2.0.1: {}
 
   caniuse-lite@1.0.30001702: {}
@@ -1507,6 +2047,16 @@ snapshots:
 
   console-control-strings@1.1.0: {}
 
+  convert-source-map@1.9.0: {}
+
+  cosmiconfig@7.1.0:
+    dependencies:
+      '@types/parse-json': 4.0.2
+      import-fresh: 3.3.1
+      parse-json: 5.2.0
+      path-type: 4.0.0
+      yaml: 1.10.2
+
   cross-spawn@7.0.3:
     dependencies:
       path-key: 3.1.1
@@ -1542,8 +2092,16 @@ snapshots:
 
   emoji-regex@9.2.2: {}
 
+  error-ex@1.3.2:
+    dependencies:
+      is-arrayish: 0.2.1
+
   escalade@3.2.0: {}
 
+  escape-string-regexp@4.0.0: {}
+
+  eventemitter2@4.1.2: {}
+
   fast-glob@3.3.2:
     dependencies:
       '@nodelib/fs.stat': 2.0.5
@@ -1560,6 +2118,8 @@ snapshots:
     dependencies:
       to-regex-range: 5.0.1
 
+  find-root@1.1.0: {}
+
   foreground-child@3.1.1:
     dependencies:
       cross-spawn: 7.0.3
@@ -1618,12 +2178,18 @@ snapshots:
       once: 1.4.0
       path-is-absolute: 1.0.1
 
+  globals@11.12.0: {}
+
   has-unicode@2.0.1: {}
 
   hasown@2.0.2:
     dependencies:
       function-bind: 1.1.2
 
+  hoist-non-react-statics@3.3.2:
+    dependencies:
+      react-is: 16.13.1
+
   https-proxy-agent@5.0.1:
     dependencies:
       agent-base: 6.0.2
@@ -1631,6 +2197,11 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  import-fresh@3.3.1:
+    dependencies:
+      parent-module: 1.0.1
+      resolve-from: 4.0.0
+
   inflight@1.0.6:
     dependencies:
       once: 1.4.0
@@ -1638,6 +2209,8 @@ snapshots:
 
   inherits@2.0.4: {}
 
+  is-arrayish@0.2.1: {}
+
   is-arrayish@0.3.2:
     optional: true
 
@@ -1673,6 +2246,10 @@ snapshots:
 
   js-tokens@4.0.0: {}
 
+  jsesc@3.1.0: {}
+
+  json-parse-even-better-errors@2.3.1: {}
+
   lilconfig@3.1.3: {}
 
   lines-and-columns@1.2.4: {}
@@ -1794,6 +2371,17 @@ snapshots:
     dependencies:
       wrappy: 1.0.2
 
+  parent-module@1.0.1:
+    dependencies:
+      callsites: 3.1.0
+
+  parse-json@5.2.0:
+    dependencies:
+      '@babel/code-frame': 7.27.1
+      error-ex: 1.3.2
+      json-parse-even-better-errors: 2.3.1
+      lines-and-columns: 1.2.4
+
   path-is-absolute@1.0.1: {}
 
   path-key@3.1.1: {}
@@ -1805,6 +2393,8 @@ snapshots:
       lru-cache: 10.2.2
       minipass: 7.1.2
 
+  path-type@4.0.0: {}
+
   picocolors@1.1.1: {}
 
   picomatch@2.3.1: {}
@@ -1889,6 +2479,8 @@ snapshots:
 
   queue-microtask@1.2.3: {}
 
+  raf-schd@4.0.3: {}
+
   react-dom@19.0.0-rc-f38c22b244-20240704(react@19.0.0-rc-f38c22b244-20240704):
     dependencies:
       react: 19.0.0-rc-f38c22b244-20240704
@@ -1905,6 +2497,13 @@ snapshots:
       react: 19.0.0-rc-f38c22b244-20240704
       react-dom: 19.0.0-rc-f38c22b244-20240704(react@19.0.0-rc-f38c22b244-20240704)
 
+  react-uid@2.4.0(@types/react@18.3.20)(react@19.0.0-rc-f38c22b244-20240704):
+    dependencies:
+      react: 19.0.0-rc-f38c22b244-20240704
+      tslib: 2.8.1
+    optionalDependencies:
+      '@types/react': 18.3.20
+
   react@19.0.0-rc-f38c22b244-20240704: {}
 
   read-cache@1.0.0:
@@ -1923,6 +2522,8 @@ snapshots:
 
   regenerator-runtime@0.14.1: {}
 
+  resolve-from@4.0.0: {}
+
   resolve@1.22.8:
     dependencies:
       is-core-module: 2.13.1
@@ -1997,6 +2598,8 @@ snapshots:
 
   source-map-js@1.2.1: {}
 
+  source-map@0.5.7: {}
+
   streamsearch@1.1.0: {}
 
   string-width@4.2.3:
@@ -2028,6 +2631,8 @@ snapshots:
       client-only: 0.0.1
       react: 19.0.0-rc-f38c22b244-20240704
 
+  stylis@4.2.0: {}
+
   sucrase@3.35.0:
     dependencies:
       '@jridgewell/gen-mapping': 0.3.5
@@ -2084,6 +2689,8 @@ snapshots:
     dependencies:
       any-promise: 1.3.0
 
+  tiny-invariant@1.3.3: {}
+
   to-regex-range@5.0.1:
     dependencies:
       is-number: 7.0.0
@@ -2108,6 +2715,10 @@ snapshots:
     dependencies:
       react: 19.0.0-rc-f38c22b244-20240704
 
+  use-memo-one@1.1.3(react@19.0.0-rc-f38c22b244-20240704):
+    dependencies:
+      react: 19.0.0-rc-f38c22b244-20240704
+
   util-deprecate@1.0.2: {}
 
   uuid@11.1.0: {}
@@ -2143,6 +2754,8 @@ snapshots:
 
   yallist@4.0.0: {}
 
+  yaml@1.10.2: {}
+
   yaml@2.4.3: {}
 
   zod@3.24.3: {}

From 790d75d2ffb52c7ac33d11ce89a30bd86d9d791d Mon Sep 17 00:00:00 2001
From: Manuel Bustillo <bustikiller@bustikiller.com>
Date: Sun, 1 Jun 2025 17:07:47 +0200
Subject: [PATCH 09/15] Fix UI assignment of guests to invitations

---
 app/ui/invitations/board.tsx | 34 +++++++++++++++++++++++++---------
 1 file changed, 25 insertions(+), 9 deletions(-)

diff --git a/app/ui/invitations/board.tsx b/app/ui/invitations/board.tsx
index 1d887ae..0830354 100644
--- a/app/ui/invitations/board.tsx
+++ b/app/ui/invitations/board.tsx
@@ -7,7 +7,7 @@ import { draggable, dropTargetForElements } from '@atlaskit/pragmatic-drag-and-d
 import { useEffect, useRef } from "react";
 import { useState } from "react";
 
-function InvitationCard(invitation: Invitation, allGuests: Guest[]) {
+function InvitationCard({ invitation, allGuests, onGuestAdded }: { invitation: Invitation, allGuests: Guest[], onGuestAdded: (guest: Guest) => void }) {
 
   const [guests, setGuests] = useState<Guest[]>(invitation.guests);
 
@@ -24,6 +24,7 @@ function InvitationCard(invitation: Invitation, allGuests: Guest[]) {
             const guestToAdd = allGuests.find((guest) => guest.id === guestId);
             if (guestToAdd) {
               setGuests((prevGuests) => [...prevGuests, guestToAdd]);
+              onGuestAdded(guestToAdd);
             }
           }
         },
@@ -84,11 +85,11 @@ export default function InvitationsBoard({ guests, invitations }: {
   const api = new AbstractApi<Invitation>();
   const serializer = new InvitationSerializer();
 
-
-  // Filter out guests that are already in invitations
-  const availableGuests = guests.filter(
-    (guest) => !invitations.some((invitation) =>
-      invitation.guests.some((invitedGuest) => invitedGuest.id === guest.id)
+  const [unassignedGuests, setUnassignedGuests] = useState<Guest[]>(
+    guests.filter(
+      (guest) => !invitations.some((invitation) =>
+        invitation.guests.some((invitedGuest) => invitedGuest.id === guest.id)
+      )
     )
   );
 
@@ -109,9 +110,11 @@ export default function InvitationsBoard({ guests, invitations }: {
     <div className="flex h-screen">
       {/* Left Column: Guests */}
       <div className="w-1/4 h-full overflow-auto border-r border-gray-300 p-4">
-        <h2 className="text-lg font-semibold mb-4">{guests.length} guests without invitation</h2>
+        <h2 className="text-lg font-semibold mb-4">{unassignedGuests.length} guests without invitation</h2>
         <div>
-          {availableGuests.map((guest, index) => GuestCard(guest))}
+          {unassignedGuests.map((guest) => (
+            <GuestCard key={guest.id} {...guest} />
+          ))}
         </div>
       </div>
 
@@ -128,9 +131,22 @@ export default function InvitationsBoard({ guests, invitations }: {
           Create New Invitation
         </button>
 
+
         <div className="grid grid-cols-4 gap-6">
-          {sortedInvitations.map((invitation, index) => (InvitationCard(invitation, guests)))}
+
+          {sortedInvitations.map((invitation) => (
+            <InvitationCard
+              key={invitation.id}
+              invitation={invitation}
+              allGuests={guests}
+              onGuestAdded={(guestAdded: Guest) => {
+                console.log(`Guest added: ${guestAdded.name}`);
+                setUnassignedGuests((prevUnassignedGuests) => prevUnassignedGuests.filter(g => g.id !== guestAdded.id));
+              }}
+            />
+          ))}
         </div>
+
       </div>
     </div>
   );

From b820bc837afd444c61540bae81e79b5925a0bbe5 Mon Sep 17 00:00:00 2001
From: Manuel Bustillo <bustikiller@bustikiller.com>
Date: Sun, 1 Jun 2025 17:15:39 +0200
Subject: [PATCH 10/15] Add newly created invitations to the start of the list

---
 app/api/abstract-api.tsx     | 10 +++++++---
 app/lib/invitation.tsx       |  2 +-
 app/ui/invitations/board.tsx |  9 ++++++---
 3 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/app/api/abstract-api.tsx b/app/api/abstract-api.tsx
index 7201a08..1321d4f 100644
--- a/app/api/abstract-api.tsx
+++ b/app/api/abstract-api.tsx
@@ -4,7 +4,7 @@ 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;
+  getAll(serializable: Serializable<T>, callback: (objets: T[]) => void): void;
   get(serializable: Serializable<T>, id: string, callback: (object: T) => void): void;
   create(serializable: Serializable<T>, object: T, callback: () => void): void;
   update(serializable: Serializable<T>, object: T, callback: () => void): void;
@@ -52,7 +52,7 @@ export class AbstractApi<T extends Entity> implements Api<T> {
       .catch((error) => console.error(error));
   }
 
-  create(serializable: Serializable<T>, object: T, callback: () => void): void {
+  create(serializable: Serializable<T>, object: T, callback: (createdObject: T) => void): void {
     fetch(`/api/${getSlug()}/${serializable.apiPath()}`, {
       method: 'POST',
       body: serializable.toJson(object),
@@ -60,7 +60,11 @@ export class AbstractApi<T extends Entity> implements Api<T> {
         'Content-Type': 'application/json',
         'X-CSRF-TOKEN': getCsrfToken(),
       }
-    }).then(callback)
+    })
+      .then((response) => response.json())
+      .then((data) => {
+        callback(serializable.fromJson(data));
+      })
       .catch((error) => console.error(error));
   }
 
diff --git a/app/lib/invitation.tsx b/app/lib/invitation.tsx
index 04dc81c..8a2a1ba 100644
--- a/app/lib/invitation.tsx
+++ b/app/lib/invitation.tsx
@@ -13,7 +13,7 @@ export class Invitation implements Entity {
 
 export class InvitationSerializer {
   fromJson(data: any): Invitation {
-    return new Invitation(data.id, data.guests.map((guest: any) => new Guest(guest.id, guest.name, guest.group_name, guest.groupId, guest.color, guest.status, guest.children)));
+    return new Invitation(data.id, (data.guests || []).map((guest: any) => new Guest(guest.id, guest.name, guest.group_name, guest.groupId, guest.color, guest.status, guest.children)));
   }
 
   toJson(invitation: Invitation): string {
diff --git a/app/ui/invitations/board.tsx b/app/ui/invitations/board.tsx
index 0830354..34928f9 100644
--- a/app/ui/invitations/board.tsx
+++ b/app/ui/invitations/board.tsx
@@ -78,13 +78,14 @@ function GuestCard(guest: Guest) {
   )
 }
 
-export default function InvitationsBoard({ guests, invitations }: {
+export default function InvitationsBoard({ guests, invitations: originalInvitations }: {
   guests: Array<Guest>,
   invitations: Array<Invitation>
 }) {
   const api = new AbstractApi<Invitation>();
   const serializer = new InvitationSerializer();
 
+  const [invitations, setInvitations] = useState<Invitation[]>(originalInvitations);
   const [unassignedGuests, setUnassignedGuests] = useState<Guest[]>(
     guests.filter(
       (guest) => !invitations.some((invitation) =>
@@ -93,6 +94,7 @@ export default function InvitationsBoard({ guests, invitations }: {
     )
   );
 
+
   // 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;
@@ -101,8 +103,9 @@ export default function InvitationsBoard({ guests, invitations }: {
   });
 
   function handleCreateInvitation() {
-    api.create(serializer, new Invitation(), () => {
-      console.log("Invitation created successfully");
+    api.create(serializer, new Invitation(), (createdInvitation) => {
+      console.log(`Invitation created successfully with ID: ${createdInvitation.id}`);
+      setInvitations((prevInvitations) => [createdInvitation, ...prevInvitations]);
     });
   }
 

From e6bb090b667255a568cbce0f4b987b5d71e25489 Mon Sep 17 00:00:00 2001
From: Manuel Bustillo <bustikiller@bustikiller.com>
Date: Sun, 1 Jun 2025 17:39:02 +0200
Subject: [PATCH 11/15] Update invitation via API when a guest is added

---
 app/lib/invitation.tsx       |  2 +-
 app/ui/invitations/board.tsx | 13 ++++++++-----
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/app/lib/invitation.tsx b/app/lib/invitation.tsx
index 8a2a1ba..ae5b1fd 100644
--- a/app/lib/invitation.tsx
+++ b/app/lib/invitation.tsx
@@ -17,7 +17,7 @@ export class InvitationSerializer {
   }
 
   toJson(invitation: Invitation): string {
-    return JSON.stringify({ invitation: { guests: invitation.guests.map(guest => ({ id: guest.id })) } });
+    return JSON.stringify({ invitation: { guest_ids: invitation.guests.map(guest => guest.id) } });
   }
 
   apiPath(): string {
diff --git a/app/ui/invitations/board.tsx b/app/ui/invitations/board.tsx
index 34928f9..d900041 100644
--- a/app/ui/invitations/board.tsx
+++ b/app/ui/invitations/board.tsx
@@ -13,18 +13,24 @@ function InvitationCard({ invitation, allGuests, onGuestAdded }: { invitation: I
 
   const ref = useRef<HTMLDivElement | null>(null);
 
+  const api = new AbstractApi<Invitation>();
+  const serializer = new InvitationSerializer();
+
   useEffect(() => {
     if (ref.current) {
       return dropTargetForElements({
         element: ref.current,
         onDrop: (data) => {
-          console.log('Dropped guest ID:', data.source.element.dataset.guestId);
           const guestId = data.source.element.dataset.guestId;
           if (guestId) {
             const guestToAdd = allGuests.find((guest) => guest.id === guestId);
             if (guestToAdd) {
               setGuests((prevGuests) => [...prevGuests, guestToAdd]);
-              onGuestAdded(guestToAdd);
+              invitation.guests.push(guestToAdd);
+
+              api.update(serializer, invitation, () => {
+                onGuestAdded(guestToAdd);
+              });
             }
           }
         },
@@ -61,7 +67,6 @@ function GuestCard(guest: Guest) {
     if (ref.current) {
       return draggable({
         element: ref.current,
-        onDragStart: () => console.log('Something started dragging in me!')
       });
     }
   }, [guest.id]);
@@ -104,7 +109,6 @@ export default function InvitationsBoard({ guests, invitations: originalInvitati
 
   function handleCreateInvitation() {
     api.create(serializer, new Invitation(), (createdInvitation) => {
-      console.log(`Invitation created successfully with ID: ${createdInvitation.id}`);
       setInvitations((prevInvitations) => [createdInvitation, ...prevInvitations]);
     });
   }
@@ -143,7 +147,6 @@ export default function InvitationsBoard({ guests, invitations: originalInvitati
               invitation={invitation}
               allGuests={guests}
               onGuestAdded={(guestAdded: Guest) => {
-                console.log(`Guest added: ${guestAdded.name}`);
                 setUnassignedGuests((prevUnassignedGuests) => prevUnassignedGuests.filter(g => g.id !== guestAdded.id));
               }}
             />

From f256e0f9e79591b6377dbfe930ef05bba45e32ce Mon Sep 17 00:00:00 2001
From: Manuel Bustillo <bustikiller@bustikiller.com>
Date: Sun, 1 Jun 2025 17:47:50 +0200
Subject: [PATCH 12/15] Allow deleting an invitation

---
 app/ui/invitations/board.tsx | 28 +++++++++++++++++++++++++---
 1 file changed, 25 insertions(+), 3 deletions(-)

diff --git a/app/ui/invitations/board.tsx b/app/ui/invitations/board.tsx
index d900041..b1517b3 100644
--- a/app/ui/invitations/board.tsx
+++ b/app/ui/invitations/board.tsx
@@ -4,11 +4,17 @@ import { AbstractApi } from "@/app/api/abstract-api";
 import { Guest } from "@/app/lib/guest";
 import { Invitation, InvitationSerializer } from "@/app/lib/invitation";
 import { draggable, dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
+import { TrashIcon } from "@heroicons/react/24/outline";
 import { useEffect, useRef } from "react";
 import { useState } from "react";
 
-function InvitationCard({ invitation, allGuests, onGuestAdded }: { invitation: Invitation, allGuests: Guest[], onGuestAdded: (guest: Guest) => void }) {
-
+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);
@@ -42,9 +48,18 @@ function InvitationCard({ invitation, allGuests, onGuestAdded }: { invitation: I
     <div
       key={invitation.id}
       ref={ref}
-      className="flex items-center justify-center w-full bg-green-800 border border-green-900"
+      className="relative flex items-center justify-center w-full bg-green-800 border border-green-900 group"
       style={{ aspectRatio: "1.618 / 1" }}
     >
+      <TrashIcon
+        className="w-5 h-5 text-white absolute top-2 right-2 opacity-0 group-hover:opacity-100 cursor-pointer"
+        onClick={() => {
+          api.destroy(serializer, invitation, () => {
+            onDestroy(invitation);
+          });
+        }}
+      />
+
       {guests.length === 0 ? (
         <p className="text-center text-yellow-500 text-lg italic">
           (empty invitation)
@@ -149,6 +164,13 @@ export default function InvitationsBoard({ guests, invitations: originalInvitati
               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>

From 72691f70702f9aee3da2ffd6432bc5667f301111 Mon Sep 17 00:00:00 2001
From: Manuel Bustillo <bustikiller@bustikiller.com>
Date: Sun, 1 Jun 2025 17:48:47 +0200
Subject: [PATCH 13/15] Add a confirmation dialog

---
 app/ui/invitations/board.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/app/ui/invitations/board.tsx b/app/ui/invitations/board.tsx
index b1517b3..8053d88 100644
--- a/app/ui/invitations/board.tsx
+++ b/app/ui/invitations/board.tsx
@@ -54,9 +54,11 @@ function InvitationCard({ invitation, allGuests, onGuestAdded, onDestroy }: {
       <TrashIcon
         className="w-5 h-5 text-white absolute top-2 right-2 opacity-0 group-hover:opacity-100 cursor-pointer"
         onClick={() => {
-          api.destroy(serializer, invitation, () => {
-            onDestroy(invitation);
-          });
+          if (window.confirm("Are you sure you want to delete this invitation?")) {
+            api.destroy(serializer, invitation, () => {
+              onDestroy(invitation);
+            });
+          }
         }}
       />
 

From 98d9a2544d12a17966a1aa11f2053036d61fc423 Mon Sep 17 00:00:00 2001
From: Manuel Bustillo <bustikiller@bustikiller.com>
Date: Sun, 1 Jun 2025 19:58:14 +0200
Subject: [PATCH 14/15] Exlude considered guests from the list of invitations

---
 app/ui/invitations/board.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/app/ui/invitations/board.tsx b/app/ui/invitations/board.tsx
index 8053d88..3e65174 100644
--- a/app/ui/invitations/board.tsx
+++ b/app/ui/invitations/board.tsx
@@ -110,9 +110,11 @@ export default function InvitationsBoard({ guests, invitations: originalInvitati
   const [invitations, setInvitations] = useState<Invitation[]>(originalInvitations);
   const [unassignedGuests, setUnassignedGuests] = useState<Guest[]>(
     guests.filter(
-      (guest) => !invitations.some((invitation) =>
-        invitation.guests.some((invitedGuest) => invitedGuest.id === guest.id)
-      )
+      (guest) =>
+        guest.status !== 'considered' &&
+        !invitations.some((invitation) =>
+          invitation.guests.some((invitedGuest) => invitedGuest.id === guest.id)
+        )
     )
   );
 

From f8a52b99689d44a4db47bebfb19fb17c61c72706 Mon Sep 17 00:00:00 2001
From: Manuel Bustillo <bustikiller@bustikiller.com>
Date: Sun, 1 Jun 2025 17:59:55 +0000
Subject: [PATCH 15/15] Add copyright notice

---
 app/lib/invitation.tsx       | 2 ++
 app/ui/invitations/board.tsx | 2 ++
 2 files changed, 4 insertions(+)

diff --git a/app/lib/invitation.tsx b/app/lib/invitation.tsx
index ae5b1fd..f6acb70 100644
--- a/app/lib/invitation.tsx
+++ b/app/lib/invitation.tsx
@@ -1,3 +1,5 @@
+/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
+
 import { Entity } from "./definitions";
 import { Guest } from "./guest";
 
diff --git a/app/ui/invitations/board.tsx b/app/ui/invitations/board.tsx
index 3e65174..39f8b26 100644
--- a/app/ui/invitations/board.tsx
+++ b/app/ui/invitations/board.tsx
@@ -1,3 +1,5 @@
+/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
+
 'use client';
 
 import { AbstractApi } from "@/app/api/abstract-api";