Criação completa do relatório

frontend/package.json

@@ -27,6 +27,7 @@
     "qrcode.react": "^1.0.0",
     "react": "^17.0.2",
     "react-color": "^2.19.3",
+    "react-csv": "^2.2.2",
     "react-dom": "^17.0.2",
     "react-modal-image": "^2.5.0",
     "react-router-dom": "^5.2.0",

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

@@ -12,6 +12,8 @@ import {
   MuiPickersUtilsProvider,
 } from '@material-ui/pickers';
 
+import ptBrLocale from "date-fns/locale/pt-BR";
+
   
 function formatDateDatePicker(data){
   return String(new Date(data).getFullYear())+'-'+
@@ -27,7 +29,7 @@ function ResponsiveDatePickers(props) {
   return ( 
 
     <Fragment> 
-      <MuiPickersUtilsProvider utils={DateFnsUtils}>
+      <MuiPickersUtilsProvider utils={DateFnsUtils} locale={ptBrLocale}>
         <KeyboardDatePicker
           autoOk
           variant="inline"

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

@@ -0,0 +1,64 @@
+ 
+import React, { useState, useEffect, useRef} from "react";  
+import { CSVLink } from "react-csv";
+import Button from '@mui/material/Button'; 
+
+/*const headers = [
+    { label: "First Name", key: "firstname" },
+    { label: "Last Name", key: "lastname" },
+    { label: "Email", key: "email" }
+  ];
+  
+const data = [
+    { firstname: "Ahmed", lastname: "Tomi", email: "ah@smthing.co.com" },
+    { firstname: "Raed", lastname: "Labes", email: "rl@smthing.co.com" },
+    { firstname: "Yezzi", lastname: "Min l3b", email: "ymin@cocococo.com" }
+  ];*/
+ 
+ 
+
+const ExportCSV = (props) => { 
+
+    const [header, setHeader] = useState([])
+    const [dataRow, setDataRow] = useState([])
+
+    const csvLink = useRef() 
+
+    let headerFormat = JSON.parse(JSON.stringify(props.columns).split('"field":').join('"key":'))
+    headerFormat =  JSON.parse(JSON.stringify(headerFormat).split('"title":').join('"label":')) 
+    
+    //const dataRows = props.data.map((row) => { return { ...row }}); 
+
+    // const dataRows = props.data.map((obj)=>{
+    //     return {'fromMe': obj.fromMe, 'body': obj.body.replace(/ /g,''), 'createdAt': obj.createdAt}
+    // })
+
+    //console.log('******************************* dataRows: ',dataRows)
+
+    useEffect(()=>{
+        setHeader(headerFormat) 
+        setDataRow(props.data)
+    },[])
+
+    const getTransactionData = async () => { 
+
+        csvLink.current.link.click()
+        
+      }
+ 
+    return (   
+        <div> 
+            <Button onClick={getTransactionData}>EXPORT CSV</Button>
+            <CSVLink
+            headers={header}
+            data={dataRow} 
+            filename=  {props.user+'_'+props.clientContactNumber+'.csv'} 
+            target={'_blank'}
+            className='hidden'
+            ref={csvLink}  
+            />
+        </div>  
+    );
+}
+
+export default ExportCSV

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

@@ -38,7 +38,11 @@ const MTable = (props) => {
                   setSelectedRow(selectedRow.tableData.id)  
 
                   if(props.hasChild) { 
-                    render(<Modal data={selectedRow.messages} hasChild={false} modal_header={'Chat do atendimento pelo Whatsapp'}/>)  
+                    render(<Modal data={selectedRow.messages} 
+                      hasChild={false} 
+                      modal_header={'Chat do atendimento pelo Whatsapp'}
+                      user={selectedRow.user.name}
+                      clientContactNumber={selectedRow.contact.number}/>)  
                   }
                   
                   console.log('props.hasChild: ', props.hasChild)

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

@@ -10,6 +10,9 @@ import DialogTitle from '@mui/material/DialogTitle';
 import DataGridTable from '../Table';
 import MTable from "../MTable";   
 
+import ExportCSV from '../ExportCSV'
+import { margin } from '@mui/system';
+
 let columns = [
   { 
     title: 'Atendente/Cliente', 
@@ -66,7 +69,9 @@ const Modal = (props) => {
   }, [open]);
 
   return (
-    <div>
+ 
+
+    <div> 
       
       <Dialog 
         open={open}
@@ -93,11 +98,18 @@ const Modal = (props) => {
         </DialogContent>
         
  
-        <DialogActions>
+        <DialogActions>     
-          <Button onClick={handleClose}>Ok</Button> 
+          <div style={{marginRight:'50px'}}>
+            <ExportCSV user={props.user} 
+            clientContactNumber={props.clientContactNumber}
+            data={dataChat} 
+            columns={columns}/> 
+          </div>
+          <Button onClick={handleClose}>Ok</Button>  
         </DialogActions>
       </Dialog>
-    </div>
+    </div> 
+
   );
 }
 

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

@@ -14,26 +14,34 @@ const SelectTextFields = (props) => {
   const handleChange = (event) => {
     setCurrency(event.target.value);
   };
+ 
+  
 
   return ( 
 
     <Box  
         component="form"
         sx={{
+          "&:hover": {
+            "&& fieldset": {
+              border: "1px solid black"
+            }
+          },
+          
             display: 'flex',
             flexDirection: 'column',
             '& .MuiTextField-root': { m: 1, width: '30ch' },}}
         noValidate
         autoComplete="off"
     >
-        <TextField 
+        <TextField  
           id="outlined-select-currency-native"
           margin="dense"
           size="small"
           select
           label="Usuário"
           value={currency}
-          onChange={handleChange}
+          onChange={handleChange} 
           SelectProps={{
             native: true,
           }}

frontend/src/pages/Report/index.js

@@ -287,7 +287,7 @@ console.log('XXXXXXXXX: ', query)
             <Item><DatePicker2 func={datePicker2Value} title={'Data fim'}/></Item>
             
             <Item sx={{ gridColumn: '4 / 5' }}>
-              <Button size="small" variant="contained" onClick={()=>{handleQuery()}}>GO</Button>
+             {/* <Button size="small" variant="contained" onClick={()=>{handleQuery()}}>GO</Button>*/}
             </Item> 
             
           </Box>
@@ -296,7 +296,12 @@ console.log('XXXXXXXXX: ', query)
               display: 'grid',  
             }}>
             <Item  sx={{ gridColumn: '1', gridRow: 'span 1' }}> 
-              <MTable data={query} columns={columnsData} hasChild={true} table_title={'Relatório de atendimento por atendentes'}/> 
+              
+              <MTable data={query} 
+              columns={columnsData} 
+              hasChild={true} 
+              table_title={'Relatório de atendimento por atendentes'}/> 
+
             </Item> 
           </Box>