Fix item handling in RSVP submission and admin view - Improved type handling, JSON parsing, and UI display

frontend/src/components/EventAdmin.tsx

@@ -403,6 +403,7 @@ const EventAdmin: React.FC = () => {
                               label={item}
                               color="success"
                               size="small"
+                              variant={claimedItems.includes(item) ? "filled" : "outlined"}
                             />
                           )) : (
                             <Typography variant="body2" color="text.secondary">

frontend/src/components/RSVPForm.tsx

@@ -142,7 +142,7 @@ const RSVPForm: React.FC = () => {
         ...formData,
         items_bringing: JSON.stringify(formData.items_bringing)
       };
-      await axios.post(`/api/events/${slug}/rsvp`, submissionData);
+      const response = await axios.post(`/api/events/${slug}/rsvp`, submissionData);
       
       // Update the needed and claimed items
       const [eventResponse, rsvpsResponse] = await Promise.all([
@@ -166,9 +166,10 @@ const RSVPForm: React.FC = () => {
         }
       }
       
-      // Get all claimed items from existing RSVPs
+      // Get all claimed items from existing RSVPs including the new submission
       const claimed = new Set<string>();
-      rsvpsResponse.data.forEach((rsvp: any) => {
+      const allRsvps = [...rsvpsResponse.data, response.data];
+      allRsvps.forEach((rsvp: any) => {
         try {
           let rsvpItems: string[] = [];
           if (typeof rsvp.items_bringing === 'string') {