67 lines
1.5 KiB
JavaScript
67 lines
1.5 KiB
JavaScript
import Box from '@mui/material/Box';
|
|
|
|
const row = {
|
|
display: 'flex',
|
|
flexDirection: 'row',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'center',
|
|
};
|
|
|
|
const labelColumn = {
|
|
fontWeight: 'bold',
|
|
width: '25%',
|
|
};
|
|
|
|
const valueColumn = {
|
|
width: '75%',
|
|
};
|
|
|
|
const cardTitle = {
|
|
fontWeight: 'bold',
|
|
fontSize: '1.2rem',
|
|
display: 'flex',
|
|
flexDirection: 'row',
|
|
justifyContent: 'center',
|
|
};
|
|
|
|
export default function AdminQueueItemCard({ queue_data }) {
|
|
return (
|
|
<Box
|
|
sx={{
|
|
width: '100%',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
alignItems: 'center',
|
|
margin: '1rem 0',
|
|
}}
|
|
>
|
|
<Box
|
|
sx={{
|
|
width: '90vw',
|
|
border: '1px solid gray',
|
|
borderRadius: '1rem',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
padding: '1rem',
|
|
}}
|
|
>
|
|
<Box sx={cardTitle}>{`non-urgent-case ${queue_data.id}`}</Box>
|
|
<Box sx={{ display: 'flex', flexDirection: 'column', padding: '1rem 1rem' }}>
|
|
<Box sx={row}>
|
|
<Box sx={labelColumn}>Name</Box>
|
|
<Box sx={valueColumn}>{queue_data.name || ''}</Box>
|
|
</Box>
|
|
<Box sx={row}>
|
|
<Box sx={labelColumn}>HKID</Box>
|
|
<Box sx={valueColumn}>{queue_data.hkid || '-'}</Box>
|
|
</Box>
|
|
<Box sx={row}>
|
|
<Box sx={labelColumn}>Mobile</Box>
|
|
<Box sx={valueColumn}>{queue_data.mobile || '-'}</Box>
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
}
|