Criação completa do relatório

pull/1/head
adriano 2022-01-26 20:56:57 -03:00
parent 66da6a9d59
commit bad6f67c7b
7 changed files with 106 additions and 10 deletions

View File

@ -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",

View File

@ -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"

View File

@ -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

View File

@ -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)

View File

@ -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>
);
}

View File

@ -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' },}}

View File

@ -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>