app/lib/definitions.ts

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

app/ui/guests/table.tsx

@@ -2,6 +2,7 @@
 
 import { Guest } from '@/app/lib/definitions';
 import { useState, Suspense, useEffect } from 'react';
+import clsx from 'clsx';
 
 export default function guestsTable() {
 
@@ -19,7 +20,8 @@ export default function guestsTable() {
             id: record.id,
             name: record.attributes.name,
             email: record.attributes.email,
-            group_name: record.attributes.group_name
+            group_name: record.attributes.group_name,
+            status: record.attributes.status
           });
         }))
       });
@@ -40,6 +42,9 @@ export default function guestsTable() {
             <th scope="col" className="px-6 py-3">
               Group
             </th>
+            <th scope="col" className="px-6 py-3">
+              Status
+            </th>
           </tr>
         </thead>
         <tbody>
@@ -55,6 +60,22 @@ export default function guestsTable() {
                 <td className="px-6 py-4">
                   {guest.group_name}
                 </td>
+                <td className="px-6 py-4">
+                  <span className="flex items-center text-sm dark:text-white me-3">
+                    <span className={clsx(
+                      'flex w-2.5 h-2.5 rounded-full me-1.5 flex-shrink-0',
+                      {
+                        'bg-gray-400': guest.status === 'Considered',
+                        'bg-blue-400': guest.status === 'Invited',
+                        'bg-green-600': guest.status === 'Confirmed',
+                        'bg-red-400': guest.status === 'Declined',
+                      }
+                    )}>
+                      {/* <span className="flex w-2.5 h-2.5 rounded-full me-1.5 flex-shrink-0 bg-blue-600"> */}
+                    </span>
+                    {guest.status}
+                  </span>
+                </td>
               </tr>
             ))}
           </Suspense>