From bd8f0fa2cd948207203ae014db52b0f500c53b1d Mon Sep 17 00:00:00 2001
From: Ryderjj89 <raiden89@live.com>
Date: Fri, 24 Oct 2025 18:27:23 -0400
Subject: [PATCH] added selected items to rsvp form

---
 frontend/src/components/RSVPForm.tsx | 130 +++++++++++++++------------
 1 file changed, 74 insertions(+), 56 deletions(-)

diff --git a/frontend/src/components/RSVPForm.tsx b/frontend/src/components/RSVPForm.tsx
index 94dda2d..e54f7a0 100644
--- a/frontend/src/components/RSVPForm.tsx
+++ b/frontend/src/components/RSVPForm.tsx
@@ -617,65 +617,83 @@ const RSVPForm: React.FC = () => {
                   )}
 
                   {neededItems.length > 0 && (
-                    <FormControl fullWidth>
-                      <InputLabel>What items are you bringing?</InputLabel>
-                      <Select
-                        multiple
-                        name="items_bringing"
-                        value={formData.items_bringing}
-                        onChange={handleItemsChange}
-                        input={<OutlinedInput label="What items are you bringing?" />}
-                        renderValue={(selected) => (
-                          <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
-                            {selected.map((value) => (
-                              <Chip key={value} label={value} />
+                    <>
+                      {formData.items_bringing.length > 0 && (
+                        <Box sx={{ mb: 2 }}>
+                          <Typography variant="subtitle2" gutterBottom sx={{ fontWeight: 500 }}>
+                            Items you're bringing:
+                          </Typography>
+                          <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1 }}>
+                            {formData.items_bringing.map((item) => (
+                              <Chip
+                                key={item}
+                                label={item}
+                                color="success"
+                              />
                             ))}
                           </Box>
-                        )}
-                        open={isItemsSelectOpen} // Control open state
-                        onOpen={() => setIsItemsSelectOpen(true)} // Set open when opened
-                        onClose={() => setIsItemsSelectOpen(false)} // Set closed when closed
-                        MenuProps={{
-                          PaperProps: {
-                            sx: {
-                              maxHeight: 300, // Limit height of the dropdown
-                              overflowY: 'auto',
-                            },
-                          },
-                          MenuListProps: {
-                            sx: {
-                            },
-                          },
-                        }}
-                      >
-                        {neededItems.map((item) => (
-                          <MenuItem key={item} value={item}>
-                            <Checkbox checked={formData.items_bringing.includes(item)} />
-                            <ListItemText primary={item} />
-                          </MenuItem>
-                        ))}
-                        <Box sx={{ 
-                          position: 'sticky', 
-                          bottom: 0, 
-                          left: 0, 
-                          right: 0, 
-                          backgroundColor: 'background.paper', 
-                          padding: 1, 
-                          zIndex: 1,
-                          borderTop: '1px solid',
-                          borderColor: 'divider',
-                          textAlign: 'center',
-                        }}>
-                          <Button 
-                            variant="contained" 
-                            onClick={() => setIsItemsSelectOpen(false)} 
-                            fullWidth
-                          >
-                            Done
-                          </Button>
                         </Box>
-                      </Select>
-                    </FormControl>
+                      )}
+                      <FormControl fullWidth>
+                        <InputLabel>What items are you bringing?</InputLabel>
+                        <Select
+                          multiple
+                          name="items_bringing"
+                          value={formData.items_bringing}
+                          onChange={handleItemsChange}
+                          input={<OutlinedInput label="What items are you bringing?" />}
+                          renderValue={(selected) => (
+                            <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
+                              {selected.map((value) => (
+                                <Chip key={value} label={value} />
+                              ))}
+                            </Box>
+                          )}
+                          open={isItemsSelectOpen} // Control open state
+                          onOpen={() => setIsItemsSelectOpen(true)} // Set open when opened
+                          onClose={() => setIsItemsSelectOpen(false)} // Set closed when closed
+                          MenuProps={{
+                            PaperProps: {
+                              sx: {
+                                maxHeight: 300, // Limit height of the dropdown
+                                overflowY: 'auto',
+                              },
+                            },
+                            MenuListProps: {
+                              sx: {
+                              },
+                            },
+                          }}
+                        >
+                          {neededItems.map((item) => (
+                            <MenuItem key={item} value={item}>
+                              <Checkbox checked={formData.items_bringing.includes(item)} />
+                              <ListItemText primary={item} />
+                            </MenuItem>
+                          ))}
+                          <Box sx={{ 
+                            position: 'sticky', 
+                            bottom: 0, 
+                            left: 0, 
+                            right: 0, 
+                            backgroundColor: 'background.paper', 
+                            padding: 1, 
+                            zIndex: 1,
+                            borderTop: '1px solid',
+                            borderColor: 'divider',
+                            textAlign: 'center',
+                          }}>
+                            <Button 
+                              variant="contained" 
+                              onClick={() => setIsItemsSelectOpen(false)} 
+                              fullWidth
+                            >
+                              Done
+                            </Button>
+                          </Box>
+                        </Select>
+                      </FormControl>
+                    </>
                   )}
 
                   <TextField