Alteração no modal do chat

frontend/src/components/Report/Modal/index.js

@@ -6,75 +6,46 @@ import DialogActions from '@mui/material/DialogActions';
 import DataGridTable from '../Table';
 import MTable from "../MTable";   
 
-//let columns = [{ title: 'Chat', field: 'messages.body' },];
-
-// { title: 'Atendente', field: 'user.name' },
-
-const columns = [
-  { field: 'id', 
-  title: 'ID', 
-  width: 50, 
-  sortable: false},
+let columns = [
   { 
-    field: 'fromMe',
-    title: 'user/client',
-    type: 'bool',
-    width: 100,  
-    flex: 1, 
-    editable: false,
-    sortable: false
-  },
-  { 
-    field: 'body',
-    title: 'message',
-    type: 'string',
-    //width: 150,
-    flex: 1, 
-    editable: false,
-    sortable: false
-
+    title: 'Atendente/Cliente', 
+    field: 'fromMe', 
   },
   
- /* {
-    field: 'mediaType',
-    headerName: 'media type', 
-    //width: 110,
-    flex: 1,
-    editable: false,
-  }, 
   {
-    field: 'mediaUrl',
-    headerName: 'media url', 
-    type: 'string',
-    //width: 110,
-    flex: 1,
-    editable: false,
-  }, 
-  {
-    field: 'read',
-    headerName: 'tead',
-    type: 'bool',
-    //width: 110,
-    flex: 1,
-    editable: false,
-  },*/
-  {
-    field: 'createdAt',
-    title: 'created at',
-    type: 'dateTime', 
-    //width: 110,
-    flex: 1,
-    editable: false, 
-    sortable: false
-  }
+    title: 'Mensagem', 
+    field: 'body', 
+    cellStyle: {whiteSpace: 'nowrap'},
+  },
+
+  { title: 'Criado', field: 'createdAt' }
+
+  /*cellStyle: {
+    backgroundColor: '#039be5',
+    color: '#FFF'
+  },
+  headerStyle: {
+    backgroundColor: '#039be5',
+    fontSize: 12
+  }*/
+
+]
+
   
-];
+ 
 
 const Modal = (props) => {
   const [open, setOpen] = React.useState(true);
   const [scroll, setScroll] = React.useState('paper');
 
- 
+  const dataChat = props.data.map((dt) => { 
+    return {
+      'fromMe': dt.fromMe  ? 'Atendente' : 'Cliente', 
+      'body': dt.body,
+      'createdAt': dt.createdAt
+    }
+  }); 
+   
   const handleClose = () => {
     setOpen(false);
   };
@@ -104,7 +75,7 @@ const Modal = (props) => {
         aria-describedby="scroll-dialog-description"
       > 
 
-        <MTable data={props.data} columns={columns} />  
+        <MTable data={dataChat} columns={columns} />  
         
         <DialogActions>
           <Button onClick={handleClose}>Ok</Button>