Include transition to the transitive status

app/lib/definitions.ts

@@ -21,7 +21,7 @@ export type Guest = {
   name: string;
   email: string;
   group_name: string;
-  status: 'Considered' | 'Invited' | 'Confirmed' | 'Declined';
+  status: 'Considered' | 'Invited' | 'Confirmed' | 'Declined' | 'Tentative';
 }
 
 export type Group = {

app/ui/guests/table.tsx

@@ -29,6 +29,7 @@ export default function guestsTable() {
   const handleInviteGuest = (e: React.MouseEvent<HTMLElement>) => handleGuestChange(e, 'invited');
   const handleConfirmGuest = (e: React.MouseEvent<HTMLElement>) => handleGuestChange(e, 'confirmed');
   const handleDeclineGuest = (e: React.MouseEvent<HTMLElement>) => handleGuestChange(e, 'declined');
+  const handleTentativeGuest = (e: React.MouseEvent<HTMLElement>) => handleGuestChange(e, 'tentative');
 
   const handleGuestChange = (e: React.MouseEvent<HTMLElement>, status:string) => {
     fetch("/api/guests/bulk_update.json",
@@ -94,6 +95,7 @@ export default function guestsTable() {
                       'bg-blue-400': guest.status === 'Invited',
                       'bg-green-600': guest.status === 'Confirmed',
                       'bg-red-400': guest.status === 'Declined',
+                      'bg-yellow-400': guest.status === 'Tentative',
                     }
                   )}>
                   </span>
@@ -104,12 +106,13 @@ export default function guestsTable() {
                 {guest.status === 'Considered' && (<button data-guest-id={guest.id} onClick={handleInviteGuest} className={`${ctaClassName} bg-blue-400 hover:bg-blue-600`}>
                   Invite
                 </button>)}
-                {guest.status === 'Invited' && (<button data-guest-id={guest.id} onClick={handleConfirmGuest} className={`${ctaClassName} bg-green-500 hover:bg-green-600`}>
+                {guest.status === 'Invited' && (
-                  Confirm
+                  <>
-                </button>)}
+                    <button data-guest-id={guest.id} onClick={handleConfirmGuest} className={`${ctaClassName} bg-green-500 hover:bg-green-600`}>Confirm</button>
-                {guest.status === 'Invited' && (<button data-guest-id={guest.id} onClick={handleDeclineGuest} className={`${ctaClassName} bg-red-500 hover:bg-red-600`}>
+                    <button data-guest-id={guest.id} onClick={handleDeclineGuest} className={`${ctaClassName} bg-yellow-500 hover:bg-yellow-700`}>Tentative</button>
-                  Decline
+                    <button data-guest-id={guest.id} onClick={handleDeclineGuest} className={`${ctaClassName} bg-red-500 hover:bg-red-600`}>Decline</button>
-                </button>)}
+                  </>
+                )}
               </td>
             </tr>
           ))}