Arch changes and feature flags

frontend/src/pages/Dashboard.tsx

@@ -4,6 +4,7 @@ import { authService, userService, membershipService, paymentService, eventServi
 import MembershipSetup from '../components/MembershipSetup';
 import ProfileMenu from '../components/ProfileMenu';
 import ProfileEdit from '../components/ProfileEdit';
+import FeatureFlagStatus from '../components/FeatureFlagStatus';
 
 const Dashboard: React.FC = () => {
   const navigate = useNavigate();
@@ -38,6 +39,8 @@ const Dashboard: React.FC = () => {
   const [showRSVPModal, setShowRSVPModal] = useState(false);
   const [selectedEventForRSVP, setSelectedEventForRSVP] = useState<Event | null>(null);
   const [eventRSVPList, setEventRSVPList] = useState<EventRSVP[]>([]);
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
+  const [userToDelete, setUserToDelete] = useState<User | null>(null);
 
   useEffect(() => {
     if (!authService.isAuthenticated()) {
@@ -183,6 +186,26 @@ const Dashboard: React.FC = () => {
     }
   };
 
+  const handleDeleteUser = async () => {
+    if (!userToDelete) return;
+
+    try {
+      await userService.deleteUser(userToDelete.id);
+      await loadData(); // Reload data to reflect changes
+      setShowDeleteConfirm(false);
+      setUserToDelete(null);
+      alert('User deleted successfully');
+    } catch (error: any) {
+      console.error('Failed to delete user:', error);
+      alert(`Failed to delete user: ${error.response?.data?.detail || error.message}`);
+    }
+  };
+
+  const confirmDeleteUser = (u: User) => {
+    setUserToDelete(u);
+    setShowDeleteConfirm(true);
+  };
+
   const getStatusClass = (status: string) => {
     switch (status.toLowerCase()) {
       case 'active':
@@ -694,6 +717,11 @@ const Dashboard: React.FC = () => {
           </div>
         )}
 
+        {/* Feature Flag Management - Super Admin Only */}
+        {user?.role === 'super_admin' && (
+          <FeatureFlagStatus />
+        )}
+
         {/* User Management Section */}
         {(user?.role === 'admin' || user?.role === 'super_admin') && (
           <div className="card" style={{ marginTop: '20px' }}>
@@ -788,6 +816,18 @@ const Dashboard: React.FC = () => {
                           {u.role === 'super_admin' && (
                             <span style={{ fontSize: '12px', color: '#666' }}>Super Admin</span>
                           )}
+                          {user?.role === 'super_admin' && u.id !== user?.id && (
+                            <button
+                              className="btn btn-danger"
+                              onClick={(e) => {
+                                e.stopPropagation(); // Prevent row click
+                                confirmDeleteUser(u);
+                              }}
+                              style={{ fontSize: '12px', padding: '4px 8px', marginLeft: '4px' }}
+                            >
+                              Delete
+                            </button>
+                          )}
                         </td>
                       </tr>
                     );
@@ -1363,6 +1403,53 @@ const Dashboard: React.FC = () => {
           </div>
         </div>
       )}
+
+      {/* Delete User Confirmation Modal */}
+      {showDeleteConfirm && userToDelete && (
+        <div className="modal-overlay">
+          <div className="modal-content">
+            <h3 style={{ color: '#dc3545' }}>Delete User</h3>
+            <p>Are you sure you want to delete the user <strong>{userToDelete.first_name} {userToDelete.last_name}</strong> ({userToDelete.email})?</p>
+            <p style={{ color: '#dc3545', fontSize: '14px' }}>
+              ⚠️ This action cannot be undone. All associated memberships and payments will also be deleted.
+            </p>
+            
+            <div style={{ display: 'flex', justifyContent: 'flex-end', gap: '10px', marginTop: '20px' }}>
+              <button
+                type="button"
+                onClick={() => {
+                  setShowDeleteConfirm(false);
+                  setUserToDelete(null);
+                }}
+                style={{
+                  padding: '10px 20px',
+                  backgroundColor: '#6c757d',
+                  color: 'white',
+                  border: 'none',
+                  borderRadius: '4px',
+                  cursor: 'pointer'
+                }}
+              >
+                Cancel
+              </button>
+              <button
+                type="button"
+                onClick={handleDeleteUser}
+                style={{
+                  padding: '10px 20px',
+                  backgroundColor: '#dc3545',
+                  color: 'white',
+                  border: 'none',
+                  borderRadius: '4px',
+                  cursor: 'pointer'
+                }}
+              >
+                Delete User
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
     </>
   );
 };