first commit
This commit is contained in:
DESKTOP-GBA0BK8\Admin
@@ -0,0 +1,10 @@
|
||||
.members {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
.members img {
|
||||
border-radius: 100%;
|
||||
border: 2px solid #fff;
|
||||
margin-left: -6px;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,420 @@
|
||||
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 Checkbox from '@mui/material/Checkbox';
|
||||
import Tooltip from "@mui/material/Tooltip";
|
||||
import DeleteIcon from "@mui/icons-material/Delete";
|
||||
import DriveFileRenameOutlineIcon from "@mui/icons-material/DriveFileRenameOutline";
|
||||
import Avatar from '@mui/material/Avatar';
|
||||
import AvatarGroup from '@mui/material/AvatarGroup';
|
||||
const label = { inputProps: { 'aria-label': 'Checkbox demo' } };
|
||||
|
||||
const newProjects = [
|
||||
{
|
||||
id: 1,
|
||||
projectName: "Mobile App Development",
|
||||
category: "Mobile App",
|
||||
totalTask: "10/50",
|
||||
teamMembers: [
|
||||
{
|
||||
id: 1,
|
||||
image: "/images/member1.png",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
image: "/images/member2.png",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
image: "/images/member3.png",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
image: "/images/member4.png",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
image: "/images/member5.png",
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
image: "/images/member6.png",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
projectName: "Web Development",
|
||||
category: "React JS",
|
||||
totalTask: "50/100",
|
||||
teamMembers: [
|
||||
{
|
||||
id: 7,
|
||||
image: "/images/member5.png",
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
image: "/images/member6.png",
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
image: "/images/member7.png",
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
image: "/images/member8.png",
|
||||
},
|
||||
{
|
||||
id: 11,
|
||||
image: "/images/member9.png",
|
||||
},
|
||||
{
|
||||
id: 12,
|
||||
image: "/images/member10.png",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
projectName: "E-Commerce Development",
|
||||
category: "React JS",
|
||||
totalTask: "60/100",
|
||||
teamMembers: [
|
||||
{
|
||||
id: 6,
|
||||
image: "/images/member1.png",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
image: "/images/member2.png",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
image: "/images/member3.png",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
image: "/images/member4.png",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
image: "/images/member5.png",
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
image: "/images/member6.png",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
projectName: "Digital Marketing",
|
||||
category: "SEO",
|
||||
totalTask: "10/50",
|
||||
teamMembers: [
|
||||
{
|
||||
id: 5,
|
||||
image: "/images/member4.png",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
image: "/images/member6.png",
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
image: "/images/member12.png",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
image: "/images/member13.png",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
image: "/images/member5.png",
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
image: "/images/member3.png",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
projectName: "WordPress Development",
|
||||
category: "WordPress",
|
||||
totalTask: "45/100",
|
||||
teamMembers: [
|
||||
{
|
||||
id: 1,
|
||||
image: "/images/member8.png",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
image: "/images/member9.png",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
image: "/images/member10.png",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
image: "/images/member11.png",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
image: "/images/member12.png",
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
image: "/images/member13.png",
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
const InReview = () => {
|
||||
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",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
}}
|
||||
>
|
||||
In Review
|
||||
</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' }}>Create Project</MenuItem>
|
||||
<MenuItem sx={{ fontSize: '14px' }}>Open Project</MenuItem>
|
||||
<MenuItem sx={{ fontSize: '14px' }}>Overview</MenuItem>
|
||||
</Menu>
|
||||
</Box>
|
||||
|
||||
{/* Card */}
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
mb: '20px'
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
width: "58px",
|
||||
height: "58px",
|
||||
lineHeight: "58px",
|
||||
background: "#757FEF",
|
||||
color: "#fff",
|
||||
fontSize: "30px",
|
||||
borderRadius: "8px",
|
||||
textAlign: "center",
|
||||
}}
|
||||
className='mr-10px'
|
||||
>
|
||||
<i className="ri-sound-module-line"></i>
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<Typography
|
||||
variant="h1"
|
||||
sx={{ fontSize: 25, fontWeight: 700, marginBottom: '4px' }}
|
||||
>
|
||||
55
|
||||
</Typography>
|
||||
|
||||
<Typography sx={{ fontSize: "13px" }}>
|
||||
Added: 13 Projects this month
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<span
|
||||
className="dangerBadge"
|
||||
style={{ fontSize: "13px" }}
|
||||
>
|
||||
5.80%
|
||||
<i
|
||||
className="ri-arrow-down-s-fill"
|
||||
style={{
|
||||
fontSize: "13px",
|
||||
position: "relative",
|
||||
top: "2px",
|
||||
lineHeight: "1",
|
||||
fontWight: "bold",
|
||||
}}
|
||||
></i>
|
||||
</span>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* Card */}
|
||||
{newProjects.map((project) => (
|
||||
<Box
|
||||
sx={{
|
||||
background: '#F7F8F7',
|
||||
borderRadius: '15px',
|
||||
p: '20px 15px',
|
||||
mt: '15px'
|
||||
}}
|
||||
key={project.id}
|
||||
className="dark-BG-101010"
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
mb: '20px'
|
||||
}}
|
||||
>
|
||||
<Checkbox {...label} />
|
||||
|
||||
<Box>
|
||||
<Tooltip title="Remove" placement="top">
|
||||
<IconButton
|
||||
aria-label="remove"
|
||||
size="small"
|
||||
color="danger"
|
||||
sx={{
|
||||
background: '#fff',
|
||||
ml: '5px'
|
||||
}}
|
||||
>
|
||||
<DeleteIcon fontSize="inherit" />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip title="Rename" placement="top">
|
||||
<IconButton
|
||||
aria-label="rename"
|
||||
size="small"
|
||||
color="primary"
|
||||
sx={{
|
||||
background: '#fff',
|
||||
ml: '5px'
|
||||
}}
|
||||
>
|
||||
<DriveFileRenameOutlineIcon fontSize="inherit" />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Typography as="h6" fontSize="14px" fontWeight="500" mb="5px">
|
||||
{project.projectName}
|
||||
</Typography>
|
||||
|
||||
<Typography fontSize="13px">
|
||||
{project.category}
|
||||
</Typography>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
mt: '15px'
|
||||
}}
|
||||
>
|
||||
<Typography>
|
||||
{project.totalTask}
|
||||
</Typography>
|
||||
|
||||
<AvatarGroup max={4}>
|
||||
{project.teamMembers.map((member) => (
|
||||
<Avatar key={member.id} src={member.image} alt="Member" />
|
||||
))}
|
||||
</AvatarGroup>
|
||||
</Box>
|
||||
</Box>
|
||||
))}
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default InReview;
|
||||
@@ -0,0 +1,420 @@
|
||||
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 Checkbox from '@mui/material/Checkbox';
|
||||
import Tooltip from "@mui/material/Tooltip";
|
||||
import DeleteIcon from "@mui/icons-material/Delete";
|
||||
import DriveFileRenameOutlineIcon from "@mui/icons-material/DriveFileRenameOutline";
|
||||
import Avatar from '@mui/material/Avatar';
|
||||
import AvatarGroup from '@mui/material/AvatarGroup';
|
||||
const label = { inputProps: { 'aria-label': 'Checkbox demo' } };
|
||||
|
||||
const newProjects = [
|
||||
{
|
||||
id: 1,
|
||||
projectName: "Mobile App Development",
|
||||
category: "Mobile App",
|
||||
totalTask: "10/50",
|
||||
teamMembers: [
|
||||
{
|
||||
id: 1,
|
||||
image: "/images/member1.png",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
image: "/images/member2.png",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
image: "/images/member3.png",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
image: "/images/member4.png",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
image: "/images/member5.png",
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
image: "/images/member6.png",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
projectName: "Web Development",
|
||||
category: "React JS",
|
||||
totalTask: "50/100",
|
||||
teamMembers: [
|
||||
{
|
||||
id: 7,
|
||||
image: "/images/member5.png",
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
image: "/images/member6.png",
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
image: "/images/member7.png",
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
image: "/images/member8.png",
|
||||
},
|
||||
{
|
||||
id: 11,
|
||||
image: "/images/member9.png",
|
||||
},
|
||||
{
|
||||
id: 12,
|
||||
image: "/images/member10.png",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
projectName: "E-Commerce Development",
|
||||
category: "React JS",
|
||||
totalTask: "60/100",
|
||||
teamMembers: [
|
||||
{
|
||||
id: 6,
|
||||
image: "/images/member1.png",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
image: "/images/member2.png",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
image: "/images/member3.png",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
image: "/images/member4.png",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
image: "/images/member5.png",
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
image: "/images/member6.png",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
projectName: "Digital Marketing",
|
||||
category: "SEO",
|
||||
totalTask: "10/50",
|
||||
teamMembers: [
|
||||
{
|
||||
id: 5,
|
||||
image: "/images/member4.png",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
image: "/images/member6.png",
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
image: "/images/member12.png",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
image: "/images/member13.png",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
image: "/images/member5.png",
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
image: "/images/member3.png",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
projectName: "WordPress Development",
|
||||
category: "WordPress",
|
||||
totalTask: "45/100",
|
||||
teamMembers: [
|
||||
{
|
||||
id: 1,
|
||||
image: "/images/member8.png",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
image: "/images/member9.png",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
image: "/images/member10.png",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
image: "/images/member11.png",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
image: "/images/member12.png",
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
image: "/images/member13.png",
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
const NewProjects = () => {
|
||||
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",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
}}
|
||||
>
|
||||
New Projects
|
||||
</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' }}>Create Project</MenuItem>
|
||||
<MenuItem sx={{ fontSize: '14px' }}>Open Project</MenuItem>
|
||||
<MenuItem sx={{ fontSize: '14px' }}>Overview</MenuItem>
|
||||
</Menu>
|
||||
</Box>
|
||||
|
||||
{/* Card */}
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
mb: '20px'
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
width: "58px",
|
||||
height: "58px",
|
||||
lineHeight: "58px",
|
||||
background: "#757FEF",
|
||||
color: "#fff",
|
||||
fontSize: "30px",
|
||||
borderRadius: "8px",
|
||||
textAlign: "center",
|
||||
}}
|
||||
className='mr-10px'
|
||||
>
|
||||
<i className="ri-pie-chart-2-line"></i>
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<Typography
|
||||
variant="h1"
|
||||
sx={{ fontSize: 25, fontWeight: 700, marginBottom: '4px' }}
|
||||
>
|
||||
41
|
||||
</Typography>
|
||||
|
||||
<Typography sx={{ fontSize: "13px" }}>
|
||||
Added: 13 Projects this month
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<span
|
||||
className="successBadge"
|
||||
style={{ fontSize: "13px" }}
|
||||
>
|
||||
5.80%
|
||||
<i
|
||||
className="ri-arrow-up-s-fill"
|
||||
style={{
|
||||
fontSize: "13px",
|
||||
position: "relative",
|
||||
top: "2px",
|
||||
lineHeight: "1",
|
||||
fontWight: "bold",
|
||||
}}
|
||||
></i>
|
||||
</span>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* Card */}
|
||||
{newProjects.map((project) => (
|
||||
<Box
|
||||
sx={{
|
||||
background: '#F7F8F7',
|
||||
borderRadius: '15px',
|
||||
p: '20px 15px',
|
||||
mt: '15px'
|
||||
}}
|
||||
key={project.id}
|
||||
className="dark-BG-101010"
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
mb: '20px'
|
||||
}}
|
||||
>
|
||||
<Checkbox {...label} />
|
||||
|
||||
<Box>
|
||||
<Tooltip title="Remove" placement="top">
|
||||
<IconButton
|
||||
aria-label="remove"
|
||||
size="small"
|
||||
color="danger"
|
||||
sx={{
|
||||
background: '#fff',
|
||||
ml: '5px'
|
||||
}}
|
||||
>
|
||||
<DeleteIcon fontSize="inherit" />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip title="Rename" placement="top">
|
||||
<IconButton
|
||||
aria-label="rename"
|
||||
size="small"
|
||||
color="primary"
|
||||
sx={{
|
||||
background: '#fff',
|
||||
ml: '5px'
|
||||
}}
|
||||
>
|
||||
<DriveFileRenameOutlineIcon fontSize="inherit" />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Typography as="h6" fontSize="14px" fontWeight="500" mb="5px">
|
||||
{project.projectName}
|
||||
</Typography>
|
||||
|
||||
<Typography fontSize="13px">
|
||||
{project.category}
|
||||
</Typography>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
mt: '15px'
|
||||
}}
|
||||
>
|
||||
<Typography>
|
||||
{project.totalTask}
|
||||
</Typography>
|
||||
|
||||
<AvatarGroup max={4}>
|
||||
{project.teamMembers.map((member) => (
|
||||
<Avatar key={member.id} src={member.image} alt="Member" />
|
||||
))}
|
||||
</AvatarGroup>
|
||||
</Box>
|
||||
</Box>
|
||||
))}
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default NewProjects;
|
||||
@@ -0,0 +1,420 @@
|
||||
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 Checkbox from '@mui/material/Checkbox';
|
||||
import Tooltip from "@mui/material/Tooltip";
|
||||
import DeleteIcon from "@mui/icons-material/Delete";
|
||||
import DriveFileRenameOutlineIcon from "@mui/icons-material/DriveFileRenameOutline";
|
||||
import Avatar from '@mui/material/Avatar';
|
||||
import AvatarGroup from '@mui/material/AvatarGroup';
|
||||
const label = { inputProps: { 'aria-label': 'Checkbox demo' } };
|
||||
|
||||
const newProjects = [
|
||||
{
|
||||
id: 1,
|
||||
projectName: "Mobile App Development",
|
||||
category: "Mobile App",
|
||||
totalTask: "10/50",
|
||||
teamMembers: [
|
||||
{
|
||||
id: 1,
|
||||
image: "/images/member1.png",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
image: "/images/member2.png",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
image: "/images/member3.png",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
image: "/images/member4.png",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
image: "/images/member5.png",
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
image: "/images/member6.png",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
projectName: "Web Development",
|
||||
category: "React JS",
|
||||
totalTask: "50/100",
|
||||
teamMembers: [
|
||||
{
|
||||
id: 7,
|
||||
image: "/images/member5.png",
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
image: "/images/member6.png",
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
image: "/images/member7.png",
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
image: "/images/member8.png",
|
||||
},
|
||||
{
|
||||
id: 11,
|
||||
image: "/images/member9.png",
|
||||
},
|
||||
{
|
||||
id: 12,
|
||||
image: "/images/member10.png",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
projectName: "E-Commerce Development",
|
||||
category: "React JS",
|
||||
totalTask: "60/100",
|
||||
teamMembers: [
|
||||
{
|
||||
id: 6,
|
||||
image: "/images/member1.png",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
image: "/images/member2.png",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
image: "/images/member3.png",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
image: "/images/member4.png",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
image: "/images/member5.png",
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
image: "/images/member6.png",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
projectName: "Digital Marketing",
|
||||
category: "SEO",
|
||||
totalTask: "10/50",
|
||||
teamMembers: [
|
||||
{
|
||||
id: 5,
|
||||
image: "/images/member4.png",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
image: "/images/member6.png",
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
image: "/images/member12.png",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
image: "/images/member13.png",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
image: "/images/member5.png",
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
image: "/images/member3.png",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
projectName: "WordPress Development",
|
||||
category: "WordPress",
|
||||
totalTask: "45/100",
|
||||
teamMembers: [
|
||||
{
|
||||
id: 1,
|
||||
image: "/images/member8.png",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
image: "/images/member9.png",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
image: "/images/member10.png",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
image: "/images/member11.png",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
image: "/images/member12.png",
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
image: "/images/member13.png",
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
const ToDo = () => {
|
||||
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",
|
||||
mb: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
as="h3"
|
||||
sx={{
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
}}
|
||||
>
|
||||
To Do
|
||||
</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' }}>Create Project</MenuItem>
|
||||
<MenuItem sx={{ fontSize: '14px' }}>Open Project</MenuItem>
|
||||
<MenuItem sx={{ fontSize: '14px' }}>Overview</MenuItem>
|
||||
</Menu>
|
||||
</Box>
|
||||
|
||||
{/* Card */}
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
mb: '20px'
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
width: "58px",
|
||||
height: "58px",
|
||||
lineHeight: "58px",
|
||||
background: "#757FEF",
|
||||
color: "#fff",
|
||||
fontSize: "30px",
|
||||
borderRadius: "8px",
|
||||
textAlign: "center",
|
||||
}}
|
||||
className='mr-10px'
|
||||
>
|
||||
<i className="ri-briefcase-line"></i>
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<Typography
|
||||
variant="h1"
|
||||
sx={{ fontSize: 25, fontWeight: 700, marginBottom: '4px' }}
|
||||
>
|
||||
50
|
||||
</Typography>
|
||||
|
||||
<Typography sx={{ fontSize: "13px" }}>
|
||||
Added: 13 Projects this month
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<span
|
||||
className="successBadge"
|
||||
style={{ fontSize: "13px" }}
|
||||
>
|
||||
5.80%
|
||||
<i
|
||||
className="ri-arrow-up-s-fill"
|
||||
style={{
|
||||
fontSize: "13px",
|
||||
position: "relative",
|
||||
top: "2px",
|
||||
lineHeight: "1",
|
||||
fontWight: "bold",
|
||||
}}
|
||||
></i>
|
||||
</span>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* Card */}
|
||||
{newProjects.map((project) => (
|
||||
<Box
|
||||
sx={{
|
||||
background: '#F7F8F7',
|
||||
borderRadius: '15px',
|
||||
p: '20px 15px',
|
||||
mt: '15px'
|
||||
}}
|
||||
key={project.id}
|
||||
className="dark-BG-101010"
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
mb: '20px'
|
||||
}}
|
||||
>
|
||||
<Checkbox {...label} />
|
||||
|
||||
<Box>
|
||||
<Tooltip title="Remove" placement="top">
|
||||
<IconButton
|
||||
aria-label="remove"
|
||||
size="small"
|
||||
color="danger"
|
||||
sx={{
|
||||
background: '#fff',
|
||||
ml: '5px'
|
||||
}}
|
||||
>
|
||||
<DeleteIcon fontSize="inherit" />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip title="Rename" placement="top">
|
||||
<IconButton
|
||||
aria-label="rename"
|
||||
size="small"
|
||||
color="primary"
|
||||
sx={{
|
||||
background: '#fff',
|
||||
ml: '5px'
|
||||
}}
|
||||
>
|
||||
<DriveFileRenameOutlineIcon fontSize="inherit" />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Typography as="h6" fontSize="14px" fontWeight="500" mb="5px">
|
||||
{project.projectName}
|
||||
</Typography>
|
||||
|
||||
<Typography fontSize="13px">
|
||||
{project.category}
|
||||
</Typography>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
mt: '15px'
|
||||
}}
|
||||
>
|
||||
<Typography>
|
||||
{project.totalTask}
|
||||
</Typography>
|
||||
|
||||
<AvatarGroup max={4}>
|
||||
{project.teamMembers.map((member) => (
|
||||
<Avatar key={member.id} src={member.image} alt="Member" />
|
||||
))}
|
||||
</AvatarGroup>
|
||||
</Box>
|
||||
</Box>
|
||||
))}
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default ToDo;
|
||||
@@ -0,0 +1,89 @@
|
||||
import * as React from "react";
|
||||
import { useTheme } from "@mui/material/styles";
|
||||
import Box from "@mui/material/Box";
|
||||
import OutlinedInput from "@mui/material/OutlinedInput";
|
||||
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 Chip from "@mui/material/Chip";
|
||||
|
||||
const ITEM_HEIGHT = 48;
|
||||
const ITEM_PADDING_TOP = 8;
|
||||
const MenuProps = {
|
||||
PaperProps: {
|
||||
style: {
|
||||
maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
|
||||
width: 250,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const names = [
|
||||
"UI/UX Design",
|
||||
"Frontend Development",
|
||||
"Backend Development",
|
||||
"React App",
|
||||
"E-commerce",
|
||||
"PSD To HTML",
|
||||
];
|
||||
|
||||
function getStyles(name, personName, theme) {
|
||||
return {
|
||||
fontWeight:
|
||||
personName.indexOf(name) === -1
|
||||
? theme.typography.fontWeightRegular
|
||||
: theme.typography.fontWeightMedium,
|
||||
};
|
||||
}
|
||||
|
||||
const Categories = () => {
|
||||
const theme = useTheme();
|
||||
const [personName, setPersonName] = React.useState([]);
|
||||
|
||||
const handleChange = (event) => {
|
||||
const {
|
||||
target: { value },
|
||||
} = event;
|
||||
setPersonName(
|
||||
// On autofill we get a stringified value.
|
||||
typeof value === "string" ? value.split(",") : value
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<FormControl fullWidth>
|
||||
<InputLabel id="demo-multiple-chip-label">Select</InputLabel>
|
||||
<Select
|
||||
labelId="demo-multiple-chip-label"
|
||||
id="demo-multiple-chip"
|
||||
multiple
|
||||
value={personName}
|
||||
onChange={handleChange}
|
||||
input={<OutlinedInput id="select-multiple-chip" label="Chip" />}
|
||||
renderValue={(selected) => (
|
||||
<Box sx={{ display: "flex", flexWrap: "wrap", gap: 0.5 }}>
|
||||
{selected.map((value) => (
|
||||
<Chip key={value} label={value} />
|
||||
))}
|
||||
</Box>
|
||||
)}
|
||||
MenuProps={MenuProps}
|
||||
>
|
||||
{names.map((name) => (
|
||||
<MenuItem
|
||||
key={name}
|
||||
value={name}
|
||||
style={getStyles(name, personName, theme)}
|
||||
>
|
||||
{name}
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Categories;
|
||||
@@ -0,0 +1,91 @@
|
||||
import * as React from 'react';
|
||||
import { useTheme } from '@mui/material/styles';
|
||||
import Box from '@mui/material/Box';
|
||||
import OutlinedInput from '@mui/material/OutlinedInput';
|
||||
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 Chip from '@mui/material/Chip';
|
||||
|
||||
const ITEM_HEIGHT = 48;
|
||||
const ITEM_PADDING_TOP = 8;
|
||||
const MenuProps = {
|
||||
PaperProps: {
|
||||
style: {
|
||||
maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
|
||||
width: 250,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const names = [
|
||||
'Oliver Hansen',
|
||||
'Van Henry',
|
||||
'April Tucker',
|
||||
'Ralph Hubbard',
|
||||
'Omar Alexander',
|
||||
'Carlos Abbott',
|
||||
'Miriam Wagner',
|
||||
'Bradley Wilkerson',
|
||||
'Virginia Andrews',
|
||||
'Kelly Snyder',
|
||||
];
|
||||
|
||||
function getStyles(name, personName, theme) {
|
||||
return {
|
||||
fontWeight:
|
||||
personName.indexOf(name) === -1
|
||||
? theme.typography.fontWeightRegular
|
||||
: theme.typography.fontWeightMedium,
|
||||
};
|
||||
}
|
||||
|
||||
export default function MemberSelect() {
|
||||
const theme = useTheme();
|
||||
const [personName, setPersonName] = React.useState([]);
|
||||
|
||||
const handleChange = (event) => {
|
||||
const {
|
||||
target: { value },
|
||||
} = event;
|
||||
setPersonName(
|
||||
// On autofill we get a stringified value.
|
||||
typeof value === 'string' ? value.split(',') : value,
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<FormControl fullWidth>
|
||||
<InputLabel id="demo-multiple-chip-label">Select</InputLabel>
|
||||
<Select
|
||||
labelId="demo-multiple-chip-label"
|
||||
id="demo-multiple-chip"
|
||||
multiple
|
||||
value={personName}
|
||||
onChange={handleChange}
|
||||
input={<OutlinedInput id="select-multiple-chip" label="Chip" />}
|
||||
renderValue={(selected) => (
|
||||
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5 }}>
|
||||
{selected.map((value) => (
|
||||
<Chip key={value} label={value} />
|
||||
))}
|
||||
</Box>
|
||||
)}
|
||||
MenuProps={MenuProps}
|
||||
>
|
||||
{names.map((name) => (
|
||||
<MenuItem
|
||||
key={name}
|
||||
value={name}
|
||||
style={getStyles(name, personName, theme)}
|
||||
>
|
||||
{name}
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,224 @@
|
||||
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: ["#757FEF"],
|
||||
plotOptions: {
|
||||
bar: {
|
||||
columnWidth: "30%",
|
||||
distributed: true,
|
||||
borderRadius: 6,
|
||||
},
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: false,
|
||||
},
|
||||
legend: {
|
||||
show: false,
|
||||
},
|
||||
xaxis: {
|
||||
categories: [
|
||||
["1 Jan"],
|
||||
["2 Jan"],
|
||||
["3 Jan"],
|
||||
["4 Jan"],
|
||||
["5 Jan"],
|
||||
["6 Jan"],
|
||||
["7 Jan"],
|
||||
["8 Jan"],
|
||||
],
|
||||
labels: {
|
||||
show: false,
|
||||
},
|
||||
axisTicks: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
yaxis: {
|
||||
show: false,
|
||||
},
|
||||
grid: {
|
||||
show: false,
|
||||
},
|
||||
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={320} />
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
textAlign: "center",
|
||||
mt: "22px",
|
||||
}}
|
||||
>
|
||||
<Box>
|
||||
<Typography color="#A9A9C8" mb={1}>
|
||||
Target
|
||||
</Typography>
|
||||
<Typography fontWeight="500" fontSize="20px" as="h4">
|
||||
<ArrowDownwardIcon
|
||||
color="danger"
|
||||
style={{ position: "relative", top: "3px" }}
|
||||
/>{" "}
|
||||
20k
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<Typography color="#A9A9C8" mb={1}>
|
||||
Last Week
|
||||
</Typography>
|
||||
<Typography fontWeight="500" fontSize="20px" as="h4">
|
||||
<ArrowUpwardIcon
|
||||
color="success"
|
||||
style={{ position: "relative", top: "3px" }}
|
||||
/>{" "}
|
||||
5.50k
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<Typography color="#A9A9C8" mb={1}>
|
||||
Last Month
|
||||
</Typography>
|
||||
<Typography fontWeight="500" fontSize="20px" as="h4">
|
||||
<ArrowUpwardIcon
|
||||
color="success"
|
||||
style={{ position: "relative", top: "3px" }}
|
||||
/>{" "}
|
||||
50k
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default CompletedTasks;
|
||||
@@ -0,0 +1,672 @@
|
||||
import React from "react";
|
||||
import { Box, Typography } from "@mui/material";
|
||||
import Card from "@mui/material/Card";
|
||||
import IconButton from "@mui/material/IconButton";
|
||||
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 Checkbox from '@mui/material/Checkbox';
|
||||
const label = { inputProps: { 'aria-label': 'Checkbox demo' } };
|
||||
import Grid from "@mui/material/Grid";
|
||||
import Button from "@mui/material/Button";
|
||||
import TextField from "@mui/material/TextField";
|
||||
import AddIcon from "@mui/icons-material/Add";
|
||||
import ClearIcon from "@mui/icons-material/Clear";
|
||||
import { styled } from '@mui/material/styles';
|
||||
import Dialog from '@mui/material/Dialog';
|
||||
import DialogTitle from '@mui/material/DialogTitle';
|
||||
import CloseIcon from '@mui/icons-material/Close';
|
||||
|
||||
// Add Task modal
|
||||
const BootstrapDialog = styled(Dialog)(({ theme }) => ({
|
||||
'& .MuiDialogContent-root': {
|
||||
padding: theme.spacing(2),
|
||||
},
|
||||
'& .MuiDialogActions-root': {
|
||||
padding: theme.spacing(1),
|
||||
},
|
||||
}));
|
||||
|
||||
function BootstrapDialogTitle(props) {
|
||||
const { children, onClose, ...other } = props;
|
||||
|
||||
return (
|
||||
<DialogTitle sx={{ m: 0, p: 2 }} {...other}>
|
||||
{children}
|
||||
{onClose ? (
|
||||
<IconButton
|
||||
aria-label="close"
|
||||
onClick={onClose}
|
||||
sx={{
|
||||
position: 'absolute',
|
||||
right: 8,
|
||||
top: 8,
|
||||
color: (theme) => theme.palette.grey[500],
|
||||
}}
|
||||
>
|
||||
<CloseIcon />
|
||||
</IconButton>
|
||||
) : null}
|
||||
</DialogTitle>
|
||||
);
|
||||
}
|
||||
|
||||
BootstrapDialogTitle.propTypes = {
|
||||
children: PropTypes.node,
|
||||
onClose: PropTypes.func.isRequired,
|
||||
};
|
||||
// End Add Task Modal
|
||||
|
||||
function MyTask(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>
|
||||
);
|
||||
}
|
||||
|
||||
MyTask.propTypes = {
|
||||
count: PropTypes.number.isRequired,
|
||||
onPageChange: PropTypes.func.isRequired,
|
||||
page: PropTypes.number.isRequired,
|
||||
rowsPerPage: PropTypes.number.isRequired,
|
||||
};
|
||||
|
||||
function createData(task, dedline, status, badgeClass, assignee, memberName) {
|
||||
return {
|
||||
task,
|
||||
dedline,
|
||||
status,
|
||||
badgeClass,
|
||||
assignee,
|
||||
memberName,
|
||||
};
|
||||
}
|
||||
|
||||
const rows = [
|
||||
createData(
|
||||
"Public Beta Release",
|
||||
"14 Feb 2022",
|
||||
"On Going",
|
||||
"successBadge",
|
||||
"/images/user1.png",
|
||||
"Wade"
|
||||
),
|
||||
createData(
|
||||
"Fix Platform Errors",
|
||||
"15 Mar 2022",
|
||||
"Completed",
|
||||
"primaryBadge",
|
||||
"/images/user2.png",
|
||||
"Dave"
|
||||
),
|
||||
createData(
|
||||
"Launch our Mobile App",
|
||||
"15 Apr 2022",
|
||||
"On Going",
|
||||
"successBadge",
|
||||
"/images/user3.png",
|
||||
"Liam"
|
||||
),
|
||||
createData(
|
||||
"Add the New Pricing Page",
|
||||
"15 May 2022",
|
||||
"Pending",
|
||||
"dangerBadge",
|
||||
"/images/user4.png",
|
||||
"Nathaniel"
|
||||
),
|
||||
createData(
|
||||
"Redesign New Online Shop",
|
||||
"15 Jun 2022",
|
||||
"On Going",
|
||||
"successBadge",
|
||||
"/images/user5.png",
|
||||
"Lewis"
|
||||
),
|
||||
createData(
|
||||
"Material Ui Design",
|
||||
"15 Jul 2022",
|
||||
"On Going",
|
||||
"successBadge",
|
||||
"/images/user6.png",
|
||||
"Milton"
|
||||
),
|
||||
createData(
|
||||
"Add Progress Track",
|
||||
"15 Mar 2022",
|
||||
"Completed",
|
||||
"primaryBadge",
|
||||
"/images/user7.png",
|
||||
"Claude"
|
||||
),
|
||||
createData(
|
||||
"Web Design",
|
||||
"15 Aug 2022",
|
||||
"On Going",
|
||||
"successBadge",
|
||||
"/images/user8.png",
|
||||
"Harvey"
|
||||
),
|
||||
createData(
|
||||
"Web Development",
|
||||
"15 Nov 2022",
|
||||
"On Going",
|
||||
"successBadge",
|
||||
"/images/user9.png",
|
||||
"Blake"
|
||||
),
|
||||
createData(
|
||||
"React App Development",
|
||||
"15 Dec 2022",
|
||||
"Completed",
|
||||
"primaryBadge",
|
||||
"/images/user10.png",
|
||||
"Antonio"
|
||||
),
|
||||
createData(
|
||||
"eCommerce Development",
|
||||
"15 Nov 2022",
|
||||
"On Going",
|
||||
"successBadge",
|
||||
"/images/user11.png",
|
||||
"Conner"
|
||||
),
|
||||
createData(
|
||||
"App Development",
|
||||
"15 Nov 2022",
|
||||
"On Going",
|
||||
"successBadge",
|
||||
"/images/user12.png",
|
||||
"Shane"
|
||||
),
|
||||
].sort((a, b) => (a.task < b.task ? -1 : 1));
|
||||
|
||||
const MyTasks = () => {
|
||||
const [page, setPage] = React.useState(0);
|
||||
const [rowsPerPage, setRowsPerPage] = React.useState(8);
|
||||
|
||||
// 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);
|
||||
};
|
||||
|
||||
// Add task modal
|
||||
const [open, setOpen] = React.useState(false);
|
||||
|
||||
const handleClickOpen = () => {
|
||||
setOpen(true);
|
||||
};
|
||||
const handleClose = () => {
|
||||
setOpen(false);
|
||||
};
|
||||
|
||||
const handleSubmit = (event) => {
|
||||
event.preventDefault();
|
||||
const data = new FormData(event.currentTarget);
|
||||
console.log({
|
||||
email: data.get("email"),
|
||||
password: data.get("password"),
|
||||
});
|
||||
};
|
||||
// End Add Task Modal
|
||||
|
||||
return (
|
||||
<>
|
||||
<Card
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
borderRadius: "10px",
|
||||
p: "25px 20px 15px",
|
||||
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,
|
||||
}}
|
||||
>
|
||||
My Tasks
|
||||
</Typography>
|
||||
|
||||
<Button
|
||||
onClick={handleClickOpen}
|
||||
variant="contained"
|
||||
sx={{
|
||||
textTransform: "capitalize",
|
||||
borderRadius: "8px",
|
||||
fontWeight: "500",
|
||||
fontSize: "13px",
|
||||
padding: "12px 20px",
|
||||
color: "#fff !important",
|
||||
}}
|
||||
>
|
||||
<AddIcon
|
||||
sx={{ position: "relative", top: "-1px" }}
|
||||
className='mr-5px'
|
||||
/>{" "}
|
||||
Add Task
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
<TableContainer
|
||||
component={Paper}
|
||||
sx={{
|
||||
boxShadow: "none",
|
||||
}}
|
||||
>
|
||||
<Table
|
||||
sx={{ minWidth: 500 }}
|
||||
aria-label="custom pagination table"
|
||||
className="dark-table"
|
||||
>
|
||||
<TableHead sx={{ background: "#F7FAFF" }}>
|
||||
<TableRow>
|
||||
<TableCell
|
||||
sx={{
|
||||
borderBottom: "1px solid #F7FAFF",
|
||||
fontSize: "13px",
|
||||
}}
|
||||
>
|
||||
Task
|
||||
</TableCell>
|
||||
<TableCell
|
||||
sx={{
|
||||
borderBottom: "1px solid #F7FAFF",
|
||||
fontSize: "13px",
|
||||
}}
|
||||
>
|
||||
Dedline
|
||||
</TableCell>
|
||||
<TableCell
|
||||
sx={{
|
||||
borderBottom: "1px solid #F7FAFF",
|
||||
fontSize: "13px",
|
||||
}}
|
||||
>
|
||||
Status
|
||||
</TableCell>
|
||||
<TableCell
|
||||
align="center"
|
||||
sx={{
|
||||
borderBottom: "1px solid #F7FAFF",
|
||||
fontSize: "13px",
|
||||
}}
|
||||
>
|
||||
Assignee
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
|
||||
<TableBody>
|
||||
{(rowsPerPage > 0
|
||||
? rows.slice(
|
||||
page * rowsPerPage,
|
||||
page * rowsPerPage + rowsPerPage
|
||||
)
|
||||
: rows
|
||||
).map((row) => (
|
||||
<TableRow key={row.task}>
|
||||
<TableCell
|
||||
sx={{
|
||||
fontWeight: "500",
|
||||
fontSize: "13px",
|
||||
borderBottom: "1px solid #F7FAFF",
|
||||
color: "#260944",
|
||||
padding: "9px 10px",
|
||||
}}
|
||||
>
|
||||
<Checkbox {...label} size="small" />
|
||||
{row.task}
|
||||
</TableCell>
|
||||
|
||||
<TableCell
|
||||
sx={{
|
||||
borderBottom: "1px solid #F7FAFF",
|
||||
padding: "9px 10px",
|
||||
}}
|
||||
>
|
||||
{row.dedline}
|
||||
</TableCell>
|
||||
|
||||
<TableCell
|
||||
align="center"
|
||||
sx={{
|
||||
fontWeight: 500,
|
||||
borderBottom: "1px solid #F7FAFF",
|
||||
fontSize: "12px",
|
||||
padding: "9px 10px",
|
||||
}}
|
||||
>
|
||||
<span className={row.badgeClass}>{row.status}</span>
|
||||
</TableCell>
|
||||
|
||||
<TableCell
|
||||
align="center"
|
||||
sx={{
|
||||
borderBottom: "1px solid #F7FAFF",
|
||||
padding: "9px 10px",
|
||||
}}
|
||||
>
|
||||
<Tooltip title={row.memberName} placement="left">
|
||||
<img
|
||||
src={row.assignee}
|
||||
alt={row.memberName}
|
||||
wisth="30px"
|
||||
height="30px"
|
||||
className="borRadius100"
|
||||
/>
|
||||
</Tooltip>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
|
||||
{emptyRows > 0 && (
|
||||
<TableRow style={{ height: 53 * emptyRows }}>
|
||||
<TableCell
|
||||
colSpan={4}
|
||||
style={{ borderBottom: "1px solid #F7FAFF" }}
|
||||
/>
|
||||
</TableRow>
|
||||
)}
|
||||
</TableBody>
|
||||
|
||||
<TableFooter>
|
||||
<TableRow>
|
||||
<TablePagination
|
||||
rowsPerPageOptions={[5, 10, 25, { label: "All", value: -1 }]}
|
||||
colSpan={8}
|
||||
count={rows.length}
|
||||
rowsPerPage={rowsPerPage}
|
||||
page={page}
|
||||
SelectProps={{
|
||||
inputProps: {
|
||||
"aria-label": "rows per page",
|
||||
},
|
||||
native: true,
|
||||
}}
|
||||
onPageChange={handleChangePage}
|
||||
onRowsPerPageChange={handleChangeRowsPerPage}
|
||||
ActionsComponent={MyTask}
|
||||
style={{ borderBottom: "none" }}
|
||||
/>
|
||||
</TableRow>
|
||||
</TableFooter>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
</Card>
|
||||
|
||||
{/* Add task modal */}
|
||||
<BootstrapDialog
|
||||
onClose={handleClose}
|
||||
aria-labelledby="customized-dialog-title"
|
||||
open={open}
|
||||
>
|
||||
<Box>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
background: "#EDEFF5",
|
||||
borderRadius: "8px",
|
||||
padding: "25px 20px",
|
||||
}}
|
||||
className="bg-black"
|
||||
>
|
||||
<Typography
|
||||
id="modal-modal-title"
|
||||
variant="h6"
|
||||
component="h2"
|
||||
sx={{
|
||||
fontWeight: "500",
|
||||
fontSize: "20px",
|
||||
}}
|
||||
>
|
||||
Add Task
|
||||
</Typography>
|
||||
|
||||
<IconButton
|
||||
aria-label="remove"
|
||||
size="small"
|
||||
onClick={handleClose}
|
||||
>
|
||||
<ClearIcon />
|
||||
</IconButton>
|
||||
</Box>
|
||||
|
||||
<Box component="form" noValidate onSubmit={handleSubmit}>
|
||||
<Box
|
||||
sx={{
|
||||
background: "#fff",
|
||||
padding: "20px 20px",
|
||||
borderRadius: "8px",
|
||||
}}
|
||||
className="dark-BG-101010"
|
||||
>
|
||||
<Grid container alignItems="center" spacing={2}>
|
||||
<Grid item xs={12} md={12} lg={6}>
|
||||
<Typography
|
||||
as="h5"
|
||||
sx={{
|
||||
fontWeight: "500",
|
||||
fontSize: "14px",
|
||||
mb: "12px",
|
||||
}}
|
||||
>
|
||||
Task
|
||||
</Typography>
|
||||
|
||||
<TextField
|
||||
autoComplete="task"
|
||||
name="task"
|
||||
required
|
||||
fullWidth
|
||||
id="task"
|
||||
label="Task"
|
||||
autoFocus
|
||||
InputProps={{
|
||||
style: { borderRadius: 8 },
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={12} lg={6}>
|
||||
<Typography
|
||||
as="h5"
|
||||
sx={{
|
||||
fontWeight: "500",
|
||||
fontSize: "14px",
|
||||
mb: "12px",
|
||||
}}
|
||||
>
|
||||
Member
|
||||
</Typography>
|
||||
|
||||
<TextField
|
||||
autoComplete="image"
|
||||
name="image"
|
||||
required
|
||||
fullWidth
|
||||
id="image"
|
||||
type="file"
|
||||
autoFocus
|
||||
InputProps={{
|
||||
style: { borderRadius: 8 },
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={12} lg={6}>
|
||||
<Typography
|
||||
as="h5"
|
||||
sx={{
|
||||
fontWeight: "500",
|
||||
fontSize: "14px",
|
||||
mb: "12px",
|
||||
}}
|
||||
>
|
||||
Dedline
|
||||
</Typography>
|
||||
|
||||
<TextField
|
||||
autoComplete="start-date"
|
||||
name="startDate"
|
||||
required
|
||||
fullWidth
|
||||
id="startDate"
|
||||
type="date"
|
||||
autoFocus
|
||||
InputProps={{
|
||||
style: { borderRadius: 8 },
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} md={12} lg={6}>
|
||||
<Typography
|
||||
as="h5"
|
||||
sx={{
|
||||
fontWeight: "500",
|
||||
fontSize: "14px",
|
||||
mb: "12px",
|
||||
}}
|
||||
>
|
||||
Status
|
||||
</Typography>
|
||||
<TextField
|
||||
autoComplete="status"
|
||||
name="status"
|
||||
required
|
||||
fullWidth
|
||||
id="status"
|
||||
label="Status"
|
||||
autoFocus
|
||||
InputProps={{
|
||||
style: { borderRadius: 8 },
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} textAlign="end">
|
||||
<Button
|
||||
type="submit"
|
||||
variant="contained"
|
||||
sx={{
|
||||
mt: 1,
|
||||
textTransform: "capitalize",
|
||||
borderRadius: "8px",
|
||||
fontWeight: "500",
|
||||
fontSize: "13px",
|
||||
padding: "12px 20px",
|
||||
color: "#fff !important",
|
||||
}}
|
||||
>
|
||||
<AddIcon
|
||||
sx={{
|
||||
position: "relative",
|
||||
top: "-2px",
|
||||
}}
|
||||
className='mr-5px'
|
||||
/>{" "}
|
||||
Add Task
|
||||
</Button>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</BootstrapDialog>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default MyTasks;
|
||||
@@ -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: "14px",
|
||||
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: {
|
||||
legend: {
|
||||
show: false,
|
||||
},
|
||||
chart: {
|
||||
height: 270
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
fill: {
|
||||
opacity: 1,
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<>
|
||||
<Chart
|
||||
options={this.state.options}
|
||||
series={this.state.series}
|
||||
type="radialBar"
|
||||
height={355}
|
||||
/>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
textAlign: "center",
|
||||
mt: "22px",
|
||||
}}
|
||||
>
|
||||
<Box>
|
||||
<Typography color="#A9A9C8" mb={1}>
|
||||
Target
|
||||
</Typography>
|
||||
<Typography fontWeight="500" fontSize="20px" as="h4">
|
||||
<ArrowDownwardIcon
|
||||
color="danger"
|
||||
style={{ position: "relative", top: "3px" }}
|
||||
/>{" "}
|
||||
30k
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<Typography color="#A9A9C8" mb={1}>
|
||||
Last Week
|
||||
</Typography>
|
||||
<Typography fontWeight="500" fontSize="20px" as="h4">
|
||||
<ArrowUpwardIcon
|
||||
color="success"
|
||||
style={{ position: "relative", top: "3px" }}
|
||||
/>{" "}
|
||||
40k
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<Typography color="#A9A9C8" mb={1}>
|
||||
Last Month
|
||||
</Typography>
|
||||
<Typography fontWeight="500" fontSize="20px" 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,121 @@
|
||||
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 TotalUsersChart extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
series: [44, 55, 13],
|
||||
options: {
|
||||
labels: ["Target", "Last week", "Last Month"],
|
||||
colors: ["#757FEF", "#90C6E0", "#E040FB"],
|
||||
legend: {
|
||||
show: false,
|
||||
},
|
||||
tooltip: {
|
||||
y: {
|
||||
formatter: function (val) {
|
||||
return "" + val + "k";
|
||||
},
|
||||
},
|
||||
},
|
||||
responsive: [{
|
||||
breakpoint: 480,
|
||||
options: {
|
||||
chart: {
|
||||
height: 270
|
||||
},
|
||||
}
|
||||
}]
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<>
|
||||
<Chart
|
||||
options={this.state.options}
|
||||
series={this.state.series}
|
||||
type="pie"
|
||||
height={350}
|
||||
/>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
textAlign: 'center',
|
||||
mt: '30px'
|
||||
}}
|
||||
>
|
||||
<Box>
|
||||
<Typography color="#A9A9C8" mb={1}>
|
||||
Target
|
||||
</Typography>
|
||||
<Typography
|
||||
fontWeight="500"
|
||||
fontSize="20px"
|
||||
as="h4"
|
||||
>
|
||||
<ArrowDownwardIcon
|
||||
color="danger"
|
||||
style={{
|
||||
position: 'relative',
|
||||
top: '3px'
|
||||
}}
|
||||
/> 18k
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<Typography color="#A9A9C8" mb={1}>
|
||||
Last Week
|
||||
</Typography>
|
||||
<Typography
|
||||
fontWeight="500"
|
||||
fontSize="20px"
|
||||
as="h4"
|
||||
>
|
||||
<ArrowUpwardIcon
|
||||
color="success"
|
||||
style={{
|
||||
position: 'relative',
|
||||
top: '3px'
|
||||
}}
|
||||
/> 5.21k
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<Typography color="#A9A9C8" mb={1}>
|
||||
Last Month
|
||||
</Typography>
|
||||
<Typography
|
||||
fontWeight="500"
|
||||
fontSize="20px"
|
||||
as="h4"
|
||||
>
|
||||
<ArrowDownwardIcon
|
||||
color="danger"
|
||||
style={{
|
||||
position: 'relative',
|
||||
top: '3px'
|
||||
}}
|
||||
/> 32k
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default TotalUsersChart;
|
||||
@@ -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 TotalUsersChart from "./TotalUsersChart";
|
||||
|
||||
const TotalUsers = () => {
|
||||
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>
|
||||
|
||||
{/* TotalUsersChart */}
|
||||
<TotalUsersChart />
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default TotalUsers;
|
||||
Reference in New Issue
Block a user