first commit
This commit is contained in:
CHIEFSOFT\ameye
@@ -0,0 +1,503 @@
|
||||
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 Table from "@mui/material/Table";
|
||||
import TableBody from "@mui/material/TableBody";
|
||||
import TableCell from "@mui/material/TableCell";
|
||||
import TableContainer from "@mui/material/TableContainer";
|
||||
import TableHead from "@mui/material/TableHead";
|
||||
import TableRow from "@mui/material/TableRow";
|
||||
import Paper from "@mui/material/Paper";
|
||||
import Avatar from "@mui/material/Avatar";
|
||||
import AvatarGroup from "@mui/material/AvatarGroup";
|
||||
import ProgressBar from "@ramonak/react-progress-bar";
|
||||
|
||||
const AllProjects = () => {
|
||||
const [select, setSelect] = React.useState("");
|
||||
const handleChange = (event) => {
|
||||
setSelect(event.target.value);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
marginBottom: "15px",
|
||||
}}
|
||||
className="for-dark-bottom-border"
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
}}
|
||||
>
|
||||
All Projects
|
||||
</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={0} sx={{ fontSize: "13px" }}>
|
||||
Today
|
||||
</MenuItem>
|
||||
<MenuItem value={1} sx={{ fontSize: "13px" }}>
|
||||
Last 7 Days
|
||||
</MenuItem>
|
||||
<MenuItem value={2} sx={{ fontSize: "13px" }}>
|
||||
This Month
|
||||
</MenuItem>
|
||||
<MenuItem value={3} sx={{ fontSize: "13px" }}>
|
||||
Last 12 Months
|
||||
</MenuItem>
|
||||
<MenuItem value={4} sx={{ fontSize: "13px" }}>
|
||||
All Time
|
||||
</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<TableContainer
|
||||
component={Paper}
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
maxHeight: "370px",
|
||||
overflowY: "auto",
|
||||
}}
|
||||
>
|
||||
<Table
|
||||
sx={{ minWidth: 700 }}
|
||||
aria-label="simple table"
|
||||
className="dark-table"
|
||||
>
|
||||
<TableHead sx={{ background: "#F7FAFF" }}>
|
||||
<TableRow>
|
||||
<TableCell
|
||||
sx={{ borderBottom: "1px solid #F7FAFF", fontSize: "13.5px" }}
|
||||
>
|
||||
Project Name
|
||||
</TableCell>
|
||||
|
||||
<TableCell
|
||||
sx={{ borderBottom: "1px solid #F7FAFF", fontSize: "13.5px" }}
|
||||
>
|
||||
Members
|
||||
</TableCell>
|
||||
|
||||
<TableCell
|
||||
sx={{ borderBottom: "1px solid #F7FAFF", fontSize: "13.5px" }}
|
||||
align="center"
|
||||
>
|
||||
Budget
|
||||
</TableCell>
|
||||
|
||||
<TableCell
|
||||
sx={{ borderBottom: "1px solid #F7FAFF", fontSize: "13.5px" }}
|
||||
align="center"
|
||||
>
|
||||
Status
|
||||
</TableCell>
|
||||
|
||||
<TableCell
|
||||
sx={{ borderBottom: "1px solid #F7FAFF", fontSize: "13.5px" }}
|
||||
>
|
||||
Completion
|
||||
</TableCell>
|
||||
|
||||
<TableCell
|
||||
sx={{ borderBottom: "1px solid #F7FAFF", fontSize: "13.5px" }}
|
||||
align="right"
|
||||
>
|
||||
Due Date
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
|
||||
<TableBody>
|
||||
<TableRow
|
||||
sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
|
||||
>
|
||||
<TableCell sx={{ borderBottom: "1px solid #F7FAFF" }}>
|
||||
<Typography
|
||||
as="h5"
|
||||
fontWeight="500"
|
||||
fontSize="13px"
|
||||
>
|
||||
Product UI/UX Design
|
||||
</Typography>
|
||||
</TableCell>
|
||||
|
||||
<TableCell sx={{ borderBottom: "1px solid #F7FAFF" }}>
|
||||
<AvatarGroup max={4} sx={{ justifyContent: "flex-end" }}>
|
||||
<Avatar
|
||||
alt="Remy Sharp"
|
||||
src="/images/user1.png"
|
||||
sx={{ width: "25px", height: "25px" }}
|
||||
/>
|
||||
<Avatar
|
||||
alt="Travis Howard"
|
||||
src="/images/user2.png"
|
||||
sx={{ width: "25px", height: "25px" }}
|
||||
/>
|
||||
<Avatar
|
||||
alt="Cindy Baker"
|
||||
src="/images/user3.png"
|
||||
sx={{ width: "25px", height: "25px" }}
|
||||
/>
|
||||
</AvatarGroup>
|
||||
</TableCell>
|
||||
|
||||
<TableCell
|
||||
align="center"
|
||||
sx={{ borderBottom: "1px solid #F7FAFF", fontSize: "13px" }}
|
||||
>
|
||||
$14,000
|
||||
</TableCell>
|
||||
|
||||
<TableCell
|
||||
align="center"
|
||||
sx={{
|
||||
fontWeight: 500,
|
||||
borderBottom: "1px solid #F7FAFF",
|
||||
fontSize: "11px",
|
||||
}}
|
||||
>
|
||||
<span className="successBadge">Active</span>
|
||||
</TableCell>
|
||||
|
||||
<TableCell sx={{ borderBottom: "1px solid #F7FAFF" }}>
|
||||
<Box>
|
||||
<Typography fontSize="12px">70%</Typography>
|
||||
|
||||
<ProgressBar
|
||||
completed={70}
|
||||
height="5px"
|
||||
labelSize="0px"
|
||||
baseBgColor="#eeeeee"
|
||||
bgColor="#757FEF"
|
||||
/>
|
||||
</Box>
|
||||
</TableCell>
|
||||
|
||||
<TableCell
|
||||
align="right"
|
||||
sx={{ borderBottom: "1px solid #F7FAFF", fontSize: "13px" }}
|
||||
>
|
||||
08 Mar 2021
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
|
||||
<TableRow
|
||||
sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
|
||||
>
|
||||
<TableCell sx={{ borderBottom: "1px solid #F7FAFF" }}>
|
||||
<Typography
|
||||
as="h5"
|
||||
fontWeight="500"
|
||||
fontSize="13px"
|
||||
>
|
||||
Public Beta Release
|
||||
</Typography>
|
||||
</TableCell>
|
||||
|
||||
<TableCell sx={{ borderBottom: "1px solid #F7FAFF" }}>
|
||||
<AvatarGroup max={4} sx={{ justifyContent: "flex-end" }}>
|
||||
<Avatar
|
||||
alt="Remy Sharp"
|
||||
src="/images/user4.png"
|
||||
sx={{ width: "25px", height: "25px" }}
|
||||
/>
|
||||
<Avatar
|
||||
alt="Travis Howard"
|
||||
src="/images/user5.png"
|
||||
sx={{ width: "25px", height: "25px" }}
|
||||
/>
|
||||
</AvatarGroup>
|
||||
</TableCell>
|
||||
|
||||
<TableCell
|
||||
align="center"
|
||||
sx={{ borderBottom: "1px solid #F7FAFF", fontSize: "13px" }}
|
||||
>
|
||||
$14,000
|
||||
</TableCell>
|
||||
|
||||
<TableCell
|
||||
align="center"
|
||||
sx={{
|
||||
fontWeight: 500,
|
||||
borderBottom: "1px solid #F7FAFF",
|
||||
fontSize: "11px",
|
||||
}}
|
||||
>
|
||||
<span className="primaryBadge">Complete</span>
|
||||
</TableCell>
|
||||
|
||||
<TableCell sx={{ borderBottom: "1px solid #F7FAFF" }}>
|
||||
<Box>
|
||||
<Typography fontSize="12px">100%</Typography>
|
||||
<ProgressBar
|
||||
completed={100}
|
||||
height="5px"
|
||||
labelSize="0px"
|
||||
baseBgColor="#eeeeee"
|
||||
bgColor="#757FEF"
|
||||
/>
|
||||
</Box>
|
||||
</TableCell>
|
||||
|
||||
<TableCell
|
||||
align="right"
|
||||
sx={{ borderBottom: "1px solid #F7FAFF", fontSize: "13px" }}
|
||||
>
|
||||
17 Apr 2021
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
|
||||
<TableRow
|
||||
sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
|
||||
>
|
||||
<TableCell sx={{ borderBottom: "1px solid #F7FAFF" }}>
|
||||
<Typography
|
||||
as="h5"
|
||||
fontWeight="500"
|
||||
fontSize="13px"
|
||||
>
|
||||
SEO Marketing
|
||||
</Typography>
|
||||
</TableCell>
|
||||
|
||||
<TableCell sx={{ borderBottom: "1px solid #F7FAFF" }}>
|
||||
<AvatarGroup max={4} sx={{ justifyContent: "flex-end" }}>
|
||||
<Avatar
|
||||
alt="Remy Sharp"
|
||||
src="/images/user6.png"
|
||||
sx={{ width: "25px", height: "25px" }}
|
||||
/>
|
||||
<Avatar
|
||||
alt="Travis Howard"
|
||||
src="/images/user7.png"
|
||||
sx={{ width: "25px", height: "25px" }}
|
||||
/>
|
||||
</AvatarGroup>
|
||||
</TableCell>
|
||||
|
||||
<TableCell
|
||||
align="center"
|
||||
sx={{ borderBottom: "1px solid #F7FAFF", fontSize: "13px" }}
|
||||
>
|
||||
$12,000
|
||||
</TableCell>
|
||||
|
||||
<TableCell
|
||||
align="center"
|
||||
sx={{
|
||||
fontWeight: 500,
|
||||
borderBottom: "1px solid #F7FAFF",
|
||||
fontSize: "11px",
|
||||
}}
|
||||
>
|
||||
<span className="primaryBadge">Complete</span>
|
||||
</TableCell>
|
||||
|
||||
<TableCell sx={{ borderBottom: "1px solid #F7FAFF" }}>
|
||||
<Box>
|
||||
<Typography fontSize="12px">100%</Typography>
|
||||
<ProgressBar
|
||||
completed={100}
|
||||
height="5px"
|
||||
labelSize="0px"
|
||||
baseBgColor="#eeeeee"
|
||||
bgColor="#757FEF"
|
||||
/>
|
||||
</Box>
|
||||
</TableCell>
|
||||
|
||||
<TableCell
|
||||
align="right"
|
||||
sx={{ borderBottom: "1px solid #F7FAFF", fontSize: "13px" }}
|
||||
>
|
||||
10 Sep 2021
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
|
||||
<TableRow
|
||||
sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
|
||||
>
|
||||
<TableCell sx={{ borderBottom: "1px solid #F7FAFF" }}>
|
||||
<Typography
|
||||
as="h5"
|
||||
fontWeight="500"
|
||||
fontSize="13px"
|
||||
>
|
||||
New Office Building
|
||||
</Typography>
|
||||
</TableCell>
|
||||
|
||||
<TableCell sx={{ borderBottom: "1px solid #F7FAFF" }}>
|
||||
<AvatarGroup max={4} sx={{ justifyContent: "flex-end" }}>
|
||||
<Avatar
|
||||
alt="Remy Sharp"
|
||||
src="/images/user1.png"
|
||||
sx={{ width: "25px", height: "25px" }}
|
||||
/>
|
||||
<Avatar
|
||||
alt="Travis Howard"
|
||||
src="/images/user2.png"
|
||||
sx={{ width: "25px", height: "25px" }}
|
||||
/>
|
||||
<Avatar
|
||||
alt="Cindy Baker"
|
||||
src="/images/user3.png"
|
||||
sx={{ width: "25px", height: "25px" }}
|
||||
/>
|
||||
</AvatarGroup>
|
||||
</TableCell>
|
||||
|
||||
<TableCell
|
||||
align="center"
|
||||
sx={{ borderBottom: "1px solid #F7FAFF", fontSize: "13px" }}
|
||||
>
|
||||
$9,000
|
||||
</TableCell>
|
||||
|
||||
<TableCell
|
||||
align="center"
|
||||
sx={{
|
||||
fontWeight: 500,
|
||||
borderBottom: "1px solid #F7FAFF",
|
||||
fontSize: "11px",
|
||||
}}
|
||||
>
|
||||
<span className="dangerBadge">Pending</span>
|
||||
</TableCell>
|
||||
|
||||
<TableCell sx={{ borderBottom: "1px solid #F7FAFF" }}>
|
||||
<Box>
|
||||
<Typography fontSize="12px">0%</Typography>
|
||||
<ProgressBar
|
||||
completed={0}
|
||||
height="5px"
|
||||
labelSize="0px"
|
||||
baseBgColor="#eeeeee"
|
||||
bgColor="#757FEF"
|
||||
/>
|
||||
</Box>
|
||||
</TableCell>
|
||||
|
||||
<TableCell
|
||||
align="right"
|
||||
sx={{ borderBottom: "1px solid #F7FAFF", fontSize: "13px" }}
|
||||
>
|
||||
06 Aug 2022
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
|
||||
<TableRow
|
||||
sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
|
||||
>
|
||||
<TableCell sx={{ borderBottom: "1px solid #F7FAFF" }}>
|
||||
<Typography
|
||||
as="h5"
|
||||
fontWeight="500"
|
||||
fontSize="13px"
|
||||
>
|
||||
Product Devlopment
|
||||
</Typography>
|
||||
</TableCell>
|
||||
|
||||
<TableCell sx={{ borderBottom: "1px solid #F7FAFF" }}>
|
||||
<AvatarGroup max={4} sx={{ justifyContent: "flex-end" }}>
|
||||
<Avatar
|
||||
alt="Remy Sharp"
|
||||
src="/images/user7.png"
|
||||
sx={{ width: "25px", height: "25px" }}
|
||||
/>
|
||||
<Avatar
|
||||
alt="Travis Howard"
|
||||
src="/images/user8.png"
|
||||
sx={{ width: "25px", height: "25px" }}
|
||||
/>
|
||||
<Avatar
|
||||
alt="Cindy Baker"
|
||||
src="/images/user9.png"
|
||||
sx={{ width: "25px", height: "25px" }}
|
||||
/>
|
||||
</AvatarGroup>
|
||||
</TableCell>
|
||||
|
||||
<TableCell
|
||||
align="center"
|
||||
sx={{ borderBottom: "1px solid #F7FAFF", fontSize: "13px" }}
|
||||
>
|
||||
$16,000
|
||||
</TableCell>
|
||||
|
||||
<TableCell
|
||||
align="center"
|
||||
sx={{
|
||||
fontWeight: 500,
|
||||
borderBottom: "1px solid #F7FAFF",
|
||||
fontSize: "11px",
|
||||
}}
|
||||
>
|
||||
<span className="successBadge">Active</span>
|
||||
</TableCell>
|
||||
|
||||
<TableCell sx={{ borderBottom: "1px solid #F7FAFF" }}>
|
||||
<Box>
|
||||
<Typography fontSize="12px">80%</Typography>
|
||||
<ProgressBar
|
||||
completed={80}
|
||||
height="5px"
|
||||
labelSize="0px"
|
||||
baseBgColor="#eeeeee"
|
||||
bgColor="#757FEF"
|
||||
/>
|
||||
</Box>
|
||||
</TableCell>
|
||||
|
||||
<TableCell
|
||||
align="right"
|
||||
sx={{ borderBottom: "1px solid #F7FAFF", fontSize: "13px" }}
|
||||
>
|
||||
08 Mar 2022
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default AllProjects;
|
||||
@@ -0,0 +1,177 @@
|
||||
import React from "react";
|
||||
import { Box } from "@mui/material";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
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";
|
||||
|
||||
const AudienceOverview = () => {
|
||||
// Select Form
|
||||
const [select, setSelect] = React.useState("");
|
||||
const handleChange = (event) => {
|
||||
setSelect(event.target.value);
|
||||
};
|
||||
|
||||
// Chart
|
||||
const series = [
|
||||
{
|
||||
name: "New Visitors",
|
||||
data: [0, 70, 35, 80, 40, 80, 75, 65, 80, 70, 40, 0],
|
||||
},
|
||||
{
|
||||
name: "Unique Visitors",
|
||||
data: [0, 55, 80, 30, 50, 60, 32, 40, 60, 60, 40, 10],
|
||||
},
|
||||
{
|
||||
name: "Previous Visitors",
|
||||
data: [0, 45, 35, 50, 80, 40, 60, 50, 110, 40, 65, 20],
|
||||
},
|
||||
];
|
||||
const options = {
|
||||
chart: {
|
||||
type: "area",
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
stroke: {
|
||||
curve: "smooth",
|
||||
},
|
||||
colors: ["#E7EBF5", "#8EB0DE", "#90C6E0"],
|
||||
xaxis: {
|
||||
axisBorder: {
|
||||
show: false,
|
||||
},
|
||||
categories: [
|
||||
"13 Jan",
|
||||
"14 Jan",
|
||||
"15 Jan",
|
||||
"16 Jan",
|
||||
"17 Jan",
|
||||
"18 Jan",
|
||||
"19 Jan",
|
||||
"20 Jan",
|
||||
"21 Jan",
|
||||
"22 Jan",
|
||||
"23 Jan",
|
||||
"24 Jan",
|
||||
"25 Jan",
|
||||
],
|
||||
labels: {
|
||||
style: {
|
||||
colors: "#a9a9c8",
|
||||
fontSize: "14px",
|
||||
},
|
||||
},
|
||||
axisTicks: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
yaxis: {
|
||||
tickAmount: 6,
|
||||
labels: {
|
||||
style: {
|
||||
colors: "#a9a9c8",
|
||||
fontSize: "14px",
|
||||
},
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
show: true,
|
||||
strokeDashArray: 5,
|
||||
borderColor: "#EDEFF5",
|
||||
},
|
||||
tooltip: {
|
||||
x: {
|
||||
format: "dd/MM/yy HH:mm",
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
offsetY: 0,
|
||||
position: "top",
|
||||
fontSize: "14px",
|
||||
horizontalAlign: "center",
|
||||
labels: {
|
||||
colors: "#5B5B98",
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
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",
|
||||
mb: "20px",
|
||||
}}
|
||||
className="for-dark-bottom-border"
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
}}
|
||||
>
|
||||
Audience Overview
|
||||
</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: "13px" }}>
|
||||
This Week
|
||||
</MenuItem>
|
||||
<MenuItem value={2} sx={{ fontSize: "13px" }}>
|
||||
This Month
|
||||
</MenuItem>
|
||||
<MenuItem value={3} sx={{ fontSize: "13px" }}>
|
||||
This Year
|
||||
</MenuItem>
|
||||
<MenuItem value={4} sx={{ fontSize: "13px" }}>
|
||||
All Time
|
||||
</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Chart options={options} series={series} type="area" height={420} />
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default AudienceOverview;
|
||||
@@ -0,0 +1,250 @@
|
||||
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 ArrowDownwardIcon from "@mui/icons-material/ArrowDownward";
|
||||
import ArrowUpwardIcon from "@mui/icons-material/ArrowUpward";
|
||||
import dynamic from "next/dynamic";
|
||||
const Chart = dynamic(() => import("react-apexcharts"), {
|
||||
ssr: false,
|
||||
});
|
||||
|
||||
const CompletedTasks = () => {
|
||||
const [anchorEl, setAnchorEl] = React.useState(null);
|
||||
const open = Boolean(anchorEl);
|
||||
const handleClick = (event) => {
|
||||
setAnchorEl(event.currentTarget);
|
||||
};
|
||||
const handleClose = () => {
|
||||
setAnchorEl(null);
|
||||
};
|
||||
|
||||
// Chart
|
||||
const series = [
|
||||
{
|
||||
name: "Task",
|
||||
data: [21, 22, 10, 28, 16, 21, 13, 30],
|
||||
},
|
||||
];
|
||||
const options = {
|
||||
chart: {
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
events: {
|
||||
click: function (chart, w, e) {
|
||||
// console.log(chart, w, e)
|
||||
},
|
||||
},
|
||||
},
|
||||
colors: ["#2DB6F5"],
|
||||
plotOptions: {
|
||||
bar: {
|
||||
borderRadius: 5,
|
||||
borderRadiusApplication: 'end',
|
||||
horizontal: false,
|
||||
columnWidth: "20%"
|
||||
},
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
legend: {
|
||||
offsetY: 0,
|
||||
show: false,
|
||||
fontSize: "14px",
|
||||
position: "bottom",
|
||||
horizontalAlign: "center",
|
||||
labels: {
|
||||
colors: '#5B5B98'
|
||||
}
|
||||
},
|
||||
xaxis: {
|
||||
categories: [
|
||||
["1 Jan"],
|
||||
["2 Jan"],
|
||||
["3 Jan"],
|
||||
["4 Jan"],
|
||||
["5 Jan"],
|
||||
["6 Jan"],
|
||||
["7 Jan"],
|
||||
["8 Jan"],
|
||||
],
|
||||
axisBorder: {
|
||||
show: false
|
||||
},
|
||||
axisTicks: {
|
||||
show: false
|
||||
},
|
||||
labels: {
|
||||
show: false,
|
||||
style: {
|
||||
colors: "#a9a9c8",
|
||||
fontSize: "14px"
|
||||
}
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
show: false,
|
||||
labels: {
|
||||
style: {
|
||||
colors: "#a9a9c8",
|
||||
fontSize: "14px"
|
||||
},
|
||||
},
|
||||
axisBorder: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
show: false,
|
||||
strokeDashArray: 5,
|
||||
borderColor: "#EDEFF5"
|
||||
},
|
||||
fill: {
|
||||
opacity: 1,
|
||||
},
|
||||
};
|
||||
|
||||
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,
|
||||
}}
|
||||
>
|
||||
Completed Tasks
|
||||
</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" }}>Last 15 Days</MenuItem>
|
||||
<MenuItem sx={{ fontSize: "14px" }}>Last Month</MenuItem>
|
||||
<MenuItem sx={{ fontSize: "14px" }}>Last Year</MenuItem>
|
||||
</Menu>
|
||||
</Box>
|
||||
|
||||
<Chart options={options} series={series} type="bar" height={265} />
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-around",
|
||||
textAlign: "center",
|
||||
mt: "22px",
|
||||
}}
|
||||
>
|
||||
<Box>
|
||||
<Typography color="#A9A9C8" mb={1} fontSize="14px">
|
||||
Target
|
||||
</Typography>
|
||||
<Typography fontWeight="500" fontSize="18px" as="h4">
|
||||
<ArrowDownwardIcon
|
||||
color="danger"
|
||||
style={{ position: "relative", top: "3px" }}
|
||||
/>{" "}
|
||||
20k
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<Typography color="#A9A9C8" mb={1} fontSize="14px">
|
||||
Last Week
|
||||
</Typography>
|
||||
<Typography fontWeight="500" fontSize="18px" as="h4">
|
||||
<ArrowUpwardIcon
|
||||
color="success"
|
||||
style={{ position: "relative", top: "3px" }}
|
||||
/>{" "}
|
||||
5.50k
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<Typography color="#A9A9C8" mb={1} fontSize="14px">
|
||||
Last Month
|
||||
</Typography>
|
||||
<Typography fontWeight="500" fontSize="18px" as="h4">
|
||||
<ArrowUpwardIcon
|
||||
color="success"
|
||||
style={{ position: "relative", top: "3px" }}
|
||||
/>{" "}
|
||||
50k
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default CompletedTasks;
|
||||
@@ -0,0 +1,130 @@
|
||||
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",
|
||||
subTitle: "Total Orders",
|
||||
number: "1,452",
|
||||
icon: "ri-stack-line",
|
||||
badgeClass: "successBadge",
|
||||
progress: "4.87%",
|
||||
progressIcon: "ri-arrow-up-s-line",
|
||||
helpText: "Leads this month",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
subTitle: "Overall Revenue",
|
||||
number: "$28,452",
|
||||
icon: "ri-pie-chart-line",
|
||||
badgeClass: "dangerBadge",
|
||||
progress: "0.50%",
|
||||
progressIcon: "ri-arrow-down-s-line",
|
||||
helpText: "Leads this month",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
subTitle: "Average Price",
|
||||
number: "$200.5",
|
||||
icon: "ri-money-cny-box-line",
|
||||
badgeClass: "successBadge",
|
||||
progress: "2.22%",
|
||||
progressIcon: "ri-arrow-up-s-line",
|
||||
helpText: "Leads this month",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
subTitle: "Total Clients",
|
||||
number: "7,805",
|
||||
icon: "ri-user-follow-line",
|
||||
badgeClass: "successBadge",
|
||||
progress: "1.21%",
|
||||
progressIcon: "ri-arrow-up-s-line",
|
||||
helpText: "Leads this month",
|
||||
},
|
||||
];
|
||||
|
||||
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={6} lg={6} xl={3} key={feature.id}>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
mb: "10px",
|
||||
}}
|
||||
>
|
||||
<Box>
|
||||
<Typography as="p" sx={{ fontSize: 15 }}>
|
||||
{feature.subTitle}
|
||||
</Typography>
|
||||
|
||||
<Typography as="h1" sx={{ fontSize: 28, fontWeight: 700 }}>
|
||||
{feature.number}
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<i
|
||||
className={feature.icon}
|
||||
style={{
|
||||
lineHeight: "1",
|
||||
fontSize: "40px",
|
||||
color: "#a9a9c8",
|
||||
}}
|
||||
></i>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<span
|
||||
className={feature.badgeClass}
|
||||
style={{
|
||||
fontWeight: "500",
|
||||
position: "relative",
|
||||
paddingRight: "30px",
|
||||
}}
|
||||
>
|
||||
{feature.progress}{" "}
|
||||
<i
|
||||
className={`progressIcon ${feature.progressIcon}`}
|
||||
></i>
|
||||
</span>
|
||||
<Typography as="p" className="ml-10px">
|
||||
{feature.helpText}
|
||||
</Typography>
|
||||
</Box>
|
||||
</Card>
|
||||
</Grid>
|
||||
))}
|
||||
</Grid>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Features;
|
||||
@@ -0,0 +1,80 @@
|
||||
import React from "react";
|
||||
import Box from "@mui/material/Box";
|
||||
import Card from "@mui/material/Card";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import ProgressBar from "@ramonak/react-progress-bar";
|
||||
|
||||
const IncomeStatus = () => {
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
mb: "30px",
|
||||
}}
|
||||
>
|
||||
<Box>
|
||||
<i
|
||||
className="ri-money-dollar-circle-line"
|
||||
style={{
|
||||
backgroundColor: "#757fef",
|
||||
color: "#fff",
|
||||
textAlign: "center",
|
||||
position: "relative",
|
||||
borderRadius: "5px",
|
||||
fontSize: "25px",
|
||||
height: "50px",
|
||||
width: "50px",
|
||||
lineHeight: "50px",
|
||||
display: "inline-block",
|
||||
}}
|
||||
></i>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ textAlign: "right" }}>
|
||||
<Typography as="h1" sx={{ fontSize: 28, fontWeight: 700 }}>
|
||||
$31,570
|
||||
</Typography>
|
||||
<Typography as="p">Income Status</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
mb: "8px",
|
||||
}}
|
||||
>
|
||||
<Typography as="p" sx={{ fontSize: 14, fontWeight: 500 }}>
|
||||
Income Target
|
||||
</Typography>
|
||||
<Typography as="p">$180548.00</Typography>
|
||||
</Box>
|
||||
|
||||
<ProgressBar
|
||||
completed={50}
|
||||
height="5px"
|
||||
labelSize="0px"
|
||||
baseBgColor="#E9EFFC"
|
||||
bgColor="#757FEF"
|
||||
/>
|
||||
</Box>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default IncomeStatus;
|
||||
@@ -0,0 +1,20 @@
|
||||
.messagesList {
|
||||
border-bottom: 1px solid #F7FAFF;
|
||||
border-right: 2px solid transparent;
|
||||
padding-left: 12px;
|
||||
padding-right: 12px;
|
||||
padding-top: 15px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
.messagesList:hover {
|
||||
background: #FAFAFA;
|
||||
border-right: 2px solid #757FEF;
|
||||
}
|
||||
|
||||
/* For dark mode */
|
||||
[class="dark"] .messagesList {
|
||||
border-bottom: 1px solid var(--borderColor);
|
||||
}
|
||||
[class="dark"] .messagesList:hover {
|
||||
background: var(--colorBlack);
|
||||
}
|
||||
@@ -0,0 +1,270 @@
|
||||
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 Badge from "@mui/material/Badge";
|
||||
import styles from "@/components/Dashboard/SaasApp/Messages/Messages.module.css";
|
||||
|
||||
const MessagesData = [
|
||||
{
|
||||
id: "1",
|
||||
name: "Johen Mandel",
|
||||
text: "Hi, i want make enquiries...",
|
||||
image: "/images/user15.png",
|
||||
badgeBgColor: "#5570F1",
|
||||
newTag: "New",
|
||||
number: "1",
|
||||
time: "12:55 AM",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Thomas Albart",
|
||||
text: "Hi, i want make enquiries...",
|
||||
image: "/images/user16.png",
|
||||
badgeBgColor: "#a5a1a1",
|
||||
newTag: "New",
|
||||
number: "2",
|
||||
time: "6:55 AM",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Maical Doe",
|
||||
text: "Hi, i want make enquiries...",
|
||||
image: "/images/user17.png",
|
||||
badgeBgColor: "#5570F1",
|
||||
newTag: "New",
|
||||
number: "3",
|
||||
time: "8:00 AM",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Liyana doe",
|
||||
text: "Hi, i want make enquiries...",
|
||||
image: "/images/user18.png",
|
||||
badgeBgColor: "#5570F1",
|
||||
newTag: "New",
|
||||
number: "3",
|
||||
time: "8:00 AM",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Liyana doe",
|
||||
text: "Hi, i want make enquiries...",
|
||||
image: "/images/user19.png",
|
||||
badgeBgColor: "#5570F1",
|
||||
newTag: "New",
|
||||
number: "3",
|
||||
time: "8:00 AM",
|
||||
},
|
||||
];
|
||||
|
||||
const Messages = () => {
|
||||
// Dropdown
|
||||
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: "20px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
borderBottom: "1px solid #EEF0F7",
|
||||
paddingBottom: "10px",
|
||||
}}
|
||||
className="for-dark-bottom-border"
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 17,
|
||||
fontWeight: 500,
|
||||
}}
|
||||
>
|
||||
Messages
|
||||
</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" }}>Last 15 Days</MenuItem>
|
||||
<MenuItem sx={{ fontSize: "14px" }}>Last Month</MenuItem>
|
||||
<MenuItem sx={{ fontSize: "14px" }}>Last Year</MenuItem>
|
||||
</Menu>
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
{MessagesData.slice(0, 5).map((message) => (
|
||||
<div className={styles.messagesList} key={message.id}>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
position: "relative",
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
<img
|
||||
src={message.image}
|
||||
alt="User"
|
||||
width="45"
|
||||
height="45"
|
||||
className="borderRadius10"
|
||||
/>
|
||||
</div>
|
||||
<Badge
|
||||
style={{ backgroundColor: `${message.badgeBgColor}` }}
|
||||
sx={{
|
||||
width: "13px",
|
||||
height: "13px",
|
||||
position: "absolute",
|
||||
borderRadius: "100%",
|
||||
border: "2px solid #fff",
|
||||
top: "0",
|
||||
right: "-5px",
|
||||
}}
|
||||
></Badge>
|
||||
</Box>
|
||||
|
||||
<Box className="ml-1">
|
||||
<Typography
|
||||
as="h4"
|
||||
fontSize="13px"
|
||||
fontWeight="500"
|
||||
mb="5px"
|
||||
>
|
||||
{message.name}
|
||||
</Typography>
|
||||
<Typography fontSize="12px">{message.text}</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box textAlign="right">
|
||||
<Typography component="div">
|
||||
<Typography
|
||||
component="span"
|
||||
sx={{
|
||||
background: "#FEF5EA",
|
||||
color: "#260944",
|
||||
borderRadius: "8px",
|
||||
fontSize: "10px",
|
||||
padding: "2px 7px",
|
||||
display: "inline-block",
|
||||
}}
|
||||
className="mr-10px"
|
||||
>
|
||||
{message.newTag}
|
||||
</Typography>
|
||||
|
||||
<Typography
|
||||
component="span"
|
||||
sx={{
|
||||
background: "#FFCC91",
|
||||
color: "#260944",
|
||||
borderRadius: "8px",
|
||||
fontSize: "10px",
|
||||
width: "20px",
|
||||
height: "20px",
|
||||
display: "inline-block",
|
||||
lineHeight: "20px",
|
||||
textAlign: "center",
|
||||
borderRadius: "100px",
|
||||
}}
|
||||
>
|
||||
{message.number}
|
||||
</Typography>
|
||||
</Typography>
|
||||
|
||||
<Typography
|
||||
sx={{
|
||||
color: "#A9A9C8",
|
||||
fontSize: "11px",
|
||||
marginTop: "5px",
|
||||
}}
|
||||
>
|
||||
{message.time}
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
</div>
|
||||
))}
|
||||
</Box>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Messages;
|
||||
@@ -0,0 +1,122 @@
|
||||
import React, { Component } from "react";
|
||||
import { Box, Typography } from "@mui/material";
|
||||
import dynamic from "next/dynamic";
|
||||
const Chart = dynamic(() => import("react-apexcharts"), {
|
||||
ssr: false,
|
||||
});
|
||||
import ArrowDownwardIcon from "@mui/icons-material/ArrowDownward";
|
||||
import ArrowUpwardIcon from "@mui/icons-material/ArrowUpward";
|
||||
|
||||
class MilestonesOverviewChart extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
series: [44, 55, 13],
|
||||
options: {
|
||||
labels: ["Target", "Last week", "Last Month"],
|
||||
stroke: {
|
||||
width: 0,
|
||||
show: true
|
||||
},
|
||||
colors: ["#757FEF", "#90C6E0", "#E040FB"],
|
||||
legend: {
|
||||
offsetY: 0,
|
||||
show: false,
|
||||
position: "bottom",
|
||||
fontSize: "14px",
|
||||
labels: {
|
||||
colors: '#5B5B98',
|
||||
},
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
style: {
|
||||
fontSize: '14px'
|
||||
},
|
||||
dropShadow: {
|
||||
enabled: false
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
y: {
|
||||
formatter: function (val) {
|
||||
return "" + val + "k";
|
||||
},
|
||||
},
|
||||
},
|
||||
responsive: [{
|
||||
breakpoint: 480,
|
||||
options: {
|
||||
chart: {
|
||||
height: 280
|
||||
}
|
||||
}
|
||||
}]
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<>
|
||||
<Chart
|
||||
options={this.state.options}
|
||||
series={this.state.series}
|
||||
type="pie"
|
||||
height={290}
|
||||
/>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-around",
|
||||
textAlign: "center",
|
||||
mt: "30px",
|
||||
}}
|
||||
>
|
||||
<Box>
|
||||
<Typography color="#A9A9C8" mb={1} fontSize="14px">
|
||||
Target
|
||||
</Typography>
|
||||
<Typography fontWeight="500" fontSize="18px" as="h4">
|
||||
<ArrowDownwardIcon
|
||||
color="danger"
|
||||
style={{ position: "relative", top: "3px" }}
|
||||
/>{" "}
|
||||
18k
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<Typography color="#A9A9C8" mb={1} fontSize="14px">
|
||||
Last Week
|
||||
</Typography>
|
||||
<Typography fontWeight="500" fontSize="18px" as="h4">
|
||||
<ArrowUpwardIcon
|
||||
color="success"
|
||||
style={{ position: "relative", top: "3px" }}
|
||||
/>{" "}
|
||||
5.21k
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<Typography color="#A9A9C8" mb={1} fontSize="14px">
|
||||
Last Month
|
||||
</Typography>
|
||||
<Typography fontWeight="500" fontSize="18px" as="h4">
|
||||
<ArrowDownwardIcon
|
||||
color="danger"
|
||||
style={{ position: "relative", top: "3px" }}
|
||||
/>{" "}
|
||||
32k
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default MilestonesOverviewChart;
|
||||
@@ -0,0 +1,110 @@
|
||||
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 MilestonesOverviewChart from "./MilestonesOverviewChart";
|
||||
|
||||
const MilestonesOverview = () => {
|
||||
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,
|
||||
}}
|
||||
>
|
||||
Total Users
|
||||
</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' }}>Last 15 Days</MenuItem>
|
||||
<MenuItem sx={{ fontSize: '14px' }}>Last Month</MenuItem>
|
||||
<MenuItem sx={{ fontSize: '14px' }}>Last Year</MenuItem>
|
||||
</Menu>
|
||||
</Box>
|
||||
|
||||
{/* MilestonesOverviewChart */}
|
||||
<MilestonesOverviewChart />
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default MilestonesOverview;
|
||||
@@ -0,0 +1,75 @@
|
||||
import React, { Component } from "react";
|
||||
import dynamic from "next/dynamic";
|
||||
const Chart = dynamic(() => import("react-apexcharts"), {
|
||||
ssr: false,
|
||||
});
|
||||
import styles from "@/components/Dashboard/SaasApp/Profile/ImpressionShare.module.css";
|
||||
|
||||
class ImpressionShare extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
series: [45],
|
||||
options: {
|
||||
chart: {
|
||||
type: "radialBar",
|
||||
offsetY: -20,
|
||||
sparkline: {
|
||||
enabled: true,
|
||||
},
|
||||
},
|
||||
plotOptions: {
|
||||
radialBar: {
|
||||
startAngle: -110,
|
||||
endAngle: 110,
|
||||
track: {
|
||||
background: "#e7e7e7",
|
||||
strokeWidth: "90%",
|
||||
margin: 5,
|
||||
},
|
||||
dataLabels: {
|
||||
name: {
|
||||
show: false,
|
||||
},
|
||||
value: {
|
||||
offsetY: 1,
|
||||
fontSize: "15px",
|
||||
fontWeight: "600",
|
||||
color: "#5B5B98",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
padding: {
|
||||
top: -10,
|
||||
},
|
||||
},
|
||||
fill: {
|
||||
colors: ["#2DB6F5"],
|
||||
},
|
||||
labels: ["Average Results"],
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<>
|
||||
<div className={styles.chartBox}>
|
||||
<Chart
|
||||
options={this.state.options}
|
||||
series={this.state.series}
|
||||
type="radialBar"
|
||||
height={150}
|
||||
/>
|
||||
<p>Excellent</p>
|
||||
<h3>Impression Share</h3>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default ImpressionShare;
|
||||
@@ -0,0 +1,29 @@
|
||||
.chartBox {
|
||||
text-align: center;
|
||||
top: 12px;
|
||||
position: relative;
|
||||
}
|
||||
.chartBox h3 {
|
||||
margin: 0;
|
||||
color: #5B5B98;
|
||||
font-weight: 500;
|
||||
font-size: 13px;
|
||||
position: relative;
|
||||
bottom: 7px;
|
||||
}
|
||||
.chartBox p {
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 28px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: #2DB6F5;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 767px) {
|
||||
.chartBox h3 {
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,42 @@
|
||||
import React from "react";
|
||||
import Grid from "@mui/material/Grid";
|
||||
import Card from "@mui/material/Card";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import ImpressionShare from "./ImpressionShare";
|
||||
|
||||
const Profile = () => {
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px 20px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Grid container alignItems="center" rowSpacing={1} columnSpacing={{ xs: 1, sm: 2, md: 2 }}>
|
||||
<Grid item xs={6} sm={8}>
|
||||
<img
|
||||
src="/images/member10.png"
|
||||
alt="Profile image"
|
||||
style={{ width: "60px", height: "60px", marginBottom: "20px" }}
|
||||
/>
|
||||
|
||||
<Typography variant="h3" fontSize={16} fontWeight="500" mb="5px">
|
||||
Andrew Burns
|
||||
</Typography>
|
||||
|
||||
<Typography variant="p">Programmer</Typography>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={6} sm={4}>
|
||||
<ImpressionShare />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Profile;
|
||||
@@ -0,0 +1,177 @@
|
||||
import React from "react";
|
||||
import { Box } from "@mui/material";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
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";
|
||||
|
||||
const RevenueSummary = () => {
|
||||
// Select Form
|
||||
const [select, setSelect] = React.useState("");
|
||||
const handleChange = (event) => {
|
||||
setSelect(event.target.value);
|
||||
};
|
||||
|
||||
// Chart
|
||||
const series = [
|
||||
{
|
||||
name: "Revenue Summary",
|
||||
data: [2.3, 3, 4.0, 10.5, 5.6, 5, 4, 2.8, 2, 1.3, 0.8, 0.3],
|
||||
},
|
||||
];
|
||||
const options = {
|
||||
chart: {
|
||||
type: "bar",
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
borderRadius: 9,
|
||||
columnWidth: "60%",
|
||||
borderRadiusWhenStacked: "last",
|
||||
borderRadiusApplication: "around",
|
||||
dataLabels: {
|
||||
position: "top",
|
||||
},
|
||||
},
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
formatter: function (val) {
|
||||
return val + "%";
|
||||
},
|
||||
offsetY: -28,
|
||||
style: {
|
||||
colors: ["#5B5B98"],
|
||||
},
|
||||
},
|
||||
colors: ["#757fef"],
|
||||
fill: {
|
||||
opacity: 1,
|
||||
},
|
||||
xaxis: {
|
||||
categories: [
|
||||
"Jan",
|
||||
"Feb",
|
||||
"Mar",
|
||||
"Apr",
|
||||
"May",
|
||||
"Jun",
|
||||
"Jul",
|
||||
"Aug",
|
||||
"Sep",
|
||||
"Oct",
|
||||
"Nov",
|
||||
"Dec",
|
||||
],
|
||||
position: "top",
|
||||
labels: {
|
||||
style: {
|
||||
colors: "#A9A9C8",
|
||||
fontSize: "14px",
|
||||
},
|
||||
},
|
||||
axisBorder: {
|
||||
show: false,
|
||||
},
|
||||
axisTicks: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
yaxis: {
|
||||
axisBorder: {
|
||||
show: false,
|
||||
},
|
||||
axisTicks: {
|
||||
show: false,
|
||||
},
|
||||
labels: {
|
||||
show: false,
|
||||
formatter: function (val) {
|
||||
return val + "%";
|
||||
},
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
show: true,
|
||||
strokeDashArray: 5,
|
||||
borderColor: "#EDEFF5",
|
||||
},
|
||||
};
|
||||
|
||||
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,
|
||||
}}
|
||||
>
|
||||
Revenue Summary
|
||||
</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: "13px" }}>
|
||||
This Week
|
||||
</MenuItem>
|
||||
<MenuItem value={2} sx={{ fontSize: "13px" }}>
|
||||
This Month
|
||||
</MenuItem>
|
||||
<MenuItem value={3} sx={{ fontSize: "13px" }}>
|
||||
This Year
|
||||
</MenuItem>
|
||||
<MenuItem value={4} sx={{ fontSize: "13px" }}>
|
||||
All Time
|
||||
</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Chart options={options} series={series} type="bar" height={360} />
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default RevenueSummary;
|
||||
@@ -0,0 +1,181 @@
|
||||
import React from "react";
|
||||
import { Box } from "@mui/material";
|
||||
import Card from "@mui/material/Card";
|
||||
import { Typography } from "@mui/material";
|
||||
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";
|
||||
|
||||
const SalesAnalytics = () => {
|
||||
// Select Form
|
||||
const [select, setSelect] = React.useState("");
|
||||
const handleChange = (event) => {
|
||||
setSelect(event.target.value);
|
||||
};
|
||||
|
||||
// Chart
|
||||
const series = [
|
||||
{
|
||||
data: [
|
||||
{
|
||||
x: "Operations",
|
||||
y: [2800, 4500],
|
||||
},
|
||||
{
|
||||
x: "Customer Success",
|
||||
y: [3200, 4100],
|
||||
},
|
||||
{
|
||||
x: "Engineering",
|
||||
y: [2950, 7800],
|
||||
},
|
||||
{
|
||||
x: "Marketing",
|
||||
y: [3000, 4600],
|
||||
},
|
||||
{
|
||||
x: "Product",
|
||||
y: [3500, 4100],
|
||||
},
|
||||
{
|
||||
x: "Data Science",
|
||||
y: [4500, 6500],
|
||||
},
|
||||
{
|
||||
x: "Sales",
|
||||
y: [4100, 5600],
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
const options = {
|
||||
chart: {
|
||||
type: "rangeBar",
|
||||
toolbar: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
colors: ["#2DB6F5", "#757FEF"],
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: true,
|
||||
isDumbbell: true,
|
||||
dumbbellColors: [["#2DB6F5", "#757FEF"]],
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
show: false,
|
||||
},
|
||||
fill: {
|
||||
type: "gradient",
|
||||
gradient: {
|
||||
gradientToColors: ["#757FEF"],
|
||||
inverseColors: false,
|
||||
stops: [0, 100],
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
show: true,
|
||||
strokeDashArray: 5,
|
||||
borderColor: "#EDEFF5",
|
||||
},
|
||||
xaxis: {
|
||||
labels: {
|
||||
style: {
|
||||
colors: "#a9a9c8",
|
||||
fontSize: "14px",
|
||||
},
|
||||
},
|
||||
axisBorder: {
|
||||
show: false,
|
||||
},
|
||||
axisTicks: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
yaxis: {
|
||||
labels: {
|
||||
style: {
|
||||
colors: "#a9a9c8",
|
||||
fontSize: "14px",
|
||||
},
|
||||
},
|
||||
axisBorder: {
|
||||
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,
|
||||
}}
|
||||
>
|
||||
Sales Analytics
|
||||
</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: "13px" }}>
|
||||
This Week
|
||||
</MenuItem>
|
||||
<MenuItem value={2} sx={{ fontSize: "13px" }}>
|
||||
This Month
|
||||
</MenuItem>
|
||||
<MenuItem value={3} sx={{ fontSize: "13px" }}>
|
||||
This Year
|
||||
</MenuItem>
|
||||
<MenuItem value={4} sx={{ fontSize: "13px" }}>
|
||||
All Time
|
||||
</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Chart options={options} series={series} type="rangeBar" height={360} />
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default SalesAnalytics;
|
||||
@@ -0,0 +1,141 @@
|
||||
import React, { Component } from "react";
|
||||
import { Box, Typography } from "@mui/material";
|
||||
import ArrowDownwardIcon from "@mui/icons-material/ArrowDownward";
|
||||
import ArrowUpwardIcon from "@mui/icons-material/ArrowUpward";
|
||||
import dynamic from "next/dynamic";
|
||||
const Chart = dynamic(() => import("react-apexcharts"), {
|
||||
ssr: false,
|
||||
});
|
||||
|
||||
class TasksPerformanceChart extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
series: [76, 67, 61, 90],
|
||||
options: {
|
||||
plotOptions: {
|
||||
radialBar: {
|
||||
offsetY: 0,
|
||||
startAngle: 0,
|
||||
endAngle: 270,
|
||||
hollow: {
|
||||
margin: 5,
|
||||
size: "25%",
|
||||
background: "transparent",
|
||||
image: undefined,
|
||||
},
|
||||
dataLabels: {
|
||||
name: {
|
||||
show: false,
|
||||
},
|
||||
value: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
colors: ["#757FEF", "#9EA5F4", "#C8CCF9", "#F1F2FD"],
|
||||
labels: ["Completed", "Active", "Assigned", "Pending"],
|
||||
legend: {
|
||||
show: true,
|
||||
floating: true,
|
||||
fontSize: "13px",
|
||||
position: "left",
|
||||
offsetY: 0,
|
||||
labels: {
|
||||
color: "#5B5B98"
|
||||
},
|
||||
markers: {
|
||||
size: 0,
|
||||
},
|
||||
formatter: function (seriesName, opts) {
|
||||
return seriesName + ": " + opts.w.globals.series[opts.seriesIndex];
|
||||
},
|
||||
itemMargin: {
|
||||
vertical: 3,
|
||||
},
|
||||
},
|
||||
responsive: [
|
||||
{
|
||||
breakpoint: 480,
|
||||
options: {
|
||||
chart: {
|
||||
height: 280
|
||||
},
|
||||
legend: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
fill: {
|
||||
opacity: 1,
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<>
|
||||
<Chart
|
||||
options={this.state.options}
|
||||
series={this.state.series}
|
||||
type="radialBar"
|
||||
height={300}
|
||||
/>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-around",
|
||||
textAlign: "center",
|
||||
mt: "22px",
|
||||
}}
|
||||
>
|
||||
<Box>
|
||||
<Typography color="#A9A9C8" mb={1} fontSize="14px">
|
||||
Target
|
||||
</Typography>
|
||||
<Typography fontWeight="500" fontSize="18px" as="h4">
|
||||
<ArrowDownwardIcon
|
||||
color="danger"
|
||||
style={{ position: "relative", top: "3px" }}
|
||||
/>{" "}
|
||||
30k
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<Typography color="#A9A9C8" mb={1} fontSize="14px">
|
||||
Last Week
|
||||
</Typography>
|
||||
<Typography fontWeight="500" fontSize="18px" as="h4">
|
||||
<ArrowUpwardIcon
|
||||
color="success"
|
||||
style={{ position: "relative", top: "3px" }}
|
||||
/>{" "}
|
||||
40k
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<Typography color="#A9A9C8" mb={1} fontSize="14px">
|
||||
Last Month
|
||||
</Typography>
|
||||
<Typography fontWeight="500" fontSize="18px" as="h4">
|
||||
<ArrowUpwardIcon
|
||||
color="success"
|
||||
style={{ position: "relative", top: "3px" }}
|
||||
/>{" "}
|
||||
60k
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default TasksPerformanceChart;
|
||||
@@ -0,0 +1,110 @@
|
||||
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 TasksPerformanceChart from "./TasksPerformanceChart";
|
||||
|
||||
const TasksPerformance = () => {
|
||||
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,
|
||||
}}
|
||||
>
|
||||
Tasks Performance
|
||||
</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" }}>Last 15 Days</MenuItem>
|
||||
<MenuItem sx={{ fontSize: "14px" }}>Last Month</MenuItem>
|
||||
<MenuItem sx={{ fontSize: "14px" }}>Last Year</MenuItem>
|
||||
</Menu>
|
||||
</Box>
|
||||
|
||||
{/* TasksPerformanceChart */}
|
||||
<TasksPerformanceChart />
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default TasksPerformance;
|
||||
@@ -0,0 +1,80 @@
|
||||
import React from "react";
|
||||
import Box from "@mui/material/Box";
|
||||
import Card from "@mui/material/Card";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import ProgressBar from "@ramonak/react-progress-bar";
|
||||
|
||||
const TotalOrders = () => {
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
mb: "30px",
|
||||
}}
|
||||
>
|
||||
<Box>
|
||||
<i
|
||||
className="ri-bar-chart-fill"
|
||||
style={{
|
||||
backgroundColor: "#757fef",
|
||||
color: "#fff",
|
||||
textAlign: "center",
|
||||
position: "relative",
|
||||
borderRadius: "5px",
|
||||
fontSize: "25px",
|
||||
height: "50px",
|
||||
width: "50px",
|
||||
lineHeight: "50px",
|
||||
display: "inline-block",
|
||||
}}
|
||||
></i>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ textAlign: "right" }}>
|
||||
<Typography as="h1" sx={{ fontSize: 28, fontWeight: 700 }}>
|
||||
40,178
|
||||
</Typography>
|
||||
<Typography as="p">Total Orders</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
mb: "8px",
|
||||
}}
|
||||
>
|
||||
<Typography as="p" sx={{ fontSize: 14, fontWeight: 500 }}>
|
||||
Order Target
|
||||
</Typography>
|
||||
<Typography as="p">30,40548.00</Typography>
|
||||
</Box>
|
||||
|
||||
<ProgressBar
|
||||
completed={70}
|
||||
height="5px"
|
||||
labelSize="0px"
|
||||
baseBgColor="#E9EFFC"
|
||||
bgColor="#757FEF"
|
||||
/>
|
||||
</Box>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default TotalOrders;
|
||||
Reference in New Issue
Block a user