feat: Implement querying of synthetic and analytical reports on tickets

backend/src/services/TicketServices/ShowTicketReport.ts

@@ -41,7 +41,6 @@ const ShowTicketReport = async ({
   queueId
 }: Request): Promise<Response> => {
   let where_clause: any = {}; 
-  // let where_clause_msg: any = {};
 
   if (userId !== "0") {
     where_clause.userid = userId;
@@ -108,7 +107,7 @@ const ShowTicketReport = async ({
         model: Message,
         required: true,
         separate: true,
-        where: where_clause_msg ,
+        // where: where_clause_msg ,
 
         attributes: [
           "body",

frontend/src/components/ReportModalType/index.js

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

frontend/src/pages/Report/index.js

@@ -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" })
@@ -426,6 +429,19 @@ const Report = () => {
     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':