feat: Allow supervisor users to view dashboard and reports

pull/22/head
adriano 2024-01-30 09:50:37 -03:00
parent 5bfaa7f733
commit 255b1bb47b
7 changed files with 237 additions and 193 deletions

View File

@ -44,26 +44,33 @@ type ReportOnQueue = {
export const reportUserByDateStartDateEnd = 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") { if (
req.user.profile !== "master" &&
req.user.profile !== "admin" &&
req.user.profile !== "supervisor"
) {
throw new AppError("ERR_NO_PERMISSION", 403); throw new AppError("ERR_NO_PERMISSION", 403);
} }
const { userId, startDate, endDate, pageNumber } = req.query as IndexQuery const { userId, startDate, endDate, pageNumber } = req.query as IndexQuery
console.log("userId, startDate, endDate, pageNumber: ", userId, startDate, endDate, pageNumber);
const { tickets, count, hasMore } = await ShowTicketReport({ userId, startDate, endDate, pageNumber }); const { tickets, count, hasMore } = await ShowTicketReport({ userId, startDate, endDate, pageNumber });
// console.log('kkkkkkkkkkkkkkkkkk tickets: ', JSON.stringify(tickets, null, 6))
return res.status(200).json({ tickets, count, hasMore }); return res.status(200).json({ tickets, count, hasMore });
}; };
export const reportUserService = async (req: Request, res: Response): Promise<Response> => { export const reportUserService = async (req: Request, res: Response): Promise<Response> => {
if (req.user.profile !== "master" && req.user.profile !== "admin") { if (req.user.profile !== "master" && req.user.profile !== "admin" && req.user.profile !=="supervisor") {
throw new AppError("ERR_NO_PERMISSION", 403); throw new AppError("ERR_NO_PERMISSION", 403);
} }
const { userId, startDate, endDate } = req.query as IndexQuery const { userId, startDate, endDate } = req.query as IndexQuery
// let usersProfile = await ListUserParamiterService({ profile: 'user' }) // let usersProfile = await ListUserParamiterService({ profile: 'user' })
let usersProfile = await ListUserParamiterService({ let usersProfile = await ListUserParamiterService({
profiles: ["user", "supervisor"], profiles: ["user", "supervisor"],
@ -188,7 +195,11 @@ export const reportUserService = async (req: Request, res: Response): Promise<Re
export const reportMessagesUserByDateStartDateEnd = 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") { if (
req.user.profile !== "master" &&
req.user.profile !== "admin" &&
req.user.profile !== "supervisor"
) {
throw new AppError("ERR_NO_PERMISSION", 403); throw new AppError("ERR_NO_PERMISSION", 403);
} }

View File

@ -1,17 +1,17 @@
const usersSocket = require("../libs/socket"); const usersSocket = require("../libs/socket");
export const removeUserFromOlineList = (userId: any) => { export const removeUserFromOlineList = (userId: any) => {
let index = usersSocket.ob.listOnline.findIndex((o: any) => o.id == userId); let index = usersSocket?.ob?.listOnline?.findIndex((o: any) => o?.id == userId);
if (index != -1) { if (index != -1) {
usersSocket.ob.listOnline.splice(index, 1); usersSocket?.ob?.listOnline?.splice(index, 1);
} }
index = -1; index = -1;
index = usersSocket.ob.listOnlineAux.findIndex((o: any) => o.id == userId); index = usersSocket?.ob?.listOnlineAux?.findIndex((o: any) => o?.id == userId);
if (index != -1) { if (index != -1) {
usersSocket.ob.listOnlineAux.splice(index, 1); usersSocket?.ob?.listOnlineAux?.splice(index, 1);
} }
}; };

View File

@ -194,8 +194,12 @@ const ListTicketsService = async ({
const userProfile: any = await User.findByPk(userId) const userProfile: any = await User.findByPk(userId)
if (userProfile.dataValues.profile != 'admin' && userProfile.dataValues.profile != 'master') { if (
whereCondition = { ...whereCondition, userId } userProfile.dataValues.profile != "admin" &&
userProfile.dataValues.profile != "master"
// userProfile.dataValues.profile != "supervisor"
) {
whereCondition = { ...whereCondition, userId };
} }

View File

@ -107,7 +107,7 @@ const MainListItems = (props) => {
<Can <Can
role={user.profile} role={user.profile}
perform="menu-users:view" perform="dashboard-view:show"
yes={() => ( yes={() => (
<> <>
<Divider /> <Divider />
@ -117,11 +117,24 @@ const MainListItems = (props) => {
primary={i18n.t("mainDrawer.listItems.users")} primary={i18n.t("mainDrawer.listItems.users")}
icon={<PeopleAltOutlinedIcon />} icon={<PeopleAltOutlinedIcon />}
/> />
<ListItemLink
to="/"
primary="Dashboard"
icon={<DashboardOutlinedIcon />}
/>
<ListItemLink
to="/report"
primary="Relatório"
icon={<ReportOutlinedIcon />}
/>
</> </>
)} )}
/> />
<Can <Can
role={user.profile} role={user.profile}
perform="drawer-admin-items:view" perform="drawer-admin-items:view"
@ -144,17 +157,17 @@ const MainListItems = (props) => {
} }
/> />
<ListItemLink {/* <ListItemLink
to="/" to="/"
primary="Dashboard" primary="Dashboard"
icon={<DashboardOutlinedIcon />} icon={<DashboardOutlinedIcon />}
/> /> */}
<ListItemLink {/* <ListItemLink
to="/report" to="/report"
primary="Relatório" primary="Relatório"
icon={<ReportOutlinedIcon />} icon={<ReportOutlinedIcon />}
/> /> */}
<ListItemLink <ListItemLink
to="/campaign" to="/campaign"

View File

@ -1,29 +1,29 @@
import React, { useState, useEffect, useReducer, useContext } from "react"; import React, { useState, useEffect, useReducer, useContext } from "react"
import MainContainer from "../../components/MainContainer"; import MainContainer from "../../components/MainContainer"
import api from "../../services/api"; import api from "../../services/api"
import SelectField from "../../components/Report/SelectField"; import SelectField from "../../components/Report/SelectField"
import DatePicker1 from '../../components/Report/DatePicker' import DatePicker1 from '../../components/Report/DatePicker'
import DatePicker2 from '../../components/Report/DatePicker' import DatePicker2 from '../../components/Report/DatePicker'
import MTable from "../../components/Report/MTable"; import MTable from "../../components/Report/MTable"
import PropTypes from 'prop-types'; import PropTypes from 'prop-types'
import Box from '@mui/material/Box'; import Box from '@mui/material/Box'
import { AuthContext } from "../../context/Auth/AuthContext"; import { AuthContext } from "../../context/Auth/AuthContext"
import { Can } from "../../components/Can"; import { Can } from "../../components/Can"
import { Button } from "@material-ui/core"; import { Button } from "@material-ui/core"
import ReportModal from "../../components/ReportModal"; import ReportModal from "../../components/ReportModal"
import MaterialTable from 'material-table'; import MaterialTable from 'material-table'
import LogoutIcon from '@material-ui/icons/CancelOutlined'; import LogoutIcon from '@material-ui/icons/CancelOutlined'
import apiBroker from "../../services/apiBroker"; import apiBroker from "../../services/apiBroker"
import fileDownload from 'js-file-download' import fileDownload from 'js-file-download'
import openSocket from "socket.io-client"; import openSocket from "socket.io-client"
import { i18n } from "../../translate/i18n"; import { i18n } from "../../translate/i18n"
const report = [{ 'value': '1', 'label': 'Atendimento por atendentes' }, { 'value': '2', 'label': 'Usuários online/offline' }] const report = [{ 'value': '1', 'label': 'Atendimento por atendentes' }, { 'value': '2', 'label': 'Usuários online/offline' }]
@ -33,15 +33,15 @@ const reducerQ = (state, action) => {
if (action.type === "DELETE_USER_STATUS") { if (action.type === "DELETE_USER_STATUS") {
const userId = action.payload; const userId = action.payload
const userIndex = state.findIndex((u) => `${u.id}` === `${userId}`); const userIndex = state.findIndex((u) => `${u.id}` === `${userId}`)
if (userIndex !== -1) { if (userIndex !== -1) {
state.splice(userIndex, 1); state.splice(userIndex, 1)
} }
return [...state]; return [...state]
} }
@ -131,7 +131,7 @@ const reducerQ = (state, action) => {
if (action.type === "RESET") { if (action.type === "RESET") {
return []; return []
} }
} }
@ -141,41 +141,41 @@ const reducerQ = (state, action) => {
const reducer = (state, action) => { const reducer = (state, action) => {
if (action.type === "LOAD_USERS") { if (action.type === "LOAD_USERS") {
const users = action.payload; const users = action.payload
const newUsers = []; const newUsers = []
users.forEach((user) => { users.forEach((user) => {
const userIndex = state.findIndex((u) => u.id === user.id); const userIndex = state.findIndex((u) => u.id === user.id)
if (userIndex !== -1) { if (userIndex !== -1) {
state[userIndex] = user; state[userIndex] = user
} else { } else {
newUsers.push(user); newUsers.push(user)
} }
}); })
return [...state, ...newUsers]; return [...state, ...newUsers]
} }
if (action.type === "DELETE_USER") { if (action.type === "DELETE_USER") {
const userId = action.payload; const userId = action.payload
const userIndex = state.findIndex((u) => u.id === userId); const userIndex = state.findIndex((u) => u.id === userId)
if (userIndex !== -1) { if (userIndex !== -1) {
state.splice(userIndex, 1); state.splice(userIndex, 1)
} }
return [...state]; return [...state]
} }
if (action.type === "RESET") { if (action.type === "RESET") {
return []; return []
} }
}; }
function Item(props) { function Item(props) {
const { sx, ...other } = props; const { sx, ...other } = props
return ( return (
<Box <Box
sx={{ sx={{
@ -193,7 +193,7 @@ function Item(props) {
}} }}
{...other} {...other}
/> />
); )
} }
Item.propTypes = { Item.propTypes = {
@ -204,7 +204,7 @@ Item.propTypes = {
PropTypes.func, PropTypes.func,
PropTypes.object, PropTypes.object,
]), ]),
}; }
@ -218,51 +218,65 @@ let columnsData = [
{ title: 'Status', field: 'status' }, { title: 'Status', field: 'status' },
{ title: `${i18n.t("reports.listColumns.column1_7")}`, field: 'createdAt' }, { title: `${i18n.t("reports.listColumns.column1_7")}`, field: 'createdAt' },
{title: `${i18n.t("reports.listColumns.column1_8")}`, field: 'updatedAt'}, { title: `${i18n.t("reports.listColumns.column1_8")}`, field: 'updatedAt' },
{ title: `${i18n.t("reports.listColumns.column1_9")}`, field: 'statusChatEnd' }]; { title: `${i18n.t("reports.listColumns.column1_9")}`, field: 'statusChatEnd' }]
// function convertAndFormatDate(dateString) {
// // Check if the input date string is in the desired format
// const isDesiredFormat = /^\w{3} \w{3} \d{2} \d{4} \d{2}:\d{2}:\d{2} GMT[-+]\d{4} \([\w\s]+\)$/i.test(dateString)
// if (isDesiredFormat) {
// // Convert the input date string to a JavaScript Date object
// const dateObj = new Date(dateString)
// // Format the date to the desired string format (e.g., 'yyyy-MM-dd') in the Brazil time zone
// const formattedDate = `${dateObj.getUTCFullYear()}-${(dateObj.getUTCMonth() + 1).toString().padStart(2, '0')}-${dateObj.getUTCDate().toString().padStart(2, '0')}`
// return formattedDate
// }
// // If the date is not in the desired format, return the original input string
// return dateString
// }
const Report = () => { const Report = () => {
const { user: userA } = useContext(AuthContext); const { user: userA } = useContext(AuthContext)
//-------- //--------
const [searchParam] = useState(""); const [searchParam] = useState("")
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false)
const [hasMore, setHasMore] = useState(false); const [hasMore, setHasMore] = useState(false)
const [pageNumberTickets, setTicketsPageNumber] = useState(1); const [pageNumberTickets, setTicketsPageNumber] = useState(1)
const [totalCountTickets, setTotalCountTickets] = useState(0); const [totalCountTickets, setTotalCountTickets] = useState(0)
const [pageNumber, setPageNumber] = useState(1); const [pageNumber, setPageNumber] = useState(1)
const [users, dispatch] = useReducer(reducer, []); const [users, dispatch] = useReducer(reducer, [])
const [startDate, setDatePicker1] = useState(new Date()) const [startDate, setDatePicker1] = useState(new Date())
const [endDate, setDatePicker2] = useState(new Date()) const [endDate, setDatePicker2] = useState(new Date())
const [userId, setUser] = useState(null) const [userId, setUser] = useState(null)
const [query, dispatchQ] = useReducer(reducerQ, []) const [query, dispatchQ] = useReducer(reducerQ, [])
const [reportOption, setReport] = useState('1') const [reportOption, setReport] = useState('1')
const [reporList,] = useState(report) const [reporList,] = useState(report)
const [profile, setProfile] = useState('') const [profile, setProfile] = useState('')
const [dataRows, setData] = useState([]); const [dataRows, setData] = useState([])
const [onQueueStatus, setOnQueueProcessStatus] = useState(undefined) const [onQueueStatus, setOnQueueProcessStatus] = useState(undefined)
const [csvFile, setCsvFile] = useState() const [csvFile, setCsvFile] = useState()
useEffect(() => { useEffect(() => {
dispatch({ type: "RESET" }); dispatch({ type: "RESET" })
dispatchQ({ type: "RESET" }) dispatchQ({ type: "RESET" })
setTicketsPageNumber(1) setTicketsPageNumber(1)
setPageNumber(1); setPageNumber(1)
}, [searchParam, profile]); }, [searchParam, profile])
useEffect(() => { useEffect(() => {
@ -275,21 +289,21 @@ const Report = () => {
const { data } = await api.get("/users/", { const { data } = await api.get("/users/", {
params: { searchParam, pageNumber, profile }, params: { searchParam, pageNumber, profile },
}); })
dispatch({ type: "LOAD_USERS", payload: data.users }); dispatch({ type: "LOAD_USERS", payload: data.users })
//setLoading(false); //setLoading(false);
} catch (err) { } catch (err) {
console.log(err); console.log(err)
}
} }
};
fetchUsers(); fetchUsers()
}, 500); }, 500)
return () => clearTimeout(delayDebounceFn); return () => clearTimeout(delayDebounceFn)
}, [searchParam, pageNumber, reportOption, profile]); }, [searchParam, pageNumber, reportOption, profile])
@ -299,42 +313,45 @@ const Report = () => {
const delayDebounceFn = setTimeout(() => { const delayDebounceFn = setTimeout(() => {
setLoading(true); setLoading(true)
const fetchQueries = async () => { const fetchQueries = async () => {
try { try {
if (reportOption === '1') { if (reportOption === '1') {
const { data } = await api.get("/reports/", { params: { userId, startDate, endDate, pageNumber: pageNumberTickets }, }); // const { data } = await api.get("/reports/", { params: { userId: userId ? userId : 0, startDate: convertAndFormatDate(startDate), endDate: convertAndFormatDate(endDate), pageNumber: pageNumberTickets }, })
dispatchQ({ type: "LOAD_QUERY", payload: data.tickets }); const { data } = await api.get("/reports/", { params: { userId, startDate, endDate, pageNumber: pageNumberTickets }, })
setHasMore(data.hasMore);
dispatchQ({ type: "LOAD_QUERY", payload: data.tickets })
setHasMore(data.hasMore)
setTotalCountTickets(data.count) setTotalCountTickets(data.count)
setLoading(false); setLoading(false)
} }
else if (reportOption === '2') { else if (reportOption === '2') {
const dataQuery = await api.get("/reports/user/services", { params: { userId, startDate, endDate }, }); const dataQuery = await api.get("/reports/user/services", { params: { userId, startDate, endDate }, })
dispatchQ({ type: "RESET" }) dispatchQ({ type: "RESET" })
dispatchQ({ type: "LOAD_QUERY", payload: dataQuery.data }); dispatchQ({ type: "LOAD_QUERY", payload: dataQuery.data })
//setLoading(false); //setLoading(false);
} }
} catch (err) { } catch (err) {
console.log(err); console.log(err)
}
} }
};
fetchQueries(); fetchQueries()
}, 500); }, 500)
return () => clearTimeout(delayDebounceFn); return () => clearTimeout(delayDebounceFn)
}, [userId, startDate, endDate, reportOption, pageNumberTickets, totalCountTickets]); }, [userId, startDate, endDate, reportOption, pageNumberTickets, totalCountTickets])
// Get from child 1 // Get from child 1
@ -391,7 +408,7 @@ const Report = () => {
baseURL: process.env.REACT_APP_BACKEND_URL_PRIVATE, baseURL: process.env.REACT_APP_BACKEND_URL_PRIVATE,
identifier: 'csv' identifier: 'csv'
} }
}); })
if (queryOnQueue.data) { if (queryOnQueue.data) {
@ -404,16 +421,16 @@ const Report = () => {
} catch (err) { } catch (err) {
console.log(err); console.log(err)
}
} }
};
fetchReportOnQueue(); fetchReportOnQueue()
}, 500); }, 500)
return () => clearTimeout(delayDebounceFn); return () => clearTimeout(delayDebounceFn)
}, [ userA ]) }, [userA])
const handleCSVDownload = async () => { const handleCSVDownload = async () => {
@ -422,16 +439,16 @@ const Report = () => {
try { try {
let res = await apiBroker.get(`/reports/download/${csvFile}`, { responseType: 'blob' }); let res = await apiBroker.get(`/reports/download/${csvFile}`, { responseType: 'blob' })
if (res) { if (res) {
fileDownload(res.data, `${csvFile}`); fileDownload(res.data, `${csvFile}`)
setOnQueueProcessStatus('empty') setOnQueueProcessStatus('empty')
} }
} catch (err) { } catch (err) {
console.log(err); console.log(err)
} }
@ -445,8 +462,6 @@ const Report = () => {
try { try {
// const dataQuery = await api.get("/reports/messages", { params: { userId, startDate, endDate }, });
const querySavedOnQueue = await apiBroker.post("/reports/messages", const querySavedOnQueue = await apiBroker.post("/reports/messages",
{ {
app: { app: {
@ -460,18 +475,18 @@ const Report = () => {
startDate: startDate, startDate: startDate,
endDate: endDate endDate: endDate
} }
}); })
const onQueueStatus = querySavedOnQueue.data.queueStatus const onQueueStatus = querySavedOnQueue.data.queueStatus
setOnQueueProcessStatus(onQueueStatus) setOnQueueProcessStatus(onQueueStatus)
} catch (err) { } catch (err) {
console.log(err); console.log(err)
}
} }
};
fetchQueries(); fetchQueries()
} }
@ -479,7 +494,7 @@ const Report = () => {
useEffect(() => { useEffect(() => {
const socket = openSocket(process.env.REACT_APP_BACKEND_URL); const socket = openSocket(process.env.REACT_APP_BACKEND_URL)
socket.on("queryOnQueueStatus", (data) => { socket.on("queryOnQueueStatus", (data) => {
if (data.action === 'update') { if (data.action === 'update') {
@ -505,21 +520,21 @@ const Report = () => {
if (data.action === "logout" || (data.action === "update" && if (data.action === "logout" || (data.action === "update" &&
((`${startDate}` === `${endDate}`) && (`${endDate}` === `${dateToday}`) && (`${startDate}` === `${dateToday}`)))) { ((`${startDate}` === `${endDate}`) && (`${endDate}` === `${dateToday}`) && (`${startDate}` === `${dateToday}`)))) {
dispatchQ({ type: "UPDATE_STATUS_ONLINE", payload: data.userOnlineTime }); dispatchQ({ type: "UPDATE_STATUS_ONLINE", payload: data.userOnlineTime })
} }
else if (data.action === "delete") { else if (data.action === "delete") {
dispatchQ({ type: "DELETE_USER_STATUS", payload: data.userOnlineTime }); dispatchQ({ type: "DELETE_USER_STATUS", payload: data.userOnlineTime })
} }
}); })
socket.on("user", (data) => { socket.on("user", (data) => {
if (data.action === "delete") { if (data.action === "delete") {
dispatch({ type: "DELETE_USER", payload: +data.userId }); dispatch({ type: "DELETE_USER", payload: +data.userId })
} }
}); })
} }
@ -529,11 +544,11 @@ const Report = () => {
} }
return () => { return () => {
socket.disconnect(); socket.disconnect()
}; }
}, [reportOption, startDate, endDate, userId, userA]); }, [reportOption, startDate, endDate, userId, userA])
useEffect(() => { useEffect(() => {
@ -545,7 +560,7 @@ const Report = () => {
const handleLogouOnlineUser = async (userId) => { const handleLogouOnlineUser = async (userId) => {
try { try {
await api.get(`/users/logout/${userId}`); await api.get(`/users/logout/${userId}`)
//toast.success(("Desloged!")); //toast.success(("Desloged!"));
//handleDeleteRows(scheduleId) //handleDeleteRows(scheduleId)
} catch (err) { } catch (err) {
@ -553,25 +568,25 @@ const Report = () => {
} }
}; }
const loadMore = () => { const loadMore = () => {
setTicketsPageNumber((prevState) => prevState + 1); setTicketsPageNumber((prevState) => prevState + 1)
}; }
const handleScroll = (e) => { const handleScroll = (e) => {
if (!hasMore || loading) return; if (!hasMore || loading) return
const { scrollTop, scrollHeight, clientHeight } = e.currentTarget; const { scrollTop, scrollHeight, clientHeight } = e.currentTarget
if (scrollHeight - (scrollTop + 1) < clientHeight) { if (scrollHeight - (scrollTop + 1) < clientHeight) {
loadMore(); loadMore()
} }
}; }
const renderSwitch = (param) => { const renderSwitch = (param) => {
@ -589,13 +604,13 @@ const Report = () => {
> >
{"CSV ALL"} {"CSV ALL"}
</Button> </Button>
</>); </>)
case 'pending' || 'processing': case 'pending' || 'processing':
return ( return (
<> <>
<span>PROCESSING...</span> <span>PROCESSING...</span>
</>); </>)
case 'success': case 'success':
return ( return (
@ -609,16 +624,16 @@ const Report = () => {
> >
{'CSV DOWNLOAD'} {'CSV DOWNLOAD'}
</Button> </Button>
</>); </>)
case 'downloading': case 'downloading':
return ( return (
<> <>
<span>DOWNLOADING...</span> <span>DOWNLOADING...</span>
</>); </>)
default: default:
return (<><span>WAITING...</span></>); return (<><span>WAITING...</span></>)
} }
} }
@ -708,16 +723,16 @@ const Report = () => {
if (rowData['statusOnline'].status === 'offline') { if (rowData['statusOnline'].status === 'offline') {
return { color: "red" }; return { color: "red" }
} }
else if (rowData['statusOnline'].status === 'online') { else if (rowData['statusOnline'].status === 'online') {
return { color: "green" }; return { color: "green" }
} }
else if (rowData['statusOnline'].status === 'logout...') { else if (rowData['statusOnline'].status === 'logout...') {
return { color: "orange" }; return { color: "orange" }
} }
else if (rowData['statusOnline'].status === 'waiting...') { else if (rowData['statusOnline'].status === 'waiting...') {
return { color: "orange" }; return { color: "orange" }
} }
} }
@ -794,6 +809,6 @@ const Report = () => {
)} )}
/> />
) )
}; }
export default Report; export default Report

View File

@ -7,7 +7,9 @@ const rules = {
static: [ static: [
"menu-users:view", "menu-users:view",
"user-view:show", "user-view:show",
"user-modal:editQueues" "user-modal:editQueues",
'dashboard-view:show',
'ticket-report:show'
] ]
}, },
@ -41,7 +43,6 @@ const rules = {
'show-icon-edit-queue', 'show-icon-edit-queue',
'show-icon-delete-queue', 'show-icon-delete-queue',
'space-disk-info:show', 'space-disk-info:show',
'drawer-admin-items:view', 'drawer-admin-items:view',
'tickets-manager:showall', 'tickets-manager:showall',
'user-modal:editProfile', 'user-modal:editProfile',