1 files changed, 33 insertions, 9 deletions
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;