Display empty invitations

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");
@@ -56,17 +63,23 @@ export default function InvitationsBoard({ guests, invitations }: {
         </button>
 
         <div className="grid grid-cols-4 gap-6">
-        {invitations.map((invitation, index) => (
+          {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" }}
             >
-          <ul className="text-center text-yellow-500 font-cursive text-lg">
+                {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>
           ))}
         </div>