| import * as React from 'react'; | 
| import { Stack, Chip } from '@mui/material'; | 
| import { useTranslate, useRecordContext } from 'react-admin'; | 
|   | 
| const RolesField = () => { | 
|     const translate = useTranslate(); | 
|     const record = useRecordContext(); | 
|   | 
|     React.useEffect(() => { | 
|   | 
|     }, [record]); | 
|   | 
|     return ( | 
|         <Stack direction="row" gap={1} flexWrap="wrap"> | 
|             {record.roles?.map((item, idx) => { | 
|                 if (item) { | 
|                     return <Chip | 
|                         size="small" | 
|                         key={item.id} | 
|                         label={item.name} | 
|                     />; | 
|                 } | 
|             })} | 
|         </Stack> | 
|     ) | 
| } | 
|   | 
| export default RolesField; |