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/Analytics/Reports/AvarageReport/AvarageReportList.module.css
+36
View File
@@ -0,0 +1,36 @@
.totalRevenueList {
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #F7FAFF;
margin-bottom: 13px;
padding-bottom: 13px;
}
.totalRevenueList:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
.totalRevenueList p {
font-size: 13px;
margin: 0;
}
.totalRevenueList .rightContent {
display: flex;
align-items: center;
justify-content: space-between;
}
.totalRevenueList .rightContent h5 {
margin: 0 15px 0 0;
font-size: 12px;
color: #5B5B98;
}
.totalRevenueList .rightContent i {
position: relative;
top: 2px;
}
/* For dark mode */
[class="dark"] .totalRevenueList {
border-bottom: 1px solid var(--borderColor);
}
components/Analytics/Reports/AvarageReport/RevenueChart.js
+59
View File
@@ -0,0 +1,59 @@
import React, { Component } from 'react';
import dynamic from "next/dynamic";
const Chart = dynamic(() => import("react-apexcharts"), {
ssr: false,
});
class RevenueChart extends Component {
constructor(props) {
super(props);
this.state = {
series: [65],
options: {
plotOptions: {
radialBar: {
hollow: {
size: "50%",
},
track: {
background: "#ECEFF7",
},
dataLabels: {
name: {
show: true,
fontSize: '12px',
color: '#5B5B98',
},
value: {
offsetY: 3,
color: "#00B69B",
fontSize: "16px",
fontWeight: "500",
},
},
},
},
labels: ['Revenue'],
fill: {
opacity: 1,
colors: ["#757FEF"],
},
},
};
}
render() {
return (
<>
<Chart
options={this.state.options}
series={this.state.series}
height="175"
type="radialBar"
/>
</>
);
}
}
export default RevenueChart;
components/Analytics/Reports/AvarageReport/index.js
+193
View File
@@ -0,0 +1,193 @@
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 RevenueChart from "./RevenueChart";
import styles from "@/components/Analytics/Reports/AvarageReport/AvarageReportList.module.css";
const AvarageReport = () => {
const [anchorEl, setAnchorEl] = React.useState(null);
const open = Boolean(anchorEl);
const handleClick = (event) => {
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
return (
<>
<Card
sx={{
boxShadow: "none",
borderRadius: "10px",
p: "25px 20px",
mb: "15px",
}}
>
<Box
sx={{
display: "flex",
justifyContent: "space-between",
alignItems: "center",
borderBottom: "1px solid #EEF0F7",
paddingBottom: "10px",
}}
className="for-dark-bottom-border"
>
<Typography
as="h3"
sx={{
fontSize: 18,
fontWeight: 500,
}}
>
Avarage Report
</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>
{/* RevenueChart */}
<RevenueChart />
<>
<div className={styles.totalRevenueList}>
<p>Avg. Session</p>
<div className={styles.rightContent}>
<h5>972</h5>
<p>
<i className="ri-arrow-right-up-line successColor"></i> 49%
</p>
</div>
</div>
<div className={styles.totalRevenueList}>
<p>Conversion Rate</p>
<div className={styles.rightContent}>
<h5>102</h5>
<p>
<i className="ri-arrow-right-down-line dangerColor"></i> 18%
</p>
</div>
</div>
<div className={styles.totalRevenueList}>
<p>Avg. Duration</p>
<div className={styles.rightContent}>
<h5>3m</h5>
<p>
<i className="ri-arrow-right-up-line successColor"></i> 42%
</p>
</div>
</div>
<div className={styles.totalRevenueList}>
<p>Weekly Earning</p>
<div className={styles.rightContent}>
<h5>$972</h5>
<p>
<i className="ri-arrow-right-down-line dangerColor"></i> 28%
</p>
</div>
</div>
<div className={styles.totalRevenueList}>
<p>Monthly Revenue</p>
<div className={styles.rightContent}>
<h5>50k</h5>
<p>
<i className="ri-arrow-right-up-line successColor"></i> 70%
</p>
</div>
</div>
<div className={styles.totalRevenueList}>
<p>Order Rate</p>
<div className={styles.rightContent}>
<h5>1026</h5>
<p>
<i className="ri-arrow-right-down-line dangerColor"></i> 18%
</p>
</div>
</div>
<div className={styles.totalRevenueList}>
<p>Avg. Visitors</p>
<div className={styles.rightContent}>
<h5>1.5k</h5>
<p>
<i className="ri-arrow-right-up-line successColor"></i> 42%
</p>
</div>
</div>
<div className={styles.totalRevenueList}>
<p>Avg. Sales</p>
<div className={styles.rightContent}>
<h5>1250k</h5>
<p>
<i className="ri-arrow-right-down-line dangerColor"></i> 42%
</p>
</div>
</div>
</>
</Card>
</>
);
};
export default AvarageReport;