adriano.andrade
/
projeto-hit
mirror of https://github.com/AdrianoRobson/projeto-hit.git
1
1
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #18 from RenatoDiGiacomo/dashboard/merge 

Dashboard/merge
pull/20/head
Adriano Robson 2022-08-09 11:12:25 -03:00 committed by GitHub
parent 0ecb553703 0f7e91c1bd
commit d1ceb54590
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
37 changed files with 1672 additions and 770 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

284
backend/src/controllers/ReportController.ts
View File

@ -1,127 +1,241 @@
//relatorio
import { Request, Response } from "express";
import AppError from "../errors/AppError";
import { Request, Response } from "express";
import AppError from "../errors/AppError";
import ShowTicketReport from "../services/TicketServices/ShowTicketReport";
import ShowMessageReport from "../services/MessageServices/ShowMessageReport";
import onlineUserService from "../services/UserServices/CreateOrUpdateOnlineUserService";
import onlineUserService from "../services/UserServices/CreateOrUpdateOnlineUserService";
import User from "../models/User";
import Queue from "../models/Queue";
import UserOnlineTime from "../models/UserOnlineTime";
import { Op, Sequelize,literal } from "sequelize";
import { Op, Sequelize, literal } from "sequelize";
import format from 'date-fns/format';
import ptBR from 'date-fns/locale/pt-BR';
import ptBR from 'date-fns/locale/pt-BR';
import { splitDateTime } from "../helpers/SplitDateTime";
import ListUserOnlineOffline from "../services/UserServices/ListUsersOnlineOfflineService";
import ListUserParamiterService from "../services/UserServices/ListUserParamiterService";
import ShowUserServiceReport from "../services/UserServices/ShowUserServiceReport";
import CountTicketsByUserQueue from "../services/UserServices/CountTicketsByUserQueue";
import ShowQueuesByUser from "../services/UserServices/ShowQueuesByUser";
import { filter } from "bluebird";
type IndexQuery = {
userId: string;
startDate: string;
endDate: string;
};
export const reportUserByDateStartDateEnd = async (req: Request, res: Response): Promise<Response> => {
if (req.user.profile !== "master" && req.user.profile !== "admin") {
throw new AppError("ERR_NO_PERMISSION", 403);
}
const { userId, startDate, endDate } = req.query as IndexQuery
const data_query = await ShowTicketReport(userId, startDate, endDate);
return res.status(200).json(data_query);
userId: string;
startDate: string;
endDate: string;
pageNumber: string;
};
export const reportUserService= async (req: Request, res: Response): Promise<Response> => {
export const reportUserByDateStartDateEnd = async (req: Request, res: Response): Promise<Response> => {
if (req.user.profile !== "master" && req.user.profile !== "admin") {
throw new AppError("ERR_NO_PERMISSION", 403);
}
const { userId, startDate, endDate } = req.query as IndexQuery
if (req.user.profile !== "master" && req.user.profile !== "admin") {
throw new AppError("ERR_NO_PERMISSION", 403);
}
let usersProfile = await ListUserParamiterService({profile: 'user'})
const sumUserOlineTime = await ShowUserServiceReport({startDate, endDate, userId});
const closedByUser = await ShowUserServiceReport({startDate, endDate, ticketStatus: 'closed', userId});
const openByUser = await ShowUserServiceReport({startDate, endDate, ticketStatus: 'open', userId});
const { userId, startDate, endDate, pageNumber } = req.query as IndexQuery
let dateTime = splitDateTime(new Date(format(new Date(), 'yyyy-MM-dd HH:mm:ss', { locale: ptBR })))
const onlineUsers = await ListUserOnlineOffline({ date: dateTime.fullDate })
usersProfile.map((user:any) => {
console.log('PAGE NUMBER: ', pageNumber)
let index = sumUserOlineTime.findIndex((e:any) => e.userId == user.id)
if (index != -1) {
user.sumOnlineTime = sumUserOlineTime[index];
}
const { tickets, count, hasMore } = await ShowTicketReport({ userId, startDate, endDate, pageNumber });
index = closedByUser.findIndex((e:any) => e.userId == user.id)
// return res.status(200).json(data_query);
if (index != -1) {
user.sumClosed = closedByUser[index];
}
index = openByUser.findIndex((e:any) => e.userId == user.id)
if (index != -1) {
user.sumOpen = openByUser[index]
}
index = onlineUsers.findIndex((e:any) => e.userId == user.id)
if (index != -1) {
user.statusOnline = onlineUsers[index]
}
if(startDate.length>0 && startDate.split('-').length == 3){
let date = startDate.split('-')
user.startDate = `${date[2]}/${date[1]}/${date[0]}`
}
if(endDate.length>0 && endDate.split('-').length == 3){
let date = endDate.split('-')
user.endDate = `${date[2]}/${date[1]}/${date[0]}`
}
})
return res.status(200).json(usersProfile);
return res.status(200).json({ tickets, count, hasMore });
};
export const reportUserService = async (req: Request, res: Response): Promise<Response> => {
export const reportMessagesUserByDateStartDateEnd = async (req: Request, res: Response): Promise<Response> => {
if (req.user.profile !== "master" && req.user.profile !== "admin") {
throw new AppError("ERR_NO_PERMISSION", 403);
}
const { userId, startDate, endDate } = req.query as IndexQuery
if (req.user.profile !== "master" && req.user.profile !== "admin") {
throw new AppError("ERR_NO_PERMISSION", 403);
let usersProfile = await ListUserParamiterService({ profile: 'user' })
const sumUserOlineTime = await ShowUserServiceReport({ startDate, endDate, userId });
const closedByUser = await ShowUserServiceReport({ startDate, endDate, ticketStatus: 'closed', userId });
const openByUser = await ShowUserServiceReport({ startDate, endDate, ticketStatus: 'open', userId });
let dateTime = splitDateTime(new Date(format(new Date(), 'yyyy-MM-dd HH:mm:ss', { locale: ptBR })))
const onlineUsers = await ListUserOnlineOffline({ date: dateTime.fullDate })
const openByUserOnQueue = await CountTicketsByUserQueue({ startDate: startDate, endDate: endDate, status: 'open', clientChatStart: true })
const openByUserOutQueue = await CountTicketsByUserQueue({ startDate: startDate, endDate: endDate, status: 'open', clientChatStart: false })
const closedByUserOnQueue = await CountTicketsByUserQueue({ startDate: startDate, endDate: endDate, status: 'closed', clientChatStart: true })
const closedUserOutQueue = await CountTicketsByUserQueue({ startDate: startDate, endDate: endDate, status: 'closed', clientChatStart: false })
// let openQueueInOut = openByUserOnQueue.concat(openByUserOutQueue)
// let closedQueueInOut = closedByUserOnQueue.concat(closedUserOutQueue)
const queuesByUser = await ShowQueuesByUser({ profile: 'user' })
let openCloseOnQueue = openByUserOnQueue.concat(closedByUserOnQueue)
let openCloseOutQueue = openByUserOutQueue.concat(closedUserOutQueue)
for (let i = 0; i < queuesByUser.length; i++) {
queuesByUser[i].countOpen = 0
queuesByUser[i].countClosed = 0
for (let x = 0; x < openCloseOnQueue.length; x++) {
if ((queuesByUser[i].userId == openCloseOnQueue[x].userId) &&
(queuesByUser[i].queueId == openCloseOnQueue[x].queueId && openCloseOnQueue[x].status == 'open')) {
queuesByUser[i].countOpen = openCloseOnQueue[x].totAttendance
}
else if ((queuesByUser[i].userId == openCloseOnQueue[x].userId) &&
(queuesByUser[i].queueId == openCloseOnQueue[x].queueId && openCloseOnQueue[x].status == 'closed')) {
queuesByUser[i].countClosed = openCloseOnQueue[x].totAttendance
}
}
}
// console.log('queuesByUser: ', queuesByUser)
// console.log('queuesByUser: ',queuesByUser)
// console.log()
// console.log('CLIENT START TRUE openByUserOnQueue: ', openByUserOnQueue)
// console.log()
// console.log('CLIENT START FALSE openByUserOutQueue: ', openByUserOutQueue)
// console.log()
// console.log('CLIENT START TRUE closedByUserOnQueue: ', closedByUserOnQueue)
// console.log()
// console.log('CLIENT START FALSE closedUserOutQueue: ', closedUserOutQueue)
usersProfile.map((user: any) => {
let index = sumUserOlineTime.findIndex((e: any) => e.userId == user.id)
if (index != -1) {
user.sumOnlineTime = sumUserOlineTime[index];
}
const { userId, startDate, endDate } = req.query as IndexQuery
index = closedByUser.findIndex((e: any) => e.userId == user.id)
if (index != -1) {
user.sumClosed = closedByUser[index];
}
index = openByUser.findIndex((e: any) => e.userId == user.id)
if (index != -1) {
user.sumOpen = openByUser[index]
}
// let openByUserOut = openQueueInOut.filter((e: any) => e.userId == user.id && !e.queueName)
// let openByUserIn = openQueueInOut.filter((e: any) => e.userId == user.id && e.queueName)
// if (openByUserOut && openByUserOut.length > 0) {
// user.openTicketByUserOut = openByUserOut
// }
// if (openByUserIn && openByUserIn.length > 0) {
// user.openTicketByUserIn = openByUserIn
// }
// let closedByUserOut = closedQueueInOut.filter((e: any) => e.userId == user.id && !e.queueName)
// let closedByUserIn = closedQueueInOut.filter((e: any) => e.userId == user.id && e.queueName)
// if (closedByUserOut && closedByUserOut.length > 0) {
// user.closedTicketByUserOut = closedByUserOut
// }
// if (closedByUserIn && closedByUserIn.length > 0) {
// user.closedTicketByUserIn = closedByUserIn
// }
// OPEN, CLOSED TICKETS STARTED BY USERS
let openClosedOutQueue = {}
let open = openCloseOutQueue.filter((e) => e.userId == user.id && e.status == 'open')
let closed = openCloseOutQueue.filter((e) => e.userId == user.id && e.status == 'closed')
openClosedOutQueue = {
...openClosedOutQueue,
userId: user.id,
countOpen: open && open.length > 0 ? open[0].totAttendance : 0,
countClosed: closed && closed.length > 0 ? closed[0].totAttendance : 0
}
user.openClosedOutQueue = openClosedOutQueue
// OPEN, CLOSED TICKETS STARTED BY CLIENTS
let openClosedInQueue = queuesByUser.filter((e) => e.userId == user.id)
if (openClosedInQueue && openClosedInQueue.length > 0) {
user.openClosedInQueue = openClosedInQueue
}
index = onlineUsers.findIndex((e: any) => e.userId == user.id)
if (index != -1) {
user.statusOnline = onlineUsers[index]
}
if (startDate.length > 0 && startDate.split('-').length == 3) {
let date = startDate.split('-')
user.startDate = `${date[2]}/${date[1]}/${date[0]}`
}
if (endDate.length > 0 && endDate.split('-').length == 3) {
let date = endDate.split('-')
user.endDate = `${date[2]}/${date[1]}/${date[0]}`
}
})
return res.status(200).json(usersProfile);
const data_query_messages = await ShowMessageReport(userId, startDate, endDate);
return res.status(200).json(data_query_messages);
};
export const reportMessagesUserByDateStartDateEnd = async (req: Request, res: Response): Promise<Response> => {
if (req.user.profile !== "master" && req.user.profile !== "admin") {
throw new AppError("ERR_NO_PERMISSION", 403);
}
const { userId, startDate, endDate } = req.query as IndexQuery
const data_query_messages = await ShowMessageReport(userId, startDate, endDate);
return res.status(200).json(data_query_messages);
};

39
backend/src/controllers/TicketController.ts
View File

@ -21,6 +21,8 @@ import format from 'date-fns/format';
type IndexQuery = {
searchParam: string;
pageNumber: string;
@ -44,8 +46,12 @@ import ListStatusChatEndService from "../services/StatusChatEndService/ListStatu
import Ticket from "../models/Ticket";
import ShowUserServiceReport from "../services/UserServices/ShowUserServiceReport";
import TicketEmiterSumOpenClosedByUser from "../helpers/OnlineReporEmiterInfoByUser";
import CountTicketService from "../services/TicketServices/CountTicketService";
import CountTicketsByUserQueue from "../services/UserServices/CountTicketsByUserQueue";
import ShowUserService from "../services/UserServices/ShowUserService";
export const index = async (req: Request, res: Response): Promise<Response> => {
export const index = async (req: Request, res: Response): Promise<Response> => {
const {
pageNumber,
status,
@ -55,8 +61,7 @@ export const index = async (req: Request, res: Response): Promise<Response> => {
queueIds: queueIdsStringified,
withUnreadMessages,
unlimited
} = req.query as IndexQuery;
} = req.query as IndexQuery;
const userId = req.user.id;
@ -99,7 +104,7 @@ export const store = async (req: Request, res: Response): Promise<Response> => {
console.log('TICKET QUEUE CHOICE !!!!!!!')
}
else {
ticket = await CreateTicketService({ contactId, status, userId });
ticket = await CreateTicketService({ contactId, status, userId });
}
const io = getIO();
@ -138,6 +143,17 @@ export const show = async (req: Request, res: Response): Promise<Response> => {
};
export const count = async (req: Request, res: Response): Promise<Response> => {
type indexQ = { status: string; date?: string; };
const {status, date} = req.query as IndexQuery
const ticketCount = await CountTicketService(status, date);
return res.status(200).json(ticketCount);
};
@ -214,19 +230,22 @@ export const update = async (req: Request, res: Response): Promise<Response> =>
const ticketData: TicketData = req.body;
//ticketData: { status: 'open', userId: 4 } , ticketId
//ticketData: { status: 'open', userId: 4 } , ticketId
const { ticket } = await UpdateTicketService({
ticketData,
ticketId
});
const dateToday = splitDateTime(new Date(format(new Date(), 'yyyy-MM-dd HH:mm:ss', { locale: ptBR })))
TicketEmiterSumOpenClosedByUser(ticketData.userId.toString(), dateToday.fullDate, dateToday.fullDate)
ticket2 = ticket
}
// test del
if (userOldInfo) {
@ -234,12 +253,15 @@ export const update = async (req: Request, res: Response): Promise<Response> =>
if (userOldInfo.userId) {
TicketEmiterSumOpenClosedByUser(userOldInfo.userId.toString(), dateToday.fullDate, dateToday.fullDate)
// console.log('FECHOU...')
TicketEmiterSumOpenClosedByUser(userOldInfo.userId.toString(), dateToday.fullDate, dateToday.fullDate)
}
}
//
return res.status(200).json(ticket2);
};
@ -248,7 +270,6 @@ export const update = async (req: Request, res: Response): Promise<Response> =>
// export const update = async (
// req: Request,
// res: Response

2
backend/src/database/seeds/20220221193811-create-scheduling-data.ts
View File

@ -6,7 +6,7 @@ module.exports = {
"StatusChatEnds",
[
{
name: "SEM RETORNO DO CLIENTE",
name: "FINALIZADO",
createdAt: new Date(),
updatedAt: new Date()
},

70
backend/src/helpers/OnlineReporEmiterInfoByUser.ts
View File

@ -3,23 +3,79 @@ import { splitDateTime } from "../helpers/SplitDateTime";
import format from 'date-fns/format';
import ShowUserServiceReport from '../services/UserServices/ShowUserServiceReport';
import { getIO } from "../libs/socket";
import CountTicketsByUserQueue from "../services/UserServices/CountTicketsByUserQueue";
import ShowQueuesByUser from '../services/UserServices/ShowQueuesByUser';
// import CountTicketsByUserQueue from "../services/UserServices/CountTicketsByUserQueue";
const TicketEmiterSumOpenClosedByUser = async (userId: string, startDate: string, endDate: string) => {
const TicketEmiterSumOpenClosedByUser = async (userId: string, startDate: string, endDate: string) => {
const openByUser: any[] = await ShowUserServiceReport({ startDate: startDate, endDate:endDate, ticketStatus: 'open', userId: userId.toString() });
const closedByUser: any[] = await ShowUserServiceReport({ startDate: endDate, endDate:endDate, ticketStatus: 'closed', userId: userId.toString() });
const openByUser: any[] = await ShowUserServiceReport({ startDate: startDate, endDate: endDate, ticketStatus: 'open', userId: userId.toString() });
const closedByUser: any[] = await ShowUserServiceReport({ startDate: endDate, endDate: endDate, ticketStatus: 'closed', userId: userId.toString() });
const openByUserOnQueue: any[] = await CountTicketsByUserQueue({ startDate: startDate, endDate: endDate, status: 'open', clientChatStart: true, userId: userId })
const openByUserOutQueue: any[] = await CountTicketsByUserQueue({ startDate: startDate, endDate: endDate, status: 'open', clientChatStart: false, userId: userId })
const closedByUserOnQueue: any[] = await CountTicketsByUserQueue({ startDate: startDate, endDate: endDate, status: 'closed', clientChatStart: true, userId: userId })
const closedUserOutQueue: any[] = await CountTicketsByUserQueue({ startDate: startDate, endDate: endDate, status: 'closed', clientChatStart: false, userId: userId })
const queuesByUser = await ShowQueuesByUser({ profile: 'user', userId: userId })
let openCloseOnQueue = openByUserOnQueue.concat(closedByUserOnQueue)
let openCloseOutQueue = openByUserOutQueue.concat(closedUserOutQueue)
// OPEN, CLOSED TICKETS STARTED BY CLIENTS
for (let i = 0; i < queuesByUser.length; i++) {
queuesByUser[i].countOpen = 0
queuesByUser[i].countClosed = 0
for (let x = 0; x < openCloseOnQueue.length; x++) {
if ((queuesByUser[i].userId == openCloseOnQueue[x].userId) &&
(queuesByUser[i].queueId == openCloseOnQueue[x].queueId && openCloseOnQueue[x].status == 'open')) {
queuesByUser[i].countOpen = openCloseOnQueue[x].totAttendance
}
else if ((queuesByUser[i].userId == openCloseOnQueue[x].userId) &&
(queuesByUser[i].queueId == openCloseOnQueue[x].queueId && openCloseOnQueue[x].status == 'closed')) {
queuesByUser[i].countClosed = openCloseOnQueue[x].totAttendance
}
}
}
// OPEN, CLOSED TICKETS STARTED BY USERS
let openClosedOutQueue = {}
let open = openCloseOutQueue.filter((e) => e.status == 'open')
let closed = openCloseOutQueue.filter((e) => e.status == 'closed')
openClosedOutQueue = {
...openClosedOutQueue,
userId: userId,
countOpen: open && open.length > 0 ? open[0].totAttendance : 0,
countClosed: closed && closed.length > 0 ? closed[0].totAttendance : 0
}
//openByUser : [ { id: 13, status: 'online' } ]
const io = getIO();
io.emit("onlineStatus", {
action: "update",
userOnlineTime: {
sumOpen: openByUser.length > 0 ? openByUser[0] : { userId: userId, count: '' },
sumClosed: closedByUser.length > 0 ? closedByUser[0] : { userId: userId, count: '' },
userOnlineTime: {
sumOpen: openByUser.length > 0 ? openByUser[0] : { userId: userId, count: '' },
sumClosed: closedByUser.length > 0 ? closedByUser[0] : { userId: userId, count: '' },
openClosedOutQueue: openClosedOutQueue,
openClosedInQueue: queuesByUser
}
});
};

31
backend/src/helpers/SchedulingNotifySendMessage.ts
View File

@ -13,6 +13,8 @@ const fastFolderSize = require('fast-folder-size')
const { promisify } = require('util')
const fs = require('fs')
const { exec } = require("child_process");
let scheduler_monitor: any;
let timeInterval = 5
@ -53,6 +55,35 @@ const monitor = async () => {
}
exec("df -h /", (error: any, stdout: any, stderr: any) => {
if (error) {
console.log(`exec error: ${error.message}`);
return;
}
if (stderr) {
console.log(`exec stderr: ${stderr}`);
return;
}
stdout = stdout.split(/\r?\n/)
stdout = stdout[1].trim().split(/\s+/)
// DISK SPACE MONITORING
const io = getIO();
io.emit("diskSpaceMonit", {
action: "update",
diskSpace: {
size: stdout[1],
used: stdout[2],
available: stdout[3],
use: stdout[4]
}
});
});
// WHATS SESSION SIZE MONITORING
const whatsapps = await ListWhatsAppsService();

2
backend/src/libs/wbot.ts
View File

@ -67,7 +67,7 @@ export const initWbot = async (whatsapp: Whatsapp, backupSessionRestore: boolean
// usando instancia do chrome
const wbot: Session = new Client({
session: sessionCfg, authStrategy: new LocalAuth({ clientId: 'bd_' + whatsapp.id }),
puppeteer: { args: ['--no-sandbox', '--disable-setuid-sandbox'], executablePath: process.env.CHROME_BIN || '/usr/bin/google-chrome-stable' },
puppeteer: { args: ['--no-sandbox', '--disable-setuid-sandbox'], executablePath: process.env.CHROME_BIN || undefined },
});

6
backend/src/routes/ticketRoutes.ts
View File

@ -4,9 +4,11 @@ import isAuth from "../middleware/isAuth";
import * as TicketController from "../controllers/TicketController";
const ticketRoutes = express.Router();
ticketRoutes.get("/tickets", isAuth, TicketController.index);
ticketRoutes.get("/tickets/count", isAuth, TicketController.count);
ticketRoutes.get("/tickets", isAuth, TicketController.index);
ticketRoutes.get("/tickets/:ticketId", isAuth, TicketController.show);

2
backend/src/server.ts
View File

@ -16,4 +16,4 @@ StartAllWhatsAppsSessions();
gracefulShutdown(server);
startSchedulingMonitor(5000)
startWhoIsOnlineMonitor(5000)
startWhoIsOnlineMonitor(2000)

50
backend/src/services/TicketServices/CountTicketService.ts 100644
View File

@ -0,0 +1,50 @@
import Ticket from "../../models/Ticket";
import AppError from "../../errors/AppError";
import { Op, where } from "sequelize";
import { Sequelize } from "sequelize";
import { format } from "date-fns";
import ptBR from 'date-fns/locale/pt-BR';
import { splitDateTime } from "../../helpers/SplitDateTime";
const dateToday = splitDateTime(new Date(format(new Date(), 'yyyy-MM-dd HH:mm:ss', { locale: ptBR })))
const CountTicketService = async (status: string, date?: string): Promise<any> => {
let where_clause = {}
if (date) {
where_clause = {
createdAt: {
[Op.gte]: date + ' 00:00:00.000000',
[Op.lte]: date + ' 23:59:59.999999'
}
}
}
else {
// where_clause = {
// createdAt: {
// [Op.gte]: dateToday.fullDate + ' 00:00:00.000000',
// [Op.lte]: dateToday.fullDate + ' 23:59:59.999999'
// }
// }
}
where_clause = { ...where_clause, status: status }
const ticket = await Ticket.findAll({
where: where_clause,
raw: true,
attributes: [[Sequelize.fn("COUNT", Sequelize.col("Ticket.status")), "count"]],
});
if (!ticket) {
throw new AppError("ERR_NO_TICKET_FOUND", 404);
}
return ticket[0];
};
export default CountTicketService;

8
backend/src/services/TicketServices/CreateTicketService.ts
View File

@ -52,7 +52,13 @@ const CreateTicketService = async ({
//openByUser : [ { id: 13, status: 'online' } ]
TicketEmiterSumOpenClosedByUser(userId.toString(), dateToday.fullDate, dateToday.fullDate)
TicketEmiterSumOpenClosedByUser(userId.toString(), dateToday.fullDate, dateToday.fullDate)
const io = getIO();
io.emit("ticketStatus", {
action: "update",
ticketStatus: {ticketId: ticket.id, status: ticket.status}
});
//

55
backend/src/services/TicketServices/ListTicketsService.ts
View File

@ -39,7 +39,7 @@ const ListTicketsService = async ({
showAll,
userId,
withUnreadMessages,
unlimited='false'
unlimited = 'false'
}: Request): Promise<Response> => {
let whereCondition: Filterable["where"] = {
[Op.or]: [{ userId }, { status: "pending" }],
@ -47,6 +47,8 @@ const ListTicketsService = async ({
};
let includeCondition: Includeable[];
includeCondition = [
{
model: Contact,
@ -65,20 +67,21 @@ const ListTicketsService = async ({
}
if (status) {
whereCondition = {
...whereCondition,
status
};
// if (unlimited) {
// whereCondition = {
// ...whereCondition,
// createdAt: {
// [Op.gte]: dateToday.fullDate + ' 00:00:00.000000',
// [Op.lte]: dateToday.fullDate + ' 23:59:59.999999'
// }
// }
// }
whereCondition = { ...whereCondition, status };
// console.log('TEST unlimited: ', unlimited)
if (unlimited === 'true' && status !== 'pending') {
whereCondition = {
...whereCondition,
createdAt: {
[Op.gte]: dateToday.fullDate + ' 00:00:00.000000',
[Op.lte]: dateToday.fullDate + ' 23:59:59.999999'
}
}
}
}
@ -92,11 +95,7 @@ const ListTicketsService = async ({
as: "messages",
attributes: ["id", "body"],
where: {
body: where(
fn("LOWER", col("body")),
"LIKE",
`%${sanitizedSearchParam}%`
)
body: where(fn("LOWER", col("body")), "LIKE", `%${sanitizedSearchParam}%`)
},
required: false,
duplicating: false
@ -107,19 +106,13 @@ const ListTicketsService = async ({
...whereCondition,
[Op.or]: [
{
"$contact.name$": where(
fn("LOWER", col("contact.name")),
"LIKE",
`%${sanitizedSearchParam}%`
)
"$contact.name$": where(fn("LOWER", col("contact.name")), "LIKE", `%${sanitizedSearchParam}%`)
},
{ "$contact.number$": { [Op.like]: `%${sanitizedSearchParam}%` } },
{
"$message.body$": where(
fn("LOWER", col("body")),
"LIKE",
`%${sanitizedSearchParam}%`
)
{
"$message.body$": where(fn("LOWER", col("body")), "LIKE", `%${sanitizedSearchParam}%`)
}
]
};
@ -151,7 +144,7 @@ const ListTicketsService = async ({
where: whereCondition,
include: includeCondition,
distinct: true,
limit,
limit,
offset,
order: [["updatedAt", "DESC"]]
});

42
backend/src/services/TicketServices/ShowTicketReport.ts
View File

@ -16,12 +16,31 @@ import { startOfDay, endOfDay, parseISO, getDate} from "date-fns";
import { string } from "yup/lib/locale";
import Whatsapp from "../../models/Whatsapp";
interface Request {
userId: string | number;
startDate: string;
endDate: string;
pageNumber?: string;
}
interface Response {
tickets: Ticket[];
count: number;
hasMore: boolean;
}
//Report by user, startDate, endDate
const ShowTicketReport = async (id: string | number, startDate: string, endDate: string): Promise<Ticket[]> => {
const ShowTicketReport = async ({
userId,
startDate,
endDate,
pageNumber = "1"
}: Request): Promise<Response> => {
let where_clause = {}
if(id=='0'){
if(userId=='0'){
where_clause = {
createdAt: {
[Op.gte]: startDate+' 00:00:00.000000',
@ -31,7 +50,7 @@ const ShowTicketReport = async (id: string | number, startDate: string, endDate:
}
else{
where_clause = {
userid: id,
userid: userId,
createdAt: {
[Op.gte]: startDate+' 00:00:00.000000',
[Op.lte]: endDate +' 23:59:59.999999'
@ -40,11 +59,14 @@ const ShowTicketReport = async (id: string | number, startDate: string, endDate:
}
const limit = 40;
const offset = limit * (+pageNumber - 1);
const ticket = await Ticket.findAll({
const {count, rows: tickets} = await Ticket.findAndCountAll({
where: where_clause ,
limit,
offset,
//attributes: ['id', 'status', 'createdAt', 'updatedAt'],
attributes: ['id', 'status', 'statusChatEnd', [Sequelize.fn("DATE_FORMAT",Sequelize.col("Ticket.createdAt"),"%d/%m/%Y %H:%i:%s"),"createdAt"],
@ -81,15 +103,21 @@ const ShowTicketReport = async (id: string | number, startDate: string, endDate:
attributes: ['name']
},
],
order: [
['id', 'ASC']
]
});
const hasMore = count > offset + tickets.length;
if (!ticket) {
if (!tickets) {
throw new AppError("ERR_NO_TICKET_FOUND", 404);
}
return ticket;
return {tickets, count, hasMore};
};
export default ShowTicketReport;

12
backend/src/services/TicketServices/UpdateTicketService.ts
View File

@ -10,7 +10,7 @@ interface TicketData {
status?: string;
userId?: number;
queueId?: number;
statusChatEnd?: string
statusChatEnd?: string
}
interface Request {
@ -58,8 +58,7 @@ const UpdateTicketService = async ({
action: "delete",
ticketId: ticket.id
});
}
}
io.to(ticket.status)
@ -69,6 +68,13 @@ const UpdateTicketService = async ({
action: "update",
ticket
});
io.emit("ticketStatus", {
action: "update",
ticketStatus: {ticketId: ticket.id, status: ticket.status}
});
return { ticket, oldStatus, oldUserId };
};

73
backend/src/services/UserServices/CountTicketsByUserQueue.ts 100644
View File

@ -0,0 +1,73 @@
import { Sequelize, } from "sequelize";
const dbConfig = require("../../config/database");
const sequelize = new Sequelize(dbConfig);
const { QueryTypes } = require('sequelize');
interface Request {
startDate: string;
endDate: string;
status: string;
clientChatStart: boolean;
userId?: string | number;
}
const CountTicketsByUserQueue = async ({ startDate, endDate, status, clientChatStart, userId }: Request): Promise<any[]> => {
let usersQueueInfo = []
if (clientChatStart) {
if (userId) {
// CONSULTANDO POR CONVERSAS INICIADAS PELO CLIENTE
usersQueueInfo = await sequelize.query(`select Users.id as userId, Tickets.status, Queues.id as queueId, Queues.name as queueName, \
(select count(id) from Tickets where userId = Users.id and Tickets.status = '${status}' and Tickets.queueId = Queues.id \
and (date(Tickets.createdAt) BETWEEN '${startDate} 00:00:00.000000' AND '${endDate} 23:59:59.999999')) as totAttendance \
from Tickets inner join Users inner join Queues on Tickets.queueId = Queues.id and Tickets.userId = Users.id and Tickets.status = '${status}' \
and (date(Tickets.createdAt) BETWEEN '${startDate} 00:00:00.000000' AND '${endDate} 23:59:59.999999') and Users.id = '${userId}' group by Users.email, Queues.name;`, { type: QueryTypes.SELECT });
} else {
// CONSULTANDO POR CONVERSAS INICIADAS PELO CLIENTE
usersQueueInfo = await sequelize.query(`select Users.id as userId, Tickets.status, Queues.id as queueId, Queues.name as queueName, \
(select count(id) from Tickets where userId = Users.id and Tickets.status = '${status}' and Tickets.queueId = Queues.id \
and (date(Tickets.createdAt) BETWEEN '${startDate} 00:00:00.000000' AND '${endDate} 23:59:59.999999')) as totAttendance \
from Tickets inner join Users inner join Queues on Tickets.queueId = Queues.id and Tickets.userId = Users.id and Tickets.status = '${status}' \
and (date(Tickets.createdAt) BETWEEN '${startDate} 00:00:00.000000' AND '${endDate} 23:59:59.999999') group by Users.email, Queues.name;`, { type: QueryTypes.SELECT });
}
}
else {
if (userId) {
// CONSULTANDO POR CONVERSAS INICIADAS PELO ATENDENTE
usersQueueInfo = await sequelize.query(`select Users.id as userId, Tickets.status, \
(select count(id) from Tickets where userId = Users.id and Tickets.status = '${status}' and Tickets.queueId is null \
and (date(Tickets.createdAt) BETWEEN '${startDate} 00:00:00.000000' AND '${endDate} 23:59:59.999999')) as totAttendance \
from Tickets inner join Users on \
Tickets.queueId is null and Tickets.userId = Users.id and Tickets.status = '${status}' \
and (date(Tickets.createdAt) BETWEEN '${startDate} 00:00:00.000000' AND '${endDate} 23:59:59.999999') and Users.id = '${userId}' group by Users.email;`, { type: QueryTypes.SELECT });
}
else {
// CONSULTANDO POR CONVERSAS INICIADAS PELO ATENDENTE
usersQueueInfo = await sequelize.query(`select Users.id as userId, Tickets.status, \
(select count(id) from Tickets where userId = Users.id and Tickets.status = '${status}' and Tickets.queueId is null \
and (date(Tickets.createdAt) BETWEEN '${startDate} 00:00:00.000000' AND '${endDate} 23:59:59.999999')) as totAttendance \
from Tickets inner join Users on \
Tickets.queueId is null and Tickets.userId = Users.id and Tickets.status = '${status}' \
and (date(Tickets.createdAt) BETWEEN '${startDate} 00:00:00.000000' AND '${endDate} 23:59:59.999999') group by Users.email;`, { type: QueryTypes.SELECT });
}
}
return usersQueueInfo;
};
export default CountTicketsByUserQueue;

5
backend/src/services/UserServices/CreateOrUpdateOnlineUserService.ts
View File

@ -116,7 +116,8 @@ const CreateOrUpdateUserOnlineTime = async ({
console.log('CreatedAt string: ', createdAtString)
console.log('UpdatedAt string: ', updatedAtString)
//
//
io.emit("onlineStatus", {
action: "update",
@ -132,7 +133,7 @@ const CreateOrUpdateUserOnlineTime = async ({
}
else if (oldStatus == 'offline' && status === 'online') {
await userOnlineTime.update({ status })
io.emit("onlineStatus", {
action: "update",
userOnlineTime: {

87
backend/src/services/UserServices/ListUserParamiterService.ts
View File

@ -1,48 +1,66 @@
import { Op, Sequelize } from "sequelize";
import { Op, Sequelize } from "sequelize";
import Queue from "../../models/Queue";
import User from "../../models/User";
import UserQueue from "../../models/UserQueue";
interface Request {
userId?: string | number;
profile?: string;
userId?: string | number;
profile?: string;
}
const ListUser = async ({ profile, userId }: Request): Promise<User[]> => {
let where_clause = {}
if (userId && profile) {
where_clause = {
[Op.and]: [
{ userId: userId },
{ profile: profile }
]
}
}
const ListUser = async ({profile, userId}: Request): Promise<User[]> => {
let where_clause = {}
if(userId && profile){
where_clause = {
[Op.and]: [
{userId: userId},
{profile: profile}
]
}
else if (userId) {
where_clause = {
[Op.and]: [
{ userId: userId },
]
}
else if(userId){
where_clause = {
[Op.and]: [
{userId: userId},
]
}
}
else if(profile){
where_clause = {
profile: profile
}
}
else if (profile) {
where_clause = {
profile: profile
}
}
const users = await User.findAll({
const users = await User.findAll({
where: where_clause,
raw:true,
raw: true,
attributes: ['id', 'name', 'email'],
order: [["id", "ASC"]],
})
// include: [
// {
// model: UserQueue,
// separate: true,
// attributes: ['id',],
// order: [
// ['createdAt', 'ASC']
// ]
// },
// ],
order: [["id", "ASC"]],
})
return users;
};
@ -51,4 +69,3 @@ export default ListUser;

4
backend/src/services/UserServices/ListUsersOnlineOfflineService.ts
View File

@ -61,11 +61,11 @@ const ListUserOnlineOffline = async ({date, userId, status}: Request): Promise<U
attributes: ['id', 'userId', 'status',
[Sequelize.fn("DATE_FORMAT",Sequelize.col("UserOnlineTime.onlineTime"),"%Y-%m-%d %H:%i:%s"),"onlineTime"],
[Sequelize.fn("DATE_FORMAT",Sequelize.col("UserOnlineTime.createdAt"),"%Y-%m-%d %H:%i:%s"),"createdAt"],
[Sequelize.fn("DATE_FORMAT",Sequelize.col("UserOnlineTime.createdAt"),"%Y-%m-%d %H:%i:%s"),"createdAt"],
[Sequelize.fn("DATE_FORMAT",Sequelize.col("UserOnlineTime.updatedAt"),"%Y-%m-%d %H:%i:%s"),"updatedAt"]],
order: [["id", "ASC"]],
})
})
return users;

40
backend/src/services/UserServices/ShowQueuesByUser.ts 100644
View File

@ -0,0 +1,40 @@
import { Sequelize, } from "sequelize";
const dbConfig = require("../../config/database");
const sequelize = new Sequelize(dbConfig);
const { QueryTypes } = require('sequelize');
interface Request {
profile: string;
userId?: string | number;
}
const QueuesByUser = async ({ profile, userId }: Request): Promise<any[]> => {
let queueByUsersInfo = []
if (userId) {
// CONSULTANDO FILAS PELO ID DO USUARIO
queueByUsersInfo = await sequelize.query(`select UserQueues.userId, UserQueues.queueId, Users.name,
Queues.name, Queues.color from UserQueues inner join Users inner join Queues on
UserQueues.queueId = Queues.id and UserQueues.userId = Users.id and Users.id = '${userId}' and Users.profile = '${profile}' order by userId, queueId;`, { type: QueryTypes.SELECT });
} else {
// CONSULTANDO FILAS PELO USUARIO
queueByUsersInfo = await sequelize.query(`select UserQueues.userId, UserQueues.queueId, Users.name,
Queues.name, Queues.color from UserQueues inner join Users inner join Queues on
UserQueues.queueId = Queues.id and UserQueues.userId = Users.id and Users.profile = '${profile}' order by userId, queueId;`, { type: QueryTypes.SELECT });
}
return queueByUsersInfo;
};
export default QueuesByUser;

2
backend/src/services/UserServices/ShowUserServiceReport.ts
View File

@ -106,6 +106,8 @@ const ShowUserServiceReport = async ({
}
// console.log('>>>>>>>>>>>>>> objQuery: ', objQuery)
if (!objQuery) {

1
backend/src/services/WbotServices/wbotMessageListener.ts
View File

@ -825,6 +825,7 @@ const handleMsgAck = async (msg: WbotMessage, ack: MessageAck) => {
action: "update",
message: messageToUpdate
});
} catch (err) {
Sentry.captureException(err);
logger.error(`Error handling message ack. Err: ${err}`);

193
frontend/src/components/DashboardUser/CardUser.jsx 100644
View File

@ -0,0 +1,193 @@
import React from "react";
import Paper from "@material-ui/core/Paper";
import Grid from "@material-ui/core/Grid";
import Typography from "@material-ui/core/Typography";
import Avatar from "@mui/material/Avatar";
import Card from "@mui/material/Card";
import CardHeader from "@mui/material/CardHeader";
import CardContent from "@mui/material/CardContent";
import CardActions from "@mui/material/CardActions";
import { Button } from "@material-ui/core";
import Box from "@mui/material/Box";
import InputLabel from "@mui/material/InputLabel";
import MenuItem from "@mui/material/MenuItem";
import FormControl from "@mui/material/FormControl";
import Select from "@mui/material/Select";
import TextField from "@mui/material/TextField";
import CancelIcon from "@material-ui/icons/Cancel";
import CheckCircleIcon from "@material-ui/icons/CheckCircle";
import ErrorIcon from "@material-ui/icons/Error";
import RemoveCircleIcon from "@material-ui/icons/RemoveCircle";
const CardUser = ({ classes, usersOnlineInfo, logout }) => {
const [search, setSearch] = React.useState("");
const [filterStatus, setFilterStatus] = React.useState(null);
const handleFilterChange = (event) => {
setFilterStatus(event.target.value);
};
const handlesearch = (event) => {
setSearch(event.target.value.toLowerCase());
};
return (
<Grid item xs={12}>
<Paper className={classes.cardPaperFix} sx={12} variant="outlined">
<Grid container sx={12} justifyContent="space-between" alignItems="baseline">
<Grid item sx={4}>
<Typography
component="h4"
variant="h6"
color="primary"
style={{ marginBottom: "16px" }}
>
Lista de Usuários
</Typography>
</Grid>
<Grid item sx={8} width="100%">
<Box sx={{ marginBottom: 2, display: "flex", gap: "12px" }}>
<TextField
id="outlined-basic"
label="Usuário"
variant="standard"
value={search}
onChange={handlesearch}
/>
<FormControl fullWidth variant="standard">
<InputLabel id="status">Status</InputLabel>
<Select
labelId="status"
id="status"
value={filterStatus}
label="Status"
onChange={handleFilterChange}
>
<MenuItem value={null}>Todos</MenuItem>
<MenuItem value={"online"}>Online</MenuItem>
<MenuItem value={"offline"}>Offline</MenuItem>
<MenuItem value={"not"}>Não entrou</MenuItem>
</Select>
</FormControl>
</Box>
</Grid>
</Grid>
<Grid container spacing={3}>
{usersOnlineInfo &&
usersOnlineInfo
.filter((e) => {
if (filterStatus === null) return e;
if (filterStatus === "not") return !e.statusOnline;
return e.statusOnline && e.statusOnline.status === filterStatus;
})
.filter((e) => {
return e.name.toLowerCase().includes(search);
})
.sort((a) => {
if (a.statusOnline) {
if (a.statusOnline.status === "online") {
return -1;
}
return 0;
}
return 0;
})
.map((user, index) => (
<Grid
item
xs={12}
sm={6}
md={6}
lg={3}
key={index}
style={{ position: "relative" }}
>
<Card variant="outlined">
<CardHeader
avatar={
<Avatar
style={{
backgroundColor: user.statusOnline
? user.statusOnline.status === "online"
? "green"
: user.statusOnline.status === "offline"
? "red"
: "black"
: "grey",
}}
>
{user.statusOnline ? (
user.statusOnline.status === "online" ? (
<CheckCircleIcon style={{ color: "white" }} />
) : user.statusOnline.status === "offline" ? (
<CancelIcon style={{ color: "white" }} />
) : (
<ErrorIcon style={{ color: "yellow" }} />
)
) : (
<RemoveCircleIcon style={{ color: "black" }} />
)}
</Avatar>
}
title={
<Typography variant="h5" component="div">
{user.name}
</Typography>
}
/>
<CardContent>
<Typography variant="h6" component="h1" color="textPrimary">
Em atendimento:
<Typography component="p" color="textPrimary" paragraph>
{user.sumOpen && user.sumOpen.count ? user.sumOpen.count : 0}
</Typography>
</Typography>
<Typography variant="h6" component="h1" color="textPrimary">
Finalizado:
<Typography component="p" color="textPrimary" paragraph>
{user.sumClosed && user.sumClosed.count ? user.sumClosed.count : 0}
</Typography>
</Typography>
<Typography variant="h6" component="h1" color="textPrimary">
Tempo online:
<Typography component="p" color="textPrimary" paragraph>
{user.sumOnlineTime && user.sumOnlineTime.sum
? user.sumOnlineTime.sum
: "Não entrou Hoje"}
</Typography>
</Typography>
</CardContent>
<CardActions>
{user.statusOnline &&
user.statusOnline.status === "online" &&
user.statusOnline && (
<Button
className={classes.logginBtn}
variant="contained"
color="primary"
onClick={(e) => {
logout(user.id);
}}
>
{"Deslogar"}
</Button>
)}
</CardActions>
</Card>
</Grid>
))}
</Grid>
</Paper>
</Grid>
);
};
export default CardUser;

208
frontend/src/components/DashboardUser/TableUser.jsx 100644
View File

@ -0,0 +1,208 @@
import React from "react";
import Select from "@mui/material/Select";
import TextField from "@mui/material/TextField";
import Typography from "@material-ui/core/Typography";
import Grid from "@material-ui/core/Grid";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableContainer from "@material-ui/core/TableContainer";
import TableHead from "@material-ui/core/TableHead";
import TableRow from "@material-ui/core/TableRow";
import Paper from "@material-ui/core/Paper";
import Box from "@mui/material/Box";
import InputLabel from "@mui/material/InputLabel";
import MenuItem from "@mui/material/MenuItem";
import FormControl from "@mui/material/FormControl";
import CancelIcon from "@material-ui/icons/Cancel";
import CheckCircleIcon from "@material-ui/icons/CheckCircle";
import ErrorIcon from "@material-ui/icons/Error";
import RemoveCircleIcon from "@material-ui/icons/RemoveCircle";
import PowerSettingsNewIcon from "@material-ui/icons/PowerSettingsNew";
const TableUser = ({ classes, usersOnlineInfo, logout }) => {
const [search, setSearch] = React.useState("");
const [filterStatus, setFilterStatus] = React.useState(null);
const handleFilterChange = (event) => {
setFilterStatus(event.target.value);
};
const handlesearch = (event) => {
setSearch(event.target.value.toLowerCase());
};
console.log(usersOnlineInfo);
return (
<Grid item xs={12}>
<Paper className={classes.cardPaperFix} sx={12} variant="outlined">
<Grid container sx={12} justifyContent="space-between" alignItems="baseline">
<Grid item sx={4}>
<Typography
component="h4"
variant="h6"
color="primary"
style={{ marginBottom: "16px" }}
>
Lista de Usuários
</Typography>
</Grid>
<Grid item sx={8} width="100%">
<Box sx={{ marginBottom: 2, display: "flex", gap: "12px" }}>
<TextField
id="outlined-basic"
label="Usuário"
variant="standard"
value={search}
onChange={handlesearch}
/>
<FormControl fullWidth variant="standard">
<InputLabel id="status">Status</InputLabel>
<Select
labelId="status"
id="status"
value={filterStatus}
label="Status"
onChange={handleFilterChange}
>
<MenuItem value={null}>Todos</MenuItem>
<MenuItem value={"online"}>Online</MenuItem>
<MenuItem value={"offline"}>Offline</MenuItem>
<MenuItem value={"not"}>Não entrou</MenuItem>
</Select>
</FormControl>
</Box>
</Grid>
</Grid>
<Grid container spacing={3} style={{ marginTop: "16px", marginBottom: "16px" }}>
<TableContainer component={Paper}>
<Table>
<TableHead>
<TableRow className={classes.tableRowHead}>
<TableCell>Nome</TableCell>
<TableCell>Em Atendimento/Finalizado(s)</TableCell>
<TableCell>Por Fila abertos</TableCell>
<TableCell>Por Fila Fechados</TableCell>
<TableCell>Tempo Online</TableCell>
<TableCell>Ações</TableCell>
</TableRow>
</TableHead>
<TableBody>
{usersOnlineInfo &&
usersOnlineInfo
.filter((e) => {
if (filterStatus === null) return e;
if (filterStatus === "not") return !e.statusOnline;
return e.statusOnline && e.statusOnline.status === filterStatus;
})
.filter((e) => {
return e.name.toLowerCase().includes(search);
})
.sort((a) => {
if (a.statusOnline) {
if (a.statusOnline.status === "online") {
return -1;
}
return 0;
}
return 0;
})
.map((user, index) => (
<TableRow key={index} className={classes.tableRowBody}>
<TableCell>
<Typography
style={{ display: "flex", verticalAlign: "center", gap: "6px" }}
>
{user.statusOnline ? (
user.statusOnline.status === "online" ? (
<CheckCircleIcon style={{ color: "green" }} />
) : user.statusOnline.status === "offline" ? (
<CancelIcon style={{ color: "red" }} />
) : (
<ErrorIcon style={{ color: "gold" }} />
)
) : (
<RemoveCircleIcon style={{ color: "black" }} />
)}
{user.name}
</Typography>
</TableCell>
<TableCell>
<div style={{ display: "flex", alignItems: "center", gap: "12px" }}>
<Typography className={classes.tableCounterOpen}>
{user.sumOpen ? user.sumOpen.count : "0"}
</Typography>
<Typography className={classes.tableCounterClosed}>
{user.sumClosed ? user.sumClosed.count : "0"}
</Typography>
</div>
</TableCell>
<TableCell>
<div
style={{
display: "flex",
flexWrap: "wrap",
alignItems: "center",
gap: "12px",
}}
>
<Typography title="Cobrança">0</Typography>
<Typography>0</Typography>
<Typography>0</Typography>
<Typography>0</Typography>
<Typography>0</Typography>
</div>
</TableCell>
<TableCell>
<div
style={{
display: "flex",
flexWrap: "wrap",
alignItems: "center",
gap: "12px",
}}
>
<Typography title="Cobrança">0</Typography>
<Typography>0</Typography>
<Typography>0</Typography>
<Typography>0</Typography>
<Typography>0</Typography>
</div>
</TableCell>
<TableCell>
{user.sumOnlineTime ? user.sumOnlineTime.sum : "Não entrou"}
</TableCell>
<TableCell>
{user.statusOnline && user.statusOnline.status === "online" ? (
<PowerSettingsNewIcon
style={{ color: "red", cursor: "pointer" }}
onClick={(e) => {
logout(user.id);
}}
/>
) : (
<PowerSettingsNewIcon
style={{ color: "grey", cursor: "not-allowed" }}
/>
)}
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</TableContainer>
</Grid>
</Paper>
</Grid>
);
};
export default TableUser;

8
frontend/src/components/MessagesList/index.js
View File

@ -362,15 +362,17 @@ const MessagesList = ({ ticketId, isGroup }) => {
socket.on("connect", () => socket.emit("joinChatBox", ticketId));
socket.on("appMessage", (data) => {
if (data.action === "create") {
dispatch({ type: "ADD_MESSAGE", payload: data.message });
// console.log('* NOVA MENSAGEM CAP: ', data.message)
dispatch({ type: "ADD_MESSAGE", payload: data.message });
scrollToBottom();
}
if (data.action === "update") {
console.log('2 THIS IS THE DATA: ', data)
dispatch({ type: "UPDATE_MESSAGE", payload: data.message });
}
});

170
frontend/src/components/Report/MTable/index.js
View File

@ -4,82 +4,154 @@ import MaterialTable from 'material-table';
import Modal from '../Modal'
import { render } from '@testing-library/react';
import chat from '@material-ui/icons/Chat';
// import Button from "@material-ui/core/Button";
import React from 'react';
const MTable = (props) => {
const [selectedRow, setSelectedRow] = useState(null);
const tableRef = React.useRef();
const openInNewTab = url => {
window.open(url, '_blank', 'noopener,noreferrer');
};
const [selectedRow, setSelectedRow] = useState(null);
//const dataLoad = props.data.map((dt) => { return { ...dt }});
const dataLoad = props.data.map(({ user, ...others }) => ({ ...others, 'user': user ? user : { name: 'Aguardando atendente', email: '' } }));
const columnsLoad = props.columns.map((column) => { return { ...column } });
useEffect(() => {
console.log(`You have clicked the button ${selectedRow} times`)
// console.log('TABLE REF: ', tableRef)
}, [selectedRow]);
useEffect(() => {
if (!tableRef.current) return
const element = tableRef.current.tableContainerDiv.current;
element.addEventListener('scroll', props.handleScroll);
return () => {
element.removeEventListener('scroll', props.handleScroll);
};
}, [props]);
return (
<MaterialTable
title={props.table_title}
columns={columnsLoad}
data={dataLoad}
<>
{/* <Button onClick={handleTest}>Toggle</Button> */}
maxWidth={true}
onRowClick={(evt, selectedRow) => {
{/* <CircularProgress /> */}
if(props.removeClickRow){
return
<MaterialTable
title={props.table_title}
columns={columnsLoad}
data={dataLoad}
maxWidth={true}
tableRef={tableRef}
localization={{ header: { actions: props.hasChild ? 'Ticket' : null },}}
onRowClick={(evt, selectedRow) => {
if (props.removeClickRow) {
return
}
console.log(selectedRow.tableData.id);
console.log(selectedRow);
console.log(selectedRow.messages);
setSelectedRow(selectedRow.tableData.id)
if (props.hasChild) {
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)
//evt.stopPropagation()
}
console.log(selectedRow.tableData.id);
console.log(selectedRow);
console.log(selectedRow.messages);
setSelectedRow(selectedRow.tableData.id)
if (props.hasChild) {
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)
//evt.stopPropagation()
}
}
actions={[
(rowData) => {
options={{
search: true,
selection: false,
paging: false,
padding: 'dense',
sorting: true ? props.hasChild : false,
//loadingType: 'linear',
searchFieldStyle: {
width: 300,
},
if(props.hasChild){
return {
icon: chat,
tooltip: `Ticket id ${rowData.id}`,
disable: false,
onClick: (event, rowData) => {
openInNewTab(`/tickets/${rowData.id}`)
}
}
}
}
]}
options={{
search: true,
selection: false,
paging: false,
padding: 'dense',
exportButton: props.hasChild ? true : null,
exportAllData: true,
sorting: true ? props.hasChild : false,
// loadingType: 'circular',
searchFieldStyle: {
width: 300,
},
pageSize: 20,
headerStyle: {
position: "sticky",
top: "0"
},
maxBodyHeight: "400px",
// minBodyHeight: "85vh", //FIXME to calculate dynamic height, needed for correct scroll position identification
// maxBodyHeight: "85vh",
rowStyle: rowData => ({
fontSize: 12,
backgroundColor: selectedRow === rowData.tableData.id ? '#ec5114' : '#FFF'
})
}}
/>
</>
pageSize: 20,
headerStyle: {
position: "sticky",
top: "0"
},
maxBodyHeight: "400px",
rowStyle: rowData => ({
fontSize: 12,
backgroundColor: selectedRow === rowData.tableData.id ? '#ec5114' : '#FFF'
})
}}
/>
);
};

2
frontend/src/components/TicketActionButtons/index.js
View File

@ -35,7 +35,7 @@ const TicketActionButtons = ({ ticket, statusChatEnd }) => {
const ticketOptionsMenuOpen = Boolean(anchorEl);
const { user } = useContext(AuthContext);
const handleOpenTicketOptionsMenu = e => {
const handleOpenTicketOptionsMenu = e => {
setAnchorEl(e.currentTarget);
};

32
frontend/src/components/TicketsList/index.js
View File

@ -10,7 +10,8 @@ import TicketsListSkeleton from "../TicketsListSkeleton";
import useTickets from "../../hooks/useTickets";
import { i18n } from "../../translate/i18n";
import { AuthContext } from "../../context/Auth/AuthContext";
import { AuthContext } from "../../context/Auth/AuthContext";
const useStyles = makeStyles(theme => ({
ticketsListWrapper: {
@ -73,9 +74,9 @@ const useStyles = makeStyles(theme => ({
const reducer = (state, action) => {
if (action.type === "LOAD_TICKETS") {
const newTickets = action.payload;
const newTickets = action.payload;
newTickets.forEach(ticket => {
// console.log('* ticket.unreadMessages: ',ticket.unreadMessages)
@ -108,7 +109,7 @@ const reducer = (state, action) => {
if (action.type === "UPDATE_TICKET") {
const ticket = action.payload;
// console.log('++++++++++++ UPDATE_TICKET: ',ticket)
// console.log('++++++++++++ UPDATE_TICKET: ',ticket)
const ticketIndex = state.findIndex(t => t.id === ticket.id);
if (ticketIndex !== -1) {
@ -124,23 +125,23 @@ const reducer = (state, action) => {
const message = action.payload.message
const ticket = action.payload.ticket;
const ticket = action.payload.ticket;
const ticketIndex = state.findIndex(t => t.id === ticket.id);
if (ticketIndex !== -1) {
// console.log('>>>>>> ticketIndex: ', ticketIndex)
// console.log('&&&&&&& UPDATE_TICKET_UNREAD_MESSAGES ticket: ',ticket, ' |\n MESSAGE: ', message)
if(!message.fromMe){
ticket.unreadMessages +=1
if (!message.fromMe) {
ticket.unreadMessages += 1
}
state[ticketIndex] = ticket;
state.unshift(state.splice(ticketIndex, 1)[0]);
} else {
state.unshift(ticket);
}
@ -195,6 +196,9 @@ const TicketsList = (props) => {
useEffect(() => {
if (!status && !searchParam) return;
// console.log('lllllllllllllllllllllllllllllllll')
dispatch({
type: "LOAD_TICKETS",
payload: tickets,
@ -220,7 +224,8 @@ const TicketsList = (props) => {
});
socket.on("ticket", data => {
socket.on("ticket", data => {
if (data.action === "updateUnread") {
dispatch({
type: "RESET_UNREAD",
@ -241,7 +246,7 @@ const TicketsList = (props) => {
if (data.action === "delete") {
dispatch({ type: "DELETE_TICKET", payload: data.ticketId });
}
}
});
socket.on("appMessage", data => {
@ -286,6 +291,7 @@ const TicketsList = (props) => {
};
const handleScroll = e => {
if (!hasMore || loading) return;
const { scrollTop, scrollHeight, clientHeight } = e.currentTarget;

1
frontend/src/components/TicketsManager/index.js
View File

@ -125,7 +125,6 @@ const TicketsManager = () => {
const handleSearch = (e) => {
const searchedTerm = e.target.value.toLowerCase().trim();
console.log(searchedTerm)
clearTimeout(searchTimeout);

2
frontend/src/hooks/useTickets/index.js
View File

@ -15,7 +15,7 @@ const useTickets = ({
}) => {
const [loading, setLoading] = useState(true);
const [hasMore, setHasMore] = useState(false);
const [tickets, setTickets] = useState([]);
const [tickets, setTickets] = useState([]);
useEffect(() => {
setLoading(true);

25
frontend/src/hooks/useWhatsApps/index.js
View File

@ -39,6 +39,19 @@ const reducer = (state, action) => {
}
// if (action.type === "UPDATE_DISK_SPACE_MONIT") {
// const whatsApp = action.payload;
// const whatsAppIndex = state.findIndex(s => s.id === whatsApp.id);
// if (whatsAppIndex !== -1) {
// state[whatsAppIndex].sessionSize = whatsApp.sessionSize;
// return [...state];
// } else {
// return [whatsApp, ...state];
// }
// }
if (action.type === "UPDATE_WHATSAPPS_SESSION_MONIT") {
const whatsApp = action.payload;
const whatsAppIndex = state.findIndex(s => s.id === whatsApp.id);
@ -106,11 +119,7 @@ const useWhatsApps = () => {
dispatch({ type: "UPDATE_SESSION", payload: data.session });
}
});
//test del
});
socket.on("whatsappSessionMonit", data => {
if (data.action === "update") {
@ -119,9 +128,9 @@ const useWhatsApps = () => {
dispatch({ type: "UPDATE_WHATSAPPS_SESSION_MONIT", payload: data.whatsappSessionSize });
}
});
//
});
return () => {
socket.disconnect();

429
frontend/src/pages/Connections/index.js
View File

@ -1,7 +1,9 @@
import React, { useState, useCallback, useContext } from "react";
import React, { useState, useCallback, useEffect, useContext } from "react";
import { toast } from "react-toastify";
import { format, parseISO } from "date-fns";
import openSocket from "socket.io-client";
import { makeStyles } from "@material-ui/core/styles";
import { green } from "@material-ui/core/colors";
import {
@ -111,6 +113,8 @@ const Connections = () => {
const [selectedWhatsApp, setSelectedWhatsApp] = useState(null);
const [confirmModalOpen, setConfirmModalOpen] = useState(false);
const [diskSpaceInfo, setDiskSpaceInfo] = useState({});
@ -324,6 +328,23 @@ const Connections = () => {
);
};
useEffect(() => {
const socket = openSocket(process.env.REACT_APP_BACKEND_URL);
socket.on("diskSpaceMonit", data => {
if (data.action === "update") {
setDiskSpaceInfo(data.diskSpace)
}
});
return () => {
socket.disconnect();
};
}, []);
return (
<Can
@ -355,7 +376,10 @@ const Connections = () => {
/>
<MainHeader>
<Title>{i18n.t("connections.title")}</Title>
<MainHeaderButtonsWrapper>
<Can
role={user.profile}
@ -370,193 +394,236 @@ const Connections = () => {
)}
/>
</MainHeaderButtonsWrapper>
</MainHeader>
<Paper className={classes.mainPaper} variant="outlined">
<Table size="small">
<TableHead>
<TableRow>
<>
<TableCell align="center">
{i18n.t("connections.table.name")}
</TableCell>
<TableCell align="center">
{i18n.t("connections.table.status")}
</TableCell>
<Can
role={user.profile}
perform="connection-button:show"
yes={() => (
<TableCell align="center">
{i18n.t("connections.table.session")}
</TableCell>
)}
/>
<Can
role={user.profile}
perform="connection-button:show"
yes={() => (
<TableCell align="center">
Restore
</TableCell>
)}
/>
<Can
role={user.profile}
perform="connection-button:show"
yes={() => (
<TableCell align="center">
Session MB
</TableCell>
)}
/>
<TableCell align="center">
{i18n.t("connections.table.lastUpdate")}
</TableCell>
<TableCell align="center">
{i18n.t("connections.table.default")}
</TableCell>
<TableCell align="center">
{i18n.t("connections.table.actions")}
</TableCell>
</TableRow>
</TableHead>
<TableBody>
{loading ? (
<TableRowSkeleton />
) : (
<Can
role={user.profile}
perform="space-disk-info:show"
yes={() => (
<>
{whatsApps?.length > 0 &&
whatsApps.map(whatsApp => (
<TableRow key={whatsApp.id}>
<TableCell align="center">{whatsApp.name}</TableCell>
<TableCell align="center">
{renderStatusToolTips(whatsApp)}
</TableCell>
<Can
role={user.profile}
perform="connection-button:show"
yes={() => (
<TableCell align="center">
{renderActionButtons(whatsApp)}
</TableCell>
)}
/>
<Can
role={user.profile}
perform="connection-button:show"
yes={() => (
<TableCell align="center">
<Button
size="small"
variant="contained"
color="primary"
onClick={() => handleRestartWhatsAppSession(whatsApp.id)}
>
Restore
</Button>
</TableCell>
)}
/>
<Can
role={user.profile}
perform="connection-button:show"
yes={() => (
<TableCell align="center">
<CustomToolTip
title={'Informação da sessão em Megabytes'}
content={'Tamanho do diretorio da sessão atualizado a cada 5 segundos'}
>
<div>{whatsApp.sessionSize}</div>
</CustomToolTip>
</TableCell>
)}
/>
<TableCell align="center">
{format(parseISO(whatsApp.updatedAt), "dd/MM/yy HH:mm")}
</TableCell>
<TableCell align="center">
{whatsApp.isDefault && (
<div className={classes.customTableCell}>
<CheckCircle style={{ color: green[500] }} />
</div>
)}
</TableCell>
<TableCell align="center">
<Can
role={user.profile}
perform="show-icon-edit-whatsapp"
yes={() => (
<IconButton
size="small"
onClick={() => handleEditWhatsApp(whatsApp)}
>
<Edit />
</IconButton>
)}
/>
<Can
role={user.profile}
perform="btn-remove-whatsapp"
yes={() => (
<IconButton
size="small"
onClick={e => {
handleOpenConfirmationModal("delete", whatsApp.id);
}}
>
<DeleteOutline />
</IconButton>
)}
/>
</TableCell>
</TableRow>
))}
</>
<Table size="small">
<TableHead>
<TableRow>
<TableCell align="center">
Size
</TableCell>
<TableCell align="center">
Used
</TableCell>
<TableCell align="center">
Available
</TableCell>
<TableCell align="center">
Use%
</TableCell>
</TableRow>
</TableHead>
<TableBody>
<TableRow>
<TableCell align="center">{diskSpaceInfo.size}</TableCell>
<TableCell align="center">{diskSpaceInfo.used}</TableCell>
<TableCell align="center">{diskSpaceInfo.available}</TableCell>
<TableCell align="center">{diskSpaceInfo.use}</TableCell>
</TableRow>
</TableBody>
</Table>
<br />
</>
)}
</TableBody>
</Table>
/>
<Table size="small">
<TableHead>
<TableRow>
<TableCell align="center">
{i18n.t("connections.table.name")}
</TableCell>
<TableCell align="center">
{i18n.t("connections.table.status")}
</TableCell>
<Can
role={user.profile}
perform="connection-button:show"
yes={() => (
<TableCell align="center">
{i18n.t("connections.table.session")}
</TableCell>
)}
/>
<Can
role={user.profile}
perform="connection-button:show"
yes={() => (
<TableCell align="center">
Restore
</TableCell>
)}
/>
<Can
role={user.profile}
perform="connection-button:show"
yes={() => (
<TableCell align="center">
Session MB
</TableCell>
)}
/>
<TableCell align="center">
{i18n.t("connections.table.lastUpdate")}
</TableCell>
<TableCell align="center">
{i18n.t("connections.table.default")}
</TableCell>
<TableCell align="center">
{i18n.t("connections.table.actions")}
</TableCell>
</TableRow>
</TableHead>
<TableBody>
{loading ? (
<TableRowSkeleton />
) : (
<>
{whatsApps?.length > 0 &&
whatsApps.map(whatsApp => (
<TableRow key={whatsApp.id}>
<TableCell align="center">{whatsApp.name}</TableCell>
<TableCell align="center">
{renderStatusToolTips(whatsApp)}
</TableCell>
<Can
role={user.profile}
perform="connection-button:show"
yes={() => (
<TableCell align="center">
{renderActionButtons(whatsApp)}
</TableCell>
)}
/>
<Can
role={user.profile}
perform="connection-button:show"
yes={() => (
<TableCell align="center">
<Button
size="small"
variant="contained"
color="primary"
onClick={() => handleRestartWhatsAppSession(whatsApp.id)}
>
Restore
</Button>
</TableCell>
)}
/>
<Can
role={user.profile}
perform="connection-button:show"
yes={() => (
<TableCell align="center">
<CustomToolTip
title={'Informação da sessão em Megabytes'}
content={'Tamanho do diretorio da sessão atualizado a cada 5 segundos'}
>
<div>{whatsApp.sessionSize}</div>
</CustomToolTip>
</TableCell>
)}
/>
<TableCell align="center">
{format(parseISO(whatsApp.updatedAt), "dd/MM/yy HH:mm")}
</TableCell>
<TableCell align="center">
{whatsApp.isDefault && (
<div className={classes.customTableCell}>
<CheckCircle style={{ color: green[500] }} />
</div>
)}
</TableCell>
<TableCell align="center">
<Can
role={user.profile}
perform="show-icon-edit-whatsapp"
yes={() => (
<IconButton
size="small"
onClick={() => handleEditWhatsApp(whatsApp)}
>
<Edit />
</IconButton>
)}
/>
<Can
role={user.profile}
perform="btn-remove-whatsapp"
yes={() => (
<IconButton
size="small"
onClick={e => {
handleOpenConfirmationModal("delete", whatsApp.id);
}}
>
<DeleteOutline />
</IconButton>
)}
/>
</TableCell>
</TableRow>
))}
</>
)}
</TableBody>
</Table>
</>
</Paper>
</MainContainer>
)}

9
frontend/src/pages/Contacts/index.js
View File

@ -36,17 +36,23 @@ import { AuthContext } from "../../context/Auth/AuthContext";
import { Can } from "../../components/Can";
const reducer = (state, action) => {
if (action.type === "LOAD_CONTACTS") {
const contacts = action.payload;
const newContacts = [];
contacts.forEach((contact) => {
const contactIndex = state.findIndex((c) => c.id === contact.id);
if (contactIndex !== -1) {
state[contactIndex] = contact;
} else {
newContacts.push(contact);
}
});
return [...state, ...newContacts];
@ -210,6 +216,9 @@ const Contacts = () => {
const handleScroll = (e) => {
if (!hasMore || loading) return;
const { scrollTop, scrollHeight, clientHeight } = e.currentTarget;
// console.log('scrollTop: ', scrollTop, ' | scrollHeight: ', scrollHeight, ' | clientHeight: ', clientHeight)
if (scrollHeight - (scrollTop + 100) < clientHeight) {
loadMore();
}

14
frontend/src/pages/Dashboard/Chart.js vendored
View File

@ -16,11 +16,11 @@ import { i18n } from "../../translate/i18n";
import Title from "./Title";
import useTickets from "../../hooks/useTickets";
const Chart = () => {
const Chart = (props) => {
const theme = useTheme();
const date = useRef(new Date().toISOString());
const { tickets } = useTickets({ date: date.current });
let { tickets } = useTickets({ date: date.current, unlimited: "true" });
const [chartData, setChartData] = useState([
{ time: "08:00", amount: 0 },
@ -42,10 +42,7 @@ const Chart = () => {
let aux = [...prevState];
aux.forEach(a => {
tickets.forEach(ticket => {
format(startOfHour(parseISO(ticket.createdAt)), "HH:mm") === a.time &&
a.amount++;
});
tickets.forEach(ticket => { format(startOfHour(parseISO(ticket.createdAt)), "HH:mm") === a.time && a.amount++; });
});
return aux;
@ -54,9 +51,8 @@ const Chart = () => {
return (
<React.Fragment>
<Title>{`${i18n.t("dashboard.charts.perDay.title")}${
tickets.length
}`}</Title>
<Title>{`${i18n.t("dashboard.charts.perDay.title")}${tickets.length
}`}</Title>
<ResponsiveContainer>
<BarChart
data={chartData}

303
frontend/src/pages/Dashboard/index.js
View File

@ -5,25 +5,10 @@ import Container from "@material-ui/core/Container";
import Grid from "@material-ui/core/Grid";
import { makeStyles } from "@material-ui/core/styles";
import Typography from "@material-ui/core/Typography";
import Card from "@mui/material/Card";
import CardHeader from "@mui/material/CardHeader";
import CardContent from "@mui/material/CardContent";
import CardActions from "@mui/material/CardActions";
import Avatar from "@mui/material/Avatar";
import Tooltip from "@mui/material/Tooltip";
import Zoom from "@mui/material/Zoom";
import IconButton from "@mui/material/IconButton";
import Box from "@mui/material/Box";
import InputLabel from "@mui/material/InputLabel";
import MenuItem from "@mui/material/MenuItem";
import FormControl from "@mui/material/FormControl";
import Select from "@mui/material/Select";
import TextField from "@mui/material/TextField";
import Info from "@material-ui/icons/Info";
import CancelIcon from "@material-ui/icons/Cancel";
import CheckCircleIcon from "@material-ui/icons/CheckCircle";
import ErrorIcon from "@material-ui/icons/Error";
import RemoveCircleIcon from "@material-ui/icons/RemoveCircle";
import useTickets from "../../hooks/useTickets";
@ -38,9 +23,8 @@ import openSocket from "socket.io-client";
import api from "../../services/api";
import { Can } from "../../components/Can";
import { Button } from "@material-ui/core";
import { id } from "date-fns/locale";
import CardUser from "../../components/DashboardUser/CardUser";
import TableUser from "../../components/DashboardUser/TableUser";
const useStyles = makeStyles((theme) => ({
container: {
@ -78,10 +62,10 @@ const useStyles = makeStyles((theme) => ({
},
cardPaperFix: {
textTransform: "capitalize",
padding: theme.spacing(2),
paddingBottom: theme.spacing(4),
height: "500px",
overflowY: "scroll",
paddingLeft: theme.spacing(4),
paddingRight: theme.spacing(4),
height: window.innerWidth <= 992 ? "500px" : "auto",
overflowY: "hidden",
},
cardStyleFix: {
display: "flex",
@ -96,6 +80,29 @@ const useStyles = makeStyles((theme) => ({
right: "21px",
fontSize: "12px",
},
tableRowHead: {
backgroundColor: "lightgrey",
},
tableRowBody: {
textAlign: "center",
" &:nth-child(even)": {
backgroundColor: "#f7f7f7",
},
},
tableCounterOpen: {
color: "white",
backgroundColor: "green",
width: "25px",
textAlign: "center",
borderRadius: "5px",
},
tableCounterClosed: {
color: "white",
backgroundColor: "red",
width: "25px",
textAlign: "center",
borderRadius: "5px",
},
}));
const reducer = (state, action) => {
@ -168,19 +175,30 @@ const reducer = (state, action) => {
if (onlineUser.sumOpen) {
if ("sumOpen" in state[index]) {
// console.log(' >>>>>>>>>>>>>>>>>> sumOpen 1 | state[index].sumOpen["count"]: ', state[index].sumOpen['count'], ' | onlineUser.sumOpen.count: ', onlineUser.sumOpen.count)
state[index].sumOpen["count"] = onlineUser.sumOpen.count;
} else if (!("sumOpen" in state[index])) {
// console.log(' >>>>>>>>>>>>>>>>>> sumOpen 1')
state[index].sumOpen = onlineUser.sumOpen;
}
}
if (onlineUser.sumClosed) {
if ("sumClosed" in state[index]) {
// console.log(' >>>>>>>>>>>>>>>>>> sumClosed 1 | state[index].sumClosed["count"]: ', state[index].sumClosed['count'], ' | onlineUser.sumClosed.count: ', onlineUser.sumClosed.count)
state[index].sumClosed["count"] = onlineUser.sumClosed.count;
} else if (!("sumClosed" in state[index])) {
// console.log(' >>>>>>>>>>>>>>>>>> sumOpen 1')
state[index].sumClosed = onlineUser.sumClosed;
}
}
if (onlineUser.openClosedInQueue) {
state[index].openClosedInQueue = onlineUser.openClosedInQueue;
}
if (onlineUser.openClosedOutQueue) {
state[index].openClosedOutQueue = onlineUser.openClosedOutQueue;
}
}
return [...state];
}
@ -193,25 +211,12 @@ const reducer = (state, action) => {
const Dashboard = () => {
const classes = useStyles();
const [usersOnlineInfo, dispatch] = useReducer(reducer, []);
const [search, setSearch] = useState("");
const [filterStatus, setFilterStatus] = useState(null);
const [ticketStatusChange, setStatus] = useState();
const [open, setOpen] = useState(0);
const [closed, setClosed] = useState(0);
const [pending, setPending] = useState(0);
const { user } = useContext(AuthContext);
var userQueueIds = [];
if (user.queues && user.queues.length > 0) {
userQueueIds = user.queues.map((q) => q.id);
}
const GetTickets = (status, showAll, withUnreadMessages, unlimited) => {
const { tickets } = useTickets({
status: status,
showAll: showAll,
withUnreadMessages: withUnreadMessages,
queueIds: JSON.stringify(userQueueIds),
unlimited: unlimited,
});
return tickets.length;
};
useEffect(() => {
dispatch({ type: "RESET" });
@ -243,6 +248,8 @@ const Dashboard = () => {
dispatch({ type: "RESET" });
dispatch({ type: "LOAD_QUERY", payload: dataQuery.data });
console.log("xxx REPORT 2 dataQuery : ", dataQuery.data);
//console.log()
} catch (err) {
console.log(err);
@ -257,8 +264,18 @@ const Dashboard = () => {
useEffect(() => {
const socket = openSocket(process.env.REACT_APP_BACKEND_URL);
socket.on("ticketStatus", (data) => {
// console.log('data: ',data)
if (data.action === "update") {
setStatus(data.ticketStatus.status);
}
});
socket.on("onlineStatus", (data) => {
if (data.action === "logout" || data.action === "update") {
// console.log('>>>>>>> data.userOnlineTime: ', data.userOnlineTime)
dispatch({ type: "UPDATE_STATUS_ONLINE", payload: data.userOnlineTime });
} else if (data.action === "delete") {
dispatch({ type: "DELETE_USER_STATUS", payload: data.userOnlineTime });
@ -277,12 +294,35 @@ const Dashboard = () => {
};
}, []);
const handleFilterChange = (event) => {
setFilterStatus(event.target.value);
};
const handlesearch = (event) => {
setSearch(event.target.value.toLowerCase());
};
useEffect(() => {
const delayDebounceFn = setTimeout(() => {
const fetchQueries = async () => {
try {
let date = new Date().toLocaleDateString("pt-BR").split("/");
let dateToday = `${date[2]}-${date[1]}-${date[0]}`;
const _open = await api.get("/tickets/count", {
params: { status: "open", date: dateToday },
});
const _closed = await api.get("/tickets/count", {
params: { status: "closed", date: dateToday },
});
const _pending = await api.get("/tickets/count", {
params: { status: "pending", date: dateToday },
});
setOpen(_open.data.count);
setClosed(_closed.data.count);
setPending(_pending.data.count);
} catch (err) {
console.log(err);
}
};
fetchQueries();
}, 500);
return () => clearTimeout(delayDebounceFn);
}, [ticketStatusChange]);
return (
<Can
@ -323,7 +363,7 @@ const Dashboard = () => {
</Typography>
<Grid item>
<Typography component="h1" variant="h4">
{GetTickets("open", "true", "false", "true")}
{open}
</Typography>
</Grid>
</Paper>
@ -339,7 +379,7 @@ const Dashboard = () => {
</Typography>
<Grid item>
<Typography component="h1" variant="h4">
{GetTickets("pending", "true", "false", "true")}
{pending}
</Typography>
</Grid>
</Paper>
@ -355,7 +395,7 @@ const Dashboard = () => {
</Typography>
<Grid item>
<Typography component="h1" variant="h4">
{GetTickets("closed", "true", "false", "true")}
{closed}
</Typography>
</Grid>
</Paper>
@ -446,158 +486,19 @@ const Dashboard = () => {
</Grid>
</Paper>
</Grid>
<Grid item xs={12}>
<Paper className={classes.cardPaperFix} sx={12} variant="outlined">
<Grid container sx={12} justifyContent="space-between">
<Grid item sx={4}>
<Typography
component="h4"
variant="h6"
color="primary"
style={{ marginBottom: "16px" }}
>
Lista de Usuários
</Typography>
</Grid>
<Grid item sx={8} width="100%">
<Box sx={{ marginBottom: 2, display: "flex", gap: "12px" }}>
<TextField
id="outlined-basic"
label="Usuário"
variant="standard"
value={search}
onChange={handlesearch}
/>
<FormControl fullWidth variant="standard">
<InputLabel id="status">Status</InputLabel>
<Select
labelId="status"
id="status"
value={filterStatus}
label="Status"
onChange={handleFilterChange}
>
<MenuItem value={null}>Todos</MenuItem>
<MenuItem value={"online"}>Online</MenuItem>
<MenuItem value={"offline"}>Offline</MenuItem>
<MenuItem value={"not"}>Não entrou</MenuItem>
</Select>
</FormControl>
</Box>
</Grid>
</Grid>
<Grid container spacing={3}>
{usersOnlineInfo &&
usersOnlineInfo
.filter((e) => {
if (filterStatus === null) return e;
if (filterStatus === "not") return !e.statusOnline;
return e.statusOnline && e.statusOnline.status === filterStatus;
})
.filter((e) => {
return e.name.toLowerCase().includes(search);
}).sort((a) => {
if (a.statusOnline) {
if (a.statusOnline.status === "online") {
return -1;
}
return 0;
}
return 0;
})
.map((user, index) => (
<Grid
item
xs={12}
sm={6}
md={6}
lg={3}
key={index}
style={{ position: "relative" }}
>
<Card variant="outlined">
<CardHeader
avatar={
<Avatar
style={{
backgroundColor: user.statusOnline
? user.statusOnline.status === "online"
? "green"
: user.statusOnline.status === "offline"
? "red"
: "black"
: "grey",
}}
>
{user.statusOnline ? (
user.statusOnline.status === "online" ? (
<CheckCircleIcon style={{ color: "white" }} />
) : user.statusOnline.status === "offline" ? (
<CancelIcon style={{ color: "white" }} />
) : (
<ErrorIcon style={{ color: "yellow" }} />
)
) : (
<RemoveCircleIcon style={{ color: "black" }} />
)}
</Avatar>
}
title={
<Typography variant="h5" component="div">
{user.name}
</Typography>
}
/>
<CardContent>
<Typography variant="h6" component="h1" color="textPrimary">
Em atendimento:
<Typography component="p" color="textPrimary" paragraph>
{user.sumOpen && user.sumOpen.count ? user.sumOpen.count : 0}
</Typography>
</Typography>
<Typography variant="h6" component="h1" color="textPrimary">
Finalizado:
<Typography component="p" color="textPrimary" paragraph>
{user.sumClosed && user.sumClosed.count
? user.sumClosed.count
: 0}
</Typography>
</Typography>
<Typography variant="h6" component="h1" color="textPrimary">
Tempo online:
<Typography component="p" color="textPrimary" paragraph>
{user.sumOnlineTime && user.sumOnlineTime.sum
? user.sumOnlineTime.sum
: "Não entrou Hoje"}
</Typography>
</Typography>
</CardContent>
<CardActions>
{user.statusOnline &&
user.statusOnline.status === "online" &&
user.statusOnline && (
<Button
className={classes.logginBtn}
variant="contained"
color="primary"
onClick={(e) => {
handleLogouOnlineUser(user.id);
}}
>
{"Deslogar"}
</Button>
)}
</CardActions>
</Card>
</Grid>
))}
</Grid>
</Paper>
</Grid>
{window.innerWidth <= 992 ? (
<CardUser
classes={classes}
usersOnlineInfo={usersOnlineInfo}
logout={handleLogouOnlineUser}
/>
) : (
<TableUser
classes={classes}
usersOnlineInfo={usersOnlineInfo}
logout={handleLogouOnlineUser}
/>
)}
</Grid>
</Paper>
</Grid>

191
frontend/src/pages/Report/index.js
View File

@ -18,10 +18,13 @@ import MaterialTable from 'material-table';
import LogoutIcon from '@material-ui/icons/CancelOutlined';
import { CSVLink } from "react-csv";
// import CircularProgress from '@mui/material/CircularProgress';
import openSocket from "socket.io-client";
import openSocket from "socket.io-client";
const report = [{ 'value': '1', 'label': 'Atendimento por atendentes' }, { 'value': '2', 'label': 'Usuários online/offline' }]
@ -77,7 +80,7 @@ let columns = [
},
{
key: 'ticket.statusChatEnd',
label: 'Status de encerramento',
label: 'Status de encerramento',
}
]
@ -104,7 +107,7 @@ const reducerQ = (state, action) => {
const userIndex = state.findIndex((u) => `${u.id}` === `${userId}`);
// console.log('>>>>>>>>>>>>>>>>>>>>> userIndex: ', userIndex)
// console.log('>>>>>>>>>>>>>>>>>>>>> userIndex: ', userIndex)
if (userIndex !== -1) {
state.splice(userIndex, 1);
@ -117,7 +120,6 @@ const reducerQ = (state, action) => {
if (action.type === 'LOAD_QUERY') {
const queries = action.payload
const newQueries = []
@ -143,7 +145,7 @@ const reducerQ = (state, action) => {
let onlineUser = action.payload
let index = -1
// console.log('sssssssssstate: ', state, ' | ONLINE USERS: onlineUser.userId ', onlineUser.userId)
// console.log('sssssssssstate: ', state, ' | ONLINE USERS: onlineUser.userId ', onlineUser.userId)
if (onlineUser.sumOpen || onlineUser.sumClosed) {
index = state.findIndex((e) => ((onlineUser.sumOpen && e.id === onlineUser.sumOpen.userId) || (onlineUser.sumClosed && e.id === onlineUser.sumClosed.userId)))
@ -152,13 +154,13 @@ const reducerQ = (state, action) => {
index = state.findIndex((e) => `${e.id}` === `${onlineUser.userId}`)
}
//console.log(' *********************** index: ', index)
//console.log(' *********************** index: ', index)
if (index !== -1) {
// console.log('ENTROU NO INDEX')
// console.log('ENTROU NO INDEX')
if (!("statusOnline" in state[index])) {
@ -183,10 +185,10 @@ const reducerQ = (state, action) => {
if (onlineUser.sumOpen) {
if ("sumOpen" in state[index]) {
// console.log(' >>>>>>>>>>>>>>>>>> sumOpen 1 | state[index].sumOpen["count"]: ', state[index].sumOpen['count'], ' | onlineUser.sumOpen.count: ', onlineUser.sumOpen.count)
// console.log(' >>>>>>>>>>>>>>>>>> sumOpen 1 | state[index].sumOpen["count"]: ', state[index].sumOpen['count'], ' | onlineUser.sumOpen.count: ', onlineUser.sumOpen.count)
state[index].sumOpen['count'] = onlineUser.sumOpen.count
} else if (!("sumOpen" in state[index])) {
// console.log(' >>>>>>>>>>>>>>>>>> sumOpen 1')
// console.log(' >>>>>>>>>>>>>>>>>> sumOpen 1')
state[index].sumOpen = onlineUser.sumOpen
}
@ -195,10 +197,10 @@ const reducerQ = (state, action) => {
if (onlineUser.sumClosed) {
if ("sumClosed" in state[index]) {
// console.log(' >>>>>>>>>>>>>>>>>> sumClosed 1 | state[index].sumClosed["count"]: ', state[index].sumClosed['count'], ' | onlineUser.sumClosed.count: ', onlineUser.sumClosed.count)
// console.log(' >>>>>>>>>>>>>>>>>> sumClosed 1 | state[index].sumClosed["count"]: ', state[index].sumClosed['count'], ' | onlineUser.sumClosed.count: ', onlineUser.sumClosed.count)
state[index].sumClosed['count'] = onlineUser.sumClosed.count
} else if (!("sumClosed" in state[index])) {
// console.log(' >>>>>>>>>>>>>>>>>> sumOpen 1')
// console.log(' >>>>>>>>>>>>>>>>>> sumOpen 1')
state[index].sumClosed = onlineUser.sumClosed
}
@ -298,22 +300,29 @@ let columnsData = [
{ title: 'Assunto', field: 'queue.name' },
{ title: 'Status', field: 'status' },
{ title: 'Criado', field: 'createdAt' },
//{title: 'Atualizado', field: 'updatedAt'},
{title: 'Status de encerramento', field: 'statusChatEnd'}];
{ title: 'Status de encerramento', field: 'statusChatEnd' }];
const Report = () => {
const csvLink = useRef()
const { user: userA } = useContext(AuthContext);
//--------
const [searchParam] = useState("");
//const [loading, setLoading] = useState(false);
//const [hasMore, setHasMore] = useState(false);
const [loading, setLoading] = useState(false);
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 [columns, setColums] = useState([])
@ -329,14 +338,14 @@ const Report = () => {
const [reporList,] = useState(report)
const [profile, setProfile] = useState('')
const [dataRows, setData] = useState([]);
useEffect(() => {
dispatch({ type: "RESET" });
dispatchQ({ type: "RESET" })
setTicketsPageNumber(1)
setPageNumber(1);
}, [searchParam, profile]);
@ -380,20 +389,24 @@ const Report = () => {
const delayDebounceFn = setTimeout(() => {
setLoading(true);
const fetchQueries = async () => {
try {
if (reportOption === '1') {
const dataQuery = await api.get("/reports/", { params: { userId, startDate, endDate }, });
dispatchQ({ type: "RESET" })
dispatchQ({ type: "LOAD_QUERY", payload: dataQuery.data });
const { data } = await api.get("/reports/", { params: { userId, startDate, endDate, pageNumber: pageNumberTickets }, });
//setLoading(false);
// console.log('dataQuery: ', data)
// console.log('pageNumberTickets: ', pageNumberTickets)
// console.log('dataQuery: ', dataQuery.data)
// dispatchQ({ type: "RESET" })
dispatchQ({ type: "LOAD_QUERY", payload: data.tickets });
setHasMore(data.hasMore);
setTotalCountTickets(data.count)
setLoading(false);
// console.log()
}
else if (reportOption === '2') {
@ -404,7 +417,7 @@ const Report = () => {
//setLoading(false);
// console.log('REPORT 2 dataQuery : ', dataQuery.data)
console.log('REPORT 2 dataQuery : ', dataQuery.data)
//console.log()
@ -420,7 +433,7 @@ const Report = () => {
}, 500);
return () => clearTimeout(delayDebounceFn);
}, [userId, startDate, endDate, reportOption]);
}, [userId, startDate, endDate, reportOption, pageNumberTickets, totalCountTickets]);
// Get from child 1
@ -449,7 +462,7 @@ const Report = () => {
setReport(data)
// console.log(' data: ', data)
// console.log(' data: ', data)
}
useEffect(() => {
@ -461,22 +474,10 @@ const Report = () => {
setProfile('user')
}
}, [reportOption])
}, [reportOption])
// useEffect(() => {
// console.log('>>>>>>>>>>>>>>>>>> New query: ', query)
// }, [query])
// test del
const handleCSVMessages = () => {
// setLoading(true);
const handleCSVMessages = () => {
const fetchQueries = async () => {
@ -484,7 +485,7 @@ const Report = () => {
const dataQuery = await api.get("/reports/messages", { params: { userId, startDate, endDate }, });
// console.log('dataQuery messages: ', dataQuery.data)
console.log('dataQuery messages: ', dataQuery.data)
if (dataQuery.data.length > 0) {
@ -497,16 +498,11 @@ const Report = () => {
else {
dataCSVFormat[i].fromMe = 'Cliente'
}
}
// console.log('dataCSVFormat: ', dataCSVFormat)
}
setDataCSV(dataCSVFormat)
setIsMount(false);
// setDataCSV(dataQuery.data)
}
// setLoading(false);
setIsMount(false);
}
} catch (err) {
console.log(err);
@ -540,17 +536,10 @@ const Report = () => {
const socket = openSocket(process.env.REACT_APP_BACKEND_URL);
socket.on("onlineStatus", (data) => {
// setLoading(true);
socket.on("onlineStatus", (data) => {
let date = new Date().toLocaleDateString('pt-BR').split('/')
let dateToday = `${date[2]}-${date[1]}-${date[0]}`
// console.log('date: ', new Date(startDate).toLocaleDateString('pt-BR'))
// console.log('date2: ', startDate)
let dateToday = `${date[2]}-${date[1]}-${date[0]}`
if (data.action === "logout" || (data.action === "update" &&
((`${startDate}` === `${endDate}`) && (`${endDate}` === `${dateToday}`) && (`${startDate}` === `${dateToday}`)))) {
@ -562,16 +551,14 @@ const Report = () => {
}
else if (data.action === "delete") {
dispatchQ({ type: "DELETE_USER_STATUS", payload: data.userOnlineTime });
}
// setLoading(false);
}
});
socket.on("user", (data) => {
if (data.action === "delete") {
// console.log(' entrou no delete user: ', data)
// console.log(' entrou no delete user: ', data)
dispatch({ type: "DELETE_USER", payload: +data.userId });
}
});
@ -581,9 +568,13 @@ const Report = () => {
};
}
else if (reportOption === "1") {
dispatchQ({ type: "RESET" })
setTicketsPageNumber(1)
}
}, [reportOption, startDate, endDate]);
}, [reportOption, startDate, endDate, userId]);
// const handleDeleteRows = (id) => {
@ -608,7 +599,8 @@ const Report = () => {
// )))
// }
setData(query.map((column) => { return { ...column } }))
setData(query.map((column) => { return { ...column } }))
}, [query])
@ -621,7 +613,31 @@ const Report = () => {
// toastError(err);
}
};
const loadMore = () => {
setTicketsPageNumber((prevState) => prevState + 1);
};
const handleScroll = (e) => {
if (!hasMore || loading) return;
const { scrollTop, scrollHeight, clientHeight } = e.currentTarget;
// console.log('scrollTop: ', scrollTop,
// ' | scrollHeight: ', scrollHeight,
// ' | clientHeight: ', clientHeight,
// ' | scrollHeight - (scrollTop + 1): ', scrollHeight - (scrollTop + 1))
if (scrollHeight - (scrollTop + 1) < clientHeight) {
loadMore();
// e.currentTarget.scrollTo(0, 200);
}
};
@ -639,7 +655,7 @@ const Report = () => {
return { 'value': obj.id, 'label': obj.name }
})} /></Item>
<Item><DatePicker1 func={datePicker1Value} minDate={true} startEmpty={false} title={'Data inicio'} /></Item>
<Item><DatePicker1 func={datePicker1Value} minDate={false} startEmpty={false} title={'Data inicio'} /></Item>
<Item><DatePicker2 func={datePicker2Value} minDate={false} startEmpty={false} title={'Data fim'} /></Item>
<Item sx={{ display: 'grid', gridColumn: '4 / 5', }}>
@ -650,14 +666,16 @@ const Report = () => {
{reportOption === '1' &&
<div>
{/* <Button
<div>
<Button style={{display: "none"}}
variant="contained"
color="primary"
onClick={(e) => handleCSVMessages()}
onClick={(e) => {
handleCSVMessages()
}}
>
{"CSV ALL"}
</Button> */}
</Button>
<div>
<CSVLink
@ -672,11 +690,7 @@ const Report = () => {
}
</Item>
</Item>
</Box>
@ -688,11 +702,22 @@ const Report = () => {
{reportOption === '1' &&
<MTable data={query}
columns={columnsData}
hasChild={true}
removeClickRow={false}
table_title={'Atendimento por atendentes'} />
// <div onScroll={handleScroll} style={{ height: 400, overflowY: "scroll" }}>
// </div>
<>
<MTable data={query}
columns={columnsData}
hasChild={true}
removeClickRow={false}
handleScroll={handleScroll}
table_title={'Atendimento por atendentes'} />
</>
}
{reportOption === '2' &&
@ -711,7 +736,7 @@ const Report = () => {
[
// { title: 'Foto', field: 'ticket.contact.profilePicUrl', render: rowData => <img src={rowData['ticket.contact.profilePicUrl']} alt="imagem de perfil do whatsapp" style={{ width: 40, borderRadius: '50%' }} /> },
{ title: 'Nome', field: 'name', cellStyle: {whiteSpace: 'nowrap'}, },
{ title: 'Nome', field: 'name', cellStyle: { whiteSpace: 'nowrap' }, },
{
title: 'Status', field: 'statusOnline.status',
@ -765,7 +790,7 @@ const Report = () => {
disable: false,
onClick: (event, rowData) => {
// console.log(' ROW DATA INFO: ', rowData, ' | rowData: ', rowData.id)
// console.log(' ROW DATA INFO: ', rowData, ' | rowData: ', rowData.id)
handleLogouOnlineUser(rowData.id)
}
}

2
frontend/src/pages/Tickets/index.js
View File

@ -78,7 +78,7 @@ const Chat = () => {
className={
ticketId ? classes.contactsWrapperSmall : classes.contactsWrapper
}
>
>
<TicketsManager />
</Grid>
<Grid item xs={12} md={8} className={classes.messagessWrapper}>

37
frontend/src/routes/index.js
View File

@ -20,13 +20,9 @@ import Queues from "../pages/Queues/";
import { AuthProvider } from "../context/Auth/AuthContext";
import { WhatsAppsProvider } from "../context/WhatsApp/WhatsAppsContext";
import Route from "./Route";
//console.log('---AuthProvider: ',AuthProvider)
const Routes = () => {
return (
<BrowserRouter>
@ -37,41 +33,18 @@ const Routes = () => {
<WhatsAppsProvider>
<LoggedInLayout>
<Route exact path="/" component={Dashboard} isPrivate />
<Route
exact
path="/tickets/:ticketId?"
component={Tickets}
isPrivate
/>
<Route
exact
path="/connections"
component={Connections}
isPrivate
/>
<Route exact path="/tickets/:ticketId?" component={Tickets} isPrivate />
<Route exact path="/connections" component={Connections} isPrivate />
<Route
exact
path="/report"
component={Report}
isPrivate
/>
<Route exact path="/report" component={Report} isPrivate />
<Route exact path="/contacts" component={Contacts} isPrivate />
<Route exact path="/schedulesReminder" component={SchedulesReminder} isPrivate />
<Route exact path="/users" component={Users} isPrivate />
<Route
exact
path="/quickAnswers"
component={QuickAnswers}
isPrivate
/>
<Route exact path="/quickAnswers" component={QuickAnswers} isPrivate />
<Route exact path="/Settings" component={Settings} isPrivate />
<Route exact path="/Queues" component={Queues} isPrivate />
</LoggedInLayout>

1
frontend/src/rules.js
View File

@ -29,6 +29,7 @@ const rules = {
"show-icon-add-queue",
"show-icon-edit-queue",
"show-icon-delete-queue",
"space-disk-info:show",
"drawer-admin-items:view",