Add admin functionality and improve UI styling

frontend/src/components/EventAdmin.tsx

@@ -0,0 +1,184 @@
+import React, { useState, useEffect } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import {
+  Box,
+  Paper,
+  Typography,
+  Button,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableRow,
+  IconButton,
+  Container,
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+} from '@mui/material';
+import DeleteIcon from '@mui/icons-material/Delete';
+import EditIcon from '@mui/icons-material/Edit';
+import axios from 'axios';
+
+interface RSVP {
+  id: number;
+  name: string;
+  attending: string;
+  bringing_guests: string;
+  guest_count: number;
+  guest_names: string;
+  items_bringing: string;
+}
+
+interface Event {
+  id: number;
+  title: string;
+  description: string;
+  date: string;
+  location: string;
+  slug: string;
+}
+
+const EventAdmin: React.FC = () => {
+  const { slug } = useParams<{ slug: string }>();
+  const navigate = useNavigate();
+  const [event, setEvent] = useState<Event | null>(null);
+  const [rsvps, setRsvps] = useState<RSVP[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [rsvpToDelete, setRsvpToDelete] = useState<RSVP | null>(null);
+
+  useEffect(() => {
+    fetchEventAndRsvps();
+  }, [slug]);
+
+  const fetchEventAndRsvps = async () => {
+    try {
+      const [eventResponse, rsvpsResponse] = await Promise.all([
+        axios.get(`/api/events/${slug}`),
+        axios.get(`/api/events/${slug}/rsvps`)
+      ]);
+      setEvent(eventResponse.data);
+      setRsvps(rsvpsResponse.data);
+      setLoading(false);
+    } catch (error) {
+      setError('Failed to load event data');
+      setLoading(false);
+    }
+  };
+
+  const handleDeleteRsvp = async (rsvp: RSVP) => {
+    setRsvpToDelete(rsvp);
+    setDeleteDialogOpen(true);
+  };
+
+  const confirmDelete = async () => {
+    if (!rsvpToDelete) return;
+    
+    try {
+      await axios.delete(`/api/events/${slug}/rsvps/${rsvpToDelete.id}`);
+      setRsvps(rsvps.filter(r => r.id !== rsvpToDelete.id));
+      setDeleteDialogOpen(false);
+      setRsvpToDelete(null);
+    } catch (error) {
+      setError('Failed to delete RSVP');
+    }
+  };
+
+  if (loading) {
+    return (
+      <Container maxWidth="lg">
+        <Typography>Loading...</Typography>
+      </Container>
+    );
+  }
+
+  if (error || !event) {
+    return (
+      <Container maxWidth="lg">
+        <Typography color="error">{error || 'Event not found'}</Typography>
+      </Container>
+    );
+  }
+
+  return (
+    <Container maxWidth="lg">
+      <Paper elevation={3} sx={{ p: 4, mt: 4 }}>
+        <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 4 }}>
+          <Typography variant="h4" component="h2" color="primary">
+            {event.title} - Admin
+          </Typography>
+          <Button
+            variant="outlined"
+            onClick={() => navigate('/')}
+          >
+            Back to Events
+          </Button>
+        </Box>
+
+        <Typography variant="h6" gutterBottom>
+          RSVPs ({rsvps.length})
+        </Typography>
+
+        <TableContainer>
+          <Table>
+            <TableHead>
+              <TableRow>
+                <TableCell>Name</TableCell>
+                <TableCell>Attending</TableCell>
+                <TableCell>Guests</TableCell>
+                <TableCell>Items Bringing</TableCell>
+                <TableCell>Actions</TableCell>
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {rsvps.map((rsvp) => (
+                <TableRow key={rsvp.id}>
+                  <TableCell>{rsvp.name}</TableCell>
+                  <TableCell>{rsvp.attending}</TableCell>
+                  <TableCell>
+                    {rsvp.bringing_guests === 'yes' ? (
+                      `${rsvp.guest_count} - ${rsvp.guest_names}`
+                    ) : (
+                      'No'
+                    )}
+                  </TableCell>
+                  <TableCell>{rsvp.items_bringing}</TableCell>
+                  <TableCell>
+                    <IconButton
+                      color="error"
+                      onClick={() => handleDeleteRsvp(rsvp)}
+                    >
+                      <DeleteIcon />
+                    </IconButton>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </TableContainer>
+      </Paper>
+
+      <Dialog
+        open={deleteDialogOpen}
+        onClose={() => setDeleteDialogOpen(false)}
+      >
+        <DialogTitle>Delete RSVP</DialogTitle>
+        <DialogContent>
+          <Typography>
+            Are you sure you want to delete {rsvpToDelete?.name}'s RSVP?
+          </Typography>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={() => setDeleteDialogOpen(false)}>Cancel</Button>
+          <Button onClick={confirmDelete} color="error">Delete</Button>
+        </DialogActions>
+      </Dialog>
+    </Container>
+  );
+};
+
+export default EventAdmin; 

frontend/src/components/EventForm.tsx

@@ -6,6 +6,7 @@ import {
   TextField,
   Typography,
   Container,
+  Paper,
 } from '@mui/material';
 import axios from 'axios';
 
@@ -17,6 +18,7 @@ const EventForm: React.FC = () => {
     date: '',
     location: '',
   });
+  const [error, setError] = useState<string | null>(null);
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const { name, value } = e.target;
@@ -28,28 +30,37 @@ const EventForm: React.FC = () => {
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
+    setError(null);
     try {
       await axios.post('/api/events', formData);
       navigate('/');
     } catch (error) {
+      setError('Failed to create event. Please try again.');
       console.error('Error creating event:', error);
     }
   };
 
   return (
     <Container maxWidth="sm">
-      <Box sx={{ mt: 4 }}>
-        <Typography variant="h4" component="h1" gutterBottom>
+      <Paper elevation={3} sx={{ p: 4, mt: 4 }}>
+        <Typography variant="h4" component="h2" gutterBottom color="primary" align="center">
           Create New Event
         </Typography>
-        <form onSubmit={handleSubmit}>
+        
+        {error && (
+          <Typography color="error" align="center" sx={{ mb: 2 }}>
+            {error}
+          </Typography>
+        )}
+
+        <Box component="form" onSubmit={handleSubmit} sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
           <TextField
             fullWidth
             label="Title"
             name="title"
             value={formData.title}
             onChange={handleChange}
-            margin="normal"
+            variant="outlined"
             required
           />
           <TextField
@@ -58,7 +69,7 @@ const EventForm: React.FC = () => {
             name="description"
             value={formData.description}
             onChange={handleChange}
-            margin="normal"
+            variant="outlined"
             multiline
             rows={4}
           />
@@ -69,7 +80,7 @@ const EventForm: React.FC = () => {
             type="datetime-local"
             value={formData.date}
             onChange={handleChange}
-            margin="normal"
+            variant="outlined"
             required
             InputLabelProps={{
               shrink: true,
@@ -81,7 +92,7 @@ const EventForm: React.FC = () => {
             name="location"
             value={formData.location}
             onChange={handleChange}
-            margin="normal"
+            variant="outlined"
             required
           />
           <Box sx={{ mt: 3, display: 'flex', gap: 2 }}>
@@ -89,18 +100,20 @@ const EventForm: React.FC = () => {
               variant="contained"
               color="primary"
               type="submit"
+              size="large"
             >
               Create Event
             </Button>
             <Button
               variant="outlined"
               onClick={() => navigate('/')}
+              size="large"
             >
               Cancel
             </Button>
           </Box>
-        </form>
-      </Box>
+        </Box>
+      </Paper>
     </Container>
   );
 };

frontend/src/components/EventList.tsx

@@ -7,7 +7,10 @@ import {
   CardContent,
   Typography,
   Grid,
+  CardActions,
+  IconButton,
 } from '@mui/material';
+import AdminPanelSettingsIcon from '@mui/icons-material/AdminPanelSettings';
 import axios from 'axios';
 
 interface Event {
@@ -40,6 +43,10 @@ const EventList: React.FC = () => {
     navigate(`/events/${event.slug}/rsvp`);
   };
 
+  const handleAdminClick = (event: Event) => {
+    navigate(`/events/${event.slug}/admin`);
+  };
+
   return (
     <Box>
       <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 4 }}>
@@ -78,6 +85,18 @@ const EventList: React.FC = () => {
                   {event.description}
                 </Typography>
               </CardContent>
+              <CardActions>
+                <IconButton
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    handleAdminClick(event);
+                  }}
+                  color="primary"
+                  aria-label="admin"
+                >
+                  <AdminPanelSettingsIcon />
+                </IconButton>
+              </CardActions>
             </Card>
           </Grid>
         ))}

frontend/src/components/RSVPForm.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { useParams } from 'react-router-dom';
+import { useParams, useNavigate } from 'react-router-dom';
 import axios from 'axios';
 import {
   Box,
@@ -37,6 +37,7 @@ const RSVPForm: React.FC = () => {
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [success, setSuccess] = useState(false);
+  const navigate = useNavigate();
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
     const { name, value } = e.target;
@@ -76,9 +77,16 @@ const RSVPForm: React.FC = () => {
           <Typography variant="h4" component="h2" gutterBottom color="primary">
             Thank You!
           </Typography>
-          <Typography variant="body1">
+          <Typography variant="body1" sx={{ mb: 3 }}>
             Your RSVP has been submitted successfully.
           </Typography>
+          <Button
+            variant="contained"
+            color="primary"
+            onClick={() => navigate('/')}
+          >
+            Back to Events
+          </Button>
         </Paper>
       </Container>
     );