Initial draft of the invitations board

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>
 

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';
+  }
+}

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