{\" \"}
\r\n \r\n
\r\n {this.state.filterApplied ? (\r\n \r\n
\r\n \r\n \r\n )\r\n )}\r\n \r\n {this.state.isQueueRealtimeSelected ? (\r\n \r\n {this.state.agents.map(\r\n ({\r\n index,\r\n name,\r\n status,\r\n photo,\r\n statusInfo,\r\n llamadaInfo,\r\n callStatus,\r\n extension,\r\n }) => (\r\n
\r\n \r\n \r\n
\r\n
\r\n \r\n \r\n {\r\n this.spyClicked(callStatus.channel);\r\n }}\r\n >\r\n
\r\n ) : (\r\n \"\"\r\n )}\r\n {name}
\r\n Status: {statusInfo}{\" \"}\r\n {callStatus.estado === \"En curso\" &&\r\n this.state.krakenC ? (\r\n\r\n
\r\n
\r\n \r\n {callStatus.direction ? (\r\n
\r\n \r\n
\r\n ) : (\r\n \r\n
\r\n
\r\n )}\r\n\r\n {callStatus.direction ? (\r\n \r\n
\r\n
\r\n ) : (\r\n {\" : \"}
\r\n \r\n {callStatus.timeStarted ? (\r\n \r\n
\r\n \r\n
\r\n
\r\n )}\r\n {callStatus.estado ? (\r\n \r\n
\r\n
\r\n ) : (\r\n \r\n
\r\n
\r\n )}\r\n {callStatus.destino ? (\r\n \r\n
\r\n
\r\n ) : (\r\n \r\n
\r\n
\r\n )}\r\n\r\n {callStatus.cola ? (\r\n \r\n
\r\n
\r\n ) : (\r\n \r\n
\r\n
\r\n )}\r\n {callStatus.ddi ? (\r\n \r\n
\r\n
\r\n ) : (\r\n \r\n
\r\n
\r\n )}\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n )}\r\n \r\n ) : (\r\n \"\"\r\n )}\r\n \r\n \r\n );\r\n }\r\n}\r\n","import React from \"react\";\r\nimport Realtime from \"../components/realtime/realtime\";\r\nimport Sidebar from \"../components/sidebar/Sidebar\";\r\n\r\nconst RealtimePage = () => {\r\n return (\r\n \r\n
\r\n Groups - Daily stats
\r\n\r\n QCompusoft {this.state.groupSelected}\r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n {\" \"}\r\n
\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default RealtimePage;\r\n","import http from \"../../http-common\";\r\n\r\nconst getDistributionByQueue = (\r\n initDate,\r\n endDate,\r\n queueName,\r\n token,\r\n username,\r\n company\r\n) => {\r\n return http.get(\r\n `/api/v1/teams/stats/attendedByDate?limit=99999&initDate=${initDate}&endDate=${endDate}&queueName=${queueName}&token=${token}&username=${username}&company=${company}`\r\n );\r\n};\r\n\r\nconst getActualQueues = (token, username, company) => {\r\n return http.get(\r\n `/api/v1/teams/stats/actualQueues?limit=99999&token=${token}&username=${username}&company=${company}`\r\n );\r\n};\r\n\r\nconst getDistributionByHours = (\r\n initDate,\r\n endDate,\r\n queueName,\r\n token,\r\n username,\r\n company\r\n) => {\r\n return http.post(\r\n `/api/v1/teams/stats/attendedByHours?limit=99999&initDate=${initDate}&endDate=${endDate}&token=${token}&username=${username}&company=${company}`,\r\n { queues: queueName }\r\n );\r\n};\r\n\r\nconst getAttendedByAgent = (\r\n initDate,\r\n endDate,\r\n token,\r\n username,\r\n company,\r\n queueName\r\n) => {\r\n return http.get(\r\n `/api/v1/teams/stats/attendedByAgent?limit=99999&initDate=${initDate}&endDate=${endDate}&token=${token}&username=${username}&company=${company}&queue=${queueName}`\r\n );\r\n};\r\n\r\nconst getAttendedByAgentOutbound = (\r\n initDate,\r\n endDate,\r\n token,\r\n username,\r\n company,\r\n queueName\r\n) => {\r\n return http.get(\r\n `/api/v1/teams/stats/attendedByAgentOutbound?limit=99999&initDate=${initDate}&endDate=${endDate}&token=${token}&username=${username}&company=${company}`\r\n );\r\n};\r\n\r\nconst getAttendedByAgentOutboundNum = (\r\n initDate,\r\n endDate,\r\n token,\r\n username,\r\n company,\r\n queueName\r\n) => {\r\n return http.get(\r\n `/api/v1/teams/stats/attendedByAgentOutboundNum?limit=99999&initDate=${initDate}&endDate=${endDate}&token=${token}&username=${username}&company=${company}`\r\n );\r\n};\r\nconst StatsService = {\r\n getDistributionByQueue,\r\n getActualQueues,\r\n getDistributionByHours,\r\n getAttendedByAgent,\r\n getAttendedByAgentOutbound,\r\n getAttendedByAgentOutboundNum,\r\n};\r\n\r\nexport default StatsService;\r\n","import React, { useEffect, useState } from \"react\";\r\nimport RealTimeService from \"../apiservices/RealtimeService\";\r\nimport {\r\n Dropdown,\r\n Divider,\r\n Box,\r\n Button,\r\n Table,\r\n FormButton,\r\n FormInput,\r\n Form,\r\n} from \"@fluentui/react-northstar\";\r\nimport { ParticipantAddIcon } from \"@fluentui/react-icons-northstar\";\r\nimport axios from \"axios\";\r\nimport \"./manage-groups.css\";\r\nimport { useNavigate } from \"react-router-dom\";\r\nimport StatsService from \"../apiservices/StatsService\";\r\nimport { confirmAlert } from \"react-confirm-alert\"; // Import\r\nimport \"react-confirm-alert/src/react-confirm-alert.css\"; // Import css\r\n\r\nexport default function ManageGroups() {\r\n const [showModal, setShowModal] = useState(false);\r\n const [buttonPressed, setButtonPressed] = useState(false);\r\n const [activeGroups, setActiveGroups] = useState([]);\r\n const [newGroupName, setNewGroupName] = useState(\"\");\r\n const [groupsToActiveList, setGroupsToActiveList] = useState([]);\r\n const [agentsToActiveList, setAgentsToActiveList] = useState([]);\r\n const [agentsToActiveListData, setAgentsToActiveListData] = useState([]);\r\n const [queueSelected, setQueueSelected] = useState([]);\r\n const [agentSelected, setAgentSelected] = useState([]);\r\n\r\n const navigate = useNavigate();\r\n\r\n function handleButtonPessed() {\r\n setButtonPressed(true);\r\n }\r\n\r\n function getActiveGrouops(username) {\r\n RealTimeService.getGroups(username)\r\n .then((response) => {\r\n setActiveGroups(response.data);\r\n })\r\n .catch((e) => {\r\n console.log(e);\r\n });\r\n }\r\n\r\n function getToken() {\r\n const tokenString = sessionStorage.getItem(\"tokenStats\");\r\n console.log(tokenString);\r\n return tokenString;\r\n }\r\n\r\n function getActiveAgents() {\r\n RealTimeService.getAgentsList(\"allAgents\")\r\n .then((response) => {\r\n setAgentsToActiveList(response.data);\r\n })\r\n .catch((e) => {\r\n console.log(e);\r\n });\r\n }\r\n\r\n function getActiveAgentsData() {\r\n RealTimeService.getAgents(\"allAgents\")\r\n .then((response) => {\r\n setAgentsToActiveListData(response.data);\r\n })\r\n .catch((e) => {\r\n console.log(e);\r\n });\r\n }\r\n\r\n async function getBodyToPushNewGroup() {\r\n const agentstoPush = [];\r\n for (let agent of agentSelected) {\r\n const foundAgent = agentsToActiveListData.find(\r\n (obj) => obj.name === agent\r\n );\r\n agentstoPush.push(foundAgent);\r\n }\r\n return agentstoPush;\r\n }\r\n\r\n useEffect(() => {\r\n const token = getToken();\r\n const username = sessionStorage.getItem(\"userName\");\r\n const company = sessionStorage.getItem(\"company\");\r\n StatsService.getActualQueues(token, username, company).then((res) =>\r\n setGroupsToActiveList(res.data)\r\n );\r\n getActiveGrouops(username, company);\r\n getActiveAgents();\r\n getActiveAgentsData();\r\n }, []);\r\n\r\n const getA11ySelectionMessage = {\r\n onAdd: (item) => setQueueSelected(item),\r\n onRemove: (item) => `${item} has been removed.`,\r\n itemsCount: (count) => {\r\n let narration;\r\n\r\n if (count === 1) {\r\n narration = `${count} item is selected.`;\r\n } else if (count >= 2) {\r\n narration = `${count} items are selected.`;\r\n }\r\n\r\n return narration;\r\n },\r\n };\r\n\r\n const getA11ySelectionAgents = {\r\n onAdd: (item) => setAgentSelected([...agentSelected, item]),\r\n onRemove: (item) => `${item} has been removed.`,\r\n itemsCount: (count) => {\r\n let narration;\r\n\r\n if (count === 1) {\r\n narration = `${count} item is selected.`;\r\n } else if (count >= 2) {\r\n narration = `${count} items are selected.`;\r\n }\r\n\r\n return narration;\r\n },\r\n };\r\n\r\n const onSubmit = async () => {\r\n const body = await getBodyToPushNewGroup();\r\n console.log(body);\r\n const username = sessionStorage.getItem(\"userName\");\r\n\r\n const bodyToPost = {\r\n userId: username,\r\n groupName: newGroupName,\r\n queueName: queueSelected,\r\n agents: body,\r\n };\r\n RealTimeService.postNewGroup(bodyToPost).then((res) =>\r\n console.log(res.data)\r\n );\r\n confirmAlert({\r\n title: \"Success!!\",\r\n message: `Group ${newGroupName} has been created`,\r\n buttons: [\r\n {\r\n label: \"OK\",\r\n onClick: () => navigate(\"/realtime\"),\r\n },\r\n ],\r\n });\r\n };\r\n\r\n return (\r\n <>\r\n \r\n
\r\n \r\n );\r\n}\r\n","import React from \"react\";\r\nimport ManageGroups from \"../components/manage-groups/manage-groups\";\r\nimport Sidebar from \"../components/sidebar/Sidebar\";\r\n\r\nconst ManageGroupsPage = () => {\r\n return (\r\n Realtime
\r\nManage Groups
\r\n\r\n
\r\n \r\n
\r\n \r\n Add new group{\" \"}\r\n {\r\n setButtonPressed(true);\r\n }}\r\n />\r\n
\r\n \r\n
\r\n My active groups
\r\n\r\n \r\n
\r\n \r\n {buttonPressed ? (\r\n
\r\n \r\n
\r\n ) : (\r\n \"\"\r\n )}\r\n \r\n New group form\r\n
\r\n \r\n {\r\n onSubmit();\r\n }}\r\n >\r\n {\r\n setNewGroupName(v.value);\r\n }}\r\n required\r\n showSuccessIndicator={false}\r\n />\r\n
\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default ManageGroupsPage;\r\n","import React, { useEffect, PureComponent } from \"react\";\r\nimport { PieChart, Pie, Sector, ResponsiveContainer } from \"recharts\";\r\nimport StatsService from \"../../apiservices/StatsService\";\r\nimport { Loader } from \"@fluentui/react-northstar\";\r\n\r\nconst renderActiveShape = (props) => {\r\n const RADIAN = Math.PI / 180;\r\n const {\r\n cx,\r\n cy,\r\n midAngle,\r\n innerRadius,\r\n outerRadius,\r\n startAngle,\r\n endAngle,\r\n fill,\r\n payload,\r\n percent,\r\n value,\r\n } = props;\r\n const sin = Math.sin(-RADIAN * midAngle);\r\n const cos = Math.cos(-RADIAN * midAngle);\r\n const sx = cx + (outerRadius + 10) * cos;\r\n const sy = cy + (outerRadius + 10) * sin;\r\n const mx = cx + (outerRadius + 30) * cos;\r\n const my = cy + (outerRadius + 30) * sin;\r\n const ex = mx + (cos >= 0 ? 1 : -1) * 22;\r\n const ey = my;\r\n const textAnchor = cos >= 0 ? \"start\" : \"end\";\r\n\r\n return (\r\n \r\n
\r\n
\r\n\r\n {showStats ? (\r\n <>\r\n setshowOutbound(false)}\r\n primary\r\n content=\"Inbound\"\r\n />\r\n {\" \"}\r\n
\r\n )}\r\n \r\n ) : (\r\n \"\"\r\n )}\r\n \r\n );\r\n};\r\n\r\nexport default Stats;\r\n","import React from \"react\";\r\nimport Sidebar from \"../components/sidebar/Sidebar\";\r\nimport Stats from \"../components/stats/stats\";\r\n\r\nconst StatsPage = () => {\r\n return (\r\n Stats
\r\n\r\n
\r\n Filters
\r\n\r\n
\r\n \r\n \r\n
\r\n
\r\n \r\n
\r\n \r\n {\r\n setInitDate(v.value);\r\n }}\r\n />\r\n
\r\n \r\n {\r\n setFinDate(v.value);\r\n }}\r\n />\r\n
\r\n \r\n \r\n
\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n
\r\n\r\n {showStats ? (\r\n <>\r\n
\r\n
\r\n \r\n
\r\n Distribution by Queue
\r\n\r\n
\r\n \r\n
\r\n \r\n setisQueueAttButtonPressed(true)}\r\n />\r\n setisQueueAttButtonPressed(false)}\r\n />\r\n
\r\n {isQueueAttButtonPressed ? (\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n setisQueueTimingsButtonPressed(true)}\r\n />\r\n setisQueueTimingsButtonPressed(false)}\r\n />\r\n
\r\n {isQueueTimingsButtonPressed ? (\r\n \r\n
\r\n Distribution by Agent
\r\n\r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n setisOutboundByAgentButtonPressed(true)}\r\n />\r\n setisOutboundByAgentButtonPressed(false)}\r\n />\r\n
\r\n {isOutboundByAgentButtonPressed ? (\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default StatsPage;\r\n","import { authenticationService } from \"../_services/authentication.service\";\r\n\r\nexport function handleResponse(response) {\r\n return response.text().then((text) => {\r\n const data = text && JSON.parse(text);\r\n if (!response.ok) {\r\n if ([401, 403].indexOf(response.status) !== -1) {\r\n // auto logout if 401 Unauthorized or 403 Forbidden response returned from api\r\n authenticationService.logout();\r\n }\r\n\r\n const error = (data && data.message) || response.statusText;\r\n return Promise.reject(error);\r\n }\r\n\r\n return data;\r\n });\r\n}\r\n","import { BehaviorSubject } from \"rxjs\";\r\n\r\nimport { handleResponse } from \"../_helpers/handle-response\";\r\n\r\nconst currentUserSubject = new BehaviorSubject(\r\n JSON.parse(localStorage.getItem(\"currentUser\"))\r\n);\r\n\r\nexport const authenticationService = {\r\n login,\r\n logout,\r\n currentUser: currentUserSubject.asObservable(),\r\n get currentUserValue() {\r\n return currentUserSubject.value;\r\n },\r\n};\r\n\r\nfunction login(username, password) {\r\n const requestOptions = {\r\n method: \"POST\",\r\n headers: {\r\n \"Content-Type\": \"application/json\",\r\n Authorization: \"Basic ci5sb3BlekBhc3Ryb2xpbmUuY29tOjEyMzQ=\",\r\n },\r\n body: JSON.stringify({ username, password }),\r\n };\r\n\r\n return fetch(\r\n `https://api.stats.voicehub.astroline.com:4002/api/v1/login`,\r\n requestOptions\r\n )\r\n .then(handleResponse)\r\n .then((user) => {\r\n console.log(user);\r\n // store user details and jwt token in local storage to keep user logged in between page refreshes\r\n localStorage.setItem(\"currentUser\", JSON.stringify(user));\r\n currentUserSubject.next(user);\r\n\r\n return user;\r\n });\r\n}\r\n\r\nfunction logout() {\r\n // remove user from local storage to log user out\r\n localStorage.removeItem(\"currentUser\");\r\n currentUserSubject.next(null);\r\n}\r\n","import React, { useState } from \"react\";\r\nimport PropTypes from \"prop-types\";\r\nimport { useNavigate } from \"react-router-dom\";\r\nimport { Formik, Field, Form, ErrorMessage } from \"formik\";\r\nimport * as Yup from \"yup\";\r\n\r\nimport { authenticationService } from \"../../../src/_services/authentication.service\";\r\nimport \"./login.css\";\r\n\r\nasync function loginUser(credentials) {\r\n return fetch(\"https://voicehub.astroline.com:1443/api/v2/login\", {\r\n method: \"POST\",\r\n headers: {\r\n \"Content-Type\": \"application/json\",\r\n },\r\n body: JSON.stringify(credentials),\r\n }).then(async (data) => {\r\n const tokenBody = await data.json();\r\n return tokenBody.access_token;\r\n });\r\n}\r\n\r\nexport default function Login({ setToken }) {\r\n const [username, setUserName] = useState();\r\n const [password, setPassword] = useState();\r\n const navigate = useNavigate();\r\n\r\n const setUser = (e) => {\r\n setUserName(e.target.value);\r\n sessionStorage.setItem(\"userName\", e.target.value);\r\n };\r\n\r\n const setPass = (e) => {\r\n setPassword(e.target.value);\r\n };\r\n\r\n function getToken() {\r\n const tokenString = sessionStorage.getItem(\"tokenStats\");\r\n return tokenString;\r\n }\r\n\r\n const handleSubmit = async (event) => {\r\n event.preventDefault();\r\n const token = await loginUser({\r\n email: username,\r\n password: password,\r\n });\r\n setToken(token);\r\n };\r\n\r\n return (\r\n \r\n
\r\n \r\n );\r\n}\r\n\r\nLogin.propTypes = {\r\n setToken: PropTypes.func.isRequired,\r\n};\r\n","import React from \"react\";\r\nimport Login from \"../components/login/Login\";\r\nconst LoginPage = ({ setToken }) => {\r\n return (\r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n {\r\n setStatus();\r\n authenticationService.login(username, password).then(\r\n (user) => {\r\n console.log(user);\r\n sessionStorage.setItem(\"tokenStats\", user.token);\r\n sessionStorage.setItem(\"userName\", user.username);\r\n sessionStorage.setItem(\"cdr\", user.cdr);\r\n sessionStorage.setItem(\"realtime\", user.realtime);\r\n sessionStorage.setItem(\"tags\", user.tags);\r\n sessionStorage.setItem(\"stats\", user.stats);\r\n sessionStorage.setItem(\"api\", user.api);\r\n sessionStorage.setItem(\"manageUsers\", user.manageUsers);\r\n sessionStorage.setItem(\"company\", user.company);\r\n sessionStorage.setItem(\"krakenCalls\", user.krakenCalls);\r\n sessionStorage.setItem(\r\n \"userAlias\",\r\n user.firstName + \" \" + user.lastName\r\n );\r\n sessionStorage.setItem(\"pToken\", user.pToken);\r\n sessionStorage.setItem(\"extension\", user.extension);\r\n window.location.href = `${window.location.href}home`;\r\n },\r\n (error) => {\r\n setSubmitting(false);\r\n setStatus(error);\r\n }\r\n );\r\n }}\r\n render={({ errors, status, touched, isSubmitting }) => (\r\n
\r\n )}\r\n \r\n )}\r\n />\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default LoginPage;\r\n","import React, { useState, useEffect } from \"react\";\r\nimport \"./tags.css\";\r\nimport {\r\n Dropdown,\r\n Divider,\r\n Box,\r\n Button,\r\n Table,\r\n FormButton,\r\n FormInput,\r\n Form,\r\n TeamCreateIcon,\r\n} from \"@fluentui/react-northstar\";\r\n\r\nimport { useNavigate } from \"react-router-dom\";\r\nimport { confirmAlert } from \"react-confirm-alert\"; // Import\r\nimport \"react-confirm-alert/src/react-confirm-alert.css\";\r\nimport RealTimeService from \"../apiservices/RealtimeService\";\r\nimport TagsService from \"../apiservices/TagsService\";\r\n\r\nconst Tags = () => {\r\n const [activeTags, setActiveTags] = useState([\"#TECNICOS\", \"#TECNICOS-N2\"]);\r\n const [buttonPressed, setButtonPressed] = useState(false);\r\n const [newGroupName, setNewGroupName] = useState(\"\");\r\n const [agentsToActiveList, setAgentsToActiveList] = useState([]);\r\n const [agentsToActiveListData, setAgentsToActiveListData] = useState([]);\r\n const [queueSelected, setQueueSelected] = useState([]);\r\n const [agentSelected, setAgentSelected] = useState([]);\r\n\r\n const navigate = useNavigate();\r\n\r\n function handleButtonPessed() {\r\n setButtonPressed(true);\r\n }\r\n\r\n function getActiveGrouops(username) {\r\n TagsService.getGroups(username)\r\n .then((response) => {\r\n setActiveTags(response.data);\r\n })\r\n .catch((e) => {\r\n console.log(e);\r\n });\r\n }\r\n\r\n function getToken() {\r\n const tokenString = sessionStorage.getItem(\"tokenStats\");\r\n console.log(tokenString);\r\n return tokenString;\r\n }\r\n\r\n function getActiveAgents() {\r\n const user = sessionStorage.getItem(\"userName\");\r\n\r\n TagsService.getAgentsList(\"allAgents\", user)\r\n .then((response) => {\r\n setAgentsToActiveList(response.data);\r\n })\r\n .catch((e) => {\r\n console.log(e);\r\n });\r\n }\r\n\r\n function getActiveAgentsData() {\r\n const user = sessionStorage.getItem(\"userName\");\r\n TagsService.getAgents(\"allAgents\", user)\r\n .then((response) => {\r\n setAgentsToActiveListData(response.data);\r\n })\r\n .catch((e) => {\r\n console.log(e);\r\n });\r\n }\r\n\r\n async function getBodyToPushNewGroup() {\r\n const agentstoPush = [];\r\n for (let agent of agentSelected) {\r\n const foundAgent = agentsToActiveListData.find(\r\n (obj) => obj.name === agent\r\n );\r\n agentstoPush.push(foundAgent);\r\n }\r\n return agentstoPush;\r\n }\r\n\r\n useEffect(() => {\r\n console.log(\"USEFFECT LLAMADO\");\r\n const username = sessionStorage.getItem(\"userName\");\r\n\r\n getActiveGrouops(username);\r\n getActiveAgents();\r\n getActiveAgentsData();\r\n }, []);\r\n\r\n const getA11ySelectionAgents = {\r\n onAdd: (item) => setAgentSelected([...agentSelected, item]),\r\n onRemove: (item) => `${item} has been removed.`,\r\n itemsCount: (count) => {\r\n let narration;\r\n\r\n if (count === 1) {\r\n narration = `${count} item is selected.`;\r\n } else if (count >= 2) {\r\n narration = `${count} items are selected.`;\r\n }\r\n\r\n return narration;\r\n },\r\n };\r\n\r\n const onSubmit = async () => {\r\n const body = await getBodyToPushNewGroup();\r\n console.log(body);\r\n const username = sessionStorage.getItem(\"userName\");\r\n\r\n const bodyToPost = {\r\n userId: username,\r\n groupName: `#${newGroupName}`,\r\n queueName: `#${newGroupName}`,\r\n agents: body,\r\n };\r\n TagsService.postNewGroup(bodyToPost).then((res) => console.log(res.data));\r\n confirmAlert({\r\n title: \"Success!!\",\r\n message: `Group ${newGroupName} has been created`,\r\n buttons: [\r\n {\r\n label: \"OK\",\r\n onClick: () => window.location.reload(),\r\n },\r\n ],\r\n });\r\n };\r\n\r\n return (\r\n <>\r\n \r\n
\r\n \r\n );\r\n};\r\n\r\nexport default Tags;\r\n","import React from \"react\";\r\nimport Sidebar from \"../components/sidebar/Sidebar\";\r\nimport Tags from \"../components/tags/Tags\";\r\n\r\nconst TagsPage = () => {\r\n return (\r\n TAGS Editor
\r\n\r\n Here you can configure your own tags in other to filter what you need\r\n in Realtime and Stats\r\n
\r\n\r\n
\r\n \r\n
\r\n \r\n
\r\n My active TAGS
\r\n\r\n\r\n \r\n
\r\n \r\n {buttonPressed ? (\r\n
\r\n \r\n
\r\n ) : (\r\n \"\"\r\n )}\r\n \r\n New TAG form\r\n
\r\n \r\n {\r\n onSubmit();\r\n }}\r\n >\r\n {\r\n setNewGroupName(v.value);\r\n }}\r\n required\r\n showSuccessIndicator={false}\r\n />\r\n\r\n
\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default TagsPage;\r\n","import React, { useState, useEffect } from \"react\";\r\nimport \"./api.css\";\r\n\r\n\r\nconst Api = () => {\r\n\r\n \r\n\r\n\r\n return (\r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default Api;\r\n","import React from \"react\";\r\nimport Sidebar from \"../components/sidebar/Sidebar\";\r\nimport Api from \"../components/apimenu/api\";\r\n\r\nconst ApiPage = () => {\r\n return (\r\n \r\n
\r\n );\r\n};\r\n\r\nexport default ApiPage;\r\n","import http from \"../../http-common\";\r\n\r\nconst getUsers = (username) => {\r\n return http.get(`/api/v1/getUsers?username=${username}`);\r\n};\r\n\r\nconst getUserInfo = (username) => {\r\n return http.get(`/api/v1/user/info?username=${username}`);\r\n};\r\n\r\nconst postNewUser = (body) => {\r\n return http.post(`/api/v1//users/create`, body);\r\n};\r\n\r\nconst deleteUser = (username) => {\r\n return http.delete(`/api/v1//user/delete?username=${username}`);\r\n};\r\n\r\nconst UsersService = {\r\n getUsers,\r\n postNewUser,\r\n getUserInfo,\r\n deleteUser,\r\n};\r\n\r\nexport default UsersService;\r\n","import React, { useState, useEffect } from \"react\";\r\nimport \"./manage-users.css\";\r\nimport {\r\n Dropdown,\r\n Divider,\r\n Box,\r\n Button,\r\n Table,\r\n FormButton,\r\n FormInput,\r\n Form,\r\n TeamCreateIcon,\r\n MenuButton,\r\n Avatar,\r\n MoreIcon,\r\n EditIcon,\r\n Input,\r\n FormField,\r\n FormLabel,\r\n FormMessage,\r\n} from \"@fluentui/react-northstar\";\r\n\r\nimport axios from \"axios\";\r\n\r\nimport { useNavigate } from \"react-router-dom\";\r\nimport { confirmAlert } from \"react-confirm-alert\";\r\nimport \"react-confirm-alert/src/react-confirm-alert.css\";\r\nimport UsersService from \"../apiservices/UsersService\";\r\nimport TagsService from \"../apiservices/TagsService\";\r\n\r\nconst ManageUsers = () => {\r\n const [activeUsers, setActiveUsers] = useState([]);\r\n const [buttonPressed, setButtonPressed] = useState(false);\r\n const [userPressed, setUserPressed] = useState(false);\r\n const [netUserMail, setNewUserMail] = useState(\"\");\r\n const [newUserFirstName, setNewUserFirstName] = useState(\"\");\r\n const [newUserLastName, setNewUserLastName] = useState(\"\");\r\n const [newUserPassword, setNewUserPassword] = useState(\"\");\r\n const [newUserRetypePassword, setNewUserRetypePassword] = useState(\"\");\r\n const [isAdmin, setIsAdmin] = useState(false);\r\n\r\n const [activeFeatures, setActiveFeatures] = useState([\r\n \"CDR\",\r\n \"Realtime\",\r\n \"Stats\",\r\n \"API\",\r\n \"Manage Groups\",\r\n \"Manage Users\",\r\n \"Tags\",\r\n ]);\r\n\r\n const [isCdr, setidCdr] = useState(false);\r\n const [isStats, setIsStats] = useState(false);\r\n const [isRealtime, setIsRealTime] = useState(false);\r\n const [isTags, setIsTags] = useState(false);\r\n const [isApi, setIsApi] = useState(false);\r\n const [isManageUsers, setIsManageUsers] = useState(false);\r\n const [isManageGroups, setIsManageGroups] = useState(false);\r\n\r\n const [isSubmitting, setIsSubmitting] = useState(false);\r\n\r\n const [editUsername, setEditUsername] = useState(\"\");\r\n const [editFirstName, setEditFirstName] = useState(\"\");\r\n const [editLastName, setEditLastName] = useState(\"\");\r\n const [editPermissions, setEditPermissions] = useState([]);\r\n const [editPhoto, setEditPhoto] = useState(\"\");\r\n\r\n const [indicator, setIndicator] = useState(false);\r\n\r\n function featureSelected(feature) {\r\n if (feature === \"CDR\") {\r\n setidCdr(true);\r\n }\r\n if (feature === \"Realtine\") {\r\n setIsRealTime(true);\r\n }\r\n if (feature === \"Stats\") {\r\n setIsStats(true);\r\n }\r\n if (feature === \"API\") {\r\n setIsApi(true);\r\n }\r\n if (feature === \"Manage Groups\") {\r\n setIsManageGroups(true);\r\n }\r\n if (feature === \"Manage Users\") {\r\n setIsManageUsers(true);\r\n }\r\n if (feature === \"Tags\") {\r\n setIsManageUsers(true);\r\n }\r\n }\r\n function getActiveUsers(username) {\r\n UsersService.getUsers(username)\r\n .then((response) => {\r\n console.log(response.data);\r\n getActiveUsersToObject(response.data);\r\n })\r\n .catch((e) => {\r\n console.log(e);\r\n });\r\n }\r\n\r\n function handleRowClick(username) {\r\n setEditPhoto(\"\");\r\n setIsAdmin(false);\r\n setButtonPressed(false);\r\n setIsSubmitting(true);\r\n UsersService.getUserInfo(username)\r\n .then((response) => {\r\n setEditUsername(response.data[0].username);\r\n setEditFirstName(response.data[0].firstName);\r\n setEditLastName(response.data[0].lastName);\r\n const arrayPermissions = [];\r\n if (response.data[0].cdr === true) {\r\n arrayPermissions.push(\"CDR\");\r\n }\r\n if (response.data[0].stats === true) {\r\n arrayPermissions.push(\"Stats\");\r\n }\r\n if (response.data[0].api === true) {\r\n arrayPermissions.push(\"API\");\r\n }\r\n if (response.data[0].realtime === true) {\r\n arrayPermissions.push(\"Realtime\");\r\n }\r\n if (response.data[0].manageGroups === true) {\r\n arrayPermissions.push(\"Manage Groups\");\r\n }\r\n if (response.data[0].manageUsers === true) {\r\n arrayPermissions.push(\"Manage Users\");\r\n }\r\n if (response.data[0].tags === true) {\r\n arrayPermissions.push(\"Tags\");\r\n }\r\n if (response.data[0].role === \"Admin\") {\r\n setIsAdmin(true);\r\n }\r\n setEditPermissions(arrayPermissions);\r\n const pToken = sessionStorage.getItem(\"pToken\");\r\n axios\r\n .get(\r\n `https://graph.microsoft.com/v1.0/users/${response.data[0].username}/photo/$value`,\r\n {\r\n headers: {\r\n Authorization: `Bearer ${pToken}`,\r\n },\r\n responseType: \"blob\",\r\n }\r\n )\r\n .then((o) => {\r\n const url = window.URL || window.webkitURL;\r\n const blobUrl = url.createObjectURL(o.data);\r\n setEditPhoto(blobUrl);\r\n })\r\n .catch((e) => {\r\n console.log(e);\r\n });\r\n setUserPressed(false);\r\n setTimeout(function () {\r\n setUserPressed(true);\r\n setIsSubmitting(false);\r\n }, 3000);\r\n })\r\n\r\n .catch((e) => {\r\n console.log(e);\r\n });\r\n }\r\n\r\n function getActiveUsersToObject(users) {\r\n const usersObjectArray = [];\r\n for (let user of users) {\r\n const editCell = {\r\n content: (\r\n <>\r\n {isSubmitting ? (\r\n \r\n
\r\n \r\n \r\n );\r\n};\r\n\r\nexport default ManageUsers;\r\n","import React from \"react\";\r\nimport ManageUsers from \"../components/manage-users/manage-users\";\r\nimport Sidebar from \"../components/sidebar/Sidebar\";\r\n\r\nconst ManageUsersPage = () => {\r\n return (\r\n MANAGE USERS
\r\nHere you can manage your users and their respective roles
\r\n\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n My active USERS
\r\n\r\n\r\n {buttonPressed ? (\r\n ![](\"data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==\")
\r\n )}\r\n {userPressed ? (\r\n
\r\n ) : (\r\n \"\"\r\n )}\r\n \r\n
\r\n ) : (\r\n \"\"\r\n )}\r\n {isSubmitting && (\r\n \r\n New USER form\r\n
\r\n \r\n {\r\n onSubmit();\r\n }}\r\n >\r\n {\r\n const isValid = validateEmail(v.value);\r\n if (isValid) {\r\n setIndicator(true);\r\n }\r\n setNewUserMail(v.value);\r\n }}\r\n showSuccessIndicator={indicator}\r\n />\r\n
\r\n \r\n
\r\n \r\n {\r\n setNewUserFirstName(v.value);\r\n }}\r\n />\r\n
\r\n \r\n {\r\n setNewUserLastName(v.value);\r\n if (v.value === v.value.toUpperCase()) {\r\n console.log(true);\r\n }\r\n }}\r\n />\r\n
\r\n \r\n {\r\n const isUpperCase = isUpper(v.value);\r\n console.log(isUpperCase);\r\n if (\r\n v.value.length > 10 &&\r\n isUpper(v.value) === true\r\n ) {\r\n setIndicator(true);\r\n }\r\n setNewUserPassword(v.value);\r\n }}\r\n showSuccessIndicator={indicator}\r\n />\r\n
\r\n \r\n {\r\n setNewUserRetypePassword(v.value);\r\n }}\r\n required\r\n />\r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n
\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n
\r\n );\r\n};\r\n\r\nexport default ManageUsersPage;\r\n","import \"./App.css\";\nimport Homepage from \"./pages/homepage\";\nimport Cdr from \"./pages/cdr\";\nimport { BrowserRouter, Routes, Route } from \"react-router-dom\";\nimport Realtime from \"./pages/realtime\";\nimport ManageGroupsPage from \"./pages/manage-groups\";\nimport StatsPage from \"./pages/stats\";\nimport React, { useState } from \"react\";\nimport LoginPage from \"./pages/login\";\nimport TagsPage from \"./pages/tags\";\nimport ApiPage from \"./pages/api\";\nimport Login from \"./components/login/Login\";\nimport ManageUsersPage from \"./pages/manage-users\";\n\nfunction setToken(userToken) {\n sessionStorage.setItem(\"tokenStats\", JSON.stringify(userToken));\n}\n\nfunction getToken() {\n const tokenString = sessionStorage.getItem(\"tokenStats\");\n console.log(tokenString);\n return tokenString;\n}\n\nfunction App() {\n const tokenStats = getToken();\n\n if (!tokenStats) {\n return \n \n \n
\n );\n}\n\nexport default App;\n","const reportWebVitals = onPerfEntry => {\n if (onPerfEntry && onPerfEntry instanceof Function) {\n import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {\n getCLS(onPerfEntry);\n getFID(onPerfEntry);\n getFCP(onPerfEntry);\n getLCP(onPerfEntry);\n getTTFB(onPerfEntry);\n });\n }\n};\n\nexport default reportWebVitals;\n","import React from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport \"./index.css\";\nimport App from \"./App\";\nimport reportWebVitals from \"./reportWebVitals\";\nimport { Provider, teamsTheme } from \"@fluentui/react-northstar\";\nimport { BrowserRouter } from \"react-router-dom\";\n\nconst root = createRoot(document.getElementById(\"root\"));\nroot.render(\n