FloatSystems/float-fleet
1
0
Fork 0
Code Issues Pull Requests Releases Activity

first commit

Browse Source
This commit is contained in:
DESKTOP-GBA0BK8\Admin
2023-03-25 20:44:56 -04:00
commit 97cc85c49d
711 changed files with 109164 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/Projects/Task/TotalUsers/TotalUsersChart.js
+121
View File
@@ -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;
components/Projects/Task/TotalUsers/index.js
+110
View File
@@ -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;