Bounce management
This commit is contained in:
James Pattinson
110
frontend/src/pages/BounceManagement.tsx
Normal file
110
frontend/src/pages/BounceManagement.tsx
Normal file
@@ -0,0 +1,110 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import axios from 'axios';
|
||||
import BounceManagement from '../components/BounceManagement';
|
||||
|
||||
const BounceManagementPage: React.FC = () => {
|
||||
const navigate = useNavigate();
|
||||
const [isSuperAdmin, setIsSuperAdmin] = useState(false);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
checkSuperAdminAccess();
|
||||
}, []);
|
||||
|
||||
const checkSuperAdminAccess = async () => {
|
||||
try {
|
||||
const token = localStorage.getItem('token');
|
||||
if (!token) {
|
||||
navigate('/login');
|
||||
return;
|
||||
}
|
||||
|
||||
const response = await axios.get('/api/v1/users/me', {
|
||||
headers: { Authorization: `Bearer ${token}` }
|
||||
});
|
||||
|
||||
if (response.data.role !== 'super_admin') {
|
||||
navigate('/dashboard');
|
||||
return;
|
||||
}
|
||||
|
||||
setIsSuperAdmin(true);
|
||||
} catch (error) {
|
||||
console.error('Error checking user role:', error);
|
||||
navigate('/login');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
height: '100vh',
|
||||
backgroundColor: '#f8f9fa'
|
||||
}}>
|
||||
<div>Loading...</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!isSuperAdmin) {
|
||||
return null; // Will redirect
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={{
|
||||
minHeight: '100vh',
|
||||
backgroundColor: '#f8f9fa',
|
||||
padding: '20px'
|
||||
}}>
|
||||
<div style={{
|
||||
maxWidth: '1400px',
|
||||
margin: '0 auto',
|
||||
backgroundColor: 'white',
|
||||
borderRadius: '8px',
|
||||
boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
|
||||
overflow: 'hidden'
|
||||
}}>
|
||||
<div style={{
|
||||
backgroundColor: '#dc3545',
|
||||
color: 'white',
|
||||
padding: '20px',
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center'
|
||||
}}>
|
||||
<div>
|
||||
<h1 style={{ margin: 0, fontSize: '24px' }}>Email Bounce Management</h1>
|
||||
<p style={{ margin: '5px 0 0 0', opacity: 0.9 }}>
|
||||
Monitor and manage email bounce records to maintain deliverability
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => navigate('/dashboard')}
|
||||
style={{
|
||||
padding: '8px 16px',
|
||||
backgroundColor: 'rgba(255,255,255,0.2)',
|
||||
color: 'white',
|
||||
border: '1px solid rgba(255,255,255,0.3)',
|
||||
borderRadius: '4px',
|
||||
cursor: 'pointer'
|
||||
}}
|
||||
>
|
||||
Back to Dashboard
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div style={{ padding: '20px' }}>
|
||||
<BounceManagement />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default BounceManagementPage;
|
||||
@@ -3,6 +3,7 @@ import { useNavigate } from 'react-router-dom';
|
||||
import { authService, userService, membershipService, paymentService, User, Membership, Payment } from '../services/membershipService';
|
||||
import MembershipSetup from '../components/MembershipSetup';
|
||||
import ProfileMenu from '../components/ProfileMenu';
|
||||
import ProfileEdit from '../components/ProfileEdit';
|
||||
|
||||
const Dashboard: React.FC = () => {
|
||||
const navigate = useNavigate();
|
||||
@@ -14,6 +15,7 @@ const Dashboard: React.FC = () => {
|
||||
const [allUsers, setAllUsers] = useState<User[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [showMembershipSetup, setShowMembershipSetup] = useState(false);
|
||||
const [showProfileEdit, setShowProfileEdit] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (!authService.isAuthenticated()) {
|
||||
@@ -67,6 +69,19 @@ const Dashboard: React.FC = () => {
|
||||
setShowMembershipSetup(false);
|
||||
};
|
||||
|
||||
const handleProfileEdit = () => {
|
||||
setShowProfileEdit(true);
|
||||
};
|
||||
|
||||
const handleProfileSave = (updatedUser: User) => {
|
||||
setUser(updatedUser);
|
||||
setShowProfileEdit(false);
|
||||
};
|
||||
|
||||
const handleProfileCancel = () => {
|
||||
setShowProfileEdit(false);
|
||||
};
|
||||
|
||||
const getUserName = (userId: number): string => {
|
||||
const user = allUsers.find(u => u.id === userId);
|
||||
return user ? `${user.first_name} ${user.last_name}` : `User #${userId}`;
|
||||
@@ -159,7 +174,16 @@ const Dashboard: React.FC = () => {
|
||||
<div className="dashboard-grid">
|
||||
{/* Profile Card */}
|
||||
<div className="card">
|
||||
<h3 style={{ marginBottom: '16px' }}>Your Profile</h3>
|
||||
<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>}
|
||||
@@ -386,6 +410,14 @@ const Dashboard: React.FC = () => {
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{showProfileEdit && user && (
|
||||
<ProfileEdit
|
||||
user={user}
|
||||
onSave={handleProfileSave}
|
||||
onCancel={handleProfileCancel}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -34,8 +34,26 @@ const Login: React.FC = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="auth-container">
|
||||
<div className="auth-card">
|
||||
<div className="auth-container" style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'center', gap: '40px', padding: '20px' }}>
|
||||
<div className="welcome-section" style={{
|
||||
flex: '1',
|
||||
maxWidth: '400px',
|
||||
textAlign: 'center',
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.95)',
|
||||
padding: '30px',
|
||||
borderRadius: '12px',
|
||||
boxShadow: '0 4px 16px rgba(0, 0, 0, 0.1)'
|
||||
}}>
|
||||
<h1 style={{ color: '#333', marginBottom: '16px', fontSize: '2.2rem' }}>Welcome to SASA</h1>
|
||||
<p style={{ fontSize: '1.1rem', color: '#666', lineHeight: '1.6', marginBottom: '20px' }}>
|
||||
REPLACE WITH BOB WORDS: Swansea Airport Supporters Association is a community interest company run by volunteers, which holds the lease of Swansea Airport.
|
||||
</p>
|
||||
<p style={{ fontSize: '1rem', color: '#555', lineHeight: '1.5' }}>
|
||||
Join our community of aviation enthusiasts and support the future of Swansea Airport.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="auth-card" style={{ flex: '1', maxWidth: '400px' }}>
|
||||
<h2>SASA Member Portal</h2>
|
||||
<p style={{ textAlign: 'center', marginBottom: '24px', color: '#666' }}>
|
||||
Log in to your membership account
|
||||
|
||||
Reference in New Issue
Block a user