Include edit and delete buttons in the groups table

app/[slug]/dashboard/guests/page.tsx

@@ -56,14 +56,18 @@ export default function Page() {
               onHide={() => { setGuestBeingEdited(undefined) }}
             />
             <Suspense fallback={<SkeletonTable />}>
-              <GuestsTable guests={guests} onUpdate={refreshGuests} onEdit={(guest) => setGuestBeingEdited(guest)} />
+              <GuestsTable
+                guests={guests}
+                onUpdate={refreshGuests}
+                onEdit={(guest) => setGuestBeingEdited(guest)}
+              />
             </Suspense>
           </div>
         </ TabPanel>
         <TabPanel header="Groups" leftIcon="pi pi-sitemap mx-2">
           <div className="flex flex-col w-full items-center justify-between">
 
-          <button onClick={() => setGroupBeingEdited({})} className={classNames('primary')}>Add new</button>
+            <button onClick={() => setGroupBeingEdited({})} className={classNames('primary')}>Add new</button>
             <GroupFormDialog
               key={groupBeingEdited?.id}
               groups={groups}
@@ -74,7 +78,11 @@ export default function Page() {
             />
 
             <Suspense fallback={<SkeletonTable />}>
-              <GroupsTable groups={groups} />
+              <GroupsTable 
+                groups={groups}
+                onUpdate={refreshGroups}
+                onEdit={(group) => setGroupBeingEdited(group)}
+              />
             </Suspense>
           </div>
         </ TabPanel>

app/api/groups.tsx

@@ -64,4 +64,18 @@ export function createGroup(group: Group, onCreate?: () => void) {
       onCreate && onCreate();
     })
     .catch((error) => console.error(error));
+}
+
+export function destroyGroup(group: Group, onDestroy?: () => void) {
+  fetch(`/api/${getSlug()}/groups/${group.id}`, {
+    method: 'DELETE',
+    headers: {
+      'X-CSRF-TOKEN': getCsrfToken(),
+    }
+  })
+    .then((response) => response.json())
+    .then((data) => {
+      onDestroy && onDestroy();
+    })
+    .catch((error) => console.error(error));
 }

app/ui/groups/table.tsx

@@ -4,12 +4,18 @@
 
 import { Group } from '@/app/lib/definitions';
 import TableOfContents from '../components/table-of-contents';
+import { PencilIcon, TrashIcon } from '@heroicons/react/24/outline';
+import { destroyGroup } from '@/app/api/groups';
 
-export default function GroupsTable({ groups }: { groups: Group[] }) {
+export default function GroupsTable({ groups, onUpdate, onEdit }: {
+  groups: Group[],
+  onUpdate: () => void,
+  onEdit: (group: Group) => void,
+}) {
 
   return (
     <TableOfContents
-      headers={['Name', 'Color', 'Confirmed', 'Tentative', 'Pending', 'Declined', 'Considered', 'Total']}
+      headers={['Name', 'Color', 'Confirmed', 'Tentative', 'Pending', 'Declined', 'Considered', 'Total', 'Actions']}
       caption='Groups'
       elements={groups}
       rowRender={(group) => (
@@ -38,6 +44,12 @@ export default function GroupsTable({ groups }: { groups: Group[] }) {
           <td className="px-6 text-sm">
             {group.attendance?.total}
           </td>
+          <td>
+            <div className="flex flex-row items-center">
+              <TrashIcon className='size-6 cursor-pointer' onClick={() => { destroyGroup(group, () => onUpdate()) }} />
+              <PencilIcon className='size-6 cursor-pointer' onClick={() => onEdit(group)} />
+            </div>
+          </td>
         </tr>
       )}
     />