Bounce management

frontend/src/pages/Dashboard.tsx

@@ -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}
+        />
+      )}
     </>
   );
 };