forked from jamesp/sasa-membership
Basic frontend
This commit is contained in:
James Pattinson
@@ -0,0 +1,316 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { authService, userService, membershipService, paymentService, User, Membership, Payment } from '../services/membershipService';
|
||||
import MembershipSetup from '../components/MembershipSetup';
|
||||
|
||||
const Dashboard: React.FC = () => {
|
||||
const navigate = useNavigate();
|
||||
const [user, setUser] = useState<User | null>(null);
|
||||
const [memberships, setMemberships] = useState<Membership[]>([]);
|
||||
const [payments, setPayments] = useState<Payment[]>([]);
|
||||
const [allPayments, setAllPayments] = useState<Payment[]>([]);
|
||||
const [allMemberships, setAllMemberships] = useState<Membership[]>([]);
|
||||
const [allUsers, setAllUsers] = useState<User[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [showMembershipSetup, setShowMembershipSetup] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (!authService.isAuthenticated()) {
|
||||
navigate('/login');
|
||||
return;
|
||||
}
|
||||
|
||||
loadData();
|
||||
}, []);
|
||||
|
||||
const loadData = async () => {
|
||||
try {
|
||||
const [userData, membershipData, paymentData] = await Promise.all([
|
||||
userService.getCurrentUser(),
|
||||
membershipService.getMyMemberships(),
|
||||
paymentService.getMyPayments()
|
||||
]);
|
||||
|
||||
setUser(userData);
|
||||
setMemberships(membershipData);
|
||||
setPayments(paymentData);
|
||||
|
||||
// Load admin data if user is admin
|
||||
if (userData.role === 'admin' || userData.role === 'super_admin') {
|
||||
const [allPaymentsData, allMembershipsData, allUsersData] = await Promise.all([
|
||||
paymentService.getAllPayments(),
|
||||
membershipService.getAllMemberships(),
|
||||
userService.getAllUsers()
|
||||
]);
|
||||
setAllPayments(allPaymentsData);
|
||||
setAllMemberships(allMembershipsData);
|
||||
setAllUsers(allUsersData);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to load data:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleLogout = () => {
|
||||
authService.logout();
|
||||
navigate('/login');
|
||||
};
|
||||
|
||||
const handleMembershipSetup = () => {
|
||||
setShowMembershipSetup(true);
|
||||
};
|
||||
|
||||
const handleMembershipCreated = () => {
|
||||
setShowMembershipSetup(false);
|
||||
loadData(); // Reload data to show the new membership
|
||||
};
|
||||
|
||||
const handleCancelMembershipSetup = () => {
|
||||
setShowMembershipSetup(false);
|
||||
};
|
||||
|
||||
const getUserName = (userId: number): string => {
|
||||
const user = allUsers.find(u => u.id === userId);
|
||||
return user ? `${user.first_name} ${user.last_name}` : `User #${userId}`;
|
||||
};
|
||||
|
||||
const handleApprovePayment = async (paymentId: number, membershipId?: number) => {
|
||||
try {
|
||||
// Approve the payment
|
||||
await paymentService.updatePayment(paymentId, { status: 'completed' });
|
||||
|
||||
// If there's an associated membership, activate it
|
||||
if (membershipId) {
|
||||
await membershipService.updateMembership(membershipId, { status: 'active' });
|
||||
}
|
||||
|
||||
// Reload data
|
||||
await loadData();
|
||||
} catch (error) {
|
||||
console.error('Failed to approve payment:', error);
|
||||
alert('Failed to approve payment. Please try again.');
|
||||
}
|
||||
};
|
||||
|
||||
const getStatusClass = (status: string) => {
|
||||
switch (status.toLowerCase()) {
|
||||
case 'active':
|
||||
return 'status-active';
|
||||
case 'pending':
|
||||
return 'status-pending';
|
||||
case 'expired':
|
||||
case 'cancelled':
|
||||
return 'status-expired';
|
||||
default:
|
||||
return '';
|
||||
}
|
||||
};
|
||||
|
||||
const formatDate = (dateString: string) => {
|
||||
return new Date(dateString).toLocaleDateString('en-GB', {
|
||||
day: 'numeric',
|
||||
month: 'long',
|
||||
year: 'numeric'
|
||||
});
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return <div className="container">Loading...</div>;
|
||||
}
|
||||
|
||||
if (showMembershipSetup) {
|
||||
return (
|
||||
<>
|
||||
<nav className="navbar">
|
||||
<h1>SASA Membership Portal</h1>
|
||||
<button onClick={handleLogout}>Log Out</button>
|
||||
</nav>
|
||||
<div className="container">
|
||||
<MembershipSetup
|
||||
onMembershipCreated={handleMembershipCreated}
|
||||
onCancel={handleCancelMembershipSetup}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
const activeMembership = memberships.find(m => m.status === 'active') || memberships[0];
|
||||
|
||||
return (
|
||||
<>
|
||||
<nav className="navbar">
|
||||
<h1>SASA Membership Portal</h1>
|
||||
<button onClick={handleLogout}>Log Out</button>
|
||||
</nav>
|
||||
|
||||
<div className="container">
|
||||
<h2 style={{ marginTop: '20px', marginBottom: '20px' }}>Welcome, {user?.first_name}!</h2>
|
||||
|
||||
<div className="dashboard-grid">
|
||||
{/* Profile Card */}
|
||||
<div className="card">
|
||||
<h3 style={{ marginBottom: '16px' }}>Your Profile</h3>
|
||||
<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>Member since:</strong> {user && formatDate(user.created_at)}</p>
|
||||
</div>
|
||||
|
||||
{/* Membership Card */}
|
||||
{activeMembership ? (
|
||||
<div className="card">
|
||||
<h3 style={{ marginBottom: '16px' }}>Your Membership</h3>
|
||||
<h4 style={{ color: '#0066cc', marginBottom: '8px' }}>{activeMembership.tier.name}</h4>
|
||||
<p><strong>Status:</strong> <span className={`status-badge ${getStatusClass(activeMembership.status)}`}>{activeMembership.status.toUpperCase()}</span></p>
|
||||
<p><strong>Annual Fee:</strong> £{activeMembership.tier.annual_fee.toFixed(2)}</p>
|
||||
<p><strong>Start Date:</strong> {formatDate(activeMembership.start_date)}</p>
|
||||
<p><strong>Renewal Date:</strong> {formatDate(activeMembership.end_date)}</p>
|
||||
<p><strong>Auto Renew:</strong> {activeMembership.auto_renew ? 'Yes' : 'No'}</p>
|
||||
<div style={{ marginTop: '12px', padding: '12px', backgroundColor: '#f5f5f5', borderRadius: '4px' }}>
|
||||
<strong>Benefits:</strong>
|
||||
<p style={{ marginTop: '4px', fontSize: '14px' }}>{activeMembership.tier.benefits}</p>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="card">
|
||||
<h3 style={{ marginBottom: '16px' }}>Set Up Your Membership</h3>
|
||||
<p>Choose from our membership tiers to get started with SASA benefits.</p>
|
||||
<p style={{ marginTop: '12px', color: '#666' }}>Available tiers include Personal, Aircraft Owners, and Corporate memberships.</p>
|
||||
<button
|
||||
className="btn btn-primary"
|
||||
onClick={handleMembershipSetup}
|
||||
style={{ marginTop: '16px' }}
|
||||
>
|
||||
Set Up Membership
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Payment History */}
|
||||
<div className="card" style={{ marginTop: '20px' }}>
|
||||
<h3 style={{ marginBottom: '16px' }}>Payment History</h3>
|
||||
{payments.length > 0 ? (
|
||||
<table style={{ width: '100%', borderCollapse: 'collapse' }}>
|
||||
<thead>
|
||||
<tr style={{ borderBottom: '2px solid #ddd' }}>
|
||||
<th style={{ padding: '12px', textAlign: 'left' }}>Date</th>
|
||||
<th style={{ padding: '12px', textAlign: 'left' }}>Amount</th>
|
||||
<th style={{ padding: '12px', textAlign: 'left' }}>Method</th>
|
||||
<th style={{ padding: '12px', textAlign: 'left' }}>Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{payments.map(payment => (
|
||||
<tr key={payment.id} style={{ borderBottom: '1px solid #eee' }}>
|
||||
<td style={{ padding: '12px' }}>{payment.payment_date ? formatDate(payment.payment_date) : 'Pending'}</td>
|
||||
<td style={{ padding: '12px' }}>£{payment.amount.toFixed(2)}</td>
|
||||
<td style={{ padding: '12px' }}>{payment.payment_method}</td>
|
||||
<td style={{ padding: '12px' }}>
|
||||
<span className={`status-badge ${getStatusClass(payment.status)}`}>
|
||||
{payment.status.toUpperCase()}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
) : (
|
||||
<p style={{ color: '#666' }}>No payment history available.</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Admin Section */}
|
||||
{(user?.role === 'admin' || user?.role === 'super_admin') && (
|
||||
<div className="card" style={{ marginTop: '20px' }}>
|
||||
<h3 style={{ marginBottom: '16px' }}>Admin Panel - Pending Approvals</h3>
|
||||
|
||||
{/* Pending Payments */}
|
||||
{allPayments.filter(p => p.status === 'pending').length > 0 && (
|
||||
<div style={{ marginBottom: '20px' }}>
|
||||
<h4 style={{ marginBottom: '12px' }}>Pending Payments</h4>
|
||||
<table style={{ width: '100%', borderCollapse: 'collapse' }}>
|
||||
<thead>
|
||||
<tr style={{ borderBottom: '2px solid #ddd' }}>
|
||||
<th style={{ padding: '12px', textAlign: 'left' }}>User</th>
|
||||
<th style={{ padding: '12px', textAlign: 'left' }}>Amount</th>
|
||||
<th style={{ padding: '12px', textAlign: 'left' }}>Method</th>
|
||||
<th style={{ padding: '12px', textAlign: 'left' }}>Membership</th>
|
||||
<th style={{ padding: '12px', textAlign: 'left' }}>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{allPayments.filter(p => p.status === 'pending').map(payment => {
|
||||
const membership = allMemberships.find(m => m.id === payment.membership_id);
|
||||
return (
|
||||
<tr key={payment.id} style={{ borderBottom: '1px solid #eee' }}>
|
||||
<td style={{ padding: '12px' }}>{getUserName(payment.user_id)}</td>
|
||||
<td style={{ padding: '12px' }}>£{payment.amount.toFixed(2)}</td>
|
||||
<td style={{ padding: '12px' }}>{payment.payment_method}</td>
|
||||
<td style={{ padding: '12px' }}>
|
||||
{membership ? `${membership.tier.name} (${membership.status})` : 'N/A'}
|
||||
</td>
|
||||
<td style={{ padding: '12px' }}>
|
||||
<button
|
||||
className="btn btn-primary"
|
||||
onClick={() => handleApprovePayment(payment.id, payment.membership_id || undefined)}
|
||||
style={{ fontSize: '12px', padding: '6px 12px' }}
|
||||
>
|
||||
Approve
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Pending Memberships */}
|
||||
{allMemberships.filter(m => m.status === 'pending').length > 0 && (
|
||||
<div>
|
||||
<h4 style={{ marginBottom: '12px' }}>Pending Memberships</h4>
|
||||
<table style={{ width: '100%', borderCollapse: 'collapse' }}>
|
||||
<thead>
|
||||
<tr style={{ borderBottom: '2px solid #ddd' }}>
|
||||
<th style={{ padding: '12px', textAlign: 'left' }}>User</th>
|
||||
<th style={{ padding: '12px', textAlign: 'left' }}>Tier</th>
|
||||
<th style={{ padding: '12px', textAlign: 'left' }}>Start Date</th>
|
||||
<th style={{ padding: '12px', textAlign: 'left' }}>Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{allMemberships.filter(m => m.status === 'pending').map(membership => (
|
||||
<tr key={membership.id} style={{ borderBottom: '1px solid #eee' }}>
|
||||
<td style={{ padding: '12px' }}>{getUserName(membership.user_id)}</td>
|
||||
<td style={{ padding: '12px' }}>{membership.tier.name}</td>
|
||||
<td style={{ padding: '12px' }}>{formatDate(membership.start_date)}</td>
|
||||
<td style={{ padding: '12px' }}>
|
||||
<span className={`status-badge ${getStatusClass(membership.status)}`}>
|
||||
{membership.status.toUpperCase()}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{allPayments.filter(p => p.status === 'pending').length === 0 &&
|
||||
allMemberships.filter(m => m.status === 'pending').length === 0 && (
|
||||
<p style={{ color: '#666' }}>No pending approvals at this time.</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Dashboard;
|
||||
Reference in New Issue
Block a user