- 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>
84 lines
2.7 KiB
TypeScript
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>;
|
|
};
|