import * as React from "react";
import { Box } from "@mui/material";
import Card from "@mui/material/Card";
import { Typography } from "@mui/material";
import PropTypes from "prop-types";
import { useTheme } from "@mui/material/styles";
import Table from "@mui/material/Table";
import TableHead from "@mui/material/TableHead";
import TableBody from "@mui/material/TableBody";
import TableCell from "@mui/material/TableCell";
import TableContainer from "@mui/material/TableContainer";
import TableFooter from "@mui/material/TableFooter";
import TablePagination from "@mui/material/TablePagination";
import TableRow from "@mui/material/TableRow";
import Paper from "@mui/material/Paper";
import FirstPageIcon from "@mui/icons-material/FirstPage";
import KeyboardArrowLeft from "@mui/icons-material/KeyboardArrowLeft";
import KeyboardArrowRight from "@mui/icons-material/KeyboardArrowRight";
import LastPageIcon from "@mui/icons-material/LastPage";
import Tooltip from "@mui/material/Tooltip";
import IconButton from "@mui/material/IconButton";
import DeleteIcon from "@mui/icons-material/Delete";
import DriveFileRenameOutlineIcon from "@mui/icons-material/DriveFileRenameOutline";
function AgentPerformances(props) {
const theme = useTheme();
const { count, page, rowsPerPage, onPageChange } = props;
const handleFirstPageButtonClick = (event) => {
onPageChange(event, 0);
};
const handleBackButtonClick = (event) => {
onPageChange(event, page - 1);
};
const handleNextButtonClick = (event) => {
onPageChange(event, page + 1);
};
const handleLastPageButtonClick = (event) => {
onPageChange(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
};
return (
{theme.direction === "rtl" ? : }
{theme.direction === "rtl" ? (
) : (
)}
= Math.ceil(count / rowsPerPage) - 1}
aria-label="next page"
>
{theme.direction === "rtl" ? (
) : (
)}
= Math.ceil(count / rowsPerPage) - 1}
aria-label="last page"
>
{theme.direction === "rtl" ? : }
);
}
AgentPerformances.propTypes = {
count: PropTypes.number.isRequired,
onPageChange: PropTypes.func.isRequired,
page: PropTypes.number.isRequired,
rowsPerPage: PropTypes.number.isRequired,
};
function createData(
userImg,
name,
userName,
ratings,
totalCalls,
callsAnswered,
averageSpeedOfAnswer,
Adherence
) {
return {
userImg,
name,
userName,
ratings,
totalCalls,
callsAnswered,
averageSpeedOfAnswer,
Adherence,
};
}
const rows = [
createData(
"/images/user1.png",
"Jordan Stevenson",
"@jstevenson5c",
"4.5",
"185",
"172",
"2:10s",
"91%"
),
createData(
"/images/user2.png",
"Lucile Young",
"@lyoung4a",
"3.5",
"399",
"269",
"3:20s",
"95%"
),
createData(
"/images/user3.png",
"Francis Frank",
"@ffrank7e",
"5",
"499",
"490",
"5:25s",
"99%"
),
createData(
"/images/user4.png",
"Phoebe Patterson",
"@ppatterson2g",
"4.3",
"199",
"149",
"2:30s",
"77%"
),
createData(
"/images/user5.png",
"James Andy",
"@andyjm32",
"4.7",
"150",
"129",
"4:31s",
"65%"
),
createData(
"/images/user6.png",
"Sarah Taylor",
"@taylors32",
"4.9",
"266",
"250",
"2:39s",
"85%"
),
createData(
"/images/user7.png",
"David Warner",
"@davidwabc2",
"5",
"477",
"470",
"3:21s",
"95%"
),
createData(
"/images/user8.png",
"Steven Smith",
"@ssmith542",
"4.8",
"199",
"188",
"5:21s",
"91%"
),
].sort((a, b) => (a.name < b.name ? -1 : 1));
export default function AgentPerformance() {
const [page, setPage] = React.useState(0);
const [rowsPerPage, setRowsPerPage] = React.useState(6);
// Avoid a layout jump when reaching the last page with empty rows.
const emptyRows =
page > 0 ? Math.max(0, (1 + page) * rowsPerPage - rows.length) : 0;
const handleChangePage = (event, newPage) => {
setPage(newPage);
};
const handleChangeRowsPerPage = (event) => {
setRowsPerPage(parseInt(event.target.value, 10));
setPage(0);
};
return (
<>
Performance of the Agents
User
Ratings
Total Calls
Calls Answered
Speed of Answer
Adherence
Action
{(rowsPerPage > 0
? rows.slice(
page * rowsPerPage,
page * rowsPerPage + rowsPerPage
)
: rows
).map((row) => (
{row.name}
{row.userName}
{row.ratings}
{row.totalCalls}
{row.callsAnswered}
{row.averageSpeedOfAnswer}
{row.Adherence}
))}
{emptyRows > 0 && (
)}
);
}