wedding-planner-frontend/app/ui/arrangements/arrangements-table.tsx

/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/

'use client'

import React, { useState } from "react"
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";
import clsx from "clsx";
import { ProgressBar } from "primereact/progressbar";
import { useEffect } from "react";
import { TableSimulation, TableSimulationSerializer } from "@/app/lib/tableSimulation";
import { AbstractApi } from "@/app/api/abstract-api";

export default function ArrangementsTable({ onArrangementSelected }: { onArrangementSelected: (arrangementId: string) => void }) {
  const [arrangements, setArrangements] = useState<Array<TableArrangement>>([]);
  const [arrangementsLoaded, setArrangementsLoaded] = useState(false);

  useEffect(() => {
    refreshSimulations();
    const interval = setInterval(refreshSimulations, 10000);
    return () => clearInterval(interval);
  }, []);

  function refreshSimulations() {
    loadTableSimulations((arrangements) => {
      setArrangements(arrangements);
      setArrangementsLoaded(true);
    });
  }

  function arrangementClicked(e: React.MouseEvent<HTMLElement>) {
    onArrangementSelected(e.currentTarget.getAttribute('data-arrangement-id') || '');
  }

  return (
    <TableOfContents
      headers={['Name', 'Discomfort', 'Status', 'Actions']}
      caption='Simulations'
      elements={arrangements}
      rowRender={(arrangement) => (
        <tr key={arrangement.id} className={clsx("border-b", {
          "bg-white odd:bg-white even:bg-gray-50": arrangement.valid,
          "bg-red-50 odd:bg-red-50 even:bg-red-100": !arrangement.valid
        })}>
          <th scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap">
            {arrangement.name}
          </th>
          <td className="px-6 py-4">
            {arrangement.discomfort}
          </td>
          <td className="px-4">
            <Tooltip target=".tooltip-status" />

            <>
              { arrangement.valid && arrangement.status === 'not_started' && <ProgressBar mode="indeterminate" style={{ height: '6px' }}></ProgressBar>  }
              { arrangement.valid && arrangement.status !== 'not_started' && <ProgressBar value={(100 * arrangement.progress).toFixed(2) }></ProgressBar> }

              { !arrangement.valid && 'The list of potential guests has changed since this simulation.' }
            </>
          </td>
          <td>
            <button data-arrangement-id={arrangement.id} onClick={arrangementClicked} className={classNames('primary')}>Load</button>
          </td>
        </tr>
      )}
    />
  );
}