Display the table arrangements returned by the API

app/dashboard/tables/page.tsx

@@ -1,13 +1,18 @@
 /* Copyright (C) 2024 Manuel Bustillo*/
 
-import { Table } from '@/app/ui/components/table';
+'use client';
+
 import Arrangement from '@/app/ui/arrangements/arrangement';
-import Summary from '@/app/ui/expenses/summary';
+import React, { useState } from 'react';
-import { lusitana } from '@/app/ui/fonts';
+import ArrangementsTable from '@/app/ui/arrangements/arrangements-table';
 
 export default function Page() {
+  const [currentArrangement, setCurrentArrangement] = useState<string | null>(null);
 
-  return(
+  return (
-    <Arrangement id="4a54516b-1c6e-49eb-9781-c20b93f89c85"/>
+    <>
+      <ArrangementsTable onArrangementSelected={setCurrentArrangement} />
+      {currentArrangement && <Arrangement key={currentArrangement} id={currentArrangement} />}
+    </>
   )
 }

app/lib/definitions.ts

@@ -35,8 +35,9 @@ export type Banana = {
 }
 
 export type TableArrangement = {
+  id: string;
   number: number;
-  guests: Guest[];
+  guests?: Guest[];
   discomfort?: number
 }
 

app/ui/arrangements/arrangement.tsx

@@ -9,17 +9,15 @@ 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,
+                        id: record.number,
                         guests: record.guests
                     });
                 }));
@@ -33,10 +31,10 @@ export default function Arrangement({ id }: { id: string }) {
     return (
         <div className="w-full">
             <div className="w-full items-center justify-between">
-                <h1 className={`${lusitana.className} text-2xl`}>Table distributions</h1>
+                <h1 className={`${lusitana.className} text-2xl my-5`}>Table distributions</h1>
                 <div className="flex flex-row flex-wrap justify-around">
                     {tables.map((table) => (
-                        <Table guests={table.guests} />
+                        <Table key={table.number} guests={table.guests || []} />
                     ))}
                 </div>
             </div>

app/ui/arrangements/arrangements-table.tsx

@@ -0,0 +1,71 @@
+'use client'
+
+import React, { useState } from "react"
+import { TableArrangement } from '@/app/lib/definitions';
+import { classNames } from "../components/button";
+
+export default function ArrangementsTable ({onArrangementSelected}: {onArrangementSelected: (arrangementId: string) => void}) {
+    const [arrangements, setArrangements] = useState<Array<TableArrangement>>([]);
+
+    function loadArrangements() {
+      fetch("/api/tables_arrangements")
+        .then((response) => response.json())
+        .then((data) => {
+          setArrangements(data.map((record: any) => {
+            return ({
+              id: record.id,
+              discomfort: record.discomfort
+            });
+          }));
+        }, (error) => {
+          return [];
+        });
+    }
+
+    function arrangementClicked(e: React.MouseEvent<HTMLElement>) {
+        onArrangementSelected(e.currentTarget.getAttribute('data-arrangement-id') || '');
+    }
+  
+    arrangements.length === 0 && loadArrangements();
+
+    return(
+        <div className="w-full relative overflow-x-auto shadow-md sm:rounded-lg">
+        <table className="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
+          <caption className="p-5 text-lg font-semibold text-left rtl:text-right text-gray-900 bg-white dark:text-white dark:bg-gray-800">
+            Simulations
+            <p className="mt-1 text-sm font-normal text-gray-500 dark:text-gray-400">
+              There are {arrangements.length} simmulations in the list
+            </p>
+          </caption>
+          <thead className="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
+            <tr>
+              <th scope="col" className="px-6 py-3">
+                ID
+              </th>
+              <th scope="col" className="px-6 py-3">
+                Discomfort
+              </th>              
+              <th scope="col" className="px-6 py-3">
+                Actions
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            {arrangements.map((arrangement) => (
+              <tr key={arrangement.id} className="bg-white border-b odd:bg-white odd:dark:bg-gray-900 even:bg-gray-50 even:dark:bg-gray-800">
+                <th scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
+                  {arrangement.id}
+                </th>
+                <td className="px-6 py-4">
+                  {arrangement.discomfort}
+                </td>
+                <td>
+                    <button data-arrangement-id={arrangement.id} onClick={arrangementClicked} className={classNames('primary')}>Load</button>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    );
+}

app/ui/components/button.tsx

@@ -0,0 +1,12 @@
+import clsx from "clsx";
+
+type ButtonColor = 'primary' | 'blue' | 'green' | 'red' | 'yellow';
+
+export function classNames(type: ButtonColor) {
+    return(clsx("text-white py-1 px-2 mx-1 rounded", {
+        'bg-blue-400 hover:bg-blue-600': type === 'primary' || type === 'blue',
+        'bg-green-500 hover:bg-green-600': type === 'green',
+        'bg-red-500 hover:bg-red-600': type === 'red',
+        'bg-yellow-500 hover:bg-yellow-700': type === 'yellow'
+    }))
+}

app/ui/guests/table.tsx

@@ -6,6 +6,7 @@ import clsx from 'clsx';
 import React, { useState, useEffect } from 'react';
 import { Guest } from '@/app/lib/definitions';
 import { getCsrfToken } from '@/app/lib/utils';
+import {classNames} from '@/app/ui/components/button';
 
 export default function guestsTable() {
   const [guests, setGuests] = useState<Array<Guest>>([]);
@@ -48,7 +49,6 @@ export default function guestsTable() {
   }
 
   guests.length === 0 && loadGuests();
-  const ctaClassName = "text-white py-1 px-2 mx-1 rounded";
 
   return (
     <div className="w-full relative overflow-x-auto shadow-md sm:rounded-lg">
@@ -105,14 +105,14 @@ export default function guestsTable() {
                 </span>
               </td>
               <td>
-                {guest.status === 'Considered' && (<button data-guest-id={guest.id} onClick={handleInviteGuest} className={`${ctaClassName} bg-blue-400 hover:bg-blue-600`}>
+                {guest.status === 'Considered' && (<button data-guest-id={guest.id} onClick={handleInviteGuest} className={classNames('blue')}>
                   Invite
                 </button>)}
                 {(guest.status === 'Invited' || guest.status === 'Tentative') && (
                   <>
-                    <button data-guest-id={guest.id} onClick={handleConfirmGuest} className={`${ctaClassName} bg-green-500 hover:bg-green-600`}>Confirm</button>
+                    <button data-guest-id={guest.id} onClick={handleConfirmGuest} className={classNames('green')}>Confirm</button>
-                    {guest.status != 'Tentative' && <button data-guest-id={guest.id} onClick={handleDeclineGuest} className={`${ctaClassName} bg-yellow-500 hover:bg-yellow-700`}>Tentative</button>}
+                    {guest.status != 'Tentative' && <button data-guest-id={guest.id} onClick={handleDeclineGuest} className={classNames('yellow')}>Tentative</button>}
-                    <button data-guest-id={guest.id} onClick={handleDeclineGuest} className={`${ctaClassName} bg-red-500 hover:bg-red-600`}>Decline</button>
+                    <button data-guest-id={guest.id} onClick={handleDeclineGuest} className={classNames('red')}>Decline</button>
                   </>
                 )}
               </td>