Display the discomfort breakdown in the tables diagram

app/api/abstract-api.tsx

@@ -5,6 +5,7 @@ import { getCsrfToken, getSlug } from '@/app/lib/utils';
 
 export interface Api<T extends Entity> {
   getAll(serializable: Serializable<T> ,callback: (objets: T[]) => void): void;
+  get(serializable: Serializable<T>, id: string, callback: (object: T) => void): void;
   create(serializable: Serializable<T>, object: T, callback: () => void): void;
   update(serializable: Serializable<T>, object: T, callback: () => void): void;
   destroy(serializable: Serializable<T>, object: T, callback: () => void): void;
@@ -29,6 +30,16 @@ export class AbstractApi<T extends Entity> implements Api<T> {
       });
   }
 
+  get(serializable: Serializable<T>, id: string, callback: (object: T) => void): void {
+    fetch(`/api/${getSlug()}/${serializable.apiPath()}/${id}`)
+      .then((response) => response.json())
+      .then((data) => {
+        callback(serializable.fromJson(data));
+      }, (error) => {
+        return [];
+      });
+  }
+
   update(serializable: Serializable<T>, object: T, callback: () => void): void {
     fetch(`/api/${getSlug()}/${serializable.apiPath()}/${object.id}`, {
       method: 'PUT',

app/lib/definitions.ts

@@ -15,17 +15,6 @@ export type TableArrangement = {
   discomfort?: number
 }
 
-export type guestsTable = {
-  id: string;
-  customer_id: string;
-  name: string;
-  email: string;
-  image_url: string;
-  date: string;
-  amount: number;
-  status: 'pending' | 'paid';
-};
-
 export type User = {
   id: string;
   email: string;

app/lib/tableSimulation.tsx

@@ -0,0 +1,69 @@
+import { Serializable } from "../api/abstract-api";
+import { Entity } from "./definitions";
+import { Guest } from "./guest";
+
+export type Discomfort = {
+  discomfort: number;
+  breakdown: {
+    tableSizePenalty: number;
+    cohesionPenalty: number;
+  }
+}
+
+export type Table = {
+  number: number;
+  guests: Guest[];
+  discomfort: Discomfort;
+}
+
+export class TableSimulation implements Entity {
+  id: string;
+  tables: Table[];
+
+  constructor(id: string, tables: Table[]) {
+    this.id = id;
+    this.tables = tables;
+  }
+}
+
+export class TableSimulationSerializer implements Serializable<TableSimulation> {
+  fromJson(data: any): TableSimulation {
+    return new TableSimulation(data.id, data.tables.map((table: any) => {
+      return {
+        number: table.number,
+        guests: table.guests.map((guest: any) => new Guest(guest.id, guest.name, guest.group?.name, guest.group?.id, guest.color)),
+        discomfort: {
+          discomfort: table.discomfort.discomfort,
+          breakdown: {
+            tableSizePenalty: table.discomfort.breakdown.table_size_penalty,
+            cohesionPenalty: table.discomfort.breakdown.cohesion_penalty,
+          }
+        },
+      }
+    }));
+  }
+
+  toJson(simulation: TableSimulation): string {
+    return JSON.stringify({ simulation: { tables: simulation.tables.map((table) => {
+      return {
+        number: table.number,
+        guests: table.guests.map((guest) => {
+          return {
+            id: guest.id,
+            name: guest.name,
+            group_id: guest.groupId,
+            color: guest.color,
+            status: guest.status,
+            children: guest.children,
+          }
+        }),
+        discomfort: table.discomfort,
+      }
+    }) } });
+  }
+
+  apiPath(): string {
+    return 'tables_arrangements';
+  }
+}
+

app/ui/arrangements/arrangement.tsx

@@ -2,40 +2,33 @@
 
 'use client';
 
-import React, { useState } from 'react';
+import { AbstractApi } from '@/app/api/abstract-api';
 import { TableArrangement } from '@/app/lib/definitions';
-import { lusitana } from '@/app/ui/fonts';
+import { TableSimulation, TableSimulationSerializer } from '@/app/lib/tableSimulation';
-import { Table } from '@/app/ui/components/table';
 import { getSlug } from '@/app/lib/utils';
+import { Table } from '@/app/ui/components/table';
+import { lusitana } from '@/app/ui/fonts';
+import { useState, useEffect } from 'react';
 
 export default function Arrangement({ id }: { id: string }) {
 
-    const [tables, setTables] = useState<Array<TableArrangement>>([]);
+  const [simulation, setSimulation] = useState<TableSimulation | undefined>(undefined);
 
-    function loadTables() {
+  function loadSimulation() {
-        fetch(`/api/${getSlug()}/tables_arrangements/${id}`)
+    new AbstractApi<TableSimulation>().get(new TableSimulationSerializer(), id, (object: TableSimulation) => {
-            .then((response) => response.json())
+      setSimulation(object);
-            .then((data) => {
-                setTables(data.map((record: any) => {
-                    return ({
-                        id: record.number,
-                        guests: record.guests
-                    });
-                }));
-            }, (error) => {
-                return [];
     });
   }
 
-    tables.length === 0 && loadTables();
+  useEffect(loadSimulation, []);
 
   return (
     <div className="w-full">
       <div className="w-full items-center justify-between">
         <h1 className={`${lusitana.className} text-2xl my-5`}>Table distributions</h1>
         <div className="flex flex-row flex-wrap justify-around">
-                    {tables.map((table) => (
+          {simulation && simulation.tables.map((table) => (
-                        <Table key={table.number} guests={table.guests || []} style="rounded" />
+            <Table key={table.number} table={table} style="rounded" />
           ))}
         </div>
       </div>

app/ui/components/table.tsx

@@ -1,6 +1,11 @@
 /* Copyright (C) 2024 Manuel Bustillo*/
 
 import { Guest } from "@/app/lib/guest";
+import { Table as TableType } from "@/app/lib/tableSimulation";
+import { RectangleGroupIcon, UserGroupIcon } from "@heroicons/react/24/outline";
+import { v4 as uuidv4 } from 'uuid';
+import { Tooltip } from "primereact/tooltip";
+import clsx from "clsx";
 
 
 function Dish({ guest, rotation }: { guest: Guest, rotation?: number }) {
@@ -15,7 +20,6 @@ function Dish({ guest, rotation }: { guest: Guest, rotation?: number }) {
   )
 }
 
-
 function GuestRow({ guests }: { guests: Guest[] }) {
   return (
     <div className="justify-around flex flex-row">
@@ -24,7 +28,8 @@ function GuestRow({ guests }: { guests: Guest[] }) {
   )
 }
 
-function RectangularTable({ guests }: { guests: Guest[] }) {
+function RectangularTable({ table }: { table: TableType }) {
+  const guests = table.guests;
   const halfwayThrough = Math.floor(guests.length / 2)
   const arrayFirstHalf = guests.slice(0, halfwayThrough);
   const arraySecondHalf = guests.slice(halfwayThrough, guests.length);
@@ -37,11 +42,24 @@ function RectangularTable({ guests }: { guests: Guest[] }) {
   )
 }
 
-function RoundedTable({ guests }: { guests: Guest[] }) {
+function RoundedTable({ table }: { table: TableType }) {
+  const guests = table.guests;
   const size = 500
   const rotation = 360 / guests.length
+
+  const className = (penalty: number) => {
+    return clsx("px-2 tooltip-cohesion", {
+      "hidden": penalty === 0,
+      "text-orange-300": penalty <= 5,
+      "text-orange-500": penalty > 5 && penalty <= 10,
+      "text-orange-700": penalty > 10,
+    })
+  }
+
+
   return (
-        <div className={`m-12 rounded-full bg-cyan-800 relative z-0`} style={{ width: `${size}px`, height: `${size}px` }}>
+    <div className={`m-12 rounded-full bg-cyan-800 relative z-0 grid flex items-center justify-items-center`} style={{ width: `${size}px`, height: `${size}px` }}>
+
       {
         guests.map((guest, index) => {
           return (
@@ -55,15 +73,35 @@ function RoundedTable({ guests }: { guests: Guest[] }) {
           )
         })
       }
+
+      <div className="bg-zinc-200 w-48 h-12 p-3 flex flex-row rounded z-10">
+        <div className="px-2 text-slate-800">{`Table #${table.number}`}</div>
+
+
+        <Tooltip target=".tooltip-cohesion" />
+        <Tooltip target=".tooltip-size" />
+
+        <RectangleGroupIcon
+          className={className(table.discomfort.breakdown.cohesionPenalty)}
+          data-pr-tooltip={`Cohesion penalty: ${Math.round(table.discomfort.breakdown.cohesionPenalty)}`}
+          data-pr-position="top"
+        />
+
+        <UserGroupIcon
+          className={className(table.discomfort.breakdown.tableSizePenalty)}
+          data-pr-tooltip={`Table size penalty: ${Math.round(table.discomfort.breakdown.tableSizePenalty)}`}
+          data-pr-position="top"
+        />
+      </div>
     </div>
   )
 }
 
-export function Table({ guests, style }: { guests: Guest[], style: "rectangular" | "rounded" }) {
+export function Table({ table, style }: { table: TableType, style: "rectangular" | "rounded" }) {
   return (
     <>
-            {style === "rectangular" && <RectangularTable guests={guests} />}
+      {style === "rectangular" && <RectangularTable table={table} />}
-            {style === "rounded" && <RoundedTable guests={guests} />}
+      {style === "rounded" && <RoundedTable table={table} />}
     </>
   )
 }

package.json

@@ -21,6 +21,7 @@
     "tailwindcss": "3.4.16",
     "typescript": "5.7.2",
     "use-debounce": "^10.0.1",
+    "uuid": "11.0.3",
     "zod": "^3.23.8"
   },
   "devDependencies": {

pnpm-lock.yaml

@@ -53,6 +53,9 @@ importers:
       use-debounce:
         specifier: ^10.0.1
         version: 10.0.4(react@19.0.0-rc-f38c22b244-20240704)
+      uuid:
+        specifier: 11.0.3
+        version: 11.0.3
       zod:
         specifier: ^3.23.8
         version: 3.24.1
@@ -1117,6 +1120,10 @@ packages:
   util-deprecate@1.0.2:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
 
+  uuid@11.0.3:
+    resolution: {integrity: sha512-d0z310fCWv5dJwnX1Y/MncBAqGMKEzlBb1AOf7z9K8ALnd0utBX/msg/fA0+sbyN1ihbMsLhrBlnl1ak7Wa0rg==}
+    hasBin: true
+
   webidl-conversions@3.0.1:
     resolution: {integrity: sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==}
 
@@ -2116,6 +2123,8 @@ snapshots:
 
   util-deprecate@1.0.2: {}
 
+  uuid@11.0.3: {}
+
   webidl-conversions@3.0.1: {}
 
   whatwg-url@5.0.0: