modcomms/frontend/contexts/UserContext.tsx
michael 05e74becfe Add frontend RBAC: UserContext, role-based sidebar, agency filter, user management
- Add UserRole type and AppUser interface to types.ts
- Create UserContext with useUser() hook providing role-based permission booleans
- Split App into App (auth wrapper) + AppContent (uses UserContext)
- Update Sidebar to filter nav items by UserRole instead of boolean isAdmin
- Add User Management nav item (super_admin only)
- Add AgencyFilterBar component for oversight_admin/super_admin session-level filtering
- Pass agencyId to getCampaigns, getAnalytics, audit endpoints in apiService
- Add getMe, getUsers, updateUser, createAgency to apiService
- Build UserManagement page with user table (role/agency dropdowns) and agency CRUD
- Add readOnly prop to Campaigns (hides create/delete/status-toggle for oversight_admin)
- Add readOnly prop to Settings (disables all ManagementCards, shows view-only banner)
- Pass agencyId to Analytics component for filtered data
- Update urlState with Knowledge Base and User Management views

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-19 08:36:38 -06:00

84 lines
2.7 KiB
TypeScript

import React, { createContext, useContext, useState, useEffect } from 'react';
import apiService from '../services/apiService';
import type { UserRole, AppUser } from '../types';
interface UserContextValue {
user: AppUser | null;
isLoading: boolean;
/** Convenience booleans derived from user.role */
isSuperAdmin: boolean;
isOversightAdmin: boolean;
canWrite: boolean;
canSeeAnalytics: boolean;
canSeeAuditing: boolean;
canSeeKnowledgeBase: boolean;
canSeeSettings: boolean;
canSeeUserManagement: boolean;
canEditSettings: boolean;
/** Re-fetch user from backend (e.g. after role change) */
refresh: () => Promise<void>;
}
const UserContext = createContext<UserContextValue>({
user: null,
isLoading: true,
isSuperAdmin: false,
isOversightAdmin: false,
canWrite: false,
canSeeAnalytics: false,
canSeeAuditing: false,
canSeeKnowledgeBase: false,
canSeeSettings: false,
canSeeUserManagement: false,
canEditSettings: false,
refresh: async () => {},
});
export const useUser = () => useContext(UserContext);
export const UserProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
const [user, setUser] = useState<AppUser | null>(null);
const [isLoading, setIsLoading] = useState(true);
const fetchUser = async () => {
try {
const me = await apiService.getMe();
setUser({
id: me.id,
email: me.email,
name: me.name,
role: me.role as UserRole,
agencyId: me.agency_id,
agencyName: me.agency_name,
});
} catch (error) {
console.error('Failed to fetch current user:', error);
setUser(null);
} finally {
setIsLoading(false);
}
};
useEffect(() => {
fetchUser();
}, []);
const role = user?.role;
const value: UserContextValue = {
user,
isLoading,
isSuperAdmin: role === 'super_admin',
isOversightAdmin: role === 'oversight_admin',
canWrite: role !== 'oversight_admin' && role != null,
canSeeAnalytics: role === 'super_admin' || role === 'oversight_admin' || role === 'agency_admin',
canSeeAuditing: role === 'super_admin' || role === 'oversight_admin',
canSeeKnowledgeBase: role === 'super_admin',
canSeeSettings: role === 'super_admin' || role === 'oversight_admin' || role === 'agency_admin',
canSeeUserManagement: role === 'super_admin',
canEditSettings: role === 'super_admin',
refresh: fetchUser,
};
return <UserContext.Provider value={value}>{children}</UserContext.Provider>;
};