first commit
This commit is contained in:
CHIEFSOFT\ameye
@@ -0,0 +1,54 @@
|
||||
.timelineList .tList {
|
||||
position: relative;
|
||||
margin-bottom: 14px;
|
||||
padding-bottom: 14px;
|
||||
border-bottom: 1px solid #F7FAFF;
|
||||
}
|
||||
.timelineList .tList:last-child {
|
||||
border: none;
|
||||
padding-bottom: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.timelineList .tList .content {
|
||||
display: flex;
|
||||
}
|
||||
.timelineList .tList .content img {
|
||||
margin-right: 10px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
.timelineList .tList .content h5 {
|
||||
margin: 0 0 3px;
|
||||
color: #260944;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
font-family: var(--bodyFontFamily) !important;
|
||||
}
|
||||
.timelineList .tList .content .text {
|
||||
margin: 0 0 5px;
|
||||
}
|
||||
.timelineList .tList .date {
|
||||
color: #A9A9C8;
|
||||
font-size: 12px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* For RTL Style */
|
||||
[dir="rtl"] .timelineList .tList {
|
||||
padding-right: 20px;
|
||||
}
|
||||
[dir="rtl"] .timelineList .tList .content img {
|
||||
margin-right: 0;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
/* For dark mode */
|
||||
[class="dark"] .timelineList .tList {
|
||||
border-bottom: 1px solid var(--borderColor);
|
||||
}
|
||||
[class="dark"] .timelineList .tList:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
[class="dark"] .timelineList .tList .content h5 {
|
||||
color: var(--darkBodyTextColor) !important;
|
||||
}
|
||||
@@ -0,0 +1,153 @@
|
||||
import React from "react";
|
||||
import { Box, Typography } from "@mui/material";
|
||||
import Card from "@mui/material/Card";
|
||||
import Menu from "@mui/material/Menu";
|
||||
import MenuItem from "@mui/material/MenuItem";
|
||||
import IconButton from "@mui/material/IconButton";
|
||||
import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
|
||||
import styles from "../../HelpDesk/Activity/Activity.module.css";
|
||||
|
||||
const ActivityTimelineData = [
|
||||
{
|
||||
id: "1",
|
||||
title: "Drop us an email at [Insert Email Address]",
|
||||
text: "We'll get back to you as soon as possible with detailed..",
|
||||
icon: "/images/support.png",
|
||||
date: "10 Min ago",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
title: "Visit our website [Insert Website URL]",
|
||||
text: "Initiate a live chat session. Our team will be there to live chat session...",
|
||||
icon: "/images/avatar2.png",
|
||||
date: "11:47 PM",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
title: "Our representatives are available",
|
||||
text: "Dial our toll-free number, representative are available..",
|
||||
icon: "/images/time.png",
|
||||
date: "07 June",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
title: "Drop us an email at [Insert Email Address]",
|
||||
text: "We'll get back to you as soon as possible with detailed..",
|
||||
icon: "/images/support.png",
|
||||
date: "05 June",
|
||||
},
|
||||
];
|
||||
|
||||
const Activity = () => {
|
||||
const [anchorEl, setAnchorEl] = React.useState(null);
|
||||
const open = Boolean(anchorEl);
|
||||
const handleClick = (event) => {
|
||||
setAnchorEl(event.currentTarget);
|
||||
};
|
||||
const handleClose = () => {
|
||||
setAnchorEl(null);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px 20px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
borderBottom: "1px solid #EEF0F7",
|
||||
paddingBottom: "10px",
|
||||
mb: "20px",
|
||||
}}
|
||||
className="for-dark-bottom-border"
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 16,
|
||||
fontWeight: 500,
|
||||
}}
|
||||
>
|
||||
Activity
|
||||
</Typography>
|
||||
|
||||
<Box>
|
||||
<IconButton
|
||||
onClick={handleClick}
|
||||
size="small"
|
||||
aria-controls={open ? "account-menu" : undefined}
|
||||
aria-haspopup="true"
|
||||
aria-expanded={open ? "true" : undefined}
|
||||
>
|
||||
<MoreHorizIcon />
|
||||
</IconButton>
|
||||
</Box>
|
||||
<Menu
|
||||
anchorEl={anchorEl}
|
||||
id="account-menu"
|
||||
open={open}
|
||||
onClose={handleClose}
|
||||
onClick={handleClose}
|
||||
PaperProps={{
|
||||
elevation: 0,
|
||||
sx: {
|
||||
overflow: "visible",
|
||||
filter: "drop-shadow(0px 2px 8px rgba(0,0,0,0.32))",
|
||||
mt: 1.5,
|
||||
"& .MuiAvatar-root": {
|
||||
width: 32,
|
||||
height: 32,
|
||||
ml: -0.5,
|
||||
mr: 1,
|
||||
},
|
||||
"&:before": {
|
||||
content: '""',
|
||||
display: "block",
|
||||
position: "absolute",
|
||||
top: 0,
|
||||
right: 14,
|
||||
width: 10,
|
||||
height: 10,
|
||||
bgcolor: "background.paper",
|
||||
transform: "translateY(-50%) rotate(45deg)",
|
||||
zIndex: 0,
|
||||
},
|
||||
},
|
||||
}}
|
||||
transformOrigin={{ horizontal: "right", vertical: "top" }}
|
||||
anchorOrigin={{ horizontal: "right", vertical: "bottom" }}
|
||||
>
|
||||
<MenuItem>Last 15 Days</MenuItem>
|
||||
<MenuItem>Last Month</MenuItem>
|
||||
<MenuItem>Last Year</MenuItem>
|
||||
</Menu>
|
||||
</Box>
|
||||
|
||||
<div className={styles.timelineList}>
|
||||
{ActivityTimelineData.slice(0, 4).map((timeline) => (
|
||||
<div className={styles.tList} key={timeline.id}>
|
||||
<div className={styles.content}>
|
||||
<img src={timeline.icon} alt="Icon" />
|
||||
<div>
|
||||
<h5>{timeline.title}</h5>
|
||||
<p className={styles.text}>{timeline.text}</p>
|
||||
<p className={styles.date}>{timeline.date}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Activity;
|
||||
@@ -0,0 +1,465 @@
|
||||
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 (
|
||||
<Box sx={{ flexShrink: 0, ml: 2.5 }}>
|
||||
<IconButton
|
||||
onClick={handleFirstPageButtonClick}
|
||||
disabled={page === 0}
|
||||
aria-label="first page"
|
||||
>
|
||||
{theme.direction === "rtl" ? <LastPageIcon /> : <FirstPageIcon />}
|
||||
</IconButton>
|
||||
<IconButton
|
||||
onClick={handleBackButtonClick}
|
||||
disabled={page === 0}
|
||||
aria-label="previous page"
|
||||
>
|
||||
{theme.direction === "rtl" ? (
|
||||
<KeyboardArrowRight />
|
||||
) : (
|
||||
<KeyboardArrowLeft />
|
||||
)}
|
||||
</IconButton>
|
||||
<IconButton
|
||||
onClick={handleNextButtonClick}
|
||||
disabled={page >= Math.ceil(count / rowsPerPage) - 1}
|
||||
aria-label="next page"
|
||||
>
|
||||
{theme.direction === "rtl" ? (
|
||||
<KeyboardArrowLeft />
|
||||
) : (
|
||||
<KeyboardArrowRight />
|
||||
)}
|
||||
</IconButton>
|
||||
<IconButton
|
||||
onClick={handleLastPageButtonClick}
|
||||
disabled={page >= Math.ceil(count / rowsPerPage) - 1}
|
||||
aria-label="last page"
|
||||
>
|
||||
{theme.direction === "rtl" ? <FirstPageIcon /> : <LastPageIcon />}
|
||||
</IconButton>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
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 (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px 25px 10px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
paddingBottom: "10px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
}}
|
||||
>
|
||||
Performance of the Agents
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<TableContainer
|
||||
component={Paper}
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
}}
|
||||
>
|
||||
<Table
|
||||
sx={{ minWidth: 900 }}
|
||||
aria-label="custom pagination table"
|
||||
className="dark-table"
|
||||
>
|
||||
<TableHead sx={{ background: "#F7FAFF" }}>
|
||||
<TableRow>
|
||||
<TableCell style={{ borderBottom: "1px solid #F7FAFF", fontSize: "13.5px" }}>
|
||||
User
|
||||
</TableCell>
|
||||
|
||||
<TableCell style={{ borderBottom: "1px solid #F7FAFF", fontSize: "13.5px" }}>
|
||||
Ratings
|
||||
</TableCell>
|
||||
|
||||
<TableCell
|
||||
align="center"
|
||||
style={{ borderBottom: "1px solid #F7FAFF", fontSize: "13.5px" }}
|
||||
>
|
||||
Total Calls
|
||||
</TableCell>
|
||||
|
||||
<TableCell
|
||||
align="center"
|
||||
style={{ borderBottom: "1px solid #F7FAFF", fontSize: "13.5px" }}
|
||||
>
|
||||
Calls Answered
|
||||
</TableCell>
|
||||
|
||||
<TableCell
|
||||
align="center"
|
||||
style={{ borderBottom: "1px solid #F7FAFF", fontSize: "13.5px" }}
|
||||
>
|
||||
Speed of Answer
|
||||
</TableCell>
|
||||
|
||||
<TableCell
|
||||
align="center"
|
||||
style={{ borderBottom: "1px solid #F7FAFF", fontSize: "13.5px" }}
|
||||
>
|
||||
Adherence
|
||||
</TableCell>
|
||||
|
||||
<TableCell
|
||||
align="center"
|
||||
style={{ borderBottom: "1px solid #F7FAFF", fontSize: "13.5px" }}
|
||||
>
|
||||
Action
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
|
||||
<TableBody>
|
||||
{(rowsPerPage > 0
|
||||
? rows.slice(
|
||||
page * rowsPerPage,
|
||||
page * rowsPerPage + rowsPerPage
|
||||
)
|
||||
: rows
|
||||
).map((row) => (
|
||||
<TableRow key={row.name}>
|
||||
<TableCell
|
||||
style={{ width: 250, borderBottom: "1px solid #F7FAFF" }}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src={row.userImg}
|
||||
alt="Product Img"
|
||||
width={40}
|
||||
height={40}
|
||||
className="borRadius100"
|
||||
/>
|
||||
|
||||
<Box className="ml-10px">
|
||||
<Typography
|
||||
sx={{
|
||||
fontWeight: "500",
|
||||
fontSize: "14px",
|
||||
}}
|
||||
as="h5"
|
||||
>
|
||||
{row.name}
|
||||
</Typography>
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: "12px",
|
||||
color: "#A9A9C8",
|
||||
}}
|
||||
>
|
||||
{row.userName}
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
</TableCell>
|
||||
|
||||
<TableCell
|
||||
style={{
|
||||
borderBottom: "1px solid #F7FAFF",
|
||||
fontSize: "14px",
|
||||
}}
|
||||
>
|
||||
<i
|
||||
className="ri-star-fill"
|
||||
style={{ color: '#F7931A' }}
|
||||
></i> {row.ratings}
|
||||
</TableCell>
|
||||
|
||||
<TableCell
|
||||
align="center"
|
||||
style={{ borderBottom: "1px solid #F7FAFF", fontSize: "14px", }}
|
||||
>
|
||||
{row.totalCalls}
|
||||
</TableCell>
|
||||
|
||||
<TableCell
|
||||
align="center"
|
||||
style={{ borderBottom: "1px solid #F7FAFF", fontSize: "14px", }}
|
||||
>
|
||||
{row.callsAnswered}
|
||||
</TableCell>
|
||||
|
||||
<TableCell
|
||||
align="center"
|
||||
style={{ borderBottom: "1px solid #F7FAFF", fontSize: "14px", }}
|
||||
>
|
||||
{row.averageSpeedOfAnswer}
|
||||
</TableCell>
|
||||
|
||||
<TableCell
|
||||
align="center"
|
||||
style={{ borderBottom: "1px solid #F7FAFF", fontSize: "14px", }}
|
||||
>
|
||||
|
||||
<span className="successBadge">{row.Adherence}</span>
|
||||
</TableCell>
|
||||
|
||||
<TableCell
|
||||
align="center"
|
||||
style={{
|
||||
fontWeight: 500,
|
||||
borderBottom: "1px solid #F7FAFF",
|
||||
fontSize: "12px",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: "inline-block",
|
||||
}}
|
||||
>
|
||||
<Tooltip title="Remove" placement="top">
|
||||
<IconButton
|
||||
aria-label="remove"
|
||||
size="small"
|
||||
color="danger"
|
||||
className="danger mr-2px"
|
||||
sx={{ background: '#ece5e5' }}
|
||||
>
|
||||
<DeleteIcon fontSize="inherit" />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip title="Edit" placement="top">
|
||||
<IconButton
|
||||
aria-label="edit"
|
||||
size="small"
|
||||
color="primary"
|
||||
className="primary ml-2px"
|
||||
sx={{ background: '#ece5e5' }}
|
||||
>
|
||||
<DriveFileRenameOutlineIcon fontSize="inherit" />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</Box>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
|
||||
{emptyRows > 0 && (
|
||||
<TableRow style={{ height: 53 * emptyRows }}>
|
||||
<TableCell
|
||||
colSpan={7}
|
||||
style={{ borderBottom: "1px solid #F7FAFF" }}
|
||||
/>
|
||||
</TableRow>
|
||||
)}
|
||||
</TableBody>
|
||||
|
||||
<TableFooter>
|
||||
<TableRow>
|
||||
<TablePagination
|
||||
rowsPerPageOptions={[5, 10, 25, { label: "All", value: -1 }]}
|
||||
colSpan={7}
|
||||
count={rows.length}
|
||||
rowsPerPage={rowsPerPage}
|
||||
page={page}
|
||||
SelectProps={{
|
||||
inputProps: {
|
||||
"aria-label": "rows per page",
|
||||
},
|
||||
native: true,
|
||||
}}
|
||||
onPageChange={handleChangePage}
|
||||
onRowsPerPageChange={handleChangeRowsPerPage}
|
||||
ActionsComponent={AgentPerformances}
|
||||
style={{ borderBottom: "none" }}
|
||||
/>
|
||||
</TableRow>
|
||||
</TableFooter>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
import React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import Box from "@mui/material/Box";
|
||||
import Typography from "@mui/material/Typography";
|
||||
|
||||
const AverageSpeedOfAnswer = () => {
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px 20px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
mb: "30px",
|
||||
}}
|
||||
>
|
||||
<Typography as="h5" fontSize="16px" fontWeight="500">
|
||||
Average Speed of Answer
|
||||
</Typography>
|
||||
|
||||
<Typography as="h3" fontSize="28px" fontWeight="700" color="#5B5B98">
|
||||
01<span style={{ fontSize: "12px" }}>m</span> : 20
|
||||
<span style={{ fontSize: "12px" }}>s</span>
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ textAlign: 'center' }}>
|
||||
<img src="/images/chart3.png" alt="chart" />
|
||||
</Box>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default AverageSpeedOfAnswer;
|
||||
@@ -0,0 +1,59 @@
|
||||
import React, { Component } from "react";
|
||||
import dynamic from "next/dynamic";
|
||||
const Chart = dynamic(() => import("react-apexcharts"), {
|
||||
ssr: false,
|
||||
});
|
||||
|
||||
class CustomerSatisfactionChart extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
series: [80, 75, 70, 60],
|
||||
options: {
|
||||
plotOptions: {
|
||||
radialBar: {
|
||||
dataLabels: {
|
||||
name: {
|
||||
offsetY: -2,
|
||||
show: true,
|
||||
},
|
||||
value: {
|
||||
show: true,
|
||||
offsetY: 3,
|
||||
fontWeight: "600",
|
||||
},
|
||||
total: {
|
||||
show: true,
|
||||
label: "Overall",
|
||||
},
|
||||
},
|
||||
hollow: {
|
||||
size: "45%",
|
||||
},
|
||||
},
|
||||
},
|
||||
colors: ["#757FEF", "#2DB6F5", "#8BD3F4", "#BFE9FF"],
|
||||
labels: ["Excellent", "Very Good", "Good", "Unhappy"],
|
||||
legend: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<>
|
||||
<Chart
|
||||
options={this.state.options}
|
||||
series={this.state.series}
|
||||
height="290"
|
||||
type="radialBar"
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default CustomerSatisfactionChart;
|
||||
@@ -0,0 +1,112 @@
|
||||
import React from "react";
|
||||
import { Box, Typography } from "@mui/material";
|
||||
import Card from "@mui/material/Card";
|
||||
import Menu from "@mui/material/Menu";
|
||||
import MenuItem from "@mui/material/MenuItem";
|
||||
import IconButton from "@mui/material/IconButton";
|
||||
import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
|
||||
import CustomerSatisfactionChart from "./CustomerSatisfactionChart";
|
||||
|
||||
const CustomerSatisfaction = () => {
|
||||
// Menu
|
||||
const [anchorEl, setAnchorEl] = React.useState(null);
|
||||
const open = Boolean(anchorEl);
|
||||
const handleClick = (event) => {
|
||||
setAnchorEl(event.currentTarget);
|
||||
};
|
||||
const handleClose = () => {
|
||||
setAnchorEl(null);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
borderBottom: "1px solid #EEF0F7",
|
||||
paddingBottom: "10px",
|
||||
mb: "20px",
|
||||
}}
|
||||
className="for-dark-bottom-border"
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
}}
|
||||
>
|
||||
Customer Satisfaction
|
||||
</Typography>
|
||||
|
||||
<Box>
|
||||
<IconButton
|
||||
onClick={handleClick}
|
||||
size="small"
|
||||
aria-controls={open ? "account-menu" : undefined}
|
||||
aria-haspopup="true"
|
||||
aria-expanded={open ? "true" : undefined}
|
||||
>
|
||||
<MoreHorizIcon />
|
||||
</IconButton>
|
||||
</Box>
|
||||
<Menu
|
||||
anchorEl={anchorEl}
|
||||
id="account-menu"
|
||||
open={open}
|
||||
onClose={handleClose}
|
||||
onClick={handleClose}
|
||||
PaperProps={{
|
||||
elevation: 0,
|
||||
sx: {
|
||||
overflow: "visible",
|
||||
filter: "drop-shadow(0px 2px 8px rgba(0,0,0,0.32))",
|
||||
mt: 1.5,
|
||||
"& .MuiAvatar-root": {
|
||||
width: 32,
|
||||
height: 32,
|
||||
ml: -0.5,
|
||||
mr: 1,
|
||||
},
|
||||
"&:before": {
|
||||
content: '""',
|
||||
display: "block",
|
||||
position: "absolute",
|
||||
top: 0,
|
||||
right: 14,
|
||||
width: 10,
|
||||
height: 10,
|
||||
bgcolor: "background.paper",
|
||||
transform: "translateY(-50%) rotate(45deg)",
|
||||
zIndex: 0,
|
||||
},
|
||||
},
|
||||
}}
|
||||
transformOrigin={{ horizontal: "right", vertical: "top" }}
|
||||
anchorOrigin={{ horizontal: "right", vertical: "bottom" }}
|
||||
>
|
||||
<MenuItem sx={{ fontSize: "14px" }}>Today</MenuItem>
|
||||
<MenuItem sx={{ fontSize: "14px" }}>Last Month</MenuItem>
|
||||
<MenuItem sx={{ fontSize: "14px" }}>Last Year</MenuItem>
|
||||
<MenuItem sx={{ fontSize: "14px" }}>All Time</MenuItem>
|
||||
</Menu>
|
||||
</Box>
|
||||
|
||||
{/* CustomerSatisfactionChart */}
|
||||
<CustomerSatisfactionChart />
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default CustomerSatisfaction;
|
||||
@@ -0,0 +1,104 @@
|
||||
import React from "react";
|
||||
import Grid from "@mui/material/Grid";
|
||||
import Box from "@mui/material/Box";
|
||||
import Card from "@mui/material/Card";
|
||||
import Typography from "@mui/material/Typography";
|
||||
|
||||
const FeaturesData = [
|
||||
{
|
||||
id: "1",
|
||||
bgColor: "#EEF0FA",
|
||||
number: "199",
|
||||
subTitle: "New Tickets",
|
||||
icon: "/images/coupon-icon.png",
|
||||
helpText: "From Average Yesterday",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
bgColor: "#F8EEE2",
|
||||
number: "207",
|
||||
subTitle: "Open Tickets",
|
||||
icon: "/images/shape-2-icon.png",
|
||||
helpText: "From Average Yesterday",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
bgColor: "#DDF0F1",
|
||||
number: "30",
|
||||
subTitle: "On Hold",
|
||||
icon: "/images/stack-icon.png",
|
||||
helpText: "From Average Yesterday",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
bgColor: "#FBEAEA",
|
||||
number: "150",
|
||||
subTitle: "Unassigned",
|
||||
icon: "/images/apps-icon.png",
|
||||
helpText: "From Average Yesterday",
|
||||
},
|
||||
];
|
||||
|
||||
const Features = () => {
|
||||
return (
|
||||
<>
|
||||
<Grid
|
||||
container
|
||||
justifyContent="center"
|
||||
rowSpacing={1}
|
||||
columnSpacing={{ xs: 1, sm: 2, md: 2 }}
|
||||
>
|
||||
{FeaturesData.map((feature) => (
|
||||
<Grid item xs={12} sm={6} md={4} lg={3} key={feature.id}>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
backgroundColor: `${feature.bgColor}`
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
mb: "10px"
|
||||
}}
|
||||
>
|
||||
<Box>
|
||||
<Typography
|
||||
as="h1"
|
||||
sx={{ fontSize: 28, fontWeight: 700 }}
|
||||
>
|
||||
{feature.number}
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<img src={feature.icon} alt="icon" />
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Typography as="h3" fontSize={16} fontWeight={500} mb="5px">
|
||||
{feature.subTitle}
|
||||
</Typography>
|
||||
|
||||
<Typography
|
||||
as="p"
|
||||
sx={{
|
||||
fontSize: "13px",
|
||||
}}
|
||||
>
|
||||
{feature.helpText}
|
||||
</Typography>
|
||||
</Card>
|
||||
</Grid>
|
||||
))}
|
||||
</Grid>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Features;
|
||||
@@ -0,0 +1,261 @@
|
||||
import React from "react";
|
||||
import { Box } from "@mui/material";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import InputLabel from "@mui/material/InputLabel";
|
||||
import MenuItem from "@mui/material/MenuItem";
|
||||
import FormControl from "@mui/material/FormControl";
|
||||
import Select from "@mui/material/Select";
|
||||
import Link from "@mui/material/Link";
|
||||
|
||||
const SupportStatus = () => {
|
||||
// Select Form
|
||||
const [select, setSelect] = React.useState("");
|
||||
const handleChange = (event) => {
|
||||
setSelect(event.target.value);
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
{/* Card Header */}
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
borderBottom: "1px solid #EEF0F7",
|
||||
paddingBottom: "10px",
|
||||
mb: "20px",
|
||||
}}
|
||||
className="for-dark-bottom-border"
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
}}
|
||||
>
|
||||
Support Status
|
||||
</Typography>
|
||||
<Box>
|
||||
<FormControl sx={{ minWidth: 120 }} size="small">
|
||||
<InputLabel id="demo-select-small" sx={{ fontSize: "14px" }}>
|
||||
Select
|
||||
</InputLabel>
|
||||
<Select
|
||||
labelId="demo-select-small"
|
||||
id="demo-select-small"
|
||||
value={select}
|
||||
label="Select"
|
||||
onChange={handleChange}
|
||||
sx={{ fontSize: "14px" }}
|
||||
className="select"
|
||||
>
|
||||
<MenuItem value={1} sx={{ fontSize: "14px" }}>
|
||||
This Week
|
||||
</MenuItem>
|
||||
<MenuItem value={2} sx={{ fontSize: "14px" }}>
|
||||
This Month
|
||||
</MenuItem>
|
||||
<MenuItem value={3} sx={{ fontSize: "14px" }}>
|
||||
This Year
|
||||
</MenuItem>
|
||||
<MenuItem value={4} sx={{ fontSize: "14px" }}>
|
||||
All Time
|
||||
</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
color: "#5B5B98",
|
||||
mb: "10px",
|
||||
}}
|
||||
>
|
||||
<span className="primaryColor" style={{ fontWeight: "500" }}>
|
||||
12,50846
|
||||
</span>{" "}
|
||||
Tickets
|
||||
</Typography>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
borderRadius: "3px",
|
||||
background: "#EEF0F6",
|
||||
display: "flex",
|
||||
mb: "20px",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
width: "88px",
|
||||
height: "10px",
|
||||
borderRadius: "3px",
|
||||
background: "#757FEF",
|
||||
mr: "2px",
|
||||
}}
|
||||
></Box>
|
||||
<Box
|
||||
sx={{
|
||||
width: "55px",
|
||||
height: "10px",
|
||||
borderRadius: "3px",
|
||||
background: "#EE368C",
|
||||
mr: "2px",
|
||||
}}
|
||||
></Box>
|
||||
<Box
|
||||
sx={{
|
||||
width: "98px",
|
||||
height: "10px",
|
||||
borderRadius: "3px",
|
||||
background: "#2DB6F5",
|
||||
}}
|
||||
></Box>
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
background: "#F7FAFF",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
p: "15px 25px",
|
||||
}}
|
||||
className="bg-black"
|
||||
>
|
||||
<Typography
|
||||
as="h4"
|
||||
fontSize="15px"
|
||||
color="#757FEF"
|
||||
fontWeight="500"
|
||||
>
|
||||
Status
|
||||
</Typography>
|
||||
<Typography fontSize="15px" fontWeight="500">
|
||||
% Change
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
p: "15px 10px",
|
||||
borderBottom: "1px solid #F7FAFF",
|
||||
}}
|
||||
className="for-dark-bottom-border"
|
||||
>
|
||||
<Box fontSize={15}>
|
||||
<span
|
||||
style={{
|
||||
background: "#757FEF",
|
||||
width: "7px",
|
||||
height: "7px",
|
||||
borderRadius: "30px",
|
||||
display: "inline-block",
|
||||
marginRight: "5px",
|
||||
position: "relative",
|
||||
top: "-2px",
|
||||
}}
|
||||
></span>{" "}
|
||||
Resolved Tickets
|
||||
</Box>
|
||||
|
||||
<span className="primaryBadge">+2.48%</span>
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
p: "15px 10px",
|
||||
borderBottom: "1px solid #F7FAFF",
|
||||
}}
|
||||
className="for-dark-bottom-border"
|
||||
>
|
||||
<Box fontSize={15}>
|
||||
<span
|
||||
style={{
|
||||
background: "#2DB6F5",
|
||||
width: "7px",
|
||||
height: "7px",
|
||||
borderRadius: "30px",
|
||||
display: "inline-block",
|
||||
marginRight: "5px",
|
||||
position: "relative",
|
||||
top: "-2px",
|
||||
}}
|
||||
></span>{" "}
|
||||
Open Tickets
|
||||
</Box>
|
||||
<span className="primaryBadge">+1.21%</span>
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
p: "15px 10px",
|
||||
borderBottom: "1px solid #F7FAFF",
|
||||
}}
|
||||
className="for-dark-bottom-border"
|
||||
>
|
||||
<Box fontSize={15}>
|
||||
<span
|
||||
style={{
|
||||
background: "#EE368C",
|
||||
width: "7px",
|
||||
height: "7px",
|
||||
borderRadius: "30px",
|
||||
display: "inline-block",
|
||||
marginRight: "5px",
|
||||
position: "relative",
|
||||
top: "-2px",
|
||||
}}
|
||||
></span>{" "}
|
||||
Unresolved Tickets
|
||||
</Box>
|
||||
<span className="dangerBadge">-0.50%</span>
|
||||
</Box>
|
||||
|
||||
<Link
|
||||
href="#"
|
||||
underline="none"
|
||||
sx={{
|
||||
borderRadius: "10px",
|
||||
background: "rgba(117, 127, 239, 0.10)",
|
||||
color: "#757FEF",
|
||||
fontSize: "15px",
|
||||
fontWeight: "500",
|
||||
display: "block",
|
||||
textAlign: "center",
|
||||
p: "13px 10px",
|
||||
mt: "25px",
|
||||
}}
|
||||
>
|
||||
Create New Ticket
|
||||
</Link>
|
||||
</Box>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default SupportStatus;
|
||||
@@ -0,0 +1,264 @@
|
||||
import React from "react";
|
||||
import { Box } from "@mui/material";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
import Grid from "@mui/material/Grid";
|
||||
import dynamic from "next/dynamic";
|
||||
const Chart = dynamic(() => import("react-apexcharts"), {
|
||||
ssr: false,
|
||||
});
|
||||
import InputLabel from "@mui/material/InputLabel";
|
||||
import MenuItem from "@mui/material/MenuItem";
|
||||
import FormControl from "@mui/material/FormControl";
|
||||
import Select from "@mui/material/Select";
|
||||
import TrendingUpIcon from "@mui/icons-material/TrendingUp";
|
||||
import TrendingDownIcon from "@mui/icons-material/TrendingDown";
|
||||
import ProgressBar from "@ramonak/react-progress-bar";
|
||||
|
||||
const TicketsStatus = () => {
|
||||
// Select Form
|
||||
const [select, setSelect] = React.useState("");
|
||||
const handleChange = (event) => {
|
||||
setSelect(event.target.value);
|
||||
};
|
||||
|
||||
// Chart
|
||||
const series = [
|
||||
{
|
||||
name: "Open",
|
||||
data: [10, 20, 15, 12, 9, 11, 6],
|
||||
},
|
||||
{
|
||||
name: "Closed",
|
||||
data: [-10, -10, -15, -12, -9, -11, -6],
|
||||
},
|
||||
];
|
||||
const options = {
|
||||
chart: {
|
||||
stacked: true,
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
colors: ["#2DB6F5", "#757FEF"],
|
||||
plotOptions: {
|
||||
bar: {
|
||||
borderRadius: 5,
|
||||
columnWidth: "15%",
|
||||
borderRadiusWhenStacked: "last",
|
||||
},
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
grid: {
|
||||
xaxis: {
|
||||
lines: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
show: true,
|
||||
strokeDashArray: 5,
|
||||
borderColor: "#EDEFF5",
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
style: {
|
||||
colors: "#a9a9c8",
|
||||
fontSize: "14px",
|
||||
},
|
||||
},
|
||||
},
|
||||
xaxis: {
|
||||
axisBorder: {
|
||||
show: false,
|
||||
},
|
||||
categories: ["Sat", "Sun", "Mon", "Tue", "Wed", "Thu", "Fri"],
|
||||
labels: {
|
||||
style: {
|
||||
colors: "#a9a9c8",
|
||||
fontSize: "14px",
|
||||
},
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
show: false,
|
||||
},
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px 25px 10px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
{/* Card Header */}
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
borderBottom: "1px solid #EEF0F7",
|
||||
paddingBottom: "10px",
|
||||
}}
|
||||
className="for-dark-bottom-border"
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
}}
|
||||
>
|
||||
Tickets Status
|
||||
</Typography>
|
||||
<Box>
|
||||
<FormControl sx={{ minWidth: 120 }} size="small">
|
||||
<InputLabel id="demo-select-small" sx={{ fontSize: "14px" }}>
|
||||
Select
|
||||
</InputLabel>
|
||||
<Select
|
||||
labelId="demo-select-small"
|
||||
id="demo-select-small"
|
||||
value={select}
|
||||
label="Select"
|
||||
onChange={handleChange}
|
||||
sx={{ fontSize: "14px" }}
|
||||
className="select"
|
||||
>
|
||||
<MenuItem value={1} sx={{ fontSize: "14px" }}>
|
||||
This Week
|
||||
</MenuItem>
|
||||
<MenuItem value={2} sx={{ fontSize: "14px" }}>
|
||||
This Month
|
||||
</MenuItem>
|
||||
<MenuItem value={3} sx={{ fontSize: "14px" }}>
|
||||
This Year
|
||||
</MenuItem>
|
||||
<MenuItem value={4} sx={{ fontSize: "14px" }}>
|
||||
All Time
|
||||
</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* Chart */}
|
||||
<Grid
|
||||
container
|
||||
alignItems="center"
|
||||
rowSpacing={1}
|
||||
columnSpacing={{ xs: 1, sm: 2, md: 2 }}
|
||||
>
|
||||
<Grid item xs={12} md={8} lg={8} xl={8}>
|
||||
<Chart options={options} series={series} type="bar" height={282} />
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={4} lg={4} xl={4}>
|
||||
{/* New Tickets */}
|
||||
<Box
|
||||
sx={{
|
||||
borderRadius: "5px",
|
||||
background: "rgba(117, 127, 239, 0.10)",
|
||||
p: "22px 20px",
|
||||
mb: "10px",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Box>
|
||||
<Typography as="p" mb="3px">
|
||||
New Tickets
|
||||
</Typography>
|
||||
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
}}
|
||||
>
|
||||
12,50846
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ display: "flex" }}>
|
||||
<TrendingUpIcon className="successColor" sx={{ mr: "5px" }} />{" "}
|
||||
+2.48%
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<ProgressBar
|
||||
completed={30}
|
||||
height="8px"
|
||||
labelSize="7px"
|
||||
baseBgColor="#fff"
|
||||
bgColor="#757FEF"
|
||||
/>
|
||||
</Box>
|
||||
|
||||
{/* Solved Tickets */}
|
||||
<Box
|
||||
sx={{
|
||||
borderRadius: "5px",
|
||||
background: "rgba(45, 182, 245, 0.10)",
|
||||
p: "22px 20px",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Box>
|
||||
<Typography as="p" mb="3px">
|
||||
Solved Tickets
|
||||
</Typography>
|
||||
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
}}
|
||||
>
|
||||
10,431
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ display: "flex" }}>
|
||||
<TrendingDownIcon
|
||||
className="dangerColor"
|
||||
sx={{ mr: "5px" }}
|
||||
/>{" "}
|
||||
-1.02%
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<ProgressBar
|
||||
completed={40}
|
||||
height="8px"
|
||||
labelSize="7px"
|
||||
baseBgColor="#fff"
|
||||
bgColor="#2DB6F5"
|
||||
/>
|
||||
</Box>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default TicketsStatus;
|
||||
@@ -0,0 +1,43 @@
|
||||
import React from "react";
|
||||
import Card from "@mui/material/Card";
|
||||
import Box from "@mui/material/Box";
|
||||
import Typography from "@mui/material/Typography";
|
||||
|
||||
const TimeToResolveComplaint = () => {
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px 20px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
mb: "30px",
|
||||
}}
|
||||
>
|
||||
<Typography as="h5" fontSize="16px" fontWeight="500">
|
||||
Time to Resolve Complaint
|
||||
</Typography>
|
||||
|
||||
<Typography as="h3" fontSize="28px" fontWeight="700" color="#5B5B98">
|
||||
03<span style={{ fontSize: "12px" }}>m</span> : 00
|
||||
<span style={{ fontSize: "12px" }}>s</span>
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ textAlign: 'center' }}>
|
||||
<img src="/images/chart4.png" alt="chart" />
|
||||
</Box>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default TimeToResolveComplaint;
|
||||
Reference in New Issue
Block a user