Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 | /**
* UserManagement Component with Routing
*
* Main container component for User Management screen with routing.
* Handles navigation between user list and user detail views.
*
* Features:
* - User list table with sorting
* - Search and filters
* - Pagination
* - User detail page with event participation
* - Role management
* - User creation and editing
* - Batch import for speakers and participants
*/
import React, { useState } from 'react';
import { Routes, Route, useNavigate, useParams } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import UserList from './UserList';
import { UserDetailView } from './UserDetailView';
import UserCreateEditModal from './UserCreateEditModal';
import { useUserById } from '@/hooks/useUserManagement';
import type { User } from '@/types/user.types';
const UserDetailPage: React.FC = () => {
const { userId } = useParams<{ userId: string }>();
const navigate = useNavigate();
const { t } = useTranslation('userManagement');
const [editUser, setEditUser] = useState<User | null>(null);
// Fetch user by ID with company details
const {
data: user,
isLoading,
isError,
} = useUserById({
id: userId || null,
includes: ['company'],
});
const handleBack = () => {
navigate('/organizer/users');
};
const handleEdit = (user: User) => {
setEditUser(user);
};
const handleCloseEditModal = () => {
setEditUser(null);
};
if (isLoading) {
return <div>Loading...</div>;
}
if (isError || !user) {
return <div>{t('error.notFound')}</div>;
}
return (
<>
<UserDetailView
user={user}
onBack={handleBack}
onEdit={handleEdit}
canEdit={true}
canDelete={false}
/>
{/* Edit User Modal */}
<UserCreateEditModal open={!!editUser} user={editUser} onClose={handleCloseEditModal} />
</>
);
};
const UserManagement: React.FC = () => {
return (
<Routes>
<Route index element={<UserList />} />
<Route path=":userId" element={<UserDetailPage />} />
</Routes>
);
};
export default UserManagement;
|