ability to ban and unban users

frontend/src/pages/PublicProfile.tsx

@@ -6,6 +6,8 @@ import { getImageUrl } from '../services/uploadService';
 import { useAuth } from '../contexts/AuthContext';
 import ChatWindow from '../components/ChatWindow';
 import Avatar from '../components/Avatar';
+import BanUserModal from '../components/BanUserModal';
+import ConfirmationModal from '../components/ConfirmationModal';
 
 const PublicProfile: React.FC = () => {
   const { id } = useParams<{ id: string }>();
@@ -16,6 +18,9 @@ const PublicProfile: React.FC = () => {
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const [showChat, setShowChat] = useState(false);
+  const [showBanModal, setShowBanModal] = useState(false);
+  const [showUnbanModal, setShowUnbanModal] = useState(false);
+  const [unbanning, setUnbanning] = useState(false);
 
   useEffect(() => {
     fetchUserProfile();
@@ -44,6 +49,28 @@ const PublicProfile: React.FC = () => {
     }
   };
 
+  const handleBanComplete = (updatedUser: User) => {
+    setUser(updatedUser);
+  };
+
+  const handleUnban = async () => {
+    if (!user) return;
+
+    try {
+      setUnbanning(true);
+      const response = await userAPI.adminUnbanUser(user.id);
+      setUser(response.data.user);
+      setShowUnbanModal(false);
+    } catch (err: any) {
+      setError(err.response?.data?.error || 'Failed to unban user');
+    } finally {
+      setUnbanning(false);
+    }
+  };
+
+  const isAdmin = currentUser?.role === 'admin';
+  const canBanUser = isAdmin && user && currentUser?.id !== user.id && user.role !== 'admin';
+
   if (loading) {
     return (
       <div className="container mt-5">
@@ -75,7 +102,21 @@ const PublicProfile: React.FC = () => {
               <div className="text-center mb-4">
                 <Avatar user={user} size="xxxl" className="mb-3 mx-auto" />
                 <h3>{user.firstName} {user.lastName}</h3>
-                {currentUser && currentUser.id !== user.id && (
+
+                {/* Show ban status badge for admins */}
+                {isAdmin && user.isBanned && (
+                  <div className="mt-2">
+                    <span className="badge bg-danger">Banned</span>
+                    {user.bannedAt && (
+                      <small className="text-muted d-block mt-1">
+                        Banned on {new Date(user.bannedAt).toLocaleDateString()}
+                      </small>
+                    )}
+                  </div>
+                )}
+
+                {/* Message button - hide for banned users */}
+                {currentUser && currentUser.id !== user.id && !user.isBanned && (
                   <button
                     className="btn btn-primary mt-3"
                     onClick={() => setShowChat(true)}
@@ -83,6 +124,35 @@ const PublicProfile: React.FC = () => {
                     <i className="bi bi-chat-dots-fill me-2"></i>Message
                   </button>
                 )}
+
+                {/* Admin Ban/Unban buttons */}
+                {canBanUser && (
+                  <div className="mt-3">
+                    {user.isBanned ? (
+                      <button
+                        className="btn btn-success"
+                        onClick={() => setShowUnbanModal(true)}
+                      >
+                        <i className="bi bi-person-check me-2"></i>Unban User
+                      </button>
+                    ) : (
+                      <button
+                        className="btn btn-danger"
+                        onClick={() => setShowBanModal(true)}
+                      >
+                        <i className="bi bi-person-x me-2"></i>Ban User
+                      </button>
+                    )}
+                  </div>
+                )}
+
+                {/* Show ban reason for admins */}
+                {isAdmin && user.isBanned && user.banReason && (
+                  <div className="alert alert-warning mt-3 text-start">
+                    <strong>Ban Reason:</strong>
+                    <p className="mb-0 mt-1">{user.banReason}</p>
+                  </div>
+                )}
               </div>
             </div>
           </div>
@@ -153,6 +223,31 @@ const PublicProfile: React.FC = () => {
           recipient={user}
         />
       )}
+
+      {/* BanUserModal */}
+      {user && (
+        <BanUserModal
+          show={showBanModal}
+          onHide={() => setShowBanModal(false)}
+          user={user}
+          onBanComplete={handleBanComplete}
+        />
+      )}
+
+      {/* UnbanModal */}
+      {user && (
+        <ConfirmationModal
+          show={showUnbanModal}
+          onClose={() => setShowUnbanModal(false)}
+          onConfirm={handleUnban}
+          title={`Unban ${user.firstName} ${user.lastName}`}
+          message="Are you sure you want to unban this user? They will be able to log in and use the platform again."
+          confirmText="Unban User"
+          cancelText="Cancel"
+          confirmButtonClass="btn-success"
+          loading={unbanning}
+        />
+      )}
     </div>
   );
 };