\n
\n));\n\nconst Item = styled(ListItemButton)`\n padding-top: ${(props) =>\n props.theme.spacing(props.depth && props.depth > 0 ? 2 : 3)};\n padding-bottom: ${(props) =>\n props.theme.spacing(props.depth && props.depth > 0 ? 2 : 3)};\n padding-left: ${(props) =>\n props.theme.spacing(props.depth && props.depth > 0 ? 14 : 8)};\n padding-right: ${(props) =>\n props.theme.spacing(props.depth && props.depth > 0 ? 4 : 7)};\n font-weight: ${(props) => props.theme.typography.fontWeightRegular};\n svg {\n color: ${(props) => props.theme.sidebar.color};\n font-size: 40px;\n width: 80px;\n height: 20px;\n opacity: 1;\n }\n &:hover {\n background: rgba(0, 0, 0, 0.08);\n color: ${(props) => props.theme.sidebar.color};\n }\n &.${(props) => props.activeclassname} {\n background-color: ${(props) =>\n darken(0.03, props.theme.sidebar.background)};\n span {\n color: ${(props) => props.theme.sidebar.color};\n }\n }\n`;\n\nconst Title = styled(ListItemText)`\n margin: 0;\n span {\n color: ${(props) =>\n rgba(\n props.theme.sidebar.color,\n props.depth && props.depth > 0 ? 0.7 : 1\n )};\n font-size: ${(props) => props.theme.typography.body1.fontSize}px;\n padding: 0 ${(props) => props.theme.spacing(4)};\n }\n`;\n\nconst Badge = styled(Chip)`\n font-weight: ${(props) => props.theme.typography.fontWeightBold};\n height: 20px;\n position: absolute;\n right: 26px;\n top: 12px;\n background: ${(props) => props.theme.sidebar.badge.background};\n z-index: 1;\n span.MuiChip-label,\n span.MuiChip-label:hover {\n font-size: 11px;\n cursor: pointer;\n color: ${(props) => props.theme.sidebar.badge.color};\n padding-left: ${(props) => props.theme.spacing(2)};\n padding-right: ${(props) => props.theme.spacing(2)};\n }\n`;\n\nconst ExpandLessIcon = styled(ExpandLess)`\n color: ${(props) => rgba(props.theme.sidebar.color, 0.5)};\n`;\n\nconst ExpandMoreIcon = styled(ExpandMore)`\n color: ${(props) => rgba(props.theme.sidebar.color, 0.5)};\n`;\n\nconst SidebarNavListItem = (props) => {\n const {\n title,\n href,\n depth = 0,\n children,\n icon: Icon,\n badge,\n open: openProp = false,\n keyIndex,\n } = props;\n\n const [open, setOpen] = React.useState(openProp);\n\n const handleToggle = () => {\n setOpen((state) => !state);\n };\n\n if (children) {\n return (\n - \n
- \n
- \n
- \n
Something went wrong.
;\n }\n\n return this.props.children;\n }\n}\n\nexport default ErrorBoundary;\n","import { Card, CardContent } from \"@mui/material\";\nimport React from \"react\";\nimport Box from \"@mui/material/Box\";\nimport CardMedia from \"@mui/material/CardMedia\";\nimport PictureAsPdfIcon from \"@mui/icons-material/PictureAsPdf\";\nimport Typography from \"@mui/material/Typography\";\nimport ErrorBoundary from \"./ErrorBoundary\";\n\nconst SelectedBotInteractiveButton = ({ data, lastdata }) => {\n // Function to limit words\n const limitWords = (text, limit) => {\n if (!text) return \"\"; // Return empty if there's no text\n const words = text.split(\" \"); // Split the text into words\n return words.length > limit\n ? words.slice(0, limit).join(\" \") + \"...\"\n : text; // Limit the words\n };\n return (\n <>\n- \n
\n
\n );\n};\n\nexport default ImageZoom;\n","import React from \"react\";\n//import styled from \"@emotion/styled\";\nimport {\n Button,\n Card,\n //CardMedia as MuiCardMedia,\n Dialog,\n DialogActions,\n DialogContent,\n DialogContentText,\n DialogTitle,\n} from \"@mui/material\";\nimport Tooltip from \"@mui/material/Tooltip\";\nimport AddIcon from \"@mui/icons-material/Add\";\nimport RemoveIcon from \"@mui/icons-material/Remove\";\nimport { Player } from \"video-react\";\nimport AudioPlayer from \"react-h5-audio-player\";\nimport ImageZoom from \"./ImageZoom\";\n//import html2canvas from \"html2canvas\";\nconst ChatMediaDialog = ({ openAdd, handleClickClose }) => {\n const [scale, setScale] = React.useState(1);\n const handleClose = () => {\n setScale(1);\n handleClickClose();\n };\n\n const handleZoomIn = () => {\n setScale(scale + 0.1);\n };\n\n const handleZoomOut = () => {\n if (scale > 0.2) {\n setScale(scale - 0.1);\n }\n };\n return (\n <>\n \n 
\n
\n \n
\n \n \n );\n};\n\nexport default EmojiComponent;\n","import React, { useState, useRef } from \"react\";\nimport {\n Button,\n Card,\n Dialog,\n DialogContent,\n DialogContentText,\n DialogTitle,\n IconButton,\n} from \"@mui/material\";\nimport MicIcon from \"@mui/icons-material/Mic\";\nimport MicOffIcon from \"@mui/icons-material/MicOff\";\nimport CloseIcon from \"@mui/icons-material/Close\"; // Import close icon\nimport SendIcon from \"@mui/icons-material/Send\";\nimport ReplayIcon from \"@mui/icons-material/Replay\";\n\nconst VoiceNote = ({ openAdd, handleClickClose, channelId, sendVoiceNote }) => {\n const [isRecording, setIsRecording] = useState(false);\n const [audioURL, setAudioURL] = useState(\"\");\n const [convertedAudio, setConvertedAudio] = useState(\"\");\n //const [recordedAudio, setRecordedAudio] = useState({});\n const mediaRecorderRef = useRef(null);\n const audioChunksRef = useRef([]);\n\n // useEffect(() => {\n // setRecordedAudio(convertedAudio);\n // }, [convertedAudio]);\n\n // const startRecording = async () => {\n // try {\n // const stream = await navigator.mediaDevices.getUserMedia({ audio: true });\n // mediaRecorderRef.current = new MediaRecorder(stream);\n\n // mediaRecorderRef.current.ondataavailable = (event) => {\n // console.log(\"1\");\n // audioChunksRef.current.push(event.data);\n // };\n\n // mediaRecorderRef.current.onstop = () => {\n // console.log(\"2\");\n // const audioBlob = new Blob(audioChunksRef.current, {\n // type: \"audio/mpeg\",\n // });\n // const audioUrl = URL.createObjectURL(audioBlob);\n // setAudioURL(audioUrl);\n // audioChunksRef.current = [];\n // };\n\n // mediaRecorderRef.current.start();\n // setIsRecording(true);\n // } catch (error) {\n // console.error(\"Error accessing microphone: \", error);\n // }\n // };\n\n // const stopRecording = () => {\n // mediaRecorderRef.current.stop();\n // setIsRecording(false);\n\n // mediaRecorderRef.current.onstop = async () => {\n // const audioBlob = new Blob(audioChunksRef.current, {\n // type: \"audio/mpeg\",\n // });\n\n // // Create a URL for the Blob and update state\n // const audioUrl = URL.createObjectURL(audioBlob);\n // setAudioURL(audioUrl); // Set the new audio URL\n\n // // Convert Blob to File\n // const file = new File([audioBlob], `audio${Date.now()}.mp3`, {\n // type: \"audio/mpeg\", // Keep the MIME type\n // lastModified: Date.now(), // You can use a timestamp here\n // });\n\n // //console.log(file); // Log the new file\n // setConvertedAudio(file); // Update the converted audio state\n // audioChunksRef.current = []; // Clear the audio chunks\n // };\n // };\n\n const startRecording = async () => {\n try {\n const stream = await navigator.mediaDevices.getUserMedia({ audio: true });\n\n // Check for Ogg Audio support in the browser\n const mimeType = MediaRecorder.isTypeSupported(\"audio/ogg; codecs=opus\")\n ? \"audio/ogg; codecs=opus\"\n : \"audio/webm; codecs=opus\"; // Fallback to WebM if Ogg is unavailable\n\n mediaRecorderRef.current = new MediaRecorder(stream, { mimeType });\n\n mediaRecorderRef.current.ondataavailable = (event) => {\n audioChunksRef.current.push(event.data);\n };\n\n mediaRecorderRef.current.onstop = () => {\n const audioBlob = new Blob(audioChunksRef.current, { type: mimeType });\n const audioUrl = URL.createObjectURL(audioBlob);\n setAudioURL(audioUrl);\n audioChunksRef.current = [];\n };\n\n mediaRecorderRef.current.start();\n setIsRecording(true);\n } catch (error) {\n console.error(\"Error accessing microphone: \", error);\n }\n };\n\n const stopRecording = () => {\n mediaRecorderRef.current.stop();\n setIsRecording(false);\n\n mediaRecorderRef.current.onstop = async () => {\n const mimeType =\n mediaRecorderRef.current.mimeType || \"audio/ogg; codecs=opus\";\n const audioBlob = new Blob(audioChunksRef.current, { type: mimeType });\n\n const audioUrl = URL.createObjectURL(audioBlob);\n setAudioURL(audioUrl);\n\n const file = new File([audioBlob], `audio${Date.now()}.ogg`, {\n type: mimeType,\n lastModified: Date.now(),\n });\n\n setConvertedAudio(file);\n audioChunksRef.current = []; // Clear the audio chunks\n };\n };\n\n const handleClose = () => {\n handleClickClose();\n };\n const handleReset = () => {\n setAudioURL(\"\");\n };\n\n // console.log(\"\\n audioURL == \" + audioURL);\n\n const handleSend = async () => {\n console.log(audioURL);\n if (audioURL) {\n // Convert to MP3 if necessary\n if (convertedAudio) {\n // Send the MP3 file\n sendVoiceNote(convertedAudio, channelId);\n } else {\n // Fallback or handle the raw audio URL\n sendVoiceNote(audioURL, channelId);\n }\n }\n setAudioURL(\"\");\n handleClose();\n };\n\n // const handleSend = async () => {\n // console.log(audioURL);\n // audioURL && sendVoiceNote(recordedAudio, channelId);\n // setAudioURL(\"\");\n // handleClose();\n // };\n\n return (\n \n \n Recording...\n
\n )}\n\n {audioURL && !isRecording && (\n \n
\n )}\n Recorded Audio
\n \n \n
\n \n \n \n
\n - \n {filteredSuggestions.map((suggestion, index) => (\n
\n
\n \n\n \n setKey(k)}\n >\n \n {!!process && process === \"loading\" && (\n \n \n )}\n {fileSize && (\n \n The file is too large. The total size is more than 5MB!\n \n )}\n {!!process && process === \"error\" && (\n \n {!!fileData && fileData.message}\n \n )}\n \n {!!privateProcess && privateProcess === \"loading\" && (\n \n {selectedPrivateFile.name}\n \n )}\n \n \n setChatPrivateMsg(e.target.value)}\n value={chatPrivateMsg}\n onKeyDown={(e) => {\n e.keyCode === 13 && handleSendPrivateMessage();\n }}\n />\n \n \n \n \n \n \n setFiles(e.target.files[0])}\n onChange={changePrivateHandler}\n />\n \n \n \n \n \n \n {\n handleSendPrivateMessage();\n }}\n >\n Send\n \n \n \n \n \n ) : (\n !!chatAssignee &&\n chatAssignee === user.uid && (\n \n {!!privateProcess && privateProcess === \"loading\" && (\n \n {selectedPrivateFile.name}\n \n )}\n {filePrivateSize && (\n \n The file is too large. The total size is more than 5MB!\n \n )}\n \n \n setChatPrivateMsg(e.target.value)}\n value={chatPrivateMsg}\n onKeyDown={(e) => {\n if (\n !!privateProcess &&\n privateProcess === \"success\" &&\n e.keyCode === 13 &&\n !e.shiftKey // Send message on Enter without Shift\n ) {\n e.preventDefault(); // Prevent the default behavior of Enter\n handleSendPrivateMessage();\n }\n if (e.key === \"Enter\" && e.shiftKey) {\n // Prevent the default behavior of the Enter key\n e.preventDefault();\n // Add a newline character to the input value\n setChatPrivateMsg(chatPrivateMsg + \"\\n\");\n }\n }}\n />\n \n \n \n \n \n {!!privateProcess && privateProcess === \"success\" ? (\n \n setFiles(e.target.files[0])}\n onChange={changePrivateHandler}\n />\n\n \n \n ) : (\n \n \n )}\n \n \n \n \n {\n !!privateProcess &&\n privateProcess === \"success\" &&\n handleSendPrivateMessage();\n }}\n >\n Send\n \n \n \n \n \n )\n )}\n \n
\n \n );\n};\n\nexport default ChatMessagePannel;\n","import React from \"react\";\nimport styled from \"@emotion/styled\";\nimport {\n Button,\n Card,\n CardMedia as MuiCardMedia,\n Dialog,\n DialogActions,\n DialogContent,\n DialogContentText,\n DialogTitle,\n} from \"@mui/material\";\n//import ReactPlayer from \"react-player\";\nimport { Player } from \"video-react\";\nimport AudioPlayer from \"react-h5-audio-player\";\nconst ChatMediaDialog = ({ openAdd, handleClickClose }) => {\n // const [open, setOpen] = React.useState(false);\n\n // const handleClose = () => {\n // setOpen(false);\n // };\n const CardMedia = styled(MuiCardMedia)`\n weight: 100%;\n height: 80vh;\n cursor: pointer;\n `;\n return (\n <>\n \n {selectedFile.name}\n
\n - \n {!!rows && !!rows.length > 0 ? (\n rows.map((item, i) => (\n
- \n {loginStatus.length !== 0 && !!loginStatus.data ? (\n loginStatus.data.map(\n (item, i) =>\n !!item.signinsignout[0] &&\n !!item.signinsignout[0].availability[0] &&\n item.signinsignout[0].availability[0].isAvailable > 0 && (\n
- \n {!!rows && !!rows.length > 0 ? (\n rows.map((item, i) => (\n
- \n {!!loginStatus && !!loginStatus.data ? (\n loginStatus.data.map(\n (item, i) =>\n !!item.signinsignout[0] &&\n !!item.signinsignout[0].availability[0] &&\n item.signinsignout[0].availability[0].isAvailable > 0 && (\n
\n
\n - \n {!!labels && !!labels.data\n ? labels.data.map((item, i) => (\n
\n \n \n \n \n {\n // setSearch(e.target.value);\n // }}\n onChange={(e) => {\n searchFilter(e);\n }}\n />\n \n \n \n \n {!!status && status === \"loading\" && (\n \n \n Error: (status-code : {contacts.status})\n \n {contacts.message} — check it out!\n \n )}\n\n {!!status && status === \"error\" && (\n \n Error: \n Something went wrong\n \n )}\n\n \n \n {!!rows &&\n stableSort(rows, getComparator(order, orderBy))\n .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)\n .map((row, index) => {\n const isItemSelected = isSelected(row.short_code);\n const labelId = `enhanced-table-checkbox-${index}`;\n\n return (\n handleClick(event, row.name)}\n role=\"checkbox\"\n aria-checked={isItemSelected}\n tabIndex={-1}\n //key={row._id}\n key={index}\n selected={isItemSelected}\n >\n {/* \n */}\n \n {!!row && !!row.color ? (\n \n\n \n \n {row.name}\n \n {row.company_name} \n {row.email} \n \n );\n })}\n {emptyRows > 0 && (\n \n \n )}\n \n \n \n \n
\n );\n}\n\nfunction ContactsTable() {\n const dispatch = useDispatch();\n const { data: contacts, status } = useSelector((state) => state.contact);\n React.useEffect(() => {\n dispatch(fetchContacts());\n }, [dispatch]);\n return (\n \n \n Contacts List\n \n
\n \n {/*
\n - \n {/* //canned_responses */}\n {!!listName && listName === \"canned_responses\" ? (\n
\n \n \n \n \n \n \n {\n // setSearch(e.target.value);\n // }}\n onChange={(e) => {\n searchFilter(e);\n }}\n />\n \n \n {!!status && status === \"loading\" && (\n \n Error: (status-code : {agents.status}) \n {agents.message} — check it out!\n \n )}\n\n {!!status && status === \"error\" && (\n \n Error: \n Something went wrong\n \n )}\n\n \n \n {!!rows &&\n stableSort(rows, getComparator(order, orderBy))\n .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)\n .map((row, index) => {\n const isItemSelected = isSelected(row.short_code);\n const labelId = `enhanced-table-checkbox-${index}`;\n\n return (\n handleClick(event, row.name)}\n role=\"checkbox\"\n aria-checked={isItemSelected}\n tabIndex={-1}\n // key={row._id}\n key={index}\n selected={isItemSelected}\n >\n {/* \n */}\n\n \n \n {row.name}\n \n {row.displayname} \n {/* \n */}\n \n );\n })}\n {emptyRows > 0 && (\n \n \n )}\n \n \n \n \n
\n );\n}\n\nfunction AgentsTable() {\n const dispatch = useDispatch();\n const { data: agents, status } = useSelector((state) => state.agents);\n React.useEffect(() => {\n dispatch(fetchAllAgents());\n }, [dispatch]);\n return (\n \n \n Agents List\n \n
\n \n {/*
\n \n \n \n \n \n \n \n setSearch(e.target.value)}\n onChange={(e) => {\n searchFilter(e);\n }}\n />\n \n \n {!!status && status === \"loading\" && (\n \n \n Error: (status-code : {cannedResponses.status})\n \n {cannedResponses.message} — check it out!\n \n )}\n\n {!!status && status === \"error\" && (\n \n Error: \n Something went wrong\n \n )}\n\n \n \n {!!rows &&\n stableSort(rows, getComparator(order, orderBy))\n .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)\n .map((row, index) => {\n const isItemSelected = isSelected(row.short_code);\n const labelId = `enhanced-table-checkbox-${index}`;\n\n return (\n handleClick(event, row.short_code)}\n role=\"checkbox\"\n aria-checked={isItemSelected}\n tabIndex={-1}\n key={row.srno}\n selected={isItemSelected}\n >\n {/* \n */}\n \n {row.short_code}\n \n {row.content} \n \n {\n handleEdit(row);\n }}\n />\n {\n handleDelete(row);\n }}\n />\n \n \n );\n })}\n {emptyRows > 0 && (\n \n \n )}\n \n \n \n \n
\n );\n}\n\nfunction CannedResponsesTable() {\n const dispatch = useDispatch();\n\n const { data: cannedResponses, status } = useSelector(\n (state) => state.cannedResponses\n );\n React.useEffect(() => {\n dispatch(fetchAllCannedResponses());\n }, [dispatch]);\n\n return (\n \n \n Canned Responses List\n \n
\n \n {\n handleAdd();\n }}\n >\n Add\n
\n \n \n \n \n \n
\n \n \n Add new Canned Responses\n \n
\n \n \n // dispatch(\n // settingsMenu({\n // list: \"canned_responses\",\n // listData: [],\n // })\n // )\n // }\n onClick={() => {\n handleBack();\n }}\n >\n
\n \n \n {({\n errors,\n handleBlur,\n handleChange,\n handleSubmit,\n isSubmitting,\n touched,\n values,\n status,\n }) => (\n \n \n {errors && errors.sent && (\n \n {errors.message}\n \n )}\n {!!addData &&\n (!!addData.status && parseInt(addData.status) !== 201 ? (\n \n {!!addData && addData.message}\n \n ) : (\n status &&\n status.sent && (\n \n Your data has been submitted successfully!\n \n )\n ))}\n {isSubmitting ? (\n \n \n ) : (\n \n )}\n \n \n )}\n \n
\n \n );\n};\n\nconst CannedResponsesAdd = () => {\n const dispatch = useDispatch();\n React.useEffect(() => {\n dispatch(reset());\n }, [dispatch]);\n return (\n <>\n \n \n \n \n \n
\n \n \n Delete Canned Responses\n \n
\n \n \n // dispatch(\n // settingsMenu({\n // list: \"canned_responses\",\n // listData: [],\n // })\n // )\n // }\n\n onClick={() => {\n handleBack();\n }}\n >\n
\n \n \n {({\n errors,\n handleBlur,\n handleChange,\n handleSubmit,\n isSubmitting,\n touched,\n values,\n status,\n }) => (\n \n \n {errors && errors.sent && (\n \n {errors.message}\n \n )}\n {!!deleteData &&\n (!!deleteData.status &&\n parseInt(deleteData.status) !== 201 ? (\n \n {!!deleteData && deleteData.message}\n \n ) : (\n status &&\n status.sent && (\n \n Your data has been Deleted successfully!\n \n )\n ))}\n {/* {!!deleteData &&\n !!deleteData.status &&\n parseInt(deleteData.status) !== 201 && (\n \n {!!deleteData && deleteData.message}\n \n )}\n\n {!!deleteData &&\n !!deleteData.status &&\n parseInt(deleteData.status) === 201 && (\n \n {!!deleteData && deleteData.message}\n \n )} */}\n\n {isSubmitting ? (\n \n \n ) : (\n \n )}\n \n \n )}\n \n
\n \n );\n};\n\nconst CannedResponsesDelete = ({ data }) => {\n const dispatch = useDispatch();\n React.useEffect(() => {\n dispatch(reset());\n }, [dispatch]);\n return (\n <>\n \n \n \n \n \n
\n \n \n Edit Canned Responses\n \n
\n \n {\n handleBack();\n }}\n >\n
\n \n \n {({\n errors,\n handleBlur,\n handleChange,\n handleSubmit,\n isSubmitting,\n touched,\n values,\n status,\n }) => (\n \n \n {errors && errors.sent && (\n \n {errors.message}\n \n )}\n {!!editData &&\n (!!editData.status && parseInt(editData.status) !== 201 ? (\n \n {!!editData && editData.message}\n \n ) : (\n status &&\n status.sent && (\n \n Your data has been submitted successfully!\n \n )\n ))}\n {isSubmitting ? (\n \n \n ) : (\n \n )}\n \n \n )}\n \n
\n \n );\n};\n\nconst CannedResponsesEdit = ({ data }) => {\n const dispatch = useDispatch();\n React.useEffect(() => {\n dispatch(reset());\n }, [dispatch]);\n return (\n <>\n \n \n \n \n \n \n \n {\n // setSearch(e.target.value);\n // }}\n onChange={(e) => {\n searchFilter(e);\n }}\n />\n \n \n {!!status && status === \"loading\" && (\n \n \n Error: (status-code : {companyAttributes.status})\n \n {companyAttributes.message} — check it out!\n \n )}\n\n {!!status && status === \"error\" && (\n \n Error: \n Something went wrong\n \n )}\n\n \n \n {!!rows &&\n stableSort(rows, getComparator(order, orderBy))\n .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)\n .map((row, index) => {\n const isItemSelected = isSelected(row.name);\n const labelId = `enhanced-table-checkbox-${index}`;\n\n return (\n \n handleClick(event, row.display_name)\n }\n role=\"checkbox\"\n aria-checked={isItemSelected}\n tabIndex={-1}\n key={row.srno}\n selected={isItemSelected}\n >\n {/* \n */}\n \n {row.display_name}\n \n {row.key} \n \n {row.display_type === 0 ? \"Link\" : \"Text\"}\n \n \n {\n handleEdit(row);\n }}\n />\n {\n handleDelete(row);\n }}\n />\n \n \n );\n })}\n {emptyRows > 0 && (\n \n \n )}\n \n \n \n \n
\n );\n}\n\nfunction CompanyAttributesTable() {\n const dispatch = useDispatch();\n const { data: companyAttributes, status } = useSelector(\n (state) => state.companyAttributes\n );\n React.useEffect(() => {\n dispatch(fetchAllcompanyAttributes());\n }, [dispatch]);\n return (\n \n \n Company Attributes List\n \n
\n \n {\n handleAdd();\n }}\n >\n Add\n
\n \n \n \n \n \n
\n \n \n Add Company Attributes\n \n
\n \n {\n handleBack();\n }}\n >\n
\n \n \n {({\n errors,\n handleBlur,\n handleChange,\n handleSubmit,\n isSubmitting,\n touched,\n values,\n status,\n }) => (\n \n \n {errors && errors.sent && (\n \n {errors.message}\n \n )}\n {!!addData &&\n (!!addData.status && parseInt(addData.status) !== 201 ? (\n \n {!!addData && addData.message}\n \n ) : (\n status &&\n status.sent && (\n \n Your data has been submitted successfully!\n \n )\n ))}\n {isSubmitting ? (\n \n \n ) : (\n \n )}\n \n \n )}\n \n
\n \n );\n};\n\nconst CompanyAttributesAdd = () => {\n const dispatch = useDispatch();\n React.useEffect(() => {\n dispatch(reset());\n }, [dispatch]);\n return (\n <>\n \n \n \n \n \n
\n \n \n Delete Company Attributes\n \n
\n \n \n // dispatch(\n // settingsMenu({\n // list: \"companyattributes\",\n // listData: [],\n // })\n // )\n // }\n\n onClick={() => {\n handleBack();\n }}\n >\n
\n \n \n {({\n errors,\n handleBlur,\n handleChange,\n handleSubmit,\n isSubmitting,\n touched,\n values,\n status,\n }) => (\n \n \n {errors && errors.sent && (\n \n {errors.message}\n \n )}\n {!!deleteData &&\n (!!deleteData.status &&\n parseInt(deleteData.status) !== 201 ? (\n \n {!!deleteData && deleteData.message}\n \n ) : (\n status &&\n status.sent && (\n \n Your data has been Deleted successfully!\n \n )\n ))}\n {isSubmitting ? (\n \n \n ) : (\n \n )}\n \n \n )}\n \n
\n \n );\n};\n\nconst CompanyAttributesDelete = ({ data }) => {\n const dispatch = useDispatch();\n React.useEffect(() => {\n dispatch(reset());\n }, [dispatch]);\n return (\n <>\n \n \n \n \n \n
\n \n \n Edit Company Attributes\n \n
\n \n \n // dispatch(\n // settingsMenu({\n // list: \"companyattributes\",\n // listData: [],\n // })\n // )\n // }\n\n onClick={() => {\n handleBack();\n }}\n >\n
\n \n \n {({\n errors,\n handleBlur,\n handleChange,\n handleSubmit,\n isSubmitting,\n touched,\n values,\n status,\n }) => (\n \n \n {errors && errors.sent && (\n \n {errors.message}\n \n )}\n {!!addData &&\n (!!addData.status && parseInt(addData.status) !== 201 ? (\n \n {!!addData && addData.message}\n \n ) : (\n status &&\n status.sent && (\n \n Your data has been submitted successfully!\n \n )\n ))}\n {isSubmitting ? (\n \n \n ) : (\n \n )}\n \n \n )}\n \n
\n \n );\n};\n\nconst CompanyAttributesEdit = ({ data }) => {\n const dispatch = useDispatch();\n React.useEffect(() => {\n dispatch(reset());\n }, [dispatch]);\n return (\n <>\n \n \n \n \n \n \n \n {\n // setSearch(e.target.value);\n // }}\n onChange={(e) => {\n searchFilter(e);\n }}\n />\n \n \n {!!status && status === \"loading\" && (\n \n Error: (status-code : {labels.status}) \n {labels.message} — check it out!\n \n )}\n\n {!!status && status === \"error\" && (\n \n Error: \n Something went wrong\n \n )}\n\n \n \n {!!rows &&\n stableSort(rows, getComparator(order, orderBy))\n .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)\n .map((row, index) => {\n const isItemSelected = isSelected(row.name);\n const labelId = `enhanced-table-checkbox-${index}`;\n\n return (\n handleClick(event, row.name)}\n role=\"checkbox\"\n aria-checked={isItemSelected}\n tabIndex={-1}\n key={row.srno}\n selected={isItemSelected}\n >\n {/* \n */}\n \n {row.title}\n \n \n \n {row.description} \n \n \n // dispatch(\n // settingsMenu({\n // list: \"labels_edit\",\n // listData: row,\n // })\n // )\n // }\n onClick={() => {\n handleEdit(row);\n }}\n />\n \n dispatch(\n settingsMenu({\n list: \"labels_delete\",\n listData: row,\n })\n )\n }\n />\n \n \n );\n })}\n {emptyRows > 0 && (\n \n \n )}\n \n \n \n \n
\n );\n}\n\nfunction LabelsTable() {\n //const navigate = useNavigate();\n const dispatch = useDispatch();\n const { data: labels, status } = useSelector((state) => state.labels);\n React.useEffect(() => {\n dispatch(fetchAllLabels());\n }, [dispatch]);\n\n return (\n \n \n Labels List\n \n
\n \n \n // dispatch(\n // settingsMenu({\n // list: \"labels_add\",\n // listData: [],\n // })\n // )\n // }\n onClick={() => {\n handleAdd();\n }}\n >\n Add\n
\n \n \n \n \n \n
\n \n \n Add new Labels\n \n
\n \n {\n handleBack();\n }}\n >\n
\n \n \n {({\n errors,\n handleBlur,\n handleChange,\n handleSubmit,\n isSubmitting,\n touched,\n values,\n status,\n }) => (\n \n \n {errors && errors.sent && (\n \n {errors.message}\n \n )}\n {!!addData &&\n (!!addData.status && parseInt(addData.status) !== 201 ? (\n \n {!!addData && addData.message}\n \n ) : (\n status &&\n status.sent && (\n \n Your data has been submitted successfully!\n \n )\n ))}\n {isSubmitting ? (\n \n \n ) : (\n \n )}\n \n \n )}\n \n
\n \n );\n};\n\nconst LabelsAdd = () => {\n const dispatch = useDispatch();\n React.useEffect(() => {\n dispatch(reset());\n }, [dispatch]);\n return (\n <>\n \n \n \n \n \n
\n \n \n Delete Labels\n \n
\n \n {\n handleBack();\n }}\n >\n
\n \n \n {({\n errors,\n handleBlur,\n handleChange,\n handleSubmit,\n isSubmitting,\n touched,\n values,\n status,\n }) => (\n \n \n {errors && errors.sent && (\n \n {errors.message}\n \n )}\n {!!deleteData &&\n (!!deleteData.status &&\n parseInt(deleteData.status) !== 201 ? (\n \n {!!deleteData && deleteData.message}\n \n ) : (\n status &&\n status.sent && (\n \n Your data has been Deleted successfully!\n \n )\n ))}\n {isSubmitting ? (\n \n \n ) : (\n \n )}\n \n \n )}\n \n
\n \n );\n};\n\nconst LabelsDelete = ({ data }) => {\n const dispatch = useDispatch();\n React.useEffect(() => {\n dispatch(reset());\n }, [dispatch]);\n return (\n <>\n \n \n \n \n \n
\n \n \n Edit Labels\n \n
\n \n \n // dispatch(\n // settingsMenu({\n // list: \"labels\",\n // listData: [],\n // })\n // )\n // }\n onClick={() => {\n handleBack();\n }}\n >\n
\n \n \n {({\n errors,\n handleBlur,\n handleChange,\n handleSubmit,\n isSubmitting,\n touched,\n values,\n status,\n }) => (\n \n \n {errors && errors.sent && (\n \n {errors.message}\n \n )}\n {!!editData &&\n (!!editData.status && parseInt(editData.status) !== 201 ? (\n \n {!!editData && editData.message}\n \n ) : (\n status &&\n status.sent && (\n \n Your data has been submitted successfully!\n \n )\n ))}\n {isSubmitting ? (\n \n \n ) : (\n \n )}\n \n \n )}\n \n
\n \n );\n};\n\nconst LabelsEdit = ({ data }) => {\n const dispatch = useDispatch();\n React.useEffect(() => {\n dispatch(reset());\n }, [dispatch]);\n return (\n <>\n \n \n \n \n \n \n \n setSearch(e.target.value)}\n onChange={(e) => {\n searchFilter(e);\n }}\n />\n \n \n {!!status && status === \"loading\" && (\n \n \n Error: (status-code : {chatHistoryViewer.status})\n \n {chatHistoryViewer.message} — check it out!\n \n )}\n\n {!!status && status === \"error\" && (\n \n Error: \n Something went wrong\n \n )}\n\n \n \n {!!rows &&\n stableSort(rows, getComparator(order, orderBy))\n .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)\n .map((row, index) => {\n const isItemSelected = isSelected(row.date);\n const labelId = `enhanced-table-checkbox-${index}`;\n\n return (\n handleClick(event, row.date)}\n role=\"checkbox\"\n aria-checked={isItemSelected}\n tabIndex={-1}\n key={row.srno}\n selected={isItemSelected}\n >\n \n {row.created_at}\n \n {row.channel_id} \n {/* {row.agent_name} */}\n {row.contact_name} \n {row.contact_email} \n \n {\n handleAddClickOpen(row);\n }}\n />\n \n \n );\n })}\n {emptyRows > 0 && (\n \n \n )}\n \n \n \n \n
\n );\n}\n\nfunction ChatHistoryViewerTable() {\n const dispatch = useDispatch();\n\n const { data: chatHistoryViewer, status } = useSelector(\n (state) => state.chatHistoryViewer\n );\n React.useEffect(() => {\n dispatch(fetchAllChatHistory());\n }, [dispatch]);\n\n // show chat history\n const [openAdd, setOpenAdd] = React.useState({\n Open: false,\n data: \"\",\n });\n const handleAddClickOpen = (item) => {\n const payloadData = {\n conversation_id: item.id,\n };\n dispatch(fetchAllChatHistoryConversation(payloadData));\n setOpenAdd({\n Open: true,\n data: item,\n });\n };\n\n const handleAddClose = () => {\n setOpenAdd({\n Open: false,\n data: \"\",\n });\n };\n\n return (\n \n \n Chat History Viewer List\n \n
\n \n {parseInt(csatStatus) === 0 ? (\n <>\n \n CSAT Feedback\n \n \n Set your rating\n \n \n ) : (\n \"\"\n )}\n {\n try {\n var payload = {\n account_id: accountID,\n conversation_id: conversationID,\n csat_id: csatID,\n rating: ratingValue,\n feedback: csatFeedBack,\n csat_link: csat,\n };\n await timeOut(1500);\n await dispatch(postCSATRating(payload));\n setStatus({ sent: true });\n setSubmitting(false);\n } catch (error) {\n const message = error.message || \"Something went wrong\";\n setStatus({ sent: false });\n setErrors({ submit: message });\n setSubmitting(false);\n }\n }}\n >\n {({\n errors,\n handleBlur,\n handleChange,\n handleSubmit,\n isSubmitting,\n touched,\n values,\n }) => (\n <>\n {parseInt(csatStatus) === 1 ? (\n \n Thank you for submitting the survey. Your feedback is\n valuable.\n \n ) : (\n \n )}\n \n )}\n \n
\n \n );\n}\n\nexport default Csat;\n","import React from \"react\";\nimport styled from \"@emotion/styled\";\nimport { Helmet } from \"react-helmet-async\";\n\nimport { Paper } from \"@mui/material\";\n\nimport { ReactComponent as Logo } from \"../../vendor/1spocbeta.svg\";\nimport Csat from \"../../components/auth/Csat\";\n\nconst Brand = styled(Logo)`\n fill: ${(props) => props.theme.palette.primary.main};\n width: 250px;\n height: 64px;\n margin-bottom: 32px;\n`;\n\nconst Wrapper = styled(Paper)`\n padding: ${(props) => props.theme.spacing(6)};\n\n ${(props) => props.theme.breakpoints.up(\"md\")} {\n padding: ${(props) => props.theme.spacing(10)};\n }\n`;\n\nfunction CustomerSatisfactionScore() {\n return (\n - \n {/* //overview_report */}\n {!!listName && listName === \"overview_report\" ? (\n
\n \n Conversations\n \n
\n \n {\n handleAddClickOpen();\n }}\n >\n
\n \n \n \n \n \n {stableSort(rows, getComparator(order, orderBy))\n .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)\n .map((row, index) => {\n const isItemSelected = isSelected(row.name);\n const labelId = `enhanced-table-checkbox-${index}`;\n\n return (\n handleClick(event, row.name)}\n key={row.name}\n selected={isItemSelected}\n >\n \n {page === 0\n ? index + 1\n : index + 1 + rowsPerPage * page}\n \n {row.Date} \n {row.NoOfCount} \n \n );\n })}\n {emptyRows > 0 && (\n \n \n )}\n \n \n \n \n
\n );\n}\n\nfunction ConversationsTab({ agentReportdata }) {\n return (\n \n \n Incoming Messages\n \n
\n \n {\n handleAddClickOpen();\n }}\n >\n
\n \n \n \n \n \n {stableSort(rows, getComparator(order, orderBy))\n .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)\n .map((row, index) => {\n const isItemSelected = isSelected(row.name);\n const labelId = `enhanced-table-checkbox-${index}`;\n\n return (\n handleClick(event, row.name)}\n key={row.name}\n selected={isItemSelected}\n >\n \n {/* {index + 1} */}\n {page === 0\n ? index + 1\n : index + 1 + rowsPerPage * page}\n \n {row.Date} \n {row.NoOfCount} \n \n );\n })}\n {emptyRows > 0 && (\n \n \n )}\n \n \n \n \n
\n );\n}\n\nfunction IncomingMessagesTab({ agentReportdata }) {\n return (\n \n \n Outgoing Messages\n \n
\n \n {\n handleAddClickOpen();\n }}\n >\n
\n \n \n \n \n \n {stableSort(rows, getComparator(order, orderBy))\n .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)\n .map((row, index) => {\n const isItemSelected = isSelected(row.name);\n const labelId = `enhanced-table-checkbox-${index}`;\n\n return (\n handleClick(event, row.name)}\n key={row.name}\n selected={isItemSelected}\n >\n \n {/* {index + 1} */}\n {page === 0\n ? index + 1\n : index + 1 + rowsPerPage * page}\n \n {row.Date} \n {row.NoOfCount} \n \n );\n })}\n {emptyRows > 0 && (\n \n \n )}\n \n \n \n \n
\n );\n}\n\nfunction OutgoingMessagesTab({ agentReportdata }) {\n return (\n \n \n First Response Time\n \n
\n \n {\n handleAddClickOpen();\n }}\n >\n
\n \n \n \n \n \n {stableSort(rows, getComparator(order, orderBy))\n .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)\n .map((row, index) => {\n const isItemSelected = isSelected(row.name);\n const labelId = `enhanced-table-checkbox-${index}`;\n\n return (\n handleClick(event, row.name)}\n key={row.name}\n selected={isItemSelected}\n >\n \n {/* {index + 1} */}\n {page === 0\n ? index + 1\n : index + 1 + rowsPerPage * page}\n \n {row.Date} \n {row.FirstResponseTime} \n \n );\n })}\n {emptyRows > 0 && (\n \n \n )}\n \n \n \n \n
\n );\n}\n\nfunction FirstResponseTimeTab({ agentReportdata }) {\n return (\n \n \n Resolution Time\n \n
\n \n {\n handleAddClickOpen();\n }}\n >\n
\n \n \n \n \n \n {stableSort(rows, getComparator(order, orderBy))\n .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)\n .map((row, index) => {\n const isItemSelected = isSelected(row.name);\n const labelId = `enhanced-table-checkbox-${index}`;\n\n return (\n handleClick(event, row.name)}\n key={row.name}\n selected={isItemSelected}\n >\n \n {/* {index + 1} */}\n {page === 0\n ? index + 1\n : index + 1 + rowsPerPage * page}\n \n {row.Date} \n {row.resolutionTime} \n \n );\n })}\n {emptyRows > 0 && (\n \n \n )}\n \n \n \n \n
\n );\n}\n\nfunction ResolutionTimeTab({ agentReportdata }) {\n return (\n \n \n Resolution Count\n \n
\n \n {\n handleAddClickOpen();\n }}\n >\n
\n \n \n \n \n \n {stableSort(rows, getComparator(order, orderBy))\n .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)\n .map((row, index) => {\n const isItemSelected = isSelected(row.name);\n const labelId = `enhanced-table-checkbox-${index}`;\n\n return (\n handleClick(event, row.name)}\n key={row.name}\n selected={isItemSelected}\n >\n \n {/* {index + 1} */}\n {page === 0\n ? index + 1\n : index + 1 + rowsPerPage * page}\n \n {row.Date} \n {row.ResolutionCount} \n \n );\n })}\n {emptyRows > 0 && (\n \n \n )}\n \n \n \n \n
\n );\n}\n\nfunction ResolutionCountTab({ agentReportdata }) {\n return (\n \n setKey(k)}\n >\n {/* Conversations Tab */}\n \n \n \n \n \n \n \n \n\n {/* Incoming Messages Tab */}\n \n \n \n \n \n \n \n \n\n {/* Outgoing Messages Tab */}\n \n \n \n \n \n \n \n \n\n {/*First response time Messages Tab */}\n \n \n \n \n \n \n \n \n\n {/*Resolution Time Messages Tab */}\n \n \n \n \n \n \n \n \n\n {/*Resolution Count Messages Tab */}\n \n \n \n \n \n \n \n \n \n
\n \n );\n};\n\nexport default TabTables;\n","import axios from \"axios\";\nimport { createAsyncThunk, createSlice } from \"@reduxjs/toolkit\";\nimport { basePathConfig } from \"../../config\";\nimport errorHandler from \"../error/errorHandler\";\n\n// Thunks\n// fetch report for agent Data\nexport const fetchAgentReport = createAsyncThunk(\n \"agentReport/fetch\",\n async (PayloadData) => {\n try {\n const bearer_token = `Bearer ${localStorage.getItem(\"accessToken\")}`;\n const accountID = localStorage.getItem(\"atua\");\n if (!!bearer_token && !!accountID) {\n const config = {\n headers: {\n Authorization: bearer_token,\n },\n };\n const data = {\n account_id: accountID.toString(),\n agent_id: PayloadData.agentID,\n day_label: PayloadData.dayID,\n start_date: !!PayloadData.start_date ? PayloadData.start_date : \"\",\n end_date: !!PayloadData.end_date ? PayloadData.end_date : \"\",\n };\n const res = await axios.post(\n `${basePathConfig.baseURL}/app/agent-reports`,\n data,\n config\n );\n return await res.data.data;\n } else {\n return { message: \"Unauthorized\", status: 401 };\n }\n } catch (error) {\n var ErrorData = await errorHandler(error);\n return await ErrorData;\n }\n }\n);\nexport const STATUSES = Object.freeze({\n SUCCESS: \"success\",\n ERROR: \"error\",\n LOADING: \"loading\",\n});\nexport const reportAgentSlice = createSlice({\n name: \"reportAgent\",\n initialState: {\n agentReportdata: [],\n agentStatus: STATUSES.SUCCESS,\n },\n reducers: {},\n extraReducers: (builder) => {\n builder\n .addCase(fetchAgentReport.pending, (state, action) => {\n state.agentReportdata = [];\n state.agentStatus = STATUSES.LOADING;\n })\n .addCase(fetchAgentReport.fulfilled, (state, action) => {\n state.agentReportdata = action.payload;\n state.agentStatus = STATUSES.SUCCESS;\n })\n .addCase(fetchAgentReport.rejected, (state, action) => {\n state.agentReportdata = [];\n state.agentStatus = STATUSES.ERROR;\n });\n },\n});\n\nexport const { setAgentReportdata, setAgentStatus } = reportAgentSlice.actions;\nexport default reportAgentSlice.reducer;\n","import React from \"react\";\nimport styled from \"@emotion/styled\";\nimport { spacing } from \"@mui/system\";\nimport {\n Box,\n Button as MuiButton,\n Typography as MuiTypography,\n Divider as MuiDivider,\n InputLabel,\n Grid,\n FormControl as MuiFormControl,\n MenuItem,\n Select,\n CircularProgress as MuiCircularProgress,\n TextField,\n} from \"@mui/material\";\n\nimport TrendingUpIcon from \"@mui/icons-material/TrendingUp\";\nimport { useDispatch, useSelector } from \"react-redux\";\nimport {\n fetchAgentsList,\n fetchDaysList,\n} from \"../../../../../redux/slices/reportOtherFunction\";\nimport moment from \"moment\";\nimport TabTables from \"./TabTables\";\nimport { fetchAgentReport } from \"../../../../../redux/slices/reportAgentWise\";\nimport { isValidToken } from \"../../../../../utils/jwt\";\nimport {\n fetchLogOut,\n fetchLoginLogOut_Socket,\n logout,\n} from \"../../../../../redux/slices/login\";\nimport { useNavigate } from \"react-router-dom\";\n\nconst Divider = styled(MuiDivider)(spacing);\nconst Typography = styled(MuiTypography)(spacing);\nconst Button = styled(MuiButton)(spacing);\nconst CircularProgress = styled(MuiCircularProgress)(spacing);\nconst FormControlSpacing = styled(MuiFormControl)(spacing);\nconst FormControl = styled(FormControlSpacing)`\n min-width: 148px;\n`;\n\nconst TitleTypography = styled(Typography)`\n margin-top: 15px;\n padding-right: 20px;\n padding-bottom: 12px;\n color: ${(props) => props.theme.sidebar.header.color};\n`;\nconst Wrapper = styled.div`\n padding-left: 10px;\n padding-right: 10px;\n`;\n\nconst ShowCalender = ({ agents }) => {\n const dispatch = useDispatch();\n const navigate = useNavigate();\n const accessToken = window.localStorage.getItem(\"accessToken\");\n const [fromDate, setFromDate] = React.useState(null);\n const [toDate, setToDate] = React.useState(null);\n const [validation, setValidation] = React.useState(null);\n\n const chechValidation = () => {\n setValidation(null);\n !toDate && setValidation(\"Check To Date\");\n !fromDate && setValidation(\"Check From Date\");\n const startDate = moment(fromDate);\n const timeEnd = moment(toDate);\n const diff = timeEnd.diff(startDate);\n const diffDuration = moment.duration(diff);\n diffDuration.days() <= 0\n ? setValidation(\n \"Please select From date that is at least 1 business days from To date.\"\n )\n : fetch_Data();\n };\n\n const fetch_Data = () => {\n if (!isValidToken(accessToken)) {\n dispatch(fetchLogOut());\n dispatch(fetchLoginLogOut_Socket());\n dispatch(logout());\n navigate(\"/\");\n } else {\n let PayloadData = {\n agentID: agents,\n dayID: 6,\n start_date: moment(fromDate).format(\"YYYY-MM-DD\"),\n end_date: moment(toDate).format(\"YYYY-MM-DD\"),\n };\n dispatch(fetchAgentReport(PayloadData));\n }\n };\n return (\n <>\n \n \n Conversations\n \n
\n \n {\n handleAddClickOpen();\n }}\n >\n
\n \n \n \n \n \n {stableSort(rows, getComparator(order, orderBy))\n .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)\n .map((row, index) => {\n const isItemSelected = isSelected(row.date);\n const labelId = `enhanced-table-checkbox-${index}`;\n // date, channel, assignee, contact, contactNo\n return (\n handleClick(event, row.date)}\n key={row.date}\n selected={isItemSelected}\n >\n \n {/* {index + 1} */}\n {page === 0\n ? index + 1\n : index + 1 + rowsPerPage * page}\n \n {row.Date} \n {row.channel} \n {row.assignee} \n {row.contact} \n {row.contactNo} \n \n );\n })}\n {emptyRows > 0 && (\n \n \n )}\n \n \n \n \n
\n );\n}\n\nfunction ConversationsTab({ overviewReportdata }) {\n return (\n \n \n Incoming Messages\n \n
\n \n {\n handleAddClickOpen();\n }}\n >\n
\n \n \n \n \n \n {stableSort(rows, getComparator(order, orderBy))\n .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)\n .map((row, index) => {\n const isItemSelected = isSelected(row.date);\n const labelId = `enhanced-table-checkbox-${index}`;\n // date, channel, assignee, contact, contactNo\n return (\n handleClick(event, row.date)}\n key={row.date}\n selected={isItemSelected}\n >\n \n {/* {index + 1} */}\n {page === 0\n ? index + 1\n : index + 1 + rowsPerPage * page}\n \n {row.Date} \n {row.channel} \n {row.assignee} \n {row.contact} \n {/* {row.contactNo} */}\n {row.inComingMsgCount} \n \n );\n })}\n {emptyRows > 0 && (\n \n \n )}\n \n \n \n \n
\n );\n}\n\nfunction IncomingMessagesTab({ overviewReportdata }) {\n return (\n \n \n Outgoing Messages\n \n
\n \n {\n handleAddClickOpen();\n }}\n >\n
\n \n \n \n \n \n {stableSort(rows, getComparator(order, orderBy))\n .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)\n .map((row, index) => {\n const isItemSelected = isSelected(row.date);\n const labelId = `enhanced-table-checkbox-${index}`;\n // date, channel, assignee, contact, contactNo\n return (\n handleClick(event, row.date)}\n key={row.date}\n selected={isItemSelected}\n >\n \n {/* {index + 1} */}\n {page === 0\n ? index + 1\n : index + 1 + rowsPerPage * page}\n \n {row.Date} \n {row.channel} \n {row.assignee} \n {row.contact} \n {/* {row.contactNo} */}\n {row.outgoingMsgCount} \n \n );\n })}\n {emptyRows > 0 && (\n \n \n )}\n \n \n \n \n
\n );\n}\n\nfunction OutgoingMessagesTab({ overviewReportdata }) {\n return (\n \n \n First Response Time\n \n
\n \n {\n handleAddClickOpen();\n }}\n >\n
\n \n \n \n \n \n {stableSort(rows, getComparator(order, orderBy))\n .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)\n .map((row, index) => {\n const isItemSelected = isSelected(row.date);\n const labelId = `enhanced-table-checkbox-${index}`;\n // date, channel, assignee, contact, contactNo\n return (\n handleClick(event, row.date)}\n key={row.date}\n selected={isItemSelected}\n >\n \n {/* {index + 1} */}\n {page === 0\n ? index + 1\n : index + 1 + rowsPerPage * page}\n \n {row.Date} \n {row.channel} \n {row.assignee} \n {row.contact} \n {row.contactNo} \n \n {row.firstResponsetime}\n \n \n );\n })}\n {emptyRows > 0 && (\n \n \n )}\n \n \n \n \n
\n );\n}\n\nfunction FirstResponseTimeTab({ overviewReportdata }) {\n return (\n \n \n Resolution Time\n \n
\n \n {\n handleAddClickOpen();\n }}\n >\n
\n \n \n \n \n \n {stableSort(rows, getComparator(order, orderBy))\n .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)\n .map((row, index) => {\n const isItemSelected = isSelected(row.date);\n const labelId = `enhanced-table-checkbox-${index}`;\n // date, channel, assignee, contact, contactNo\n return (\n handleClick(event, row.date)}\n key={row.date}\n selected={isItemSelected}\n >\n \n {/* {index + 1} */}\n {page === 0\n ? index + 1\n : index + 1 + rowsPerPage * page}\n \n {row.Date} \n {row.channel} \n {row.assignee} \n {row.contact} \n {/* {row.contactNo} */}\n {row.outgoingMsgCount} \n \n );\n })}\n {emptyRows > 0 && (\n \n \n )}\n \n \n \n \n
\n );\n}\n\nfunction ResolutionTimeTab({ overviewReportdata }) {\n return (\n \n \n Resolution\n \n
\n \n {\n handleAddClickOpen();\n }}\n >\n
\n \n \n \n \n \n {stableSort(rows, getComparator(order, orderBy))\n .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)\n .map((row, index) => {\n const isItemSelected = isSelected(row.date);\n const labelId = `enhanced-table-checkbox-${index}`;\n // date, channel, assignee, contact, contactNo\n\n return (\n handleClick(event, row.date)}\n key={row.date}\n selected={isItemSelected}\n >\n \n {/* {index + 1} */}\n {page === 0\n ? index + 1\n : index + 1 + rowsPerPage * page}\n \n {row.Date} \n {row.channel} \n {row.assignee} \n {row.contact} \n {/* {row.contactNo} */}\n \n {row.status === \"Resolved By Agent\" && (\n \n Resolved By Agent\n \n )}\n {row.status === \"Resolved By User\" && (\n \n Resolved By User\n \n )}\n {row.status === \"Resolved By System\" && (\n \n Resolved By System\n \n )}\n {row.status === \"Open Conversation\" && (\n \n Open Conversation\n \n )}\n \n \n );\n })}\n {emptyRows > 0 && (\n \n \n )}\n \n \n \n \n
\n );\n}\n\nfunction ResolutionCountTab({ overviewReportdata }) {\n return (\n \n setKey(k)}\n >\n {/* Conversations Tab */}\n \n \n \n \n \n \n \n \n\n {/* Incoming Messages Tab */}\n \n \n \n \n \n \n \n \n\n {/* Outgoing Messages Tab */}\n \n \n \n \n \n \n \n \n\n {/*First response time Messages Tab */}\n \n \n \n \n \n \n \n \n\n {/*Resolution Time Messages Tab */}\n \n \n \n \n \n \n \n \n\n {/*Resolution Count Messages Tab */}\n \n \n \n \n \n \n \n \n \n
\n \n );\n};\n\nexport default TabTables;\n","import axios from \"axios\";\nimport { createAsyncThunk, createSlice } from \"@reduxjs/toolkit\";\nimport { basePathConfig } from \"../../config\";\nimport errorHandler from \"../error/errorHandler\";\n\n// Thunks\n// fetch report for Channel Data\nexport const fetchChannelReport = createAsyncThunk(\n \"channelReport/fetch\",\n async (PayloadData) => {\n // console.log(\"PayloadData == \", JSON.stringify(PayloadData));\n try {\n const bearer_token = `Bearer ${localStorage.getItem(\"accessToken\")}`;\n const accountID = localStorage.getItem(\"atua\");\n if (!!bearer_token && !!accountID) {\n const config = {\n headers: {\n Authorization: bearer_token,\n },\n };\n const data = {\n account_id: accountID.toString(),\n day_label: PayloadData.dayID,\n channel_id: PayloadData.channel_id,\n start_date: PayloadData.start_date,\n end_date: PayloadData.end_date,\n };\n const res = await axios.post(\n `${basePathConfig.baseURL}/app/channel-reports`,\n data,\n config\n );\n return await res.data.data;\n } else {\n return { message: \"Unauthorized\", status: 401 };\n }\n } catch (error) {\n var ErrorData = await errorHandler(error);\n return await ErrorData;\n }\n }\n);\nexport const STATUSES = Object.freeze({\n SUCCESS: \"success\",\n ERROR: \"error\",\n LOADING: \"loading\",\n});\nexport const reportChannelSlice = createSlice({\n name: \"reportChannel\",\n initialState: {\n channelReportdata: [],\n channelStatus: STATUSES.SUCCESS,\n },\n reducers: {},\n extraReducers: (builder) => {\n builder\n .addCase(fetchChannelReport.pending, (state, action) => {\n state.channelReportdata = [];\n state.channelStatus = STATUSES.LOADING;\n })\n .addCase(fetchChannelReport.fulfilled, (state, action) => {\n state.channelReportdata = action.payload;\n state.channelStatus = STATUSES.SUCCESS;\n })\n .addCase(fetchChannelReport.rejected, (state, action) => {\n state.channelReportdata = [];\n state.channelStatus = STATUSES.ERROR;\n });\n },\n});\n\nexport const { setChannelReportdata, setChannelStatus } =\n reportChannelSlice.actions;\nexport default reportChannelSlice.reducer;\n","import React from \"react\";\nimport styled from \"@emotion/styled\";\nimport { spacing } from \"@mui/system\";\nimport {\n Box,\n Button as MuiButton,\n Typography as MuiTypography,\n Divider as MuiDivider,\n InputLabel,\n Grid,\n FormControl as MuiFormControl,\n MenuItem,\n Select,\n CircularProgress as MuiCircularProgress,\n TextField,\n} from \"@mui/material\";\n\nimport WhatshotIcon from \"@mui/icons-material/Whatshot\";\nimport { useDispatch, useSelector } from \"react-redux\";\nimport {\n fetchDaysList,\n fetchchannelList,\n} from \"../../../../../redux/slices/reportOtherFunction\";\nimport moment from \"moment\";\nimport TabTables from \"./TabTables\";\n// import { fetchOverviewReport } from \"../../../../../redux/slices/reportsOverview\";\nimport { fetchChannelReport } from \"../../../../../redux/slices/reportChannel\";\nimport { useNavigate } from \"react-router-dom\";\nimport { isValidToken } from \"../../../../../utils/jwt\";\nimport {\n fetchLogOut,\n fetchLoginLogOut_Socket,\n logout,\n} from \"../../../../../redux/slices/login\";\n\nconst Divider = styled(MuiDivider)(spacing);\nconst Typography = styled(MuiTypography)(spacing);\nconst Button = styled(MuiButton)(spacing);\nconst CircularProgress = styled(MuiCircularProgress)(spacing);\nconst FormControlSpacing = styled(MuiFormControl)(spacing);\nconst FormControl = styled(FormControlSpacing)`\n min-width: 148px;\n`;\n\nconst TitleTypography = styled(Typography)`\n margin-top: 15px;\n padding-right: 20px;\n padding-bottom: 12px;\n color: ${(props) => props.theme.sidebar.header.color};\n`;\nconst Wrapper = styled.div`\n padding-left: 10px;\n padding-right: 10px;\n`;\n\nconst ShowCalender = ({ channels }) => {\n const dispatch = useDispatch();\n const navigate = useNavigate();\n const accessToken = window.localStorage.getItem(\"accessToken\");\n const [fromDate, setFromDate] = React.useState(null);\n const [toDate, setToDate] = React.useState(null);\n const [validation, setValidation] = React.useState(null);\n\n const chechValidation = () => {\n setValidation(null);\n !toDate && setValidation(\"Check To Date\");\n !fromDate && setValidation(\"Check From Date\");\n const startDate = moment(fromDate);\n const timeEnd = moment(toDate);\n const diff = timeEnd.diff(startDate);\n const diffDuration = moment.duration(diff);\n diffDuration.days() <= 0\n ? setValidation(\n \"Please select From date that is at least 1 business days from To date.\"\n )\n : fetch_Data();\n };\n\n const fetch_Data = () => {\n if (!isValidToken(accessToken)) {\n dispatch(fetchLogOut());\n dispatch(fetchLoginLogOut_Socket());\n dispatch(logout());\n navigate(\"/\");\n } else {\n let PayloadData = {\n dayID: 6,\n channel_id: channels,\n start_date: moment(fromDate).format(\"YYYY-MM-DD\"),\n end_date: moment(toDate).format(\"YYYY-MM-DD\"),\n };\n dispatch(fetchChannelReport(PayloadData));\n }\n };\n return (\n <>\n \n \n CSAT Count\n \n
\n \n \n {/*
\n \n \n \n \n \n {stableSort(rows, getComparator(order, orderBy))\n .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)\n .map((row, index) => {\n const isItemSelected = isSelected(row.date);\n const labelId = `enhanced-table-checkbox-${index}`;\n\n return (\n handleClick(event, row.date)}\n key={row.date}\n selected={isItemSelected}\n >\n \n {/* {index + 1} */}\n {page === 0\n ? index + 1\n : index + 1 + rowsPerPage * page}\n \n {row.Date} \n {row.NoOfCount} \n \n );\n })}\n {emptyRows > 0 && (\n \n \n )}\n \n \n \n \n
\n );\n}\n\nfunction CSATDetailsByDateTab({ csatReportdata }) {\n return (\n \n \n CSAT Overview\n \n
\n \n \n {/*
\n \n \n \n \n \n {stableSort(rows, getComparator(order, orderBy))\n .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)\n .map((row, index) => {\n const isItemSelected = isSelected(row.date);\n const labelId = `enhanced-table-checkbox-${index}`;\n // date, channel, assignee, contact, contactNo\n return (\n handleClick(event, row.date)}\n key={row.date}\n selected={isItemSelected}\n >\n \n {/* {index + 1} */}\n {page === 0\n ? index + 1\n : index + 1 + rowsPerPage * page}\n \n {row.date} \n {row.assignedAgent} \n {row.contact} \n \n {\n \n {row.feedbackComments} \n \n {row.responseStatus === \"Yes\" ? (\n Yes\n ) : (\n No\n )}\n \n \n );\n })}\n {emptyRows > 0 && (\n \n \n )}\n \n \n \n \n
\n );\n}\n\nfunction CSATDetailsTab({ csatReportdata }) {\n return (\n \n setKey(k)}\n >\n {/* CSAT Details Tab */}\n \n \n \n \n \n \n \n \n\n {/* CSAT Details by Date */}\n \n \n \n \n \n \n \n \n \n
\n \n );\n};\n\nexport default TabTables;\n","import axios from \"axios\";\nimport { createAsyncThunk, createSlice } from \"@reduxjs/toolkit\";\nimport { basePathConfig } from \"../../config\";\nimport errorHandler from \"../error/errorHandler\";\n\n// Thunks\n// fetch report for CSAT Data\nexport const fetchCsatReport = createAsyncThunk(\n \"csatAllReport/fetchAllData\",\n async (PayloadData, thunkAPI) => {\n try {\n const bearer_token = `Bearer ${localStorage.getItem(\"accessToken\")}`;\n const accountID = localStorage.getItem(\"atua\");\n if (!!bearer_token && !!accountID) {\n const config = {\n headers: {\n Authorization: bearer_token,\n },\n };\n const data = {\n account_id: accountID.toString(),\n day_label: PayloadData.dayID,\n start_date: PayloadData.start_date,\n end_date: PayloadData.end_date,\n };\n const res = await axios.post(\n `${basePathConfig.baseURL}/app/csat-reports`,\n data,\n config\n );\n return await res.data.data;\n } else {\n return { message: \"Unauthorized\", status: 401 };\n }\n } catch (error) {\n var ErrorData = await errorHandler(error);\n return thunkAPI.rejectWithValue(await ErrorData);\n }\n }\n);\nexport var STATUSES = Object.freeze({\n SUCCESS: \"success\",\n ERROR: \"error\",\n LOADING: \"loading\",\n});\n\nvar initialState = {\n csatReportdata: [],\n csatStatus: STATUSES.SUCCESS,\n};\nexport const reportCSATSlice = createSlice({\n name: \"reportCSAT\",\n // initialState: {\n // csatReportdata: [],\n // csatStatus: STATUSES.SUCCESS,\n // },\n initialState,\n reducers: {},\n extraReducers: (builder) => {\n builder\n // .addCase(fetchCsatReport.pending, (state, action) => {\n // state.csatReportdata = [];\n // state.csatStatus = STATUSES.LOADING;\n // })\n // .addCase(fetchCsatReport.fulfilled, (state, action) => {\n // state.csatReportdata = action.payload;\n // state.csatStatus = STATUSES.SUCCESS;\n // })\n // .addCase(fetchCsatReport.rejected, (state, action) => {\n // state.csatReportdata = [];\n // state.csatStatus = STATUSES.ERROR;\n // })\n .addCase(fetchCsatReport.pending, (state, action) => {\n state.csatStatus = STATUSES.LOADING;\n })\n .addCase(fetchCsatReport.fulfilled, (state, action) => {\n state.csatReportdata = action.payload;\n state.csatStatus = STATUSES.SUCCESS;\n })\n .addCase(fetchCsatReport.rejected, (state, action) => {\n state.csatReportdata = [];\n state.csatStatus = STATUSES.ERROR;\n });\n },\n});\n\nexport const { setCsatReportdata, setCsatStatus } = reportCSATSlice.actions;\nexport default reportCSATSlice.reducer;\n","import React from \"react\";\nimport styled from \"@emotion/styled\";\nimport { withTheme } from \"@emotion/react\";\nimport Chart from \"react-apexcharts\";\n\nconst ChartWrapper = styled.div`\n height: 50px;\n width: 100%;\n`;\n\nconst BarChart = ({ theme, csatReportdata }) => {\n const RatingData =\n !!csatReportdata && !!csatReportdata.rating_Count\n ? csatReportdata.rating_Count\n : [];\n\n const data = [\n {\n name: \"Rating 0\",\n data: [!!RatingData ? parseInt(RatingData.rating_0) : 0],\n },\n {\n name: \"Rating 1\",\n data: [!!RatingData ? parseInt(RatingData.rating_1) : 0],\n },\n {\n name: \"Rating 2\",\n data: [!!RatingData ? parseInt(RatingData.rating_2) : 0],\n },\n {\n name: \"Rating 3\",\n data: [!!RatingData ? parseInt(RatingData.rating_3) : 0],\n },\n {\n name: \"Rating 4\",\n data: [!!RatingData ? parseInt(RatingData.rating_4) : 0],\n },\n {\n name: \"Rating 5\",\n data: [!!RatingData ? parseInt(RatingData.rating_5) : 0],\n },\n ];\n\n const options = {\n chart: {\n stacked: true,\n },\n plotOptions: {\n bar: {\n horizontal: true,\n },\n },\n stroke: {\n width: 2,\n colors: [\"#fff\"],\n },\n xaxis: {\n categories: [\"Ratings\"],\n labels: {\n formatter: function (val) {\n return val + \"%\";\n },\n },\n },\n yaxis: {\n title: {\n text: undefined,\n },\n },\n tooltip: {\n y: {\n formatter: function (val) {\n return val + \"%\";\n },\n },\n },\n fill: {\n opacity: 1,\n },\n legend: {\n position: \"top\",\n horizontalAlign: \"left\",\n offsetX: 50,\n },\n colors: [\n theme.palette.primary.light,\n theme.palette.primary.dark,\n theme.palette.info.light,\n theme.palette.warning.dark,\n theme.palette.error.dark,\n theme.palette.success.dark,\n ],\n };\n\n return (\n <>\n \n \n Conversations\n \n
\n \n {\n handleAddClickOpen();\n }}\n >\n
\n \n \n \n \n \n {stableSort(rows, getComparator(order, orderBy))\n .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)\n .map((row, index) => {\n const isItemSelected = isSelected(row.date);\n const labelId = `enhanced-table-checkbox-${index}`;\n // date, channel, assignee, contact, contactNo\n return (\n handleClick(event, row.date)}\n key={row.date}\n selected={isItemSelected}\n >\n \n {/* {index + 1} */}\n {page === 0\n ? index + 1\n : index + 1 + rowsPerPage * page}\n \n {row.Date} \n {row.Contact} \n {row.Label_Added_By} \n \n {row.TotalConversationCounts}\n \n \n );\n })}\n {emptyRows > 0 && (\n \n \n )}\n \n \n \n \n
\n );\n}\n\nfunction ConversationsTab({ reportData }) {\n return (\n \n \n Incoming Messages\n \n
\n \n {\n handleAddClickOpen();\n }}\n >\n
\n \n \n \n \n \n {stableSort(rows, getComparator(order, orderBy))\n .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)\n .map((row, index) => {\n const isItemSelected = isSelected(row.date);\n const labelId = `enhanced-table-checkbox-${index}`;\n // Date, channel, contact, contactNo, inComingMsgCount\n return (\n handleClick(event, row.date)}\n key={row.date}\n selected={isItemSelected}\n >\n \n {/* {index + 1} */}\n {page === 0\n ? index + 1\n : index + 1 + rowsPerPage * page}\n \n {row.Date} \n {row.channel} \n {row.contact} \n {row.contactNo} \n {row.inComingMsgCount} \n \n );\n })}\n {emptyRows > 0 && (\n \n \n )}\n \n \n \n \n
\n );\n}\n\nfunction IncomingMessagesTab({ reportData }) {\n return (\n \n \n Outgoing Messages\n \n
\n \n {\n handleAddClickOpen();\n }}\n >\n
\n \n \n \n \n \n {stableSort(rows, getComparator(order, orderBy))\n .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)\n .map((row, index) => {\n const isItemSelected = isSelected(row.date);\n const labelId = `enhanced-table-checkbox-${index}`;\n // date, channel, assignee, contact, contactNo\n return (\n handleClick(event, row.date)}\n key={row.date}\n selected={isItemSelected}\n >\n \n {/* {index + 1} */}\n {page === 0\n ? index + 1\n : index + 1 + rowsPerPage * page}\n \n {row.Date} \n {row.channel} \n {row.contact} \n {row.contactNo} \n {row.outgoingMsgCount} \n \n );\n })}\n {emptyRows > 0 && (\n \n \n )}\n \n \n \n \n
\n );\n}\n\nfunction OutgoingMessagesTab({ reportData }) {\n return (\n \n \n First Responce Time\n \n
\n \n {\n handleAddClickOpen();\n }}\n >\n
\n \n \n \n \n \n {stableSort(rows, getComparator(order, orderBy))\n .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)\n .map((row, index) => {\n const isItemSelected = isSelected(row.date);\n const labelId = `enhanced-table-checkbox-${index}`;\n // date, channel, assignee, contact, contactNo\n return (\n handleClick(event, row.date)}\n key={row.date}\n selected={isItemSelected}\n >\n \n {/* {index + 1} */}\n {page === 0\n ? index + 1\n : index + 1 + rowsPerPage * page}\n \n {row.Date} \n {row.channel} \n {row.contact} \n {row.contactNo} \n \n {row.firstResponsetime}\n \n \n );\n })}\n {emptyRows > 0 && (\n \n \n )}\n \n \n \n \n
\n );\n}\n\nfunction FirstResponseTimeTab({ reportData }) {\n return (\n \n \n Resolution Time\n \n
\n \n {\n handleAddClickOpen();\n }}\n >\n
\n \n \n \n \n \n {stableSort(rows, getComparator(order, orderBy))\n .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)\n .map((row, index) => {\n const isItemSelected = isSelected(row.date);\n const labelId = `enhanced-table-checkbox-${index}`;\n // date, channel, assignee, contact, contactNo\n return (\n handleClick(event, row.date)}\n key={row.date}\n selected={isItemSelected}\n >\n \n {/* {index + 1} */}\n {page === 0\n ? index + 1\n : index + 1 + rowsPerPage * page}\n \n {row.Date} \n {row.channel} \n {row.contact} \n {row.contactNo} \n {row.outgoingMsgCount} \n \n );\n })}\n {emptyRows > 0 && (\n \n \n )}\n \n \n \n \n
\n );\n}\n\nfunction ResolutionTimeTab({ reportData }) {\n return (\n \n \n Resolution Count\n \n
\n \n {\n handleAddClickOpen();\n }}\n >\n
\n \n \n \n \n \n {stableSort(rows, getComparator(order, orderBy))\n .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)\n .map((row, index) => {\n const isItemSelected = isSelected(row.date);\n const labelId = `enhanced-table-checkbox-${index}`;\n // date, channel, assignee, contact, contactNo\n\n return (\n handleClick(event, row.date)}\n key={row.date}\n selected={isItemSelected}\n >\n \n {/* {index + 1} */}\n {page === 0 ? index + 1 : index + rowsPerPage * page}\n \n {row.Date} \n {row.channel} \n {row.contact} \n {row.contactNo} \n \n {row.status === \"Resolved By Agent\" && (\n \n Resolved By Agent\n \n )}\n {row.status === \"Resolved By User\" && (\n \n Resolved By User\n \n )}\n {row.status === \"Resolved By System\" && (\n \n Resolved By System\n \n )}\n {row.status === \"Open Conversation\" && (\n \n Open Conversation\n \n )}\n \n \n );\n })}\n {emptyRows > 0 && (\n \n \n )}\n \n \n \n \n
\n );\n}\n\nfunction ResolutionCountTab({ reportData }) {\n return (\n \n setKey(k)}\n >\n {/* Conversations Tab */}\n \n \n \n \n \n \n \n \n\n {/* Incoming Messages Tab */}\n \n \n \n \n \n \n \n \n\n {/* Outgoing Messages Tab */}\n \n \n \n \n \n \n \n \n\n {/*First response time Messages Tab */}\n \n \n \n \n \n \n \n \n\n {/*Resolution Time Messages Tab */}\n \n \n \n \n \n \n \n \n\n {/*Resolution Count Messages Tab */}\n \n \n \n \n \n \n \n \n \n
\n \n );\n};\n\nexport default TabTables;\n","import axios from \"axios\";\nimport { createAsyncThunk, createSlice } from \"@reduxjs/toolkit\";\nimport { basePathConfig } from \"../../config\";\nimport errorHandler from \"../error/errorHandler\";\n\n// Thunks\n// fetch report for overview Data\nexport const fetchLabelsReport = createAsyncThunk(\n \"labelsReport/fetch\",\n async (PayloadData) => {\n // console.log(\n // \"fetchLabelsReport PayloadData == \",\n // JSON.stringify(PayloadData)\n // );\n try {\n const bearer_token = `Bearer ${localStorage.getItem(\"accessToken\")}`;\n const accountID = localStorage.getItem(\"atua\");\n if (!!bearer_token && !!accountID) {\n const config = {\n headers: {\n Authorization: bearer_token,\n },\n };\n const data = {\n account_id: accountID.toString(),\n label_id: PayloadData.labelId,\n day_label: PayloadData.dayID,\n start_date: PayloadData.start_date,\n end_date: PayloadData.end_date,\n };\n const res = await axios.post(\n `${basePathConfig.baseURL}/app/label-reports`,\n data,\n config\n );\n return await res.data.data;\n } else {\n return { message: \"Unauthorized\", status: 401 };\n }\n } catch (error) {\n var ErrorData = await errorHandler(error);\n return await ErrorData;\n }\n }\n);\nexport const STATUSES = Object.freeze({\n SUCCESS: \"success\",\n ERROR: \"error\",\n LOADING: \"loading\",\n});\nexport const reportLabelsSlice = createSlice({\n name: \"reportLabels\",\n initialState: {\n labelReportdata: [],\n labelsStatus: STATUSES.SUCCESS,\n },\n reducers: {},\n extraReducers: (builder) => {\n builder\n .addCase(fetchLabelsReport.pending, (state, action) => {\n state.labelReportdata = [];\n state.labelsStatus = STATUSES.LOADING;\n })\n .addCase(fetchLabelsReport.fulfilled, (state, action) => {\n state.labelReportdata = action.payload;\n state.labelsStatus = STATUSES.SUCCESS;\n })\n .addCase(fetchLabelsReport.rejected, (state, action) => {\n state.labelReportdata = [];\n state.labelsStatus = STATUSES.ERROR;\n });\n },\n});\n\nexport const { setLabelReportdata, setLabelsStatus } =\n reportLabelsSlice.actions;\nexport default reportLabelsSlice.reducer;\n","import React from \"react\";\nimport styled from \"@emotion/styled\";\nimport { Chip as MuiChip, Table, TableBody, TableCell } from \"@mui/material\";\nconst Chip = styled(MuiChip)`\n height: 20px;\n padding: 4px 0;\n font-size: 90%;\n background-color: ${(props) =>\n props.theme.palette[props.color ? props.color : \"primary\"].light};\n color: ${(props) => props.theme.palette.common.white};\n`;\nconst HederLabelDetails = ({ labeldetails }) => {\n return (\n <>\n {!!labeldetails && (\n \n \n Conversations\n \n
\n \n {\n handleAddClickOpen();\n }}\n >\n
\n \n \n \n \n \n {stableSort(rows, getComparator(order, orderBy))\n .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)\n .map((row, index) => {\n const isItemSelected = isSelected(row.date);\n const labelId = `enhanced-table-checkbox-${index}`;\n // date, channel, assignee, contact, contactNo\n return (\n handleClick(event, row.date)}\n key={row.date}\n selected={isItemSelected}\n >\n \n {/* {index + 1} */}\n {page === 0\n ? index + 1\n : index + 1 + rowsPerPage * page}\n \n {row.Date} \n {row.channel} \n {row.assignee} \n {row.contact} \n {row.contactNo} \n \n );\n })}\n {emptyRows > 0 && (\n \n \n )}\n \n \n \n \n
\n );\n}\n\nfunction ConversationsTab({ overviewReportdata }) {\n return (\n \n \n Incoming Messages\n \n
\n \n {\n handleAddClickOpen();\n }}\n >\n
\n \n \n \n \n \n {stableSort(rows, getComparator(order, orderBy))\n .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)\n .map((row, index) => {\n const isItemSelected = isSelected(row.date);\n const labelId = `enhanced-table-checkbox-${index}`;\n // date, channel, assignee, contact, contactNo\n return (\n handleClick(event, row.date)}\n key={row.date}\n selected={isItemSelected}\n >\n \n {/* {index + 1} */}\n {page === 0\n ? index + 1\n : index + 1 + rowsPerPage * page}\n \n {row.Date} \n {row.channel} \n {row.assignee} \n {row.contact} \n {row.contactNo} \n {row.inComingMsgCount} \n \n );\n })}\n {emptyRows > 0 && (\n \n \n )}\n \n \n \n \n
\n );\n}\n\nfunction IncomingMessagesTab({ overviewReportdata }) {\n return (\n \n \n Outgoing Messages\n \n
\n \n {\n handleAddClickOpen();\n }}\n >\n
\n \n \n \n \n \n {stableSort(rows, getComparator(order, orderBy))\n .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)\n .map((row, index) => {\n const isItemSelected = isSelected(row.date);\n const labelId = `enhanced-table-checkbox-${index}`;\n // date, channel, assignee, contact, contactNo\n return (\n handleClick(event, row.date)}\n key={row.date}\n selected={isItemSelected}\n >\n \n {/* {index + 1} */}\n {page === 0\n ? index + 1\n : index + 1 + rowsPerPage * page}\n \n {row.Date} \n {row.channel} \n {row.assignee} \n {row.contact} \n {row.contactNo} \n {row.outgoingMsgCount} \n \n );\n })}\n {emptyRows > 0 && (\n \n \n )}\n \n \n \n \n
\n );\n}\n\nfunction OutgoingMessagesTab({ overviewReportdata }) {\n return (\n \n \n First Responce Time\n \n
\n \n {\n handleAddClickOpen();\n }}\n >\n
\n \n \n \n \n \n {stableSort(rows, getComparator(order, orderBy))\n .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)\n .map((row, index) => {\n const isItemSelected = isSelected(row.date);\n const labelId = `enhanced-table-checkbox-${index}`;\n // date, channel, assignee, contact, contactNo\n return (\n handleClick(event, row.date)}\n key={row.date}\n selected={isItemSelected}\n >\n \n {/* {index + 1} */}\n {page === 0\n ? index + 1\n : index + 1 + rowsPerPage * page}\n \n {row.Date} \n {row.channel} \n {row.assignee} \n {row.contact} \n {row.contactNo} \n \n {row.firstResponsetime}\n \n \n );\n })}\n {emptyRows > 0 && (\n \n \n )}\n \n \n \n \n
\n );\n}\n\nfunction FirstResponseTimeTab({ overviewReportdata }) {\n return (\n \n \n Resolution Time\n \n
\n \n {\n handleAddClickOpen();\n }}\n >\n
\n \n \n \n \n \n {stableSort(rows, getComparator(order, orderBy))\n .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)\n .map((row, index) => {\n const isItemSelected = isSelected(row.date);\n const labelId = `enhanced-table-checkbox-${index}`;\n // date, channel, assignee, contact, contactNo\n return (\n handleClick(event, row.date)}\n key={row.date}\n selected={isItemSelected}\n >\n \n {/* {index + 1} */}\n {page === 0\n ? index + 1\n : index + 1 + rowsPerPage * page}\n \n {row.Date} \n {row.channel} \n {row.assignee} \n {row.contact} \n {row.contactNo} \n {row.outgoingMsgCount} \n \n );\n })}\n {emptyRows > 0 && (\n \n \n )}\n \n \n \n \n
\n );\n}\n\nfunction ResolutionTimeTab({ overviewReportdata }) {\n return (\n \n \n Resolution Counts\n \n
\n \n {\n handleAddClickOpen();\n }}\n >\n
\n \n \n \n \n \n {stableSort(rows, getComparator(order, orderBy))\n .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)\n .map((row, index) => {\n const isItemSelected = isSelected(row.date);\n const labelId = `enhanced-table-checkbox-${index}`;\n // date, channel, assignee, contact, contactNo\n\n return (\n handleClick(event, row.date)}\n key={row.date}\n selected={isItemSelected}\n >\n \n {/* {index + 1} */}\n {page === 0\n ? index + 1\n : index + 1 + rowsPerPage * page}\n \n {row.Date} \n {row.channel} \n {row.assignee} \n {row.contact} \n {row.contactNo} \n \n {row.status === \"Resolved By Agent\" && (\n \n Resolved By Agent\n \n )}\n {row.status === \"Resolved By User\" && (\n \n Resolved By User\n \n )}\n {row.status === \"Resolved By System\" && (\n \n Resolved By System\n \n )}\n {row.status === \"Open Conversation\" && (\n \n Open Conversation\n \n )}\n \n \n );\n })}\n {emptyRows > 0 && (\n \n \n )}\n \n \n \n \n
\n );\n}\n\nfunction ResolutionCountTab({ overviewReportdata }) {\n return (\n \n setKey(k)}\n >\n {/* Conversations Tab */}\n \n \n \n \n \n \n \n \n\n {/* Incoming Messages Tab */}\n \n \n \n \n \n \n \n \n\n {/* Outgoing Messages Tab */}\n \n \n \n \n \n \n \n \n\n {/*First response time Messages Tab */}\n \n \n \n \n \n \n \n \n\n {/*Resolution Time Messages Tab */}\n \n \n \n \n \n \n \n \n\n {/*Resolution Count Messages Tab */}\n \n \n \n \n \n \n \n \n \n
\n \n );\n};\n\nexport default TabTables;\n","import axios from \"axios\";\nimport { createAsyncThunk, createSlice } from \"@reduxjs/toolkit\";\nimport { basePathConfig } from \"../../config\";\nimport errorHandler from \"../error/errorHandler\";\n\n// Thunks\n// fetch report for overview Data\nexport const fetchOverviewReport = createAsyncThunk(\n \"agentReport/fetch\",\n async (PayloadData) => {\n try {\n const bearer_token = `Bearer ${localStorage.getItem(\"accessToken\")}`;\n const accountID = localStorage.getItem(\"atua\");\n if (!!bearer_token && !!accountID) {\n const config = {\n headers: {\n Authorization: bearer_token,\n },\n };\n const data = {\n account_id: accountID.toString(),\n day_label: PayloadData.dayID,\n start_date: !!PayloadData.start_date ? PayloadData.start_date : \"\",\n end_date: !!PayloadData.end_date ? PayloadData.end_date : \"\",\n };\n //console.log(\"fetchOverviewReport data == \", JSON.stringify(data));\n const res = await axios.post(\n `${basePathConfig.baseURL}/app/overview-reports`,\n data,\n config\n );\n // console.log(\n // \"fetchOverviewReport res.data == \",\n // JSON.stringify(res.data)\n // );\n return await res.data.data;\n } else {\n return { message: \"Unauthorized\", status: 401 };\n }\n } catch (error) {\n var ErrorData = await errorHandler(error);\n return await ErrorData;\n }\n }\n);\nexport const STATUSES = Object.freeze({\n SUCCESS: \"success\",\n ERROR: \"error\",\n LOADING: \"loading\",\n});\nexport const reportOverviewSlice = createSlice({\n name: \"reportOverview\",\n initialState: {\n overviewReportdata: [],\n overviewStatus: STATUSES.SUCCESS,\n },\n reducers: {},\n extraReducers: (builder) => {\n builder\n .addCase(fetchOverviewReport.pending, (state, action) => {\n state.overviewReportdata = [];\n state.overviewStatus = STATUSES.LOADING;\n })\n .addCase(fetchOverviewReport.fulfilled, (state, action) => {\n state.overviewReportdata = action.payload;\n state.overviewStatus = STATUSES.SUCCESS;\n })\n .addCase(fetchOverviewReport.rejected, (state, action) => {\n state.overviewReportdata = [];\n state.overviewStatus = STATUSES.ERROR;\n });\n },\n});\n\nexport const { setOverviewReportdata, setOverviewStatus } =\n reportOverviewSlice.actions;\nexport default reportOverviewSlice.reducer;\n","import React from \"react\";\nimport styled from \"@emotion/styled\";\nimport { spacing } from \"@mui/system\";\nimport {\n Box,\n Button as MuiButton,\n Typography as MuiTypography,\n Divider as MuiDivider,\n InputLabel,\n Grid,\n FormControl as MuiFormControl,\n MenuItem,\n Select,\n CircularProgress as MuiCircularProgress,\n TextField,\n} from \"@mui/material\";\n\nimport TrendingUpIcon from \"@mui/icons-material/TrendingUp\";\nimport { useDispatch, useSelector } from \"react-redux\";\nimport { fetchDaysList } from \"../../../../../redux/slices/reportOtherFunction\";\nimport moment from \"moment\";\nimport TabTables from \"./TabTables\";\nimport { fetchOverviewReport } from \"../../../../../redux/slices/reportsOverview\";\nimport { isValidToken } from \"../../../../../utils/jwt\";\nimport {\n fetchLogOut,\n fetchLoginLogOut_Socket,\n logout,\n} from \"../../../../../redux/slices/login\";\nimport { useNavigate } from \"react-router-dom\";\n\nconst Divider = styled(MuiDivider)(spacing);\nconst Typography = styled(MuiTypography)(spacing);\nconst Button = styled(MuiButton)(spacing);\nconst CircularProgress = styled(MuiCircularProgress)(spacing);\nconst FormControlSpacing = styled(MuiFormControl)(spacing);\nconst FormControl = styled(FormControlSpacing)`\n min-width: 148px;\n`;\n\nconst TitleTypography = styled(Typography)`\n margin-top: 15px;\n padding-right: 20px;\n padding-bottom: 12px;\n color: ${(props) => props.theme.sidebar.header.color};\n`;\nconst Wrapper = styled.div`\n padding-left: 10px;\n padding-right: 10px;\n`;\n\nconst ShowCalender = () => {\n const dispatch = useDispatch();\n const navigate = useNavigate();\n const accessToken = window.localStorage.getItem(\"accessToken\");\n const [fromDate, setFromDate] = React.useState(null);\n const [toDate, setToDate] = React.useState(null);\n const [validation, setValidation] = React.useState(null);\n\n const chechValidation = () => {\n setValidation(null);\n !toDate && setValidation(\"Check To Date\");\n !fromDate && setValidation(\"Check From Date\");\n const startDate = moment(fromDate);\n const timeEnd = moment(toDate);\n const diff = timeEnd.diff(startDate);\n const diffDuration = moment.duration(diff);\n diffDuration.days() <= 0\n ? setValidation(\n \"Please select From date that is at least 1 business days from To date.\"\n )\n : fetch_Data();\n };\n\n const fetch_Data = () => {\n if (!isValidToken(accessToken)) {\n dispatch(fetchLogOut());\n dispatch(fetchLoginLogOut_Socket());\n dispatch(logout());\n navigate(\"/\");\n } else {\n let PayloadData = {\n dayID: 6,\n start_date: moment(fromDate).format(\"YYYY-MM-DD\"),\n end_date: moment(toDate).format(\"YYYY-MM-DD\"),\n };\n dispatch(fetchOverviewReport(PayloadData));\n }\n };\n return (\n <>\n \n \n Overview\n \n
\n \n {\n handleAddClickOpen();\n }}\n >\n
\n \n \n \n \n \n {\n setSearch(e.target.value);\n }}\n />\n \n \n \n \n {stableSort(rows, getComparator(order, orderBy))\n .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)\n .map((row, index) => {\n const isItemSelected = isSelected(row.date);\n const labelId = `enhanced-table-checkbox-${index}`;\n //Date, Role, Name, FirstSignIn, LastSignOut, SessionCount, SessionTime\n return (\n handleClick(event, row.date)}\n key={row.date}\n selected={isItemSelected}\n >\n \n {/* {index + 1} */}\n {page === 0\n ? index + 1\n : index + 1 + rowsPerPage * page}\n \n {row.Date} \n {row.Role} \n {row.Name} \n {row.FirstSignIn} \n {row.LastSignOut} \n {row.SessionCount} \n {row.SessionTime} \n \n );\n })}\n {emptyRows > 0 && (\n \n \n )}\n \n \n \n \n
\n );\n}\n\nfunction OverviewTab({ overview, chartoverview }) {\n return (\n \n \n Agent Sessions count\n \n
\n \n {/* {\n handleAddClickOpen();\n }}\n >\n
\n \n \n \n \n \n {\n setSearch(e.target.value);\n }}\n />\n \n \n \n \n {stableSort(rows, getComparator(order, orderBy))\n .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)\n .map((row, index) => {\n const isItemSelected = isSelected(row.date);\n const labelId = `enhanced-table-checkbox-${index}`;\n // Date, Role, Agent_Name, Signin_Time, Signout_Time, Spent_Time\n return (\n handleClick(event, row.date)}\n key={row.date}\n selected={isItemSelected}\n >\n \n {/* {index + 1} */}\n {page === 0\n ? index + 1\n : index + 1 + rowsPerPage * page}\n \n {row.Date} \n {row.Role} \n {row.Agent_Name} \n {row.Signin_Time} \n {row.Signout_Time} \n {row.Spent_Time} \n \n );\n })}\n {emptyRows > 0 && (\n \n \n )}\n \n \n \n \n
\n );\n}\n\nfunction AgentsSessions({ overviewdetail }) {\n return (\n \n setKey(k)}\n >\n \n \n \n \n \n \n \n \n\n \n \n \n \n \n \n \n \n \n
\n \n );\n};\n\nexport default TabTables;\n","import axios from \"axios\";\nimport { createAsyncThunk, createSlice } from \"@reduxjs/toolkit\";\nimport { basePathConfig } from \"../../config\";\nimport errorHandler from \"../error/errorHandler\";\n\n// Thunks\n// fetch report for overview Data\nexport const fetchLoginLoutReport = createAsyncThunk(\n \"loginoutReport/fetch\",\n async (PayloadData) => {\n try {\n const bearer_token = `Bearer ${localStorage.getItem(\"accessToken\")}`;\n const accountID = localStorage.getItem(\"atua\");\n if (!!bearer_token && !!accountID) {\n const config = {\n headers: {\n Authorization: bearer_token,\n },\n };\n const data = {\n account_id: accountID.toString(),\n day_label: PayloadData.dayID,\n start_date: PayloadData.start_date,\n end_date: PayloadData.end_date,\n };\n const res = await axios.post(\n `${basePathConfig.baseURL}/app/signinsignout-reports`,\n data,\n config\n );\n return await res.data.data;\n } else {\n return { message: \"Unauthorized\", status: 401 };\n }\n } catch (error) {\n var ErrorData = await errorHandler(error);\n return await ErrorData;\n }\n }\n);\nexport const STATUSES = Object.freeze({\n SUCCESS: \"success\",\n ERROR: \"error\",\n LOADING: \"loading\",\n});\nexport const reportLoginLogoutSlice = createSlice({\n name: \"reportLoginLogout\",\n initialState: {\n loginLogoutReportdata: [],\n loginLogoutStatus: STATUSES.SUCCESS,\n },\n reducers: {},\n extraReducers: (builder) => {\n builder\n .addCase(fetchLoginLoutReport.pending, (state, action) => {\n state.loginLogoutReportdata = [];\n state.loginLogoutStatus = STATUSES.LOADING;\n })\n .addCase(fetchLoginLoutReport.fulfilled, (state, action) => {\n state.loginLogoutReportdata = action.payload;\n state.loginLogoutStatus = STATUSES.SUCCESS;\n })\n .addCase(fetchLoginLoutReport.rejected, (state, action) => {\n state.loginLogoutReportdata = [];\n state.loginLogoutStatus = STATUSES.ERROR;\n });\n },\n});\n\nexport const { setLoginLogoutReportdata, setLoginLogoutStatus } =\n reportLoginLogoutSlice.actions;\nexport default reportLoginLogoutSlice.reducer;\n","import React from \"react\";\nimport styled from \"@emotion/styled\";\nimport { spacing } from \"@mui/system\";\nimport {\n Box,\n Button as MuiButton,\n Typography as MuiTypography,\n Divider as MuiDivider,\n InputLabel,\n Grid,\n FormControl as MuiFormControl,\n MenuItem,\n Select,\n CircularProgress as MuiCircularProgress,\n TextField,\n} from \"@mui/material\";\n\nimport { useDispatch, useSelector } from \"react-redux\";\nimport { fetchDaysList } from \"../../../../../redux/slices/reportOtherFunction\";\nimport moment from \"moment\";\nimport LogoutIcon from \"@mui/icons-material/Logout\";\nimport TabTables from \"./TabTables\";\nimport { fetchLoginLoutReport } from \"../../../../../redux/slices/reportLoginLogout\";\nimport { isValidToken } from \"../../../../../utils/jwt\";\nimport {\n fetchLogOut,\n fetchLoginLogOut_Socket,\n logout,\n} from \"../../../../../redux/slices/login\";\nimport { useNavigate } from \"react-router-dom\";\n\nconst Divider = styled(MuiDivider)(spacing);\nconst Typography = styled(MuiTypography)(spacing);\nconst Button = styled(MuiButton)(spacing);\nconst CircularProgress = styled(MuiCircularProgress)(spacing);\nconst FormControlSpacing = styled(MuiFormControl)(spacing);\nconst FormControl = styled(FormControlSpacing)`\n min-width: 148px;\n`;\n\nconst TitleTypography = styled(Typography)`\n margin-top: 15px;\n padding-right: 20px;\n padding-bottom: 12px;\n color: ${(props) => props.theme.sidebar.header.color};\n`;\nconst Wrapper = styled.div`\n padding-left: 10px;\n padding-right: 10px;\n`;\n\nconst ShowCalender = () => {\n const dispatch = useDispatch();\n const navigate = useNavigate();\n const accessToken = window.localStorage.getItem(\"accessToken\");\n const [fromDate, setFromDate] = React.useState(null);\n const [toDate, setToDate] = React.useState(null);\n const [validation, setValidation] = React.useState(null);\n\n const chechValidation = () => {\n setValidation(null);\n !toDate && setValidation(\"Check To Date\");\n !fromDate && setValidation(\"Check From Date\");\n const startDate = moment(fromDate);\n const timeEnd = moment(toDate);\n const diff = timeEnd.diff(startDate);\n const diffDuration = moment.duration(diff);\n diffDuration.days() <= 0\n ? setValidation(\n \"Please select From date that is at least 1 business days from To date.\"\n )\n : fetch_Data();\n };\n\n const fetch_Data = () => {\n if (!isValidToken(accessToken)) {\n dispatch(fetchLogOut());\n dispatch(fetchLoginLogOut_Socket());\n dispatch(logout());\n navigate(\"/\");\n } else {\n let PayloadData = {\n dayID: 6,\n start_date: moment(fromDate).format(\"YYYY-MM-DD\"),\n end_date: moment(toDate).format(\"YYYY-MM-DD\"),\n };\n dispatch(fetchLoginLoutReport(PayloadData));\n }\n };\n return (\n <>\n