|  |  | 
 |  |  |     const translate = useTranslate(); | 
 |  |  |     const theme = useTheme(); | 
 |  |  |     const [isHover, setHover] = useState(false); | 
 |  |  |     // console.log(data); | 
 |  |  |  | 
 |  |  |     return ( | 
 |  |  |         <Box | 
 |  |  | 
 |  |  |                     variant="body2" | 
 |  |  |                     color="textSecondary" | 
 |  |  |                 > | 
 |  |  |                     task: {data.taskId$ || '-'} | 
 |  |  |                     {translate('table.field.action.taskId')}: {data.taskId$ || '-'} | 
 |  |  |                 </Typography> | 
 |  |  |                 <Divider orientation="vertical" flexItem sx={{ marginX: 1 }} /> | 
 |  |  |                 <Typography | 
 |  |  |                     variant="body2" | 
 |  |  |                     color="textSecondary" | 
 |  |  |                 > | 
 |  |  |                     code: {data.code || '-'} | 
 |  |  |                     {translate('table.field.action.code')}: {data.code || '-'} | 
 |  |  |                 </Typography> | 
 |  |  |                 <Divider orientation="vertical" flexItem sx={{ marginX: 1 }} /> | 
 |  |  |                 <Typography | 
 |  |  |                     variant="body2" | 
 |  |  |                     color="textSecondary" | 
 |  |  |                 > | 
 |  |  |                     val: {data.val || '-'} | 
 |  |  |                     {translate('table.field.action.val')}: {data.val || '-'} | 
 |  |  |                 </Typography> | 
 |  |  |                 <Divider orientation="vertical" flexItem sx={{ marginX: 1 }} /> | 
 |  |  |                 <Typography | 
 |  |  |                     variant="body2" | 
 |  |  |                     color="textSecondary" | 
 |  |  |                 > | 
 |  |  |                     param: {data.param || '-'} | 
 |  |  |                     {translate('table.field.action.params')}: {data.param || '-'} | 
 |  |  |                 </Typography> | 
 |  |  |             </Stack> | 
 |  |  |         </Box> |