app/lib/definitions.ts

@@ -20,8 +20,17 @@ export type Guest = {
   id: string;
   name: string;
   email: string;
+  group_name: string;
 }
 
+export type Group = {
+  id: string;
+  name: string;
+  guest_count: number;
+  icon: string;
+  children: Group[];
+};
+
 export type Invoice = {
   id: string;
   customer_id: string;

app/ui/guests/affinity-groups-tree.tsx

@@ -1,27 +1,41 @@
 'use client'
 
 import React, { useState, useEffect, Suspense } from 'react';
-import { Tree } from 'primereact/tree';
+import { Tree, TreeNode } from 'primereact/tree';
 import { PrimeIcons } from 'primereact/api';
 import { debug } from 'console';
+import { Group } from '@/app/lib/definitions';
 
 export default function AffinityGroupsTree() {
     const [nodes, setNodes] = useState([]);
-    const parseNode = (record: any, included: any[]) => {
+
+    const groupToNode = (group: Group): TreeNode => {
+        return({
+            key: group.id,
+            label: `${group.name} (${group.guest_count})`,
+            icon: group.icon,
+            children: group.children.map((child) => groupToNode(child)),
+            className: "px-4",
+        })
+    }
+
+    const parseNode = (record: any, included: any[]): Group => {
         if (!record.attributes) {
             record = included.find((a) => a.id === record.id);
         }
         
-        const children = (record?.relationships?.children?.data || []).map((child: any) => {
+        const children: Group[] = (record?.relationships?.children?.data || []).map((child: any) => {
             return (parseNode(child, included));
         });
 
+        const children_guest_count: number = children.reduce((acc: number, child: Group) => acc + child.guest_count, 0);
+
         return ({
-            key: record.id,
-            label: record.attributes.name,
+            id: record.id,
+            name: record.attributes.name,
+            guest_count: record.attributes.guest_count + children_guest_count,
             icon: record.attributes.icon,
             children: children,
-            className: "px-4",
         })
     }
 
@@ -34,7 +48,7 @@ export default function AffinityGroupsTree() {
             .then((response) => response.json())
             .then((data) => {
                 setNodes(data.data.map((record: any) => {
-                    return (parseNode(record, data.included));
+                    return (groupToNode(parseNode(record, data.included)));
                 }))
             });
     });

app/ui/guests/table.tsx

@@ -19,6 +19,7 @@ export default function guestsTable() {
             id: record.id,
             name: record.attributes.name,
             email: record.attributes.email,
+            group_name: record.attributes.group_name
           });
         }))
       });
@@ -37,7 +38,7 @@ export default function guestsTable() {
               Email
             </th>
             <th scope="col" className="px-6 py-3">
-              Status
+              Group
             </th>
           </tr>
         </thead>
@@ -52,7 +53,7 @@ export default function guestsTable() {
                   {guest.email}
                 </td>
                 <td className="px-6 py-4">
-                  Confirmed
+                  {guest.group_name}
                 </td>
               </tr>
             ))}