More iteration

frontend/src/pages/Dashboard.tsx

@@ -2,6 +2,7 @@ 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';
+import ProfileMenu from '../components/ProfileMenu';
 
 const Dashboard: React.FC = () => {
   const navigate = useNavigate();
@@ -53,11 +54,6 @@ const Dashboard: React.FC = () => {
     }
   };
 
-  const handleLogout = () => {
-    authService.logout();
-    navigate('/login');
-  };
-
   const handleMembershipSetup = () => {
     setShowMembershipSetup(true);
   };
@@ -94,6 +90,17 @@ const Dashboard: React.FC = () => {
     }
   };
 
+  const handleUpdateUserRole = async (userId: number, newRole: string) => {
+    try {
+      await userService.updateUserRole(userId, newRole);
+      // Reload data to reflect changes
+      await loadData();
+    } catch (error) {
+      console.error('Failed to update user role:', error);
+      alert('Failed to update user role. Please try again.');
+    }
+  };
+
   const getStatusClass = (status: string) => {
     switch (status.toLowerCase()) {
       case 'active':
@@ -125,7 +132,7 @@ const Dashboard: React.FC = () => {
       <>
         <nav className="navbar">
           <h1>SASA Membership Portal</h1>
-          <button onClick={handleLogout}>Log Out</button>
+          <ProfileMenu userName={`${user?.first_name} ${user?.last_name}`} />
         </nav>
         <div className="container">
           <MembershipSetup
@@ -143,7 +150,7 @@ const Dashboard: React.FC = () => {
     <>
       <nav className="navbar">
         <h1>SASA Membership Portal</h1>
-        <button onClick={handleLogout}>Log Out</button>
+        <ProfileMenu userName={`${user?.first_name} ${user?.last_name}`} />
       </nav>
 
       <div className="container">
@@ -157,7 +164,7 @@ const Dashboard: React.FC = () => {
             <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>
+            <p><strong>Registered since:</strong> {user && formatDate(user.created_at)}</p>
           </div>
 
           {/* Membership Card */}
@@ -167,7 +174,7 @@ const Dashboard: React.FC = () => {
               <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>Member since:</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' }}>
@@ -308,6 +315,76 @@ const Dashboard: React.FC = () => {
             )}
           </div>
         )}
+
+        {/* User Management Section */}
+        {(user?.role === 'admin' || user?.role === 'super_admin') && (
+          <div className="card" style={{ marginTop: '20px' }}>
+            <h3 style={{ marginBottom: '16px' }}>User Management</h3>
+            
+            <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' }}>Role</th>
+                  <th style={{ padding: '12px', textAlign: 'left' }}>Status</th>
+                  <th style={{ padding: '12px', textAlign: 'left' }}>Joined</th>
+                  <th style={{ padding: '12px', textAlign: 'left' }}>Actions</th>
+                </tr>
+              </thead>
+              <tbody>
+                {allUsers.map(u => (
+                  <tr key={u.id} style={{ borderBottom: '1px solid #eee' }}>
+                    <td style={{ padding: '12px' }}>{u.first_name} {u.last_name}</td>
+                    <td style={{ padding: '12px' }}>{u.email}</td>
+                    <td style={{ padding: '12px' }}>
+                      <span style={{
+                        backgroundColor: u.role === 'super_admin' ? '#dc3545' : 
+                                       u.role === 'admin' ? '#ffc107' : '#28a745',
+                        color: u.role === 'member' ? 'white' : 'black',
+                        padding: '4px 8px',
+                        borderRadius: '4px',
+                        fontSize: '12px',
+                        fontWeight: 'bold'
+                      }}>
+                        {u.role.toUpperCase()}
+                      </span>
+                    </td>
+                    <td style={{ padding: '12px' }}>
+                      <span className={`status-badge ${u.is_active ? 'status-active' : 'status-expired'}`}>
+                        {u.is_active ? 'ACTIVE' : 'INACTIVE'}
+                      </span>
+                    </td>
+                    <td style={{ padding: '12px' }}>{formatDate(u.created_at)}</td>
+                    <td style={{ padding: '12px' }}>
+                      {u.role === 'member' && (
+                        <button
+                          className="btn btn-primary"
+                          onClick={() => handleUpdateUserRole(u.id, 'admin')}
+                          style={{ fontSize: '12px', padding: '4px 8px', marginRight: '4px' }}
+                        >
+                          Make Admin
+                        </button>
+                      )}
+                      {u.role === 'admin' && u.id !== user?.id && (
+                        <button
+                          className="btn btn-secondary"
+                          onClick={() => handleUpdateUserRole(u.id, 'member')}
+                          style={{ fontSize: '12px', padding: '4px 8px' }}
+                        >
+                          Remove Admin
+                        </button>
+                      )}
+                      {u.role === 'super_admin' && (
+                        <span style={{ fontSize: '12px', color: '#666' }}>Super Admin</span>
+                      )}
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
       </div>
     </>
   );

frontend/src/pages/Login.tsx

@@ -36,7 +36,7 @@ const Login: React.FC = () => {
   return (
     <div className="auth-container">
       <div className="auth-card">
-        <h2>Welcome Back</h2>
+        <h2>SASA Member Portal</h2>
         <p style={{ textAlign: 'center', marginBottom: '24px', color: '#666' }}>
           Log in to your membership account
         </p>
@@ -90,7 +90,7 @@ const Login: React.FC = () => {
             onClick={() => navigate('/register')}
             style={{ width: '100%' }}
           >
-            Join as New User
+            Join SASA
           </button>
         </div>
       </div>