Layout tweaks
This commit is contained in:
James Pattinson
@@ -229,6 +229,13 @@ const Dashboard: React.FC = () => {
|
||||
}
|
||||
};
|
||||
|
||||
const handleFormChange = (field: string, value: string) => {
|
||||
setEditFormData(prev => ({
|
||||
...prev,
|
||||
[field]: value
|
||||
}));
|
||||
};
|
||||
|
||||
const handleSaveUser = async () => {
|
||||
if (!selectedUser) return;
|
||||
|
||||
@@ -352,32 +359,18 @@ const Dashboard: React.FC = () => {
|
||||
<>
|
||||
<nav className="navbar">
|
||||
<h1>SASA Membership Portal</h1>
|
||||
<ProfileMenu userName={`${user?.first_name} ${user?.last_name}`} userRole={user?.role || ''} />
|
||||
<ProfileMenu
|
||||
userName={`${user?.first_name} ${user?.last_name}`}
|
||||
userRole={user?.role || ''}
|
||||
user={user}
|
||||
onEditProfile={handleProfileEdit}
|
||||
/>
|
||||
</nav>
|
||||
|
||||
<div className="container">
|
||||
<h2 style={{ marginTop: '20px', marginBottom: '20px' }}>Welcome, {user?.first_name}!</h2>
|
||||
|
||||
<div className="dashboard-grid">
|
||||
{/* Profile Card */}
|
||||
<div className="card">
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '16px' }}>
|
||||
<h3>Your Profile</h3>
|
||||
<button
|
||||
className="btn btn-secondary"
|
||||
onClick={handleProfileEdit}
|
||||
style={{ fontSize: '14px', padding: '6px 12px' }}
|
||||
>
|
||||
Edit Profile
|
||||
</button>
|
||||
</div>
|
||||
<p><strong>Name:</strong> {user?.first_name} {user?.last_name}</p>
|
||||
<p><strong>Email:</strong> {user?.email}</p>
|
||||
{user?.phone && <p><strong>Phone:</strong> {user.phone}</p>}
|
||||
{user?.address && <p><strong>Address:</strong> {user.address}</p>}
|
||||
<p><strong>Registered since:</strong> {user && formatDate(user.created_at)}</p>
|
||||
</div>
|
||||
|
||||
{/* Membership Card */}
|
||||
{activeMembership ? (
|
||||
<div className="card">
|
||||
@@ -408,6 +401,67 @@ const Dashboard: React.FC = () => {
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Upcoming Events */}
|
||||
<div className="card">
|
||||
<h3 style={{ marginBottom: '16px' }}>Upcoming Events</h3>
|
||||
{upcomingEvents.length > 0 ? (
|
||||
<div className="events-container">
|
||||
{upcomingEvents.map(event => (
|
||||
<div key={event.id} className="event-card">
|
||||
<div className="event-header">
|
||||
<div className="event-info">
|
||||
<h4 className="event-title">{event.title}</h4>
|
||||
<p className="event-datetime">
|
||||
{formatDate(event.event_date)} at {event.event_time}
|
||||
</p>
|
||||
{event.location && (
|
||||
<p className="event-location">
|
||||
📍 {event.location}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="event-rsvp-buttons">
|
||||
<button
|
||||
className={`rsvp-btn rsvp-btn-attending ${event.rsvp_status === 'attending' ? 'active' : ''}`}
|
||||
onClick={() => handleRSVP(event.id, 'attending')}
|
||||
disabled={rsvpLoading[event.id]}
|
||||
>
|
||||
{rsvpLoading[event.id] ? '...' : 'Attending'}
|
||||
</button>
|
||||
<button
|
||||
className={`rsvp-btn rsvp-btn-maybe ${event.rsvp_status === 'maybe' ? 'active' : ''}`}
|
||||
onClick={() => handleRSVP(event.id, 'maybe')}
|
||||
disabled={rsvpLoading[event.id]}
|
||||
>
|
||||
{rsvpLoading[event.id] ? '...' : 'Maybe'}
|
||||
</button>
|
||||
<button
|
||||
className={`rsvp-btn rsvp-btn-not-attending ${event.rsvp_status === 'not_attending' ? 'active' : ''}`}
|
||||
onClick={() => handleRSVP(event.id, 'not_attending')}
|
||||
disabled={rsvpLoading[event.id]}
|
||||
>
|
||||
{rsvpLoading[event.id] ? '...' : 'Not Attending'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{event.description && (
|
||||
<p className="event-description">
|
||||
{event.description}
|
||||
</p>
|
||||
)}
|
||||
{event.rsvp_status && (
|
||||
<div className={`event-rsvp-status ${event.rsvp_status}`}>
|
||||
<strong>Your RSVP:</strong> <span style={{ textTransform: 'capitalize' }}>{event.rsvp_status.replace('_', ' ')}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<p style={{ color: '#666' }}>No upcoming events at this time.</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Payment History */}
|
||||
@@ -445,125 +499,6 @@ const Dashboard: React.FC = () => {
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Upcoming Events */}
|
||||
<div className="card" style={{ marginTop: '20px' }}>
|
||||
<h3 style={{ marginBottom: '16px' }}>Upcoming Events</h3>
|
||||
{upcomingEvents.length > 0 ? (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
|
||||
{upcomingEvents.map(event => (
|
||||
<div key={event.id} style={{
|
||||
border: '1px solid #ddd',
|
||||
borderRadius: '8px',
|
||||
padding: '16px',
|
||||
backgroundColor: '#f9f9f9'
|
||||
}}>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: '12px' }}>
|
||||
<div>
|
||||
<h4 style={{ margin: '0 0 4px 0', color: '#0066cc' }}>{event.title}</h4>
|
||||
<p style={{ margin: '0', fontSize: '14px', color: '#666' }}>
|
||||
{formatDate(event.event_date)} at {event.event_time}
|
||||
</p>
|
||||
{event.location && (
|
||||
<p style={{ margin: '4px 0 0 0', fontSize: '14px', color: '#666' }}>
|
||||
📍 {event.location}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div style={{ display: 'flex', gap: '8px' }}>
|
||||
<button
|
||||
className={`btn ${event.rsvp_status === 'attending' ? 'btn-success' : 'btn-outline-secondary'}`}
|
||||
onClick={() => handleRSVP(event.id, 'attending')}
|
||||
disabled={rsvpLoading[event.id]}
|
||||
style={{
|
||||
fontSize: '12px',
|
||||
padding: '8px 16px',
|
||||
opacity: rsvpLoading[event.id] ? 0.6 : event.rsvp_status ? (event.rsvp_status === 'attending' ? 1 : 0.4) : 1,
|
||||
cursor: rsvpLoading[event.id] ? 'not-allowed' : 'pointer',
|
||||
fontWeight: event.rsvp_status === 'attending' ? 'bold' : 'normal',
|
||||
border: event.rsvp_status === 'attending' ? '3px solid #28a745' : '2px solid #adb5bd',
|
||||
backgroundColor: event.rsvp_status === 'attending' ? '#28a745' : 'transparent',
|
||||
color: event.rsvp_status === 'attending' ? 'white' : '#6c757d',
|
||||
transform: event.rsvp_status === 'attending' ? 'scale(1.1)' : event.rsvp_status ? 'scale(0.95)' : 'scale(1)',
|
||||
boxShadow: event.rsvp_status === 'attending' ? '0 4px 8px rgba(40, 167, 69, 0.3)' : 'none',
|
||||
transition: 'all 0.3s ease',
|
||||
filter: event.rsvp_status && event.rsvp_status !== 'attending' ? 'grayscale(50%)' : 'none'
|
||||
}}
|
||||
>
|
||||
{rsvpLoading[event.id] ? '...' : 'Attending'}
|
||||
</button>
|
||||
<button
|
||||
className={`btn ${event.rsvp_status === 'maybe' ? 'btn-warning' : 'btn-outline-secondary'}`}
|
||||
onClick={() => handleRSVP(event.id, 'maybe')}
|
||||
disabled={rsvpLoading[event.id]}
|
||||
style={{
|
||||
fontSize: '12px',
|
||||
padding: '8px 16px',
|
||||
opacity: rsvpLoading[event.id] ? 0.6 : event.rsvp_status ? (event.rsvp_status === 'maybe' ? 1 : 0.4) : 1,
|
||||
cursor: rsvpLoading[event.id] ? 'not-allowed' : 'pointer',
|
||||
fontWeight: event.rsvp_status === 'maybe' ? 'bold' : 'normal',
|
||||
border: event.rsvp_status === 'maybe' ? '3px solid #ffc107' : '2px solid #adb5bd',
|
||||
backgroundColor: event.rsvp_status === 'maybe' ? '#ffc107' : 'transparent',
|
||||
color: event.rsvp_status === 'maybe' ? '#212529' : '#6c757d',
|
||||
transform: event.rsvp_status === 'maybe' ? 'scale(1.1)' : event.rsvp_status ? 'scale(0.95)' : 'scale(1)',
|
||||
boxShadow: event.rsvp_status === 'maybe' ? '0 4px 8px rgba(255, 193, 7, 0.3)' : 'none',
|
||||
transition: 'all 0.3s ease',
|
||||
filter: event.rsvp_status && event.rsvp_status !== 'maybe' ? 'grayscale(50%)' : 'none'
|
||||
}}
|
||||
>
|
||||
{rsvpLoading[event.id] ? '...' : 'Maybe'}
|
||||
</button>
|
||||
<button
|
||||
className={`btn ${event.rsvp_status === 'not_attending' ? 'btn-danger' : 'btn-outline-secondary'}`}
|
||||
onClick={() => handleRSVP(event.id, 'not_attending')}
|
||||
disabled={rsvpLoading[event.id]}
|
||||
style={{
|
||||
fontSize: '12px',
|
||||
padding: '8px 16px',
|
||||
opacity: rsvpLoading[event.id] ? 0.6 : event.rsvp_status ? (event.rsvp_status === 'not_attending' ? 1 : 0.4) : 1,
|
||||
cursor: rsvpLoading[event.id] ? 'not-allowed' : 'pointer',
|
||||
fontWeight: event.rsvp_status === 'not_attending' ? 'bold' : 'normal',
|
||||
border: event.rsvp_status === 'not_attending' ? '3px solid #dc3545' : '2px solid #adb5bd',
|
||||
backgroundColor: event.rsvp_status === 'not_attending' ? '#dc3545' : 'transparent',
|
||||
color: event.rsvp_status === 'not_attending' ? 'white' : '#6c757d',
|
||||
transform: event.rsvp_status === 'not_attending' ? 'scale(1.1)' : event.rsvp_status ? 'scale(0.95)' : 'scale(1)',
|
||||
boxShadow: event.rsvp_status === 'not_attending' ? '0 4px 8px rgba(220, 53, 69, 0.3)' : 'none',
|
||||
transition: 'all 0.3s ease',
|
||||
filter: event.rsvp_status && event.rsvp_status !== 'not_attending' ? 'grayscale(50%)' : 'none'
|
||||
}}
|
||||
>
|
||||
{rsvpLoading[event.id] ? '...' : 'Not Attending'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{event.description && (
|
||||
<p style={{ margin: '0', fontSize: '14px', lineHeight: '1.4' }}>
|
||||
{event.description}
|
||||
</p>
|
||||
)}
|
||||
{event.rsvp_status && (
|
||||
<div style={{
|
||||
marginTop: '12px',
|
||||
padding: '8px 12px',
|
||||
backgroundColor: event.rsvp_status === 'attending' ? '#d4edda' :
|
||||
event.rsvp_status === 'maybe' ? '#fff3cd' : '#f8d7da',
|
||||
border: `1px solid ${event.rsvp_status === 'attending' ? '#c3e6cb' :
|
||||
event.rsvp_status === 'maybe' ? '#ffeaa7' : '#f5c6cb'}`,
|
||||
borderRadius: '4px',
|
||||
fontSize: '12px',
|
||||
color: event.rsvp_status === 'attending' ? '#155724' :
|
||||
event.rsvp_status === 'maybe' ? '#856404' : '#721c24'
|
||||
}}>
|
||||
<strong>Your RSVP:</strong> <span style={{ textTransform: 'capitalize' }}>{event.rsvp_status.replace('_', ' ')}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<p style={{ color: '#666' }}>No upcoming events at this time.</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Admin Section */}
|
||||
{(user?.role === 'admin' || user?.role === 'super_admin') && (
|
||||
<div className="card" style={{ marginTop: '20px' }}>
|
||||
|
||||
Reference in New Issue
Block a user