sourabhrealtime/src/AdminPanel.jsx

ROBUST RICH TEXT EDITOR: Single-pane contentEditable with direct text selection formatting, speech features, undo/redo, professional UI - Perfect TipTap alternative

import React from 'react';
import { UserRole } from './index';

const AdminPanel = ({ 
  collaborators = [], 
  inviteUser, 
  removeUser, 
  changeUserRole,
  updateProjectSettings,
  projectSettings = {},
  userRole
}) => {
  const [email, setEmail] = React.useState('');
  const [selectedRole, setSelectedRole] = React.useState(UserRole.EDITOR);
  const [projectName, setProjectName] = React.useState(projectSettings.name || '');
  const [isPublic, setIsPublic] = React.useState(projectSettings.isPublic || false);
  
  // Update local state when project settings change
  React.useEffect(() => {
    setProjectName(projectSettings.name || '');
    setIsPublic(projectSettings.isPublic || false);
  }, [projectSettings]);
  
  // Check if user is admin
  const isAdmin = userRole === UserRole.ADMIN || userRole === UserRole.SUPER_ADMIN;
  
  if (!isAdmin) {
    return (
      <div className="sourabhrealtime-admin-panel sourabhrealtime-no-access">
        <p>You don't have admin access to this project.</p>
      </div>
    );
  }
  
  const handleInvite = (e) => {
    e.preventDefault();
    if (email && inviteUser) {
      inviteUser(email, selectedRole);
      setEmail('');
    }
  };
  
  const handleRemove = (userId) => {
    if (removeUser) {
      removeUser(userId);
    }
  };
  
  const handleRoleChange = (userId, role) => {
    if (changeUserRole) {
      changeUserRole(userId, role);
    }
  };
  
  const handleSettingsUpdate = (e) => {
    e.preventDefault();
    if (updateProjectSettings) {
      updateProjectSettings({
        name: projectName,
        isPublic
      });
    }
  };
  
  return (
    <div className="sourabhrealtime-admin-panel">
      <div className="sourabhrealtime-section">
        <h3>Project Settings</h3>
        <form onSubmit={handleSettingsUpdate}>
          <div className="sourabhrealtime-form-group">
            <label>Project Name</label>
            <input 
              type="text" 
              value={projectName} 
              onChange={(e) => setProjectName(e.target.value)}
              placeholder="Project Name"
            />
          </div>
          
          <div className="sourabhrealtime-form-group">
            <label>
              <input 
                type="checkbox" 
                checked={isPublic} 
                onChange={(e) => setIsPublic(e.target.checked)}
              />
              Public Project
            </label>
          </div>
          
          <button type="submit" className="sourabhrealtime-button">
            Update Settings
          </button>
        </form>
      </div>
      
      <div className="sourabhrealtime-section">
        <h3>Invite Users</h3>
        <form onSubmit={handleInvite}>
          <div className="sourabhrealtime-form-group">
            <input 
              type="email" 
              value={email} 
              onChange={(e) => setEmail(e.target.value)}
              placeholder="Email address"
              required
            />
            
            <select 
              value={selectedRole} 
              onChange={(e) => setSelectedRole(e.target.value)}
            >
              <option value={UserRole.ADMIN}>Admin</option>
              <option value={UserRole.EDITOR}>Editor</option>
              <option value={UserRole.VIEWER}>Viewer</option>
            </select>
          </div>
          
          <button type="submit" className="sourabhrealtime-button">
            Send Invitation
          </button>
        </form>
      </div>
      
      <div className="sourabhrealtime-section">
        <h3>Manage Collaborators</h3>
        {collaborators.length === 0 ? (
          <p>No collaborators yet.</p>
        ) : (
          <ul className="sourabhrealtime-collaborators-list">
            {collaborators.map(user => (
              <li key={user.id} className="sourabhrealtime-collaborator-item">
                <div className="sourabhrealtime-collaborator-info">
                  <span className="sourabhrealtime-collaborator-name">{user.name}</span>
                  <span className="sourabhrealtime-collaborator-role">{user.role || UserRole.EDITOR}</span>
                </div>
                
                <div className="sourabhrealtime-collaborator-actions">
                  <select 
                    value={user.role || UserRole.EDITOR} 
                    onChange={(e) => handleRoleChange(user.id, e.target.value)}
                    disabled={user.role === UserRole.SUPER_ADMIN && userRole !== UserRole.SUPER_ADMIN}
                  >
                    <option value={UserRole.ADMIN}>Admin</option>
                    <option value={UserRole.EDITOR}>Editor</option>
                    <option value={UserRole.VIEWER}>Viewer</option>
                  </select>
                  
                  <button 
                    onClick={() => handleRemove(user.id)}
                    className="sourabhrealtime-button sourabhrealtime-button-danger"
                    disabled={user.role === UserRole.SUPER_ADMIN && userRole !== UserRole.SUPER_ADMIN}
                  >
                    Remove
                  </button>
                </div>
              </li>
            ))}
          </ul>
        )}
      </div>
    </div>
  );
};

export default AdminPanel;