Bounce management
This commit is contained in:
James Pattinson
@@ -102,6 +102,13 @@ Each tier will have associated annual fees and benefits.
|
||||
- Advanced reporting and analytics
|
||||
- Integration with other alliance systems
|
||||
- Multi-language support
|
||||
- **Asynchronous Batch Processing**: Implement automated renewal reminder system using scheduled batch jobs
|
||||
- Create containerized renewal reminder script that runs daily
|
||||
- Query memberships expiring within configurable timeframe (e.g., 30 days)
|
||||
- Send personalized renewal reminder emails using existing email templates
|
||||
- Add batch job scheduling with cron or similar scheduler
|
||||
- Include logging and monitoring for batch job execution
|
||||
- Extend pattern for other automated tasks (payment reminders, membership expiration processing)
|
||||
|
||||
## Project Requirements
|
||||
|
||||
|
||||
@@ -1,8 +1,14 @@
|
||||
from fastapi import APIRouter, Depends, HTTPException
|
||||
from pydantic import BaseModel, EmailStr
|
||||
from ...services.email_service import email_service
|
||||
from ...services.bounce_service import bounce_service
|
||||
from ...api.dependencies import get_admin_user
|
||||
from ...models.models import User
|
||||
from typing import Dict, Any, List
|
||||
from ...core.database import get_db
|
||||
from sqlalchemy.orm import Session
|
||||
|
||||
router = APIRouter()
|
||||
|
||||
router = APIRouter()
|
||||
|
||||
@@ -21,7 +27,8 @@ class WelcomeEmailRequest(BaseModel):
|
||||
@router.post("/test-email")
|
||||
async def send_test_email(
|
||||
request: TestEmailRequest,
|
||||
current_user: User = Depends(get_admin_user)
|
||||
current_user: User = Depends(get_admin_user),
|
||||
db: Session = Depends(get_db)
|
||||
):
|
||||
"""Send a test email (admin only)"""
|
||||
html_body = f"<html><body><p>{request.message}</p></body></html>"
|
||||
@@ -29,7 +36,8 @@ async def send_test_email(
|
||||
to_email=request.to_email,
|
||||
subject=request.subject,
|
||||
html_body=html_body,
|
||||
text_body=request.message
|
||||
text_body=request.message,
|
||||
db=db
|
||||
)
|
||||
return {"success": True, "result": result}
|
||||
|
||||
@@ -45,3 +53,118 @@ async def send_test_welcome_email(
|
||||
first_name=request.first_name
|
||||
)
|
||||
return {"success": True, "result": result}
|
||||
|
||||
|
||||
@router.post("/webhooks/smtp2go/bounce")
|
||||
async def smtp2go_bounce_webhook(
|
||||
webhook_data: Dict[str, Any],
|
||||
db: Session = Depends(get_db)
|
||||
):
|
||||
"""
|
||||
Webhook endpoint for SMTP2GO bounce notifications
|
||||
This endpoint should be configured in SMTP2GO webhook settings
|
||||
"""
|
||||
try:
|
||||
bounces_created = bounce_service.process_smtp2go_webhook(webhook_data, db)
|
||||
return {
|
||||
"success": True,
|
||||
"bounces_processed": len(bounces_created),
|
||||
"message": f"Successfully processed {len(bounces_created)} bounce events"
|
||||
}
|
||||
except Exception as e:
|
||||
raise HTTPException(status_code=500, detail=f"Failed to process bounce webhook: {str(e)}")
|
||||
|
||||
|
||||
@router.get("/bounces")
|
||||
async def get_bounce_list(
|
||||
skip: int = 0,
|
||||
limit: int = 100,
|
||||
current_user: User = Depends(get_admin_user),
|
||||
db: Session = Depends(get_db)
|
||||
):
|
||||
"""Get list of email bounces (admin only)"""
|
||||
from ...models.models import EmailBounce
|
||||
|
||||
bounces = db.query(EmailBounce).offset(skip).limit(limit).all()
|
||||
total = db.query(EmailBounce).count()
|
||||
|
||||
return {
|
||||
"bounces": [
|
||||
{
|
||||
"id": bounce.id,
|
||||
"email": bounce.email,
|
||||
"bounce_type": bounce.bounce_type.value,
|
||||
"bounce_reason": bounce.bounce_reason,
|
||||
"bounce_date": bounce.bounce_date.isoformat(),
|
||||
"is_active": bounce.is_active,
|
||||
"smtp2go_message_id": bounce.smtp2go_message_id
|
||||
}
|
||||
for bounce in bounces
|
||||
],
|
||||
"total": total,
|
||||
"skip": skip,
|
||||
"limit": limit
|
||||
}
|
||||
|
||||
|
||||
@router.get("/bounces/stats")
|
||||
async def get_bounce_statistics(
|
||||
current_user: User = Depends(get_admin_user),
|
||||
db: Session = Depends(get_db)
|
||||
):
|
||||
"""Get bounce statistics (admin only)"""
|
||||
stats = bounce_service.get_bounce_statistics(db)
|
||||
return stats
|
||||
|
||||
|
||||
@router.get("/bounces/{email}")
|
||||
async def get_bounce_history(
|
||||
email: str,
|
||||
current_user: User = Depends(get_admin_user)
|
||||
):
|
||||
"""Get bounce history for a specific email (admin only)"""
|
||||
bounces = bounce_service.get_bounce_history(email)
|
||||
|
||||
return {
|
||||
"email": email,
|
||||
"bounces": [
|
||||
{
|
||||
"id": bounce.id,
|
||||
"bounce_type": bounce.bounce_type.value,
|
||||
"bounce_reason": bounce.bounce_reason,
|
||||
"bounce_date": bounce.bounce_date.isoformat(),
|
||||
"is_active": bounce.is_active,
|
||||
"smtp2go_message_id": bounce.smtp2go_message_id
|
||||
}
|
||||
for bounce in bounces
|
||||
]
|
||||
}
|
||||
|
||||
|
||||
@router.post("/bounces/cleanup")
|
||||
async def cleanup_old_bounces(
|
||||
days_old: int = 365,
|
||||
current_user: User = Depends(get_admin_user),
|
||||
db: Session = Depends(get_db)
|
||||
):
|
||||
"""Clean up old soft bounces (admin only)"""
|
||||
cleaned_count = bounce_service.cleanup_old_bounces(days_old, db)
|
||||
return {
|
||||
"success": True,
|
||||
"message": f"Cleaned up {cleaned_count} old soft bounce records"
|
||||
}
|
||||
|
||||
|
||||
@router.delete("/bounces/deactivate/{bounce_id}")
|
||||
async def deactivate_bounce(
|
||||
bounce_id: int,
|
||||
current_user: User = Depends(get_admin_user),
|
||||
db: Session = Depends(get_db)
|
||||
):
|
||||
"""Deactivate a bounce record (mark as resolved) (admin only)"""
|
||||
success = bounce_service.deactivate_bounce(bounce_id, db)
|
||||
|
||||
if not success:
|
||||
raise HTTPException(status_code=404, detail="Bounce record not found")
|
||||
|
||||
return {"success": True, "message": "Bounce record deactivated"}
|
||||
|
||||
@@ -288,3 +288,24 @@ class EmailTemplate(Base):
|
||||
is_active = Column(Boolean, default=True, nullable=False)
|
||||
created_at = Column(DateTime, default=datetime.utcnow, nullable=False)
|
||||
updated_at = Column(DateTime, default=datetime.utcnow, onupdate=datetime.utcnow, nullable=False)
|
||||
|
||||
|
||||
class BounceType(str, enum.Enum):
|
||||
HARD = "hard"
|
||||
SOFT = "soft"
|
||||
COMPLAINT = "complaint"
|
||||
UNSUBSCRIBE = "unsubscribe"
|
||||
|
||||
|
||||
class EmailBounce(Base):
|
||||
__tablename__ = "email_bounces"
|
||||
|
||||
id = Column(Integer, primary_key=True, index=True)
|
||||
email = Column(String(255), nullable=False, index=True)
|
||||
bounce_type = Column(SQLEnum(BounceType), nullable=False)
|
||||
bounce_reason = Column(String(500), nullable=True)
|
||||
smtp2go_message_id = Column(String(255), nullable=True, index=True)
|
||||
bounce_date = Column(DateTime, nullable=False)
|
||||
is_active = Column(Boolean, default=True, nullable=False)
|
||||
created_at = Column(DateTime, default=datetime.utcnow, nullable=False)
|
||||
updated_at = Column(DateTime, default=datetime.utcnow, onupdate=datetime.utcnow, nullable=False)
|
||||
|
||||
269
backend/app/services/bounce_service.py
Normal file
269
backend/app/services/bounce_service.py
Normal file
@@ -0,0 +1,269 @@
|
||||
from typing import List, Optional, Dict, Any
|
||||
from datetime import datetime
|
||||
from sqlalchemy.orm import Session
|
||||
from ..models.models import EmailBounce, BounceType
|
||||
from ..core.database import get_db
|
||||
|
||||
|
||||
class BounceService:
|
||||
"""Service for managing email bounce tracking and prevention"""
|
||||
|
||||
def __init__(self):
|
||||
pass
|
||||
|
||||
def record_bounce(
|
||||
self,
|
||||
email: str,
|
||||
bounce_type: BounceType,
|
||||
bounce_reason: Optional[str] = None,
|
||||
smtp2go_message_id: Optional[str] = None,
|
||||
bounce_date: Optional[datetime] = None,
|
||||
db: Session = None
|
||||
) -> EmailBounce:
|
||||
"""
|
||||
Record an email bounce in the database
|
||||
|
||||
Args:
|
||||
email: The email address that bounced
|
||||
bounce_type: Type of bounce (hard, soft, complaint, unsubscribe)
|
||||
bounce_reason: Reason for the bounce (optional)
|
||||
smtp2go_message_id: SMTP2GO message ID (optional)
|
||||
bounce_date: When the bounce occurred (defaults to now)
|
||||
db: Database session
|
||||
|
||||
Returns:
|
||||
EmailBounce: The created bounce record
|
||||
"""
|
||||
if db is None:
|
||||
db = next(get_db())
|
||||
|
||||
if bounce_date is None:
|
||||
bounce_date = datetime.utcnow()
|
||||
|
||||
# Check if bounce already exists for this email and type
|
||||
existing_bounce = db.query(EmailBounce).filter(
|
||||
EmailBounce.email == email,
|
||||
EmailBounce.bounce_type == bounce_type,
|
||||
EmailBounce.is_active == True
|
||||
).first()
|
||||
|
||||
if existing_bounce:
|
||||
# Update existing bounce with new information
|
||||
if bounce_reason:
|
||||
existing_bounce.bounce_reason = bounce_reason
|
||||
if smtp2go_message_id:
|
||||
existing_bounce.smtp2go_message_id = smtp2go_message_id
|
||||
existing_bounce.bounce_date = bounce_date
|
||||
existing_bounce.updated_at = datetime.utcnow()
|
||||
db.commit()
|
||||
db.refresh(existing_bounce)
|
||||
return existing_bounce
|
||||
|
||||
# Create new bounce record
|
||||
bounce = EmailBounce(
|
||||
email=email,
|
||||
bounce_type=bounce_type,
|
||||
bounce_reason=bounce_reason,
|
||||
smtp2go_message_id=smtp2go_message_id,
|
||||
bounce_date=bounce_date,
|
||||
is_active=True
|
||||
)
|
||||
|
||||
db.add(bounce)
|
||||
db.commit()
|
||||
db.refresh(bounce)
|
||||
return bounce
|
||||
|
||||
def is_email_bounced(self, email: str, db: Session = None) -> bool:
|
||||
"""
|
||||
Check if an email address has any active bounces
|
||||
|
||||
Args:
|
||||
email: Email address to check
|
||||
db: Database session
|
||||
|
||||
Returns:
|
||||
bool: True if email has active bounces
|
||||
"""
|
||||
if db is None:
|
||||
db = next(get_db())
|
||||
|
||||
bounce = db.query(EmailBounce).filter(
|
||||
EmailBounce.email == email,
|
||||
EmailBounce.is_active == True
|
||||
).first()
|
||||
|
||||
return bounce is not None
|
||||
|
||||
def get_bounce_history(self, email: str, db: Session = None) -> List[EmailBounce]:
|
||||
"""
|
||||
Get bounce history for an email address
|
||||
|
||||
Args:
|
||||
email: Email address to check
|
||||
db: Database session
|
||||
|
||||
Returns:
|
||||
List[EmailBounce]: List of bounce records
|
||||
"""
|
||||
if db is None:
|
||||
db = next(get_db())
|
||||
|
||||
return db.query(EmailBounce).filter(
|
||||
EmailBounce.email == email
|
||||
).order_by(EmailBounce.bounce_date.desc()).all()
|
||||
|
||||
def deactivate_bounce(self, bounce_id: int, db: Session = None) -> bool:
|
||||
"""
|
||||
Deactivate a bounce record (mark as resolved)
|
||||
|
||||
Args:
|
||||
bounce_id: ID of the bounce record
|
||||
db: Database session
|
||||
|
||||
Returns:
|
||||
bool: True if successfully deactivated
|
||||
"""
|
||||
if db is None:
|
||||
db = next(get_db())
|
||||
|
||||
bounce = db.query(EmailBounce).filter(EmailBounce.id == bounce_id).first()
|
||||
if bounce:
|
||||
bounce.is_active = False
|
||||
bounce.updated_at = datetime.utcnow()
|
||||
db.commit()
|
||||
return True
|
||||
return False
|
||||
|
||||
def process_smtp2go_webhook(self, webhook_data: Dict[str, Any], db: Session = None) -> List[EmailBounce]:
|
||||
"""
|
||||
Process webhook data from SMTP2GO bounce notifications
|
||||
|
||||
Args:
|
||||
webhook_data: Webhook payload from SMTP2GO
|
||||
db: Database session
|
||||
|
||||
Returns:
|
||||
List[EmailBounce]: List of created/updated bounce records
|
||||
"""
|
||||
if db is None:
|
||||
db = next(get_db())
|
||||
|
||||
bounces_created = []
|
||||
|
||||
# SMTP2GO webhook structure may vary, but typically includes:
|
||||
# - email: recipient email
|
||||
# - event: 'bounced', 'complained', etc.
|
||||
# - reason: bounce reason
|
||||
# - message_id: SMTP2GO message ID
|
||||
# - timestamp: when it occurred
|
||||
|
||||
events = webhook_data.get('events', [])
|
||||
if not isinstance(events, list):
|
||||
events = [webhook_data] # Single event format
|
||||
|
||||
for event in events:
|
||||
email = event.get('email') or event.get('recipient')
|
||||
event_type = event.get('event', '').lower()
|
||||
reason = event.get('reason') or event.get('bounce_reason')
|
||||
message_id = event.get('message_id') or event.get('smtp2go_message_id')
|
||||
timestamp = event.get('timestamp')
|
||||
|
||||
if not email:
|
||||
continue
|
||||
|
||||
# Map SMTP2GO event types to our bounce types
|
||||
bounce_type = None
|
||||
if event_type in ['bounced', 'hard_bounce', 'permanent_bounce']:
|
||||
bounce_type = BounceType.HARD
|
||||
elif event_type in ['soft_bounce', 'transient_bounce']:
|
||||
bounce_type = BounceType.SOFT
|
||||
elif event_type in ['complained', 'spam_complaint']:
|
||||
bounce_type = BounceType.COMPLAINT
|
||||
elif event_type in ['unsubscribed', 'unsubscribe']:
|
||||
bounce_type = BounceType.UNSUBSCRIBE
|
||||
|
||||
if bounce_type:
|
||||
bounce_date = None
|
||||
if timestamp:
|
||||
try:
|
||||
# SMTP2GO timestamps are typically Unix timestamps
|
||||
if isinstance(timestamp, (int, float)):
|
||||
bounce_date = datetime.fromtimestamp(timestamp)
|
||||
elif isinstance(timestamp, str):
|
||||
bounce_date = datetime.fromisoformat(timestamp.replace('Z', '+00:00'))
|
||||
except (ValueError, TypeError):
|
||||
pass
|
||||
|
||||
bounce = self.record_bounce(
|
||||
email=email,
|
||||
bounce_type=bounce_type,
|
||||
bounce_reason=reason,
|
||||
smtp2go_message_id=message_id,
|
||||
bounce_date=bounce_date,
|
||||
db=db
|
||||
)
|
||||
bounces_created.append(bounce)
|
||||
|
||||
return bounces_created
|
||||
|
||||
def get_bounce_statistics(self, db: Session = None) -> Dict[str, Any]:
|
||||
"""
|
||||
Get bounce statistics for reporting
|
||||
|
||||
Args:
|
||||
db: Database session
|
||||
|
||||
Returns:
|
||||
Dict[str, Any]: Bounce statistics
|
||||
"""
|
||||
if db is None:
|
||||
db = next(get_db())
|
||||
|
||||
total_bounces = db.query(EmailBounce).count()
|
||||
active_bounces = db.query(EmailBounce).filter(EmailBounce.is_active == True).count()
|
||||
|
||||
bounce_type_counts = {}
|
||||
for bounce_type in BounceType:
|
||||
count = db.query(EmailBounce).filter(
|
||||
EmailBounce.bounce_type == bounce_type,
|
||||
EmailBounce.is_active == True
|
||||
).count()
|
||||
bounce_type_counts[bounce_type.value] = count
|
||||
|
||||
return {
|
||||
'total_bounces': total_bounces,
|
||||
'active_bounces': active_bounces,
|
||||
'bounce_types': bounce_type_counts
|
||||
}
|
||||
|
||||
def cleanup_old_bounces(self, days_old: int = 365, db: Session = None) -> int:
|
||||
"""
|
||||
Deactivate bounce records older than specified days (for soft bounces that may be resolved)
|
||||
|
||||
Args:
|
||||
days_old: Number of days after which to deactivate bounces
|
||||
db: Database session
|
||||
|
||||
Returns:
|
||||
int: Number of bounces deactivated
|
||||
"""
|
||||
if db is None:
|
||||
db = next(get_db())
|
||||
|
||||
from datetime import timedelta
|
||||
cutoff_date = datetime.utcnow() - timedelta(days=days_old)
|
||||
|
||||
# Only deactivate soft bounces, keep hard bounces and complaints active
|
||||
result = db.query(EmailBounce).filter(
|
||||
EmailBounce.bounce_type == BounceType.SOFT,
|
||||
EmailBounce.is_active == True,
|
||||
EmailBounce.bounce_date < cutoff_date
|
||||
).update({'is_active': False, 'updated_at': datetime.utcnow()})
|
||||
|
||||
db.commit()
|
||||
return result
|
||||
|
||||
|
||||
# Create a singleton instance
|
||||
bounce_service = BounceService()
|
||||
@@ -5,6 +5,7 @@ from ..core.database import get_db
|
||||
from ..models.models import EmailTemplate
|
||||
from sqlalchemy.orm import Session
|
||||
from ..core.config import settings
|
||||
from .bounce_service import bounce_service
|
||||
|
||||
|
||||
class EmailService:
|
||||
@@ -21,7 +22,8 @@ class EmailService:
|
||||
to_email: str,
|
||||
subject: str,
|
||||
html_body: str,
|
||||
text_body: Optional[str] = None
|
||||
text_body: Optional[str] = None,
|
||||
db: Optional[Session] = None
|
||||
) -> dict:
|
||||
"""
|
||||
Send an email using SMTP2GO API
|
||||
@@ -31,10 +33,18 @@ class EmailService:
|
||||
subject: Email subject
|
||||
html_body: HTML content of the email
|
||||
text_body: Plain text content (optional)
|
||||
db: Database session for bounce checking
|
||||
|
||||
Returns:
|
||||
dict: API response
|
||||
|
||||
Raises:
|
||||
ValueError: If email is bounced or invalid
|
||||
"""
|
||||
# Check if email is bounced before sending
|
||||
if db and bounce_service.is_email_bounced(to_email, db):
|
||||
raise ValueError(f"Email {to_email} is in bounce list and cannot receive emails")
|
||||
|
||||
payload = {
|
||||
"to": [to_email],
|
||||
"sender": f"{self.from_name} <{self.from_email}>",
|
||||
@@ -89,7 +99,7 @@ class EmailService:
|
||||
if template.text_body:
|
||||
text_body = self.render_template(template.text_body, variables)
|
||||
|
||||
return await self.send_email(to_email, subject, html_body, text_body)
|
||||
return await self.send_email(to_email, subject, html_body, text_body, db)
|
||||
|
||||
async def send_welcome_email(self, to_email: str, first_name: str, db: Session) -> dict:
|
||||
"""Send welcome email to new user"""
|
||||
|
||||
@@ -1,5 +1,19 @@
|
||||
-- Initialize database with default membership tiers
|
||||
|
||||
-- Create email bounces table
|
||||
CREATE TABLE email_bounces (
|
||||
id INT AUTO_INCREMENT PRIMARY KEY,
|
||||
email VARCHAR(255) NOT NULL,
|
||||
bounce_type ENUM('hard', 'soft') NOT NULL,
|
||||
bounce_reason VARCHAR(500),
|
||||
smtp2go_message_id VARCHAR(255),
|
||||
bounced_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
|
||||
resolved_at TIMESTAMP NULL,
|
||||
is_active BOOLEAN DEFAULT TRUE,
|
||||
INDEX idx_email (email),
|
||||
INDEX idx_active (is_active)
|
||||
);
|
||||
|
||||
-- Create default membership tiers
|
||||
INSERT INTO membership_tiers (name, description, annual_fee, benefits, is_active, created_at, updated_at)
|
||||
VALUES
|
||||
|
||||
@@ -9,7 +9,10 @@
|
||||
"axios": "^1.6.2",
|
||||
"@types/react": "^18.2.42",
|
||||
"@types/react-dom": "^18.2.17",
|
||||
"typescript": "^5.3.2"
|
||||
"typescript": "^5.3.2",
|
||||
"tailwindcss": "^3.4.0",
|
||||
"autoprefixer": "^10.4.16",
|
||||
"postcss": "^8.4.32"
|
||||
},
|
||||
"scripts": {
|
||||
"dev": "vite --host 0.0.0.0",
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
export default {
|
||||
module.exports = {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
|
||||
@@ -7,6 +7,7 @@ import ResetPassword from './pages/ResetPassword';
|
||||
import Dashboard from './pages/Dashboard';
|
||||
import EmailTemplates from './pages/EmailTemplates';
|
||||
import MembershipTiers from './pages/MembershipTiers';
|
||||
import BounceManagement from './pages/BounceManagement';
|
||||
import './App.css';
|
||||
|
||||
const App: React.FC = () => {
|
||||
@@ -21,6 +22,7 @@ const App: React.FC = () => {
|
||||
<Route path="/dashboard" element={<Dashboard />} />
|
||||
<Route path="/email-templates" element={<EmailTemplates />} />
|
||||
<Route path="/membership-tiers" element={<MembershipTiers />} />
|
||||
<Route path="/bounce-management" element={<BounceManagement />} />
|
||||
</Routes>
|
||||
</BrowserRouter>
|
||||
);
|
||||
|
||||
349
frontend/src/components/BounceManagement.tsx
Normal file
349
frontend/src/components/BounceManagement.tsx
Normal file
@@ -0,0 +1,349 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import axios from 'axios';
|
||||
|
||||
interface BounceRecord {
|
||||
id: number;
|
||||
email: string;
|
||||
bounce_type: 'hard' | 'soft' | 'complaint' | 'unsubscribe';
|
||||
bounce_reason: string | null;
|
||||
bounce_date: string;
|
||||
is_active: boolean;
|
||||
smtp2go_message_id: string | null;
|
||||
}
|
||||
|
||||
interface BounceStats {
|
||||
total_bounces: number;
|
||||
active_bounces: number;
|
||||
bounce_types: {
|
||||
hard: number;
|
||||
soft: number;
|
||||
complaint: number;
|
||||
unsubscribe: number;
|
||||
};
|
||||
}
|
||||
|
||||
const BounceManagement: React.FC = () => {
|
||||
const [bounces, setBounces] = useState<BounceRecord[]>([]);
|
||||
const [stats, setStats] = useState<BounceStats | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [searchEmail, setSearchEmail] = useState('');
|
||||
const [filteredBounces, setFilteredBounces] = useState<BounceRecord[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchBounces();
|
||||
fetchStats();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (searchEmail.trim() === '') {
|
||||
setFilteredBounces(bounces);
|
||||
} else {
|
||||
setFilteredBounces(
|
||||
bounces.filter(bounce =>
|
||||
bounce.email.toLowerCase().includes(searchEmail.toLowerCase())
|
||||
)
|
||||
);
|
||||
}
|
||||
}, [bounces, searchEmail]);
|
||||
|
||||
const fetchBounces = async () => {
|
||||
try {
|
||||
const token = localStorage.getItem('token');
|
||||
const response = await axios.get('/api/v1/email/bounces', {
|
||||
headers: { Authorization: `Bearer ${token}` }
|
||||
});
|
||||
setBounces(response.data.bounces);
|
||||
} catch (error) {
|
||||
console.error('Error fetching bounces:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const fetchStats = async () => {
|
||||
try {
|
||||
const token = localStorage.getItem('token');
|
||||
const response = await axios.get('/api/v1/email/bounces/stats', {
|
||||
headers: { Authorization: `Bearer ${token}` }
|
||||
});
|
||||
setStats(response.data);
|
||||
} catch (error) {
|
||||
console.error('Error fetching bounce stats:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeactivateBounce = async (bounceId: number) => {
|
||||
if (!window.confirm('Are you sure you want to deactivate this bounce record?')) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const token = localStorage.getItem('token');
|
||||
await axios.delete(`/api/v1/email/bounces/${bounceId}`, {
|
||||
headers: { Authorization: `Bearer ${token}` }
|
||||
});
|
||||
fetchBounces(); // Refresh the list
|
||||
fetchStats(); // Refresh stats
|
||||
} catch (error) {
|
||||
console.error('Error deactivating bounce:', error);
|
||||
alert('Failed to deactivate bounce record');
|
||||
}
|
||||
};
|
||||
|
||||
const handleCleanupOldBounces = async () => {
|
||||
if (!window.confirm('Are you sure you want to cleanup old soft bounces? This will deactivate soft bounces older than 365 days.')) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const token = localStorage.getItem('token');
|
||||
const response = await axios.post('/api/v1/email/bounces/cleanup', {}, {
|
||||
headers: { Authorization: `Bearer ${token}` }
|
||||
});
|
||||
alert(response.data.message);
|
||||
fetchBounces(); // Refresh the list
|
||||
fetchStats(); // Refresh stats
|
||||
} catch (error) {
|
||||
console.error('Error cleaning up bounces:', error);
|
||||
alert('Failed to cleanup old bounces');
|
||||
}
|
||||
};
|
||||
|
||||
const getBounceTypeColor = (type: string) => {
|
||||
switch (type) {
|
||||
case 'hard': return '#dc3545';
|
||||
case 'soft': return '#ffc107';
|
||||
case 'complaint': return '#fd7e14';
|
||||
case 'unsubscribe': return '#6c757d';
|
||||
default: return '#6c757d';
|
||||
}
|
||||
};
|
||||
|
||||
const formatDate = (dateString: string) => {
|
||||
return new Date(dateString).toLocaleString();
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div style={{ textAlign: 'center', padding: '40px' }}>
|
||||
<div>Loading bounce data...</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
{/* Statistics Cards */}
|
||||
{stats && (
|
||||
<div style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
|
||||
gap: '20px',
|
||||
marginBottom: '30px'
|
||||
}}>
|
||||
<div style={{
|
||||
backgroundColor: '#f8f9fa',
|
||||
padding: '20px',
|
||||
borderRadius: '8px',
|
||||
border: '1px solid #dee2e6'
|
||||
}}>
|
||||
<h3 style={{ margin: '0 0 10px 0', color: '#495057' }}>Total Bounces</h3>
|
||||
<div style={{ fontSize: '2rem', fontWeight: 'bold', color: '#dc3545' }}>
|
||||
{stats.total_bounces}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{
|
||||
backgroundColor: '#f8f9fa',
|
||||
padding: '20px',
|
||||
borderRadius: '8px',
|
||||
border: '1px solid #dee2e6'
|
||||
}}>
|
||||
<h3 style={{ margin: '0 0 10px 0', color: '#495057' }}>Active Bounces</h3>
|
||||
<div style={{ fontSize: '2rem', fontWeight: 'bold', color: '#ffc107' }}>
|
||||
{stats.active_bounces}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{
|
||||
backgroundColor: '#f8f9fa',
|
||||
padding: '20px',
|
||||
borderRadius: '8px',
|
||||
border: '1px solid #dee2e6'
|
||||
}}>
|
||||
<h3 style={{ margin: '0 0 10px 0', color: '#495057' }}>Hard Bounces</h3>
|
||||
<div style={{ fontSize: '2rem', fontWeight: 'bold', color: '#dc3545' }}>
|
||||
{stats.bounce_types.hard}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{
|
||||
backgroundColor: '#f8f9fa',
|
||||
padding: '20px',
|
||||
borderRadius: '8px',
|
||||
border: '1px solid #dee2e6'
|
||||
}}>
|
||||
<h3 style={{ margin: '0 0 10px 0', color: '#495057' }}>Soft Bounces</h3>
|
||||
<div style={{ fontSize: '2rem', fontWeight: 'bold', color: '#ffc107' }}>
|
||||
{stats.bounce_types.soft}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Controls */}
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
marginBottom: '20px',
|
||||
gap: '20px'
|
||||
}}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
|
||||
<label htmlFor="search" style={{ fontWeight: 'bold' }}>Search by Email:</label>
|
||||
<input
|
||||
id="search"
|
||||
type="text"
|
||||
value={searchEmail}
|
||||
onChange={(e) => setSearchEmail(e.target.value)}
|
||||
placeholder="Enter email address..."
|
||||
style={{
|
||||
padding: '8px 12px',
|
||||
border: '1px solid #ced4da',
|
||||
borderRadius: '4px',
|
||||
minWidth: '250px'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={handleCleanupOldBounces}
|
||||
style={{
|
||||
padding: '8px 16px',
|
||||
backgroundColor: '#6c757d',
|
||||
color: 'white',
|
||||
border: 'none',
|
||||
borderRadius: '4px',
|
||||
cursor: 'pointer'
|
||||
}}
|
||||
>
|
||||
Cleanup Old Bounces
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Bounce Records Table */}
|
||||
<div style={{
|
||||
backgroundColor: 'white',
|
||||
borderRadius: '8px',
|
||||
boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
|
||||
overflow: 'hidden'
|
||||
}}>
|
||||
<div style={{
|
||||
padding: '20px',
|
||||
borderBottom: '1px solid #dee2e6',
|
||||
backgroundColor: '#f8f9fa'
|
||||
}}>
|
||||
<h2 style={{ margin: 0, color: '#495057' }}>Bounce Records</h2>
|
||||
</div>
|
||||
|
||||
<div style={{ overflowX: 'auto' }}>
|
||||
<table style={{
|
||||
width: '100%',
|
||||
borderCollapse: 'collapse'
|
||||
}}>
|
||||
<thead>
|
||||
<tr style={{ backgroundColor: '#f8f9fa' }}>
|
||||
<th style={{ padding: '12px', textAlign: 'left', borderBottom: '1px solid #dee2e6', fontWeight: 'bold' }}>Email</th>
|
||||
<th style={{ padding: '12px', textAlign: 'left', borderBottom: '1px solid #dee2e6', fontWeight: 'bold' }}>Type</th>
|
||||
<th style={{ padding: '12px', textAlign: 'left', borderBottom: '1px solid #dee2e6', fontWeight: 'bold' }}>Reason</th>
|
||||
<th style={{ padding: '12px', textAlign: 'left', borderBottom: '1px solid #dee2e6', fontWeight: 'bold' }}>Date</th>
|
||||
<th style={{ padding: '12px', textAlign: 'left', borderBottom: '1px solid #dee2e6', fontWeight: 'bold' }}>Status</th>
|
||||
<th style={{ padding: '12px', textAlign: 'left', borderBottom: '1px solid #dee2e6', fontWeight: 'bold' }}>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{filteredBounces.length === 0 ? (
|
||||
<tr>
|
||||
<td colSpan={6} style={{
|
||||
padding: '40px',
|
||||
textAlign: 'center',
|
||||
color: '#6c757d',
|
||||
fontStyle: 'italic'
|
||||
}}>
|
||||
{searchEmail ? 'No bounces found matching your search.' : 'No bounce records found.'}
|
||||
</td>
|
||||
</tr>
|
||||
) : (
|
||||
filteredBounces.map((bounce) => (
|
||||
<tr key={bounce.id} style={{ borderBottom: '1px solid #f1f3f4' }}>
|
||||
<td style={{ padding: '12px' }}>
|
||||
<div style={{ fontWeight: '500' }}>{bounce.email}</div>
|
||||
{bounce.smtp2go_message_id && (
|
||||
<div style={{ fontSize: '0.8rem', color: '#6c757d' }}>
|
||||
ID: {bounce.smtp2go_message_id}
|
||||
</div>
|
||||
)}
|
||||
</td>
|
||||
<td style={{ padding: '12px' }}>
|
||||
<span style={{
|
||||
backgroundColor: getBounceTypeColor(bounce.bounce_type),
|
||||
color: 'white',
|
||||
padding: '4px 8px',
|
||||
borderRadius: '4px',
|
||||
fontSize: '0.8rem',
|
||||
fontWeight: 'bold',
|
||||
textTransform: 'uppercase'
|
||||
}}>
|
||||
{bounce.bounce_type}
|
||||
</span>
|
||||
</td>
|
||||
<td style={{ padding: '12px', maxWidth: '300px' }}>
|
||||
<div style={{
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
whiteSpace: 'nowrap'
|
||||
}}>
|
||||
{bounce.bounce_reason || 'No reason provided'}
|
||||
</div>
|
||||
</td>
|
||||
<td style={{ padding: '12px' }}>
|
||||
{formatDate(bounce.bounce_date)}
|
||||
</td>
|
||||
<td style={{ padding: '12px' }}>
|
||||
<span style={{
|
||||
color: bounce.is_active ? '#dc3545' : '#28a745',
|
||||
fontWeight: 'bold'
|
||||
}}>
|
||||
{bounce.is_active ? 'Active' : 'Resolved'}
|
||||
</span>
|
||||
</td>
|
||||
<td style={{ padding: '12px' }}>
|
||||
{bounce.is_active && (
|
||||
<button
|
||||
onClick={() => handleDeactivateBounce(bounce.id)}
|
||||
style={{
|
||||
padding: '6px 12px',
|
||||
backgroundColor: '#28a745',
|
||||
color: 'white',
|
||||
border: 'none',
|
||||
borderRadius: '4px',
|
||||
cursor: 'pointer',
|
||||
fontSize: '0.8rem'
|
||||
}}
|
||||
>
|
||||
Resolve
|
||||
</button>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default BounceManagement;
|
||||
222
frontend/src/components/ProfileEdit.tsx
Normal file
222
frontend/src/components/ProfileEdit.tsx
Normal file
@@ -0,0 +1,222 @@
|
||||
import React, { useState } from 'react';
|
||||
import { userService, User } from '../services/membershipService';
|
||||
|
||||
interface ProfileEditProps {
|
||||
user: User;
|
||||
onSave: (updatedUser: User) => void;
|
||||
onCancel: () => void;
|
||||
}
|
||||
|
||||
const ProfileEdit: React.FC<ProfileEditProps> = ({ user, onSave, onCancel }) => {
|
||||
const [formData, setFormData] = useState({
|
||||
email: user.email,
|
||||
first_name: user.first_name,
|
||||
last_name: user.last_name,
|
||||
phone: user.phone || '',
|
||||
address: user.address || ''
|
||||
});
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState('');
|
||||
|
||||
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
|
||||
setFormData({
|
||||
...formData,
|
||||
[e.target.name]: e.target.value
|
||||
});
|
||||
};
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setError('');
|
||||
setLoading(true);
|
||||
|
||||
try {
|
||||
const updatedUser = await userService.updateProfile({
|
||||
email: formData.email,
|
||||
first_name: formData.first_name,
|
||||
last_name: formData.last_name,
|
||||
phone: formData.phone || null,
|
||||
address: formData.address || null
|
||||
});
|
||||
onSave(updatedUser);
|
||||
} catch (err: any) {
|
||||
setError(err.response?.data?.detail || 'Failed to update profile');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{
|
||||
position: 'fixed',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.5)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
zIndex: 1000
|
||||
}}>
|
||||
<div style={{
|
||||
backgroundColor: 'white',
|
||||
padding: '24px',
|
||||
borderRadius: '8px',
|
||||
width: '100%',
|
||||
maxWidth: '500px',
|
||||
maxHeight: '90vh',
|
||||
overflow: 'auto'
|
||||
}}>
|
||||
<h3 style={{ marginTop: 0, marginBottom: '20px', color: '#333' }}>Edit Profile</h3>
|
||||
|
||||
{error && (
|
||||
<div style={{
|
||||
padding: '12px',
|
||||
backgroundColor: '#f8d7da',
|
||||
color: '#721c24',
|
||||
borderRadius: '4px',
|
||||
marginBottom: '16px'
|
||||
}}>
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div style={{ marginBottom: '16px' }}>
|
||||
<label style={{ display: 'block', marginBottom: '6px', fontWeight: 'bold', color: '#333' }}>
|
||||
First Name
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="first_name"
|
||||
value={formData.first_name}
|
||||
onChange={handleChange}
|
||||
style={{
|
||||
width: '100%',
|
||||
padding: '10px',
|
||||
border: '1px solid #ddd',
|
||||
borderRadius: '4px',
|
||||
fontSize: '14px'
|
||||
}}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div style={{ marginBottom: '16px' }}>
|
||||
<label style={{ display: 'block', marginBottom: '6px', fontWeight: 'bold', color: '#333' }}>
|
||||
Last Name
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="last_name"
|
||||
value={formData.last_name}
|
||||
onChange={handleChange}
|
||||
style={{
|
||||
width: '100%',
|
||||
padding: '10px',
|
||||
border: '1px solid #ddd',
|
||||
borderRadius: '4px',
|
||||
fontSize: '14px'
|
||||
}}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div style={{ marginBottom: '16px' }}>
|
||||
<label style={{ display: 'block', marginBottom: '6px', fontWeight: 'bold', color: '#333' }}>
|
||||
Email Address
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
name="email"
|
||||
value={formData.email}
|
||||
onChange={handleChange}
|
||||
style={{
|
||||
width: '100%',
|
||||
padding: '10px',
|
||||
border: '1px solid #ddd',
|
||||
borderRadius: '4px',
|
||||
fontSize: '14px'
|
||||
}}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div style={{ marginBottom: '16px' }}>
|
||||
<label style={{ display: 'block', marginBottom: '6px', fontWeight: 'bold', color: '#333' }}>
|
||||
Phone Number
|
||||
</label>
|
||||
<input
|
||||
type="tel"
|
||||
name="phone"
|
||||
value={formData.phone}
|
||||
onChange={handleChange}
|
||||
style={{
|
||||
width: '100%',
|
||||
padding: '10px',
|
||||
border: '1px solid #ddd',
|
||||
borderRadius: '4px',
|
||||
fontSize: '14px'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div style={{ marginBottom: '20px' }}>
|
||||
<label style={{ display: 'block', marginBottom: '6px', fontWeight: 'bold', color: '#333' }}>
|
||||
Physical Address
|
||||
</label>
|
||||
<textarea
|
||||
name="address"
|
||||
value={formData.address}
|
||||
onChange={handleChange}
|
||||
rows={3}
|
||||
style={{
|
||||
width: '100%',
|
||||
padding: '10px',
|
||||
border: '1px solid #ddd',
|
||||
borderRadius: '4px',
|
||||
fontSize: '14px',
|
||||
resize: 'vertical'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'flex', justifyContent: 'flex-end', gap: '10px' }}>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onCancel}
|
||||
disabled={loading}
|
||||
style={{
|
||||
padding: '10px 20px',
|
||||
backgroundColor: '#6c757d',
|
||||
color: 'white',
|
||||
border: 'none',
|
||||
borderRadius: '4px',
|
||||
cursor: 'pointer'
|
||||
}}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
style={{
|
||||
padding: '10px 20px',
|
||||
backgroundColor: '#28a745',
|
||||
color: 'white',
|
||||
border: 'none',
|
||||
borderRadius: '4px',
|
||||
cursor: 'pointer'
|
||||
}}
|
||||
>
|
||||
{loading ? 'Saving...' : 'Save Changes'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProfileEdit;
|
||||
@@ -102,6 +102,15 @@ const ProfileMenu: React.FC<ProfileMenuProps> = ({ userName, userRole }) => {
|
||||
>
|
||||
Email Templates
|
||||
</button>
|
||||
<button
|
||||
style={{ ...menuItemStyle, borderTop: '1px solid #eee', borderRadius: '0' }}
|
||||
onClick={() => {
|
||||
navigate('/bounce-management');
|
||||
setIsOpen(false);
|
||||
}}
|
||||
>
|
||||
Bounce Management
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
<button
|
||||
|
||||
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