Update dependency tailwindcss to v4

Reviewed-on: #249

.github/workflows/playwright.yml

@@ -17,7 +17,7 @@ jobs:
     - uses: actions/checkout@v4
     - uses: actions/setup-node@v4
       with:
-        node-version: lts/*
+        node-version-file: .nvmrc
     - name: Install dependencies
       run: npm install -g pnpm && pnpm install
     - name: Build the service that will be tested

.nvmrc

@@ -1 +1 @@
-23.11.1
+24.2.0

Dockerfile

@@ -1,6 +1,6 @@
 # Based on https://github.com/vercel/next.js/blob/canary/examples/with-docker/Dockerfile
 
-FROM node:23-alpine AS base
+FROM node:24-alpine AS base
 
 # Install dependencies only when needed
 FROM base AS deps

Dockerfile.dev

@@ -1,6 +1,6 @@
 # Based on https://github.com/vercel/next.js/blob/canary/examples/with-docker/Dockerfile
 
-FROM node:23-alpine AS base
+FROM node:24-alpine AS base
 
 # Install dependencies only when needed
 FROM base AS deps

app/lib/tableSimulation.tsx

@@ -34,7 +34,7 @@ export class TableSimulationSerializer implements Serializable<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)),
+        guests: table.guests.map((guest: any) => new Guest(guest.id, guest.name, guest.color, guest.status, [], guest.group)),
         discomfort: {
           discomfort: table.discomfort.discomfort,
           breakdown: {

app/ui/guests/table.tsx

@@ -3,7 +3,7 @@
 'use client';
 
 import { AbstractApi } from '@/app/api/abstract-api';
-import { Guest , GuestSerializer} from '@/app/lib/guest';
+import { Guest, GuestSerializer } from '@/app/lib/guest';
 import { PencilIcon, TrashIcon } from '@heroicons/react/24/outline';
 import clsx from 'clsx';
 import TableOfContents from '../components/table-of-contents';
@@ -48,7 +48,12 @@ export default function guestsTable({ guests, onUpdate, onEdit }: {
           </td>
           <td>
             <div className="flex flex-row items-center">
-              <TrashIcon className='size-6 cursor-pointer' onClick={() => { api.destroy(serializer, guest, onUpdate)}} />
+              <TrashIcon className='size-6 cursor-pointer' onClick={() => {
+                if (window.confirm(`Are you sure you want to delete guest "${guest.name}"?`)) {
+                  api.destroy(serializer, guest, onUpdate)
+                }
+              }}
+              />
               <PencilIcon className='size-6 cursor-pointer' onClick={() => onEdit(guest)} />
             </div>
           </td>

package.json

@@ -23,7 +23,7 @@
     "primereact": "^10.8.2",
     "react": "19.0.0-rc-f38c22b244-20240704",
     "react-dom": "19.0.0-rc-f38c22b244-20240704",
-    "tailwindcss": "3.4.17",
+    "tailwindcss": "4.1.10",
     "typescript": "5.8.3",
     "use-debounce": "^10.0.1",
     "uuid": "11.1.0",
@@ -32,7 +32,7 @@
   "devDependencies": {
     "@playwright/test": "^1.52.0",
     "@types/bcrypt": "^5.0.2",
-    "@types/node": "22.15.31",
+    "@types/node": "24.0.1",
     "@types/react": "18.3.23",
     "@types/react-dom": "18.3.7",
     "wait-on": "^8.0.3"

tests/guests.spec.ts

@@ -70,6 +70,7 @@ test('should allow CRUD on guests', async ({ page }) => {
   await expect(page.getByText('There are 3 elements in the list')).toBeVisible();
 
   // Delete John Fire
+  page.on('dialog', dialog => dialog.accept());
   await page.getByRole('row').nth(1).locator('svg').nth(0).click(); // Click delete icon
   await expect(page.getByText('There are 2 elements in the list')).toBeVisible();
 });