From 1184a529cf42cfdcd89a002da3afc6254bd43679 Mon Sep 17 00:00:00 2001
From: Manuel Bustillo <bustikiller@bustikiller.com>
Date: Sun, 26 Jan 2025 13:05:32 +0100
Subject: [PATCH] Display an icon indicating whether a simulation is still
 valid

---
 app/api/tableSimulations.tsx               |  1 +
 app/lib/definitions.ts                     |  3 +-
 app/ui/arrangements/arrangements-table.tsx | 79 ++++++++++++----------
 3 files changed, 48 insertions(+), 35 deletions(-)

diff --git a/app/api/tableSimulations.tsx b/app/api/tableSimulations.tsx
index 6bf36d7..5b0f538 100644
--- a/app/api/tableSimulations.tsx
+++ b/app/api/tableSimulations.tsx
@@ -12,6 +12,7 @@ export function loadTableSimulations(onLoad?: (tableSimulations: TableArrangemen
           id: record.id,
           name: record.name,
           discomfort: record.discomfort,
+          valid: record.valid,
         });
       }));
     }, (error) => {
diff --git a/app/lib/definitions.ts b/app/lib/definitions.ts
index b03ef4b..5e6ffe8 100644
--- a/app/lib/definitions.ts
+++ b/app/lib/definitions.ts
@@ -12,7 +12,8 @@ export type TableArrangement = {
   number: number;
   name: string;
   guests?: Guest[];
-  discomfort?: number
+  discomfort?: number;
+  valid?: boolean;
 }
 
 export type User = {
diff --git a/app/ui/arrangements/arrangements-table.tsx b/app/ui/arrangements/arrangements-table.tsx
index 9a650e7..fbc132a 100644
--- a/app/ui/arrangements/arrangements-table.tsx
+++ b/app/ui/arrangements/arrangements-table.tsx
@@ -7,42 +7,53 @@ import { TableArrangement } from '@/app/lib/definitions';
 import { classNames } from "../components/button";
 import TableOfContents from "../components/table-of-contents";
 import { loadTableSimulations } from "@/app/api/tableSimulations";
+import { ArchiveBoxXMarkIcon, CheckBadgeIcon } from "@heroicons/react/24/outline";
+import { Tooltip } from "primereact/tooltip";
 
-export default function ArrangementsTable ({onArrangementSelected}: {onArrangementSelected: (arrangementId: string) => void}) {
-    const [arrangements, setArrangements] = useState<Array<TableArrangement>>([]);
-    const [arrangementsLoaded, setArrangementsLoaded] = useState(false);
+export default function ArrangementsTable({ onArrangementSelected }: { onArrangementSelected: (arrangementId: string) => void }) {
+  const [arrangements, setArrangements] = useState<Array<TableArrangement>>([]);
+  const [arrangementsLoaded, setArrangementsLoaded] = useState(false);
 
-    function refreshSimulations() {
-      loadTableSimulations((arrangements) => {
-        setArrangements(arrangements);
-        setArrangementsLoaded(true);
-      });
-    }
+  function refreshSimulations() {
+    loadTableSimulations((arrangements) => {
+      setArrangements(arrangements);
+      setArrangementsLoaded(true);
+    });
+  }
 
-    function arrangementClicked(e: React.MouseEvent<HTMLElement>) {
-        onArrangementSelected(e.currentTarget.getAttribute('data-arrangement-id') || '');
-    }
-  
-    !arrangementsLoaded && refreshSimulations();
+  function arrangementClicked(e: React.MouseEvent<HTMLElement>) {
+    onArrangementSelected(e.currentTarget.getAttribute('data-arrangement-id') || '');
+  }
 
-    return(
-      <TableOfContents
-        headers={['Name', 'Discomfort', 'Actions']}
-        caption='Simulations'
-        elements={arrangements}
-        rowRender={(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.name}
-            </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>
-        )}
-      />
-    );
+  !arrangementsLoaded && refreshSimulations();
+
+  return (
+    <TableOfContents
+      headers={['Name', 'Discomfort', 'Actions', 'Status']}
+      caption='Simulations'
+      elements={arrangements}
+      rowRender={(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.name}
+          </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>
+          <td>
+            <Tooltip target=".tooltip-status" />
+
+            {
+              arrangement.valid ?
+                <CheckBadgeIcon className='size-6 tooltip-status' data-pr-position="right" data-pr-tooltip="Simulation is valid" /> :
+                <ArchiveBoxXMarkIcon className='size-6 tooltip-status' data-pr-position="right" data-pr-tooltip="Simulation is expired due to attendance or affinity changes" />
+            }
+          </td>
+        </tr>
+      )}
+    />
+  );
 }
\ No newline at end of file