Layout tweaks

frontend/src/components/ProfileMenu.tsx

@@ -1,13 +1,15 @@
 import React, { useState, useRef, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { authService } from '../services/membershipService';
+import { authService, User } from '../services/membershipService';
 
 interface ProfileMenuProps {
   userName: string;
   userRole: string;
+  user?: User | null;
+  onEditProfile?: () => void;
 }
 
-const ProfileMenu: React.FC<ProfileMenuProps> = ({ userName, userRole }) => {
+const ProfileMenu: React.FC<ProfileMenuProps> = ({ userName, userRole, user, onEditProfile }) => {
   const [isOpen, setIsOpen] = useState(false);
   const [showChangePassword, setShowChangePassword] = useState(false);
   const menuRef = useRef<HTMLDivElement>(null);
@@ -36,6 +38,14 @@ const ProfileMenu: React.FC<ProfileMenuProps> = ({ userName, userRole }) => {
     setIsOpen(false);
   };
 
+  const formatDate = (dateString: string) => {
+    return new Date(dateString).toLocaleDateString('en-GB', {
+      day: 'numeric',
+      month: 'long',
+      year: 'numeric'
+    });
+  };
+
   const dropdownStyle: React.CSSProperties = {
     position: 'absolute',
     top: '100%',
@@ -44,7 +54,8 @@ const ProfileMenu: React.FC<ProfileMenuProps> = ({ userName, userRole }) => {
     border: '1px solid #ddd',
     borderRadius: '4px',
     boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
-    minWidth: '160px',
+    minWidth: '280px',
+    maxWidth: '320px',
     zIndex: 1000,
   };
 
@@ -82,10 +93,52 @@ const ProfileMenu: React.FC<ProfileMenuProps> = ({ userName, userRole }) => {
 
         {isOpen && (
           <div style={dropdownStyle}>
+            {/* Profile Details Section */}
+            {user && (
+              <div style={{
+                padding: '16px',
+                borderBottom: '1px solid #eee',
+                backgroundColor: '#f9f9f9',
+                borderRadius: '4px 4px 0 0'
+              }}>
+                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '12px' }}>
+                  <h4 style={{ margin: 0, fontSize: '14px', fontWeight: 'bold', color: '#333' }}>Profile Details</h4>
+                  {onEditProfile && (
+                    <button
+                      onClick={() => {
+                        onEditProfile();
+                        setIsOpen(false);
+                      }}
+                      style={{
+                        background: '#0066cc',
+                        color: 'white',
+                        border: 'none',
+                        padding: '4px 8px',
+                        borderRadius: '3px',
+                        cursor: 'pointer',
+                        fontSize: '11px',
+                        fontWeight: '500'
+                      }}
+                    >
+                      Edit
+                    </button>
+                  )}
+                </div>
+                <div style={{ fontSize: '12px', color: '#555', lineHeight: '1.6' }}>
+                  <p style={{ margin: '4px 0' }}><strong>Name:</strong> {user.first_name} {user.last_name}</p>
+                  <p style={{ margin: '4px 0' }}><strong>Email:</strong> {user.email}</p>
+                  {user.phone && <p style={{ margin: '4px 0' }}><strong>Phone:</strong> {user.phone}</p>}
+                  {user.address && <p style={{ margin: '4px 0' }}><strong>Address:</strong> {user.address}</p>}
+                  <p style={{ margin: '4px 0' }}><strong>Member since:</strong> {formatDate(user.created_at)}</p>
+                </div>
+              </div>
+            )}
+
+            {/* Menu Items */}
             {userRole === 'super_admin' && (
               <>
                 <button
-                  style={{ ...menuItemStyle, borderRadius: '4px 4px 0 0' }}
+                  style={{ ...menuItemStyle, borderRadius: user ? '0' : '4px 4px 0 0' }}
                   onClick={() => {
                     navigate('/membership-tiers');
                     setIsOpen(false);
@@ -116,15 +169,15 @@ const ProfileMenu: React.FC<ProfileMenuProps> = ({ userName, userRole }) => {
             <button
               style={{
                 ...menuItemStyle,
-                borderRadius: userRole === 'super_admin' ? '0 0 4px 4px' : '4px 4px 0 0',
-                borderTop: userRole === 'super_admin' ? '1px solid #eee' : 'none'
+                borderRadius: '0',
+                borderTop: (userRole === 'super_admin' || user) ? '1px solid #eee' : 'none'
               }}
               onClick={handleChangePassword}
             >
               Change Password
             </button>
             <button
-              style={{ ...menuItemStyle, borderRadius: '0 0 4px 4px' }}
+              style={{ ...menuItemStyle, borderRadius: '0 0 4px 4px', borderTop: '1px solid #eee' }}
               onClick={handleLogout}
             >
               Log Out