Layout tweaks

frontend/src/App.css

@@ -180,11 +180,23 @@ body {
 
 .dashboard-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  grid-template-columns: 1fr;
   gap: 20px;
   margin-top: 20px;
 }
 
+/* Desktop view: side-by-side layout */
+@media (min-width: 769px) {
+  .dashboard-grid {
+    grid-template-columns: 1fr 1fr;
+    align-items: start;
+  }
+  
+  .dashboard-grid > .card {
+    margin-bottom: 0;
+  }
+}
+
 /* Mobile responsive adjustments */
 @media (max-width: 768px) {
   .dashboard-grid {
@@ -449,3 +461,167 @@ body {
   border-color: #c82333;
   color: white !important;
 }
+
+/* Events Container Styles */
+.events-container {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.event-card {
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  padding: 16px;
+  background-color: #f9f9f9;
+}
+
+.event-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 16px;
+  margin-bottom: 12px;
+}
+
+.event-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.event-title {
+  margin: 0 0 4px 0;
+  color: #0066cc;
+  font-size: 18px;
+  word-wrap: break-word;
+}
+
+.event-datetime {
+  margin: 0;
+  font-size: 14px;
+  color: #666;
+}
+
+.event-location {
+  margin: 4px 0 0 0;
+  font-size: 14px;
+  color: #666;
+}
+
+.event-rsvp-buttons {
+  display: flex;
+  gap: 8px;
+  flex-shrink: 0;
+}
+
+.rsvp-btn {
+  font-size: 12px;
+  padding: 8px 16px;
+  border: 2px solid #adb5bd;
+  border-radius: 4px;
+  background-color: transparent;
+  color: #6c757d;
+  cursor: pointer;
+  font-weight: normal;
+  transition: all 0.3s ease;
+  white-space: nowrap;
+}
+
+.rsvp-btn:hover:not(:disabled) {
+  opacity: 0.8;
+}
+
+.rsvp-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.rsvp-btn.active {
+  font-weight: bold;
+  transform: scale(1.05);
+}
+
+.rsvp-btn:not(.active) {
+  opacity: 0.5;
+  filter: grayscale(50%);
+}
+
+.rsvp-btn-attending.active {
+  border: 3px solid #28a745;
+  background-color: #28a745;
+  color: white;
+  box-shadow: 0 4px 8px rgba(40, 167, 69, 0.3);
+}
+
+.rsvp-btn-maybe.active {
+  border: 3px solid #ffc107;
+  background-color: #ffc107;
+  color: #212529;
+  box-shadow: 0 4px 8px rgba(255, 193, 7, 0.3);
+}
+
+.rsvp-btn-not-attending.active {
+  border: 3px solid #dc3545;
+  background-color: #dc3545;
+  color: white;
+  box-shadow: 0 4px 8px rgba(220, 53, 69, 0.3);
+}
+
+.event-description {
+  margin: 0;
+  font-size: 14px;
+  line-height: 1.4;
+}
+
+.event-rsvp-status {
+  margin-top: 12px;
+  padding: 8px 12px;
+  border-radius: 4px;
+  font-size: 12px;
+}
+
+.event-rsvp-status.attending {
+  background-color: #d4edda;
+  border: 1px solid #c3e6cb;
+  color: #155724;
+}
+
+.event-rsvp-status.maybe {
+  background-color: #fff3cd;
+  border: 1px solid #ffeaa7;
+  color: #856404;
+}
+
+.event-rsvp-status.not_attending {
+  background-color: #f8d7da;
+  border: 1px solid #f5c6cb;
+  color: #721c24;
+}
+
+/* Mobile responsive adjustments for events */
+@media (max-width: 768px) {
+  .event-header {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .event-rsvp-buttons {
+    flex-direction: column;
+    width: 100%;
+    gap: 8px;
+  }
+
+  .rsvp-btn {
+    width: 100%;
+    padding: 12px 16px;
+    font-size: 14px;
+  }
+
+  .event-title {
+    font-size: 16px;
+  }
+  
+  .event-card {
+    padding: 12px;
+  }
+}

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',
+                borderRadius: '0',
-                borderTop: userRole === 'super_admin' ? '1px solid #eee' : 'none'
+                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

frontend/src/pages/Dashboard.tsx

@@ -229,6 +229,13 @@ const Dashboard: React.FC = () => {
     }
   };
 
+  const handleFormChange = (field: string, value: string) => {
+    setEditFormData(prev => ({
+      ...prev,
+      [field]: value
+    }));
+  };
+
   const handleSaveUser = async () => {
     if (!selectedUser) return;
 
@@ -352,32 +359,18 @@ const Dashboard: React.FC = () => {
     <>
       <nav className="navbar">
         <h1>SASA Membership Portal</h1>
-        <ProfileMenu userName={`${user?.first_name} ${user?.last_name}`} userRole={user?.role || ''} />
+        <ProfileMenu 
+          userName={`${user?.first_name} ${user?.last_name}`} 
+          userRole={user?.role || ''} 
+          user={user}
+          onEditProfile={handleProfileEdit}
+        />
       </nav>
 
       <div className="container">
         <h2 style={{ marginTop: '20px', marginBottom: '20px' }}>Welcome, {user?.first_name}!</h2>
 
         <div className="dashboard-grid">
-          {/* Profile Card */}
-          <div className="card">
-            <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>}
-            {user?.address && <p><strong>Address:</strong> {user.address}</p>}
-            <p><strong>Registered since:</strong> {user && formatDate(user.created_at)}</p>
-          </div>
-
           {/* Membership Card */}
           {activeMembership ? (
             <div className="card">
@@ -408,6 +401,67 @@ const Dashboard: React.FC = () => {
               </button>
             </div>
           )}
+
+          {/* Upcoming Events */}
+          <div className="card">
+            <h3 style={{ marginBottom: '16px' }}>Upcoming Events</h3>
+            {upcomingEvents.length > 0 ? (
+              <div className="events-container">
+                {upcomingEvents.map(event => (
+                  <div key={event.id} className="event-card">
+                    <div className="event-header">
+                      <div className="event-info">
+                        <h4 className="event-title">{event.title}</h4>
+                        <p className="event-datetime">
+                          {formatDate(event.event_date)} at {event.event_time}
+                        </p>
+                        {event.location && (
+                          <p className="event-location">
+                            📍 {event.location}
+                          </p>
+                        )}
+                      </div>
+                      <div className="event-rsvp-buttons">
+                        <button
+                          className={`rsvp-btn rsvp-btn-attending ${event.rsvp_status === 'attending' ? 'active' : ''}`}
+                          onClick={() => handleRSVP(event.id, 'attending')}
+                          disabled={rsvpLoading[event.id]}
+                        >
+                          {rsvpLoading[event.id] ? '...' : 'Attending'}
+                        </button>
+                        <button
+                          className={`rsvp-btn rsvp-btn-maybe ${event.rsvp_status === 'maybe' ? 'active' : ''}`}
+                          onClick={() => handleRSVP(event.id, 'maybe')}
+                          disabled={rsvpLoading[event.id]}
+                        >
+                          {rsvpLoading[event.id] ? '...' : 'Maybe'}
+                        </button>
+                        <button
+                          className={`rsvp-btn rsvp-btn-not-attending ${event.rsvp_status === 'not_attending' ? 'active' : ''}`}
+                          onClick={() => handleRSVP(event.id, 'not_attending')}
+                          disabled={rsvpLoading[event.id]}
+                        >
+                          {rsvpLoading[event.id] ? '...' : 'Not Attending'}
+                        </button>
+                      </div>
+                    </div>
+                    {event.description && (
+                      <p className="event-description">
+                        {event.description}
+                      </p>
+                    )}
+                    {event.rsvp_status && (
+                      <div className={`event-rsvp-status ${event.rsvp_status}`}>
+                        <strong>Your RSVP:</strong> <span style={{ textTransform: 'capitalize' }}>{event.rsvp_status.replace('_', ' ')}</span>
+                      </div>
+                    )}
+                  </div>
+                ))}
+              </div>
+            ) : (
+              <p style={{ color: '#666' }}>No upcoming events at this time.</p>
+            )}
+          </div>
         </div>
 
         {/* Payment History */}
@@ -445,125 +499,6 @@ const Dashboard: React.FC = () => {
           )}
         </div>
 
-        {/* Upcoming Events */}
-        <div className="card" style={{ marginTop: '20px' }}>
-          <h3 style={{ marginBottom: '16px' }}>Upcoming Events</h3>
-          {upcomingEvents.length > 0 ? (
-            <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
-              {upcomingEvents.map(event => (
-                <div key={event.id} style={{
-                  border: '1px solid #ddd',
-                  borderRadius: '8px',
-                  padding: '16px',
-                  backgroundColor: '#f9f9f9'
-                }}>
-                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: '12px' }}>
-                    <div>
-                      <h4 style={{ margin: '0 0 4px 0', color: '#0066cc' }}>{event.title}</h4>
-                      <p style={{ margin: '0', fontSize: '14px', color: '#666' }}>
-                        {formatDate(event.event_date)} at {event.event_time}
-                      </p>
-                      {event.location && (
-                        <p style={{ margin: '4px 0 0 0', fontSize: '14px', color: '#666' }}>
-                          📍 {event.location}
-                        </p>
-                      )}
-                    </div>
-                    <div style={{ display: 'flex', gap: '8px' }}>
-                      <button
-                        className={`btn ${event.rsvp_status === 'attending' ? 'btn-success' : 'btn-outline-secondary'}`}
-                        onClick={() => handleRSVP(event.id, 'attending')}
-                        disabled={rsvpLoading[event.id]}
-                        style={{
-                          fontSize: '12px',
-                          padding: '8px 16px',
-                          opacity: rsvpLoading[event.id] ? 0.6 : event.rsvp_status ? (event.rsvp_status === 'attending' ? 1 : 0.4) : 1,
-                          cursor: rsvpLoading[event.id] ? 'not-allowed' : 'pointer',
-                          fontWeight: event.rsvp_status === 'attending' ? 'bold' : 'normal',
-                          border: event.rsvp_status === 'attending' ? '3px solid #28a745' : '2px solid #adb5bd',
-                          backgroundColor: event.rsvp_status === 'attending' ? '#28a745' : 'transparent',
-                          color: event.rsvp_status === 'attending' ? 'white' : '#6c757d',
-                          transform: event.rsvp_status === 'attending' ? 'scale(1.1)' : event.rsvp_status ? 'scale(0.95)' : 'scale(1)',
-                          boxShadow: event.rsvp_status === 'attending' ? '0 4px 8px rgba(40, 167, 69, 0.3)' : 'none',
-                          transition: 'all 0.3s ease',
-                          filter: event.rsvp_status && event.rsvp_status !== 'attending' ? 'grayscale(50%)' : 'none'
-                        }}
-                      >
-                        {rsvpLoading[event.id] ? '...' : 'Attending'}
-                      </button>
-                      <button
-                        className={`btn ${event.rsvp_status === 'maybe' ? 'btn-warning' : 'btn-outline-secondary'}`}
-                        onClick={() => handleRSVP(event.id, 'maybe')}
-                        disabled={rsvpLoading[event.id]}
-                        style={{
-                          fontSize: '12px',
-                          padding: '8px 16px',
-                          opacity: rsvpLoading[event.id] ? 0.6 : event.rsvp_status ? (event.rsvp_status === 'maybe' ? 1 : 0.4) : 1,
-                          cursor: rsvpLoading[event.id] ? 'not-allowed' : 'pointer',
-                          fontWeight: event.rsvp_status === 'maybe' ? 'bold' : 'normal',
-                          border: event.rsvp_status === 'maybe' ? '3px solid #ffc107' : '2px solid #adb5bd',
-                          backgroundColor: event.rsvp_status === 'maybe' ? '#ffc107' : 'transparent',
-                          color: event.rsvp_status === 'maybe' ? '#212529' : '#6c757d',
-                          transform: event.rsvp_status === 'maybe' ? 'scale(1.1)' : event.rsvp_status ? 'scale(0.95)' : 'scale(1)',
-                          boxShadow: event.rsvp_status === 'maybe' ? '0 4px 8px rgba(255, 193, 7, 0.3)' : 'none',
-                          transition: 'all 0.3s ease',
-                          filter: event.rsvp_status && event.rsvp_status !== 'maybe' ? 'grayscale(50%)' : 'none'
-                        }}
-                      >
-                        {rsvpLoading[event.id] ? '...' : 'Maybe'}
-                      </button>
-                      <button
-                        className={`btn ${event.rsvp_status === 'not_attending' ? 'btn-danger' : 'btn-outline-secondary'}`}
-                        onClick={() => handleRSVP(event.id, 'not_attending')}
-                        disabled={rsvpLoading[event.id]}
-                        style={{
-                          fontSize: '12px',
-                          padding: '8px 16px',
-                          opacity: rsvpLoading[event.id] ? 0.6 : event.rsvp_status ? (event.rsvp_status === 'not_attending' ? 1 : 0.4) : 1,
-                          cursor: rsvpLoading[event.id] ? 'not-allowed' : 'pointer',
-                          fontWeight: event.rsvp_status === 'not_attending' ? 'bold' : 'normal',
-                          border: event.rsvp_status === 'not_attending' ? '3px solid #dc3545' : '2px solid #adb5bd',
-                          backgroundColor: event.rsvp_status === 'not_attending' ? '#dc3545' : 'transparent',
-                          color: event.rsvp_status === 'not_attending' ? 'white' : '#6c757d',
-                          transform: event.rsvp_status === 'not_attending' ? 'scale(1.1)' : event.rsvp_status ? 'scale(0.95)' : 'scale(1)',
-                          boxShadow: event.rsvp_status === 'not_attending' ? '0 4px 8px rgba(220, 53, 69, 0.3)' : 'none',
-                          transition: 'all 0.3s ease',
-                          filter: event.rsvp_status && event.rsvp_status !== 'not_attending' ? 'grayscale(50%)' : 'none'
-                        }}
-                      >
-                        {rsvpLoading[event.id] ? '...' : 'Not Attending'}
-                      </button>
-                    </div>
-                  </div>
-                  {event.description && (
-                    <p style={{ margin: '0', fontSize: '14px', lineHeight: '1.4' }}>
-                      {event.description}
-                    </p>
-                  )}
-                  {event.rsvp_status && (
-                    <div style={{
-                      marginTop: '12px',
-                      padding: '8px 12px',
-                      backgroundColor: event.rsvp_status === 'attending' ? '#d4edda' :
-                                     event.rsvp_status === 'maybe' ? '#fff3cd' : '#f8d7da',
-                      border: `1px solid ${event.rsvp_status === 'attending' ? '#c3e6cb' :
-                                         event.rsvp_status === 'maybe' ? '#ffeaa7' : '#f5c6cb'}`,
-                      borderRadius: '4px',
-                      fontSize: '12px',
-                      color: event.rsvp_status === 'attending' ? '#155724' :
-                            event.rsvp_status === 'maybe' ? '#856404' : '#721c24'
-                    }}>
-                      <strong>Your RSVP:</strong> <span style={{ textTransform: 'capitalize' }}>{event.rsvp_status.replace('_', ' ')}</span>
-                    </div>
-                  )}
-                </div>
-              ))}
-            </div>
-          ) : (
-            <p style={{ color: '#666' }}>No upcoming events at this time.</p>
-          )}
-        </div>
-
         {/* Admin Section */}
         {(user?.role === 'admin' || user?.role === 'super_admin') && (
           <div className="card" style={{ marginTop: '20px' }}>