Render list of tables in an arrangement

app/dashboard/tables/page.tsx

@@ -1,10 +1,15 @@
 /* Copyright (C) 2024 Manuel Bustillo*/
 
 import { Table } from '@/app/ui/components/table';
+import Arrangement from '@/app/ui/arrangements/arrangement';
 import Summary from '@/app/ui/expenses/summary';
 import { lusitana } from '@/app/ui/fonts';
 
 export default function Page() {
+
+  return(
+    <Arrangement id="4a54516b-1c6e-49eb-9781-c20b93f89c85"/>
+  )
   return (
     <div className="w-full">
       <div className="w-full items-center justify-between">

app/lib/definitions.ts

@@ -26,6 +26,20 @@ export type Guest = {
   status?: 'Considered' | 'Invited' | 'Confirmed' | 'Declined' | 'Tentative';
 }
 
+export type Banana = {
+  id: string;
+  name: string;
+  email?: string;
+  group_name?: string;
+  status?: 'Considered' | 'Invited' | 'Confirmed' | 'Declined' | 'Tentative';
+}
+
+export type TableArrangement = {
+  number: number;
+  guests: Guest[];
+  discomfort?: number
+}
+
 export type Group = {
   id: string;
   name: string;

app/ui/arrangements/arrangement.tsx

@@ -0,0 +1,44 @@
+'use client';
+
+import React, { useState } from 'react';
+import { TableArrangement, Guest } from '@/app/lib/definitions';
+import { lusitana } from '@/app/ui/fonts';
+import { Table } from '@/app/ui/components/table';
+
+export default function Arrangement({ id }: { id: string }) {
+
+    const [guests, setGuests] = useState<Array<Guest>>([]);
+    const [tables, setTables] = useState<Array<TableArrangement>>([]);
+
+
+    function loadTables() {
+        fetch(`/api/tables_arrangements/${id}`)
+            .then((response) => response.json())
+            .then((data) => {
+                setTables(data.map((record: any) => {
+                    return ({
+                        id: record.id,
+                        guests: record.guests
+                    });
+                }));
+            }, (error) => {
+                return [];
+            });
+    }
+
+    tables.length === 0 && loadTables();
+
+    return (
+        <div className="w-full">
+            <div className="w-full items-center justify-between">
+                <h1 className={`${lusitana.className} text-2xl`}>Table distributions</h1>
+                <div className="flex flex-row flex-wrap justify-around">
+                    {tables.map((table) => (
+                        <Table guests={table.guests} />
+                    ))}
+                </div>
+            </div>
+        </div>
+    )
+
+}