From 392dd6f0d29b942078befe27c51c31efd4805d3c Mon Sep 17 00:00:00 2001
From: Felipe Cardoso <felipe.cardoso@hotmail.it>
Date: Wed, 19 Mar 2025 09:07:51 +0100
Subject: [PATCH] Add columns for dietary restrictions and notes to guest list

Enhanced the guest list table by adding new columns for dietary restrictions and notes. These columns display content using interactive popovers when data is available, improving data accessibility and user experience. Updated existing table structure to accommodate these enhancements.
---
 .../src/components/guests/guests-list.tsx     | 60 ++++++++++++++++++-
 1 file changed, 58 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/guests/guests-list.tsx b/frontend/src/components/guests/guests-list.tsx
index eb551af..1492a78 100644
--- a/frontend/src/components/guests/guests-list.tsx
+++ b/frontend/src/components/guests/guests-list.tsx
@@ -39,7 +39,6 @@ import {
 import { useGuests } from "@/context/guest-context";
 import {
   EventResponse,
-  EventThemeResponse,
   GuestCreate,
   GuestRead,
   GuestStatus,
@@ -66,6 +65,12 @@ import {
 } from "@/components/ui/alert-dialog";
 import { useAuth } from "@/context/auth-context";
 import { generateInviteLink } from "@/lib/utils";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { StickyNote, Utensils } from "lucide-react";
 
 // Helper to generate a random invitation code
 const generateInvitationCode = (fullName: string): string => {
@@ -522,10 +527,13 @@ const GuestListTable = ({ event }: GuestListTableProps) => {
               <TableHead>Phone</TableHead>
               <TableHead>Invitation Code</TableHead>
               <TableHead>Status</TableHead>
-              <TableHead>Additional Guests</TableHead>
+              <TableHead>Add. Guests</TableHead>
+              <TableHead>Diet Restr.</TableHead>
+              <TableHead>Notes</TableHead>
               <TableHead className="text-right">Actions</TableHead>
             </TableRow>
           </TableHeader>
+
           <TableBody>
             {isLoadingGuests ? (
               <TableRow>
@@ -567,6 +575,54 @@ const GuestListTable = ({ event }: GuestListTableProps) => {
                   </TableCell>
                   <TableCell>{getStatusBadge(guest.status)}</TableCell>
                   <TableCell>{guest.actual_additional_guests || 0}</TableCell>
+
+                  {/* Dietary Restrictions Column */}
+                  <TableCell>
+                    {guest.dietary_restrictions &&
+                    guest.dietary_restrictions.length > 0 ? (
+                      <Popover>
+                        <PopoverTrigger asChild>
+                          <Button
+                            variant="ghost"
+                            size="icon"
+                            className="h-6 w-6"
+                          >
+                            <Utensils className="h-4 w-4 text-green-600 cursor-pointer" />
+                          </Button>
+                        </PopoverTrigger>
+                        <PopoverContent className="max-w-xs">
+                          <p className="text-sm">
+                            {guest.dietary_restrictions}
+                          </p>
+                        </PopoverContent>
+                      </Popover>
+                    ) : (
+                      "-"
+                    )}
+                  </TableCell>
+
+                  {/* Notes Column */}
+                  <TableCell>
+                    {guest.notes && guest.notes.length > 0 ? (
+                      <Popover>
+                        <PopoverTrigger asChild>
+                          <Button
+                            variant="ghost"
+                            size="icon"
+                            className="h-6 w-6"
+                          >
+                            <StickyNote className="h-4 w-4 text-blue-600 cursor-pointer" />
+                          </Button>
+                        </PopoverTrigger>
+                        <PopoverContent className="max-w-xs">
+                          <p className="text-sm">{guest.notes}</p>
+                        </PopoverContent>
+                      </Popover>
+                    ) : (
+                      "-"
+                    )}
+                  </TableCell>
+
                   <TableCell className="text-right">
                     <DropdownMenu>
                       <DropdownMenuTrigger asChild>