Correção de conflito no merge
adriano
commit
eed20d904a
|
|
@ -5,7 +5,13 @@ import AppError from "../errors/AppError";
|
||||||
import ShowTicketReport from "../services/TicketServices/ShowTicketReport";
|
import ShowTicketReport from "../services/TicketServices/ShowTicketReport";
|
||||||
|
|
||||||
|
|
||||||
export const reportUser = async (req: Request, res: Response): Promise<Response> => {
|
type IndexQuery = {
|
||||||
|
userId: string;
|
||||||
|
startDate: string;
|
||||||
|
endDate: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
/*export const reportUser = async (req: Request, res: Response): Promise<Response> => {
|
||||||
|
|
||||||
const { userId } = req.params;
|
const { userId } = req.params;
|
||||||
|
|
||||||
|
|
@ -15,6 +21,22 @@ export const reportUser = async (req: Request, res: Response): Promise<Response>
|
||||||
|
|
||||||
return res.status(200).json(test);
|
return res.status(200).json(test);
|
||||||
|
|
||||||
|
};*/
|
||||||
|
|
||||||
|
|
||||||
|
export const reportUserByDateStartDateEnd = async (req: Request, res: Response): Promise<Response> => {
|
||||||
|
|
||||||
|
const { userId, startDate, endDate } = req.query as IndexQuery
|
||||||
|
|
||||||
|
console.log('******* Estrou no report')
|
||||||
|
console.log('******* userId: ', userId)
|
||||||
|
console.log('******* startDate: ', startDate)
|
||||||
|
console.log('******* endDate: ', endDate)
|
||||||
|
|
||||||
|
const data_query = await ShowTicketReport(userId, startDate, endDate);
|
||||||
|
|
||||||
|
return res.status(200).json(data_query);
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
/*export const reportAll = async (req: Request, res: Response): Promise<Response> => {
|
/*export const reportAll = async (req: Request, res: Response): Promise<Response> => {
|
||||||
|
|
|
||||||
|
|
@ -7,7 +7,9 @@ import * as ReportController from "../controllers/ReportController";
|
||||||
|
|
||||||
const reportRoutes = express.Router();
|
const reportRoutes = express.Router();
|
||||||
|
|
||||||
reportRoutes.get("/reports/:userId", /*isAuth,*/ ReportController.reportUser);
|
//reportRoutes.get("/reports/:userId", /*isAuth,*/ ReportController.reportUser);
|
||||||
|
|
||||||
|
reportRoutes.get("/reports", /*isAuth,*/ ReportController.reportUserByDateStartDateEnd);
|
||||||
|
|
||||||
//reportRoutes.get("/reports", /*isAuth,*/ ReportController.reportAll);
|
//reportRoutes.get("/reports", /*isAuth,*/ ReportController.reportAll);
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -7,7 +7,62 @@ import Queue from "../../models/Queue";
|
||||||
import Message from "../../models/Message";
|
import Message from "../../models/Message";
|
||||||
import { userInfo } from "os";
|
import { userInfo } from "os";
|
||||||
|
|
||||||
//Report by user
|
import { Op } from "sequelize";
|
||||||
|
|
||||||
|
import { Sequelize } from "sequelize";
|
||||||
|
import moment from 'moment';
|
||||||
|
|
||||||
|
import { startOfDay, endOfDay, parseISO, getDate} from "date-fns";
|
||||||
|
|
||||||
|
//Report by user, startDate, endDate
|
||||||
|
const ShowTicketReport = async (id: string | number, startDate: string, endDate: string): Promise<Ticket[]> => {
|
||||||
|
|
||||||
|
const ticket = await Ticket.findAll({
|
||||||
|
where: {
|
||||||
|
userid: id,
|
||||||
|
//createdAt: {
|
||||||
|
// [Op.between]: [+new Date('2022-01-24').toISOString(), +new Date().toISOString()]
|
||||||
|
//},
|
||||||
|
createdAt: {
|
||||||
|
[Op.gte]: startDate+' 00:00:00.000000',
|
||||||
|
[Op.lte]: endDate +' 23:59:59.999999'
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
attributes: ['id', 'status', 'createdAt', 'updatedAt'],
|
||||||
|
include: [
|
||||||
|
{
|
||||||
|
model: Message,
|
||||||
|
required:true,
|
||||||
|
separate: true,
|
||||||
|
attributes: ['body', 'read', 'mediaType','fromMe', 'mediaUrl','createdAt'],
|
||||||
|
order: [
|
||||||
|
['createdAt', 'ASC']
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
model: Contact,
|
||||||
|
attributes: ['name', 'number']
|
||||||
|
},
|
||||||
|
{
|
||||||
|
model: User,
|
||||||
|
attributes: ['name', 'email']
|
||||||
|
},
|
||||||
|
{
|
||||||
|
model: Queue,
|
||||||
|
attributes: ['name']
|
||||||
|
},
|
||||||
|
|
||||||
|
],
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/*//Report by user
|
||||||
const ShowTicketReport = async (id: string | number): Promise<Ticket[]> => {
|
const ShowTicketReport = async (id: string | number): Promise<Ticket[]> => {
|
||||||
|
|
||||||
const ticket = await Ticket.findAll({
|
const ticket = await Ticket.findAll({
|
||||||
|
|
@ -38,45 +93,8 @@ const ShowTicketReport = async (id: string | number): Promise<Ticket[]> => {
|
||||||
|
|
||||||
],
|
],
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/*const ticket = await Message.findAll({
|
|
||||||
//raw: true,
|
|
||||||
where:{''},
|
|
||||||
attributes: ['body', 'createdAt', 'ticketId'],
|
|
||||||
include: [
|
|
||||||
{
|
|
||||||
model: Ticket,
|
|
||||||
attributes: ['contactid', 'userid', 'queueid', 'status'],
|
|
||||||
include:[
|
|
||||||
{
|
|
||||||
model: Contact,
|
|
||||||
attributes: ['name', 'number']
|
|
||||||
},
|
|
||||||
{
|
|
||||||
model: User,
|
|
||||||
attributes: ['name', 'email']
|
|
||||||
},
|
|
||||||
{
|
|
||||||
model: Queue,
|
|
||||||
attributes: ['name']
|
|
||||||
}
|
|
||||||
],
|
|
||||||
},
|
|
||||||
|
|
||||||
],
|
|
||||||
order:
|
|
||||||
['ticketId', 'createdAt']
|
|
||||||
|
|
||||||
}); */
|
}); */
|
||||||
|
|
||||||
|
|
||||||
if (!ticket) {
|
if (!ticket) {
|
||||||
throw new AppError("ERR_NO_TICKET_FOUND", 404);
|
throw new AppError("ERR_NO_TICKET_FOUND", 404);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -143,7 +143,6 @@ const verifyQueue = async (
|
||||||
|
|
||||||
const { queues, greetingMessage } = await ShowWhatsAppService(wbot.id!);
|
const { queues, greetingMessage } = await ShowWhatsAppService(wbot.id!);
|
||||||
|
|
||||||
//ativar esse
|
|
||||||
/*if (queues.length === 1) {
|
/*if (queues.length === 1) {
|
||||||
await UpdateTicketService({
|
await UpdateTicketService({
|
||||||
ticketData: { queueId: queues[0].id },
|
ticketData: { queueId: queues[0].id },
|
||||||
|
|
@ -152,16 +151,10 @@ const verifyQueue = async (
|
||||||
return;
|
return;
|
||||||
}*/
|
}*/
|
||||||
|
|
||||||
console.log('queues.lengthqueues.lengthqueues.lengthqueues.lengthqueues.length: ',queues.length)
|
let selectedOption = null;
|
||||||
|
let choosenQueue = null
|
||||||
|
|
||||||
//const selectedOption = msg.body;
|
if (queues.length === 1) {
|
||||||
//const choosenQueue = queues[+selectedOption - 1];
|
|
||||||
|
|
||||||
let selectedOption;
|
|
||||||
let choosenQueue;
|
|
||||||
|
|
||||||
//thuanny
|
|
||||||
if (queues.length === 1){
|
|
||||||
selectedOption = 1;
|
selectedOption = 1;
|
||||||
choosenQueue = queues[+selectedOption - 1];
|
choosenQueue = queues[+selectedOption - 1];
|
||||||
}
|
}
|
||||||
|
|
@ -170,6 +163,9 @@ const verifyQueue = async (
|
||||||
choosenQueue = queues[+selectedOption - 1];
|
choosenQueue = queues[+selectedOption - 1];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// const selectedOption = msg.body;
|
||||||
|
// const choosenQueue = queues[+selectedOption - 1];
|
||||||
|
|
||||||
|
|
||||||
if (choosenQueue) {
|
if (choosenQueue) {
|
||||||
await UpdateTicketService({
|
await UpdateTicketService({
|
||||||
|
|
|
||||||
|
|
@ -3,24 +3,31 @@
|
||||||
"version": "0.1.0",
|
"version": "0.1.0",
|
||||||
"private": true,
|
"private": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@date-io/date-fns": "^1.3.13",
|
||||||
|
"@emotion/react": "^11.7.1",
|
||||||
|
"@emotion/styled": "^11.6.0",
|
||||||
"@material-ui/core": "^4.11.0",
|
"@material-ui/core": "^4.11.0",
|
||||||
"@material-ui/icons": "^4.9.1",
|
"@material-ui/icons": "^4.9.1",
|
||||||
"@material-ui/lab": "^4.0.0-alpha.56",
|
"@material-ui/lab": "^4.0.0-alpha.56",
|
||||||
|
"@material-ui/pickers": "^3.3.10",
|
||||||
|
"@mui/material": "^5.3.0",
|
||||||
|
"@mui/x-data-grid": "^5.3.0",
|
||||||
"@testing-library/jest-dom": "^5.11.4",
|
"@testing-library/jest-dom": "^5.11.4",
|
||||||
"@testing-library/react": "^11.0.4",
|
"@testing-library/react": "^11.0.4",
|
||||||
"@testing-library/user-event": "^12.1.7",
|
"@testing-library/user-event": "^12.1.7",
|
||||||
"axios": "^0.21.1",
|
"axios": "^0.21.1",
|
||||||
"date-fns": "^2.16.1",
|
"date-fns": "^2.28.0",
|
||||||
"emoji-mart": "^3.0.1",
|
"emoji-mart": "^3.0.1",
|
||||||
"formik": "^2.2.0",
|
"formik": "^2.2.0",
|
||||||
"i18next": "^19.8.2",
|
"i18next": "^19.8.2",
|
||||||
"i18next-browser-languagedetector": "^6.0.1",
|
"i18next-browser-languagedetector": "^6.0.1",
|
||||||
"markdown-to-jsx": "^7.1.0",
|
"markdown-to-jsx": "^7.1.0",
|
||||||
|
"material-table": "^1.69.3",
|
||||||
"mic-recorder-to-mp3": "^2.2.2",
|
"mic-recorder-to-mp3": "^2.2.2",
|
||||||
"qrcode.react": "^1.0.0",
|
"qrcode.react": "^1.0.0",
|
||||||
"react": "^16.13.1",
|
"react": "^17.0.2",
|
||||||
"react-color": "^2.19.3",
|
"react-color": "^2.19.3",
|
||||||
"react-dom": "^16.13.1",
|
"react-dom": "^17.0.2",
|
||||||
"react-modal-image": "^2.5.0",
|
"react-modal-image": "^2.5.0",
|
||||||
"react-router-dom": "^5.2.0",
|
"react-router-dom": "^5.2.0",
|
||||||
"react-scripts": "3.4.3",
|
"react-scripts": "3.4.3",
|
||||||
|
|
@ -50,6 +57,5 @@
|
||||||
"last 1 firefox version",
|
"last 1 firefox version",
|
||||||
"last 1 safari version"
|
"last 1 safari version"
|
||||||
]
|
]
|
||||||
},
|
}
|
||||||
"devDependencies": {}
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -15,6 +15,9 @@
|
||||||
<link rel="shortcut icon" href="http://www.hittelco.com/images/favicon.png" />
|
<link rel="shortcut icon" href="http://www.hittelco.com/images/favicon.png" />
|
||||||
|
|
||||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"/>
|
||||||
|
|
||||||
<meta name="theme-color" content="#000000" />
|
<meta name="theme-color" content="#000000" />
|
||||||
<meta
|
<meta
|
||||||
name="viewport"
|
name="viewport"
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,81 @@
|
||||||
|
|
||||||
|
|
||||||
|
import React, { Fragment, useState } from "react";
|
||||||
|
|
||||||
|
|
||||||
|
import DateFnsUtils from '@date-io/date-fns'; // choose your lib
|
||||||
|
import {
|
||||||
|
KeyboardDatePicker,
|
||||||
|
DatePicker,
|
||||||
|
TimePicker,
|
||||||
|
DateTimePicker,
|
||||||
|
MuiPickersUtilsProvider,
|
||||||
|
} from '@material-ui/pickers';
|
||||||
|
|
||||||
|
|
||||||
|
function formatDateDatePicker(data){
|
||||||
|
return String(new Date(data).getFullYear())+'-'+
|
||||||
|
String(new Date(data).getMonth() + 1).padStart(2,'0')+'-'+
|
||||||
|
String(new Date(data).getDate()).padStart(2,'0')
|
||||||
|
}
|
||||||
|
|
||||||
|
function ResponsiveDatePickers(props) {
|
||||||
|
const [selectedDate, handleDateChange] = useState(new Date());
|
||||||
|
|
||||||
|
props.func(formatDateDatePicker(selectedDate));
|
||||||
|
|
||||||
|
return (
|
||||||
|
|
||||||
|
<Fragment>
|
||||||
|
<MuiPickersUtilsProvider utils={DateFnsUtils}>
|
||||||
|
<KeyboardDatePicker
|
||||||
|
autoOk
|
||||||
|
variant="inline"
|
||||||
|
inputVariant="outlined"
|
||||||
|
label={props.title}
|
||||||
|
//format="MM/dd/yyyy"
|
||||||
|
format="dd/MM/yyyy"
|
||||||
|
value={selectedDate}
|
||||||
|
InputAdornmentProps={{ position: "start" }}
|
||||||
|
onChange={date => handleDateChange(date)}
|
||||||
|
/>
|
||||||
|
</MuiPickersUtilsProvider>
|
||||||
|
</Fragment>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ResponsiveDatePickers;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/*import * as React from 'react';
|
||||||
|
import TextField from '@mui/material/TextField';
|
||||||
|
import AdapterDateFns from '@mui/lab/AdapterDateFns';
|
||||||
|
import LocalizationProvider from '@mui/lab/LocalizationProvider';
|
||||||
|
import DesktopDatePicker from '@mui/lab/DesktopDatePicker';
|
||||||
|
import Stack from '@mui/material/Stack';
|
||||||
|
|
||||||
|
const ResponsiveDatePickers = (props) => {
|
||||||
|
|
||||||
|
const [value, setValue] = React.useState(new Date());
|
||||||
|
|
||||||
|
props.func(value);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<LocalizationProvider dateAdapter={AdapterDateFns}>
|
||||||
|
<Stack spacing={1}>
|
||||||
|
<DesktopDatePicker
|
||||||
|
label={props.title}
|
||||||
|
|
||||||
|
value={value}
|
||||||
|
minDate={new Date('2017-01-01')}
|
||||||
|
onChange={(newValue) => {setValue(newValue)}}
|
||||||
|
renderInput={(params) => <TextField {...params} />}
|
||||||
|
/>
|
||||||
|
</Stack>
|
||||||
|
</LocalizationProvider>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ResponsiveDatePickers*/
|
||||||
|
|
@ -0,0 +1,206 @@
|
||||||
|
import { gridDateTimeFormatter } from "@mui/x-data-grid";
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
export const data = [
|
||||||
|
|
||||||
|
{
|
||||||
|
"id": 210,
|
||||||
|
"status": "closed",
|
||||||
|
"createdAt": "2022-01-18T20:24:23.000Z",
|
||||||
|
"updatedAt": "2022-01-18T20:26:10.000Z",
|
||||||
|
"contact": {
|
||||||
|
"name": "WhatsApp",
|
||||||
|
"number": "5517988325936"
|
||||||
|
},
|
||||||
|
"user": {
|
||||||
|
"name": "Administrador",
|
||||||
|
"email": "admin@whaticket.com"
|
||||||
|
},
|
||||||
|
"queue": {
|
||||||
|
"name": "Cobrança"
|
||||||
|
},
|
||||||
|
"messages": [
|
||||||
|
{
|
||||||
|
"id": 1,
|
||||||
|
"mediaUrl": null,
|
||||||
|
"body": "Ola",
|
||||||
|
"read": true,
|
||||||
|
"mediaType": "chat",
|
||||||
|
"fromMe": false,
|
||||||
|
"createdAt": "2022-01-18T20:24:24.007Z"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 2,
|
||||||
|
"mediaUrl": null,
|
||||||
|
"body": "HIT COMMUNICATIONS 🇧🇷\n\nBem vindo ao novo canal digital de atendimento ao cliente. Escolha uma opção do MENU abaixo 👇 e digite o número:\n*1* - Atendimento a Fornecedores\n*2* - Cancelamento ou Sugestões\n*3* - Cobrança\n*4* - Comercial\n*5* - Contas a Pagar\n*6* - Suporte Técnico\n",
|
||||||
|
"read": true,
|
||||||
|
"mediaType": "chat",
|
||||||
|
"fromMe": true,
|
||||||
|
"createdAt": "2022-01-18T20:24:27.097Z"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 3,
|
||||||
|
"mediaUrl": null,
|
||||||
|
"body": "G",
|
||||||
|
"read": true,
|
||||||
|
"mediaType": "chat",
|
||||||
|
"fromMe": false,
|
||||||
|
"createdAt": "2022-01-18T20:24:37.923Z"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 4,
|
||||||
|
"mediaUrl": null,
|
||||||
|
"body": "HIT COMMUNICATIONS 🇧🇷\n\nBem vindo ao novo canal digital de atendimento ao cliente. Escolha uma opção do MENU abaixo 👇 e digite o número:\n*1* - Atendimento a Fornecedores\n*2* - Cancelamento ou Sugestões\n*3* - Cobrança\n*4* - Comercial\n*5* - Contas a Pagar\n*6* - Suporte Técnico\n",
|
||||||
|
"read": true,
|
||||||
|
"mediaType": "chat",
|
||||||
|
"fromMe": true,
|
||||||
|
"createdAt": "2022-01-18T20:24:40.980Z"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 5,
|
||||||
|
"mediaUrl": null,
|
||||||
|
"body": "3",
|
||||||
|
"read": true,
|
||||||
|
"mediaType": "chat",
|
||||||
|
"fromMe": false,
|
||||||
|
"createdAt": "2022-01-18T20:24:57.888Z"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 6,
|
||||||
|
"mediaUrl": null,
|
||||||
|
"body": "Olá sou da Cobrança, vou te atender em alguns instantes!",
|
||||||
|
"read": true,
|
||||||
|
"mediaType": "chat",
|
||||||
|
"fromMe": true,
|
||||||
|
"createdAt": "2022-01-18T20:24:58.580Z"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 7,
|
||||||
|
"mediaUrl": null,
|
||||||
|
"body": "Ok",
|
||||||
|
"read": true,
|
||||||
|
"mediaType": "chat",
|
||||||
|
"fromMe": false,
|
||||||
|
"createdAt": "2022-01-18T20:25:05.310Z"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 8,
|
||||||
|
"mediaUrl": null,
|
||||||
|
"body": "*Administrador:*\nOlá no que posso ajudar",
|
||||||
|
"read": true,
|
||||||
|
"mediaType": "chat",
|
||||||
|
"fromMe": true,
|
||||||
|
"createdAt": "2022-01-18T20:25:32.291Z"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 9,
|
||||||
|
"mediaUrl": null,
|
||||||
|
"body": "Aqui ta chovendo",
|
||||||
|
"read": true,
|
||||||
|
"mediaType": "chat",
|
||||||
|
"fromMe": false,
|
||||||
|
"createdAt": "2022-01-18T20:25:52.922Z"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 10,
|
||||||
|
"mediaUrl": null,
|
||||||
|
"body": "*Administrador:*\nCerto boa tarde",
|
||||||
|
"read": true,
|
||||||
|
"mediaType": "chat",
|
||||||
|
"fromMe": true,
|
||||||
|
"createdAt": "2022-01-18T20:26:04.360Z"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
"id":229,
|
||||||
|
"status":"closed",
|
||||||
|
"createdAt":"2022-01-24T13:20:01.000Z",
|
||||||
|
"updatedAt":"2022-01-24T13:21:02.000Z",
|
||||||
|
"contact":{
|
||||||
|
"name":"Meu Numero Oi",
|
||||||
|
"number":"5517988325936"
|
||||||
|
},
|
||||||
|
"user":{
|
||||||
|
"name":"Administrador",
|
||||||
|
"email":"admin@whaticket.com"
|
||||||
|
},
|
||||||
|
"queue":{
|
||||||
|
"name":"Cancelamento ou Sugestões"
|
||||||
|
},
|
||||||
|
"messages":[
|
||||||
|
{
|
||||||
|
"mediaUrl":null,
|
||||||
|
"body":"Bom dia",
|
||||||
|
"read":true,
|
||||||
|
"mediaType":"chat",
|
||||||
|
"fromMe":false,
|
||||||
|
"createdAt":"2022-01-24T13:20:01.562Z"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"mediaUrl":null,
|
||||||
|
"body":"HIT COMMUNICATIONS 🇧🇷\n\nBem vindo ao novo canal digital de atendimento ao cliente. Escolha uma opção do MENU abaixo 👇 e digite o número:\n*1* - Atendimento a Fornecedores\n*2* - Cancelamento ou Sugestões\n*3* - Cobrança\n*4* - Comercial\n*5* - Contas a Pagar\n*6* - Suporte Técnico\n",
|
||||||
|
"read":true,
|
||||||
|
"mediaType":"chat",
|
||||||
|
"fromMe":true,
|
||||||
|
"createdAt":"2022-01-24T13:20:04.674Z"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"mediaUrl":null,
|
||||||
|
"body":"2",
|
||||||
|
"read":true,
|
||||||
|
"mediaType":"chat",
|
||||||
|
"fromMe":false,
|
||||||
|
"createdAt":"2022-01-24T13:20:08.617Z"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"mediaUrl":null,
|
||||||
|
"body":"Olá, sou do Cancelamento ou Sugestões, vou te atender em alguns instantes!",
|
||||||
|
"read":true,
|
||||||
|
"mediaType":"chat",
|
||||||
|
"fromMe":true,
|
||||||
|
"createdAt":"2022-01-24T13:20:09.216Z"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"mediaUrl":null,
|
||||||
|
"body":"Ok obrigado",
|
||||||
|
"read":true,
|
||||||
|
"mediaType":"chat",
|
||||||
|
"fromMe":false,
|
||||||
|
"createdAt":"2022-01-24T13:20:13.902Z"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"mediaUrl":null,
|
||||||
|
"body":"*Administrador:*\nOlá bom dia como posso ajudar",
|
||||||
|
"read":true,
|
||||||
|
"mediaType":"chat",
|
||||||
|
"fromMe":true,
|
||||||
|
"createdAt":"2022-01-24T13:20:34.561Z"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"mediaUrl":null,
|
||||||
|
"body":"Estou com problemas técnicos",
|
||||||
|
"read":true,
|
||||||
|
"mediaType":"chat",
|
||||||
|
"fromMe":false,
|
||||||
|
"createdAt":"2022-01-24T13:20:54.191Z"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"mediaUrl":null,
|
||||||
|
"body":"*Administrador:*\nok",
|
||||||
|
"read":true,
|
||||||
|
"mediaType":"chat",
|
||||||
|
"fromMe":true,
|
||||||
|
"createdAt":"2022-01-24T13:20:57.847Z"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"tableData":{
|
||||||
|
"id":0
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
@ -0,0 +1,68 @@
|
||||||
|
|
||||||
|
import { useState, useEffect} from 'react';
|
||||||
|
import MaterialTable from 'material-table';
|
||||||
|
import Modal from '../Modal'
|
||||||
|
import { render } from '@testing-library/react';
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
const MTable = (props) => {
|
||||||
|
|
||||||
|
const [selectedRow, setSelectedRow] = useState(null);
|
||||||
|
|
||||||
|
console.log('rederizou....................: ',props.data)
|
||||||
|
|
||||||
|
const dataLoad = props.data.map((dt) => { return { ...dt }});
|
||||||
|
const columnsLoad = props.columns.map((column) => { return { ...column }});
|
||||||
|
|
||||||
|
console.log('dataLoad....................: ',dataLoad)
|
||||||
|
console.log('columnsLoad....................: ',columnsLoad)
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
|
||||||
|
console.log(`You have clicked the button ${selectedRow} times`)
|
||||||
|
|
||||||
|
},[selectedRow]);
|
||||||
|
|
||||||
|
return ( <div style={{ maxWidth: "100%", fontSize:10}}>
|
||||||
|
|
||||||
|
<MaterialTable
|
||||||
|
title='Relatorio'
|
||||||
|
columns={columnsLoad}
|
||||||
|
data={dataLoad}
|
||||||
|
|
||||||
|
onRowClick={(evt, selectedRow) => {
|
||||||
|
|
||||||
|
console.log(selectedRow.tableData.id);
|
||||||
|
console.log(selectedRow);
|
||||||
|
console.log(selectedRow.messages);
|
||||||
|
setSelectedRow(selectedRow.tableData.id)
|
||||||
|
|
||||||
|
render(<Modal data={selectedRow.messages}/>)
|
||||||
|
|
||||||
|
//evt.stopPropagation()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
options={{
|
||||||
|
search: true,
|
||||||
|
selection: false,
|
||||||
|
paging: false,
|
||||||
|
searchFieldStyle: {
|
||||||
|
width: 300,
|
||||||
|
},
|
||||||
|
|
||||||
|
rowStyle: rowData => ({
|
||||||
|
fontSize: 12,
|
||||||
|
backgroundColor:
|
||||||
|
selectedRow === rowData.tableData.id ? '#ec5114' : '#FFF'
|
||||||
|
})
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
export default React.memo(MTable)
|
||||||
|
|
@ -0,0 +1,117 @@
|
||||||
|
import * as React from 'react';
|
||||||
|
import Button from '@mui/material/Button';
|
||||||
|
import Dialog from '@mui/material/Dialog';
|
||||||
|
import DialogActions from '@mui/material/DialogActions';
|
||||||
|
|
||||||
|
import DataGridTable from '../Table';
|
||||||
|
import MTable from "../MTable";
|
||||||
|
|
||||||
|
//let columns = [{ title: 'Chat', field: 'messages.body' },];
|
||||||
|
|
||||||
|
// { title: 'Atendente', field: 'user.name' },
|
||||||
|
|
||||||
|
const columns = [
|
||||||
|
{ field: 'id',
|
||||||
|
title: 'ID',
|
||||||
|
width: 50,
|
||||||
|
sortable: false},
|
||||||
|
{
|
||||||
|
field: 'fromMe',
|
||||||
|
title: 'user/client',
|
||||||
|
type: 'bool',
|
||||||
|
width: 100,
|
||||||
|
flex: 1,
|
||||||
|
editable: false,
|
||||||
|
sortable: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'body',
|
||||||
|
title: 'message',
|
||||||
|
type: 'string',
|
||||||
|
//width: 150,
|
||||||
|
flex: 1,
|
||||||
|
editable: false,
|
||||||
|
sortable: false
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
/* {
|
||||||
|
field: 'mediaType',
|
||||||
|
headerName: 'media type',
|
||||||
|
//width: 110,
|
||||||
|
flex: 1,
|
||||||
|
editable: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'mediaUrl',
|
||||||
|
headerName: 'media url',
|
||||||
|
type: 'string',
|
||||||
|
//width: 110,
|
||||||
|
flex: 1,
|
||||||
|
editable: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'read',
|
||||||
|
headerName: 'tead',
|
||||||
|
type: 'bool',
|
||||||
|
//width: 110,
|
||||||
|
flex: 1,
|
||||||
|
editable: false,
|
||||||
|
},*/
|
||||||
|
{
|
||||||
|
field: 'createdAt',
|
||||||
|
title: 'created at',
|
||||||
|
type: 'dateTime',
|
||||||
|
//width: 110,
|
||||||
|
flex: 1,
|
||||||
|
editable: false,
|
||||||
|
sortable: false
|
||||||
|
}
|
||||||
|
|
||||||
|
];
|
||||||
|
|
||||||
|
const Modal = (props) => {
|
||||||
|
const [open, setOpen] = React.useState(true);
|
||||||
|
const [scroll, setScroll] = React.useState('paper');
|
||||||
|
|
||||||
|
|
||||||
|
const handleClose = () => {
|
||||||
|
setOpen(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
const descriptionElementRef = React.useRef(null);
|
||||||
|
React.useEffect(() => {
|
||||||
|
if (open) {
|
||||||
|
const { current: descriptionElement } = descriptionElementRef;
|
||||||
|
if (descriptionElement !== null) {
|
||||||
|
descriptionElement.focus();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, [open]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
|
||||||
|
<Dialog
|
||||||
|
open={open}
|
||||||
|
onClose={handleClose}
|
||||||
|
|
||||||
|
fullWidth={true}
|
||||||
|
maxWidth={true}
|
||||||
|
|
||||||
|
scroll={scroll}
|
||||||
|
aria-labelledby="scroll-dialog-title"
|
||||||
|
aria-describedby="scroll-dialog-description"
|
||||||
|
>
|
||||||
|
|
||||||
|
<MTable data={props.data} columns={columns} />
|
||||||
|
|
||||||
|
<DialogActions>
|
||||||
|
<Button onClick={handleClose}>Ok</Button>
|
||||||
|
</DialogActions>
|
||||||
|
</Dialog>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Modal
|
||||||
|
|
@ -0,0 +1,183 @@
|
||||||
|
import * as React from 'react';
|
||||||
|
import Box from '@mui/material/Box';
|
||||||
|
import TextField from '@mui/material/TextField';
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const SelectTextFields = (props) => {
|
||||||
|
const [currency, setCurrency] = React.useState('0');
|
||||||
|
|
||||||
|
props.currencies.push({ value: '0', label: ''})
|
||||||
|
|
||||||
|
props.func(currency);
|
||||||
|
|
||||||
|
const handleChange = (event) => {
|
||||||
|
setCurrency(event.target.value);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
|
||||||
|
<Box
|
||||||
|
component="form"
|
||||||
|
sx={{
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
'& .MuiTextField-root': { m: 1, width: '30ch' },}}
|
||||||
|
noValidate
|
||||||
|
autoComplete="off"
|
||||||
|
>
|
||||||
|
<TextField
|
||||||
|
id="outlined-select-currency-native"
|
||||||
|
margin="dense"
|
||||||
|
size="small"
|
||||||
|
select
|
||||||
|
label="Usuário"
|
||||||
|
value={currency}
|
||||||
|
onChange={handleChange}
|
||||||
|
SelectProps={{
|
||||||
|
native: true,
|
||||||
|
}}
|
||||||
|
//helperText="Please select your currency"
|
||||||
|
>
|
||||||
|
{props.currencies.map((option) => (
|
||||||
|
<option key={option.value} value={option.value}>
|
||||||
|
{option.label}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</TextField>
|
||||||
|
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default SelectTextFields
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Box
|
||||||
|
component="form"
|
||||||
|
sx={{
|
||||||
|
'& .MuiTextField-root': { m: 1, width: '25ch' },
|
||||||
|
}}
|
||||||
|
noValidate
|
||||||
|
autoComplete="off"
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<TextField
|
||||||
|
id="outlined-select-currency"
|
||||||
|
select
|
||||||
|
label="Select"
|
||||||
|
value={currency}
|
||||||
|
onChange={handleChange}
|
||||||
|
helperText="Please select your currency"
|
||||||
|
>
|
||||||
|
{currencies.map((option) => (
|
||||||
|
<MenuItem key={option.value} value={option.value}>
|
||||||
|
{option.label}
|
||||||
|
</MenuItem>
|
||||||
|
))}
|
||||||
|
</TextField>
|
||||||
|
<TextField
|
||||||
|
id="outlined-select-currency-native"
|
||||||
|
select
|
||||||
|
label="Native select"
|
||||||
|
value={currency}
|
||||||
|
onChange={handleChange}
|
||||||
|
SelectProps={{
|
||||||
|
native: true,
|
||||||
|
}}
|
||||||
|
helperText="Please select your currency"
|
||||||
|
>
|
||||||
|
{currencies.map((option) => (
|
||||||
|
<option key={option.value} value={option.value}>
|
||||||
|
{option.label}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</TextField>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<TextField
|
||||||
|
id="filled-select-currency"
|
||||||
|
select
|
||||||
|
label="Select"
|
||||||
|
value={currency}
|
||||||
|
onChange={handleChange}
|
||||||
|
helperText="Please select your currency"
|
||||||
|
variant="filled"
|
||||||
|
>
|
||||||
|
{currencies.map((option) => (
|
||||||
|
<MenuItem key={option.value} value={option.value}>
|
||||||
|
{option.label}
|
||||||
|
</MenuItem>
|
||||||
|
))}
|
||||||
|
</TextField>
|
||||||
|
<TextField
|
||||||
|
id="filled-select-currency-native"
|
||||||
|
select
|
||||||
|
label="Native select"
|
||||||
|
value={currency}
|
||||||
|
onChange={handleChange}
|
||||||
|
SelectProps={{
|
||||||
|
native: true,
|
||||||
|
}}
|
||||||
|
helperText="Please select your currency"
|
||||||
|
variant="filled"
|
||||||
|
>
|
||||||
|
{currencies.map((option) => (
|
||||||
|
<option key={option.value} value={option.value}>
|
||||||
|
{option.label}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</TextField>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<TextField
|
||||||
|
id="standard-select-currency"
|
||||||
|
select
|
||||||
|
label="Select"
|
||||||
|
value={currency}
|
||||||
|
onChange={handleChange}
|
||||||
|
helperText="Please select your currency"
|
||||||
|
variant="standard"
|
||||||
|
>
|
||||||
|
{currencies.map((option) => (
|
||||||
|
<MenuItem key={option.value} value={option.value}>
|
||||||
|
{option.label}
|
||||||
|
</MenuItem>
|
||||||
|
))}
|
||||||
|
</TextField>
|
||||||
|
<TextField
|
||||||
|
id="standard-select-currency-native"
|
||||||
|
select
|
||||||
|
label="Native select"
|
||||||
|
value={currency}
|
||||||
|
onChange={handleChange}
|
||||||
|
SelectProps={{
|
||||||
|
native: true,
|
||||||
|
}}
|
||||||
|
helperText="Please select your currency"
|
||||||
|
variant="standard"
|
||||||
|
>
|
||||||
|
{currencies.map((option) => (
|
||||||
|
<option key={option.value} value={option.value}>
|
||||||
|
{option.label}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</TextField>
|
||||||
|
</div>
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
|
||||||
|
*/
|
||||||
|
|
@ -0,0 +1,149 @@
|
||||||
|
import * as React from 'react';
|
||||||
|
import { DataGrid } from '@mui/x-data-grid';
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/*const columns = [
|
||||||
|
{ field: 'id', headerName: 'ID', width: 90},
|
||||||
|
{
|
||||||
|
field: 'firstName',
|
||||||
|
headerName: 'First name',
|
||||||
|
width: 150,
|
||||||
|
editable: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'lastName',
|
||||||
|
headerName: 'Last name',
|
||||||
|
width: 150,
|
||||||
|
editable: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'age',
|
||||||
|
headerName: 'Age',
|
||||||
|
type: 'number',
|
||||||
|
width: 110,
|
||||||
|
editable: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'fullName',
|
||||||
|
headerName: 'Full name',
|
||||||
|
description: 'This column has a value getter and is not sortable.',
|
||||||
|
sortable: false,
|
||||||
|
width: 160,
|
||||||
|
valueGetter: (params) =>
|
||||||
|
`${params.row.firstName || ''} ${params.row.lastName || ''}`,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const rows = [
|
||||||
|
{ id: 1, lastName: 'Snow', firstName: 'Jon', age: 35 },
|
||||||
|
{ id: 2, lastName: 'Lannister', firstName: 'Cersei', age: 42 },
|
||||||
|
{ id: 3, lastName: 'Lannister', firstName: 'Jaime', age: 45 },
|
||||||
|
{ id: 4, lastName: 'Stark', firstName: 'Arya', age: 16 },
|
||||||
|
{ id: 5, lastName: 'Targaryen', firstName: 'Daenerys', age: null },
|
||||||
|
{ id: 6, lastName: 'Melisandre', firstName: null, age: 150 },
|
||||||
|
{ id: 7, lastName: 'Clifford', firstName: 'Ferrara', age: 44 },
|
||||||
|
{ id: 8, lastName: 'Frances', firstName: 'Rossini', age: 36 },
|
||||||
|
{ id: 9, lastName: 'Roxie', firstName: 'Harvey', age: 65 },
|
||||||
|
];*/
|
||||||
|
|
||||||
|
const columns = [
|
||||||
|
{ field: 'id',
|
||||||
|
headerName: 'ID',
|
||||||
|
width: 50,
|
||||||
|
sortable: false},
|
||||||
|
{
|
||||||
|
field: 'fromMe',
|
||||||
|
headerName: 'user/client',
|
||||||
|
type: 'bool',
|
||||||
|
width: 100,
|
||||||
|
flex: 1,
|
||||||
|
editable: false,
|
||||||
|
sortable: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'body',
|
||||||
|
headerName: 'message',
|
||||||
|
type: 'string',
|
||||||
|
//width: 150,
|
||||||
|
flex: 1,
|
||||||
|
editable: false,
|
||||||
|
sortable: false
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
/* {
|
||||||
|
field: 'mediaType',
|
||||||
|
headerName: 'media type',
|
||||||
|
//width: 110,
|
||||||
|
flex: 1,
|
||||||
|
editable: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'mediaUrl',
|
||||||
|
headerName: 'media url',
|
||||||
|
type: 'string',
|
||||||
|
//width: 110,
|
||||||
|
flex: 1,
|
||||||
|
editable: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'read',
|
||||||
|
headerName: 'tead',
|
||||||
|
type: 'bool',
|
||||||
|
//width: 110,
|
||||||
|
flex: 1,
|
||||||
|
editable: false,
|
||||||
|
},*/
|
||||||
|
{
|
||||||
|
field: 'createdAt',
|
||||||
|
headerName: 'created at',
|
||||||
|
type: 'dateTime',
|
||||||
|
//width: 110,
|
||||||
|
flex: 1,
|
||||||
|
editable: false,
|
||||||
|
sortable: false
|
||||||
|
}
|
||||||
|
|
||||||
|
];
|
||||||
|
|
||||||
|
|
||||||
|
const DataGridTable = (props) => {
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div style={{ height: 400, width: '600' }}>
|
||||||
|
<DataGrid
|
||||||
|
|
||||||
|
onCellDoubleClick = {(params, event) => {
|
||||||
|
|
||||||
|
alert(params.value)
|
||||||
|
|
||||||
|
if (!event.ctrlKey) {
|
||||||
|
event.defaultMuiPrevented = true;
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
|
||||||
|
|
||||||
|
onCellKeyDown = {(params, event) => {
|
||||||
|
|
||||||
|
if(event.key.toString().toLowerCase() == 'enter'){
|
||||||
|
alert(params.value)
|
||||||
|
}
|
||||||
|
|
||||||
|
}}
|
||||||
|
|
||||||
|
|
||||||
|
rows={props.data}
|
||||||
|
columns={columns}
|
||||||
|
pageSize={25}
|
||||||
|
rowsPerPageOptions={[25]}
|
||||||
|
rowHeight={38}
|
||||||
|
//checkboxSelection
|
||||||
|
disableSelectionOnClick
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default DataGridTable
|
||||||
|
|
@ -220,7 +220,7 @@ const LoggedInLayout = ({ children }) => {
|
||||||
className={classes.title}
|
className={classes.title}
|
||||||
>
|
>
|
||||||
|
|
||||||
BETA GRUPO
|
BETAGROUP
|
||||||
|
|
||||||
</Typography>
|
</Typography>
|
||||||
{user.id && <NotificationsPopOver />}
|
{user.id && <NotificationsPopOver />}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,359 @@
|
||||||
|
import React, { useState, useEffect, useReducer} from "react";
|
||||||
|
import MainContainer from "../../components/MainContainer";
|
||||||
|
import api from "../../services/api";
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
import SelectField from "../../components/Report/SelectField";
|
||||||
|
import { data } from '../../components/Report/MTable/data';
|
||||||
|
import DatePicker1 from '../../components/Report/DatePicker'
|
||||||
|
import DatePicker2 from '../../components/Report/DatePicker'
|
||||||
|
import { Button } from "@material-ui/core";
|
||||||
|
import MTable from "../../components/Report/MTable";
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import Box from '@mui/material/Box';
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const reducerQ = (state, action) =>{
|
||||||
|
|
||||||
|
if(action.type === 'LOAD_QUERY'){
|
||||||
|
|
||||||
|
console.log('----------------action.payload: ', action.payload)
|
||||||
|
const queries = action.payload
|
||||||
|
const newQueries = []
|
||||||
|
|
||||||
|
queries.forEach((query) => {
|
||||||
|
|
||||||
|
const queryIndex = state.findIndex((q) => q.id === query.id)
|
||||||
|
|
||||||
|
if(queryIndex !== -1){
|
||||||
|
state[queryIndex] = query
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
newQueries.push(query)
|
||||||
|
}
|
||||||
|
|
||||||
|
})
|
||||||
|
|
||||||
|
return [...state, ...newQueries]
|
||||||
|
}
|
||||||
|
|
||||||
|
if (action.type === "RESET") {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const reducer = (state, action) => {
|
||||||
|
|
||||||
|
if (action.type === "LOAD_USERS") {
|
||||||
|
const users = action.payload;
|
||||||
|
const newUsers = [];
|
||||||
|
|
||||||
|
users.forEach((user) => {
|
||||||
|
const userIndex = state.findIndex((u) => u.id === user.id);
|
||||||
|
if (userIndex !== -1) {
|
||||||
|
state[userIndex] = user;
|
||||||
|
} else {
|
||||||
|
newUsers.push(user);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return [...state, ...newUsers];
|
||||||
|
}
|
||||||
|
|
||||||
|
if (action.type === "RESET") {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
function Item(props) {
|
||||||
|
const { sx, ...other } = props;
|
||||||
|
return (
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
bgcolor: (theme) => (theme.palette.mode === 'dark' ? '#101010' : '#fff'),
|
||||||
|
color: (theme) => (theme.palette.mode === 'dark' ? 'grey.300' : 'grey.800'),
|
||||||
|
border: '1px solid',
|
||||||
|
borderColor: (theme) =>
|
||||||
|
theme.palette.mode === 'dark' ? 'grey.800' : 'grey.300',
|
||||||
|
p: 1,
|
||||||
|
m: 1,
|
||||||
|
borderRadius: 2,
|
||||||
|
fontSize: '0.875rem',
|
||||||
|
fontWeight: '700',
|
||||||
|
...sx,
|
||||||
|
}}
|
||||||
|
{...other}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
Item.propTypes = {
|
||||||
|
sx: PropTypes.oneOfType([
|
||||||
|
PropTypes.arrayOf(
|
||||||
|
PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool]),
|
||||||
|
),
|
||||||
|
PropTypes.func,
|
||||||
|
PropTypes.object,
|
||||||
|
]),
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
let columnsData = [
|
||||||
|
{ title: 'Atendente', field: 'user.name' },
|
||||||
|
{ title: 'Contato', field: 'contact.number' },
|
||||||
|
{ title: 'Assunto', field: 'queue.name' },
|
||||||
|
{ title: 'Status', field: 'status' },
|
||||||
|
{ title: 'Criado', field: 'createdAt' },
|
||||||
|
|
||||||
|
{ title: 'Atualizado', field: 'updatedAt',
|
||||||
|
|
||||||
|
/*cellStyle: {
|
||||||
|
backgroundColor: '#039be5',
|
||||||
|
color: '#FFF'
|
||||||
|
},
|
||||||
|
headerStyle: {
|
||||||
|
backgroundColor: '#039be5',
|
||||||
|
fontSize: 12
|
||||||
|
}*/
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
];
|
||||||
|
|
||||||
|
/*const currencies = [
|
||||||
|
{
|
||||||
|
value: '1',
|
||||||
|
label: 'Adriano',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: '2',
|
||||||
|
label: 'Aguinaldo',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: '3',
|
||||||
|
label: 'Maria',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: '4',
|
||||||
|
label: 'Suely',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: '0',
|
||||||
|
label: '',
|
||||||
|
},
|
||||||
|
|
||||||
|
];*/
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const Report = () => {
|
||||||
|
|
||||||
|
//--------
|
||||||
|
const [searchParam, setSearchParam] = useState("");
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
const [hasMore, setHasMore] = useState(false);
|
||||||
|
const [pageNumber, setPageNumber] = useState(1);
|
||||||
|
const [users, dispatch] = useReducer(reducer, []);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const [columns, setColums] = useState([])
|
||||||
|
|
||||||
|
const [startDate, setDatePicker1] = useState(new Date())
|
||||||
|
const [endDate, setDatePicker2] = useState(new Date())
|
||||||
|
const [userId, setUser] = useState(null)
|
||||||
|
|
||||||
|
const [query, dispatchQ] = useReducer(reducerQ, [])
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
dispatch({ type: "RESET" });
|
||||||
|
dispatchQ({ type: "RESET" })
|
||||||
|
|
||||||
|
setPageNumber(1);
|
||||||
|
}, [searchParam]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setLoading(true);
|
||||||
|
const delayDebounceFn = setTimeout(() => {
|
||||||
|
|
||||||
|
const fetchUsers = async () => {
|
||||||
|
try {
|
||||||
|
const { data } = await api.get("/users/", {
|
||||||
|
params: { searchParam, pageNumber },
|
||||||
|
});
|
||||||
|
|
||||||
|
dispatch({ type: "LOAD_USERS", payload: data.users });
|
||||||
|
setHasMore(data.hasMore);
|
||||||
|
setLoading(false);
|
||||||
|
} catch (err) {
|
||||||
|
console.log(err);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
fetchUsers();
|
||||||
|
|
||||||
|
}, 500);
|
||||||
|
return () => clearTimeout(delayDebounceFn);
|
||||||
|
}, [searchParam, pageNumber]);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
|
||||||
|
setLoading(true);
|
||||||
|
|
||||||
|
const delayDebounceFn = setTimeout(() => {
|
||||||
|
|
||||||
|
const fetchQueries = async () => {
|
||||||
|
try {
|
||||||
|
const dataQuery = await api.get("/reports/", {params: {userId, startDate, endDate },});
|
||||||
|
|
||||||
|
console.log('fffffffffffffffffffff query: ', dataQuery.data)
|
||||||
|
dispatchQ({ type: "LOAD_QUERY", payload: dataQuery.data });
|
||||||
|
|
||||||
|
setLoading(false);
|
||||||
|
|
||||||
|
} catch (err) {
|
||||||
|
console.log(err);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
fetchQueries();
|
||||||
|
|
||||||
|
}, 500);
|
||||||
|
return () => clearTimeout(delayDebounceFn);
|
||||||
|
|
||||||
|
}, [userId, startDate, endDate]);
|
||||||
|
|
||||||
|
|
||||||
|
// Get from child 1
|
||||||
|
const datePicker1Value = (data) => {
|
||||||
|
console.log('DATE1: ',(data));
|
||||||
|
setDatePicker1(data)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Get from child 2
|
||||||
|
const datePicker2Value = (data) => {
|
||||||
|
console.log('DATE2: ',(data));
|
||||||
|
setDatePicker2(data)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Get from child 3
|
||||||
|
const textFieldSelectUser = (data) => {
|
||||||
|
console.log('textField: ',data);
|
||||||
|
setUser(data)
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function handleQuery (){
|
||||||
|
|
||||||
|
console.log('startDate: ', startDate)
|
||||||
|
console.log('endDate: ', endDate)
|
||||||
|
console.log('userid: ', userId)
|
||||||
|
|
||||||
|
/* if(tot == 3){
|
||||||
|
setColums(columns1)
|
||||||
|
} */
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log('XXXXXXXXX: ', query)
|
||||||
|
|
||||||
|
return (
|
||||||
|
|
||||||
|
<MainContainer>
|
||||||
|
|
||||||
|
|
||||||
|
<Box sx={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)' }}>
|
||||||
|
|
||||||
|
<Item><SelectField func={textFieldSelectUser} currencies={users.map((obj)=>{
|
||||||
|
return {'value': obj.id, 'label': obj.name}
|
||||||
|
})}/></Item>
|
||||||
|
|
||||||
|
|
||||||
|
<Item><DatePicker1 func={datePicker1Value} title={'Data inicio'}/></Item>
|
||||||
|
<Item><DatePicker2 func={datePicker2Value} title={'Data fim'}/></Item>
|
||||||
|
|
||||||
|
<Item sx={{ gridColumn: '4 / 5' }}>
|
||||||
|
<Button size="small" variant="contained" onClick={()=>{handleQuery()}}>GO</Button>
|
||||||
|
</Item>
|
||||||
|
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
<Box sx={{
|
||||||
|
display: 'grid',
|
||||||
|
}}>
|
||||||
|
<Item sx={{ gridColumn: '1', gridRow: 'span 1' }}>
|
||||||
|
<MTable data={query} columns={columnsData}/>
|
||||||
|
</Item>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
{/* <MainHeader>
|
||||||
|
<Title>{i18n.t("users.title")}</Title>
|
||||||
|
<MainHeaderButtonsWrapper>
|
||||||
|
|
||||||
|
</MainHeaderButtonsWrapper>
|
||||||
|
</MainHeader>
|
||||||
|
|
||||||
|
|
||||||
|
<Paper
|
||||||
|
className={classes.mainPaper}
|
||||||
|
variant="outlined"
|
||||||
|
onScroll={handleScroll}
|
||||||
|
>
|
||||||
|
<Table size="small">
|
||||||
|
<TableHead>
|
||||||
|
<TableRow>
|
||||||
|
<TableCell align="center">{i18n.t("users.table.name")}</TableCell>
|
||||||
|
<TableCell align="center">
|
||||||
|
{i18n.t("users.table.email")}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell align="center">
|
||||||
|
{i18n.t("users.table.profile")}
|
||||||
|
</TableCell>
|
||||||
|
|
||||||
|
<TableCell align="center">
|
||||||
|
{i18n.t("users.table.actions")}
|
||||||
|
</TableCell>
|
||||||
|
|
||||||
|
</TableRow>
|
||||||
|
</TableHead>
|
||||||
|
<TableBody>
|
||||||
|
<>
|
||||||
|
{users.map((user) => (
|
||||||
|
<TableRow key={user.id}>
|
||||||
|
<TableCell align="center">{user.name}</TableCell>
|
||||||
|
<TableCell align="center">{user.email}</TableCell>
|
||||||
|
<TableCell align="center">{user.profile}</TableCell>
|
||||||
|
|
||||||
|
<TableCell align="center">
|
||||||
|
|
||||||
|
|
||||||
|
</TableCell>
|
||||||
|
|
||||||
|
</TableRow>
|
||||||
|
))}
|
||||||
|
{loading && <TableRowSkeleton columns={4} />}
|
||||||
|
</>
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
</Paper>*/}
|
||||||
|
|
||||||
|
</MainContainer>
|
||||||
|
|
||||||
|
)
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Report;
|
||||||
|
|
@ -4,6 +4,9 @@ import { ToastContainer } from "react-toastify";
|
||||||
|
|
||||||
import LoggedInLayout from "../layout";
|
import LoggedInLayout from "../layout";
|
||||||
import Dashboard from "../pages/Dashboard/";
|
import Dashboard from "../pages/Dashboard/";
|
||||||
|
|
||||||
|
import Report from "../pages/Report/";
|
||||||
|
|
||||||
import Tickets from "../pages/Tickets/";
|
import Tickets from "../pages/Tickets/";
|
||||||
import Signup from "../pages/Signup/";
|
import Signup from "../pages/Signup/";
|
||||||
import Login from "../pages/Login/";
|
import Login from "../pages/Login/";
|
||||||
|
|
@ -17,6 +20,8 @@ import { AuthProvider } from "../context/Auth/AuthContext";
|
||||||
import { WhatsAppsProvider } from "../context/WhatsApp/WhatsAppsContext";
|
import { WhatsAppsProvider } from "../context/WhatsApp/WhatsAppsContext";
|
||||||
import Route from "./Route";
|
import Route from "./Route";
|
||||||
|
|
||||||
|
//import { Report } from "@material-ui/icons";
|
||||||
|
|
||||||
//console.log('---AuthProvider: ',AuthProvider)
|
//console.log('---AuthProvider: ',AuthProvider)
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -46,6 +51,15 @@ const Routes = () => {
|
||||||
isPrivate
|
isPrivate
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
|
||||||
|
<Route
|
||||||
|
exact
|
||||||
|
path="/report"
|
||||||
|
component={Report}
|
||||||
|
isPrivate
|
||||||
|
/>
|
||||||
|
|
||||||
|
|
||||||
<Route exact path="/contacts" component={Contacts} isPrivate />
|
<Route exact path="/contacts" component={Contacts} isPrivate />
|
||||||
<Route exact path="/users" component={Users} isPrivate />
|
<Route exact path="/users" component={Users} isPrivate />
|
||||||
<Route
|
<Route
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue