feat: Implement querying of synthetic and analytical reports on tickets

feat-scaling-ticket-remote-creation
adriano 2024-03-13 18:16:56 -03:00
parent 5366f9943b
commit 5bcfc1bdcc
3 changed files with 171 additions and 16 deletions

View File

@ -40,8 +40,7 @@ const ShowTicketReport = async ({
createdOrUpdated = "created",
queueId
}: Request): Promise<Response> => {
let where_clause: any = {};
// let where_clause_msg: any = {};
let where_clause: any = {};
if (userId !== "0") {
where_clause.userid = userId;
@ -71,7 +70,7 @@ const ShowTicketReport = async ({
if (queueId) {
where_clause.queueId = queueId;
}
}
const limit = 40;
const offset = limit * (+pageNumber - 1);
@ -108,7 +107,7 @@ const ShowTicketReport = async ({
model: Message,
required: true,
separate: true,
where: where_clause_msg ,
// where: where_clause_msg ,
attributes: [
"body",
@ -151,7 +150,7 @@ const ShowTicketReport = async ({
if (!tickets) {
throw new AppError("ERR_NO_TICKET_FOUND", 404);
}
}
return { tickets, count, hasMore };
};

View File

@ -0,0 +1,135 @@
import React, { useState, useEffect } from "react"
import Box from '@mui/material/Box'
import Button from '@mui/material/Button'
import Dialog from '@mui/material/Dialog'
import DialogActions from '@mui/material/DialogActions'
import DialogContent from '@mui/material/DialogContent'
import DialogContentText from '@mui/material/DialogContentText'
import DialogTitle from '@mui/material/DialogTitle'
import FormControl from '@mui/material/FormControl'
import InputLabel from '@mui/material/InputLabel'
import MenuItem from '@mui/material/MenuItem'
import Select from '@mui/material/Select'
export default function MaxWidthDialog(props) {
const [open, setOpen] = useState(false)
const [fullWidth,] = useState(true)
const [currency, setCurrency] = useState(props.reportOption)
const [textOption, setTextOption] = useState('')
useEffect(() => {
// props.func(currency)
if(currency === '2' || currency === '3'){
setTextOption('Retorna apenas tickets com status: fechado')
}
else{
setTextOption('Retorna todos os tickets com status: aberto, fechado, pendente')
}
}, [currency, props])
const handleClickOpen = () => {
setOpen(true)
}
const handleClose = () => {
props.func(currency)
setOpen(false)
}
const handleMaxWidthChange = (event) => {
setCurrency(event.target.value)
}
return (
<React.Fragment>
<Button variant="outlined" onClick={handleClickOpen}>
CSV ALL
</Button>
<Dialog
fullWidth={fullWidth}
maxWidth={'sm'}
open={open}
onClose={null}
>
<DialogTitle>Relatórios</DialogTitle>
<DialogContent>
<DialogContentText>
Escolha uma opção do tipo de relatório abaixo
</DialogContentText>
<Box
noValidate
component="form"
sx={{
display: 'flex',
flexDirection: 'column',
m: 'auto',
width: 'fit-content',
}}
>
<FormControl sx={{ mt: 2, minWidth: 420 }}>
<InputLabel htmlFor="opcoes">opcoes</InputLabel>
<Select
autoFocus
value={currency}
onChange={handleMaxWidthChange}
label="opcoes"
inputProps={{
name: 'opcoes',
id: 'opcoes',
}}
>
{props.currencies.map((option, index) => (
<MenuItem key={index} value={option.value}> {option.label} </MenuItem>
))}
</Select>
</FormControl>
{/* <FormControlLabel
sx={{ mt: 1 }}
control={
<Switch checked={fullWidth} onChange={handleFullWidthChange} />
}
label="Full width"
/> */}
</Box>
</DialogContent>
<div style={{ display: 'flex', justifyContent: "center" }}>{textOption}</div>
<div style={{ display: 'flex', justifyContent: "right" }}>
<DialogActions>
<Button onClick={() => setOpen(false)}>Cancelar</Button>
</DialogActions>
<DialogActions>
<Button onClick={handleClose}>Ok</Button>
</DialogActions>
</div>
</Dialog>
</React.Fragment>
)
}

View File

@ -1,4 +1,4 @@
import React, { useState, useEffect, useReducer, useContext } from "react"
import React, { useState, useEffect, useReducer, useContext, useCallback } from "react"
import MainContainer from "../../components/MainContainer"
import api from "../../services/api"
import SelectField from "../../components/Report/SelectField"
@ -17,6 +17,8 @@ import Checkbox from '@mui/material/Checkbox'
import { Button } from "@material-ui/core"
import ReportModal from "../../components/ReportModal"
import ReportModalType from "../../components/ReportModalType"
import MaterialTable from 'material-table'
import LogoutIcon from '@material-ui/icons/CancelOutlined'
@ -34,6 +36,9 @@ import Switch from '@mui/material/Switch'
const label = { inputProps: { 'aria-label': 'Size switch demo' } }
const report = [{ 'value': '1', 'label': 'Atendimento por atendentes' }, { 'value': '2', 'label': 'Usuários online/offline' }]
const reportOptType = [{ 'value': '1', 'label': 'Padrão' }, { 'value': '2', 'label': 'Sintético' }, { 'value': '3', 'label': 'Analítico' }]
const reducerQ = (state, action) => {
@ -276,21 +281,16 @@ const Report = () => {
const [hasMore, setHasMore] = useState(false)
const [pageNumberTickets, setTicketsPageNumber] = useState(1)
const [totalCountTickets, setTotalCountTickets] = useState(0)
const [pageNumber, setPageNumber] = useState(1)
const [users, dispatch] = useReducer(reducer, [])
const [startDate, setDatePicker1] = useState(new Date())
const [endDate, setDatePicker2] = useState(new Date())
const [userId, setUser] = useState(null)
const [query, dispatchQ] = useReducer(reducerQ, [])
const [reportOption, setReport] = useState('1')
const [reporList,] = useState(report)
const [profile, setProfile] = useState('')
const [dataRows, setData] = useState([])
const [onQueueStatus, setOnQueueProcessStatus] = useState(undefined)
const [csvFile, setCsvFile] = useState()
const [selectedValue, setSelectedValue] = useState('created')
@ -298,6 +298,9 @@ const Report = () => {
const [queues, setQueues] = useState([])
const [queueId, setQueue] = useState(null)
const [reportTypeList,] = useState(reportOptType)
const [reportType, setReportType] = useState('1')
useEffect(() => {
dispatch({ type: "RESET" })
dispatchQ({ type: "RESET" })
@ -424,8 +427,21 @@ const Report = () => {
setChecked(true)
}
setReport(data)
}
}
// Get from report type option
const reportTypeValue = (data) => {
console.log('DATA: ', data)
let type = '1'
if (data === '1') type = 'default'
if (data === '2') type = 'synthetic'
if (data === '3') type = 'analytic'
handleCSVMessages(type)
setReportType(data)
}
useEffect(() => {
if (reportOption === '1') {
@ -500,7 +516,7 @@ const Report = () => {
const handleCSVMessages = () => {
const handleCSVMessages = (type = 'default') => {
const fetchQueries = async () => {
@ -519,7 +535,8 @@ const Report = () => {
userId: userId,
startDate: startDate,
endDate: endDate
}
},
query_type: type
})
const onQueueStatus = querySavedOnQueue.data.queueStatus
@ -639,7 +656,10 @@ const Report = () => {
case 'empty':
return (
<>
<Button
{query && query.length > 0 &&
<ReportModalType currencies={reportTypeList} func={reportTypeValue} reportOption={reportType} />
}
{/* <Button
disabled={query && query.length > 0 ? false : true}
variant="contained"
color="primary"
@ -648,7 +668,8 @@ const Report = () => {
}}
>
{"CSV ALL"}
</Button>
</Button> */}
</>)
case 'pending' || 'processing':