{open && (
<>
setOpen(false)} />
{createPortal(dropdownContent, document.body)}
)}
);
}
function CompanyRoleDropdown({ userId, currentRole, onRoleChange }: { userId: number; currentRole: string | null; onRoleChange: (userId: number, newRole: CompanyRole, companyId?: number) => void }) {
const [open, setOpen] = useState(false);
const [rect, setRect] = useState
(null);
const triggerRef = useRef(null);
const queryClient = useQueryClient();
// Fetch companies when currentRole is null (need to assign one)
const { data: companiesData } = useQuery>({
queryKey: ['admin-organizations'],
queryFn: adminApi.getOrganizations,
enabled: !currentRole && open,
});
const mutation = useMutation({
mutationFn: ({ userId, role, companyId }: { userId: number; role: CompanyRole; companyId?: number }) => adminApi.updateCompanyRole(userId, role, companyId),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['admin-users'] });
setOpen(false);
},
});
useEffect(() => {
if (open && triggerRef.current) {
setRect(triggerRef.current.getBoundingClientRect());
}
}, [open]);
const handleChange = (newRole: CompanyRole, companyId?: number) => {
if (newRole === currentRole && !companyId) return;
onRoleChange(userId, newRole, companyId);
mutation.mutate({ userId, role: newRole, companyId });
};
const config = COMPANY_ROLES.find((r) => r.value === currentRole);
// No company — show assignment dropdown with company picker
if (!currentRole) {
const companies = companiesData?.items || [];
return (
{open && companies.length > 0 && (
<>
setOpen(false)} />
{createPortal(
Select Company & Role
{companies.map((company) => (
{company.name}
{COMPANY_ROLES.map((role) => (
))}
))}
,
document.body
)}
)}
);
}
const dropdownContent = (
{COMPANY_ROLES.map((role) => (
))}
);
return (
{open && (
<>
setOpen(false)} />
{createPortal(dropdownContent, document.body)}
)}
);
}
export function UsersPage() {
const [search, setSearch] = useState('');
const [roleFilter, setRoleFilter] = useState
('');
const [showCreateModal, setShowCreateModal] = useState(false);
const [deleteConfirm, setDeleteConfirm] = useState(null);
const { user: currentUser } = useAuth();
const queryClient = useQueryClient();
const { data, isLoading } = useQuery({
queryKey: ['admin-users', roleFilter],
queryFn: () => adminApi.getUsers({ role: roleFilter || undefined }),
});
const users = data?.items ?? [];
const filtered = users.filter((user) =>
user.email.toLowerCase().includes(search.toLowerCase()) ||
user.fullName.toLowerCase().includes(search.toLowerCase())
);
// Delete mutation
const deleteMutation = useMutation({
mutationFn: (userId: number) => adminApi.deleteUser(userId),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['admin-users'] });
setDeleteConfirm(null);
},
});
// Create mutation
const createMutation = useMutation({
mutationFn: (data: { email: string; full_name?: string; password: string; role?: PlatformRole; company_name?: string; company_role?: CompanyRole }) =>
adminApi.createUser(data),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['admin-users'] });
setShowCreateModal(false);
},
});
const handlePlatformRoleChange = useCallback((_userId: number, _newRole: PlatformRole) => {
// Mutation in PlatformRoleDropdown handles the actual API call
}, []);
const handleCompanyRoleChange = useCallback((_userId: number, _newRole: CompanyRole, _companyId?: number) => {
// Mutation in CompanyRoleDropdown handles the actual API call
}, []);
if (isLoading) {
return (
);
}
return (
{/* Header */}
Users
{users.length} user{users.length !== 1 ? 's' : ''} in the system
{/* Users Table */}
{filtered.length === 0 ? (
{search || roleFilter ? 'No users match your filters' : 'No users yet'}
) : (
| User |
Platform Role |
Company Role |
Status |
Last Login |
|
{filtered.map((user) => (
{user.fullName.charAt(0).toUpperCase()}
{user.fullName}
{user.email}
|
|
|
{user.status}
|
{user.lastLogin ? new Date(user.lastLogin).toLocaleDateString() : 'Never'}
|
{user.id !== currentUser?.id && (
)}
|
))}
)}
{/* Create User Modal */}
{showCreateModal && (
setShowCreateModal(false)}
onCreate={createMutation.mutate}
isPending={createMutation.isPending}
/>
)}
{/* Delete Confirmation Modal */}
{deleteConfirm && (
u.id === deleteConfirm)!}
onConfirm={() => deleteMutation.mutate(deleteConfirm!)}
onClose={() => setDeleteConfirm(null)}
isPending={deleteMutation.isPending}
/>
)}
);
}
function CreateUserModal({ onClose, onCreate, isPending }: {
onClose: () => void;
onCreate: (data: { email: string; full_name?: string; password: string; role?: PlatformRole; company_name?: string; company_role?: CompanyRole }) => void;
isPending: boolean;
}) {
const [email, setEmail] = useState('');
const [fullName, setFullName] = useState('');
const [password, setPassword] = useState('');
const [role, setRole] = useState('user');
const [companyName, setCompanyName] = useState('');
const [companyRole, setCompanyRole] = useState('member');
const handleSubmit = (e: React.FormEvent) => {
e.preventDefault();
onCreate({ email, full_name: fullName, password, role, company_name: companyName, company_role: companyName ? companyRole : undefined });
};
return createPortal(
,
document.body
);
}
function DeleteConfirmModal({ user, onConfirm, onClose, isPending }: {
user: ApiUser;
onConfirm: () => void;
onClose: () => void;
isPending: boolean;
}) {
return createPortal(
Delete User
Are you sure you want to delete {user.fullName} ({user.email})? This action cannot be undone.
,
document.body
);
}