Criação completa do relatório
adriano
parent
66da6a9d59
commit
bad6f67c7b
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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,6 +69,8 @@ const Modal = (props) => {
|
|||
}, [open]);
|
||||
|
||||
return (
|
||||
|
||||
|
||||
<div>
|
||||
|
||||
<Dialog
|
||||
|
|
@ -94,10 +99,17 @@ const Modal = (props) => {
|
|||
|
||||
|
||||
<DialogActions>
|
||||
<div style={{marginRight:'50px'}}>
|
||||
<ExportCSV user={props.user}
|
||||
clientContactNumber={props.clientContactNumber}
|
||||
data={dataChat}
|
||||
columns={columns}/>
|
||||
</div>
|
||||
<Button onClick={handleClose}>Ok</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
</div>
|
||||
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -15,11 +15,19 @@ const SelectTextFields = (props) => {
|
|||
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' },}}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue