Display user role and agency on Profile page

Replace the hardcoded "Account Type" field with a "Role" field that
shows the user's role label and agency name from the backend /api/me
endpoint (e.g. "Super Admin (Oliver)", "Standard User (Barclays)").

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
michael 2026-02-19 10:00:25 -06:00
parent a2f52c0960
commit f1183e1bff

View file

@ -4,6 +4,15 @@ import { LogoutIcon } from './icons/LogoutIcon';
import { QuestionMarkIcon } from './icons/QuestionMarkIcon';
import { getUserInfo, UserInfo } from '../services/authService';
import { apiService } from '../services/apiService';
import { useUser } from '../contexts/UserContext';
import type { UserRole } from '../types';
const ROLE_LABELS: Record<UserRole, string> = {
super_admin: 'Super Admin',
oversight_admin: 'Oversight Admin',
agency_admin: 'Agency Admin',
basic_user: 'Standard User',
};
interface ProfileProps {
onLogout: () => void;
@ -16,19 +25,26 @@ export const Profile: React.FC<ProfileProps> = ({ onLogout, msalInstance }) => {
const [userInfo, setUserInfo] = useState<UserInfo | null>(null);
const [isSubmitting, setIsSubmitting] = useState(false);
const [submitStatus, setSubmitStatus] = useState<{ type: 'success' | 'error'; message: string } | null>(null);
const { user } = useUser();
useEffect(() => {
const info = getUserInfo(msalInstance);
setUserInfo(info);
}, [msalInstance]);
const getRoleDisplay = (): string => {
if (!user) return 'Loading...';
const label = ROLE_LABELS[user.role] ?? user.role;
return user.agencyName ? `${label} (${user.agencyName})` : label;
};
const userDetails = userInfo ? {
'Account Type': userInfo.accountType,
'Role': getRoleDisplay(),
'First Name': userInfo.firstName || 'N/A',
'Last Name': userInfo.lastName || 'N/A',
'Email': userInfo.email,
} : {
'Account Type': 'Loading...',
'Role': 'Loading...',
'First Name': '',
'Last Name': '',
'Email': '',