AdPlatform-Client/Client-Client/src/components/admin/StaffUsers.jsx

/**
 * StaffUsers.jsx — Staff User Management
 * Read-only view of staff users from the Entra portal.
 * Users are added directly via Entra Portal → Users → New User.
 * This panel shows who currently has access and their session activity.
 */

import React, { useState, useEffect, useCallback } from 'react';
import { useAdmin } from '../../context/AdminContext';

export default function StaffUsers() {
    const { apiCall } = useAdmin();

    const [users,   setUsers]   = useState([]);
    const [loading, setLoading] = useState(true);
    const [error,   setError]   = useState(null);

    const loadUsers = useCallback(async () => {
        setLoading(true);
        const result = await apiCall('/api/admin/users');
        if (result?.ok) setUsers(result.data ?? result.users ?? []);
        else setError('Failed to load users.');
        setLoading(false);
    }, [apiCall]);

    useEffect(() => { loadUsers(); }, [loadUsers]);

    return (
        <div className="panel staff-users-panel">
            <div className="panel-toolbar">
                <h3 className="panel-title">Staff Users</h3>
                <span className="panel-note">
                    Users are managed via <strong>Entra Portal → Users</strong>
                </span>
            </div>

            {error && <div className="alert alert-error">{error}</div>}

            {loading ? (
                <div className="loading-indicator">Loading...</div>
            ) : (
                <table className="data-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Email</th>
                            <th>Role</th>
                            <th>Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        {users.length === 0 ? (
                            <tr><td colSpan="4" className="empty-state">No users found.</td></tr>
                        ) : (
                            users.map((u, i) => (
                                <tr key={u.userId ?? u.id ?? i}>
                                    <td>{u.name ?? u.clientName ?? '—'}</td>
                                    <td>{u.email ?? u.userEmail ?? '—'}</td>
                                    <td><span className="badge badge-role">{u.role ?? 'Staff'}</span></td>
                                    <td><span className="badge badge-active">Active</span></td>
                                </tr>
                            ))
                        )}
                    </tbody>
                </table>
            )}

            <div className="panel-footer-note">
                <p>To add a new staff user: <strong>Entra Portal → Users → New User</strong>, then assign them to the Staff app registration.</p>
                <p>To remove access: <strong>Entra Portal → Users → select user → Delete</strong> or revoke the app assignment.</p>
            </div>
        </div>
    );
}