From 340193f1d52e1b68fe950974d1003b9330e06fe3 Mon Sep 17 00:00:00 2001
From: Michael Hunteman <michael@huntm.net>
Date: Fri, 30 Aug 2024 14:45:50 -0700
Subject: Update material react table to have party guests

---
 client/src/components/Dashboard.tsx | 42 +++++++++++++++++++++++++++++--------
 1 file changed, 33 insertions(+), 9 deletions(-)

(limited to 'client/src/components/Dashboard.tsx')

diff --git a/client/src/components/Dashboard.tsx b/client/src/components/Dashboard.tsx
index 20758fc..40c84f6 100644
--- a/client/src/components/Dashboard.tsx
+++ b/client/src/components/Dashboard.tsx
@@ -5,7 +5,7 @@ import {
   useMaterialReactTable,
   type MRT_ColumnDef,
 } from 'material-react-table';
-import type { Guest } from '../slices/api/adminSlice';
+import type { Guest } from '../models';
 
 function Dashboard() {
   const guests: Guest[] = useOutletContext();
@@ -14,12 +14,12 @@ function Dashboard() {
       {
         accessorKey: 'firstName',
         header: 'First Name',
-        size: 150,
+        size: 50,
       },
       {
         accessorKey: 'lastName',
         header: 'Last Name',
-        size: 150,
+        size: 50,
       },
       {
         accessorKey: 'attendance',
@@ -41,20 +41,44 @@ function Dashboard() {
         header: 'Party Size',
         size: 50,
       },
-      // {
-      //   accessorKey: 'partyList',
-      //   header: 'Party List',
-      //   size: 150,
-      // },
     ],
     []
   );
   const table = useMaterialReactTable({
     columns,
     data: guests,
+    renderDetailPanel: ({ row }) =>
+      row.original.partySize > 1
+        ? row.original.partyList.map((guest, index) => {
+            return (
+              <div
+                key={index}
+                style={{
+                  width: '32%',
+                  display: 'flex',
+                  justifyContent: 'space-around',
+                }}
+              >
+                <p>{guest.firstName}</p>
+                <p>{guest.lastName}</p>
+              </div>
+            );
+          })
+        : null,
   });
 
-  return <MaterialReactTable table={table} />;
+  return (
+    <div
+      style={{
+        display: 'flex',
+        justifyContent: 'center',
+      }}
+    >
+      <div style={{ marginTop: 128 }}>
+        <MaterialReactTable table={table} />
+      </div>
+    </div>
+  );
 }
 
 export default Dashboard;
-- 
cgit v1.2.3