nathanb/sasa-membership
1
0
Fork 0
forked from jamesp/sasa-membership
Code Pull Requests Activity

Square enhancements

Browse Source
This commit is contained in:
James Pattinson
2025-11-13 17:41:28 +00:00
parent dac8b43915
commit b8f2d12011
6 changed files with 410 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/Dashboard.tsx
+135 -4
View File
@@ -36,6 +36,9 @@ const Dashboard: React.FC = () => {
location: '',
max_attendees: ''
});
const [showRSVPModal, setShowRSVPModal] = useState(false);
const [selectedEventForRSVP, setSelectedEventForRSVP] = useState<Event | null>(null);
const [eventRSVPList, setEventRSVPList] = useState<EventRSVP[]>([]);
useEffect(() => {
if (!authService.isAuthenticated()) {
@@ -410,6 +413,24 @@ const Dashboard: React.FC = () => {
setEditingEvent(null);
};
const handleViewRSVPs = async (event: Event) => {
setSelectedEventForRSVP(event);
try {
const rsvps = await eventService.getEventRSVPs(event.id);
setEventRSVPList(rsvps);
setShowRSVPModal(true);
} catch (error) {
console.error('Failed to load RSVPs:', error);
alert('Failed to load RSVPs. Please try again.');
}
};
const handleCloseRSVPModal = () => {
setShowRSVPModal(false);
setSelectedEventForRSVP(null);
setEventRSVPList([]);
};
const formatDate = (dateString: string) => {
return new Date(dateString).toLocaleDateString('en-GB', {
day: 'numeric',
@@ -818,7 +839,11 @@ const Dashboard: React.FC = () => {
</thead>
<tbody>
{allEvents.map(event => (
<tr key={event.id} style={{ borderBottom: '1px solid #eee' }}>
<tr
key={event.id}
style={{ borderBottom: '1px solid #eee', cursor: 'pointer' }}
onClick={() => handleViewRSVPs(event)}
>
<td style={{ padding: '12px' }}>
<div>
<strong>{event.title}</strong>
@@ -854,7 +879,10 @@ const Dashboard: React.FC = () => {
<div style={{ display: 'flex', gap: '4px' }}>
<button
className="btn btn-secondary"
onClick={() => handleEditEvent(event)}
onClick={(e) => {
e.stopPropagation();
handleEditEvent(event);
}}
style={{ fontSize: '12px', padding: '4px 8px' }}
>
Edit
@@ -862,7 +890,10 @@ const Dashboard: React.FC = () => {
{event.status === 'draft' && (
<button
className="btn btn-primary"
onClick={() => handlePublishEvent(event.id)}
onClick={(e) => {
e.stopPropagation();
handlePublishEvent(event.id);
}}
style={{ fontSize: '12px', padding: '4px 8px' }}
>
Publish
@@ -871,7 +902,10 @@ const Dashboard: React.FC = () => {
{event.status === 'published' && (
<button
className="btn btn-secondary"
onClick={() => handleCancelEvent(event.id)}
onClick={(e) => {
e.stopPropagation();
handleCancelEvent(event.id);
}}
style={{ fontSize: '12px', padding: '4px 8px' }}
>
Cancel
@@ -1233,6 +1267,103 @@ const Dashboard: React.FC = () => {
</div>
</div>
)}
{/* RSVP List Modal */}
{showRSVPModal && selectedEventForRSVP && (
<div className="modal-overlay" onClick={handleCloseRSVPModal}>
<div
className="modal-content"
style={{ maxWidth: '700px', maxHeight: '80vh', overflow: 'auto' }}
onClick={(e) => e.stopPropagation()}
>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '20px' }}>
<h3 style={{ margin: 0 }}>RSVPs for {selectedEventForRSVP.title}</h3>
<button
onClick={handleCloseRSVPModal}
style={{
background: 'none',
border: 'none',
fontSize: '24px',
cursor: 'pointer',
color: '#666'
}}
>
×
</button>
</div>
<div style={{ marginBottom: '16px', padding: '12px', backgroundColor: '#f5f5f5', borderRadius: '4px' }}>
<p style={{ margin: '4px 0', fontSize: '14px' }}><strong>Date:</strong> {formatDate(selectedEventForRSVP.event_date)}</p>
{selectedEventForRSVP.event_time && (
<p style={{ margin: '4px 0', fontSize: '14px' }}><strong>Time:</strong> {selectedEventForRSVP.event_time}</p>
)}
{selectedEventForRSVP.location && (
<p style={{ margin: '4px 0', fontSize: '14px' }}><strong>Location:</strong> {selectedEventForRSVP.location}</p>
)}
</div>
{eventRSVPList.length > 0 ? (
<>
<div style={{ marginBottom: '16px', display: 'flex', gap: '16px', fontSize: '14px' }}>
<div>
<strong>Attending:</strong> {eventRSVPList.filter(r => r.status === 'attending').length}
</div>
<div>
<strong>Maybe:</strong> {eventRSVPList.filter(r => r.status === 'maybe').length}
</div>
<div>
<strong>Not Attending:</strong> {eventRSVPList.filter(r => r.status === 'not_attending').length}
</div>
</div>
<div className="table-container">
<table style={{ width: '100%', borderCollapse: 'collapse' }}>
<thead>
<tr style={{ borderBottom: '2px solid #ddd' }}>
<th style={{ padding: '12px', textAlign: 'left' }}>Name</th>
<th style={{ padding: '12px', textAlign: 'left' }}>Email</th>
<th style={{ padding: '12px', textAlign: 'left' }}>RSVP</th>
<th style={{ padding: '12px', textAlign: 'left' }}>Date</th>
</tr>
</thead>
<tbody>
{eventRSVPList.map(rsvp => {
const rsvpUser = allUsers.find(u => u.id === rsvp.user_id);
return (
<tr key={rsvp.id} style={{ borderBottom: '1px solid #eee' }}>
<td style={{ padding: '12px' }}>
{rsvpUser ? `${rsvpUser.first_name} ${rsvpUser.last_name}` : `User #${rsvp.user_id}`}
</td>
<td style={{ padding: '12px' }}>
{rsvpUser?.email || 'N/A'}
</td>
<td style={{ padding: '12px' }}>
<span className={`status-badge ${
rsvp.status === 'attending' ? 'status-active' :
rsvp.status === 'maybe' ? 'status-pending' :
'status-expired'
}`}>
{rsvp.status === 'attending' ? 'ATTENDING' :
rsvp.status === 'maybe' ? 'MAYBE' :
'NOT ATTENDING'}
</span>
</td>
<td style={{ padding: '12px', fontSize: '12px', color: '#666' }}>
{rsvp.created_at ? formatDate(rsvp.created_at) : 'N/A'}
</td>
</tr>
);
})}
</tbody>
</table>
</div>
</>
) : (
<p style={{ textAlign: 'center', color: '#666', padding: '20px' }}>No RSVPs yet for this event.</p>
)}
</div>
</div>
)}
</>
);
};