mirror of
https://github.com/Kingsrook/qqq-frontend-material-dashboard.git
synced 2025-07-17 21:00:45 +00:00
Removing unused files
This commit is contained in:
@ -1,35 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
// @mui material components
|
||||
import { styled } from "@mui/material";
|
||||
|
||||
export default styled("span")(({ theme }) => {
|
||||
const { palette, typography, functions } = theme;
|
||||
|
||||
const { white } = palette;
|
||||
const { size, fontWeightMedium } = typography;
|
||||
const { pxToRem } = functions;
|
||||
|
||||
return {
|
||||
color: white.main,
|
||||
fontSize: size.xl,
|
||||
padding: `${pxToRem(9)} ${pxToRem(6)} ${pxToRem(8)}`,
|
||||
marginLeft: pxToRem(40),
|
||||
fontWeight: fontWeightMedium,
|
||||
cursor: "pointer",
|
||||
lineHeight: 0,
|
||||
};
|
||||
});
|
||||
@ -1,48 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
// @mui material components
|
||||
import Box from "@mui/material/Box";
|
||||
import { styled, Theme } from "@mui/material";
|
||||
|
||||
export default styled(Box)(({ theme, ownerState }: { theme?: Theme; ownerState: any }) => {
|
||||
const { palette, typography, borders, functions } = theme;
|
||||
const { color } = ownerState;
|
||||
|
||||
const { white, gradients } = palette;
|
||||
const { size, fontWeightMedium } = typography;
|
||||
const { borderRadius } = borders;
|
||||
const { pxToRem, linearGradient } = functions;
|
||||
|
||||
// backgroundImage value
|
||||
const backgroundImageValue = gradients[color]
|
||||
? linearGradient(gradients[color].main, gradients[color].state)
|
||||
: linearGradient(gradients.info.main, gradients.info.state);
|
||||
|
||||
return {
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
minHeight: pxToRem(60),
|
||||
backgroundImage: backgroundImageValue,
|
||||
color: white.main,
|
||||
position: "relative",
|
||||
padding: pxToRem(16),
|
||||
marginBottom: pxToRem(16),
|
||||
borderRadius: borderRadius.md,
|
||||
fontSize: size.md,
|
||||
fontWeight: fontWeightMedium,
|
||||
};
|
||||
});
|
||||
@ -1,77 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
import { useState, ReactNode } from "react";
|
||||
|
||||
// @mui material components
|
||||
import Fade from "@mui/material/Fade";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDBox from "components/MDBox";
|
||||
|
||||
// Custom styles for the MDAlert
|
||||
import MDAlertRoot from "components/MDAlert/MDAlertRoot";
|
||||
import MDAlertCloseIcon from "components/MDAlert/MDAlertCloseIcon";
|
||||
|
||||
// Declaring props types for MDAlert
|
||||
interface Props {
|
||||
color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark";
|
||||
dismissible?: boolean;
|
||||
children: ReactNode;
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
function MDAlert({ color, dismissible, children, ...rest }: Props): JSX.Element | null {
|
||||
const [alertStatus, setAlertStatus] = useState("mount");
|
||||
|
||||
const handleAlertStatus = () => setAlertStatus("fadeOut");
|
||||
|
||||
// The base template for the alert
|
||||
const alertTemplate: any = (mount: boolean = true) => (
|
||||
<Fade in={mount} timeout={300}>
|
||||
<MDAlertRoot ownerState={{ color }} {...rest}>
|
||||
<MDBox display="flex" alignItems="center" color="white">
|
||||
{children}
|
||||
</MDBox>
|
||||
{dismissible ? (
|
||||
<MDAlertCloseIcon onClick={mount ? handleAlertStatus : undefined}>
|
||||
×
|
||||
</MDAlertCloseIcon>
|
||||
) : null}
|
||||
</MDAlertRoot>
|
||||
</Fade>
|
||||
);
|
||||
|
||||
switch (true) {
|
||||
case alertStatus === "mount":
|
||||
return alertTemplate();
|
||||
case alertStatus === "fadeOut":
|
||||
setTimeout(() => setAlertStatus("unmount"), 400);
|
||||
return alertTemplate(false);
|
||||
default:
|
||||
alertTemplate();
|
||||
break;
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
// Declaring default props for MDAlert
|
||||
MDAlert.defaultProps = {
|
||||
color: "info",
|
||||
dismissible: false,
|
||||
};
|
||||
|
||||
export default MDAlert;
|
||||
@ -1,174 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
// @mui material components
|
||||
import Box from "@mui/material/Box";
|
||||
import { styled, Theme } from "@mui/material/styles";
|
||||
|
||||
export default styled(Box)(({ theme, ownerState }: { theme?: Theme; ownerState: any }) => {
|
||||
const { palette, typography, functions, boxShadows } = theme;
|
||||
const { darkMode } = ownerState;
|
||||
|
||||
const { white, dark, light, grey, gradients, info } = palette;
|
||||
const { size, fontWeightMedium, fontWeightBold, fontWeightRegular, fontWeightLight } = typography;
|
||||
const { linearGradient, pxToRem } = functions;
|
||||
const { md } = boxShadows;
|
||||
|
||||
return {
|
||||
height: "100%",
|
||||
|
||||
"& .fc-media-screen": {
|
||||
height: "100%",
|
||||
color: dark.main,
|
||||
},
|
||||
|
||||
"& .fc-theme-standard .fc-scrollgrid": {
|
||||
border: "none",
|
||||
},
|
||||
|
||||
"& .fc-theme-standard thead tr th": {
|
||||
borderLeft: "none",
|
||||
borderRight: "none",
|
||||
},
|
||||
|
||||
"& .fc-theme-standard td, .fc-theme-standard th": {
|
||||
borderColor: light.main,
|
||||
},
|
||||
|
||||
"& .fc th": {
|
||||
textAlign: "center",
|
||||
},
|
||||
|
||||
"& .fc .fc-col-header-cell-cushion": {
|
||||
fontSize: size.sm,
|
||||
fontWeight: fontWeightMedium,
|
||||
color: darkMode ? white.main : grey[500],
|
||||
},
|
||||
|
||||
"& .fc .fc-daygrid-day-number": {
|
||||
color: darkMode ? white.main : grey[700],
|
||||
fontSize: size.sm,
|
||||
fontWeight: fontWeightLight,
|
||||
width: "100%",
|
||||
textAlign: "center",
|
||||
},
|
||||
|
||||
"& .fc-scrollgrid-section.fc-scrollgrid-section-header > td": {
|
||||
border: "none",
|
||||
},
|
||||
|
||||
"& .fc-scrollgrid-section.fc-scrollgrid-section-body.fc-scrollgrid-section-liquid > td": {
|
||||
border: "none",
|
||||
},
|
||||
|
||||
"& .fc-scrollgrid-sync-table": {
|
||||
height: "auto !important",
|
||||
},
|
||||
|
||||
"& .fc .fc-view-harness-active > .fc-view": {
|
||||
position: "static",
|
||||
height: "100%",
|
||||
},
|
||||
|
||||
"& .fc .fc-scroller-liquid-absolute": {
|
||||
position: "static",
|
||||
},
|
||||
|
||||
"& .fc-daygrid-event": {
|
||||
margin: `${pxToRem(0.5)} ${pxToRem(2)}`,
|
||||
border: "none",
|
||||
borderRadius: pxToRem(5.6),
|
||||
fontSize: size.sm,
|
||||
fontWeight: fontWeightMedium,
|
||||
},
|
||||
|
||||
"& .fc .fc-daygrid-body-unbalanced .fc-daygrid-day-events": {
|
||||
minHeight: pxToRem(32),
|
||||
},
|
||||
|
||||
"& .fc-event-title": {
|
||||
fontSize: `${size.xs} !important`,
|
||||
fontWeight: `${fontWeightRegular} !important`,
|
||||
padding: `${pxToRem(2)} ${pxToRem(4.8)} ${pxToRem(1.5)} !important`,
|
||||
},
|
||||
|
||||
"& .fc-button, .fc-today-button, .fc-button:disabled": {
|
||||
backgroundColor: `${info.main} !important`,
|
||||
borderColor: `${info.main} !important`,
|
||||
fontSize: `${size.sm} !important`,
|
||||
boxShadow: `${md} !important`,
|
||||
opacity: "1 !important",
|
||||
transition: `all 150ms ease-in`,
|
||||
|
||||
"&:hover, &:focus, &:active": {
|
||||
transform: "scale(1.02)",
|
||||
boxShadow: `${md} !important`,
|
||||
backgroundColor: `${info.main} !important`,
|
||||
borderColor: `${info.main} !important`,
|
||||
},
|
||||
},
|
||||
|
||||
"& .fc .fc-button .fc-icon": {
|
||||
fontSize: size.sm,
|
||||
},
|
||||
|
||||
"& .fc-toolbar-title": {
|
||||
fontSize: `${size.lg} !important`,
|
||||
fontWeight: `${fontWeightBold} !important`,
|
||||
color: darkMode ? white.main : dark.main,
|
||||
},
|
||||
|
||||
"& .event-primary": {
|
||||
backgroundImage: linearGradient(gradients.primary.main, gradients.primary.state),
|
||||
"& *": { color: white.main },
|
||||
},
|
||||
|
||||
"& .event-secondary": {
|
||||
backgroundImage: linearGradient(gradients.secondary.main, gradients.secondary.state),
|
||||
"& *": { color: white.main },
|
||||
},
|
||||
|
||||
"& .event-info": {
|
||||
backgroundImage: linearGradient(gradients.info.main, gradients.info.state),
|
||||
"& *": { color: white.main },
|
||||
},
|
||||
|
||||
"& .event-success": {
|
||||
backgroundImage: linearGradient(gradients.success.main, gradients.success.state),
|
||||
"& *": { color: white.main },
|
||||
},
|
||||
|
||||
"& .event-warning": {
|
||||
backgroundImage: linearGradient(gradients.warning.main, gradients.warning.state),
|
||||
"& *": { color: white.main },
|
||||
},
|
||||
|
||||
"& .event-error": {
|
||||
backgroundImage: linearGradient(gradients.error.main, gradients.error.state),
|
||||
"& *": { color: white.main },
|
||||
},
|
||||
|
||||
"& .event-light": {
|
||||
backgroundImage: linearGradient(gradients.light.main, gradients.light.state),
|
||||
|
||||
"& *": { color: dark.main },
|
||||
},
|
||||
|
||||
"& .event-dark": {
|
||||
backgroundImage: linearGradient(gradients.dark.main, gradients.dark.state),
|
||||
"& *": { color: white.main },
|
||||
},
|
||||
};
|
||||
});
|
||||
@ -1,102 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
// @fullcalendar components
|
||||
import FullCalendar from "@fullcalendar/react";
|
||||
import dayGridPlugin from "@fullcalendar/daygrid";
|
||||
import timeGridPlugin from "@fullcalendar/timegrid";
|
||||
import interactionPlugin from "@fullcalendar/interaction";
|
||||
|
||||
// @mui material components
|
||||
import Card from "@mui/material/Card";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDBox from "components/MDBox";
|
||||
import MDTypography from "components/MDTypography";
|
||||
|
||||
// Custom styles for Calendar
|
||||
import CalendarRoot from "examples/Calendar/CalendarRoot";
|
||||
|
||||
// Material Dashboard 2 PRO React context
|
||||
import { useMaterialUIController } from "context";
|
||||
|
||||
// Declaring props types for the Calender
|
||||
interface Props {
|
||||
header?: {
|
||||
title?: string;
|
||||
date?: string;
|
||||
};
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
function Calendar({ header, ...rest }: Props): JSX.Element {
|
||||
const [controller] = useMaterialUIController();
|
||||
const { darkMode } = controller;
|
||||
|
||||
const validClassNames = [
|
||||
"primary",
|
||||
"secondary",
|
||||
"info",
|
||||
"success",
|
||||
"warning",
|
||||
"error",
|
||||
"light",
|
||||
"dark",
|
||||
];
|
||||
|
||||
const events = rest.events
|
||||
? rest.events.map((el: any) => ({
|
||||
...el,
|
||||
className: validClassNames.find((item) => item === el.className)
|
||||
? `event-${el.className}`
|
||||
: "event-info",
|
||||
}))
|
||||
: [];
|
||||
|
||||
return (
|
||||
<Card sx={{ height: "100%" }}>
|
||||
<MDBox pt={header.title || header.date ? 2 : 0} px={2} lineHeight={1}>
|
||||
{header.title ? (
|
||||
<MDTypography variant="h6" fontWeight="medium" textTransform="capitalize">
|
||||
{header.title}
|
||||
</MDTypography>
|
||||
) : null}
|
||||
{header.date ? (
|
||||
<MDTypography component="p" variant="button" color="text" fontWeight="regular">
|
||||
{header.date}
|
||||
</MDTypography>
|
||||
) : null}
|
||||
</MDBox>
|
||||
<CalendarRoot p={2} ownerState={{ darkMode }}>
|
||||
<FullCalendar
|
||||
{...rest}
|
||||
plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
|
||||
events={events}
|
||||
height="100%"
|
||||
/>
|
||||
</CalendarRoot>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
// Declaring default props for Calendar
|
||||
Calendar.defaultProps = {
|
||||
header: {
|
||||
title: "",
|
||||
date: "",
|
||||
},
|
||||
};
|
||||
|
||||
export default Calendar;
|
||||
@ -1,105 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
// react-router components
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
// @mui material components
|
||||
import Card from "@mui/material/Card";
|
||||
import MuiLink from "@mui/material/Link";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDBox from "components/MDBox";
|
||||
import MDTypography from "components/MDTypography";
|
||||
import MDButton from "components/MDButton";
|
||||
|
||||
// Declaring props types for SimpleBlogCard
|
||||
interface Props {
|
||||
image: string;
|
||||
title: string;
|
||||
description: string;
|
||||
action: {
|
||||
type: "external" | "internal";
|
||||
route: string;
|
||||
color:
|
||||
| "primary"
|
||||
| "secondary"
|
||||
| "info"
|
||||
| "success"
|
||||
| "warning"
|
||||
| "error"
|
||||
| "dark"
|
||||
| "light"
|
||||
| "default";
|
||||
label: string;
|
||||
[key: string]: any;
|
||||
};
|
||||
}
|
||||
|
||||
function SimpleBlogCard({ image, title, description, action }: Props): JSX.Element {
|
||||
return (
|
||||
<Card>
|
||||
<MDBox position="relative" borderRadius="lg" mt={-3} mx={2}>
|
||||
<MDBox
|
||||
component="img"
|
||||
src={image}
|
||||
alt={title}
|
||||
borderRadius="lg"
|
||||
shadow="md"
|
||||
width="100%"
|
||||
height="100%"
|
||||
position="relative"
|
||||
zIndex={1}
|
||||
/>
|
||||
<MDBox
|
||||
borderRadius="lg"
|
||||
shadow="md"
|
||||
width="100%"
|
||||
height="100%"
|
||||
position="absolute"
|
||||
left={0}
|
||||
top="3%"
|
||||
sx={{
|
||||
backgroundImage: `url(${image})`,
|
||||
transform: "scale(0.94)",
|
||||
filter: "blur(12px)",
|
||||
backgroundSize: "cover",
|
||||
}}
|
||||
/>
|
||||
</MDBox>
|
||||
<MDBox p={3}>
|
||||
<MDTypography display="inline" variant="h3" textTransform="capitalize" fontWeight="bold">
|
||||
{title}
|
||||
</MDTypography>
|
||||
<MDBox mt={2} mb={3}>
|
||||
<MDTypography variant="body2" component="p" color="text">
|
||||
{description}
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
{action.type === "external" ? (
|
||||
<MuiLink href={action.route} target="_blank" rel="noreferrer">
|
||||
<MDButton color={action.color ? action.color : "dark"}>{action.label}</MDButton>
|
||||
</MuiLink>
|
||||
) : (
|
||||
<Link to={action.route}>
|
||||
<MDButton color={action.color ? action.color : "dark"}>{action.label}</MDButton>
|
||||
</Link>
|
||||
)}
|
||||
</MDBox>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
export default SimpleBlogCard;
|
||||
@ -1,124 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
import { ReactNode } from "react";
|
||||
|
||||
// @mui material components
|
||||
import Card from "@mui/material/Card";
|
||||
import Divider from "@mui/material/Divider";
|
||||
import Icon from "@mui/material/Icon";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDBox from "components/MDBox";
|
||||
import MDTypography from "components/MDTypography";
|
||||
|
||||
// Declaring props types for BookingCard
|
||||
interface Props {
|
||||
image: string;
|
||||
title: string;
|
||||
description: string;
|
||||
price: string;
|
||||
location: ReactNode;
|
||||
action?: ReactNode | boolean;
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
function BookingCard({ image, title, description, price, location, action }: Props): JSX.Element {
|
||||
return (
|
||||
<Card
|
||||
sx={{
|
||||
"&:hover .card-header": {
|
||||
transform: action && "translate3d(0, -50px, 0)",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<MDBox
|
||||
position="relative"
|
||||
borderRadius="lg"
|
||||
mt={-3}
|
||||
mx={2}
|
||||
className="card-header"
|
||||
sx={{ transition: "transform 300ms cubic-bezier(0.34, 1.61, 0.7, 1)" }}
|
||||
>
|
||||
<MDBox
|
||||
component="img"
|
||||
src={image}
|
||||
alt={title}
|
||||
borderRadius="lg"
|
||||
shadow="md"
|
||||
width="100%"
|
||||
height="100%"
|
||||
position="relative"
|
||||
zIndex={1}
|
||||
/>
|
||||
<MDBox
|
||||
borderRadius="lg"
|
||||
shadow="md"
|
||||
width="100%"
|
||||
height="100%"
|
||||
position="absolute"
|
||||
left={0}
|
||||
top="0"
|
||||
sx={{
|
||||
backgroundImage: `url(${image})`,
|
||||
transform: "scale(0.94)",
|
||||
filter: "blur(12px)",
|
||||
backgroundSize: "cover",
|
||||
}}
|
||||
/>
|
||||
</MDBox>
|
||||
<MDBox textAlign="center" pt={3} px={3}>
|
||||
<MDBox display="flex" justifyContent="center" alignItems="center" mt={action ? -8 : -4.25}>
|
||||
{action}
|
||||
</MDBox>
|
||||
<MDTypography variant="h5" fontWeight="regular" sx={{ mt: 4 }}>
|
||||
{title}
|
||||
</MDTypography>
|
||||
<MDTypography variant="body2" color="text" sx={{ mt: 1.5, mb: 1 }}>
|
||||
{description}
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
<Divider />
|
||||
<MDBox
|
||||
display="flex"
|
||||
justifyContent="space-between"
|
||||
alignItems="center"
|
||||
pt={0.5}
|
||||
pb={3}
|
||||
px={3}
|
||||
lineHeight={1}
|
||||
>
|
||||
<MDTypography variant="body2" fontWeight="regular" color="text">
|
||||
{price}
|
||||
</MDTypography>
|
||||
<MDBox color="text" display="flex" alignItems="center">
|
||||
<Icon color="inherit" sx={{ m: 0.5 }}>
|
||||
place
|
||||
</Icon>
|
||||
<MDTypography variant="button" fontWeight="light" color="text">
|
||||
{location}
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
// Declaring default props for BookingCard
|
||||
BookingCard.defaultProps = {
|
||||
action: false,
|
||||
};
|
||||
|
||||
export default BookingCard;
|
||||
@ -1,95 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
import { ReactNode } from "react";
|
||||
|
||||
// @mui material components
|
||||
import Card from "@mui/material/Card";
|
||||
import Switch from "@mui/material/Switch";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDBox from "components/MDBox";
|
||||
import MDTypography from "components/MDTypography";
|
||||
|
||||
// Material Dashboard 2 PRO React context
|
||||
import { useMaterialUIController } from "context";
|
||||
|
||||
// Declaring props types for ControllerCard
|
||||
interface Props {
|
||||
color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "dark";
|
||||
state?: boolean;
|
||||
icon: ReactNode;
|
||||
title: string;
|
||||
description?: string;
|
||||
onChange: () => void;
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
function ControllerCard({ color, state, icon, title, description, onChange }: Props): JSX.Element {
|
||||
const [controller] = useMaterialUIController();
|
||||
const { darkMode } = controller;
|
||||
|
||||
return (
|
||||
<Card sx={{ height: "100%", overflow: "hidden" }}>
|
||||
<MDBox
|
||||
p={3}
|
||||
height="100%"
|
||||
bgColor={state ? color : "white"}
|
||||
variant="gradient"
|
||||
display="flex"
|
||||
flexDirection="column"
|
||||
justifyContent="space-between"
|
||||
sx={({ palette: { background } }: { palette: any }) => ({
|
||||
background: darkMode && !state && background.card,
|
||||
})}
|
||||
>
|
||||
<MDBox
|
||||
display="flex"
|
||||
justifyContent="space-between"
|
||||
alignItems="center"
|
||||
mb={2}
|
||||
lineHeight={1}
|
||||
>
|
||||
<MDTypography variant="body2" color={state ? "white" : "text"}>
|
||||
{state ? "On" : "Off"}
|
||||
</MDTypography>
|
||||
<MDBox mt={-0.5} mr={-1.5}>
|
||||
<Switch checked={state} onChange={onChange} />
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
{icon}
|
||||
<MDBox mt={1} lineHeight={1}>
|
||||
<MDTypography variant="body2" color={state ? "white" : "text"} textTransform="capitalize">
|
||||
{title}
|
||||
</MDTypography>
|
||||
{description ? (
|
||||
<MDTypography variant="caption" color={state ? "white" : "text"}>
|
||||
{description}
|
||||
</MDTypography>
|
||||
) : null}
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
// Declaring default props for ControllerCard
|
||||
ControllerCard.defaultProps = {
|
||||
color: "info",
|
||||
state: false,
|
||||
description: "",
|
||||
};
|
||||
|
||||
export default ControllerCard;
|
||||
@ -1,83 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
import { ReactNode } from "react";
|
||||
|
||||
// @mui material components
|
||||
import Card from "@mui/material/Card";
|
||||
import Divider from "@mui/material/Divider";
|
||||
import Icon from "@mui/material/Icon";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDBox from "components/MDBox";
|
||||
import MDTypography from "components/MDTypography";
|
||||
|
||||
// Declaring props types for DefaultInfoCard
|
||||
interface Props {
|
||||
color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "dark";
|
||||
icon: ReactNode;
|
||||
title: string;
|
||||
description?: string;
|
||||
value?: string | number;
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
function DefaultInfoCard({ color, icon, title, description, value }: Props): JSX.Element {
|
||||
return (
|
||||
<Card>
|
||||
<MDBox p={2} mx={3} display="flex" justifyContent="center">
|
||||
<MDBox
|
||||
display="grid"
|
||||
justifyContent="center"
|
||||
alignItems="center"
|
||||
bgColor={color}
|
||||
color="white"
|
||||
width="4rem"
|
||||
height="4rem"
|
||||
shadow="md"
|
||||
borderRadius="lg"
|
||||
variant="gradient"
|
||||
>
|
||||
<Icon>{icon}</Icon>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
<MDBox pb={2} px={2} textAlign="center" lineHeight={1.25}>
|
||||
<MDTypography variant="h6" fontWeight="medium" textTransform="capitalize">
|
||||
{title}
|
||||
</MDTypography>
|
||||
{description && (
|
||||
<MDTypography variant="caption" color="text" fontWeight="regular">
|
||||
{description}
|
||||
</MDTypography>
|
||||
)}
|
||||
{description && !value ? null : <Divider />}
|
||||
{value && (
|
||||
<MDTypography variant="h5" fontWeight="medium">
|
||||
{value}
|
||||
</MDTypography>
|
||||
)}
|
||||
</MDBox>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
// Declaring default props for DefaultInfoCard
|
||||
DefaultInfoCard.defaultProps = {
|
||||
color: "info",
|
||||
value: "",
|
||||
description: "",
|
||||
};
|
||||
|
||||
export default DefaultInfoCard;
|
||||
@ -1,70 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
import { ReactNode } from "react";
|
||||
|
||||
// @mui material components
|
||||
import Card from "@mui/material/Card";
|
||||
import Icon from "@mui/material/Icon";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDBox from "components/MDBox";
|
||||
import MDTypography from "components/MDTypography";
|
||||
|
||||
interface Props {
|
||||
color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "dark";
|
||||
icon: ReactNode;
|
||||
title: ReactNode;
|
||||
description: string;
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
function MiniInfoCard({ color, icon, title, description }: Props): JSX.Element {
|
||||
return (
|
||||
<Card>
|
||||
<MDBox p={3}>
|
||||
<MDBox
|
||||
display="grid"
|
||||
justifyContent="center"
|
||||
alignItems="center"
|
||||
bgColor={color}
|
||||
color="white"
|
||||
width="3rem"
|
||||
height="3rem"
|
||||
shadow="md"
|
||||
borderRadius="lg"
|
||||
variant="gradient"
|
||||
>
|
||||
<Icon>{icon}</Icon>
|
||||
</MDBox>
|
||||
<MDBox mt={2.625}>
|
||||
<MDTypography variant="h5" fontWeight="medium" textTransform="capitalize">
|
||||
{title}
|
||||
</MDTypography>
|
||||
<MDTypography variant="body2" color="text" fontWeight="regular">
|
||||
{description}
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
// Declaring default props for MiniInfoCard
|
||||
MiniInfoCard.defaultProps = {
|
||||
color: "info",
|
||||
};
|
||||
|
||||
export default MiniInfoCard;
|
||||
@ -1,117 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
// @mui material components
|
||||
import Card from "@mui/material/Card";
|
||||
import Icon from "@mui/material/Icon";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDBox from "components/MDBox";
|
||||
import MDTypography from "components/MDTypography";
|
||||
|
||||
// Images
|
||||
import pattern from "assets/images/illustrations/pattern-tree.svg";
|
||||
import masterCardLogo from "assets/images/logos/mastercard.png";
|
||||
|
||||
interface Props {
|
||||
color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "dark";
|
||||
number: number;
|
||||
holder: string;
|
||||
expires: string;
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
function MasterCard({ color, number, holder, expires }: Props): JSX.Element {
|
||||
const numbers: string[] = [...`${number}`];
|
||||
|
||||
if (numbers.length < 16 || numbers.length > 16) {
|
||||
throw new Error(
|
||||
"Invalid value for the prop number, the value for the number prop shouldn't be greater than or less than 16 digits"
|
||||
);
|
||||
}
|
||||
|
||||
const num1 = numbers.slice(0, 4).join("");
|
||||
const num2 = numbers.slice(4, 8).join("");
|
||||
const num3 = numbers.slice(8, 12).join("");
|
||||
const num4 = numbers.slice(12, 16).join("");
|
||||
|
||||
return (
|
||||
<Card
|
||||
sx={({ palette: { gradients }, functions: { linearGradient }, boxShadows: { xl } }) => ({
|
||||
background: gradients[color]
|
||||
? linearGradient(gradients[color].main, gradients[color].state)
|
||||
: linearGradient(gradients.dark.main, gradients.dark.state),
|
||||
boxShadow: xl,
|
||||
position: "relative",
|
||||
})}
|
||||
>
|
||||
<MDBox
|
||||
position="absolute"
|
||||
top={0}
|
||||
left={0}
|
||||
width="100%"
|
||||
height="100%"
|
||||
opacity={0.2}
|
||||
sx={{
|
||||
backgroundImage: `url(${pattern})`,
|
||||
backgroundSize: "cover",
|
||||
}}
|
||||
/>
|
||||
<MDBox position="relative" zIndex={2} p={2}>
|
||||
<MDBox color="white" p={1} lineHeight={0} display="inline-block">
|
||||
<Icon>wifi</Icon>
|
||||
</MDBox>
|
||||
<MDTypography variant="h5" color="white" fontWeight="medium" sx={{ mt: 3, mb: 5, pb: 1 }}>
|
||||
{num1} {num2} {num3} {num4}
|
||||
</MDTypography>
|
||||
<MDBox display="flex" justifyContent="space-between" alignItems="center">
|
||||
<MDBox display="flex" alignItems="center">
|
||||
<MDBox mr={3} lineHeight={1}>
|
||||
<MDTypography variant="button" color="white" fontWeight="regular" opacity={0.8}>
|
||||
Card Holder
|
||||
</MDTypography>
|
||||
<MDTypography
|
||||
variant="h6"
|
||||
color="white"
|
||||
fontWeight="medium"
|
||||
textTransform="capitalize"
|
||||
>
|
||||
{holder}
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
<MDBox lineHeight={1}>
|
||||
<MDTypography variant="button" color="white" fontWeight="regular" opacity={0.8}>
|
||||
Expires
|
||||
</MDTypography>
|
||||
<MDTypography variant="h6" color="white" fontWeight="medium">
|
||||
{expires}
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
<MDBox display="flex" justifyContent="flex-end" width="20%">
|
||||
<MDBox component="img" src={masterCardLogo} alt="master card" width="60%" mt={1} />
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
// Declaring default props for MasterCard
|
||||
MasterCard.defaultProps = {
|
||||
color: "dark",
|
||||
};
|
||||
|
||||
export default MasterCard;
|
||||
@ -1,189 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
// react-router-dom components
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
// @mui material components
|
||||
import Card from "@mui/material/Card";
|
||||
import Icon from "@mui/material/Icon";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDBox from "components/MDBox";
|
||||
import MDTypography from "components/MDTypography";
|
||||
import MDButton from "components/MDButton";
|
||||
|
||||
// Declaring props types for DefaultPricingCard
|
||||
interface Props {
|
||||
color?:
|
||||
| "primary"
|
||||
| "secondary"
|
||||
| "info"
|
||||
| "success"
|
||||
| "warning"
|
||||
| "error"
|
||||
| "light"
|
||||
| "dark"
|
||||
| "white";
|
||||
badge: {
|
||||
color: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark";
|
||||
label: string;
|
||||
};
|
||||
price: {
|
||||
currency: string;
|
||||
value: string;
|
||||
type: string;
|
||||
};
|
||||
specifications: {
|
||||
label: string;
|
||||
includes?: boolean;
|
||||
}[];
|
||||
action: {
|
||||
type: "external" | "internal";
|
||||
route: string;
|
||||
label: string;
|
||||
color: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark";
|
||||
};
|
||||
shadow?: boolean;
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
function DefaultPricingCard({
|
||||
color,
|
||||
badge,
|
||||
price,
|
||||
specifications,
|
||||
action,
|
||||
shadow,
|
||||
}: Props): JSX.Element {
|
||||
const renderSpecifications = specifications.map(({ label, includes }) => (
|
||||
<MDBox key={label} display="flex" alignItems="center" p={1}>
|
||||
<MDBox
|
||||
display="flex"
|
||||
justifyContent="center"
|
||||
alignItems="center"
|
||||
width="1.5rem"
|
||||
height="1.5rem"
|
||||
mr={2}
|
||||
mt={-0.125}
|
||||
>
|
||||
<MDTypography
|
||||
variant="body1"
|
||||
color={color === "white" ? "text" : "white"}
|
||||
sx={{ lineHeight: 0 }}
|
||||
>
|
||||
<Icon>{includes ? "done" : "remove"}</Icon>
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
<MDTypography
|
||||
variant="body2"
|
||||
color={color === "white" ? "text" : "white"}
|
||||
fontWeight="regular"
|
||||
>
|
||||
{label}
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
));
|
||||
|
||||
return (
|
||||
<Card sx={{ boxShadow: ({ boxShadows: { lg } }) => (shadow ? lg : "none") }}>
|
||||
<MDBox
|
||||
bgColor={color}
|
||||
variant={color === "white" ? "contained" : "gradient"}
|
||||
borderRadius="xl"
|
||||
>
|
||||
<MDBox
|
||||
bgColor={badge.color}
|
||||
width="max-content"
|
||||
px={4}
|
||||
pt={0}
|
||||
pb={0.5}
|
||||
mx="auto"
|
||||
mt={-1.375}
|
||||
borderRadius="section"
|
||||
lineHeight={1}
|
||||
>
|
||||
<MDTypography
|
||||
variant="caption"
|
||||
textTransform="uppercase"
|
||||
fontWeight="medium"
|
||||
color={badge.color === "light" ? "dark" : "white"}
|
||||
>
|
||||
{badge.label}
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
<MDBox pt={3} pb={2} px={2} textAlign="center">
|
||||
<MDBox my={1}>
|
||||
<MDTypography variant="h1" color={color === "white" ? "dark" : "white"}>
|
||||
<MDTypography
|
||||
display="inline"
|
||||
component="small"
|
||||
variant="h5"
|
||||
color="inherit"
|
||||
verticalAlign="top"
|
||||
>
|
||||
{price.currency}
|
||||
</MDTypography>
|
||||
{price.value}
|
||||
<MDTypography display="inline" component="small" variant="h5" color="inherit">
|
||||
/{price.type}
|
||||
</MDTypography>
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
<MDBox pb={3} px={3}>
|
||||
{renderSpecifications}
|
||||
{action.type === "internal" ? (
|
||||
<MDBox mt={3}>
|
||||
<MDButton
|
||||
component={Link}
|
||||
to={action.route}
|
||||
variant="gradient"
|
||||
color={action.color}
|
||||
fullWidth
|
||||
>
|
||||
{action.label}
|
||||
<Icon sx={{ fontWeight: "bold" }}>arrow_forward</Icon>
|
||||
</MDButton>
|
||||
</MDBox>
|
||||
) : (
|
||||
<MDBox mt={3}>
|
||||
<MDButton
|
||||
component="a"
|
||||
href={action.route}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
variant="gradient"
|
||||
color={action.color}
|
||||
fullWidth
|
||||
>
|
||||
{action.label}
|
||||
<Icon sx={{ fontWeight: "bold" }}>arrow_forward</Icon>
|
||||
</MDButton>
|
||||
</MDBox>
|
||||
)}
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
// Declaring default props for DefaultPricingCard
|
||||
DefaultPricingCard.defaultProps = {
|
||||
color: "white",
|
||||
shadow: true,
|
||||
};
|
||||
|
||||
export default DefaultPricingCard;
|
||||
@ -1,155 +0,0 @@
|
||||
/* eslint-disable no-unused-vars */
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
import { ReactNode } from "react";
|
||||
|
||||
// @mui material components
|
||||
import Card from "@mui/material/Card";
|
||||
import Divider from "@mui/material/Divider";
|
||||
import Icon from "@mui/material/Icon";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDBox from "components/MDBox";
|
||||
import MDTypography from "components/MDTypography";
|
||||
import MDAvatar from "components/MDAvatar";
|
||||
|
||||
// Declaring prop types for the ComplexProjectCard
|
||||
interface Props {
|
||||
color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "dark" | "light";
|
||||
image: string;
|
||||
title: string;
|
||||
dateTime?: string;
|
||||
description: ReactNode;
|
||||
members?: string[];
|
||||
dropdown?: {
|
||||
action?: (...arg: any) => void;
|
||||
menu?: ReactNode;
|
||||
};
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
// Custom styles for ComplexProjectCard
|
||||
function ComplexProjectCard({
|
||||
color,
|
||||
image,
|
||||
title,
|
||||
dateTime,
|
||||
description,
|
||||
members,
|
||||
dropdown,
|
||||
}: Props): JSX.Element {
|
||||
const renderMembers = members.map((member, key) => {
|
||||
const memberKey = `member-${key}`;
|
||||
|
||||
return (
|
||||
<MDAvatar
|
||||
key={memberKey}
|
||||
src={member}
|
||||
alt="member profile"
|
||||
size="xs"
|
||||
sx={({ borders: { borderWidth }, palette: { white } }) => ({
|
||||
border: `${borderWidth[2]} solid ${white.main}`,
|
||||
cursor: "pointer",
|
||||
position: "relative",
|
||||
|
||||
"&:not(:first-of-type)": {
|
||||
ml: -1.25,
|
||||
},
|
||||
|
||||
"&:hover, &:focus": {
|
||||
zIndex: "10",
|
||||
},
|
||||
})}
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<MDBox p={2}>
|
||||
<MDBox display="flex" alignItems="center">
|
||||
<MDAvatar
|
||||
src={image}
|
||||
alt={title}
|
||||
size="xl"
|
||||
variant="rounded"
|
||||
bgColor={color}
|
||||
sx={{ p: 1, mt: -6, borderRadius: ({ borders: { borderRadius } }) => borderRadius.xl }}
|
||||
/>
|
||||
<MDBox ml={2} mt={-2} lineHeight={0}>
|
||||
<MDTypography variant="h6" textTransform="capitalize" fontWeight="medium">
|
||||
{title}
|
||||
</MDTypography>
|
||||
{members.length > -1 ? <MDBox display="flex">{renderMembers}</MDBox> : null}
|
||||
</MDBox>
|
||||
{dropdown && (
|
||||
<MDTypography
|
||||
color="secondary"
|
||||
onClick={dropdown.action}
|
||||
sx={{
|
||||
ml: "auto",
|
||||
mt: -1,
|
||||
alignSelf: "flex-start",
|
||||
py: 1.25,
|
||||
}}
|
||||
>
|
||||
<Icon sx={{ cursor: "pointer", fontWeight: "bold" }}>more_vert</Icon>
|
||||
</MDTypography>
|
||||
)}
|
||||
{dropdown.menu}
|
||||
</MDBox>
|
||||
<MDBox my={2} lineHeight={1}>
|
||||
<MDTypography variant="button" fontWeight="light" color="text">
|
||||
{description}
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
<Divider />
|
||||
<MDBox display="flex" justifyContent="space-between" alignItems="center">
|
||||
{members.length > -1 ? (
|
||||
<MDBox display="flex" flexDirection="column" lineHeight={0}>
|
||||
<MDTypography variant="button" fontWeight="medium">
|
||||
{members.length}
|
||||
</MDTypography>
|
||||
<MDTypography variant="button" fontWeight="regular" color="secondary">
|
||||
Participants
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
) : null}
|
||||
{dateTime ? (
|
||||
<MDBox display="flex" flexDirection="column" lineHeight={0}>
|
||||
<MDTypography variant="button" fontWeight="medium">
|
||||
{dateTime}
|
||||
</MDTypography>
|
||||
<MDTypography variant="button" fontWeight="regular" color="secondary">
|
||||
Due date
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
) : null}
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
// Declaring default props for ComplexProjectCard
|
||||
ComplexProjectCard.defaultProps = {
|
||||
color: "dark",
|
||||
dateTime: "",
|
||||
members: [],
|
||||
dropdown: false,
|
||||
};
|
||||
|
||||
export default ComplexProjectCard;
|
||||
@ -1,17 +1,23 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
/*
|
||||
* QQQ - Low-code Application Framework for Engineers.
|
||||
* Copyright (C) 2021-2022. Kingsrook, LLC
|
||||
* 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
|
||||
* contact@kingsrook.com
|
||||
* https://github.com/Kingsrook/
|
||||
*
|
||||
* This program is free software: you can redistribute it and/or modify
|
||||
* it under the terms of the GNU Affero General Public License as
|
||||
* published by the Free Software Foundation, either version 3 of the
|
||||
* License, or (at your option) any later version.
|
||||
*
|
||||
* This program is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU Affero General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU Affero General Public License
|
||||
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
// react-router-dom components
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
@ -1,97 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
import { ReactNode } from "react";
|
||||
|
||||
// @mui material components
|
||||
import Card from "@mui/material/Card";
|
||||
import Divider from "@mui/material/Divider";
|
||||
import Icon from "@mui/material/Icon";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDBox from "components/MDBox";
|
||||
import MDTypography from "components/MDTypography";
|
||||
|
||||
// Declaring props types for CompleStatisticsCard
|
||||
interface Props {
|
||||
color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark";
|
||||
title: string;
|
||||
count: string | number;
|
||||
percentage?: {
|
||||
color: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "dark" | "white";
|
||||
amount: string | number;
|
||||
label: string;
|
||||
};
|
||||
icon: ReactNode;
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
function ComplexStatisticsCard({ color, title, count, percentage, icon }: Props): JSX.Element {
|
||||
return (
|
||||
<Card>
|
||||
<MDBox display="flex" justifyContent="space-between" pt={1} px={2}>
|
||||
<MDBox
|
||||
variant="gradient"
|
||||
bgColor={color}
|
||||
color={color === "light" ? "dark" : "white"}
|
||||
coloredShadow={color}
|
||||
borderRadius="xl"
|
||||
display="flex"
|
||||
justifyContent="center"
|
||||
alignItems="center"
|
||||
width="4rem"
|
||||
height="4rem"
|
||||
mt={-3}
|
||||
>
|
||||
<Icon fontSize="medium" color="inherit">
|
||||
{icon}
|
||||
</Icon>
|
||||
</MDBox>
|
||||
<MDBox textAlign="right" lineHeight={1.25}>
|
||||
<MDTypography variant="button" fontWeight="light" color="text">
|
||||
{title}
|
||||
</MDTypography>
|
||||
<MDTypography variant="h4">{count}</MDTypography>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
<Divider />
|
||||
<MDBox pb={2} px={2}>
|
||||
<MDTypography component="p" variant="button" color="text" display="flex">
|
||||
<MDTypography
|
||||
component="span"
|
||||
variant="button"
|
||||
fontWeight="bold"
|
||||
color={percentage.color}
|
||||
>
|
||||
{percentage.amount}
|
||||
</MDTypography>
|
||||
{percentage.label}
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
// Declaring defualt props for ComplexStatisticsCard
|
||||
ComplexStatisticsCard.defaultProps = {
|
||||
color: "info",
|
||||
percentage: {
|
||||
color: "success",
|
||||
text: "",
|
||||
label: "",
|
||||
},
|
||||
};
|
||||
|
||||
export default ComplexStatisticsCard;
|
||||
@ -1,114 +0,0 @@
|
||||
/* eslint-disable no-unused-vars */
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
import { ReactNode } from "react";
|
||||
|
||||
// @mui material components
|
||||
import Card from "@mui/material/Card";
|
||||
import Grid from "@mui/material/Grid";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDBox from "components/MDBox";
|
||||
import MDTypography from "components/MDTypography";
|
||||
|
||||
// Material Dashboard 2 PRO React TS contexts
|
||||
import { useMaterialUIController } from "context";
|
||||
|
||||
// Declaring prop types for DefaultStatisticsCard
|
||||
interface Props {
|
||||
title: string;
|
||||
count: string | number;
|
||||
percentage?: {
|
||||
color: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "dark" | "white";
|
||||
value: string | number;
|
||||
label: string;
|
||||
};
|
||||
dropdown?: {
|
||||
action: (...args: any) => void;
|
||||
menu: ReactNode;
|
||||
value: string;
|
||||
};
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
function DefaultStatisticsCard({ title, count, percentage, dropdown }: Props): JSX.Element {
|
||||
const [controller] = useMaterialUIController();
|
||||
const { darkMode } = controller;
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<MDBox p={2}>
|
||||
<Grid container>
|
||||
<Grid item xs={7}>
|
||||
<MDBox mb={0.5} lineHeight={1}>
|
||||
<MDTypography
|
||||
variant="button"
|
||||
fontWeight="medium"
|
||||
color="text"
|
||||
textTransform="capitalize"
|
||||
>
|
||||
{title}
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
<MDBox lineHeight={1}>
|
||||
<MDTypography variant="h5" fontWeight="bold">
|
||||
{count}
|
||||
</MDTypography>
|
||||
<MDTypography variant="button" fontWeight="bold" color={percentage.color}>
|
||||
{percentage.value}
|
||||
<MDTypography
|
||||
variant="button"
|
||||
fontWeight="regular"
|
||||
color={darkMode ? "text" : "secondary"}
|
||||
>
|
||||
{percentage.label}
|
||||
</MDTypography>
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
</Grid>
|
||||
<Grid item xs={5}>
|
||||
{dropdown && (
|
||||
<MDBox width="100%" textAlign="right" lineHeight={1}>
|
||||
<MDTypography
|
||||
variant="caption"
|
||||
color="secondary"
|
||||
fontWeight="regular"
|
||||
sx={{ cursor: "pointer" }}
|
||||
onClick={dropdown.action}
|
||||
>
|
||||
{dropdown.value}
|
||||
</MDTypography>
|
||||
{dropdown.menu}
|
||||
</MDBox>
|
||||
)}
|
||||
</Grid>
|
||||
</Grid>
|
||||
</MDBox>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
// Setting default values for the props of DefaultStatisticsCard
|
||||
DefaultStatisticsCard.defaultProps = {
|
||||
percentage: {
|
||||
color: "success",
|
||||
value: "",
|
||||
label: "",
|
||||
},
|
||||
dropdown: false,
|
||||
};
|
||||
|
||||
export default DefaultStatisticsCard;
|
||||
@ -1,161 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
import { ReactNode } from "react";
|
||||
|
||||
// @mui material components
|
||||
import Card from "@mui/material/Card";
|
||||
import Grid from "@mui/material/Grid";
|
||||
import Icon from "@mui/material/Icon";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDBox from "components/MDBox";
|
||||
import MDTypography from "components/MDTypography";
|
||||
|
||||
// Material Dashboard 2 PRO React context
|
||||
import { useMaterialUIController } from "context";
|
||||
|
||||
// Decalaring props types for MiniStatisticsCard
|
||||
interface Props {
|
||||
bgColor?: "white" | "primary" | "secondary" | "info" | "success" | "warning" | "error" | "dark";
|
||||
title?: {
|
||||
fontWeight?: "light" | "regular" | "medium" | "bold";
|
||||
text?: string;
|
||||
};
|
||||
count: string | number;
|
||||
percentage?: {
|
||||
color: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "dark" | "white";
|
||||
text: string | number;
|
||||
};
|
||||
icon: {
|
||||
color: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "dark";
|
||||
component: ReactNode;
|
||||
};
|
||||
direction?: "right" | "left";
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
function MiniStatisticsCard({
|
||||
bgColor,
|
||||
title,
|
||||
count,
|
||||
percentage,
|
||||
icon,
|
||||
direction,
|
||||
}: Props): JSX.Element {
|
||||
const [controller] = useMaterialUIController();
|
||||
const { darkMode } = controller;
|
||||
|
||||
return (
|
||||
<Card sx={{ overflow: "hidden" }}>
|
||||
<MDBox
|
||||
bgColor={bgColor}
|
||||
variant="gradient"
|
||||
sx={({ palette: { background } }: { palette: any }) => ({
|
||||
background: darkMode && background.card,
|
||||
})}
|
||||
>
|
||||
<MDBox p={2}>
|
||||
<Grid container alignItems="center">
|
||||
{direction === "left" ? (
|
||||
<Grid item xs={4}>
|
||||
<MDBox
|
||||
variant="gradient"
|
||||
bgColor={bgColor === "white" ? icon.color : "white"}
|
||||
color={bgColor === "white" ? "white" : "dark"}
|
||||
width="4rem"
|
||||
height="4rem"
|
||||
borderRadius="md"
|
||||
display="flex"
|
||||
justifyContent="center"
|
||||
alignItems="center"
|
||||
shadow="md"
|
||||
>
|
||||
<Icon fontSize="medium" color="inherit">
|
||||
{icon.component}
|
||||
</Icon>
|
||||
</MDBox>
|
||||
</Grid>
|
||||
) : null}
|
||||
<Grid item xs={8}>
|
||||
<MDBox
|
||||
ml={direction === "left" ? 2 : 0}
|
||||
lineHeight={1}
|
||||
textAlign={direction === "left" ? "right" : "left"}
|
||||
>
|
||||
<MDTypography
|
||||
variant="button"
|
||||
color={bgColor === "white" ? "text" : "white"}
|
||||
opacity={bgColor === "white" ? 1 : 0.7}
|
||||
textTransform="capitalize"
|
||||
fontWeight={title.fontWeight}
|
||||
>
|
||||
{title.text}
|
||||
</MDTypography>
|
||||
<MDTypography
|
||||
variant="h5"
|
||||
fontWeight="bold"
|
||||
color={bgColor === "white" ? "dark" : "white"}
|
||||
>
|
||||
{count}{" "}
|
||||
<MDTypography variant="button" color={percentage.color} fontWeight="bold">
|
||||
{percentage.text}
|
||||
</MDTypography>
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
</Grid>
|
||||
{direction === "right" ? (
|
||||
<Grid item xs={4}>
|
||||
<MDBox
|
||||
variant="gradient"
|
||||
bgColor={bgColor === "white" ? icon.color : "white"}
|
||||
color={bgColor === "white" ? "white" : "dark"}
|
||||
width="4rem"
|
||||
height="4rem"
|
||||
marginLeft="auto"
|
||||
borderRadius="md"
|
||||
display="flex"
|
||||
justifyContent="center"
|
||||
alignItems="center"
|
||||
shadow="md"
|
||||
>
|
||||
<Icon fontSize="medium" color="inherit">
|
||||
{icon.component}
|
||||
</Icon>
|
||||
</MDBox>
|
||||
</Grid>
|
||||
) : null}
|
||||
</Grid>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
// Declaring default props for MiniStatisticsCard
|
||||
MiniStatisticsCard.defaultProps = {
|
||||
bgColor: "white",
|
||||
title: {
|
||||
fontWeight: "light",
|
||||
text: "",
|
||||
},
|
||||
percentage: {
|
||||
color: "success",
|
||||
text: "",
|
||||
},
|
||||
direction: "right",
|
||||
};
|
||||
|
||||
export default MiniStatisticsCard;
|
||||
@ -1,80 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
function configs(labels: any, datasets: any) {
|
||||
return {
|
||||
data: {
|
||||
labels,
|
||||
datasets: [...datasets],
|
||||
},
|
||||
options: {
|
||||
indexAxis: "y",
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
scales: {
|
||||
y: {
|
||||
grid: {
|
||||
drawBorder: false,
|
||||
display: true,
|
||||
drawOnChartArea: true,
|
||||
drawTicks: false,
|
||||
borderDash: [5, 5],
|
||||
color: "#c1c4ce5c",
|
||||
},
|
||||
ticks: {
|
||||
display: true,
|
||||
padding: 10,
|
||||
color: "#9ca2b7",
|
||||
font: {
|
||||
size: 14,
|
||||
weight: 300,
|
||||
family: "Roboto",
|
||||
style: "normal",
|
||||
lineHeight: 2,
|
||||
},
|
||||
},
|
||||
},
|
||||
x: {
|
||||
grid: {
|
||||
drawBorder: false,
|
||||
display: false,
|
||||
drawOnChartArea: true,
|
||||
drawTicks: true,
|
||||
color: "#c1c4ce5c",
|
||||
},
|
||||
ticks: {
|
||||
display: true,
|
||||
color: "#9ca2b7",
|
||||
padding: 10,
|
||||
font: {
|
||||
size: 14,
|
||||
weight: 300,
|
||||
family: "Roboto",
|
||||
style: "normal",
|
||||
lineHeight: 2,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
export default configs;
|
||||
@ -1,126 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
import { ReactNode, useMemo } from "react";
|
||||
|
||||
// react-chartjs-2 components
|
||||
import { Bar } from "react-chartjs-2";
|
||||
|
||||
// @mui material components
|
||||
import Card from "@mui/material/Card";
|
||||
import Icon from "@mui/material/Icon";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDBox from "components/MDBox";
|
||||
import MDTypography from "components/MDTypography";
|
||||
|
||||
// HorizontalBarChart configurations
|
||||
import configs from "examples/Charts/BarCharts/HorizontalBarChart/configs";
|
||||
|
||||
// Material Dashboard 2 PRO React TS Base Styles
|
||||
import colors from "assets/theme/base/colors";
|
||||
|
||||
// Declaring props types for HorizontalBarChart
|
||||
interface Props {
|
||||
icon?: {
|
||||
color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark";
|
||||
component: ReactNode;
|
||||
};
|
||||
title?: string;
|
||||
description?: string | ReactNode;
|
||||
height?: string | number;
|
||||
chart: {
|
||||
labels: string[];
|
||||
datasets: {
|
||||
label: string;
|
||||
color: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark";
|
||||
data: number[];
|
||||
}[];
|
||||
};
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
function HorizontalBarChart({ icon, title, description, height, chart }: Props): JSX.Element {
|
||||
const chartDatasets = chart.datasets
|
||||
? chart.datasets.map((dataset) => ({
|
||||
...dataset,
|
||||
weight: 5,
|
||||
borderWidth: 0,
|
||||
borderRadius: 4,
|
||||
backgroundColor: colors[dataset.color]
|
||||
? colors[dataset.color || "dark"].main
|
||||
: colors.dark.main,
|
||||
fill: false,
|
||||
maxBarThickness: 35,
|
||||
}))
|
||||
: [];
|
||||
|
||||
const { data, options } = configs(chart.labels || [], chartDatasets);
|
||||
|
||||
const renderChart = (
|
||||
<MDBox py={2} pr={2} pl={icon.component ? 1 : 2}>
|
||||
{title || description ? (
|
||||
<MDBox display="flex" px={description ? 1 : 0} pt={description ? 1 : 0}>
|
||||
{icon.component && (
|
||||
<MDBox
|
||||
width="4rem"
|
||||
height="4rem"
|
||||
bgColor={icon.color || "info"}
|
||||
variant="gradient"
|
||||
coloredShadow={icon.color || "info"}
|
||||
borderRadius="xl"
|
||||
display="flex"
|
||||
justifyContent="center"
|
||||
alignItems="center"
|
||||
color="white"
|
||||
mt={-5}
|
||||
mr={2}
|
||||
>
|
||||
<Icon fontSize="medium">{icon.component}</Icon>
|
||||
</MDBox>
|
||||
)}
|
||||
<MDBox mt={icon.component ? -2 : 0}>
|
||||
{title && <MDTypography variant="h6">{title}</MDTypography>}
|
||||
<MDBox mb={2}>
|
||||
<MDTypography component="div" variant="button" color="text">
|
||||
{description}
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
) : null}
|
||||
{useMemo(
|
||||
() => (
|
||||
<MDBox height={height}>
|
||||
<Bar data={data} options={options} />
|
||||
</MDBox>
|
||||
),
|
||||
[chart, height]
|
||||
)}
|
||||
</MDBox>
|
||||
);
|
||||
|
||||
return title || description ? <Card>{renderChart}</Card> : renderChart;
|
||||
}
|
||||
|
||||
// Declaring default props HorizontalBarChart
|
||||
HorizontalBarChart.defaultProps = {
|
||||
icon: { color: "info", component: "" },
|
||||
title: "",
|
||||
description: "",
|
||||
height: "19.125rem",
|
||||
};
|
||||
|
||||
export default HorizontalBarChart;
|
||||
@ -1,97 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
function configs(labels: any, datasets: any) {
|
||||
return {
|
||||
data: {
|
||||
labels,
|
||||
datasets: [
|
||||
{
|
||||
label: datasets.label,
|
||||
tension: 0.4,
|
||||
borderWidth: 0,
|
||||
borderRadius: 4,
|
||||
borderSkipped: false,
|
||||
backgroundColor: "rgba(255, 255, 255, 0.8)",
|
||||
data: datasets.data,
|
||||
maxBarThickness: 6,
|
||||
},
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
interaction: {
|
||||
intersect: false,
|
||||
mode: "index",
|
||||
},
|
||||
scales: {
|
||||
y: {
|
||||
grid: {
|
||||
drawBorder: false,
|
||||
display: true,
|
||||
drawOnChartArea: true,
|
||||
drawTicks: false,
|
||||
borderDash: [5, 5],
|
||||
color: "rgba(255, 255, 255, .2)",
|
||||
},
|
||||
ticks: {
|
||||
suggestedMin: 0,
|
||||
suggestedMax: 500,
|
||||
beginAtZero: true,
|
||||
padding: 10,
|
||||
font: {
|
||||
size: 14,
|
||||
weight: 300,
|
||||
family: "Roboto",
|
||||
style: "normal",
|
||||
lineHeight: 2,
|
||||
},
|
||||
color: "#fff",
|
||||
},
|
||||
},
|
||||
x: {
|
||||
grid: {
|
||||
drawBorder: false,
|
||||
display: true,
|
||||
drawOnChartArea: true,
|
||||
drawTicks: false,
|
||||
borderDash: [5, 5],
|
||||
color: "rgba(255, 255, 255, .2)",
|
||||
},
|
||||
ticks: {
|
||||
display: true,
|
||||
color: "#f8f9fa",
|
||||
padding: 10,
|
||||
font: {
|
||||
size: 14,
|
||||
weight: 300,
|
||||
family: "Roboto",
|
||||
style: "normal",
|
||||
lineHeight: 2,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
export default configs;
|
||||
@ -1,100 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
import { useMemo, ReactNode } from "react";
|
||||
|
||||
// react-chartjs-2 components
|
||||
import { Bar } from "react-chartjs-2";
|
||||
|
||||
// @mui material components
|
||||
import Card from "@mui/material/Card";
|
||||
import Divider from "@mui/material/Divider";
|
||||
import Icon from "@mui/material/Icon";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDBox from "components/MDBox";
|
||||
import MDTypography from "components/MDTypography";
|
||||
|
||||
// ReportsBarChart configurations
|
||||
import configs from "examples/Charts/BarCharts/ReportsBarChart/configs";
|
||||
|
||||
// Declaring props types for ReportsBarChart
|
||||
interface Props {
|
||||
color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "dark";
|
||||
title: string;
|
||||
description?: string | ReactNode;
|
||||
date: string;
|
||||
chart: {
|
||||
labels: string[];
|
||||
datasets: {
|
||||
label: string;
|
||||
data: number[];
|
||||
};
|
||||
};
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
function ReportsBarChart({ color, title, description, date, chart }: Props): JSX.Element {
|
||||
const { data, options } = configs(chart.labels || [], chart.datasets || {});
|
||||
|
||||
return (
|
||||
<Card sx={{ height: "100%" }}>
|
||||
<MDBox padding="1rem">
|
||||
{useMemo(
|
||||
() => (
|
||||
<MDBox
|
||||
variant="gradient"
|
||||
bgColor={color}
|
||||
borderRadius="lg"
|
||||
coloredShadow={color}
|
||||
py={2}
|
||||
pr={0.5}
|
||||
mt={-5}
|
||||
height="12.5rem"
|
||||
>
|
||||
<Bar data={data} options={options} />
|
||||
</MDBox>
|
||||
),
|
||||
[chart, color]
|
||||
)}
|
||||
<MDBox pt={3} pb={1} px={1}>
|
||||
<MDTypography variant="h6" textTransform="capitalize">
|
||||
{title}
|
||||
</MDTypography>
|
||||
<MDTypography component="div" variant="button" color="text" fontWeight="light">
|
||||
{description}
|
||||
</MDTypography>
|
||||
<Divider />
|
||||
<MDBox display="flex" alignItems="center">
|
||||
<MDTypography variant="button" color="text" lineHeight={1} sx={{ mt: 0.15, mr: 0.5 }}>
|
||||
<Icon>schedule</Icon>
|
||||
</MDTypography>
|
||||
<MDTypography variant="button" color="text" fontWeight="light">
|
||||
{date}
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
// Setting default values for the props of ReportsBarChart
|
||||
ReportsBarChart.defaultProps = {
|
||||
color: "dark",
|
||||
description: "",
|
||||
};
|
||||
|
||||
export default ReportsBarChart;
|
||||
@ -1,78 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
// Material Dashboard 2 PRO React TS Base Styles
|
||||
import typography from "assets/theme/base/typography";
|
||||
|
||||
function configs(labels: any, datasets: any) {
|
||||
return {
|
||||
data: {
|
||||
labels,
|
||||
datasets: [...datasets],
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
scales: {
|
||||
y: {
|
||||
grid: {
|
||||
drawBorder: false,
|
||||
display: true,
|
||||
drawOnChartArea: true,
|
||||
drawTicks: false,
|
||||
borderDash: [5, 5],
|
||||
},
|
||||
ticks: {
|
||||
display: true,
|
||||
padding: 10,
|
||||
color: "#9ca2b7",
|
||||
font: {
|
||||
size: 11,
|
||||
family: typography.fontFamily,
|
||||
style: "normal",
|
||||
lineHeight: 2,
|
||||
},
|
||||
},
|
||||
},
|
||||
x: {
|
||||
grid: {
|
||||
drawBorder: false,
|
||||
display: false,
|
||||
drawOnChartArea: true,
|
||||
drawTicks: true,
|
||||
},
|
||||
ticks: {
|
||||
display: true,
|
||||
color: "#9ca2b7",
|
||||
padding: 10,
|
||||
font: {
|
||||
size: 11,
|
||||
family: typography.fontFamily,
|
||||
style: "normal",
|
||||
lineHeight: 2,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
export default configs;
|
||||
@ -1,126 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
import { useMemo, ReactNode } from "react";
|
||||
|
||||
// react-chartjs-2 components
|
||||
import { Bar } from "react-chartjs-2";
|
||||
|
||||
// @mui material components
|
||||
import Card from "@mui/material/Card";
|
||||
import Icon from "@mui/material/Icon";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDBox from "components/MDBox";
|
||||
import MDTypography from "components/MDTypography";
|
||||
|
||||
// VerticalBarChart configurations
|
||||
import configs from "examples/Charts/BarCharts/VerticalBarChart/configs";
|
||||
|
||||
// Material Dashboard 2 PRO React TS Base Styles
|
||||
import colors from "assets/theme/base/colors";
|
||||
|
||||
// Declaring props types for HorizontalBarChart
|
||||
interface Props {
|
||||
icon?: {
|
||||
color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark";
|
||||
component: ReactNode;
|
||||
};
|
||||
title?: string;
|
||||
description?: string | ReactNode;
|
||||
height?: string | number;
|
||||
chart: {
|
||||
labels: string[];
|
||||
datasets: {
|
||||
label: string;
|
||||
color: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark";
|
||||
data: number[];
|
||||
}[];
|
||||
};
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
function VerticalBarChart({ icon, title, description, height, chart }: Props): JSX.Element {
|
||||
const chartDatasets = chart.datasets
|
||||
? chart.datasets.map((dataset) => ({
|
||||
...dataset,
|
||||
weight: 5,
|
||||
borderWidth: 0,
|
||||
borderRadius: 4,
|
||||
backgroundColor: colors[dataset.color]
|
||||
? colors[dataset.color || "dark"].main
|
||||
: colors.dark.main,
|
||||
fill: false,
|
||||
maxBarThickness: 35,
|
||||
}))
|
||||
: [];
|
||||
|
||||
const { data, options } = configs(chart.labels || [], chartDatasets);
|
||||
|
||||
const renderChart = (
|
||||
<MDBox py={2} pr={2} pl={icon.component ? 1 : 2}>
|
||||
{title || description ? (
|
||||
<MDBox display="flex" px={description ? 1 : 0} pt={description ? 1 : 0}>
|
||||
{icon.component && (
|
||||
<MDBox
|
||||
width="4rem"
|
||||
height="4rem"
|
||||
bgColor={icon.color || "info"}
|
||||
variant="gradient"
|
||||
coloredShadow={icon.color || "info"}
|
||||
borderRadius="xl"
|
||||
display="flex"
|
||||
justifyContent="center"
|
||||
alignItems="center"
|
||||
color="white"
|
||||
mt={-5}
|
||||
mr={2}
|
||||
>
|
||||
<Icon fontSize="medium">{icon.component}</Icon>
|
||||
</MDBox>
|
||||
)}
|
||||
<MDBox mt={icon.component ? -2 : 0}>
|
||||
{title && <MDTypography variant="h6">{title}</MDTypography>}
|
||||
<MDBox mb={2}>
|
||||
<MDTypography component="div" variant="button" color="text">
|
||||
{description}
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
) : null}
|
||||
{useMemo(
|
||||
() => (
|
||||
<MDBox height={height}>
|
||||
<Bar data={data} options={options} />
|
||||
</MDBox>
|
||||
),
|
||||
[chart, height]
|
||||
)}
|
||||
</MDBox>
|
||||
);
|
||||
|
||||
return title || description ? <Card>{renderChart}</Card> : renderChart;
|
||||
}
|
||||
|
||||
// Declaring default props for VerticalBarChart
|
||||
VerticalBarChart.defaultProps = {
|
||||
icon: { color: "info", component: "" },
|
||||
title: "",
|
||||
description: "",
|
||||
height: "19.125rem",
|
||||
};
|
||||
|
||||
export default VerticalBarChart;
|
||||
@ -1,78 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
// Material Dashboard 2 PRO React TS Base Styles
|
||||
import typography from "assets/theme/base/typography";
|
||||
|
||||
function configs(labels: any, datasets: any) {
|
||||
return {
|
||||
data: {
|
||||
labels,
|
||||
datasets: [...datasets],
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
scales: {
|
||||
y: {
|
||||
grid: {
|
||||
drawBorder: false,
|
||||
display: true,
|
||||
drawOnChartArea: true,
|
||||
drawTicks: false,
|
||||
borderDash: [5, 5],
|
||||
},
|
||||
ticks: {
|
||||
display: true,
|
||||
padding: 10,
|
||||
color: "#b2b9bf",
|
||||
font: {
|
||||
size: 11,
|
||||
family: typography.fontFamily,
|
||||
style: "normal",
|
||||
lineHeight: 2,
|
||||
},
|
||||
},
|
||||
},
|
||||
x: {
|
||||
grid: {
|
||||
drawBorder: false,
|
||||
display: true,
|
||||
drawOnChartArea: true,
|
||||
drawTicks: false,
|
||||
borderDash: [5, 5],
|
||||
},
|
||||
ticks: {
|
||||
display: true,
|
||||
color: "#b2b9bf",
|
||||
padding: 10,
|
||||
font: {
|
||||
size: 11,
|
||||
family: typography.fontFamily,
|
||||
style: "normal",
|
||||
lineHeight: 2,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
export default configs;
|
||||
@ -1,132 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
import { useMemo, ReactNode } from "react";
|
||||
|
||||
// react-chartjs-2 components
|
||||
import { Bubble } from "react-chartjs-2";
|
||||
|
||||
// @mui material components
|
||||
import Card from "@mui/material/Card";
|
||||
import Icon from "@mui/material/Icon";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDBox from "components/MDBox";
|
||||
import MDTypography from "components/MDTypography";
|
||||
|
||||
// BubbleChart configurations
|
||||
import configs from "examples/Charts/BubbleChart/configs";
|
||||
|
||||
// Material Dashboard 2 PRO React TS Base Styles
|
||||
import colors from "assets/theme/base/colors";
|
||||
|
||||
// Declaring props types for BubbleChart
|
||||
interface Props {
|
||||
icon?: {
|
||||
color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark";
|
||||
component: ReactNode;
|
||||
};
|
||||
title?: string;
|
||||
description?: string | ReactNode;
|
||||
height?: string | number;
|
||||
chart: {
|
||||
labels: string[];
|
||||
datasets: {
|
||||
label: string;
|
||||
color: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark";
|
||||
data: {
|
||||
x: number;
|
||||
y: number;
|
||||
r: number;
|
||||
}[];
|
||||
}[];
|
||||
};
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
function BubbleChart({ icon, title, description, height, chart }: Props): JSX.Element {
|
||||
const chartDatasets = chart.datasets
|
||||
? chart.datasets.map((dataset) => ({
|
||||
...dataset,
|
||||
tension: 0.4,
|
||||
borderWidth: 3,
|
||||
pointRadius: 2,
|
||||
backgroundColor: colors[dataset.color]
|
||||
? colors[dataset.color || "dark"].main
|
||||
: colors.dark.main,
|
||||
borderColor: colors[dataset.color]
|
||||
? colors[dataset.color || "dark"].main
|
||||
: colors.dark.main,
|
||||
maxBarThickness: 6,
|
||||
}))
|
||||
: [];
|
||||
|
||||
const { data, options } = configs(chart.labels || [], chartDatasets);
|
||||
|
||||
const renderChart = (
|
||||
<MDBox py={2} pr={2} pl={icon.component ? 1 : 2}>
|
||||
{title || description ? (
|
||||
<MDBox display="flex" px={description ? 1 : 0} pt={description ? 1 : 0}>
|
||||
{icon.component && (
|
||||
<MDBox
|
||||
width="4rem"
|
||||
height="4rem"
|
||||
bgColor={icon.color || "info"}
|
||||
variant="gradient"
|
||||
coloredShadow={icon.color || "info"}
|
||||
borderRadius="xl"
|
||||
display="flex"
|
||||
justifyContent="center"
|
||||
alignItems="center"
|
||||
color="white"
|
||||
mt={-5}
|
||||
mr={2}
|
||||
>
|
||||
<Icon fontSize="medium">{icon.component}</Icon>
|
||||
</MDBox>
|
||||
)}
|
||||
<MDBox mt={icon.component ? -2 : 0}>
|
||||
{title && <MDTypography variant="h6">{title}</MDTypography>}
|
||||
<MDBox mb={2}>
|
||||
<MDTypography component="div" variant="button" color="text">
|
||||
{description}
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
) : null}
|
||||
{useMemo(
|
||||
() => (
|
||||
<MDBox height={height}>
|
||||
<Bubble data={data} options={options} />
|
||||
</MDBox>
|
||||
),
|
||||
[chart, height]
|
||||
)}
|
||||
</MDBox>
|
||||
);
|
||||
|
||||
return title || description ? <Card>{renderChart}</Card> : renderChart;
|
||||
}
|
||||
|
||||
// Declaring default props for BubbleChart
|
||||
BubbleChart.defaultProps = {
|
||||
icon: { color: "info", component: "" },
|
||||
title: "",
|
||||
description: "",
|
||||
height: "100%",
|
||||
};
|
||||
|
||||
export default BubbleChart;
|
||||
@ -1,98 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
/* eslint-disable no-dupe-keys */
|
||||
// Material Dashboard 2 PRO React TS Base Styles
|
||||
import colors from "assets/theme/base/colors";
|
||||
|
||||
const { gradients, dark } = colors;
|
||||
|
||||
function configs(labels: any, datasets: any, cutout: number = 60) {
|
||||
const backgroundColors = [];
|
||||
|
||||
if (datasets.backgroundColors) {
|
||||
datasets.backgroundColors.forEach((color: string) => {
|
||||
if (gradients[color]) {
|
||||
if (color === "info") {
|
||||
backgroundColors.push(gradients.info.main);
|
||||
} else {
|
||||
backgroundColors.push(gradients[color].state);
|
||||
}
|
||||
} else {
|
||||
backgroundColors.push(dark.main);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
backgroundColors.push(dark.main);
|
||||
}
|
||||
|
||||
return {
|
||||
data: {
|
||||
labels,
|
||||
datasets: [
|
||||
{
|
||||
label: datasets.label,
|
||||
weight: 9,
|
||||
cutout,
|
||||
tension: 0.9,
|
||||
pointRadius: 2,
|
||||
borderWidth: 2,
|
||||
backgroundColor: backgroundColors,
|
||||
fill: false,
|
||||
data: datasets.data,
|
||||
},
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
interaction: {
|
||||
intersect: false,
|
||||
mode: "index",
|
||||
},
|
||||
scales: {
|
||||
y: {
|
||||
grid: {
|
||||
drawBorder: false,
|
||||
display: false,
|
||||
drawOnChartArea: false,
|
||||
drawTicks: false,
|
||||
},
|
||||
ticks: {
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
x: {
|
||||
grid: {
|
||||
drawBorder: false,
|
||||
display: false,
|
||||
drawOnChartArea: false,
|
||||
drawTicks: false,
|
||||
},
|
||||
ticks: {
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
export default configs;
|
||||
@ -1,110 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
import { useMemo, ReactNode } from "react";
|
||||
|
||||
// react-chartjs-2 components
|
||||
import { Doughnut } from "react-chartjs-2";
|
||||
|
||||
// @mui material components
|
||||
import Card from "@mui/material/Card";
|
||||
import Icon from "@mui/material/Icon";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDBox from "components/MDBox";
|
||||
import MDTypography from "components/MDTypography";
|
||||
|
||||
// DefaultDoughnutChart configurations
|
||||
import configs from "examples/Charts/DoughnutCharts/DefaultDoughnutChart/configs";
|
||||
|
||||
// Declaring props types for DefaultDoughnutChart
|
||||
interface Props {
|
||||
icon?: {
|
||||
color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark";
|
||||
component: ReactNode;
|
||||
};
|
||||
title?: string;
|
||||
description?: string | ReactNode;
|
||||
height?: string | number;
|
||||
chart: {
|
||||
labels: string[];
|
||||
datasets: {
|
||||
label: string;
|
||||
backgroundColors: string[];
|
||||
data: number[];
|
||||
};
|
||||
cutout?: number;
|
||||
};
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
function DefaultDoughnutChart({ icon, title, description, height, chart }: Props): JSX.Element {
|
||||
const { data, options } = configs(chart.labels || [], chart.datasets || {}, chart.cutout);
|
||||
|
||||
const renderChart = (
|
||||
<MDBox py={2} pr={2} pl={icon.component ? 1 : 2}>
|
||||
{title || description ? (
|
||||
<MDBox display="flex" px={description ? 1 : 0} pt={description ? 1 : 0}>
|
||||
{icon.component && (
|
||||
<MDBox
|
||||
width="4rem"
|
||||
height="4rem"
|
||||
bgColor={icon.color || "info"}
|
||||
variant="gradient"
|
||||
coloredShadow={icon.color || "info"}
|
||||
borderRadius="xl"
|
||||
display="flex"
|
||||
justifyContent="center"
|
||||
alignItems="center"
|
||||
color="white"
|
||||
mt={-5}
|
||||
mr={2}
|
||||
>
|
||||
<Icon fontSize="medium">{icon.component}</Icon>
|
||||
</MDBox>
|
||||
)}
|
||||
<MDBox mt={icon.component ? -2 : 0}>
|
||||
{title && <MDTypography variant="h6">{title}</MDTypography>}
|
||||
<MDBox mb={2}>
|
||||
<MDTypography component="div" variant="button" color="text">
|
||||
{description}
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
) : null}
|
||||
{useMemo(
|
||||
() => (
|
||||
<MDBox height={height}>
|
||||
<Doughnut data={data} options={options} />
|
||||
</MDBox>
|
||||
),
|
||||
[chart, height]
|
||||
)}
|
||||
</MDBox>
|
||||
);
|
||||
|
||||
return title || description ? <Card>{renderChart}</Card> : renderChart;
|
||||
}
|
||||
|
||||
// Declaring default props DefaultDoughnutChart
|
||||
DefaultDoughnutChart.defaultProps = {
|
||||
icon: { color: "info", component: "" },
|
||||
title: "",
|
||||
description: "",
|
||||
height: "19.125rem",
|
||||
};
|
||||
|
||||
export default DefaultDoughnutChart;
|
||||
@ -1,84 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
function configs(labels: any, datasets: any) {
|
||||
return {
|
||||
data: {
|
||||
labels,
|
||||
datasets: [...datasets],
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
interaction: {
|
||||
intersect: false,
|
||||
mode: "index",
|
||||
},
|
||||
scales: {
|
||||
y: {
|
||||
grid: {
|
||||
drawBorder: false,
|
||||
display: true,
|
||||
drawOnChartArea: true,
|
||||
drawTicks: false,
|
||||
borderDash: [5, 5],
|
||||
color: "#c1c4ce5c",
|
||||
},
|
||||
ticks: {
|
||||
display: true,
|
||||
padding: 10,
|
||||
color: "#9ca2b7",
|
||||
font: {
|
||||
size: 14,
|
||||
weight: 300,
|
||||
family: "Roboto",
|
||||
style: "normal",
|
||||
lineHeight: 2,
|
||||
},
|
||||
},
|
||||
},
|
||||
x: {
|
||||
grid: {
|
||||
drawBorder: false,
|
||||
display: true,
|
||||
drawOnChartArea: true,
|
||||
drawTicks: true,
|
||||
borderDash: [5, 5],
|
||||
color: "#c1c4ce5c",
|
||||
},
|
||||
ticks: {
|
||||
display: true,
|
||||
color: "#9ca2b7",
|
||||
padding: 10,
|
||||
font: {
|
||||
size: 14,
|
||||
weight: 300,
|
||||
family: "Roboto",
|
||||
style: "normal",
|
||||
lineHeight: 2,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
export default configs;
|
||||
@ -1,130 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
import { useMemo, ReactNode } from "react";
|
||||
|
||||
// react-chartjs-2 components
|
||||
import { Line } from "react-chartjs-2";
|
||||
|
||||
// @mui material components
|
||||
import Card from "@mui/material/Card";
|
||||
import Icon from "@mui/material/Icon";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDBox from "components/MDBox";
|
||||
import MDTypography from "components/MDTypography";
|
||||
|
||||
// DefaultLineChart configurations
|
||||
import configs from "examples/Charts/LineCharts/DefaultLineChart/configs";
|
||||
|
||||
// Material Dashboard 2 PRO React TS Base Styles
|
||||
import colors from "assets/theme/base/colors";
|
||||
|
||||
// Declaring props types for DefaultLineChart
|
||||
interface Props {
|
||||
icon?: {
|
||||
color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark";
|
||||
component: ReactNode;
|
||||
};
|
||||
title?: string;
|
||||
description?: string | ReactNode;
|
||||
height?: string | number;
|
||||
chart: {
|
||||
labels: string[];
|
||||
datasets: {
|
||||
label: string;
|
||||
color: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark";
|
||||
data: number[];
|
||||
}[];
|
||||
};
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
function DefaultLineChart({ icon, title, description, height, chart }: Props): JSX.Element {
|
||||
const chartDatasets = chart.datasets
|
||||
? chart.datasets.map((dataset) => ({
|
||||
...dataset,
|
||||
tension: 0,
|
||||
pointRadius: 3,
|
||||
borderWidth: 4,
|
||||
backgroundColor: "transparent",
|
||||
fill: true,
|
||||
pointBackgroundColor: colors[dataset.color]
|
||||
? colors[dataset.color || "dark"].main
|
||||
: colors.dark.main,
|
||||
borderColor: colors[dataset.color]
|
||||
? colors[dataset.color || "dark"].main
|
||||
: colors.dark.main,
|
||||
maxBarThickness: 6,
|
||||
}))
|
||||
: [];
|
||||
|
||||
const { data, options } = configs(chart.labels || [], chartDatasets);
|
||||
|
||||
const renderChart = (
|
||||
<MDBox py={2} pr={2} pl={icon.component ? 1 : 2}>
|
||||
{title || description ? (
|
||||
<MDBox display="flex" px={description ? 1 : 0} pt={description ? 1 : 0}>
|
||||
{icon.component && (
|
||||
<MDBox
|
||||
width="4rem"
|
||||
height="4rem"
|
||||
bgColor={icon.color || "info"}
|
||||
variant="gradient"
|
||||
coloredShadow={icon.color || "info"}
|
||||
borderRadius="xl"
|
||||
display="flex"
|
||||
justifyContent="center"
|
||||
alignItems="center"
|
||||
color="white"
|
||||
mt={-5}
|
||||
mr={2}
|
||||
>
|
||||
<Icon fontSize="medium">{icon.component}</Icon>
|
||||
</MDBox>
|
||||
)}
|
||||
<MDBox mt={icon.component ? -2 : 0}>
|
||||
{title && <MDTypography variant="h6">{title}</MDTypography>}
|
||||
<MDBox mb={2}>
|
||||
<MDTypography component="div" variant="button" color="text">
|
||||
{description}
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
) : null}
|
||||
{useMemo(
|
||||
() => (
|
||||
<MDBox height={height}>
|
||||
<Line data={data} options={options} />
|
||||
</MDBox>
|
||||
),
|
||||
[chart, height]
|
||||
)}
|
||||
</MDBox>
|
||||
);
|
||||
|
||||
return title || description ? <Card>{renderChart}</Card> : renderChart;
|
||||
}
|
||||
|
||||
// Declaring default props DefaultLineChart
|
||||
DefaultLineChart.defaultProps = {
|
||||
icon: { color: "info", component: "" },
|
||||
title: "",
|
||||
description: "",
|
||||
height: "19.125rem",
|
||||
};
|
||||
|
||||
export default DefaultLineChart;
|
||||
@ -1,83 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
// Material Dashboard 2 PRO React TS Base Styles
|
||||
import typography from "assets/theme/base/typography";
|
||||
|
||||
function configs(labels: any, datasets: any) {
|
||||
return {
|
||||
data: {
|
||||
labels,
|
||||
datasets: [...datasets],
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
interaction: {
|
||||
intersect: false,
|
||||
mode: "index",
|
||||
},
|
||||
scales: {
|
||||
y: {
|
||||
grid: {
|
||||
drawBorder: false,
|
||||
display: true,
|
||||
drawOnChartArea: true,
|
||||
drawTicks: false,
|
||||
borderDash: [5, 5],
|
||||
},
|
||||
ticks: {
|
||||
display: true,
|
||||
padding: 10,
|
||||
color: "#b2b9bf",
|
||||
font: {
|
||||
size: 11,
|
||||
family: typography.fontFamily,
|
||||
style: "normal",
|
||||
lineHeight: 2,
|
||||
},
|
||||
},
|
||||
},
|
||||
x: {
|
||||
grid: {
|
||||
drawBorder: false,
|
||||
display: false,
|
||||
drawOnChartArea: false,
|
||||
drawTicks: false,
|
||||
borderDash: [5, 5],
|
||||
},
|
||||
ticks: {
|
||||
display: true,
|
||||
color: "#b2b9bf",
|
||||
padding: 20,
|
||||
font: {
|
||||
size: 11,
|
||||
family: typography.fontFamily,
|
||||
style: "normal",
|
||||
lineHeight: 2,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
export default configs;
|
||||
@ -1,139 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
import { useRef, useEffect, useState, useMemo, ReactNode } from "react";
|
||||
|
||||
// react-chartjs-2 components
|
||||
import { Line } from "react-chartjs-2";
|
||||
|
||||
// @mui material components
|
||||
import Card from "@mui/material/Card";
|
||||
import Icon from "@mui/material/Icon";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDBox from "components/MDBox";
|
||||
import MDTypography from "components/MDTypography";
|
||||
|
||||
// Material Dashboard 2 PRO React TS Helper Functions
|
||||
import gradientChartLine from "assets/theme/functions/gradientChartLine";
|
||||
|
||||
// GradientLineChart configurations
|
||||
import configs from "examples/Charts/LineCharts/GradientLineChart/configs";
|
||||
|
||||
// Material Dashboard 2 PRO React TS Base Styles
|
||||
import colors from "assets/theme/base/colors";
|
||||
|
||||
// Declaring props types for GradientLineChart
|
||||
interface Props {
|
||||
icon?: {
|
||||
color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark";
|
||||
component: ReactNode;
|
||||
};
|
||||
title?: string;
|
||||
description?: string | ReactNode;
|
||||
height?: string | number;
|
||||
chart: {
|
||||
labels: string[];
|
||||
datasets: {
|
||||
label: string;
|
||||
color: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark";
|
||||
data: number[];
|
||||
}[];
|
||||
};
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
function GradientLineChart({ icon, title, description, height, chart }: Props): JSX.Element {
|
||||
const chartRef = useRef(null);
|
||||
const [chartData, setChartData] = useState({});
|
||||
const { data, options }: any = chartData;
|
||||
|
||||
useEffect(() => {
|
||||
const chartDatasets = chart.datasets
|
||||
? chart.datasets.map((dataset) => ({
|
||||
...dataset,
|
||||
tension: 0,
|
||||
pointRadius: 0,
|
||||
borderWidth: 4,
|
||||
borderColor: colors[dataset.color]
|
||||
? colors[dataset.color || "dark"].main
|
||||
: colors.dark.main,
|
||||
fill: true,
|
||||
maxBarThickness: 6,
|
||||
backgroundColor: gradientChartLine(
|
||||
chartRef.current.children[0],
|
||||
colors[dataset.color] ? colors[dataset.color || "dark"].main : colors.dark.main
|
||||
),
|
||||
}))
|
||||
: [];
|
||||
|
||||
setChartData(configs(chart.labels || [], chartDatasets));
|
||||
}, [chart]);
|
||||
|
||||
const renderChart = (
|
||||
<MDBox py={2} pr={2} pl={icon.component ? 1 : 2}>
|
||||
{title || description ? (
|
||||
<MDBox display="flex" px={description ? 1 : 0} pt={description ? 1 : 0}>
|
||||
{icon.component && (
|
||||
<MDBox
|
||||
width="4rem"
|
||||
height="4rem"
|
||||
bgColor={icon.color || "info"}
|
||||
variant="gradient"
|
||||
coloredShadow={icon.color || "info"}
|
||||
borderRadius="xl"
|
||||
display="flex"
|
||||
justifyContent="center"
|
||||
alignItems="center"
|
||||
color="white"
|
||||
mt={-5}
|
||||
mr={2}
|
||||
>
|
||||
<Icon fontSize="medium">{icon.component}</Icon>
|
||||
</MDBox>
|
||||
)}
|
||||
<MDBox mt={icon.component ? -2 : 0}>
|
||||
{title && <MDTypography variant="h6">{title}</MDTypography>}
|
||||
<MDBox mb={2}>
|
||||
<MDTypography component="div" variant="button" color="text">
|
||||
{description}
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
) : null}
|
||||
{useMemo(
|
||||
() => (
|
||||
<MDBox ref={chartRef} sx={{ height }}>
|
||||
<Line data={data} options={options} />
|
||||
</MDBox>
|
||||
),
|
||||
[chartData, height]
|
||||
)}
|
||||
</MDBox>
|
||||
);
|
||||
|
||||
return title || description ? <Card>{renderChart}</Card> : renderChart;
|
||||
}
|
||||
|
||||
// Declaring default props for GradientLineChart
|
||||
GradientLineChart.defaultProps = {
|
||||
icon: { color: "info", component: "" },
|
||||
title: "",
|
||||
description: "",
|
||||
height: "19.125rem",
|
||||
};
|
||||
|
||||
export default GradientLineChart;
|
||||
@ -1,103 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
/* eslint-disable no-dupe-keys */
|
||||
|
||||
// Material Dashboard 2 PRO React TS Base Styles
|
||||
import colors from "assets/theme/base/colors";
|
||||
|
||||
const { gradients } = colors;
|
||||
|
||||
function configs(color: string, labels: any, label: any, data: any) {
|
||||
return {
|
||||
data: {
|
||||
labels,
|
||||
datasets: [
|
||||
{
|
||||
label,
|
||||
tension: 0,
|
||||
pointRadius: 3,
|
||||
pointBackgroundColor: gradients[color] ? gradients[color].main : gradients.info.main,
|
||||
borderColor: gradients[color] ? gradients[color].main : gradients.info.main,
|
||||
borderWidth: 4,
|
||||
backgroundColor: "transparent",
|
||||
maxBarThickness: 6,
|
||||
fill: true,
|
||||
data,
|
||||
},
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
interaction: {
|
||||
intersect: false,
|
||||
mode: "index",
|
||||
},
|
||||
scales: {
|
||||
y: {
|
||||
grid: {
|
||||
drawBorder: false,
|
||||
display: false,
|
||||
drawOnChartArea: true,
|
||||
drawTicks: false,
|
||||
borderDash: [5, 5],
|
||||
},
|
||||
ticks: {
|
||||
display: true,
|
||||
padding: 10,
|
||||
color: "#9ca2b7",
|
||||
font: {
|
||||
size: 14,
|
||||
weight: 300,
|
||||
family: "Roboto",
|
||||
style: "normal",
|
||||
lineHeight: 2,
|
||||
},
|
||||
},
|
||||
},
|
||||
x: {
|
||||
grid: {
|
||||
drawBorder: false,
|
||||
display: true,
|
||||
drawOnChartArea: true,
|
||||
drawTicks: false,
|
||||
borderDash: [5, 5],
|
||||
color: "#c1c4ce5c",
|
||||
},
|
||||
ticks: {
|
||||
display: true,
|
||||
padding: 10,
|
||||
color: "#9ca2b7",
|
||||
font: {
|
||||
size: 14,
|
||||
weight: 300,
|
||||
family: "Roboto",
|
||||
style: "normal",
|
||||
lineHeight: 2,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
export default configs;
|
||||
@ -1,119 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
import { useMemo, ReactNode } from "react";
|
||||
|
||||
// react-chartjs-2 components
|
||||
import { Line } from "react-chartjs-2";
|
||||
|
||||
// @mui material components
|
||||
import Card from "@mui/material/Card";
|
||||
import Icon from "@mui/material/Icon";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDBox from "components/MDBox";
|
||||
import MDTypography from "components/MDTypography";
|
||||
import MDProgress from "components/MDProgress";
|
||||
|
||||
// ProgressLineChart configurations
|
||||
import configs from "examples/Charts/LineCharts/ProgressLineChart/config";
|
||||
|
||||
// Declaring props types for GradientLineChart
|
||||
interface Props {
|
||||
color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "dark";
|
||||
icon: ReactNode;
|
||||
title: string;
|
||||
count?: string | number;
|
||||
progress: number;
|
||||
height?: string | number;
|
||||
chart: {
|
||||
labels: string[];
|
||||
data: number[];
|
||||
};
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
function ProgressLineChart({
|
||||
color,
|
||||
icon,
|
||||
title,
|
||||
count,
|
||||
progress,
|
||||
height,
|
||||
chart,
|
||||
}: Props): JSX.Element {
|
||||
const { data, options } = configs(color, chart.labels || [], title, chart.data || []);
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<MDBox display="flex" alignItems="center" pt={2} px={2}>
|
||||
<MDBox
|
||||
width="3rem"
|
||||
height="3rem"
|
||||
display="grid"
|
||||
justifyContent="center"
|
||||
alignItems="center"
|
||||
borderRadius="md"
|
||||
shadow="md"
|
||||
color="white"
|
||||
bgColor={color}
|
||||
variant="gradient"
|
||||
>
|
||||
<Icon>{icon}</Icon>
|
||||
</MDBox>
|
||||
<MDBox ml={2} lineHeight={1}>
|
||||
<MDTypography
|
||||
variant="button"
|
||||
fontWeight="regular"
|
||||
textTransform="capitalize"
|
||||
color="text"
|
||||
>
|
||||
{title}
|
||||
</MDTypography>
|
||||
{count ? (
|
||||
<MDTypography variant="h5" fontWeight="bold">
|
||||
{count}
|
||||
</MDTypography>
|
||||
) : null}
|
||||
</MDBox>
|
||||
<MDBox width="25%" ml="auto">
|
||||
<MDTypography display="block" variant="caption" fontWeight="medium" color="text">
|
||||
{progress}%
|
||||
</MDTypography>
|
||||
<MDBox mt={0.25}>
|
||||
<MDProgress variant="gradient" color={color} value={progress} />
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
{useMemo(
|
||||
() => (
|
||||
<MDBox mt={2}>
|
||||
<Line data={data} options={options} style={{ height }} />
|
||||
</MDBox>
|
||||
),
|
||||
[chart, height, color]
|
||||
)}
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
// Declaring default props for ProgressLineChart
|
||||
ProgressLineChart.defaultProps = {
|
||||
color: "info",
|
||||
count: 0,
|
||||
height: "6.25rem",
|
||||
};
|
||||
|
||||
export default ProgressLineChart;
|
||||
@ -1,97 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
function configs(labels: any, datasets: any) {
|
||||
return {
|
||||
data: {
|
||||
labels,
|
||||
datasets: [
|
||||
{
|
||||
label: datasets.label,
|
||||
tension: 0,
|
||||
pointRadius: 5,
|
||||
pointBorderColor: "transparent",
|
||||
pointBackgroundColor: "rgba(255, 255, 255, .8)",
|
||||
borderColor: "rgba(255, 255, 255, .8)",
|
||||
borderWidth: 4,
|
||||
backgroundColor: "transparent",
|
||||
fill: true,
|
||||
data: datasets.data,
|
||||
maxBarThickness: 6,
|
||||
},
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
interaction: {
|
||||
intersect: false,
|
||||
mode: "index",
|
||||
},
|
||||
scales: {
|
||||
y: {
|
||||
grid: {
|
||||
drawBorder: false,
|
||||
display: true,
|
||||
drawOnChartArea: true,
|
||||
drawTicks: false,
|
||||
borderDash: [5, 5],
|
||||
color: "rgba(255, 255, 255, .2)",
|
||||
},
|
||||
ticks: {
|
||||
display: true,
|
||||
color: "#f8f9fa",
|
||||
padding: 10,
|
||||
font: {
|
||||
size: 14,
|
||||
weight: 300,
|
||||
family: "Roboto",
|
||||
style: "normal",
|
||||
lineHeight: 2,
|
||||
},
|
||||
},
|
||||
},
|
||||
x: {
|
||||
grid: {
|
||||
drawBorder: false,
|
||||
display: false,
|
||||
drawOnChartArea: false,
|
||||
drawTicks: false,
|
||||
borderDash: [5, 5],
|
||||
},
|
||||
ticks: {
|
||||
display: true,
|
||||
color: "#f8f9fa",
|
||||
padding: 10,
|
||||
font: {
|
||||
size: 14,
|
||||
weight: 300,
|
||||
family: "Roboto",
|
||||
style: "normal",
|
||||
lineHeight: 2,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
export default configs;
|
||||
@ -1,100 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
import { useMemo, ReactNode } from "react";
|
||||
|
||||
// react-chartjs-2 components
|
||||
import { Line } from "react-chartjs-2";
|
||||
|
||||
// @mui material components
|
||||
import Card from "@mui/material/Card";
|
||||
import Divider from "@mui/material/Divider";
|
||||
import Icon from "@mui/material/Icon";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDBox from "components/MDBox";
|
||||
import MDTypography from "components/MDTypography";
|
||||
|
||||
// ReportsLineChart configurations
|
||||
import configs from "examples/Charts/LineCharts/ReportsLineChart/configs";
|
||||
|
||||
// Declaring props types for ReportsLineChart
|
||||
interface Props {
|
||||
color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "dark";
|
||||
title: string;
|
||||
description?: string | ReactNode;
|
||||
date: string;
|
||||
chart: {
|
||||
labels: string[];
|
||||
datasets: {
|
||||
label: string;
|
||||
data: number[];
|
||||
};
|
||||
};
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
function ReportsLineChart({ color, title, description, date, chart }: Props): JSX.Element {
|
||||
const { data, options } = configs(chart.labels || [], chart.datasets || {});
|
||||
|
||||
return (
|
||||
<Card sx={{ height: "100%" }}>
|
||||
<MDBox padding="1rem">
|
||||
{useMemo(
|
||||
() => (
|
||||
<MDBox
|
||||
variant="gradient"
|
||||
bgColor={color}
|
||||
borderRadius="lg"
|
||||
coloredShadow={color}
|
||||
py={2}
|
||||
pr={0.5}
|
||||
mt={-5}
|
||||
height="12.5rem"
|
||||
>
|
||||
<Line data={data} options={options} />
|
||||
</MDBox>
|
||||
),
|
||||
[chart, color]
|
||||
)}
|
||||
<MDBox pt={3} pb={1} px={1}>
|
||||
<MDTypography variant="h6" textTransform="capitalize">
|
||||
{title}
|
||||
</MDTypography>
|
||||
<MDTypography component="div" variant="button" color="text" fontWeight="light">
|
||||
{description}
|
||||
</MDTypography>
|
||||
<Divider />
|
||||
<MDBox display="flex" alignItems="center">
|
||||
<MDTypography variant="button" color="text" lineHeight={1} sx={{ mt: 0.15, mr: 0.5 }}>
|
||||
<Icon>schedule</Icon>
|
||||
</MDTypography>
|
||||
<MDTypography variant="button" color="text" fontWeight="light">
|
||||
{date}
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
// Declaring default props for ReportsLineChart
|
||||
ReportsLineChart.defaultProps = {
|
||||
color: "dark",
|
||||
description: "",
|
||||
};
|
||||
|
||||
export default ReportsLineChart;
|
||||
@ -1,83 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
// Material Dashboard 2 PRO React TS Base Styles
|
||||
import typography from "assets/theme/base/typography";
|
||||
|
||||
function configs(labels: any, datasets: any) {
|
||||
return {
|
||||
data: {
|
||||
labels,
|
||||
datasets: [...datasets],
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
interaction: {
|
||||
intersect: false,
|
||||
mode: "index",
|
||||
},
|
||||
scales: {
|
||||
y: {
|
||||
grid: {
|
||||
drawBorder: false,
|
||||
display: true,
|
||||
drawOnChartArea: true,
|
||||
drawTicks: false,
|
||||
borderDash: [5, 5],
|
||||
},
|
||||
ticks: {
|
||||
display: true,
|
||||
padding: 10,
|
||||
color: "#b2b9bf",
|
||||
font: {
|
||||
size: 11,
|
||||
family: typography.fontFamily,
|
||||
style: "normal",
|
||||
lineHeight: 2,
|
||||
},
|
||||
},
|
||||
},
|
||||
x: {
|
||||
grid: {
|
||||
drawBorder: false,
|
||||
display: true,
|
||||
drawOnChartArea: true,
|
||||
drawTicks: true,
|
||||
borderDash: [5, 5],
|
||||
},
|
||||
ticks: {
|
||||
display: true,
|
||||
color: "#b2b9bf",
|
||||
padding: 10,
|
||||
font: {
|
||||
size: 11,
|
||||
family: typography.fontFamily,
|
||||
style: "normal",
|
||||
lineHeight: 2,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
export default configs;
|
||||
@ -1,198 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
import { useRef, useEffect, useState, useMemo, ReactNode } from "react";
|
||||
|
||||
// react-chartjs-2 components
|
||||
import { Line } from "react-chartjs-2";
|
||||
|
||||
// @mui material components
|
||||
import Card from "@mui/material/Card";
|
||||
import Icon from "@mui/material/Icon";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDBox from "components/MDBox";
|
||||
import MDTypography from "components/MDTypography";
|
||||
|
||||
// Material Dashboard 2 PRO React TS Helper Functions
|
||||
import gradientChartLine from "assets/theme/functions/gradientChartLine";
|
||||
|
||||
// MixedChart configurations
|
||||
import configs from "examples/Charts/MixedChart/configs";
|
||||
|
||||
// Material Dashboard 2 PRO React TS Base Styles
|
||||
import colors from "assets/theme/base/colors";
|
||||
|
||||
// Declaring props types for MixedChart
|
||||
interface Props {
|
||||
icon?: {
|
||||
color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark";
|
||||
component: ReactNode;
|
||||
};
|
||||
title?: string;
|
||||
description?: string | ReactNode;
|
||||
height?: string | number;
|
||||
chart: {
|
||||
labels: string[];
|
||||
datasets: {
|
||||
chartType: string;
|
||||
label: string;
|
||||
color: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark";
|
||||
data: number[];
|
||||
}[];
|
||||
};
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
function MixedChart({ icon, title, description, height, chart }: Props): JSX.Element {
|
||||
const chartRef = useRef(null);
|
||||
const [chartData, setChartData] = useState({});
|
||||
const { data, options }: any = chartData;
|
||||
|
||||
useEffect(() => {
|
||||
const chartDatasets = chart.datasets
|
||||
? chart.datasets.map((dataset) => {
|
||||
let finalConfigs;
|
||||
|
||||
const defaultLine = {
|
||||
...dataset,
|
||||
type: "line",
|
||||
tension: 0,
|
||||
borderWidth: 4,
|
||||
pointRadius: 2,
|
||||
pointBackgroundColor: colors[dataset.color]
|
||||
? colors[dataset.color || "dark"].main
|
||||
: colors.dark.main,
|
||||
borderColor: colors[dataset.color]
|
||||
? colors[dataset.color || "dark"].main
|
||||
: colors.dark.main,
|
||||
maxBarThickness: 6,
|
||||
};
|
||||
|
||||
const gradientLine = {
|
||||
...dataset,
|
||||
type: "line",
|
||||
tension: 0,
|
||||
pointRadius: 0,
|
||||
borderWidth: 4,
|
||||
borderColor: colors[dataset.color]
|
||||
? colors[dataset.color || "dark"].main
|
||||
: colors.dark.main,
|
||||
fill: true,
|
||||
maxBarThickness: 6,
|
||||
backgroundColor: gradientChartLine(
|
||||
chartRef.current.children[0],
|
||||
colors[dataset.color] ? colors[dataset.color || "dark"].main : colors.dark.main
|
||||
),
|
||||
};
|
||||
|
||||
const bar = {
|
||||
...dataset,
|
||||
type: "bar",
|
||||
weight: 5,
|
||||
borderWidth: 0,
|
||||
borderRadius: 4,
|
||||
backgroundColor: colors[dataset.color]
|
||||
? colors[dataset.color || "dark"].main
|
||||
: colors.dark.main,
|
||||
fill: false,
|
||||
maxBarThickness: 35,
|
||||
};
|
||||
|
||||
const thinBar = {
|
||||
...dataset,
|
||||
type: "bar",
|
||||
weight: 5,
|
||||
borderWidth: 0,
|
||||
borderRadius: 4,
|
||||
backgroundColor: colors[dataset.color]
|
||||
? colors[dataset.color || "dark"].main
|
||||
: colors.dark.main,
|
||||
fill: false,
|
||||
maxBarThickness: 10,
|
||||
};
|
||||
|
||||
if (dataset.chartType === "default-line") {
|
||||
finalConfigs = defaultLine;
|
||||
} else if (dataset.chartType === "gradient-line") {
|
||||
finalConfigs = gradientLine;
|
||||
} else if (dataset.chartType === "thin-bar") {
|
||||
finalConfigs = thinBar;
|
||||
} else {
|
||||
finalConfigs = bar;
|
||||
}
|
||||
|
||||
return { ...finalConfigs };
|
||||
})
|
||||
: [];
|
||||
|
||||
setChartData(configs(chart.labels || [], chartDatasets));
|
||||
}, [chart]);
|
||||
|
||||
const renderChart = (
|
||||
<MDBox py={2} pr={2} pl={icon.component ? 1 : 2}>
|
||||
{title || description ? (
|
||||
<MDBox display="flex" px={description ? 1 : 0} pt={description ? 1 : 0}>
|
||||
{icon.component && (
|
||||
<MDBox
|
||||
width="4rem"
|
||||
height="4rem"
|
||||
bgColor={icon.color || "info"}
|
||||
variant="gradient"
|
||||
coloredShadow={icon.color || "info"}
|
||||
borderRadius="xl"
|
||||
display="flex"
|
||||
justifyContent="center"
|
||||
alignItems="center"
|
||||
color="white"
|
||||
mt={-5}
|
||||
mr={2}
|
||||
>
|
||||
<Icon fontSize="medium">{icon.component}</Icon>
|
||||
</MDBox>
|
||||
)}
|
||||
<MDBox mt={icon.component ? -2 : 0}>
|
||||
{title && <MDTypography variant="h6">{title}</MDTypography>}
|
||||
<MDBox mb={2}>
|
||||
<MDTypography component="div" variant="button" color="text">
|
||||
{description}
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
) : null}
|
||||
{useMemo(
|
||||
() => (
|
||||
<MDBox ref={chartRef} sx={{ height }}>
|
||||
<Line data={data} options={options} />
|
||||
</MDBox>
|
||||
),
|
||||
[chartData, height]
|
||||
)}
|
||||
</MDBox>
|
||||
);
|
||||
|
||||
return title || description ? <Card>{renderChart}</Card> : renderChart;
|
||||
}
|
||||
|
||||
// Declaring default props for MixedChart
|
||||
MixedChart.defaultProps = {
|
||||
icon: { color: "info", component: "" },
|
||||
title: "",
|
||||
description: "",
|
||||
height: "19.125rem",
|
||||
};
|
||||
|
||||
export default MixedChart;
|
||||
@ -1,92 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
/* eslint-disable no-dupe-keys */
|
||||
// Material Dashboard 2 PRO React TS Base Styles
|
||||
import colors from "assets/theme/base/colors";
|
||||
|
||||
const { gradients, dark } = colors;
|
||||
|
||||
function configs(labels: any, datasets: any) {
|
||||
const backgroundColors = [];
|
||||
|
||||
if (datasets.backgroundColors) {
|
||||
datasets.backgroundColors.forEach((color: string) =>
|
||||
gradients[color]
|
||||
? backgroundColors.push(gradients[color].state)
|
||||
: backgroundColors.push(dark.main)
|
||||
);
|
||||
} else {
|
||||
backgroundColors.push(dark.main);
|
||||
}
|
||||
|
||||
return {
|
||||
data: {
|
||||
labels,
|
||||
datasets: [
|
||||
{
|
||||
label: datasets.label,
|
||||
weight: 9,
|
||||
cutout: 0,
|
||||
tension: 0.9,
|
||||
pointRadius: 2,
|
||||
borderWidth: 2,
|
||||
backgroundColor: backgroundColors,
|
||||
fill: false,
|
||||
data: datasets.data,
|
||||
},
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
interaction: {
|
||||
intersect: false,
|
||||
mode: "index",
|
||||
},
|
||||
scales: {
|
||||
y: {
|
||||
grid: {
|
||||
drawBorder: false,
|
||||
display: false,
|
||||
drawOnChartArea: false,
|
||||
drawTicks: false,
|
||||
},
|
||||
ticks: {
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
x: {
|
||||
grid: {
|
||||
drawBorder: false,
|
||||
display: false,
|
||||
drawOnChartArea: false,
|
||||
drawTicks: false,
|
||||
},
|
||||
ticks: {
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
export default configs;
|
||||
@ -1,109 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
import { useMemo, ReactNode } from "react";
|
||||
|
||||
// react-chartjs-2 components
|
||||
import { Pie } from "react-chartjs-2";
|
||||
|
||||
// @mui material components
|
||||
import Card from "@mui/material/Card";
|
||||
import Icon from "@mui/material/Icon";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDBox from "components/MDBox";
|
||||
import MDTypography from "components/MDTypography";
|
||||
|
||||
// PieChart configurations
|
||||
import configs from "examples/Charts/PieChart/configs";
|
||||
|
||||
// Declaring props types for PieChart
|
||||
interface Props {
|
||||
icon?: {
|
||||
color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark";
|
||||
component: ReactNode;
|
||||
};
|
||||
title?: string;
|
||||
description?: string | ReactNode;
|
||||
height?: string | number;
|
||||
chart: {
|
||||
labels: string[];
|
||||
datasets: {
|
||||
label: string;
|
||||
backgroundColors: string[];
|
||||
data: number[];
|
||||
};
|
||||
};
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
function PieChart({ icon, title, description, height, chart }: Props): JSX.Element {
|
||||
const { data, options } = configs(chart.labels || [], chart.datasets || {});
|
||||
|
||||
const renderChart = (
|
||||
<MDBox py={2} pr={2} pl={icon.component ? 1 : 2}>
|
||||
{title || description ? (
|
||||
<MDBox display="flex" px={description ? 1 : 0} pt={description ? 1 : 0}>
|
||||
{icon.component && (
|
||||
<MDBox
|
||||
width="4rem"
|
||||
height="4rem"
|
||||
bgColor={icon.color || "info"}
|
||||
variant="gradient"
|
||||
coloredShadow={icon.color || "info"}
|
||||
borderRadius="xl"
|
||||
display="flex"
|
||||
justifyContent="center"
|
||||
alignItems="center"
|
||||
color="white"
|
||||
mt={-5}
|
||||
mr={2}
|
||||
>
|
||||
<Icon fontSize="medium">{icon.component}</Icon>
|
||||
</MDBox>
|
||||
)}
|
||||
<MDBox mt={icon.component ? -2 : 0}>
|
||||
{title && <MDTypography variant="h6">{title}</MDTypography>}
|
||||
<MDBox mb={2}>
|
||||
<MDTypography component="div" variant="button" color="text">
|
||||
{description}
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
) : null}
|
||||
{useMemo(
|
||||
() => (
|
||||
<MDBox height={height}>
|
||||
<Pie data={data} options={options} />
|
||||
</MDBox>
|
||||
),
|
||||
[chart, height]
|
||||
)}
|
||||
</MDBox>
|
||||
);
|
||||
|
||||
return title || description ? <Card>{renderChart}</Card> : renderChart;
|
||||
}
|
||||
|
||||
// Declaring default props for PieChart
|
||||
PieChart.defaultProps = {
|
||||
icon: { color: "info", component: "" },
|
||||
title: "",
|
||||
description: "",
|
||||
height: "19.125rem",
|
||||
};
|
||||
|
||||
export default PieChart;
|
||||
@ -1,56 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
/* eslint-disable no-dupe-keys */
|
||||
// Material Dashboard 2 PRO React TS Base Styles
|
||||
import colors from "assets/theme/base/colors";
|
||||
|
||||
const { gradients, dark } = colors;
|
||||
|
||||
function configs(labels: any, datasets: any) {
|
||||
const backgroundColors = [];
|
||||
|
||||
if (datasets.backgroundColors) {
|
||||
datasets.backgroundColors.forEach((color: string) =>
|
||||
gradients[color]
|
||||
? backgroundColors.push(gradients[color].state)
|
||||
: backgroundColors.push(dark.main)
|
||||
);
|
||||
} else {
|
||||
backgroundColors.push(dark.main);
|
||||
}
|
||||
|
||||
return {
|
||||
data: {
|
||||
labels,
|
||||
datasets: [
|
||||
{
|
||||
label: datasets.label,
|
||||
backgroundColor: backgroundColors,
|
||||
data: datasets.data,
|
||||
},
|
||||
],
|
||||
},
|
||||
options: {
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
export default configs;
|
||||
@ -1,107 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
import { useMemo, ReactNode } from "react";
|
||||
|
||||
// react-chartjs-2 components
|
||||
import { PolarArea } from "react-chartjs-2";
|
||||
|
||||
// @mui material components
|
||||
import Card from "@mui/material/Card";
|
||||
import Icon from "@mui/material/Icon";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDBox from "components/MDBox";
|
||||
import MDTypography from "components/MDTypography";
|
||||
|
||||
// PolarChart configurations
|
||||
import configs from "examples/Charts/PolarChart/configs";
|
||||
|
||||
// Declaring props types for PolarChart
|
||||
interface Props {
|
||||
icon?: {
|
||||
color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark";
|
||||
component: ReactNode;
|
||||
};
|
||||
title?: string;
|
||||
description?: string | ReactNode;
|
||||
chart: {
|
||||
labels: string[];
|
||||
datasets: {
|
||||
label: string;
|
||||
backgroundColors: string[];
|
||||
data: number[];
|
||||
};
|
||||
};
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
function PolarChart({ icon, title, description, chart }: Props): JSX.Element {
|
||||
const { data, options } = configs(chart.labels || [], chart.datasets || {});
|
||||
|
||||
const renderChart = (
|
||||
<MDBox py={2} pr={2} pl={icon.component ? 1 : 2}>
|
||||
{title || description ? (
|
||||
<MDBox display="flex" px={description ? 1 : 0} pt={description ? 1 : 0}>
|
||||
{icon.component && (
|
||||
<MDBox
|
||||
width="4rem"
|
||||
height="4rem"
|
||||
bgColor={icon.color || "info"}
|
||||
variant="gradient"
|
||||
coloredShadow={icon.color || "info"}
|
||||
borderRadius="xl"
|
||||
display="flex"
|
||||
justifyContent="center"
|
||||
alignItems="center"
|
||||
color="white"
|
||||
mt={-5}
|
||||
mr={2}
|
||||
>
|
||||
<Icon fontSize="medium">{icon.component}</Icon>
|
||||
</MDBox>
|
||||
)}
|
||||
<MDBox mt={icon.component ? -2 : 0}>
|
||||
{title && <MDTypography variant="h6">{title}</MDTypography>}
|
||||
<MDBox mb={2}>
|
||||
<MDTypography component="div" variant="button" color="text">
|
||||
{description}
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
) : null}
|
||||
{useMemo(
|
||||
() => (
|
||||
<MDBox p={4}>
|
||||
<PolarArea data={data} options={options} />
|
||||
</MDBox>
|
||||
),
|
||||
[chart]
|
||||
)}
|
||||
</MDBox>
|
||||
);
|
||||
|
||||
return title || description ? <Card>{renderChart}</Card> : renderChart;
|
||||
}
|
||||
|
||||
// Declaring default props for PolarChart
|
||||
PolarChart.defaultProps = {
|
||||
icon: { color: "info", component: "" },
|
||||
title: "",
|
||||
description: "",
|
||||
};
|
||||
|
||||
export default PolarChart;
|
||||
@ -1,32 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
function configs(labels: any, datasets: any) {
|
||||
return {
|
||||
data: {
|
||||
labels,
|
||||
datasets: [...datasets],
|
||||
},
|
||||
options: {
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
export default configs;
|
||||
@ -1,123 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
import { useMemo, ReactNode } from "react";
|
||||
|
||||
// react-chartjs-2 components
|
||||
import { Radar } from "react-chartjs-2";
|
||||
|
||||
// @mui material components
|
||||
import Card from "@mui/material/Card";
|
||||
import Icon from "@mui/material/Icon";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDBox from "components/MDBox";
|
||||
import MDTypography from "components/MDTypography";
|
||||
|
||||
// RadarChart configurations
|
||||
import configs from "examples/Charts/RadarChart/configs";
|
||||
|
||||
// Material Dashboard 2 PRO React TS Base Styles
|
||||
import colors from "assets/theme/base/colors";
|
||||
|
||||
// Material Dashboard 2 PRO React TS Helper Functions
|
||||
import rgba from "assets/theme/functions/rgba";
|
||||
|
||||
// Declaring props types for RadarChart
|
||||
interface Props {
|
||||
icon?: {
|
||||
color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark";
|
||||
component: ReactNode;
|
||||
};
|
||||
title?: string;
|
||||
description?: string | ReactNode;
|
||||
chart: {
|
||||
labels: string[];
|
||||
datasets: {
|
||||
label: string;
|
||||
color: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark";
|
||||
data: number[];
|
||||
borderDash?: number[];
|
||||
}[];
|
||||
};
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
function RadarChart({ icon, title, description, chart }: Props): JSX.Element {
|
||||
const chartDatasets = chart.datasets
|
||||
? chart.datasets.map((dataset) => ({
|
||||
...dataset,
|
||||
backgroundColor: colors[dataset.color]
|
||||
? rgba(colors[dataset.color || "dark"].main, 0.2)
|
||||
: rgba(colors.dark.main, 0.2),
|
||||
}))
|
||||
: [];
|
||||
|
||||
const { data, options } = configs(chart.labels || [], chartDatasets);
|
||||
|
||||
const renderChart = (
|
||||
<MDBox py={2} pr={2} pl={icon.component ? 1 : 2}>
|
||||
{title || description ? (
|
||||
<MDBox display="flex" px={description ? 1 : 0} pt={description ? 1 : 0}>
|
||||
{icon.component && (
|
||||
<MDBox
|
||||
width="4rem"
|
||||
height="4rem"
|
||||
bgColor={icon.color || "info"}
|
||||
variant="gradient"
|
||||
coloredShadow={icon.color || "info"}
|
||||
borderRadius="xl"
|
||||
display="flex"
|
||||
justifyContent="center"
|
||||
alignItems="center"
|
||||
color="white"
|
||||
mt={-5}
|
||||
mr={2}
|
||||
>
|
||||
<Icon fontSize="medium">{icon.component}</Icon>
|
||||
</MDBox>
|
||||
)}
|
||||
<MDBox mt={icon.component ? -2 : 0}>
|
||||
{title && <MDTypography variant="h6">{title}</MDTypography>}
|
||||
<MDBox mb={2}>
|
||||
<MDTypography component="div" variant="button" color="text">
|
||||
{description}
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
) : null}
|
||||
{useMemo(
|
||||
() => (
|
||||
<MDBox p={6}>
|
||||
<Radar data={data} options={options} />
|
||||
</MDBox>
|
||||
),
|
||||
[chart]
|
||||
)}
|
||||
</MDBox>
|
||||
);
|
||||
|
||||
return title || description ? <Card>{renderChart}</Card> : renderChart;
|
||||
}
|
||||
|
||||
// Declaring default props for RadarChart
|
||||
RadarChart.defaultProps = {
|
||||
icon: { color: "info", component: "" },
|
||||
title: "",
|
||||
description: "",
|
||||
};
|
||||
|
||||
export default RadarChart;
|
||||
@ -1,58 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
import { forwardRef, FC, ReactNode } from "react";
|
||||
|
||||
// @mui material components
|
||||
import Icon from "@mui/material/Icon";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDBox from "components/MDBox";
|
||||
import MDTypography from "components/MDTypography";
|
||||
|
||||
// custom styles for the DefaultItem
|
||||
import defaultItemIconBox from "examples/Items/DefaultItem/styles";
|
||||
|
||||
// Declaring props types for DefaultItem
|
||||
interface Props {
|
||||
color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "dark";
|
||||
icon: ReactNode;
|
||||
title: string;
|
||||
description: string;
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
const DefaultItem: FC<Props> = forwardRef(({ color, icon, title, description, ...rest }, ref) => (
|
||||
<MDBox {...rest} ref={ref} display="flex" alignItems="center">
|
||||
<MDBox sx={(theme) => defaultItemIconBox(theme, { color })}>
|
||||
<Icon>{icon}</Icon>
|
||||
</MDBox>
|
||||
<MDBox ml={2} mt={0.5} lineHeight={1.4}>
|
||||
<MDTypography display="block" variant="button" fontWeight="medium">
|
||||
{title}
|
||||
</MDTypography>
|
||||
<MDTypography variant="button" fontWeight="regular" color="text">
|
||||
{description}
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
));
|
||||
|
||||
// Declaring default props for DefaultItem
|
||||
DefaultItem.defaultProps = {
|
||||
color: "info",
|
||||
};
|
||||
|
||||
export default DefaultItem;
|
||||
@ -1,25 +0,0 @@
|
||||
// @mui material components
|
||||
import { Theme } from "@mui/material/styles";
|
||||
|
||||
function defaultItemIconBox(theme: Theme, ownerState: any) {
|
||||
const { functions, palette, borders } = theme;
|
||||
const { color } = ownerState;
|
||||
|
||||
const { pxToRem, linearGradient } = functions;
|
||||
const { gradients, dark, white } = palette;
|
||||
const { borderRadius } = borders;
|
||||
|
||||
return {
|
||||
display: "grid",
|
||||
placeItems: "center",
|
||||
width: pxToRem(48),
|
||||
height: pxToRem(48),
|
||||
borderRadius: borderRadius.md,
|
||||
color: color === "light" ? dark.mian : white.main,
|
||||
background: gradients[color]
|
||||
? linearGradient(gradients[color].main, gradients[color].state)
|
||||
: linearGradient(gradients.info.main, gradients.info.state),
|
||||
};
|
||||
}
|
||||
|
||||
export default defaultItemIconBox;
|
||||
@ -1,59 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
import { useEffect, ReactNode } from "react";
|
||||
|
||||
// react-router-dom components
|
||||
import { useLocation } from "react-router-dom";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDBox from "components/MDBox";
|
||||
|
||||
// Material Dashboard 2 PRO React context
|
||||
import { useMaterialUIController, setLayout } from "context";
|
||||
|
||||
// Declaring props types for PageLayout
|
||||
interface Props {
|
||||
background?: "white" | "light" | "default";
|
||||
children: ReactNode;
|
||||
}
|
||||
|
||||
function PageLayout({ background, children }: Props): JSX.Element {
|
||||
const [, dispatch] = useMaterialUIController();
|
||||
const { pathname } = useLocation();
|
||||
|
||||
useEffect(() => {
|
||||
setLayout(dispatch, "page");
|
||||
}, [pathname]);
|
||||
|
||||
return (
|
||||
<MDBox
|
||||
width="100vw"
|
||||
height="100%"
|
||||
minHeight="100vh"
|
||||
bgColor={background}
|
||||
sx={{ overflowX: "hidden" }}
|
||||
>
|
||||
{children}
|
||||
</MDBox>
|
||||
);
|
||||
}
|
||||
|
||||
// Declaring default props for PageLayout
|
||||
PageLayout.defaultProps = {
|
||||
background: "default",
|
||||
};
|
||||
|
||||
export default PageLayout;
|
||||
@ -1,126 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
import { ReactNode } from "react";
|
||||
|
||||
// react-router-dom components
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
// @mui material components
|
||||
import Card from "@mui/material/Card";
|
||||
import Icon from "@mui/material/Icon";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDBox from "components/MDBox";
|
||||
import MDTypography from "components/MDTypography";
|
||||
|
||||
// Declaring props types for CategoriesList
|
||||
interface Props {
|
||||
title: string;
|
||||
categories: {
|
||||
color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "light" | "dark";
|
||||
icon: ReactNode | string;
|
||||
name: string;
|
||||
description: ReactNode;
|
||||
route: string;
|
||||
}[];
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
function CategoriesList({ title, categories }: Props): JSX.Element {
|
||||
const renderItems = categories.map(({ color, icon, name, description, route }, key) => (
|
||||
<MDBox
|
||||
key={name}
|
||||
component="li"
|
||||
display="flex"
|
||||
justifyContent="space-between"
|
||||
alignItems="center"
|
||||
borderRadius="lg"
|
||||
py={1}
|
||||
pr={2}
|
||||
mb={categories.length - 1 === key ? 0 : 1}
|
||||
>
|
||||
<MDBox display="flex" alignItems="center">
|
||||
<MDBox
|
||||
display="grid"
|
||||
alignItems="center"
|
||||
justifyContent="center"
|
||||
bgColor={color}
|
||||
borderRadius="lg"
|
||||
shadow="md"
|
||||
color="white"
|
||||
width="2rem"
|
||||
height="2rem"
|
||||
mr={2}
|
||||
variant="gradient"
|
||||
fontSize="0.875rem"
|
||||
>
|
||||
<Icon
|
||||
sx={{
|
||||
display: "grid",
|
||||
placeItems: "center",
|
||||
}}
|
||||
>
|
||||
{icon}
|
||||
</Icon>
|
||||
</MDBox>
|
||||
<MDBox display="flex" flexDirection="column">
|
||||
<MDTypography variant="button" color={color} fontWeight="medium" gutterBottom>
|
||||
{name}
|
||||
</MDTypography>
|
||||
<MDTypography variant="caption" color="text">
|
||||
{description}
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
<MDBox display="flex">
|
||||
<MDTypography
|
||||
component={Link}
|
||||
variant="button"
|
||||
color={color}
|
||||
to={route}
|
||||
sx={{
|
||||
lineHeight: 0,
|
||||
transition: "all 0.2s cubic-bezier(.34,1.61,.7,1.3)",
|
||||
p: 0.5,
|
||||
|
||||
"&:hover, &:focus": {
|
||||
transform: "translateX(5px)",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Icon sx={{ fontWeight: "bold" }}>chevron_right</Icon>
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
));
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<MDBox pt={2} px={2}>
|
||||
<MDTypography variant="h6" fontWeight="medium" textTransform="capitalize">
|
||||
{title}
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
<MDBox p={2}>
|
||||
<MDBox component="ul" display="flex" flexDirection="column" p={0} m={0}>
|
||||
{renderItems}
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
export default CategoriesList;
|
||||
@ -1,121 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
import { ReactNode } from "react";
|
||||
|
||||
// react-router-dom components
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
// @mui material components
|
||||
import Collapse from "@mui/material/Collapse";
|
||||
import Icon from "@mui/material/Icon";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDBox from "components/MDBox";
|
||||
import MDTypography from "components/MDTypography";
|
||||
|
||||
// Declaring props types for DefaultNavbarDropdown
|
||||
interface Props {
|
||||
name: string;
|
||||
icon?: ReactNode;
|
||||
children?: ReactNode;
|
||||
collapseStatus?: boolean;
|
||||
light?: boolean;
|
||||
href?: string;
|
||||
route?: string;
|
||||
collapse: boolean;
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
function DefaultNavbarDropdown({
|
||||
name,
|
||||
icon,
|
||||
children,
|
||||
collapseStatus,
|
||||
light,
|
||||
href,
|
||||
route,
|
||||
collapse,
|
||||
...rest
|
||||
}: Props): JSX.Element {
|
||||
const linkComponent = {
|
||||
component: "a",
|
||||
href,
|
||||
target: "_blank",
|
||||
rel: "noreferrer",
|
||||
};
|
||||
|
||||
const routeComponent: any = {
|
||||
component: Link,
|
||||
to: route,
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<MDBox
|
||||
{...rest}
|
||||
mx={1}
|
||||
p={1}
|
||||
display="flex"
|
||||
alignItems="baseline"
|
||||
color={light ? "white" : "dark"}
|
||||
opacity={light ? 1 : 0.6}
|
||||
sx={{ cursor: "pointer", userSelect: "none" }}
|
||||
{...(route && routeComponent)}
|
||||
{...(href && linkComponent)}
|
||||
>
|
||||
<MDTypography
|
||||
variant="body2"
|
||||
lineHeight={1}
|
||||
color="inherit"
|
||||
sx={{ alignSelf: "center", "& *": { verticalAlign: "middle" } }}
|
||||
>
|
||||
{icon}
|
||||
</MDTypography>
|
||||
<MDTypography
|
||||
variant="button"
|
||||
fontWeight="regular"
|
||||
textTransform="capitalize"
|
||||
color={light ? "white" : "dark"}
|
||||
sx={{ fontWeight: "100%", ml: 1, mr: 0.25 }}
|
||||
>
|
||||
{name}
|
||||
</MDTypography>
|
||||
<MDTypography variant="body2" color={light ? "white" : "dark"} ml="auto">
|
||||
<Icon sx={{ fontWeight: "normal", verticalAlign: "middle" }}>
|
||||
{collapse && "keyboard_arrow_down"}
|
||||
</Icon>
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
{children && (
|
||||
<Collapse in={Boolean(collapseStatus)} timeout={400} unmountOnExit>
|
||||
{children}
|
||||
</Collapse>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
// Declaring default props for DefaultNavbarDropdown
|
||||
DefaultNavbarDropdown.defaultProps = {
|
||||
icon: false,
|
||||
children: false,
|
||||
collapseStatus: false,
|
||||
light: false,
|
||||
href: "",
|
||||
route: "",
|
||||
};
|
||||
|
||||
export default DefaultNavbarDropdown;
|
||||
@ -1,165 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
import { useState } from "react";
|
||||
|
||||
// react-router components
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
// @mui material components
|
||||
import Collapse from "@mui/material/Collapse";
|
||||
import MuiLink from "@mui/material/Link";
|
||||
import { Theme } from "@mui/material/styles";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDBox from "components/MDBox";
|
||||
import MDTypography from "components/MDTypography";
|
||||
|
||||
// Material Dashboard 2 PRO React TS exampless
|
||||
import DefaultNavbarDropdown from "examples/Navbars/DefaultNavbar/DefaultNavbarDropdown";
|
||||
|
||||
// Declaring props types for DefaultNavbarMobile
|
||||
interface Props {
|
||||
routes: any;
|
||||
open: any;
|
||||
}
|
||||
|
||||
function DefaultNavbarMobile({ routes, open }: Props): JSX.Element {
|
||||
const [collapse, setCollapse] = useState<string | boolean>("");
|
||||
|
||||
const handleSetCollapse = (name: string) =>
|
||||
collapse === name ? setCollapse(false) : setCollapse(name);
|
||||
|
||||
const renderNavbarItems = routes.map(
|
||||
({ name, icon, collapse: routeCollapses, href, route, collapse: navCollapse }: any) => (
|
||||
<DefaultNavbarDropdown
|
||||
key={name}
|
||||
name={name}
|
||||
icon={icon}
|
||||
collapseStatus={name === collapse}
|
||||
onClick={() => handleSetCollapse(name)}
|
||||
href={href}
|
||||
route={route}
|
||||
collapse={Boolean(navCollapse)}
|
||||
>
|
||||
<MDBox sx={{ height: "15rem", maxHeight: "15rem", overflowY: "scroll" }}>
|
||||
{routeCollapses &&
|
||||
routeCollapses.map((item: any) => (
|
||||
<MDBox key={item.name} px={2}>
|
||||
{item.collapse ? (
|
||||
<>
|
||||
<MDTypography
|
||||
display="block"
|
||||
variant="button"
|
||||
fontWeight="bold"
|
||||
textTransform="capitalize"
|
||||
py={1}
|
||||
px={0.5}
|
||||
>
|
||||
{item.name}
|
||||
</MDTypography>
|
||||
{item.collapse.map((el: any) => (
|
||||
<MDTypography
|
||||
key={el.name}
|
||||
component={el.route ? Link : MuiLink}
|
||||
to={el.route ? el.route : ""}
|
||||
href={el.href ? el.href : ""}
|
||||
target={el.href ? "_blank" : ""}
|
||||
rel={el.href ? "noreferrer" : "noreferrer"}
|
||||
minWidth="11.25rem"
|
||||
display="block"
|
||||
variant="button"
|
||||
color="text"
|
||||
textTransform="capitalize"
|
||||
fontWeight="regular"
|
||||
py={0.625}
|
||||
px={2}
|
||||
sx={({ palette: { grey, dark }, borders: { borderRadius } }: Theme) => ({
|
||||
borderRadius: borderRadius.md,
|
||||
cursor: "pointer",
|
||||
transition: "all 300ms linear",
|
||||
|
||||
"&:hover": {
|
||||
backgroundColor: grey[200],
|
||||
color: dark.main,
|
||||
},
|
||||
})}
|
||||
>
|
||||
{el.name}
|
||||
</MDTypography>
|
||||
))}
|
||||
</>
|
||||
) : (
|
||||
<MDBox
|
||||
key={item.key}
|
||||
display="block"
|
||||
component={item.route ? Link : MuiLink}
|
||||
to={item.route ? item.route : ""}
|
||||
href={item.href ? item.href : ""}
|
||||
target={item.href ? "_blank" : ""}
|
||||
rel={item.href ? "noreferrer" : "noreferrer"}
|
||||
sx={({ palette: { grey, dark }, borders: { borderRadius } }) => ({
|
||||
borderRadius: borderRadius.md,
|
||||
cursor: "pointer",
|
||||
transition: "all 300ms linear",
|
||||
py: 1,
|
||||
px: 1.625,
|
||||
|
||||
"&:hover": {
|
||||
backgroundColor: grey[200],
|
||||
color: dark.main,
|
||||
|
||||
"& *": {
|
||||
color: dark.main,
|
||||
},
|
||||
},
|
||||
})}
|
||||
>
|
||||
<MDTypography
|
||||
display="block"
|
||||
variant="button"
|
||||
fontWeight="bold"
|
||||
textTransform="capitalize"
|
||||
>
|
||||
{item.name}
|
||||
</MDTypography>
|
||||
<MDTypography
|
||||
display="block"
|
||||
variant="button"
|
||||
color="text"
|
||||
fontWeight="regular"
|
||||
sx={{ transition: "all 300ms linear" }}
|
||||
>
|
||||
{item.description}
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
)}
|
||||
</MDBox>
|
||||
))}
|
||||
</MDBox>
|
||||
</DefaultNavbarDropdown>
|
||||
)
|
||||
);
|
||||
|
||||
return (
|
||||
<Collapse in={Boolean(open)} timeout="auto" unmountOnExit>
|
||||
<MDBox width="calc(100% + 1.625rem)" my={2} ml={-2}>
|
||||
{renderNavbarItems}
|
||||
</MDBox>
|
||||
</Collapse>
|
||||
);
|
||||
}
|
||||
|
||||
export default DefaultNavbarMobile;
|
||||
@ -1,609 +0,0 @@
|
||||
/* eslint-disable no-param-reassign */
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
import { useState, useEffect, ReactNode, Fragment } from "react";
|
||||
|
||||
// react-router components
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
// @mui material components
|
||||
import Icon from "@mui/material/Icon";
|
||||
import Popper from "@mui/material/Popper";
|
||||
import Grow, { GrowProps } from "@mui/material/Grow";
|
||||
import Grid from "@mui/material/Grid";
|
||||
import Divider from "@mui/material/Divider";
|
||||
import MuiLink from "@mui/material/Link";
|
||||
import Container from "@mui/material/Container";
|
||||
import { Theme } from "@mui/material/styles";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDBox from "components/MDBox";
|
||||
import MDTypography from "components/MDTypography";
|
||||
import MDButton from "components/MDButton";
|
||||
|
||||
// Material Dashboard 2 PRO React TS examples components
|
||||
import DefaultNavbarDropdown from "examples/Navbars/DefaultNavbar/DefaultNavbarDropdown";
|
||||
import DefaultNavbarMobile from "examples/Navbars/DefaultNavbar/DefaultNavbarMobile";
|
||||
|
||||
// Material Dashboard 2 PRO React TS Base Styles
|
||||
import breakpoints from "assets/theme/base/breakpoints";
|
||||
|
||||
// Material Dashboard 2 PRO React context
|
||||
import { useMaterialUIController } from "context";
|
||||
|
||||
// Declaring props types for DefaultNavbar
|
||||
interface Props {
|
||||
routes: {
|
||||
[key: string]:
|
||||
| ReactNode
|
||||
| string
|
||||
| {
|
||||
[key: string]: string | any;
|
||||
}[];
|
||||
}[];
|
||||
brand?: string;
|
||||
transparent?: boolean;
|
||||
light?: boolean;
|
||||
action?: {
|
||||
type: "external" | "internal";
|
||||
route: string;
|
||||
color: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "dark" | "light";
|
||||
label: string;
|
||||
};
|
||||
}
|
||||
|
||||
interface NewGrowTypes extends GrowProps {
|
||||
sx: any;
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
function NewGrow(props: NewGrowTypes) {
|
||||
return <Grow {...props} />;
|
||||
}
|
||||
|
||||
function DefaultNavbar({ routes, brand, transparent, light, action }: Props): JSX.Element {
|
||||
const [controller] = useMaterialUIController();
|
||||
const { darkMode } = controller;
|
||||
|
||||
const [dropdown, setDropdown] = useState<any>("");
|
||||
const [dropdownEl, setDropdownEl] = useState<any>("");
|
||||
const [dropdownName, setDropdownName] = useState<any>("");
|
||||
const [nestedDropdown, setNestedDropdown] = useState<any>("");
|
||||
const [nestedDropdownEl, setNestedDropdownEl] = useState<any>("");
|
||||
const [nestedDropdownName, setNestedDropdownName] = useState<any>("");
|
||||
const [arrowRef, setArrowRef] = useState<any>(null);
|
||||
const [mobileNavbar, setMobileNavbar] = useState<boolean>(false);
|
||||
const [mobileView, setMobileView] = useState<boolean>(false);
|
||||
|
||||
const openMobileNavbar = () => setMobileNavbar(!mobileNavbar);
|
||||
|
||||
useEffect(() => {
|
||||
// A function that sets the display state for the DefaultNavbarMobile.
|
||||
function displayMobileNavbar() {
|
||||
if (window.innerWidth < breakpoints.values.lg) {
|
||||
setMobileView(true);
|
||||
setMobileNavbar(false);
|
||||
} else {
|
||||
setMobileView(false);
|
||||
setMobileNavbar(false);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
The event listener that's calling the displayMobileNavbar function when
|
||||
resizing the window.
|
||||
*/
|
||||
window.addEventListener("resize", displayMobileNavbar);
|
||||
|
||||
// Call the displayMobileNavbar function to set the state with the initial value.
|
||||
displayMobileNavbar();
|
||||
|
||||
// Remove event listener on cleanup
|
||||
return () => window.removeEventListener("resize", displayMobileNavbar);
|
||||
}, []);
|
||||
|
||||
const renderNavbarItems = routes.map(({ name, icon, href, route, collapse }: any) => (
|
||||
<DefaultNavbarDropdown
|
||||
key={name}
|
||||
name={name}
|
||||
icon={icon}
|
||||
href={href}
|
||||
route={route}
|
||||
collapse={Boolean(collapse)}
|
||||
onMouseEnter={({ currentTarget }: any) => {
|
||||
if (collapse) {
|
||||
setDropdown(currentTarget);
|
||||
setDropdownEl(currentTarget);
|
||||
setDropdownName(name);
|
||||
}
|
||||
}}
|
||||
onMouseLeave={() => collapse && setDropdown(null)}
|
||||
light={light}
|
||||
/>
|
||||
));
|
||||
|
||||
// Render the routes on the dropdown menu
|
||||
const renderRoutes = routes.map(({ name, collapse, columns, rowsPerColumn }: any) => {
|
||||
let template;
|
||||
|
||||
// Render the dropdown menu that should be display as columns
|
||||
if (collapse && columns && name === dropdownName) {
|
||||
const calculateColumns = collapse.reduce((resultArray: any, item: any, index: any) => {
|
||||
const chunkIndex = Math.floor(index / rowsPerColumn);
|
||||
|
||||
if (!resultArray[chunkIndex]) {
|
||||
resultArray[chunkIndex] = [];
|
||||
}
|
||||
|
||||
resultArray[chunkIndex].push(item);
|
||||
|
||||
return resultArray;
|
||||
}, []);
|
||||
|
||||
template = (
|
||||
<Grid key={name} container spacing={3} py={1} px={1.5}>
|
||||
{calculateColumns.map((cols: any, key: any) => {
|
||||
const gridKey = `grid-${key}`;
|
||||
const dividerKey = `divider-${key}`;
|
||||
|
||||
return (
|
||||
<Grid key={gridKey} item xs={12 / columns} sx={{ position: "relative" }}>
|
||||
{cols.map((col: any, index: any) => (
|
||||
<Fragment key={col.name}>
|
||||
<MDBox
|
||||
width="100%"
|
||||
display="flex"
|
||||
alignItems="center"
|
||||
py={1}
|
||||
mt={index !== 0 ? 2 : 0}
|
||||
>
|
||||
<MDBox
|
||||
display="flex"
|
||||
justifyContent="center"
|
||||
alignItems="center"
|
||||
width="1.5rem"
|
||||
height="1.5rem"
|
||||
borderRadius="md"
|
||||
color="text"
|
||||
mr={1}
|
||||
fontSize="1rem"
|
||||
lineHeight={1}
|
||||
>
|
||||
{col.icon}
|
||||
</MDBox>
|
||||
<MDTypography
|
||||
display="block"
|
||||
variant="button"
|
||||
fontWeight="bold"
|
||||
textTransform="capitalize"
|
||||
>
|
||||
{col.name}
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
{col.collapse.map((item: any) => (
|
||||
<MDTypography
|
||||
key={item.name}
|
||||
component={item.route ? Link : MuiLink}
|
||||
to={item.route ? item.route : ""}
|
||||
href={item.href ? item.href : (e: any) => e.preventDefault()}
|
||||
target={item.href ? "_blank" : ""}
|
||||
rel={item.href ? "noreferrer" : "noreferrer"}
|
||||
minWidth="11.25rem"
|
||||
display="block"
|
||||
variant="button"
|
||||
color="text"
|
||||
textTransform="capitalize"
|
||||
fontWeight="regular"
|
||||
py={0.625}
|
||||
px={2}
|
||||
sx={({ palette: { grey, dark }, borders: { borderRadius } }: Theme) => ({
|
||||
borderRadius: borderRadius.md,
|
||||
cursor: "pointer",
|
||||
transition: "all 300ms linear",
|
||||
|
||||
"&:hover": {
|
||||
backgroundColor: grey[200],
|
||||
color: dark.main,
|
||||
},
|
||||
})}
|
||||
>
|
||||
{item.name}
|
||||
</MDTypography>
|
||||
))}
|
||||
</Fragment>
|
||||
))}
|
||||
{key !== 0 && (
|
||||
<Divider
|
||||
key={dividerKey}
|
||||
orientation="vertical"
|
||||
sx={{
|
||||
position: "absolute",
|
||||
top: "50%",
|
||||
left: "-4px",
|
||||
transform: "translateY(-45%)",
|
||||
height: "90%",
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</Grid>
|
||||
);
|
||||
})}
|
||||
</Grid>
|
||||
);
|
||||
|
||||
// Render the dropdown menu that should be display as list items
|
||||
} else if (collapse && name === dropdownName) {
|
||||
template = collapse.map((item: any) => {
|
||||
const linkComponent = {
|
||||
component: MuiLink,
|
||||
href: item.href,
|
||||
target: "_blank",
|
||||
rel: "noreferrer",
|
||||
};
|
||||
|
||||
const routeComponent = {
|
||||
component: Link,
|
||||
to: item.route,
|
||||
};
|
||||
|
||||
return (
|
||||
<MDTypography
|
||||
key={item.name}
|
||||
{...(item.route ? routeComponent : linkComponent)}
|
||||
display="flex"
|
||||
justifyContent="space-between"
|
||||
alignItems="center"
|
||||
variant="button"
|
||||
textTransform="capitalize"
|
||||
minWidth={item.description ? "14rem" : "12rem"}
|
||||
color={item.description ? "dark" : "text"}
|
||||
fontWeight={item.description ? "bold" : "regular"}
|
||||
py={item.description ? 1 : 0.625}
|
||||
px={2}
|
||||
sx={({ palette: { grey, dark }, borders: { borderRadius } }: Theme) => ({
|
||||
borderRadius: borderRadius.md,
|
||||
cursor: "pointer",
|
||||
transition: "all 300ms linear",
|
||||
|
||||
"&:hover": {
|
||||
backgroundColor: grey[200],
|
||||
color: dark.main,
|
||||
|
||||
"& *": {
|
||||
color: dark.main,
|
||||
},
|
||||
},
|
||||
})}
|
||||
onMouseEnter={({ currentTarget }: any) => {
|
||||
if (item.dropdown) {
|
||||
setNestedDropdown(currentTarget);
|
||||
setNestedDropdownEl(currentTarget);
|
||||
setNestedDropdownName(item.name);
|
||||
}
|
||||
}}
|
||||
onMouseLeave={() => {
|
||||
if (item.dropdown) {
|
||||
setNestedDropdown(null);
|
||||
}
|
||||
}}
|
||||
>
|
||||
{item.description ? (
|
||||
<MDBox display="flex" py={0.25} fontSize="1rem" color="text">
|
||||
{typeof item.icon === "string" ? (
|
||||
<Icon color="inherit">{item.icon}</Icon>
|
||||
) : (
|
||||
<MDBox color="inherit">{item.icon}</MDBox>
|
||||
)}
|
||||
<MDBox pl={1} lineHeight={0}>
|
||||
<MDTypography
|
||||
variant="button"
|
||||
display="block"
|
||||
fontWeight="bold"
|
||||
textTransform="capitalize"
|
||||
>
|
||||
{item.name}
|
||||
</MDTypography>
|
||||
<MDTypography variant="button" fontWeight="regular" color="text">
|
||||
{item.description}
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
) : (
|
||||
<MDBox display="flex" alignItems="center" color="text">
|
||||
<Icon sx={{ mr: 1 }}>{item.icon}</Icon>
|
||||
{item.name}
|
||||
</MDBox>
|
||||
)}
|
||||
{item.collapse && (
|
||||
<Icon sx={{ fontWeight: "normal", verticalAlign: "middle", mr: -0.5 }}>
|
||||
keyboard_arrow_right
|
||||
</Icon>
|
||||
)}
|
||||
</MDTypography>
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
return template;
|
||||
});
|
||||
|
||||
// Routes dropdown menu
|
||||
const dropdownMenu = (
|
||||
<Popper
|
||||
anchorEl={dropdown}
|
||||
popperRef={null}
|
||||
open={Boolean(dropdown)}
|
||||
placement="top-start"
|
||||
transition
|
||||
style={{ zIndex: 10 }}
|
||||
modifiers={[
|
||||
{
|
||||
name: "arrow",
|
||||
enabled: true,
|
||||
options: {
|
||||
element: arrowRef,
|
||||
},
|
||||
},
|
||||
]}
|
||||
onMouseEnter={() => setDropdown(dropdownEl)}
|
||||
onMouseLeave={() => {
|
||||
if (!nestedDropdown) {
|
||||
setDropdown(null);
|
||||
setDropdownName("");
|
||||
}
|
||||
}}
|
||||
>
|
||||
{({ TransitionProps }) => (
|
||||
<NewGrow
|
||||
{...TransitionProps}
|
||||
sx={{
|
||||
transformOrigin: "left top",
|
||||
background: ({ palette: { white } }: Theme) => white.main,
|
||||
}}
|
||||
>
|
||||
<MDBox borderRadius="lg">
|
||||
<MDTypography variant="h1" color="white">
|
||||
<Icon ref={setArrowRef} sx={{ mt: -3 }}>
|
||||
arrow_drop_up
|
||||
</Icon>
|
||||
</MDTypography>
|
||||
<MDBox shadow="lg" borderRadius="lg" p={1.625} mt={1}>
|
||||
{renderRoutes}
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
</NewGrow>
|
||||
)}
|
||||
</Popper>
|
||||
);
|
||||
|
||||
// Render routes that are nested inside the dropdown menu routes
|
||||
const renderNestedRoutes = routes.map(({ collapse, columns }: any) =>
|
||||
collapse && !columns
|
||||
? collapse.map(({ name: parentName, collapse: nestedCollapse }: any) => {
|
||||
let template;
|
||||
|
||||
if (parentName === nestedDropdownName) {
|
||||
template =
|
||||
nestedCollapse &&
|
||||
nestedCollapse.map((item: any) => {
|
||||
const linkComponent = {
|
||||
component: MuiLink,
|
||||
href: item.href,
|
||||
target: "_blank",
|
||||
rel: "noreferrer",
|
||||
};
|
||||
|
||||
const routeComponent = {
|
||||
component: Link,
|
||||
to: item.route,
|
||||
};
|
||||
|
||||
return (
|
||||
<MDTypography
|
||||
key={item.name}
|
||||
{...(item.route ? routeComponent : linkComponent)}
|
||||
display="flex"
|
||||
justifyContent="space-between"
|
||||
alignItems="center"
|
||||
variant="button"
|
||||
textTransform="capitalize"
|
||||
minWidth={item.description ? "14rem" : "12rem"}
|
||||
color={item.description ? "dark" : "text"}
|
||||
fontWeight={item.description ? "bold" : "regular"}
|
||||
py={item.description ? 1 : 0.625}
|
||||
px={2}
|
||||
sx={({ palette: { grey, dark }, borders: { borderRadius } }: Theme) => ({
|
||||
borderRadius: borderRadius.md,
|
||||
cursor: "pointer",
|
||||
transition: "all 300ms linear",
|
||||
|
||||
"&:hover": {
|
||||
backgroundColor: grey[200],
|
||||
color: dark.main,
|
||||
|
||||
"& *": {
|
||||
color: dark.main,
|
||||
},
|
||||
},
|
||||
})}
|
||||
>
|
||||
{item.description ? (
|
||||
<MDBox>
|
||||
{item.name}
|
||||
<MDTypography
|
||||
display="block"
|
||||
variant="button"
|
||||
color="text"
|
||||
fontWeight="regular"
|
||||
sx={{ transition: "all 300ms linear" }}
|
||||
>
|
||||
{item.description}
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
) : (
|
||||
item.name
|
||||
)}
|
||||
{item.collapse && (
|
||||
<Icon
|
||||
fontSize="small"
|
||||
sx={{ fontWeight: "normal", verticalAlign: "middle", mr: -0.5 }}
|
||||
>
|
||||
keyboard_arrow_right
|
||||
</Icon>
|
||||
)}
|
||||
</MDTypography>
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
return template;
|
||||
})
|
||||
: null
|
||||
);
|
||||
|
||||
// Dropdown menu for the nested dropdowns
|
||||
const nestedDropdownMenu = (
|
||||
<Popper
|
||||
anchorEl={nestedDropdown}
|
||||
popperRef={null}
|
||||
open={Boolean(nestedDropdown)}
|
||||
placement="right-start"
|
||||
transition
|
||||
style={{ zIndex: 10 }}
|
||||
onMouseEnter={() => {
|
||||
setNestedDropdown(nestedDropdownEl);
|
||||
}}
|
||||
onMouseLeave={() => {
|
||||
setNestedDropdown(null);
|
||||
setNestedDropdownName("");
|
||||
setDropdown(null);
|
||||
}}
|
||||
>
|
||||
{({ TransitionProps }) => (
|
||||
<NewGrow
|
||||
{...TransitionProps}
|
||||
sx={{
|
||||
transformOrigin: "left top",
|
||||
background: ({ palette: { white } }: Theme) => white.main,
|
||||
}}
|
||||
>
|
||||
<MDBox ml={2.5} mt={-2.5} borderRadius="lg">
|
||||
<MDBox shadow="lg" borderRadius="lg" py={1.5} px={1} mt={2}>
|
||||
{renderNestedRoutes}
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
</NewGrow>
|
||||
)}
|
||||
</Popper>
|
||||
);
|
||||
|
||||
return (
|
||||
<Container>
|
||||
<MDBox
|
||||
py={1}
|
||||
px={{ xs: 4, sm: transparent ? 2 : 3, lg: transparent ? 0 : 2 }}
|
||||
my={3}
|
||||
mx={3}
|
||||
width="calc(100% - 48px)"
|
||||
borderRadius="lg"
|
||||
shadow={transparent ? "none" : "md"}
|
||||
color={light ? "white" : "dark"}
|
||||
display="flex"
|
||||
justifyContent="space-between"
|
||||
alignItems="center"
|
||||
position="absolute"
|
||||
left={0}
|
||||
zIndex={3}
|
||||
sx={({
|
||||
palette: { transparent: transparentColor, white, background },
|
||||
functions: { rgba },
|
||||
}: any) => ({
|
||||
backgroundColor: transparent
|
||||
? transparentColor.main
|
||||
: rgba(darkMode ? background.sidenav : white.main, 0.8),
|
||||
backdropFilter: transparent ? "none" : `saturate(200%) blur(30px)`,
|
||||
})}
|
||||
>
|
||||
<MDBox
|
||||
component={Link}
|
||||
to="/"
|
||||
py={transparent ? 1.5 : 0.75}
|
||||
lineHeight={1}
|
||||
pl={{ xs: 0, lg: 1 }}
|
||||
>
|
||||
<MDTypography variant="button" fontWeight="bold" color={light ? "white" : "dark"}>
|
||||
{brand}
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
<MDBox color="inherit" display={{ xs: "none", lg: "flex" }} m={0} p={0}>
|
||||
{renderNavbarItems}
|
||||
</MDBox>
|
||||
{action &&
|
||||
(action.type === "internal" ? (
|
||||
<MDBox display={{ xs: "none", lg: "inline-block" }}>
|
||||
<MDButton
|
||||
component={Link}
|
||||
to={action.route}
|
||||
variant="gradient"
|
||||
color={action.color ? action.color : "info"}
|
||||
size="small"
|
||||
>
|
||||
{action.label}
|
||||
</MDButton>
|
||||
</MDBox>
|
||||
) : (
|
||||
<MDBox display={{ xs: "none", lg: "inline-block" }}>
|
||||
<MDButton
|
||||
component="a"
|
||||
href={action.route}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
variant="gradient"
|
||||
color={action.color ? action.color : "info"}
|
||||
size="small"
|
||||
sx={{ mt: -0.3 }}
|
||||
>
|
||||
{action.label}
|
||||
</MDButton>
|
||||
</MDBox>
|
||||
))}
|
||||
<MDBox
|
||||
display={{ xs: "inline-block", lg: "none" }}
|
||||
lineHeight={0}
|
||||
py={1.5}
|
||||
pl={1.5}
|
||||
color="inherit"
|
||||
sx={{ cursor: "pointer" }}
|
||||
onClick={openMobileNavbar}
|
||||
>
|
||||
{mobileView && <DefaultNavbarMobile routes={routes} open={mobileNavbar} />}
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
{dropdownMenu}
|
||||
{nestedDropdownMenu}
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
// Declaring default props for DefaultNavbar
|
||||
DefaultNavbar.defaultProps = {
|
||||
brand: "Material Dashboard PRO",
|
||||
transparent: false,
|
||||
light: false,
|
||||
action: false,
|
||||
};
|
||||
|
||||
export default DefaultNavbar;
|
||||
@ -1,128 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
import { ReactNode } from "react";
|
||||
|
||||
// @mui material components
|
||||
import Collapse from "@mui/material/Collapse";
|
||||
import ListItem from "@mui/material/ListItem";
|
||||
import ListItemIcon from "@mui/material/ListItemIcon";
|
||||
import ListItemText from "@mui/material/ListItemText";
|
||||
import Icon from "@mui/material/Icon";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDBox from "components/MDBox";
|
||||
|
||||
// Custom styles for the SidenavCollapse
|
||||
import {
|
||||
collapseItem,
|
||||
collapseIconBox,
|
||||
collapseIcon,
|
||||
collapseText,
|
||||
collapseArrow,
|
||||
} from "examples/Sidenav/styles/sidenavCollapse";
|
||||
|
||||
// Material Dashboard 2 PRO React context
|
||||
import { useMaterialUIController } from "context";
|
||||
|
||||
// Declaring props types for SidenavCollapse
|
||||
interface Props {
|
||||
icon: ReactNode;
|
||||
name: string;
|
||||
children?: ReactNode;
|
||||
active?: Boolean;
|
||||
noCollapse?: Boolean;
|
||||
open?: Boolean;
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
function SidenavCollapse({
|
||||
icon,
|
||||
name,
|
||||
children,
|
||||
active,
|
||||
noCollapse,
|
||||
open,
|
||||
...rest
|
||||
}: Props): JSX.Element {
|
||||
const [controller] = useMaterialUIController();
|
||||
const { miniSidenav, transparentSidenav, whiteSidenav, darkMode } = controller;
|
||||
|
||||
return (
|
||||
<>
|
||||
<ListItem component="li">
|
||||
<MDBox
|
||||
{...rest}
|
||||
sx={(theme: any) =>
|
||||
collapseItem(theme, { active, transparentSidenav, whiteSidenav, darkMode })
|
||||
}
|
||||
>
|
||||
<ListItemIcon
|
||||
sx={(theme) => collapseIconBox(theme, { transparentSidenav, whiteSidenav, darkMode })}
|
||||
>
|
||||
{typeof icon === "string" ? (
|
||||
<Icon sx={(theme) => collapseIcon(theme, { active })}>{icon}</Icon>
|
||||
) : (
|
||||
icon
|
||||
)}
|
||||
</ListItemIcon>
|
||||
|
||||
<ListItemText
|
||||
primary={name}
|
||||
sx={(theme) =>
|
||||
collapseText(theme, {
|
||||
miniSidenav,
|
||||
transparentSidenav,
|
||||
whiteSidenav,
|
||||
active,
|
||||
})
|
||||
}
|
||||
/>
|
||||
|
||||
<Icon
|
||||
sx={(theme) =>
|
||||
collapseArrow(theme, {
|
||||
noCollapse,
|
||||
transparentSidenav,
|
||||
whiteSidenav,
|
||||
miniSidenav,
|
||||
open,
|
||||
active,
|
||||
darkMode,
|
||||
})
|
||||
}
|
||||
>
|
||||
expand_less
|
||||
</Icon>
|
||||
</MDBox>
|
||||
</ListItem>
|
||||
{children && (
|
||||
<Collapse in={Boolean(open)} unmountOnExit>
|
||||
{children}
|
||||
</Collapse>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
// Declaring default props for SidenavCollapse
|
||||
SidenavCollapse.defaultProps = {
|
||||
active: false,
|
||||
noCollapse: false,
|
||||
children: false,
|
||||
open: false,
|
||||
};
|
||||
|
||||
export default SidenavCollapse;
|
||||
@ -1,101 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
import { ReactNode } from "react";
|
||||
|
||||
// @mui material components
|
||||
import Collapse from "@mui/material/Collapse";
|
||||
import ListItem from "@mui/material/ListItem";
|
||||
import ListItemText from "@mui/material/ListItemText";
|
||||
import Icon from "@mui/material/Icon";
|
||||
import { Theme } from "@mui/material/styles";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDBox from "components/MDBox";
|
||||
|
||||
// Custom styles for the SidenavItem
|
||||
import { item, itemContent, itemArrow } from "examples/Sidenav/styles/sidenavItem";
|
||||
|
||||
// Material Dashboard 2 PRO React TS contexts
|
||||
import { useMaterialUIController } from "context";
|
||||
|
||||
// Declaring props types for SidenavCollapse
|
||||
interface Props {
|
||||
color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "dark";
|
||||
name: string;
|
||||
active?: boolean | string;
|
||||
nested?: boolean;
|
||||
children?: ReactNode;
|
||||
open?: boolean;
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
function SidenavItem({ color, name, active, nested, children, open, ...rest }: Props): JSX.Element {
|
||||
const [controller] = useMaterialUIController();
|
||||
const { miniSidenav, transparentSidenav, whiteSidenav, darkMode } = controller;
|
||||
|
||||
return (
|
||||
<>
|
||||
<ListItem
|
||||
{...rest}
|
||||
component="li"
|
||||
sx={(theme) => item(theme, { active, color, transparentSidenav, whiteSidenav, darkMode })}
|
||||
>
|
||||
<MDBox
|
||||
sx={(theme: Theme): any =>
|
||||
itemContent(theme, {
|
||||
active,
|
||||
miniSidenav,
|
||||
name,
|
||||
open,
|
||||
nested,
|
||||
transparentSidenav,
|
||||
whiteSidenav,
|
||||
darkMode,
|
||||
})
|
||||
}
|
||||
>
|
||||
<ListItemText primary={name} />
|
||||
{children && (
|
||||
<Icon
|
||||
component="i"
|
||||
sx={(theme) =>
|
||||
itemArrow(theme, { open, miniSidenav, transparentSidenav, whiteSidenav, darkMode })
|
||||
}
|
||||
>
|
||||
expand_less
|
||||
</Icon>
|
||||
)}
|
||||
</MDBox>
|
||||
</ListItem>
|
||||
{children && (
|
||||
<Collapse in={open} timeout="auto" unmountOnExit {...rest}>
|
||||
{children}
|
||||
</Collapse>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
// Declaring default props for SidenavItem
|
||||
SidenavItem.defaultProps = {
|
||||
color: "info",
|
||||
active: false,
|
||||
nested: false,
|
||||
children: false,
|
||||
open: false,
|
||||
};
|
||||
|
||||
export default SidenavItem;
|
||||
@ -1,34 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
import { ReactNode } from "react";
|
||||
|
||||
// @mui material components
|
||||
import List from "@mui/material/List";
|
||||
|
||||
function SidenavList({ children }: { children: ReactNode }): JSX.Element {
|
||||
return (
|
||||
<List
|
||||
sx={{
|
||||
px: 2,
|
||||
my: 0.3,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</List>
|
||||
);
|
||||
}
|
||||
|
||||
export default SidenavList;
|
||||
@ -1,92 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
// @mui material components
|
||||
import Drawer from "@mui/material/Drawer";
|
||||
import { styled, Theme } from "@mui/material/styles";
|
||||
|
||||
export default styled(Drawer)(({ theme, ownerState }: { theme?: Theme | any; ownerState: any }) => {
|
||||
const { palette, boxShadows, transitions, breakpoints, functions } = theme;
|
||||
const { transparentSidenav, whiteSidenav, miniSidenav, darkMode } = ownerState;
|
||||
|
||||
const sidebarWidth = 250;
|
||||
const { transparent, gradients, white, background } = palette;
|
||||
const { xxl } = boxShadows;
|
||||
const { pxToRem, linearGradient } = functions;
|
||||
|
||||
let backgroundValue = darkMode
|
||||
? background.sidenav
|
||||
: linearGradient(gradients.dark.main, gradients.dark.state);
|
||||
|
||||
if (transparentSidenav) {
|
||||
backgroundValue = transparent.main;
|
||||
} else if (whiteSidenav) {
|
||||
backgroundValue = white.main;
|
||||
}
|
||||
|
||||
// styles for the sidenav when miniSidenav={false}
|
||||
const drawerOpenStyles = () => ({
|
||||
background: backgroundValue,
|
||||
transform: "translateX(0)",
|
||||
transition: transitions.create("transform", {
|
||||
easing: transitions.easing.sharp,
|
||||
duration: transitions.duration.shorter,
|
||||
}),
|
||||
|
||||
[breakpoints.up("xl")]: {
|
||||
boxShadow: transparentSidenav ? "none" : xxl,
|
||||
marginBottom: transparentSidenav ? 0 : "inherit",
|
||||
left: "0",
|
||||
width: sidebarWidth,
|
||||
transform: "translateX(0)",
|
||||
transition: transitions.create(["width", "background-color"], {
|
||||
easing: transitions.easing.sharp,
|
||||
duration: transitions.duration.enteringScreen,
|
||||
}),
|
||||
},
|
||||
});
|
||||
|
||||
// styles for the sidenav when miniSidenav={true}
|
||||
const drawerCloseStyles = () => ({
|
||||
background: backgroundValue,
|
||||
transform: `translateX(${pxToRem(-320)})`,
|
||||
transition: transitions.create("transform", {
|
||||
easing: transitions.easing.sharp,
|
||||
duration: transitions.duration.shorter,
|
||||
}),
|
||||
|
||||
[breakpoints.up("xl")]: {
|
||||
boxShadow: transparentSidenav ? "none" : xxl,
|
||||
marginBottom: transparentSidenav ? 0 : "inherit",
|
||||
left: "0",
|
||||
width: pxToRem(96),
|
||||
overflowX: "hidden",
|
||||
transform: "translateX(0)",
|
||||
transition: transitions.create(["width", "background-color"], {
|
||||
easing: transitions.easing.sharp,
|
||||
duration: transitions.duration.shorter,
|
||||
}),
|
||||
},
|
||||
});
|
||||
|
||||
return {
|
||||
"& .MuiDrawer-paper": {
|
||||
boxShadow: xxl,
|
||||
border: "none",
|
||||
|
||||
...(miniSidenav ? drawerCloseStyles() : drawerOpenStyles()),
|
||||
},
|
||||
};
|
||||
});
|
||||
@ -1,334 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
import { useEffect, useState, ReactNode, useReducer } from 'react';
|
||||
|
||||
// react-router-dom components
|
||||
import { useLocation, NavLink } from "react-router-dom";
|
||||
|
||||
// @mui material components
|
||||
import List from "@mui/material/List";
|
||||
import Divider from "@mui/material/Divider";
|
||||
import Link from "@mui/material/Link";
|
||||
import Icon from "@mui/material/Icon";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDBox from "components/MDBox";
|
||||
import MDTypography from "components/MDTypography";
|
||||
|
||||
// Material Dashboard 2 PRO React TS examples components
|
||||
import SidenavCollapse from "examples/Sidenav/SidenavCollapse";
|
||||
import SidenavList from "examples/Sidenav/SidenavList";
|
||||
import SidenavItem from "examples/Sidenav/SidenavItem";
|
||||
|
||||
// Custom styles for the Sidenav
|
||||
import SidenavRoot from "examples/Sidenav/SidenavRoot";
|
||||
import sidenavLogoLabel from "examples/Sidenav/styles/sidenav";
|
||||
|
||||
// Material Dashboard 2 PRO React context
|
||||
import {
|
||||
useMaterialUIController,
|
||||
setMiniSidenav,
|
||||
setTransparentSidenav,
|
||||
setWhiteSidenav,
|
||||
} from "context";
|
||||
import AuthenticationButton from "qqq/components/Buttons/AuthenticationButton";
|
||||
|
||||
// Declaring props types for Sidenav
|
||||
interface Props {
|
||||
color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "dark";
|
||||
brand?: string;
|
||||
brandName: string;
|
||||
routes: {
|
||||
[key: string]:
|
||||
| ReactNode
|
||||
| string
|
||||
| {
|
||||
[key: string]:
|
||||
| ReactNode
|
||||
| string
|
||||
| {
|
||||
[key: string]:
|
||||
| ReactNode
|
||||
| string
|
||||
| {
|
||||
[key: string]: ReactNode | string;
|
||||
}[];
|
||||
}[];
|
||||
}[];
|
||||
}[];
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
function Sidenav({ color, brand, brandName, routes, ...rest }: Props): JSX.Element {
|
||||
const [openCollapse, setOpenCollapse] = useState<boolean | string>(false);
|
||||
const [openNestedCollapse, setOpenNestedCollapse] = useState<boolean | string>(false);
|
||||
const [controller, dispatch] = useMaterialUIController();
|
||||
const { miniSidenav, transparentSidenav, whiteSidenav, darkMode } = controller;
|
||||
const location = useLocation();
|
||||
const { pathname } = location;
|
||||
const collapseName = pathname.split("/").slice(1)[0];
|
||||
const items = pathname.split("/").slice(1);
|
||||
const itemParentName = items[1];
|
||||
const itemName = items[items.length - 1];
|
||||
const [, forceUpdate] = useReducer((x) => x + 1, 0);
|
||||
|
||||
let textColor:
|
||||
| "primary"
|
||||
| "secondary"
|
||||
| "info"
|
||||
| "success"
|
||||
| "warning"
|
||||
| "error"
|
||||
| "dark"
|
||||
| "white"
|
||||
| "inherit"
|
||||
| "text"
|
||||
| "light" = "white";
|
||||
|
||||
if (transparentSidenav || (whiteSidenav && !darkMode)) {
|
||||
textColor = "dark";
|
||||
} else if (whiteSidenav && darkMode) {
|
||||
textColor = "inherit";
|
||||
}
|
||||
|
||||
const closeSidenav = () => setMiniSidenav(dispatch, true);
|
||||
|
||||
useEffect(() => {
|
||||
setOpenCollapse(collapseName);
|
||||
setOpenNestedCollapse(itemParentName);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
// A function that sets the mini state of the sidenav.
|
||||
function handleMiniSidenav() {
|
||||
setMiniSidenav(dispatch, window.innerWidth < 1200);
|
||||
setTransparentSidenav(dispatch, window.innerWidth < 1200 ? false : transparentSidenav);
|
||||
setWhiteSidenav(dispatch, window.innerWidth < 1200 ? false : whiteSidenav);
|
||||
}
|
||||
|
||||
/**
|
||||
The event listener that's calling the handleMiniSidenav function when resizing the window.
|
||||
*/
|
||||
window.addEventListener("resize", handleMiniSidenav);
|
||||
window.onload = () => {
|
||||
forceUpdate();
|
||||
};
|
||||
|
||||
// Call the handleMiniSidenav function to set the state with the initial value.
|
||||
handleMiniSidenav();
|
||||
|
||||
// Remove event listener on cleanup
|
||||
return () => window.removeEventListener("resize", handleMiniSidenav);
|
||||
}, [dispatch, location]);
|
||||
|
||||
// Render all the nested collapse items from the routes.js
|
||||
const renderNestedCollapse = (collapse: any) => {
|
||||
const template = collapse.map(({ name, route, key, href }: any) =>
|
||||
href ? (
|
||||
<Link
|
||||
key={key}
|
||||
href={href}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
sx={{ textDecoration: "none" }}
|
||||
>
|
||||
<SidenavItem name={name} nested />
|
||||
</Link>
|
||||
) : (
|
||||
<NavLink to={route} key={key} style={{ textDecoration: "none" }}>
|
||||
<SidenavItem name={name} active={route === pathname} nested />
|
||||
</NavLink>
|
||||
)
|
||||
);
|
||||
|
||||
return template;
|
||||
};
|
||||
// Render the all the collpases from the routes.js
|
||||
const renderCollapse = (collapses: any) =>
|
||||
collapses.map(({ name, collapse, route, href, key }: any) => {
|
||||
let returnValue;
|
||||
|
||||
if (collapse) {
|
||||
returnValue = (
|
||||
<SidenavItem
|
||||
key={key}
|
||||
color={color}
|
||||
name={name}
|
||||
active={key === itemParentName ? "isParent" : false}
|
||||
open={openNestedCollapse === key}
|
||||
onClick={({ currentTarget }: any) =>
|
||||
openNestedCollapse === key && currentTarget.classList.contains("MuiListItem-root")
|
||||
? setOpenNestedCollapse(false)
|
||||
: setOpenNestedCollapse(key)
|
||||
}
|
||||
>
|
||||
{renderNestedCollapse(collapse)}
|
||||
</SidenavItem>
|
||||
);
|
||||
} else {
|
||||
returnValue = href ? (
|
||||
<Link
|
||||
href={href}
|
||||
key={key}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
sx={{ textDecoration: "none" }}
|
||||
>
|
||||
<SidenavItem color={color} name={name} active={key === itemName} />
|
||||
</Link>
|
||||
) : (
|
||||
<NavLink to={route} key={key} style={{ textDecoration: "none" }}>
|
||||
<SidenavItem color={color} name={name} active={key === itemName} />
|
||||
</NavLink>
|
||||
);
|
||||
}
|
||||
return <SidenavList key={key}>{returnValue}</SidenavList>;
|
||||
});
|
||||
|
||||
// Render all the routes from the routes.js (All the visible items on the Sidenav)
|
||||
const renderRoutes = routes.map(
|
||||
({ type, name, icon, title, collapse, noCollapse, key, href, route }: any) => {
|
||||
let returnValue;
|
||||
|
||||
if (type === "collapse") {
|
||||
if (href) {
|
||||
returnValue = (
|
||||
<Link
|
||||
href={href}
|
||||
key={key}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
sx={{ textDecoration: "none" }}
|
||||
>
|
||||
<SidenavCollapse
|
||||
name={name}
|
||||
icon={icon}
|
||||
active={key === collapseName}
|
||||
noCollapse={noCollapse}
|
||||
/>
|
||||
</Link>
|
||||
);
|
||||
} else if (noCollapse && route) {
|
||||
returnValue = (
|
||||
<NavLink to={route} key={key}>
|
||||
<SidenavCollapse
|
||||
name={name}
|
||||
icon={icon}
|
||||
noCollapse={noCollapse}
|
||||
active={key === collapseName}
|
||||
>
|
||||
{collapse ? renderCollapse(collapse) : null}
|
||||
</SidenavCollapse>
|
||||
</NavLink>
|
||||
);
|
||||
} else {
|
||||
returnValue = (
|
||||
<SidenavCollapse
|
||||
key={key}
|
||||
name={name}
|
||||
icon={icon}
|
||||
active={key === collapseName}
|
||||
open={openCollapse === key}
|
||||
onClick={() => (openCollapse === key ? setOpenCollapse(false) : setOpenCollapse(key))}
|
||||
>
|
||||
{collapse ? renderCollapse(collapse) : null}
|
||||
</SidenavCollapse>
|
||||
);
|
||||
}
|
||||
} else if (type === "title") {
|
||||
returnValue = (
|
||||
<MDTypography
|
||||
key={key}
|
||||
color={textColor}
|
||||
display="block"
|
||||
variant="caption"
|
||||
fontWeight="bold"
|
||||
textTransform="uppercase"
|
||||
pl={3}
|
||||
mt={2}
|
||||
mb={1}
|
||||
ml={1}
|
||||
>
|
||||
{title}
|
||||
</MDTypography>
|
||||
);
|
||||
} else if (type === "divider") {
|
||||
returnValue = (
|
||||
<Divider
|
||||
key={key}
|
||||
light={
|
||||
(!darkMode && !whiteSidenav && !transparentSidenav) ||
|
||||
(darkMode && !transparentSidenav && whiteSidenav)
|
||||
}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return returnValue;
|
||||
}
|
||||
);
|
||||
|
||||
return (
|
||||
<SidenavRoot
|
||||
{...rest}
|
||||
variant="permanent"
|
||||
ownerState={{ transparentSidenav, whiteSidenav, miniSidenav, darkMode }}
|
||||
>
|
||||
<MDBox pt={3} pb={1} px={4} textAlign="center">
|
||||
<MDBox
|
||||
display={{ xs: "block", xl: "none" }}
|
||||
position="absolute"
|
||||
top={0}
|
||||
right={0}
|
||||
p={1.625}
|
||||
onClick={closeSidenav}
|
||||
sx={{ cursor: "pointer" }}
|
||||
>
|
||||
<MDTypography variant="h6" color="secondary">
|
||||
<Icon sx={{ fontWeight: "bold" }}>close</Icon>
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
<MDBox component={NavLink} to="/" display="flex" alignItems="center">
|
||||
{brand && <MDBox component="img" src={brand} alt="Brand" width="2rem" />}
|
||||
<MDBox
|
||||
width={!brandName && "100%"}
|
||||
sx={(theme: any) => sidenavLogoLabel(theme, { miniSidenav })}
|
||||
>
|
||||
<MDTypography component="h6" variant="button" fontWeight="medium" color={textColor}>
|
||||
{brandName}
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
<Divider
|
||||
light={
|
||||
(!darkMode && !whiteSidenav && !transparentSidenav) ||
|
||||
(darkMode && !transparentSidenav && whiteSidenav)
|
||||
}
|
||||
/>
|
||||
<List>{renderRoutes}</List>
|
||||
<AuthenticationButton />
|
||||
</SidenavRoot>
|
||||
);
|
||||
}
|
||||
|
||||
// Declaring default props for Sidenav
|
||||
Sidenav.defaultProps = {
|
||||
color: "info",
|
||||
brand: "",
|
||||
};
|
||||
|
||||
export default Sidenav;
|
||||
@ -1,61 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
import { ReactNode } from "react";
|
||||
|
||||
// @mui material components
|
||||
import { Theme } from "@mui/material/styles";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDBox from "components/MDBox";
|
||||
|
||||
// Declaring prop types for DataTableBodyCell
|
||||
interface Props {
|
||||
children: ReactNode;
|
||||
noBorder?: boolean;
|
||||
align?: "left" | "right" | "center";
|
||||
}
|
||||
|
||||
function DataTableBodyCell({ noBorder, align, children }: Props): JSX.Element {
|
||||
return (
|
||||
<MDBox
|
||||
component="td"
|
||||
textAlign={align}
|
||||
py={1.5}
|
||||
px={3}
|
||||
sx={({ palette: { light }, typography: { size }, borders: { borderWidth } }: Theme) => ({
|
||||
fontSize: size.sm,
|
||||
borderBottom: noBorder ? "none" : `${borderWidth[1]} solid ${light.main}`,
|
||||
})}
|
||||
>
|
||||
<MDBox
|
||||
display="inline-block"
|
||||
width="max-content"
|
||||
color="text"
|
||||
sx={{ verticalAlign: "middle" }}
|
||||
>
|
||||
{children}
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
);
|
||||
}
|
||||
|
||||
// Declaring default props for DataTableBodyCell
|
||||
DataTableBodyCell.defaultProps = {
|
||||
noBorder: false,
|
||||
align: "left",
|
||||
};
|
||||
|
||||
export default DataTableBodyCell;
|
||||
@ -1,105 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
import { ReactNode } from "react";
|
||||
|
||||
// @mui material components
|
||||
import Icon from "@mui/material/Icon";
|
||||
import { Theme } from "@mui/material/styles";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDBox from "components/MDBox";
|
||||
|
||||
// Material Dashboard 2 PRO React TS contexts
|
||||
import { useMaterialUIController } from "context";
|
||||
|
||||
// Declaring props types for DataTableHeadCell
|
||||
interface Props {
|
||||
width?: string | number;
|
||||
children: ReactNode;
|
||||
sorted?: false | "none" | "asce" | "desc";
|
||||
align?: "left" | "right" | "center";
|
||||
}
|
||||
|
||||
function DataTableHeadCell({ width, children, sorted, align, ...rest }: Props): JSX.Element {
|
||||
const [controller] = useMaterialUIController();
|
||||
const { darkMode } = controller;
|
||||
|
||||
return (
|
||||
<MDBox
|
||||
component="th"
|
||||
width={width}
|
||||
py={1.5}
|
||||
px={3}
|
||||
sx={({ palette: { light }, borders: { borderWidth } }: Theme) => ({
|
||||
borderBottom: `${borderWidth[1]} solid ${light.main}`,
|
||||
})}
|
||||
>
|
||||
<MDBox
|
||||
{...rest}
|
||||
position="relative"
|
||||
textAlign={align}
|
||||
color={darkMode ? "white" : "secondary"}
|
||||
opacity={0.7}
|
||||
sx={({ typography: { size, fontWeightBold } }: Theme) => ({
|
||||
fontSize: size.xxs,
|
||||
fontWeight: fontWeightBold,
|
||||
textTransform: "uppercase",
|
||||
cursor: sorted && "pointer",
|
||||
userSelect: sorted && "none",
|
||||
})}
|
||||
>
|
||||
{children}
|
||||
{sorted && (
|
||||
<MDBox
|
||||
position="absolute"
|
||||
top={0}
|
||||
right={align !== "right" ? "16px" : 0}
|
||||
left={align === "right" ? "-5px" : "unset"}
|
||||
sx={({ typography: { size } }: any) => ({
|
||||
fontSize: size.lg,
|
||||
})}
|
||||
>
|
||||
<MDBox
|
||||
position="absolute"
|
||||
top={-6}
|
||||
color={sorted === "asce" ? "text" : "secondary"}
|
||||
opacity={sorted === "asce" ? 1 : 0.5}
|
||||
>
|
||||
<Icon>arrow_drop_up</Icon>
|
||||
</MDBox>
|
||||
<MDBox
|
||||
position="absolute"
|
||||
top={0}
|
||||
color={sorted === "desc" ? "text" : "secondary"}
|
||||
opacity={sorted === "desc" ? 1 : 0.5}
|
||||
>
|
||||
<Icon>arrow_drop_down</Icon>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
)}
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
);
|
||||
}
|
||||
|
||||
// Declaring default props for DataTableHeadCell
|
||||
DataTableHeadCell.defaultProps = {
|
||||
width: "auto",
|
||||
sorted: "none",
|
||||
align: "left",
|
||||
};
|
||||
|
||||
export default DataTableHeadCell;
|
||||
@ -1,306 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
import { useMemo, useEffect, useState } from "react";
|
||||
|
||||
// react-table components
|
||||
import { useTable, usePagination, useGlobalFilter, useAsyncDebounce, useSortBy } from "react-table";
|
||||
|
||||
// @mui material components
|
||||
import Table from "@mui/material/Table";
|
||||
import TableBody from "@mui/material/TableBody";
|
||||
import TableContainer from "@mui/material/TableContainer";
|
||||
import TableRow from "@mui/material/TableRow";
|
||||
import Icon from "@mui/material/Icon";
|
||||
import Autocomplete from "@mui/material/Autocomplete";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDBox from "components/MDBox";
|
||||
import MDTypography from "components/MDTypography";
|
||||
import MDInput from "components/MDInput";
|
||||
import MDPagination from "components/MDPagination";
|
||||
|
||||
// Material Dashboard 2 PRO React TS examples components
|
||||
import DataTableHeadCell from "examples/Tables/DataTable/DataTableHeadCell";
|
||||
import DataTableBodyCell from "examples/Tables/DataTable/DataTableBodyCell";
|
||||
|
||||
// Declaring props types for DataTable
|
||||
interface Props {
|
||||
entriesPerPage?:
|
||||
| false
|
||||
| {
|
||||
defaultValue: number;
|
||||
entries: number[];
|
||||
};
|
||||
canSearch?: boolean;
|
||||
showTotalEntries?: boolean;
|
||||
table: {
|
||||
columns: { [key: string]: any }[];
|
||||
rows: { [key: string]: any }[];
|
||||
};
|
||||
pagination?: {
|
||||
variant: "contained" | "gradient";
|
||||
color: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "dark" | "light";
|
||||
};
|
||||
isSorted?: boolean;
|
||||
noEndBorder?: boolean;
|
||||
}
|
||||
|
||||
function DataTable({
|
||||
entriesPerPage,
|
||||
canSearch,
|
||||
showTotalEntries,
|
||||
table,
|
||||
pagination,
|
||||
isSorted,
|
||||
noEndBorder,
|
||||
}: Props): JSX.Element {
|
||||
let defaultValue: any;
|
||||
let entries: any[];
|
||||
|
||||
if (entriesPerPage) {
|
||||
defaultValue = entriesPerPage.defaultValue ? entriesPerPage.defaultValue : "10";
|
||||
entries = entriesPerPage.entries ? entriesPerPage.entries : ["10", "25", "50", "100"];
|
||||
}
|
||||
|
||||
const columns = useMemo<any>(() => table.columns, [table]);
|
||||
const data = useMemo<any>(() => table.rows, [table]);
|
||||
|
||||
const tableInstance = useTable(
|
||||
{ columns, data, initialState: { pageIndex: 0 } },
|
||||
useGlobalFilter,
|
||||
useSortBy,
|
||||
usePagination
|
||||
);
|
||||
|
||||
const {
|
||||
getTableProps,
|
||||
getTableBodyProps,
|
||||
headerGroups,
|
||||
prepareRow,
|
||||
rows,
|
||||
page,
|
||||
pageOptions,
|
||||
canPreviousPage,
|
||||
canNextPage,
|
||||
gotoPage,
|
||||
nextPage,
|
||||
previousPage,
|
||||
setPageSize,
|
||||
setGlobalFilter,
|
||||
state: { pageIndex, pageSize, globalFilter },
|
||||
}: any = tableInstance;
|
||||
|
||||
// Set the default value for the entries per page when component mounts
|
||||
useEffect(() => setPageSize(defaultValue || 10), [defaultValue]);
|
||||
|
||||
// Set the entries per page value based on the select value
|
||||
const setEntriesPerPage = (value: any) => setPageSize(value);
|
||||
|
||||
// Render the paginations
|
||||
const renderPagination = pageOptions.map((option: any) => (
|
||||
<MDPagination
|
||||
item
|
||||
key={option}
|
||||
onClick={() => gotoPage(Number(option))}
|
||||
active={pageIndex === option}
|
||||
>
|
||||
{option + 1}
|
||||
</MDPagination>
|
||||
));
|
||||
|
||||
// Handler for the input to set the pagination index
|
||||
const handleInputPagination = ({ target: { value } }: any) =>
|
||||
value > pageOptions.length || value < 0 ? gotoPage(0) : gotoPage(Number(value));
|
||||
|
||||
// Customized page options starting from 1
|
||||
const customizedPageOptions = pageOptions.map((option: any) => option + 1);
|
||||
|
||||
// Setting value for the pagination input
|
||||
const handleInputPaginationValue = ({ target: value }: any) => gotoPage(Number(value.value - 1));
|
||||
|
||||
// Search input value state
|
||||
const [search, setSearch] = useState(globalFilter);
|
||||
|
||||
// Search input state handle
|
||||
const onSearchChange = useAsyncDebounce((value) => {
|
||||
setGlobalFilter(value || undefined);
|
||||
}, 100);
|
||||
|
||||
// A function that sets the sorted value for the table
|
||||
const setSortedValue = (column: any) => {
|
||||
let sortedValue;
|
||||
|
||||
if (isSorted && column.isSorted) {
|
||||
sortedValue = column.isSortedDesc ? "desc" : "asce";
|
||||
} else if (isSorted) {
|
||||
sortedValue = "none";
|
||||
} else {
|
||||
sortedValue = false;
|
||||
}
|
||||
|
||||
return sortedValue;
|
||||
};
|
||||
|
||||
// Setting the entries starting point
|
||||
const entriesStart = pageIndex === 0 ? pageIndex + 1 : pageIndex * pageSize + 1;
|
||||
|
||||
// Setting the entries ending point
|
||||
let entriesEnd;
|
||||
|
||||
if (pageIndex === 0) {
|
||||
entriesEnd = pageSize;
|
||||
} else if (pageIndex === pageOptions.length - 1) {
|
||||
entriesEnd = rows.length;
|
||||
} else {
|
||||
entriesEnd = pageSize * (pageIndex + 1);
|
||||
}
|
||||
|
||||
return (
|
||||
<TableContainer sx={{ boxShadow: "none" }}>
|
||||
{entriesPerPage || canSearch ? (
|
||||
<MDBox display="flex" justifyContent="space-between" alignItems="center" p={3}>
|
||||
{entriesPerPage && (
|
||||
<MDBox display="flex" alignItems="center">
|
||||
<Autocomplete
|
||||
disableClearable
|
||||
value={pageSize.toString()}
|
||||
options={entries}
|
||||
onChange={(event, newValue) => {
|
||||
setEntriesPerPage(parseInt(newValue, 10));
|
||||
}}
|
||||
size="small"
|
||||
sx={{ width: "5rem" }}
|
||||
renderInput={(params) => <MDInput {...params} />}
|
||||
/>
|
||||
<MDTypography variant="caption" color="secondary">
|
||||
entries per page
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
)}
|
||||
{canSearch && (
|
||||
<MDBox width="12rem" ml="auto">
|
||||
<MDInput
|
||||
placeholder="Search..."
|
||||
value={search}
|
||||
size="small"
|
||||
fullWidth
|
||||
onChange={({ currentTarget }: any) => {
|
||||
setSearch(search);
|
||||
onSearchChange(currentTarget.value);
|
||||
}}
|
||||
/>
|
||||
</MDBox>
|
||||
)}
|
||||
</MDBox>
|
||||
) : null}
|
||||
<Table {...getTableProps()}>
|
||||
<MDBox component="thead">
|
||||
{headerGroups.map((headerGroup: any) => (
|
||||
<TableRow {...headerGroup.getHeaderGroupProps()}>
|
||||
{headerGroup.headers.map((column: any) => (
|
||||
<DataTableHeadCell
|
||||
{...column.getHeaderProps(isSorted && column.getSortByToggleProps())}
|
||||
width={column.width ? column.width : "auto"}
|
||||
align={column.align ? column.align : "left"}
|
||||
sorted={setSortedValue(column)}
|
||||
>
|
||||
{column.render("Header")}
|
||||
</DataTableHeadCell>
|
||||
))}
|
||||
</TableRow>
|
||||
))}
|
||||
</MDBox>
|
||||
<TableBody {...getTableBodyProps()}>
|
||||
{page.map((row: any, key: any) => {
|
||||
prepareRow(row);
|
||||
return (
|
||||
<TableRow {...row.getRowProps()}>
|
||||
{row.cells.map((cell: any) => (
|
||||
<DataTableBodyCell
|
||||
noBorder={noEndBorder && rows.length - 1 === key}
|
||||
align={cell.column.align ? cell.column.align : "left"}
|
||||
{...cell.getCellProps()}
|
||||
>
|
||||
{cell.render("Cell")}
|
||||
</DataTableBodyCell>
|
||||
))}
|
||||
</TableRow>
|
||||
);
|
||||
})}
|
||||
</TableBody>
|
||||
</Table>
|
||||
|
||||
<MDBox
|
||||
display="flex"
|
||||
flexDirection={{ xs: "column", sm: "row" }}
|
||||
justifyContent="space-between"
|
||||
alignItems={{ xs: "flex-start", sm: "center" }}
|
||||
p={!showTotalEntries && pageOptions.length === 1 ? 0 : 3}
|
||||
>
|
||||
{showTotalEntries && (
|
||||
<MDBox mb={{ xs: 3, sm: 0 }}>
|
||||
<MDTypography variant="button" color="secondary" fontWeight="regular">
|
||||
Showing {entriesStart} to {entriesEnd} of {rows.length} entries
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
)}
|
||||
{pageOptions.length > 1 && (
|
||||
<MDPagination
|
||||
variant={pagination.variant ? pagination.variant : "gradient"}
|
||||
color={pagination.color ? pagination.color : "info"}
|
||||
>
|
||||
{canPreviousPage && (
|
||||
<MDPagination item onClick={() => previousPage()}>
|
||||
<Icon sx={{ fontWeight: "bold" }}>chevron_left</Icon>
|
||||
</MDPagination>
|
||||
)}
|
||||
{renderPagination.length > 6 ? (
|
||||
<MDBox width="5rem" mx={1}>
|
||||
<MDInput
|
||||
inputProps={{ type: "number", min: 1, max: customizedPageOptions.length }}
|
||||
value={customizedPageOptions[pageIndex]}
|
||||
onChange={(event: any) => {
|
||||
handleInputPagination(event);
|
||||
handleInputPaginationValue(event);
|
||||
}}
|
||||
/>
|
||||
</MDBox>
|
||||
) : (
|
||||
renderPagination
|
||||
)}
|
||||
{canNextPage && (
|
||||
<MDPagination item onClick={() => nextPage()}>
|
||||
<Icon sx={{ fontWeight: "bold" }}>chevron_right</Icon>
|
||||
</MDPagination>
|
||||
)}
|
||||
</MDPagination>
|
||||
)}
|
||||
</MDBox>
|
||||
</TableContainer>
|
||||
);
|
||||
}
|
||||
|
||||
// Declaring default props for DataTable
|
||||
DataTable.defaultProps = {
|
||||
entriesPerPage: { defaultValue: 10, entries: ["5", "10", "15", "20", "25"] },
|
||||
canSearch: false,
|
||||
showTotalEntries: true,
|
||||
pagination: { variant: "gradient", color: "info" },
|
||||
isSorted: true,
|
||||
noEndBorder: false,
|
||||
};
|
||||
|
||||
export default DataTable;
|
||||
@ -1,91 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
// @mui material components
|
||||
import TableCell from "@mui/material/TableCell";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDTypography from "components/MDTypography";
|
||||
import MDBox from "components/MDBox";
|
||||
|
||||
// Declaring prop types for SalesTableCell
|
||||
interface Props {
|
||||
title: string;
|
||||
content?: string | number;
|
||||
image?: string;
|
||||
noBorder?: boolean;
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
function SalesTableCell({ title, content, image, noBorder, ...rest }: Props): JSX.Element {
|
||||
let template;
|
||||
|
||||
if (image) {
|
||||
template = (
|
||||
<TableCell {...rest} align="left" width="30%" sx={{ border: noBorder && 0 }}>
|
||||
<MDBox display="flex" alignItems="center" width="max-content">
|
||||
<MDBox
|
||||
component="img"
|
||||
src={image}
|
||||
alt={content.toString()}
|
||||
width="1.5rem"
|
||||
height="auto"
|
||||
/>{" "}
|
||||
<MDBox display="flex" flexDirection="column" ml={3}>
|
||||
<MDTypography
|
||||
variant="caption"
|
||||
color="text"
|
||||
fontWeight="medium"
|
||||
textTransform="capitalize"
|
||||
>
|
||||
{title}:
|
||||
</MDTypography>
|
||||
<MDTypography variant="button" fontWeight="regular" textTransform="capitalize">
|
||||
{content}
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
</TableCell>
|
||||
);
|
||||
} else {
|
||||
template = (
|
||||
<TableCell {...rest} align="center" sx={{ border: noBorder && 0 }}>
|
||||
<MDBox display="flex" flexDirection="column">
|
||||
<MDTypography
|
||||
variant="caption"
|
||||
color="text"
|
||||
fontWeight="medium"
|
||||
textTransform="capitalize"
|
||||
>
|
||||
{title}:
|
||||
</MDTypography>
|
||||
<MDTypography variant="button" fontWeight="regular" textTransform="capitalize">
|
||||
{content}
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
</TableCell>
|
||||
);
|
||||
}
|
||||
|
||||
return template;
|
||||
}
|
||||
|
||||
// Declaring default props for SalesTableCell
|
||||
SalesTableCell.defaultProps = {
|
||||
image: "",
|
||||
noBorder: false,
|
||||
};
|
||||
|
||||
export default SalesTableCell;
|
||||
@ -1,97 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
import { useMemo } from "react";
|
||||
|
||||
// @mui material components
|
||||
import Table from "@mui/material/Table";
|
||||
import TableBody from "@mui/material/TableBody";
|
||||
import TableContainer from "@mui/material/TableContainer";
|
||||
import TableHead from "@mui/material/TableHead";
|
||||
import TableRow from "@mui/material/TableRow";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDTypography from "components/MDTypography";
|
||||
import MDBox from "components/MDBox";
|
||||
|
||||
// Material Dashboard 2 PRO React TS examples components
|
||||
import SalesTableCell from "examples/Tables/SalesTable/SalesTableCell";
|
||||
|
||||
// Declaring props types for SalesTable
|
||||
interface Props {
|
||||
title?: string;
|
||||
rows?: {
|
||||
[key: string]: string | number | (string | number)[];
|
||||
}[];
|
||||
shadow?: boolean;
|
||||
}
|
||||
|
||||
function SalesTable({ title, rows, shadow }: Props): JSX.Element {
|
||||
const renderTableCells = rows.map(
|
||||
(row: { [key: string]: string | number | (string | number)[] }, key: any) => {
|
||||
const tableRows: any = [];
|
||||
const rowKey = `row-${key}`;
|
||||
|
||||
Object.entries(row).map(([cellTitle, cellContent]: any) =>
|
||||
Array.isArray(cellContent)
|
||||
? tableRows.push(
|
||||
<SalesTableCell
|
||||
key={cellContent[1]}
|
||||
title={cellTitle}
|
||||
content={cellContent[1]}
|
||||
image={cellContent[0]}
|
||||
noBorder={key === rows.length - 1}
|
||||
/>
|
||||
)
|
||||
: tableRows.push(
|
||||
<SalesTableCell
|
||||
key={cellContent}
|
||||
title={cellTitle}
|
||||
content={cellContent}
|
||||
noBorder={key === rows.length - 1}
|
||||
/>
|
||||
)
|
||||
);
|
||||
|
||||
return <TableRow key={rowKey}>{tableRows}</TableRow>;
|
||||
}
|
||||
);
|
||||
|
||||
return (
|
||||
<TableContainer sx={{ height: "100%", boxShadow: !shadow && "none" }}>
|
||||
<Table>
|
||||
{title ? (
|
||||
<TableHead>
|
||||
<MDBox component="tr" width="max-content" display="block" mb={1.5}>
|
||||
<MDTypography variant="h6" component="td">
|
||||
{title}
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
</TableHead>
|
||||
) : null}
|
||||
<TableBody>{useMemo(() => renderTableCells, [rows])}</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
);
|
||||
}
|
||||
|
||||
// Declaring default props for SalesTable
|
||||
SalesTable.defaultProps = {
|
||||
title: "",
|
||||
rows: [{}],
|
||||
shadow: true,
|
||||
};
|
||||
|
||||
export default SalesTable;
|
||||
@ -1,96 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
import { ReactNode } from "react";
|
||||
|
||||
// @mui material components
|
||||
import Icon from "@mui/material/Icon";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDBox from "components/MDBox";
|
||||
import MDTypography from "components/MDTypography";
|
||||
|
||||
// Timeline context
|
||||
import { useTimeline } from "examples/Timeline/context";
|
||||
|
||||
// Custom styles for the TimelineItem
|
||||
import timelineItem from "examples/Timeline/TimelineItem/styles";
|
||||
|
||||
// Declaring prop types for TimelineItem
|
||||
interface Props {
|
||||
color?: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "dark" | "light";
|
||||
icon: ReactNode;
|
||||
title: string;
|
||||
dateTime: string;
|
||||
description?: string;
|
||||
lastItem?: boolean;
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
function TimelineItem({ color, icon, title, dateTime, description, lastItem }: Props): JSX.Element {
|
||||
const isDark = useTimeline();
|
||||
|
||||
return (
|
||||
<MDBox
|
||||
position="relative"
|
||||
mb={3}
|
||||
sx={(theme: any) => timelineItem(theme, { lastItem, isDark })}
|
||||
>
|
||||
<MDBox
|
||||
display="flex"
|
||||
justifyContent="center"
|
||||
alignItems="center"
|
||||
bgColor={color}
|
||||
color="white"
|
||||
width="2rem"
|
||||
height="2rem"
|
||||
borderRadius="50%"
|
||||
position="absolute"
|
||||
top="8%"
|
||||
left="2px"
|
||||
zIndex={2}
|
||||
sx={{ fontSize: ({ typography: { size } }: any) => size.sm }}
|
||||
>
|
||||
<Icon fontSize="inherit">{icon}</Icon>
|
||||
</MDBox>
|
||||
<MDBox ml={5.75} pt={description ? 0.7 : 0.5} lineHeight={0} maxWidth="30rem">
|
||||
<MDTypography variant="button" fontWeight="medium" color={isDark ? "white" : "dark"}>
|
||||
{title}
|
||||
</MDTypography>
|
||||
<MDBox mt={0.5}>
|
||||
<MDTypography variant="caption" color={isDark ? "secondary" : "text"}>
|
||||
{dateTime}
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
<MDBox mt={2} mb={1.5}>
|
||||
{description ? (
|
||||
<MDTypography variant="button" color={isDark ? "white" : "dark"}>
|
||||
{description}
|
||||
</MDTypography>
|
||||
) : null}
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
);
|
||||
}
|
||||
|
||||
// Declaring default props for TimelineItem
|
||||
TimelineItem.defaultProps = {
|
||||
color: "info",
|
||||
lastItem: false,
|
||||
description: "",
|
||||
};
|
||||
|
||||
export default TimelineItem;
|
||||
@ -1,23 +0,0 @@
|
||||
// @mui material components
|
||||
import { Theme } from "@mui/material/styles";
|
||||
|
||||
function timelineItem(theme: Theme, ownerState: any) {
|
||||
const { borders } = theme;
|
||||
const { lastItem, isDark } = ownerState;
|
||||
|
||||
const { borderWidth, borderColor } = borders;
|
||||
|
||||
return {
|
||||
"&:after": {
|
||||
content: !lastItem && "''",
|
||||
position: "absolute",
|
||||
top: "2rem",
|
||||
left: "17px",
|
||||
height: "100%",
|
||||
opacity: isDark ? 0.1 : 1,
|
||||
borderRight: `${borderWidth[2]} solid ${borderColor}`,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
export default timelineItem;
|
||||
@ -1,68 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
import { ReactNode } from "react";
|
||||
|
||||
// @mui material components
|
||||
import Card from "@mui/material/Card";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDBox from "components/MDBox";
|
||||
import MDTypography from "components/MDTypography";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import { useMaterialUIController } from "context";
|
||||
|
||||
// Timeline context
|
||||
import { TimelineProvider } from "examples/Timeline/context";
|
||||
|
||||
// Declaring props types for TimelineList
|
||||
interface Props {
|
||||
title: string;
|
||||
dark?: boolean;
|
||||
children: ReactNode;
|
||||
}
|
||||
|
||||
function TimelineList({ title, dark, children }: Props): JSX.Element {
|
||||
const [controller] = useMaterialUIController();
|
||||
const { darkMode } = controller;
|
||||
|
||||
return (
|
||||
<TimelineProvider value={dark}>
|
||||
<Card>
|
||||
<MDBox
|
||||
bgColor={dark ? "dark" : "white"}
|
||||
variant="gradient"
|
||||
borderRadius="xl"
|
||||
sx={{ background: ({ palette: { background } }: any) => darkMode && background.card }}
|
||||
>
|
||||
<MDBox pt={3} px={3}>
|
||||
<MDTypography variant="h6" fontWeight="medium" color={dark ? "white" : "dark"}>
|
||||
{title}
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
<MDBox p={2}>{children}</MDBox>
|
||||
</MDBox>
|
||||
</Card>
|
||||
</TimelineProvider>
|
||||
);
|
||||
}
|
||||
|
||||
// Declaring default props for TimelineList
|
||||
TimelineList.defaultProps = {
|
||||
dark: false,
|
||||
};
|
||||
|
||||
export default TimelineList;
|
||||
@ -1,42 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
/* eslint-disable react/prop-types */
|
||||
/**
|
||||
This file is used for controlling the dark and light state of the TimelineList and TimelineItem.
|
||||
*/
|
||||
|
||||
import { createContext, useContext, ReactNode } from "react";
|
||||
|
||||
// The Timeline main context
|
||||
const Timeline = createContext<JSX.Element | boolean | null>(null);
|
||||
|
||||
// Declaring props types for TimelineProvider
|
||||
interface Props {
|
||||
children: ReactNode;
|
||||
value: boolean;
|
||||
}
|
||||
|
||||
// Timeline context provider
|
||||
function TimelineProvider({ children, value }: Props): JSX.Element {
|
||||
return <Timeline.Provider value={value}>{children}</Timeline.Provider>;
|
||||
}
|
||||
|
||||
// Timeline custom hook for using context
|
||||
function useTimeline() {
|
||||
return useContext(Timeline);
|
||||
}
|
||||
|
||||
export { TimelineProvider, useTimeline };
|
||||
@ -1,86 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
// @mui material components
|
||||
import Divider from "@mui/material/Divider";
|
||||
import Icon from "@mui/material/Icon";
|
||||
import Tooltip from "@mui/material/Tooltip";
|
||||
import { Theme } from "@mui/material/styles";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDBox from "components/MDBox";
|
||||
import MDTypography from "components/MDTypography";
|
||||
import MDAvatar from "components/MDAvatar";
|
||||
import MDButton from "components/MDButton";
|
||||
|
||||
// Image
|
||||
import team1 from "assets/images/team-1.jpg";
|
||||
import team2 from "assets/images/team-2.jpg";
|
||||
import team3 from "assets/images/team-3.jpg";
|
||||
import team4 from "assets/images/team-4.jpg";
|
||||
import team5 from "assets/images/team-5.jpg";
|
||||
|
||||
function Header(): JSX.Element {
|
||||
const avatarStyles: { [key: string]: any } = {
|
||||
border: ({ borders: { borderWidth }, palette: { white } }: Theme) =>
|
||||
`${borderWidth[2]} solid ${white.main}`,
|
||||
cursor: "pointer",
|
||||
position: "relative",
|
||||
ml: -1.5,
|
||||
|
||||
"&:hover, &:focus": {
|
||||
zIndex: "10",
|
||||
},
|
||||
};
|
||||
|
||||
return (
|
||||
<MDBox display="flex" alignItems="center">
|
||||
<MDBox mt={0.5} pr={1}>
|
||||
<MDBox mb={1} ml={-1.25} lineHeight={0}>
|
||||
<MDTypography variant="button" color="secondary">
|
||||
Team members:
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
<MDBox display="flex">
|
||||
<Tooltip title="Jessica Rowland" placement="top">
|
||||
<MDAvatar src={team1} alt="team-1" size="sm" sx={avatarStyles} />
|
||||
</Tooltip>
|
||||
<Tooltip title="Audrey Love" placement="top">
|
||||
<MDAvatar src={team2} alt="team-1" size="sm" sx={avatarStyles} />
|
||||
</Tooltip>
|
||||
<Tooltip title="Michael Lewis" placement="top">
|
||||
<MDAvatar src={team3} alt="team-1" size="sm" sx={avatarStyles} />
|
||||
</Tooltip>
|
||||
<Tooltip title="Lucia Linda" placement="top">
|
||||
<MDAvatar src={team4} alt="team-1" size="sm" sx={avatarStyles} />
|
||||
</Tooltip>
|
||||
<Tooltip title="Ronald Miller" placement="top">
|
||||
<MDAvatar src={team5} alt="team-1" size="sm" sx={avatarStyles} />
|
||||
</Tooltip>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
<MDBox height="75%" alignSelf="flex-end">
|
||||
<Divider orientation="vertical" />
|
||||
</MDBox>
|
||||
<MDBox pl={1}>
|
||||
<MDButton variant="outlined" color="dark" iconOnly>
|
||||
<Icon sx={{ fontWeight: "bold" }}>add</Icon>
|
||||
</MDButton>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
);
|
||||
}
|
||||
|
||||
export default Header;
|
||||
@ -1,78 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
// @mui material components
|
||||
import Card from "@mui/material/Card";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDBox from "components/MDBox";
|
||||
import MDTypography from "components/MDTypography";
|
||||
|
||||
// Material Dashboard 2 PRO React TS examples components
|
||||
import DefaultItem from "examples/Items/DefaultItem";
|
||||
|
||||
function NextEvents(): JSX.Element {
|
||||
return (
|
||||
<Card sx={{ height: "100%" }}>
|
||||
<MDBox pt={2} px={2}>
|
||||
<MDTypography variant="h6" fontWeight="medium">
|
||||
Next events
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
<MDBox p={2}>
|
||||
<DefaultItem
|
||||
color="dark"
|
||||
icon="paid"
|
||||
title="Cyber Week"
|
||||
description="27 March 2020, at 12:30 PM"
|
||||
/>
|
||||
<MDBox mt={3.5}>
|
||||
<DefaultItem
|
||||
color="dark"
|
||||
icon="notifications"
|
||||
title="Meeting with Marry"
|
||||
description="24 March 2020, at 10:00 PM"
|
||||
/>
|
||||
</MDBox>
|
||||
<MDBox mt={3.5}>
|
||||
<DefaultItem
|
||||
color="dark"
|
||||
icon="menu_book"
|
||||
title="Book Deposit Hall"
|
||||
description="25 March 2021, at 9:30 AM"
|
||||
/>
|
||||
</MDBox>
|
||||
<MDBox mt={3.5}>
|
||||
<DefaultItem
|
||||
color="dark"
|
||||
icon="local_shipping"
|
||||
title="Shipment Deal UK"
|
||||
description="25 March 2021, at 2:00 PM"
|
||||
/>
|
||||
</MDBox>
|
||||
<MDBox mt={3.5}>
|
||||
<DefaultItem
|
||||
color="dark"
|
||||
icon="palette"
|
||||
title="Verify Dashboard Color Palette"
|
||||
description="26 March 2021, at 9:00 AM"
|
||||
/>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
export default NextEvents;
|
||||
@ -1,79 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
// Material Dashboard 2 PRO React TS Base Styles
|
||||
import colors from "assets/theme/base/colors";
|
||||
|
||||
const { white } = colors;
|
||||
|
||||
function configs(backgroundColor?: "string"): any {
|
||||
return {
|
||||
data: {
|
||||
labels: ["Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
|
||||
datasets: [
|
||||
{
|
||||
label: "Visitors",
|
||||
tension: 0.5,
|
||||
pointRadius: 0,
|
||||
borderColor: white.main,
|
||||
borderWidth: 2,
|
||||
backgroundColor,
|
||||
data: [50, 45, 60, 60, 80, 65, 90, 80, 100],
|
||||
maxBarThickness: 6,
|
||||
fill: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
interaction: {
|
||||
intersect: false,
|
||||
mode: "index",
|
||||
},
|
||||
scales: {
|
||||
y: {
|
||||
grid: {
|
||||
drawBorder: false,
|
||||
display: false,
|
||||
drawOnChartArea: false,
|
||||
drawTicks: false,
|
||||
},
|
||||
ticks: {
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
x: {
|
||||
grid: {
|
||||
drawBorder: false,
|
||||
display: false,
|
||||
drawOnChartArea: false,
|
||||
drawTicks: false,
|
||||
},
|
||||
ticks: {
|
||||
display: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
export default configs;
|
||||
@ -1,104 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
import { useRef, useState, useMemo, useEffect } from "react";
|
||||
|
||||
// react-chartjs-2 components
|
||||
import { Line } from "react-chartjs-2";
|
||||
|
||||
// @mui material components
|
||||
import Card from "@mui/material/Card";
|
||||
import Menu from "@mui/material/Menu";
|
||||
import MenuItem from "@mui/material/MenuItem";
|
||||
import Icon from "@mui/material/Icon";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDBox from "components/MDBox";
|
||||
import MDTypography from "components/MDTypography";
|
||||
|
||||
// Chart configurations
|
||||
import configs from "layouts/applications/calendar/components/ProductivityChart/configs";
|
||||
|
||||
// Material Dashboard 2 PRO React TS Base Styles
|
||||
import typography from "assets/theme/base/typography";
|
||||
|
||||
function ProductivityChart(): JSX.Element {
|
||||
const { size } = typography;
|
||||
const chartRef = useRef<HTMLDivElement>(null);
|
||||
const [openMenu, setOpenMenu] = useState(null);
|
||||
const [chart, setChart] = useState([]);
|
||||
const { data, options }: any = chart;
|
||||
|
||||
const handleOpenMenu = ({ currentTarget }: { currentTarget: HTMLSpanElement }) =>
|
||||
setOpenMenu(currentTarget);
|
||||
const handleCloseMenu = () => setOpenMenu(null);
|
||||
|
||||
useEffect(() => setChart(configs()), []);
|
||||
|
||||
const renderMenu = () => (
|
||||
<Menu
|
||||
anchorEl={openMenu}
|
||||
transformOrigin={{ vertical: "top", horizontal: "right" }}
|
||||
open={Boolean(openMenu)}
|
||||
onClose={handleCloseMenu}
|
||||
keepMounted
|
||||
>
|
||||
<MenuItem onClick={handleCloseMenu}>Action</MenuItem>
|
||||
<MenuItem onClick={handleCloseMenu}>Anoter action</MenuItem>
|
||||
<MenuItem onClick={handleCloseMenu}>Something else here</MenuItem>
|
||||
</Menu>
|
||||
);
|
||||
|
||||
return (
|
||||
<Card sx={{ overflow: "hidden" }}>
|
||||
<MDBox bgColor="dark" variant="gradient">
|
||||
<MDBox p={2}>
|
||||
<MDBox display="flex" justifyContent="space-between">
|
||||
<MDBox>
|
||||
<MDTypography variant="h6" fontWeight="medium" color="white">
|
||||
Productivity
|
||||
</MDTypography>
|
||||
<MDBox display="flex" alignItems="center">
|
||||
<MDBox fontSize={size.lg} color="success" mb={0.3} mr={0.5} lineHeight={0}>
|
||||
<Icon sx={{ fontWeight: "bold" }}>arrow_upward</Icon>
|
||||
</MDBox>
|
||||
<MDTypography variant="button" color="white" fontWeight="medium">
|
||||
4% more{" "}
|
||||
<MDTypography variant="button" color="white">
|
||||
in 2021
|
||||
</MDTypography>
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
<MDTypography color="white" onClick={handleOpenMenu}>
|
||||
<Icon sx={{ cursor: "pointer" }}>more_horiz</Icon>
|
||||
</MDTypography>
|
||||
{renderMenu()}
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
{useMemo(
|
||||
() => (
|
||||
<MDBox ref={chartRef} sx={{ height: "6.25rem" }}>
|
||||
<Line data={data} options={options} />
|
||||
</MDBox>
|
||||
),
|
||||
[chart]
|
||||
)}
|
||||
</MDBox>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
export default ProductivityChart;
|
||||
@ -1,74 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
const calendarEventsData = [
|
||||
{
|
||||
title: "All day conference",
|
||||
start: "2021-08-01",
|
||||
end: "2021-08-01",
|
||||
className: "success",
|
||||
},
|
||||
|
||||
{
|
||||
title: "Meeting with Mary",
|
||||
start: "2021-08-03",
|
||||
end: "2021-08-03",
|
||||
className: "info",
|
||||
},
|
||||
|
||||
{
|
||||
title: "Cyber Week",
|
||||
start: "2021-08-04",
|
||||
end: "2021-08-04",
|
||||
className: "warning",
|
||||
},
|
||||
|
||||
{
|
||||
title: "Winter Hackaton",
|
||||
start: "2021-08-05",
|
||||
end: "2021-08-05",
|
||||
className: "error",
|
||||
},
|
||||
|
||||
{
|
||||
title: "Digital event",
|
||||
start: "2021-08-09",
|
||||
end: "2021-08-11",
|
||||
className: "warning",
|
||||
},
|
||||
|
||||
{
|
||||
title: "Marketing event",
|
||||
start: "2021-08-12",
|
||||
end: "2021-08-12",
|
||||
className: "primary",
|
||||
},
|
||||
|
||||
{
|
||||
title: "Dinner with Family",
|
||||
start: "2021-08-21",
|
||||
end: "2021-08-21",
|
||||
className: "error",
|
||||
},
|
||||
|
||||
{
|
||||
title: "Black Friday",
|
||||
start: "2021-08-25",
|
||||
end: "2021-08-25",
|
||||
className: "info",
|
||||
},
|
||||
];
|
||||
|
||||
export default calendarEventsData;
|
||||
@ -1,75 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
import { useMemo } from "react";
|
||||
|
||||
// @mui material components
|
||||
import Grid from "@mui/material/Grid";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDBox from "components/MDBox";
|
||||
|
||||
// Material Dashboard 2 PRO React TS examples components
|
||||
import DashboardLayout from "examples/LayoutContainers/DashboardLayout";
|
||||
import DashboardNavbar from "examples/Navbars/DashboardNavbar";
|
||||
import Footer from "examples/Footer";
|
||||
import EventCalendar from "examples/Calendar";
|
||||
|
||||
// Calendar application components
|
||||
import Header from "layouts/applications/calendar/components/Header";
|
||||
import NextEvents from "layouts/applications/calendar/components/NextEvents";
|
||||
import ProductivityChart from "layouts/applications/calendar/components/ProductivityChart";
|
||||
|
||||
// Data
|
||||
import calendarEventsData from "layouts/applications/calendar/data/calendarEventsData";
|
||||
|
||||
function Calendar(): JSX.Element {
|
||||
return (
|
||||
<DashboardLayout>
|
||||
<DashboardNavbar />
|
||||
<MDBox pt={3}>
|
||||
<MDBox display="flex" justifyContent="flex-end" mt={1} mb={4} mx={2}>
|
||||
<Header />
|
||||
</MDBox>
|
||||
<Grid container spacing={3}>
|
||||
<Grid item xs={12} xl={9} sx={{ height: "max-content" }}>
|
||||
{useMemo(
|
||||
() => (
|
||||
<EventCalendar
|
||||
initialView="dayGridMonth"
|
||||
initialDate="2021-08-10"
|
||||
events={calendarEventsData}
|
||||
selectable
|
||||
editable
|
||||
/>
|
||||
),
|
||||
[calendarEventsData]
|
||||
)}
|
||||
</Grid>
|
||||
<Grid item xs={12} xl={3}>
|
||||
<MDBox mb={3}>
|
||||
<NextEvents />
|
||||
</MDBox>
|
||||
<MDBox mb={3}>
|
||||
<ProductivityChart />
|
||||
</MDBox>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</MDBox>
|
||||
<Footer />
|
||||
</DashboardLayout>
|
||||
);
|
||||
}
|
||||
|
||||
export default Calendar;
|
||||
@ -1,487 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
const dataTableData = {
|
||||
columns: [
|
||||
{ Header: "name", accessor: "name", width: "20%" },
|
||||
{ Header: "position", accessor: "position", width: "25%" },
|
||||
{ Header: "office", accessor: "office" },
|
||||
{ Header: "age", accessor: "age", width: "7%" },
|
||||
{ Header: "start date", accessor: "startDate" },
|
||||
{ Header: "salary", accessor: "salary" },
|
||||
],
|
||||
|
||||
rows: [
|
||||
{
|
||||
name: "Hanny Baniard",
|
||||
position: "Data Coordiator",
|
||||
office: "Baorixile",
|
||||
age: 42,
|
||||
startDate: "4/11/2021",
|
||||
salary: "$474,978",
|
||||
},
|
||||
|
||||
{
|
||||
name: "Lara Puleque",
|
||||
position: "Payment Adjustment Coordinator",
|
||||
office: "Cijangkar",
|
||||
age: 47,
|
||||
startDate: "8/2/2021",
|
||||
salary: "$387,287",
|
||||
},
|
||||
{
|
||||
name: "Torie Repper",
|
||||
position: "Administrative Officer",
|
||||
office: "Montpellier",
|
||||
age: 25,
|
||||
startDate: "4/21/2021",
|
||||
salary: "$94,780",
|
||||
},
|
||||
{
|
||||
name: "Nat Gair",
|
||||
position: "Help Desk Technician",
|
||||
office: "Imider",
|
||||
age: 57,
|
||||
startDate: "12/6/2020",
|
||||
salary: "$179,177",
|
||||
},
|
||||
{
|
||||
name: "Maggi Slowan",
|
||||
position: "Help Desk Technician",
|
||||
office: "Jaunpils",
|
||||
age: 56,
|
||||
startDate: "11/7/2020",
|
||||
salary: "$440,874",
|
||||
},
|
||||
{
|
||||
name: "Marleah Snipe",
|
||||
position: "Account Representative II",
|
||||
office: "Orekhovo-Borisovo Severnoye",
|
||||
age: 31,
|
||||
startDate: "7/18/2021",
|
||||
salary: "$404,983",
|
||||
},
|
||||
{
|
||||
name: "Georgia Danbury",
|
||||
position: "Professor",
|
||||
office: "Gniezno",
|
||||
age: 50,
|
||||
startDate: "10/1/2020",
|
||||
salary: "$346,576",
|
||||
},
|
||||
{
|
||||
name: "Bev Castan",
|
||||
position: "Design Engineer",
|
||||
office: "Acharnés",
|
||||
age: 19,
|
||||
startDate: "1/14/2021",
|
||||
salary: "$445,171",
|
||||
},
|
||||
{
|
||||
name: "Reggi Westney",
|
||||
position: "Financial Advisor",
|
||||
office: "Piuí",
|
||||
age: 56,
|
||||
startDate: "3/21/2021",
|
||||
salary: "$441,569",
|
||||
},
|
||||
{
|
||||
name: "Bartholomeus Prosh",
|
||||
position: "Project Manager",
|
||||
office: "Kelīshād va Sūdarjān",
|
||||
age: 28,
|
||||
startDate: "5/27/2021",
|
||||
salary: "$336,238",
|
||||
},
|
||||
{
|
||||
name: "Sheffy Feehely",
|
||||
position: "Software Consultant",
|
||||
office: "Ndibène Dahra",
|
||||
age: 27,
|
||||
startDate: "3/23/2021",
|
||||
salary: "$473,391",
|
||||
},
|
||||
{
|
||||
name: "Euphemia Chastelain",
|
||||
position: "Engineer IV",
|
||||
office: "Little Baguio",
|
||||
age: 63,
|
||||
startDate: "5/1/2021",
|
||||
salary: "$339,489",
|
||||
},
|
||||
{
|
||||
name: "Sharai Labat",
|
||||
position: "Geological Engineer",
|
||||
office: "Býšť",
|
||||
age: 53,
|
||||
startDate: "6/18/2021",
|
||||
salary: "$403,178",
|
||||
},
|
||||
{
|
||||
name: "Nicolis Bremmell",
|
||||
position: "Analyst Programmer",
|
||||
office: "Piraí do Sul",
|
||||
age: 27,
|
||||
startDate: "1/29/2021",
|
||||
salary: "$443,473",
|
||||
},
|
||||
{
|
||||
name: "Mattie Rait",
|
||||
position: "Budget/Accounting Analyst IV",
|
||||
office: "Meziměstí",
|
||||
age: 30,
|
||||
startDate: "6/9/2021",
|
||||
salary: "$233,875",
|
||||
},
|
||||
{
|
||||
name: "Inger Gawkes",
|
||||
position: "Internal Auditor",
|
||||
office: "Kangar",
|
||||
age: 27,
|
||||
startDate: "4/20/2021",
|
||||
salary: "$378,343",
|
||||
},
|
||||
{
|
||||
name: "Aldus Marginson",
|
||||
position: "Chief Design Engineer",
|
||||
office: "Pingdingshan",
|
||||
age: 29,
|
||||
startDate: "3/24/2021",
|
||||
salary: "$223,231",
|
||||
},
|
||||
{
|
||||
name: "Wendel Swaite",
|
||||
position: "Speech Pathologist",
|
||||
office: "Rubirizi",
|
||||
age: 22,
|
||||
startDate: "6/5/2021",
|
||||
salary: "$325,812",
|
||||
},
|
||||
{
|
||||
name: "Duffy Cicconetti",
|
||||
position: "Software Test Engineer I",
|
||||
office: "Sendai-shi",
|
||||
age: 58,
|
||||
startDate: "5/2/2021",
|
||||
salary: "$335,397",
|
||||
},
|
||||
{
|
||||
name: "Mandi Paulley",
|
||||
position: "Account Representative III",
|
||||
office: "Independencia",
|
||||
age: 25,
|
||||
startDate: "4/27/2021",
|
||||
salary: "$367,351",
|
||||
},
|
||||
{
|
||||
name: "Gladi Doorly",
|
||||
position: "Dental Hygienist",
|
||||
office: "Longwy",
|
||||
age: 52,
|
||||
startDate: "4/28/2021",
|
||||
salary: "$306,827",
|
||||
},
|
||||
{
|
||||
name: "Johnnie Godfray",
|
||||
position: "Human Resources Manager",
|
||||
office: "Afikpo",
|
||||
age: 31,
|
||||
startDate: "4/15/2021",
|
||||
salary: "$275,513",
|
||||
},
|
||||
{
|
||||
name: "Rudolph Jurczik",
|
||||
position: "Web Developer III",
|
||||
office: "Jaciara",
|
||||
age: 36,
|
||||
startDate: "11/19/2020",
|
||||
salary: "$193,993",
|
||||
},
|
||||
{
|
||||
name: "Annmarie Fulbrook",
|
||||
position: "Cost Accountant",
|
||||
office: "Lisala",
|
||||
age: 25,
|
||||
startDate: "9/30/2020",
|
||||
salary: "$423,486",
|
||||
},
|
||||
{
|
||||
name: "Daisey Nickolls",
|
||||
position: "Electrical Engineer",
|
||||
office: "Xucheng",
|
||||
age: 60,
|
||||
startDate: "2/26/2021",
|
||||
salary: "$209,415",
|
||||
},
|
||||
{
|
||||
name: "Mordecai Dace",
|
||||
position: "Help Desk Technician",
|
||||
office: "Busuanga",
|
||||
age: 22,
|
||||
startDate: "1/29/2021",
|
||||
salary: "$263,774",
|
||||
},
|
||||
{
|
||||
name: "Melisande Spall",
|
||||
position: "VP Accounting",
|
||||
office: "Xiakouyi",
|
||||
age: 50,
|
||||
startDate: "11/21/2020",
|
||||
salary: "$290,169",
|
||||
},
|
||||
{
|
||||
name: "Karlik Sherrock",
|
||||
position: "GIS Technical Architect",
|
||||
office: "Bagumbayan",
|
||||
age: 50,
|
||||
startDate: "3/13/2021",
|
||||
salary: "$217,224",
|
||||
},
|
||||
{
|
||||
name: "Constance Vinick",
|
||||
position: "Physical Therapy Assistant",
|
||||
office: "Jiaoba",
|
||||
age: 46,
|
||||
startDate: "3/23/2021",
|
||||
salary: "$146,130",
|
||||
},
|
||||
{
|
||||
name: "Kimberlee Hoogendorp",
|
||||
position: "Dental Hygienist",
|
||||
office: "Santo Antônio de Pádua",
|
||||
age: 63,
|
||||
startDate: "4/11/2021",
|
||||
salary: "$401,826",
|
||||
},
|
||||
{
|
||||
name: "Jephthah McIlvenny",
|
||||
position: "Executive Secretary",
|
||||
office: "Poligny",
|
||||
age: 40,
|
||||
startDate: "2/25/2021",
|
||||
salary: "$397,099",
|
||||
},
|
||||
{
|
||||
name: "Claudetta Ivanchenkov",
|
||||
position: "Computer Systems Analyst III",
|
||||
office: "Barranca de Upía",
|
||||
age: 22,
|
||||
startDate: "2/4/2021",
|
||||
salary: "$497,394",
|
||||
},
|
||||
{
|
||||
name: "Gordie Winterbottom",
|
||||
position: "General Manager",
|
||||
office: "Kaeng Khro",
|
||||
age: 18,
|
||||
startDate: "6/11/2021",
|
||||
salary: "$85,498",
|
||||
},
|
||||
{
|
||||
name: "Yvor Ching",
|
||||
position: "Systems Administrator IV",
|
||||
office: "Sobreira",
|
||||
age: 43,
|
||||
startDate: "10/4/2020",
|
||||
salary: "$445,688",
|
||||
},
|
||||
{
|
||||
name: "Marilin Swires",
|
||||
position: "Electrical Engineer",
|
||||
office: "Longnan",
|
||||
age: 38,
|
||||
startDate: "10/30/2020",
|
||||
salary: "$121,519",
|
||||
},
|
||||
{
|
||||
name: "Tobey Fernan",
|
||||
position: "Compensation Analyst",
|
||||
office: "Hushan",
|
||||
age: 31,
|
||||
startDate: "3/17/2021",
|
||||
salary: "$275,670",
|
||||
},
|
||||
{
|
||||
name: "Jan Trustrie",
|
||||
position: "Developer IV",
|
||||
office: "Mashava",
|
||||
age: 34,
|
||||
startDate: "12/3/2020",
|
||||
salary: "$200,260",
|
||||
},
|
||||
{
|
||||
name: "Silva Linger",
|
||||
position: "Nurse Practicioner",
|
||||
office: "Cosne-Cours-sur-Loire",
|
||||
age: 25,
|
||||
startDate: "1/14/2021",
|
||||
salary: "$490,838",
|
||||
},
|
||||
{
|
||||
name: "Jocko Oriel",
|
||||
position: "Design Engineer",
|
||||
office: "Clisson",
|
||||
age: 61,
|
||||
startDate: "12/2/2020",
|
||||
salary: "$401,741",
|
||||
},
|
||||
{
|
||||
name: "Barbra Ready",
|
||||
position: "Paralegal",
|
||||
office: "Xuedian",
|
||||
age: 29,
|
||||
startDate: "11/3/2020",
|
||||
salary: "$246,939",
|
||||
},
|
||||
{
|
||||
name: "Cynde Blakeslee",
|
||||
position: "Software Consultant",
|
||||
office: "Kembangan",
|
||||
age: 23,
|
||||
startDate: "1/9/2021",
|
||||
salary: "$186,173",
|
||||
},
|
||||
{
|
||||
name: "Erminia O' Shea",
|
||||
position: "Analog Circuit Design manager",
|
||||
office: "Tungawan",
|
||||
age: 51,
|
||||
startDate: "12/8/2020",
|
||||
salary: "$209,678",
|
||||
},
|
||||
{
|
||||
name: "Pietro Hoggins",
|
||||
position: "Account Coordinator",
|
||||
office: "Lexington",
|
||||
age: 34,
|
||||
startDate: "7/1/2021",
|
||||
salary: "$245,579",
|
||||
},
|
||||
{
|
||||
name: "Cobb Fish",
|
||||
position: "VP Product Management",
|
||||
office: "General Elizardo Aquino",
|
||||
age: 60,
|
||||
startDate: "8/27/2020",
|
||||
salary: "$201,191",
|
||||
},
|
||||
{
|
||||
name: "Goddart Zorzutti",
|
||||
position: "Office Assistant I",
|
||||
office: "Hedi",
|
||||
age: 44,
|
||||
startDate: "4/14/2021",
|
||||
salary: "$89,168",
|
||||
},
|
||||
{
|
||||
name: "Joyce Gason",
|
||||
position: "VP Product Management",
|
||||
office: "Jingzhou",
|
||||
age: 48,
|
||||
startDate: "10/10/2020",
|
||||
salary: "$285,350",
|
||||
},
|
||||
{
|
||||
name: "Juliet Lemm",
|
||||
position: "Junior Executive",
|
||||
office: "Tečovice",
|
||||
age: 37,
|
||||
startDate: "4/28/2021",
|
||||
salary: "$479,963",
|
||||
},
|
||||
{
|
||||
name: "Filberte Dobrowolski",
|
||||
position: "Senior Cost Accountant",
|
||||
office: "Puncakmanis",
|
||||
age: 55,
|
||||
startDate: "8/21/2020",
|
||||
salary: "$424,438",
|
||||
},
|
||||
{
|
||||
name: "Justinian Faraday",
|
||||
position: "Help Desk Technician",
|
||||
office: "Bacong",
|
||||
age: 60,
|
||||
startDate: "1/24/2021",
|
||||
salary: "$369,012",
|
||||
},
|
||||
{
|
||||
name: "Amata Cahan",
|
||||
position: "Technical Writer",
|
||||
office: "Hradec Králové",
|
||||
age: 56,
|
||||
startDate: "9/22/2020",
|
||||
salary: "$385,712",
|
||||
},
|
||||
{
|
||||
name: "Gunar Albrecht",
|
||||
position: "Tax Accountant",
|
||||
office: "Chernivtsi",
|
||||
age: 52,
|
||||
startDate: "6/30/2021",
|
||||
salary: "$392,642",
|
||||
},
|
||||
{
|
||||
name: "Mal Deignan",
|
||||
position: "Senior Cost Accountant",
|
||||
office: "Nefta",
|
||||
age: 57,
|
||||
startDate: "7/18/2021",
|
||||
salary: "$322,031",
|
||||
},
|
||||
{
|
||||
name: "Hamil Cicci",
|
||||
position: "Programmer Analyst IV",
|
||||
office: "Fukushima-shi",
|
||||
age: 34,
|
||||
startDate: "10/7/2020",
|
||||
salary: "$471,172",
|
||||
},
|
||||
{
|
||||
name: "Stormie Peacop",
|
||||
position: "GIS Technical Architect",
|
||||
office: "Emiliano Zapata",
|
||||
age: 57,
|
||||
startDate: "10/21/2020",
|
||||
salary: "$217,522",
|
||||
},
|
||||
{
|
||||
name: "Kayle Fallon",
|
||||
position: "Technical Writer",
|
||||
office: "Midleton",
|
||||
age: 19,
|
||||
startDate: "12/10/2020",
|
||||
salary: "$294,275",
|
||||
},
|
||||
{
|
||||
name: "Cassandre Watters",
|
||||
position: "Technical Writer",
|
||||
office: "Karang Tengah",
|
||||
age: 21,
|
||||
startDate: "7/31/2021",
|
||||
salary: "$213,508",
|
||||
},
|
||||
{
|
||||
name: "Cobb Fish",
|
||||
position: "VP Product Management",
|
||||
office: "General Elizardo Aquino",
|
||||
age: 60,
|
||||
startDate: "8/27/2020",
|
||||
salary: "$201,191",
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
export default dataTableData;
|
||||
@ -1,67 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
// @mui material components
|
||||
import Card from "@mui/material/Card";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDBox from "components/MDBox";
|
||||
import MDTypography from "components/MDTypography";
|
||||
|
||||
// Material Dashboard 2 PRO React TS examples components
|
||||
import DashboardLayout from "examples/LayoutContainers/DashboardLayout";
|
||||
import DashboardNavbar from "examples/Navbars/DashboardNavbar";
|
||||
import Footer from "examples/Footer";
|
||||
import DataTable from "examples/Tables/DataTable";
|
||||
|
||||
// Data
|
||||
import dataTableData from "layouts/applications/data-tables/data/dataTableData";
|
||||
|
||||
function DataTables(): JSX.Element {
|
||||
return (
|
||||
<DashboardLayout>
|
||||
<DashboardNavbar />
|
||||
<MDBox pt={6} pb={3}>
|
||||
<MDBox mb={3}>
|
||||
<Card>
|
||||
<MDBox p={3} lineHeight={1}>
|
||||
<MDTypography variant="h5" fontWeight="medium">
|
||||
Datatable Simple
|
||||
</MDTypography>
|
||||
<MDTypography variant="button" color="text">
|
||||
A lightweight, extendable, dependency-free javascript HTML table plugin.
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
<DataTable table={dataTableData} />
|
||||
</Card>
|
||||
</MDBox>
|
||||
<Card>
|
||||
<MDBox p={3} lineHeight={1}>
|
||||
<MDTypography variant="h5" fontWeight="medium">
|
||||
Datatable Search
|
||||
</MDTypography>
|
||||
<MDTypography variant="button" color="text">
|
||||
A lightweight, extendable, dependency-free javascript HTML table plugin.
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
<DataTable table={dataTableData} canSearch />
|
||||
</Card>
|
||||
</MDBox>
|
||||
<Footer />
|
||||
</DashboardLayout>
|
||||
);
|
||||
}
|
||||
|
||||
export default DataTables;
|
||||
@ -1,108 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
import { ReactNode } from "react";
|
||||
|
||||
// @mui material components
|
||||
import Icon from "@mui/material/Icon";
|
||||
import { Theme } from "@mui/material/styles";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDBox from "components/MDBox";
|
||||
import MDBadge from "components/MDBadge";
|
||||
import MDTypography from "components/MDTypography";
|
||||
import MDAvatar from "components/MDAvatar";
|
||||
import MDProgress from "components/MDProgress";
|
||||
|
||||
// Declaring props types for Card
|
||||
interface Props {
|
||||
image?: string;
|
||||
badge: {
|
||||
color: "primary" | "secondary" | "info" | "success" | "warning" | "error" | "dark" | "light";
|
||||
label: string;
|
||||
};
|
||||
content: ReactNode;
|
||||
progress?: number;
|
||||
attachedFiles?: string | number;
|
||||
members: string[];
|
||||
}
|
||||
|
||||
function Card({ image, badge, content, progress, attachedFiles, members }: Props): JSX.Element {
|
||||
const renderMembers = members.map((member, key) => {
|
||||
const imageAlt = `image-${key}`;
|
||||
|
||||
return (
|
||||
<MDAvatar
|
||||
key={imageAlt}
|
||||
src={member}
|
||||
alt={imageAlt}
|
||||
size="xs"
|
||||
sx={{
|
||||
border: ({ borders: { borderWidth }, palette: { white } }: Theme) =>
|
||||
`${borderWidth[2]} solid ${white.main}`,
|
||||
cursor: "pointer",
|
||||
position: "relative",
|
||||
ml: -1,
|
||||
mr: 0,
|
||||
|
||||
"&:hover, &:focus": {
|
||||
zIndex: "10",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
{image && <MDBox component="img" src={image} width="100%" borderRadius="lg" mb={1} />}
|
||||
<MDBadge size="xs" color={badge.color} badgeContent={badge.label} container />
|
||||
<MDBox mt={1} mb={2}>
|
||||
<MDTypography variant="body2" color="text">
|
||||
{content}
|
||||
</MDTypography>
|
||||
{progress > 0 && (
|
||||
<MDBox mt={0.25}>
|
||||
<MDProgress variant="gradient" value={progress} color={badge.color} />
|
||||
</MDBox>
|
||||
)}
|
||||
</MDBox>
|
||||
<MDBox display="flex" justifyContent="space-between" alignItems="center">
|
||||
<MDBox display="flex" alignItems="center" color="text">
|
||||
{attachedFiles && (
|
||||
<>
|
||||
<MDTypography variant="body2" color="text" sx={{ lineHeight: 0 }}>
|
||||
<Icon sx={{ fontWeight: "bold" }}>attach_file</Icon>
|
||||
</MDTypography>
|
||||
<MDTypography variant="button" fontWeight="regular" color="text">
|
||||
{attachedFiles}
|
||||
</MDTypography>
|
||||
</>
|
||||
)}
|
||||
</MDBox>
|
||||
<MDBox display="flex">{renderMembers}</MDBox>
|
||||
</MDBox>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
// Declaring default props for Card
|
||||
Card.defaultProps = {
|
||||
image: "",
|
||||
progress: 0,
|
||||
attachedFiles: "",
|
||||
};
|
||||
|
||||
export default Card;
|
||||
@ -1,75 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
// @mui material components
|
||||
import Divider from "@mui/material/Divider";
|
||||
import Icon from "@mui/material/Icon";
|
||||
import { Theme } from "@mui/material/styles";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDBox from "components/MDBox";
|
||||
import MDTypography from "components/MDTypography";
|
||||
import MDAvatar from "components/MDAvatar";
|
||||
import MDButton from "components/MDButton";
|
||||
|
||||
// Image
|
||||
import team1 from "assets/images/team-1.jpg";
|
||||
import team2 from "assets/images/team-2.jpg";
|
||||
import team3 from "assets/images/team-3.jpg";
|
||||
import team4 from "assets/images/team-4.jpg";
|
||||
import team5 from "assets/images/team-5.jpg";
|
||||
|
||||
function Header(): JSX.Element {
|
||||
const avatarStyles: { [key: string]: any } = {
|
||||
border: ({ borders: { borderWidth }, palette: { white } }: Theme) =>
|
||||
`${borderWidth[2]} solid ${white.main}`,
|
||||
cursor: "pointer",
|
||||
position: "relative",
|
||||
ml: -1.5,
|
||||
|
||||
"&:hover, &:focus": {
|
||||
zIndex: "10",
|
||||
},
|
||||
};
|
||||
|
||||
return (
|
||||
<MDBox display="flex" alignItems="center">
|
||||
<MDBox mt={0.5} pr={1}>
|
||||
<MDBox mb={1} ml={-1.25} lineHeight={0}>
|
||||
<MDTypography variant="caption" color="secondary">
|
||||
Team members:
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
<MDBox display="flex">
|
||||
<MDAvatar src={team1} alt="team-1" size="sm" sx={avatarStyles} />
|
||||
<MDAvatar src={team2} alt="team-1" size="sm" sx={avatarStyles} />
|
||||
<MDAvatar src={team3} alt="team-1" size="sm" sx={avatarStyles} />
|
||||
<MDAvatar src={team4} alt="team-1" size="sm" sx={avatarStyles} />
|
||||
<MDAvatar src={team5} alt="team-1" size="sm" sx={avatarStyles} />
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
<MDBox height="75%" alignSelf="flex-end">
|
||||
<Divider orientation="vertical" />
|
||||
</MDBox>
|
||||
<MDBox pl={1}>
|
||||
<MDButton variant="gradient" color="info" iconOnly>
|
||||
<Icon sx={{ fontWeight: "bold" }}>add</Icon>
|
||||
</MDButton>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
);
|
||||
}
|
||||
|
||||
export default Header;
|
||||
@ -1,172 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
// uuid is a library for generating unique id
|
||||
import { v4 as uuidv4 } from "uuid";
|
||||
|
||||
// Kanban application components
|
||||
import Card from "layouts/applications/kanban/components/Card";
|
||||
|
||||
// Images
|
||||
import officeDark from "assets/images/office-dark.jpg";
|
||||
import meeting from "assets/images/meeting.jpg";
|
||||
import homeDecore from "assets/images/home-decor-1.jpg";
|
||||
import team1 from "assets/images/team-1.jpg";
|
||||
import team2 from "assets/images/team-2.jpg";
|
||||
import team3 from "assets/images/team-3.jpg";
|
||||
import team4 from "assets/images/team-4.jpg";
|
||||
import team5 from "assets/images/team-5.jpg";
|
||||
|
||||
const boards = {
|
||||
columns: [
|
||||
{
|
||||
id: uuidv4(),
|
||||
title: "Backlog",
|
||||
cards: [
|
||||
{
|
||||
id: uuidv4(),
|
||||
template: "Change me to change title",
|
||||
},
|
||||
{
|
||||
id: uuidv4(),
|
||||
template: "Drag me to 'In progress' section",
|
||||
},
|
||||
{
|
||||
id: uuidv4(),
|
||||
template: (
|
||||
<Card
|
||||
image={officeDark}
|
||||
badge={{ color: "dark", label: "pending" }}
|
||||
content="Website Design: New cards for blog section and profile details"
|
||||
attachedFiles={3}
|
||||
members={[team1, team2, team3]}
|
||||
/>
|
||||
),
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: uuidv4(),
|
||||
title: "In progress",
|
||||
cards: [
|
||||
{
|
||||
id: uuidv4(),
|
||||
template: (
|
||||
<Card
|
||||
badge={{ color: "error", label: "errors" }}
|
||||
content="Fix firefox errors"
|
||||
attachedFiles={9}
|
||||
members={[team2, team3]}
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
id: uuidv4(),
|
||||
template: (
|
||||
<Card
|
||||
badge={{ color: "info", label: "updates" }}
|
||||
content="Argon Dashboard PRO - React"
|
||||
attachedFiles={3}
|
||||
members={[team5, team4]}
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
id: uuidv4(),
|
||||
template: (
|
||||
<Card
|
||||
image={meeting}
|
||||
badge={{ color: "info", label: "updates" }}
|
||||
content="ReactJS v17 Updates"
|
||||
attachedFiles={3}
|
||||
members={[team1, team2, team3]}
|
||||
/>
|
||||
),
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: uuidv4(),
|
||||
title: "In review",
|
||||
cards: [
|
||||
{
|
||||
id: uuidv4(),
|
||||
template: (
|
||||
<Card
|
||||
badge={{ color: "warning", label: "in testing" }}
|
||||
content="Responsive Changes"
|
||||
attachedFiles={11}
|
||||
members={[team3, team2]}
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
id: uuidv4(),
|
||||
template: (
|
||||
<Card
|
||||
badge={{ color: "success", label: "in review" }}
|
||||
content="Change images dimension"
|
||||
progress={80}
|
||||
members={[team3]}
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
id: uuidv4(),
|
||||
template: (
|
||||
<Card
|
||||
badge={{ color: "info", label: "in review" }}
|
||||
content="Update links"
|
||||
progress={60}
|
||||
attachedFiles={6}
|
||||
members={[team5, team1]}
|
||||
/>
|
||||
),
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: uuidv4(),
|
||||
title: "Done",
|
||||
cards: [
|
||||
{
|
||||
id: uuidv4(),
|
||||
template: (
|
||||
<Card
|
||||
image={homeDecore}
|
||||
badge={{ color: "success", label: "done" }}
|
||||
content="Redesign for the home page"
|
||||
attachedFiles={8}
|
||||
members={[team5, team1, team4]}
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
id: uuidv4(),
|
||||
template: (
|
||||
<Card
|
||||
badge={{ color: "success", label: "done" }}
|
||||
content="Schedule winter campaign"
|
||||
attachedFiles={2}
|
||||
members={[team1, team4]}
|
||||
/>
|
||||
),
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
export default boards;
|
||||
@ -1,173 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
import { useState } from "react";
|
||||
|
||||
// @asseinfo/react-kanban components
|
||||
import Board from "@asseinfo/react-kanban";
|
||||
|
||||
// html-react-parser
|
||||
import parse from "html-react-parser";
|
||||
|
||||
// uuid is a library for generating unique id
|
||||
import { v4 as uuidv4 } from "uuid";
|
||||
|
||||
// @mui material components
|
||||
import Icon from "@mui/material/Icon";
|
||||
import { Theme } from "@mui/material/styles";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDBox from "components/MDBox";
|
||||
import MDButton from "components/MDButton";
|
||||
import MDTypography from "components/MDTypography";
|
||||
import MDInput from "components/MDInput";
|
||||
|
||||
// Material Dashboard 2 PRO React TS examples components
|
||||
import DashboardLayout from "examples/LayoutContainers/DashboardLayout";
|
||||
import DashboardNavbar from "examples/Navbars/DashboardNavbar";
|
||||
import Footer from "examples/Footer";
|
||||
|
||||
// Kanban application components
|
||||
import Header from "layouts/applications/kanban/components/Header";
|
||||
|
||||
// Data
|
||||
import boards from "layouts/applications/kanban/data";
|
||||
|
||||
// Material Dashboard 2 PRO React context
|
||||
import { useMaterialUIController } from "context";
|
||||
|
||||
function Kanban(): JSX.Element {
|
||||
const [controller] = useMaterialUIController();
|
||||
const { darkMode } = controller;
|
||||
|
||||
const [newCardForm, setNewCardForm] = useState<string | number | boolean>(false);
|
||||
const [formValue, setFormValue] = useState<string>("");
|
||||
|
||||
const openNewCardForm = (event: HTMLButtonElement | any, id: string | number) =>
|
||||
setNewCardForm(id);
|
||||
const closeNewCardForm = () => setNewCardForm(false);
|
||||
const handeSetFormValue = ({ currentTarget }: any) => setFormValue(currentTarget.value);
|
||||
|
||||
return (
|
||||
<DashboardLayout>
|
||||
<DashboardNavbar />
|
||||
<MDBox py={3}>
|
||||
<MDBox display="flex" justifyContent="flex-end" m={2}>
|
||||
<Header />
|
||||
</MDBox>
|
||||
<MDBox
|
||||
position="relative"
|
||||
my={4}
|
||||
sx={({
|
||||
palette: { light, background },
|
||||
functions: { pxToRem },
|
||||
borders: { borderRadius },
|
||||
}: Theme | any) => ({
|
||||
"& .react-kanban-column": {
|
||||
backgroundColor: darkMode ? background.card : light.main,
|
||||
width: pxToRem(450),
|
||||
margin: `0 ${pxToRem(10)}`,
|
||||
padding: pxToRem(20),
|
||||
borderRadius: borderRadius.lg,
|
||||
},
|
||||
})}
|
||||
>
|
||||
<Board
|
||||
initialBoard={boards}
|
||||
allowAddCard
|
||||
allowAddColumn
|
||||
renderColumnHeader={({ id, title }: any, { addCard }: any) => (
|
||||
<>
|
||||
<MDBox display="flex" justifyContent="space-between" alignItems="center" mb={3}>
|
||||
<MDTypography variant="h6">{title}</MDTypography>
|
||||
<MDButton size="small" iconOnly onClick={(event) => openNewCardForm(event, id)}>
|
||||
<Icon
|
||||
sx={{
|
||||
fontWeight: "bold",
|
||||
color: ({ palette: { dark } }) => dark.main,
|
||||
}}
|
||||
>
|
||||
add
|
||||
</Icon>
|
||||
</MDButton>
|
||||
</MDBox>
|
||||
{newCardForm === id ? (
|
||||
<MDBox my={2.5}>
|
||||
<MDInput
|
||||
value={formValue}
|
||||
rows="4"
|
||||
onChange={handeSetFormValue}
|
||||
multiline
|
||||
fullWidth
|
||||
/>
|
||||
<MDBox display="flex" mt={2}>
|
||||
<MDButton
|
||||
variant="gradient"
|
||||
color="success"
|
||||
size="small"
|
||||
onClick={() => {
|
||||
addCard({ id: uuidv4(), template: formValue });
|
||||
setFormValue("");
|
||||
}}
|
||||
>
|
||||
add
|
||||
</MDButton>
|
||||
<MDBox ml={1}>
|
||||
<MDButton
|
||||
variant="gradient"
|
||||
color="light"
|
||||
size="small"
|
||||
onClick={closeNewCardForm}
|
||||
>
|
||||
cancel
|
||||
</MDButton>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
) : null}
|
||||
</>
|
||||
)}
|
||||
renderCard={({ id, template }: any, { dragging }: any) => (
|
||||
<MDBox
|
||||
key={id}
|
||||
dragging={dragging.toString() || undefined}
|
||||
display="block"
|
||||
width="calc(450px - 40px)"
|
||||
bgColor={darkMode ? "transparent" : "white"}
|
||||
color="text"
|
||||
borderRadius="xl"
|
||||
mt={2.5}
|
||||
py={1.875}
|
||||
px={1.875}
|
||||
lineHeight={1.5}
|
||||
sx={{
|
||||
border: ({ borders: { borderWidth }, palette: { white } }: any) =>
|
||||
darkMode ? `${borderWidth[1]} solid ${white.main}` : 0,
|
||||
fontSize: ({ typography: { size } }: any) => size.md,
|
||||
}}
|
||||
>
|
||||
{typeof template === "string" ? parse(template) : template}
|
||||
</MDBox>
|
||||
)}
|
||||
onCardNew={(): any => null}
|
||||
/>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
<Footer />
|
||||
</DashboardLayout>
|
||||
);
|
||||
}
|
||||
|
||||
export default Kanban;
|
||||
@ -1,78 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
// @mui material components
|
||||
import Grid from "@mui/material/Grid";
|
||||
import Icon from "@mui/material/Icon";
|
||||
import Tooltip from "@mui/material/Tooltip";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDBox from "components/MDBox";
|
||||
import MDTypography from "components/MDTypography";
|
||||
import MDAvatar from "components/MDAvatar";
|
||||
import MDButton from "components/MDButton";
|
||||
|
||||
// Wizard application components
|
||||
import FormField from "layouts/applications/wizard/components/FormField";
|
||||
|
||||
// Images
|
||||
import team2 from "assets/images/team-2.jpg";
|
||||
|
||||
function About(): JSX.Element {
|
||||
return (
|
||||
<MDBox>
|
||||
<MDBox width="82%" textAlign="center" mx="auto" my={4}>
|
||||
<MDBox mb={1}>
|
||||
<MDTypography variant="h5" fontWeight="regular">
|
||||
Let's start with the basic information
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
<MDTypography variant="body2" color="text">
|
||||
Let us know your name and email address. Use an address you don't mind other users
|
||||
contacting you at
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
<MDBox mt={2}>
|
||||
<Grid container spacing={3}>
|
||||
<Grid item xs={12} sm={4} container justifyContent="center">
|
||||
<MDBox position="relative" height="max-content" mx="auto">
|
||||
<MDAvatar src={team2} alt="profile picture" size="xxl" variant="rounded" />
|
||||
<MDBox alt="spotify logo" position="absolute" right={0} bottom={0} mr={-1} mb={-1}>
|
||||
<Tooltip title="Edit" placement="top">
|
||||
<MDButton variant="gradient" color="info" size="small" iconOnly>
|
||||
<Icon>edit</Icon>
|
||||
</MDButton>
|
||||
</Tooltip>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={8}>
|
||||
<MDBox mb={2}>
|
||||
<FormField type="text" label="First Name" />
|
||||
</MDBox>
|
||||
<MDBox mb={2}>
|
||||
<FormField type="text" label="Last Name" />
|
||||
</MDBox>
|
||||
<MDBox>
|
||||
<FormField type="email" label="Email Address" />
|
||||
</MDBox>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
);
|
||||
}
|
||||
|
||||
export default About;
|
||||
@ -1,130 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
import { useState } from "react";
|
||||
|
||||
// @mui material components
|
||||
import Grid from "@mui/material/Grid";
|
||||
import Icon from "@mui/material/Icon";
|
||||
import { Theme } from "@mui/material/styles";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDBox from "components/MDBox";
|
||||
import MDTypography from "components/MDTypography";
|
||||
import MDButton from "components/MDButton";
|
||||
|
||||
function Account(): JSX.Element {
|
||||
const [design, setDesign] = useState(false);
|
||||
const [code, setCode] = useState(false);
|
||||
const [develop, setDevelop] = useState(false);
|
||||
|
||||
const handleSetDesign = () => setDesign(!design);
|
||||
const handleSetCode = () => setCode(!code);
|
||||
const handleSetDevelop = () => setDevelop(!develop);
|
||||
|
||||
const customButtonStyles = ({
|
||||
functions: { pxToRem, rgba },
|
||||
borders: { borderWidth },
|
||||
palette: { transparent, info },
|
||||
typography: { size },
|
||||
}: Theme) => ({
|
||||
width: pxToRem(164),
|
||||
height: pxToRem(130),
|
||||
borderWidth: borderWidth[2],
|
||||
mb: 1,
|
||||
ml: 0.5,
|
||||
|
||||
"&.MuiButton-contained, &.MuiButton-contained:hover": {
|
||||
boxShadow: "none",
|
||||
border: `${borderWidth[2]} solid ${transparent.main}`,
|
||||
},
|
||||
|
||||
"&:hover": {
|
||||
backgroundColor: `${transparent.main} !important`,
|
||||
border: `${borderWidth[2]} solid ${info.main} !important`,
|
||||
color: rgba(info.main, 0.75),
|
||||
},
|
||||
|
||||
"& .material-icons-round": {
|
||||
fontSize: `${size["3xl"]} !important`,
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<MDBox>
|
||||
<MDBox width="80%" textAlign="center" mx="auto" my={4}>
|
||||
<MDBox mb={1}>
|
||||
<MDTypography variant="h5" fontWeight="regular">
|
||||
What are you doing? (checkboxes)
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
<MDTypography variant="body2" color="text">
|
||||
Give us more details about you. What do you enjoy doing in your spare time?
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
<MDBox mt={2}>
|
||||
<Grid container spacing={3} justifyContent="center">
|
||||
<Grid item xs={12} sm={3}>
|
||||
<MDBox textAlign="center">
|
||||
<MDButton
|
||||
color="info"
|
||||
variant={design ? "contained" : "outlined"}
|
||||
onClick={handleSetDesign}
|
||||
sx={customButtonStyles}
|
||||
>
|
||||
<Icon sx={{ color: design ? "white" : "inherit" }}>brush</Icon>
|
||||
</MDButton>
|
||||
<MDTypography variant="h6" sx={{ mt: 1 }}>
|
||||
Design
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={3}>
|
||||
<MDBox textAlign="center">
|
||||
<MDButton
|
||||
color="info"
|
||||
variant={code ? "contained" : "outlined"}
|
||||
onClick={handleSetCode}
|
||||
sx={customButtonStyles}
|
||||
>
|
||||
<Icon sx={{ color: design ? "white" : "inherit" }}>integration_instructions</Icon>
|
||||
</MDButton>
|
||||
<MDTypography variant="h6" sx={{ mt: 1 }}>
|
||||
Code
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={3}>
|
||||
<MDBox textAlign="center">
|
||||
<MDButton
|
||||
color="info"
|
||||
variant={develop ? "contained" : "outlined"}
|
||||
onClick={handleSetDevelop}
|
||||
sx={customButtonStyles}
|
||||
>
|
||||
<Icon sx={{ color: design ? "white" : "inherit" }}>developer_mode</Icon>
|
||||
</MDButton>
|
||||
<MDTypography variant="h6" sx={{ mt: 1 }}>
|
||||
Develop
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
);
|
||||
}
|
||||
|
||||
export default Account;
|
||||
@ -1,60 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
// @mui material components
|
||||
import Grid from "@mui/material/Grid";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDBox from "components/MDBox";
|
||||
import MDTypography from "components/MDTypography";
|
||||
|
||||
// Wizard application components
|
||||
import FormField from "layouts/applications/wizard/components/FormField";
|
||||
|
||||
function Address(): JSX.Element {
|
||||
return (
|
||||
<MDBox>
|
||||
<MDBox width="80%" textAlign="center" mx="auto" my={4}>
|
||||
<MDBox mb={1}>
|
||||
<MDTypography variant="h5" fontWeight="regular">
|
||||
Are you living in a nice area?
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
<MDTypography variant="body2" color="text">
|
||||
One thing I love about the later sunsets is the chance to go for a walk through the
|
||||
neighborhood woods before dinner
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
<MDBox mt={2}>
|
||||
<Grid container spacing={3}>
|
||||
<Grid item xs={12} md={8}>
|
||||
<FormField type="text" label="Street Name" InputLabelProps={{ shrink: true }} />
|
||||
</Grid>
|
||||
<Grid item xs={12} md={4}>
|
||||
<FormField type="number" label="Street Number" InputLabelProps={{ shrink: true }} />
|
||||
</Grid>
|
||||
<Grid item xs={12} md={7}>
|
||||
<FormField type="text" label="City" InputLabelProps={{ shrink: true }} />
|
||||
</Grid>
|
||||
<Grid item xs={12} md={5}>
|
||||
<FormField type="text" label="Country" InputLabelProps={{ shrink: true }} />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
);
|
||||
}
|
||||
|
||||
export default Address;
|
||||
@ -1,23 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDInput from "components/MDInput";
|
||||
|
||||
function FormField({ label, ...rest }: { label: string; [key: string]: any }): JSX.Element {
|
||||
return <MDInput variant="standard" label={label} fullWidth {...rest} />;
|
||||
}
|
||||
|
||||
export default FormField;
|
||||
@ -1,121 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
import { useState } from "react";
|
||||
|
||||
// @mui material components
|
||||
import Grid from "@mui/material/Grid";
|
||||
import Card from "@mui/material/Card";
|
||||
import Stepper from "@mui/material/Stepper";
|
||||
import Step from "@mui/material/Step";
|
||||
import StepLabel from "@mui/material/StepLabel";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDBox from "components/MDBox";
|
||||
import MDTypography from "components/MDTypography";
|
||||
import MDButton from "components/MDButton";
|
||||
|
||||
// Material Dashboard 2 PRO React TS examples components
|
||||
import DashboardLayout from "examples/LayoutContainers/DashboardLayout";
|
||||
import DashboardNavbar from "examples/Navbars/DashboardNavbar";
|
||||
import Footer from "examples/Footer";
|
||||
|
||||
// Wizard page components
|
||||
import About from "layouts/applications/wizard/components/About";
|
||||
import Account from "layouts/applications/wizard/components/Account";
|
||||
import Address from "layouts/applications/wizard/components/Address";
|
||||
|
||||
function getSteps(): string[] {
|
||||
return ["About", "Account", "Address"];
|
||||
}
|
||||
|
||||
function getStepContent(stepIndex: number): JSX.Element {
|
||||
switch (stepIndex) {
|
||||
case 0:
|
||||
return <About />;
|
||||
case 1:
|
||||
return <Account />;
|
||||
case 2:
|
||||
return <Address />;
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
function Wizard(): JSX.Element {
|
||||
const [activeStep, setActiveStep] = useState<number>(0);
|
||||
const steps = getSteps();
|
||||
const isLastStep: boolean = activeStep === steps.length - 1;
|
||||
|
||||
const handleNext = () => setActiveStep(activeStep + 1);
|
||||
const handleBack = () => setActiveStep(activeStep - 1);
|
||||
|
||||
return (
|
||||
<DashboardLayout>
|
||||
<DashboardNavbar />
|
||||
<MDBox pt={3} pb={8}>
|
||||
<Grid container justifyContent="center" sx={{ my: 4 }}>
|
||||
<Grid item xs={12} lg={8}>
|
||||
<MDBox mt={6} mb={8} textAlign="center">
|
||||
<MDBox mb={1}>
|
||||
<MDTypography variant="h3" fontWeight="bold">
|
||||
Build Your Profile
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
<MDTypography variant="h5" fontWeight="regular" color="secondary">
|
||||
This information will let us know more about you.
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
<Card>
|
||||
<MDBox mt={-3} mx={2}>
|
||||
<Stepper activeStep={activeStep} alternativeLabel>
|
||||
{steps.map((label) => (
|
||||
<Step key={label}>
|
||||
<StepLabel>{label}</StepLabel>
|
||||
</Step>
|
||||
))}
|
||||
</Stepper>
|
||||
</MDBox>
|
||||
<MDBox p={2}>
|
||||
<MDBox>
|
||||
{getStepContent(activeStep)}
|
||||
<MDBox mt={3} width="100%" display="flex" justifyContent="space-between">
|
||||
{activeStep === 0 ? (
|
||||
<MDBox />
|
||||
) : (
|
||||
<MDButton variant="outlined" color="dark" onClick={handleBack}>
|
||||
back
|
||||
</MDButton>
|
||||
)}
|
||||
<MDButton
|
||||
variant="gradient"
|
||||
color="dark"
|
||||
onClick={!isLastStep ? handleNext : undefined}
|
||||
>
|
||||
{isLastStep ? "send" : "next"}
|
||||
</MDButton>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
</Card>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</MDBox>
|
||||
<Footer />
|
||||
</DashboardLayout>
|
||||
);
|
||||
}
|
||||
|
||||
export default Wizard;
|
||||
@ -1,86 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
import { ReactNode } from "react";
|
||||
|
||||
// @mui material components
|
||||
import Grid from "@mui/material/Grid";
|
||||
import { Theme } from "@mui/material/styles";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDBox from "components/MDBox";
|
||||
|
||||
// Material Dashboard 2 PRO React TS examples components
|
||||
import DefaultNavbar from "examples/Navbars/DefaultNavbar";
|
||||
import PageLayout from "examples/LayoutContainers/PageLayout";
|
||||
|
||||
// Material Dashboard 2 PRO React page layout routes
|
||||
import pageRoutes from "page.routes";
|
||||
|
||||
// Authentication pages components
|
||||
import Footer from "layouts/authentication/components/Footer";
|
||||
|
||||
// Declaring props types for BasicLayout
|
||||
interface Props {
|
||||
image: string;
|
||||
children: ReactNode;
|
||||
}
|
||||
|
||||
function BasicLayout({ image, children }: Props): JSX.Element {
|
||||
return (
|
||||
<PageLayout>
|
||||
<DefaultNavbar
|
||||
routes={pageRoutes}
|
||||
action={{
|
||||
type: "external",
|
||||
route: "https://creative-tim.com/product/material-dashboard-2-pro-react-ts",
|
||||
label: "buy now",
|
||||
color: "info",
|
||||
}}
|
||||
transparent
|
||||
light
|
||||
/>
|
||||
<MDBox
|
||||
position="absolute"
|
||||
width="100%"
|
||||
minHeight="100vh"
|
||||
sx={{
|
||||
backgroundImage: ({
|
||||
functions: { linearGradient, rgba },
|
||||
palette: { gradients },
|
||||
}: Theme) =>
|
||||
image &&
|
||||
`${linearGradient(
|
||||
rgba(gradients.dark.main, 0.6),
|
||||
rgba(gradients.dark.state, 0.6)
|
||||
)}, url(${image})`,
|
||||
backgroundSize: "cover",
|
||||
backgroundPosition: "center",
|
||||
backgroundRepeat: "no-repeat",
|
||||
}}
|
||||
/>
|
||||
<MDBox px={1} width="100%" height="100vh" mx="auto">
|
||||
<Grid container spacing={1} justifyContent="center" alignItems="center" height="100%">
|
||||
<Grid item xs={11} sm={9} md={5} lg={4} xl={3}>
|
||||
{children}
|
||||
</Grid>
|
||||
</Grid>
|
||||
</MDBox>
|
||||
<Footer light />
|
||||
</PageLayout>
|
||||
);
|
||||
}
|
||||
|
||||
export default BasicLayout;
|
||||
@ -1,96 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
import { ReactNode } from "react";
|
||||
|
||||
// @mui material components
|
||||
import Grid from "@mui/material/Grid";
|
||||
import { Theme } from "@mui/material/styles";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDBox from "components/MDBox";
|
||||
|
||||
// Material Dashboard 2 PRO React TS examples components
|
||||
import DefaultNavbar from "examples/Navbars/DefaultNavbar";
|
||||
import PageLayout from "examples/LayoutContainers/PageLayout";
|
||||
|
||||
// Authentication layout components
|
||||
import Footer from "layouts/authentication/components/Footer";
|
||||
|
||||
// Material Dashboard 2 PRO React page layout routes
|
||||
import pageRoutes from "page.routes";
|
||||
|
||||
// Declaring props types for CoverLayout
|
||||
interface Props {
|
||||
coverHeight?: string;
|
||||
image: string;
|
||||
children: ReactNode;
|
||||
}
|
||||
|
||||
function CoverLayout({ coverHeight, image, children }: Props): JSX.Element {
|
||||
return (
|
||||
<PageLayout>
|
||||
<DefaultNavbar
|
||||
routes={pageRoutes}
|
||||
action={{
|
||||
type: "external",
|
||||
route: "https://creative-tim.com/product/material-dashboard-2-pro-react-ts",
|
||||
label: "buy now",
|
||||
color: "info",
|
||||
}}
|
||||
transparent
|
||||
light
|
||||
/>
|
||||
<MDBox
|
||||
width="calc(100% - 2rem)"
|
||||
minHeight={coverHeight}
|
||||
borderRadius="xl"
|
||||
mx={2}
|
||||
my={2}
|
||||
pt={6}
|
||||
pb={28}
|
||||
sx={{
|
||||
backgroundImage: ({
|
||||
functions: { linearGradient, rgba },
|
||||
palette: { gradients },
|
||||
}: Theme) =>
|
||||
image &&
|
||||
`${linearGradient(
|
||||
rgba(gradients.dark.main, 0.4),
|
||||
rgba(gradients.dark.state, 0.4)
|
||||
)}, url(${image})`,
|
||||
backgroundSize: "cover",
|
||||
backgroundPosition: "center",
|
||||
backgroundRepeat: "no-repeat",
|
||||
}}
|
||||
/>
|
||||
<MDBox mt={{ xs: -20, lg: -18 }} px={1} width="calc(100% - 2rem)" mx="auto">
|
||||
<Grid container spacing={1} justifyContent="center">
|
||||
<Grid item xs={11} sm={9} md={5} lg={4} xl={3}>
|
||||
{children}
|
||||
</Grid>
|
||||
</Grid>
|
||||
</MDBox>
|
||||
<Footer />
|
||||
</PageLayout>
|
||||
);
|
||||
}
|
||||
|
||||
// Declaring default props for CoverLayout
|
||||
CoverLayout.defaultProps = {
|
||||
coverHeight: "35vh",
|
||||
};
|
||||
|
||||
export default CoverLayout;
|
||||
@ -1,138 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
// @mui material components
|
||||
import Container from "@mui/material/Container";
|
||||
import Link from "@mui/material/Link";
|
||||
import Icon from "@mui/material/Icon";
|
||||
import { Theme } from "@mui/material/styles";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDBox from "components/MDBox";
|
||||
import MDTypography from "components/MDTypography";
|
||||
|
||||
// Material Dashboard 2 PRO React TS Base Styles
|
||||
import typography from "assets/theme/base/typography";
|
||||
|
||||
function Footer({ light }: { light?: boolean }): JSX.Element {
|
||||
const { size } = typography;
|
||||
|
||||
return (
|
||||
<MDBox position="absolute" width="100%" bottom={0} py={4}>
|
||||
<Container>
|
||||
<MDBox
|
||||
width="100%"
|
||||
display="flex"
|
||||
flexDirection={{ xs: "column", lg: "row" }}
|
||||
justifyContent="space-between"
|
||||
alignItems="center"
|
||||
px={1.5}
|
||||
>
|
||||
<MDBox
|
||||
display="flex"
|
||||
justifyContent="center"
|
||||
alignItems="center"
|
||||
flexWrap="wrap"
|
||||
color={light ? "white" : "text"}
|
||||
fontSize={size.sm}
|
||||
>
|
||||
© {new Date().getFullYear()}, made with
|
||||
<MDBox fontSize={size.md} color={light ? "white" : "dark"} mb={-0.5} mx={0.25}>
|
||||
<Icon color="inherit" fontSize="inherit">
|
||||
favorite
|
||||
</Icon>
|
||||
</MDBox>
|
||||
by
|
||||
<Link href="https://www.creative-tim.com/" target="_blank">
|
||||
<MDTypography variant="button" fontWeight="medium" color={light ? "white" : "dark"}>
|
||||
Creative Tim
|
||||
</MDTypography>
|
||||
</Link>
|
||||
for a better web.
|
||||
</MDBox>
|
||||
<MDBox
|
||||
component="ul"
|
||||
sx={({ breakpoints }: Theme) => ({
|
||||
display: "flex",
|
||||
flexWrap: "wrap",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
listStyle: "none",
|
||||
mt: 3,
|
||||
mb: 0,
|
||||
p: 0,
|
||||
|
||||
[breakpoints.up("lg")]: {
|
||||
mt: 0,
|
||||
},
|
||||
})}
|
||||
>
|
||||
<MDBox component="li" pr={2} lineHeight={1}>
|
||||
<Link href="https://www.creative-tim.com/" target="_blank">
|
||||
<MDTypography
|
||||
variant="button"
|
||||
fontWeight="regular"
|
||||
color={light ? "white" : "dark"}
|
||||
>
|
||||
Creative Tim
|
||||
</MDTypography>
|
||||
</Link>
|
||||
</MDBox>
|
||||
<MDBox component="li" px={2} lineHeight={1}>
|
||||
<Link href="https://www.creative-tim.com/presentation" target="_blank">
|
||||
<MDTypography
|
||||
variant="button"
|
||||
fontWeight="regular"
|
||||
color={light ? "white" : "dark"}
|
||||
>
|
||||
About Us
|
||||
</MDTypography>
|
||||
</Link>
|
||||
</MDBox>
|
||||
<MDBox component="li" px={2} lineHeight={1}>
|
||||
<Link href="https://www.creative-tim.com/blog" target="_blank">
|
||||
<MDTypography
|
||||
variant="button"
|
||||
fontWeight="regular"
|
||||
color={light ? "white" : "dark"}
|
||||
>
|
||||
Blog
|
||||
</MDTypography>
|
||||
</Link>
|
||||
</MDBox>
|
||||
<MDBox component="li" pl={2} lineHeight={1}>
|
||||
<Link href="https://www.creative-tim.com/license" target="_blank">
|
||||
<MDTypography
|
||||
variant="button"
|
||||
fontWeight="regular"
|
||||
color={light ? "white" : "dark"}
|
||||
>
|
||||
License
|
||||
</MDTypography>
|
||||
</Link>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
</Container>
|
||||
</MDBox>
|
||||
);
|
||||
}
|
||||
|
||||
// Declaring default props for Footer
|
||||
Footer.defaultProps = {
|
||||
light: false,
|
||||
};
|
||||
|
||||
export default Footer;
|
||||
@ -1,117 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
import { ReactNode } from "react";
|
||||
|
||||
// @mui material components
|
||||
import Grid from "@mui/material/Grid";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDBox from "components/MDBox";
|
||||
import MDTypography from "components/MDTypography";
|
||||
|
||||
// Material Dashboard 2 PRO React TS examples components
|
||||
import DefaultNavbar from "examples/Navbars/DefaultNavbar";
|
||||
import PageLayout from "examples/LayoutContainers/PageLayout";
|
||||
|
||||
// Material Dashboard 2 PRO React page layout routes
|
||||
import pageRoutes from "page.routes";
|
||||
|
||||
// Material Dashboard 2 PRO React context
|
||||
import { useMaterialUIController } from "context";
|
||||
|
||||
// Declaring props types for IllustrationLayout
|
||||
interface Props {
|
||||
header?: ReactNode;
|
||||
title?: string;
|
||||
description?: string;
|
||||
children: ReactNode;
|
||||
illustration?: string;
|
||||
}
|
||||
|
||||
function IllustrationLayout({
|
||||
header,
|
||||
title,
|
||||
description,
|
||||
illustration,
|
||||
children,
|
||||
}: Props): JSX.Element {
|
||||
const [controller] = useMaterialUIController();
|
||||
const { darkMode } = controller;
|
||||
|
||||
return (
|
||||
<PageLayout background="white">
|
||||
<DefaultNavbar
|
||||
routes={pageRoutes}
|
||||
action={{
|
||||
type: "external",
|
||||
route: "https://creative-tim.com/product/material-dashboard-2-pro-react-ts",
|
||||
label: "buy now",
|
||||
color: "info",
|
||||
}}
|
||||
/>
|
||||
<Grid
|
||||
container
|
||||
sx={{
|
||||
backgroundColor: ({ palette: { background, white } }) =>
|
||||
darkMode ? background.default : white.main,
|
||||
}}
|
||||
>
|
||||
<Grid item xs={12} lg={6}>
|
||||
<MDBox
|
||||
display={{ xs: "none", lg: "flex" }}
|
||||
width="calc(100% - 2rem)"
|
||||
height="calc(100vh - 2rem)"
|
||||
borderRadius="lg"
|
||||
ml={2}
|
||||
mt={2}
|
||||
sx={{ backgroundImage: `url(${illustration})` }}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={11} sm={8} md={6} lg={4} xl={3} sx={{ mx: "auto" }}>
|
||||
<MDBox display="flex" flexDirection="column" justifyContent="center" height="100vh">
|
||||
<MDBox py={3} px={3} textAlign="center">
|
||||
{!header ? (
|
||||
<>
|
||||
<MDBox mb={1} textAlign="center">
|
||||
<MDTypography variant="h4" fontWeight="bold">
|
||||
{title}
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
<MDTypography variant="body2" color="text">
|
||||
{description}
|
||||
</MDTypography>
|
||||
</>
|
||||
) : (
|
||||
header
|
||||
)}
|
||||
</MDBox>
|
||||
<MDBox p={3}>{children}</MDBox>
|
||||
</MDBox>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</PageLayout>
|
||||
);
|
||||
}
|
||||
|
||||
// Declaring default props for IllustrationLayout
|
||||
IllustrationLayout.defaultProps = {
|
||||
header: "",
|
||||
title: "",
|
||||
description: "",
|
||||
illustration: "",
|
||||
};
|
||||
|
||||
export default IllustrationLayout;
|
||||
@ -1,70 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
// @mui material components
|
||||
import Card from "@mui/material/Card";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDBox from "components/MDBox";
|
||||
import MDTypography from "components/MDTypography";
|
||||
import MDInput from "components/MDInput";
|
||||
import MDButton from "components/MDButton";
|
||||
|
||||
// Authentication layout components
|
||||
import CoverLayout from "layouts/authentication/components/CoverLayout";
|
||||
|
||||
// Images
|
||||
import bgImage from "assets/images/bg-reset-cover.jpeg";
|
||||
|
||||
function Cover(): JSX.Element {
|
||||
return (
|
||||
<CoverLayout coverHeight="50vh" image={bgImage}>
|
||||
<Card>
|
||||
<MDBox
|
||||
variant="gradient"
|
||||
bgColor="info"
|
||||
borderRadius="lg"
|
||||
coloredShadow="success"
|
||||
mx={2}
|
||||
mt={-3}
|
||||
py={2}
|
||||
mb={1}
|
||||
textAlign="center"
|
||||
>
|
||||
<MDTypography variant="h3" fontWeight="medium" color="white" mt={1}>
|
||||
Reset Password
|
||||
</MDTypography>
|
||||
<MDTypography display="block" variant="button" color="white" my={1}>
|
||||
You will receive an e-mail in maximum 60 seconds
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
<MDBox pt={4} pb={3} px={3}>
|
||||
<MDBox component="form" role="form">
|
||||
<MDBox mb={4}>
|
||||
<MDInput type="email" label="Email" variant="standard" fullWidth />
|
||||
</MDBox>
|
||||
<MDBox mt={6} mb={1}>
|
||||
<MDButton variant="gradient" color="info" fullWidth>
|
||||
reset
|
||||
</MDButton>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
</Card>
|
||||
</CoverLayout>
|
||||
);
|
||||
}
|
||||
|
||||
export default Cover;
|
||||
@ -1,131 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
import { useState } from "react";
|
||||
|
||||
// react-router-dom components
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
// @mui material components
|
||||
import Card from "@mui/material/Card";
|
||||
import Switch from "@mui/material/Switch";
|
||||
import Grid from "@mui/material/Grid";
|
||||
import MuiLink from "@mui/material/Link";
|
||||
|
||||
// @mui icons
|
||||
import FacebookIcon from "@mui/icons-material/Facebook";
|
||||
import GitHubIcon from "@mui/icons-material/GitHub";
|
||||
import GoogleIcon from "@mui/icons-material/Google";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDBox from "components/MDBox";
|
||||
import MDTypography from "components/MDTypography";
|
||||
import MDInput from "components/MDInput";
|
||||
import MDButton from "components/MDButton";
|
||||
|
||||
// Authentication layout components
|
||||
import BasicLayout from "layouts/authentication/components/BasicLayout";
|
||||
|
||||
// Images
|
||||
import bgImage from "assets/images/bg-sign-in-basic.jpeg";
|
||||
|
||||
function Basic(): JSX.Element {
|
||||
const [rememberMe, setRememberMe] = useState<boolean>(false);
|
||||
|
||||
const handleSetRememberMe = () => setRememberMe(!rememberMe);
|
||||
|
||||
return (
|
||||
<BasicLayout image={bgImage}>
|
||||
<Card>
|
||||
<MDBox
|
||||
variant="gradient"
|
||||
bgColor="info"
|
||||
borderRadius="lg"
|
||||
coloredShadow="info"
|
||||
mx={2}
|
||||
mt={-3}
|
||||
p={2}
|
||||
mb={1}
|
||||
textAlign="center"
|
||||
>
|
||||
<MDTypography variant="h4" fontWeight="medium" color="white" mt={1}>
|
||||
Sign in
|
||||
</MDTypography>
|
||||
<Grid container spacing={3} justifyContent="center" sx={{ mt: 1, mb: 2 }}>
|
||||
<Grid item xs={2}>
|
||||
<MDTypography component={MuiLink} href="#" variant="body1" color="white">
|
||||
<FacebookIcon color="inherit" />
|
||||
</MDTypography>
|
||||
</Grid>
|
||||
<Grid item xs={2}>
|
||||
<MDTypography component={MuiLink} href="#" variant="body1" color="white">
|
||||
<GitHubIcon color="inherit" />
|
||||
</MDTypography>
|
||||
</Grid>
|
||||
<Grid item xs={2}>
|
||||
<MDTypography component={MuiLink} href="#" variant="body1" color="white">
|
||||
<GoogleIcon color="inherit" />
|
||||
</MDTypography>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</MDBox>
|
||||
<MDBox pt={4} pb={3} px={3}>
|
||||
<MDBox component="form" role="form">
|
||||
<MDBox mb={2}>
|
||||
<MDInput type="email" label="Email" fullWidth />
|
||||
</MDBox>
|
||||
<MDBox mb={2}>
|
||||
<MDInput type="password" label="Password" fullWidth />
|
||||
</MDBox>
|
||||
<MDBox display="flex" alignItems="center" ml={-1}>
|
||||
<Switch checked={rememberMe} onChange={handleSetRememberMe} />
|
||||
<MDTypography
|
||||
variant="button"
|
||||
fontWeight="regular"
|
||||
color="text"
|
||||
onClick={handleSetRememberMe}
|
||||
sx={{ cursor: "pointer", userSelect: "none", ml: -1 }}
|
||||
>
|
||||
Remember me
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
<MDBox mt={4} mb={1}>
|
||||
<MDButton variant="gradient" color="info" fullWidth>
|
||||
sign in
|
||||
</MDButton>
|
||||
</MDBox>
|
||||
<MDBox mt={3} mb={1} textAlign="center">
|
||||
<MDTypography variant="button" color="text">
|
||||
Don't have an account?{" "}
|
||||
<MDTypography
|
||||
component={Link}
|
||||
to="/authentication/sign-up/cover"
|
||||
variant="button"
|
||||
color="info"
|
||||
fontWeight="medium"
|
||||
textGradient
|
||||
>
|
||||
Sign up
|
||||
</MDTypography>
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
</Card>
|
||||
</BasicLayout>
|
||||
);
|
||||
}
|
||||
|
||||
export default Basic;
|
||||
@ -1,124 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
import { useState } from "react";
|
||||
|
||||
// react-router-dom components
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
// @mui material components
|
||||
import Card from "@mui/material/Card";
|
||||
import Switch from "@mui/material/Switch";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDBox from "components/MDBox";
|
||||
import MDTypography from "components/MDTypography";
|
||||
import MDInput from "components/MDInput";
|
||||
import MDButton from "components/MDButton";
|
||||
|
||||
// Authentication layout components
|
||||
import CoverLayout from "layouts/authentication/components/CoverLayout";
|
||||
|
||||
// Images
|
||||
import bgImage from "assets/images/bg-sign-in-cover.jpeg";
|
||||
|
||||
function Cover(): JSX.Element {
|
||||
const [rememberMe, setRememberMe] = useState<boolean>(true);
|
||||
|
||||
const handleSetRememberMe = () => setRememberMe(!rememberMe);
|
||||
|
||||
return (
|
||||
<CoverLayout image={bgImage}>
|
||||
<Card>
|
||||
<MDBox
|
||||
variant="gradient"
|
||||
bgColor="info"
|
||||
borderRadius="lg"
|
||||
coloredShadow="success"
|
||||
mx={2}
|
||||
mt={-3}
|
||||
p={3}
|
||||
mb={1}
|
||||
textAlign="center"
|
||||
>
|
||||
<MDTypography variant="h4" fontWeight="medium" color="white" mt={1}>
|
||||
Sign in
|
||||
</MDTypography>
|
||||
<MDTypography display="block" variant="button" color="white" my={1}>
|
||||
Enter your email and password to Sign In
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
<MDBox pt={4} pb={3} px={3}>
|
||||
<MDBox component="form" role="form">
|
||||
<MDBox mb={2}>
|
||||
<MDInput
|
||||
type="email"
|
||||
label="Email"
|
||||
variant="standard"
|
||||
fullWidth
|
||||
placeholder="john@example.com"
|
||||
InputLabelProps={{ shrink: true }}
|
||||
/>
|
||||
</MDBox>
|
||||
<MDBox mb={2}>
|
||||
<MDInput
|
||||
type="password"
|
||||
label="Password"
|
||||
variant="standard"
|
||||
fullWidth
|
||||
placeholder="************"
|
||||
InputLabelProps={{ shrink: true }}
|
||||
/>
|
||||
</MDBox>
|
||||
<MDBox display="flex" alignItems="center" ml={-1}>
|
||||
<Switch checked={rememberMe} onChange={handleSetRememberMe} />
|
||||
<MDTypography
|
||||
variant="button"
|
||||
fontWeight="regular"
|
||||
color="text"
|
||||
onClick={handleSetRememberMe}
|
||||
sx={{ cursor: "pointer", userSelect: "none", ml: -1 }}
|
||||
>
|
||||
Remember me
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
<MDBox mt={4} mb={1}>
|
||||
<MDButton variant="gradient" color="info" fullWidth>
|
||||
sign in
|
||||
</MDButton>
|
||||
</MDBox>
|
||||
<MDBox mt={3} mb={1} textAlign="center">
|
||||
<MDTypography variant="button" color="text">
|
||||
Don't have an account?{" "}
|
||||
<MDTypography
|
||||
component={Link}
|
||||
to="/authentication/sign-up/cover"
|
||||
variant="button"
|
||||
color="info"
|
||||
fontWeight="medium"
|
||||
textGradient
|
||||
>
|
||||
Sign up
|
||||
</MDTypography>
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
</Card>
|
||||
</CoverLayout>
|
||||
);
|
||||
}
|
||||
|
||||
export default Cover;
|
||||
@ -1,91 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
import { useState } from "react";
|
||||
|
||||
// react-router-dom components
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
// @mui material components
|
||||
import Switch from "@mui/material/Switch";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDBox from "components/MDBox";
|
||||
import MDTypography from "components/MDTypography";
|
||||
import MDInput from "components/MDInput";
|
||||
import MDButton from "components/MDButton";
|
||||
|
||||
// Authentication layout components
|
||||
import IllustrationLayout from "layouts/authentication/components/IllustrationLayout";
|
||||
|
||||
// Image
|
||||
import bgImage from "assets/images/illustrations/illustration-reset.jpg";
|
||||
|
||||
function Illustration(): JSX.Element {
|
||||
const [rememberMe, setRememberMe] = useState<boolean>(false);
|
||||
|
||||
const handleSetRememberMe = () => setRememberMe(!rememberMe);
|
||||
|
||||
return (
|
||||
<IllustrationLayout
|
||||
title="Sign In"
|
||||
description="Enter your email and password to sign in"
|
||||
illustration={bgImage}
|
||||
>
|
||||
<MDBox component="form" role="form">
|
||||
<MDBox mb={2}>
|
||||
<MDInput type="email" label="Email" fullWidth />
|
||||
</MDBox>
|
||||
<MDBox mb={2}>
|
||||
<MDInput type="password" label="Password" fullWidth />
|
||||
</MDBox>
|
||||
<MDBox display="flex" alignItems="center" ml={-1}>
|
||||
<Switch checked={rememberMe} onChange={handleSetRememberMe} />
|
||||
<MDTypography
|
||||
variant="button"
|
||||
fontWeight="regular"
|
||||
color="text"
|
||||
onClick={handleSetRememberMe}
|
||||
sx={{ cursor: "pointer", userSelect: "none", ml: -1 }}
|
||||
>
|
||||
Remember me
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
<MDBox mt={4} mb={1}>
|
||||
<MDButton variant="gradient" color="info" size="large" fullWidth>
|
||||
sign in
|
||||
</MDButton>
|
||||
</MDBox>
|
||||
<MDBox mt={3} textAlign="center">
|
||||
<MDTypography variant="button" color="text">
|
||||
Don't have an account?{" "}
|
||||
<MDTypography
|
||||
component={Link}
|
||||
to="/authentication/sign-up/cover"
|
||||
variant="button"
|
||||
color="info"
|
||||
fontWeight="medium"
|
||||
textGradient
|
||||
>
|
||||
Sign up
|
||||
</MDTypography>
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
</IllustrationLayout>
|
||||
);
|
||||
}
|
||||
|
||||
export default Illustration;
|
||||
@ -1,116 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
// react-router-dom components
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
// @mui material components
|
||||
import Card from "@mui/material/Card";
|
||||
import Checkbox from "@mui/material/Checkbox";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDBox from "components/MDBox";
|
||||
import MDTypography from "components/MDTypography";
|
||||
import MDInput from "components/MDInput";
|
||||
import MDButton from "components/MDButton";
|
||||
|
||||
// Authentication layout components
|
||||
import CoverLayout from "layouts/authentication/components/CoverLayout";
|
||||
|
||||
// Images
|
||||
import bgImage from "assets/images/bg-sign-up-cover.jpeg";
|
||||
|
||||
function Cover(): JSX.Element {
|
||||
return (
|
||||
<CoverLayout image={bgImage}>
|
||||
<Card>
|
||||
<MDBox
|
||||
variant="gradient"
|
||||
bgColor="info"
|
||||
borderRadius="lg"
|
||||
coloredShadow="success"
|
||||
mx={2}
|
||||
mt={-3}
|
||||
p={3}
|
||||
mb={1}
|
||||
textAlign="center"
|
||||
>
|
||||
<MDTypography variant="h4" fontWeight="medium" color="white" mt={1}>
|
||||
Join us today
|
||||
</MDTypography>
|
||||
<MDTypography display="block" variant="button" color="white" my={1}>
|
||||
Enter your email and password to register
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
<MDBox pt={4} pb={3} px={3}>
|
||||
<MDBox component="form" role="form">
|
||||
<MDBox mb={2}>
|
||||
<MDInput type="text" label="Name" variant="standard" fullWidth />
|
||||
</MDBox>
|
||||
<MDBox mb={2}>
|
||||
<MDInput type="email" label="Email" variant="standard" fullWidth />
|
||||
</MDBox>
|
||||
<MDBox mb={2}>
|
||||
<MDInput type="password" label="Password" variant="standard" fullWidth />
|
||||
</MDBox>
|
||||
<MDBox display="flex" alignItems="center" ml={-1}>
|
||||
<Checkbox />
|
||||
<MDTypography
|
||||
variant="button"
|
||||
fontWeight="regular"
|
||||
color="text"
|
||||
sx={{ cursor: "pointer", userSelect: "none", ml: -1 }}
|
||||
>
|
||||
I agree the
|
||||
</MDTypography>
|
||||
<MDTypography
|
||||
component="a"
|
||||
href="#"
|
||||
variant="button"
|
||||
fontWeight="bold"
|
||||
color="info"
|
||||
textGradient
|
||||
>
|
||||
Terms and Conditions
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
<MDBox mt={4} mb={1}>
|
||||
<MDButton variant="gradient" color="info" fullWidth>
|
||||
sign in
|
||||
</MDButton>
|
||||
</MDBox>
|
||||
<MDBox mt={3} mb={1} textAlign="center">
|
||||
<MDTypography variant="button" color="text">
|
||||
Already have an account?{" "}
|
||||
<MDTypography
|
||||
component={Link}
|
||||
to="/authentication/sign-in/cover"
|
||||
variant="button"
|
||||
color="info"
|
||||
fontWeight="medium"
|
||||
textGradient
|
||||
>
|
||||
Sign In
|
||||
</MDTypography>
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
</Card>
|
||||
</CoverLayout>
|
||||
);
|
||||
}
|
||||
|
||||
export default Cover;
|
||||
@ -1,44 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
// Countries flags
|
||||
import US from "assets/images/icons/flags/US.png";
|
||||
import DE from "assets/images/icons/flags/DE.png";
|
||||
import GB from "assets/images/icons/flags/GB.png";
|
||||
import BR from "assets/images/icons/flags/BR.png";
|
||||
|
||||
const salesTableData = [
|
||||
{
|
||||
country: [US, "united state"],
|
||||
sales: 2500,
|
||||
value: "$230,900",
|
||||
bounce: "29.9%",
|
||||
},
|
||||
{
|
||||
country: [DE, "germany"],
|
||||
sales: "3.900",
|
||||
value: "$440,000",
|
||||
bounce: "40.22%",
|
||||
},
|
||||
{
|
||||
country: [GB, "great britain"],
|
||||
sales: "1.400",
|
||||
value: "$190,700",
|
||||
bounce: "23.44%",
|
||||
},
|
||||
{ country: [BR, "brasil"], sales: 562, value: "$143,960", bounce: "32.14%" },
|
||||
];
|
||||
|
||||
export default salesTableData;
|
||||
@ -1,139 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
// @react-jvectormap components
|
||||
import { VectorMap } from "@react-jvectormap/core";
|
||||
import { worldMerc } from "@react-jvectormap/world";
|
||||
|
||||
// @mui material components
|
||||
import Card from "@mui/material/Card";
|
||||
import Grid from "@mui/material/Grid";
|
||||
import Icon from "@mui/material/Icon";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDBox from "components/MDBox";
|
||||
import MDTypography from "components/MDTypography";
|
||||
|
||||
// Material Dashboard 2 PRO React TS examples components
|
||||
import SalesTable from "examples/Tables/SalesTable";
|
||||
|
||||
// Data
|
||||
import salesTableData from "layouts/dashboards/analytics/components/SalesByCountry/data/salesTableData";
|
||||
|
||||
function SalesByCountry(): JSX.Element {
|
||||
return (
|
||||
<Card sx={{ width: "100%" }}>
|
||||
<MDBox display="flex">
|
||||
<MDBox
|
||||
display="flex"
|
||||
justifyContent="center"
|
||||
alignItems="center"
|
||||
width="4rem"
|
||||
height="4rem"
|
||||
variant="gradient"
|
||||
bgColor="success"
|
||||
color="white"
|
||||
shadow="md"
|
||||
borderRadius="xl"
|
||||
ml={3}
|
||||
mt={-2}
|
||||
>
|
||||
<Icon fontSize="medium" color="inherit">
|
||||
language
|
||||
</Icon>
|
||||
</MDBox>
|
||||
<MDTypography variant="h6" sx={{ mt: 2, mb: 1, ml: 2 }}>
|
||||
Sales by Country
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
<MDBox p={2}>
|
||||
<Grid container>
|
||||
<Grid item xs={12} md={7} lg={6}>
|
||||
<SalesTable rows={salesTableData} shadow={false} />
|
||||
</Grid>
|
||||
<Grid item xs={12} md={5} lg={6} sx={{ mt: { xs: 5, lg: 0 } }}>
|
||||
<VectorMap
|
||||
map={worldMerc}
|
||||
zoomOnScroll={false}
|
||||
zoomButtons={false}
|
||||
markersSelectable
|
||||
backgroundColor="transparent"
|
||||
selectedMarkers={["1", "3"]}
|
||||
markers={[
|
||||
{
|
||||
name: "USA",
|
||||
latLng: [40.71296415909766, -74.00437720027804],
|
||||
},
|
||||
{
|
||||
name: "Germany",
|
||||
latLng: [51.17661451970939, 10.97947735117339],
|
||||
},
|
||||
{
|
||||
name: "Brazil",
|
||||
latLng: [-7.596735421549542, -54.781694323779185],
|
||||
},
|
||||
{
|
||||
name: "Russia",
|
||||
latLng: [62.318222797104276, 89.81564777631716],
|
||||
},
|
||||
{
|
||||
name: "China",
|
||||
latLng: [22.320178999475512, 114.17161225541399],
|
||||
},
|
||||
]}
|
||||
regionStyle={{
|
||||
initial: {
|
||||
fill: "#dee2e7",
|
||||
"fill-opacity": 1,
|
||||
stroke: "none",
|
||||
"stroke-width": 0,
|
||||
"stroke-opacity": 0,
|
||||
},
|
||||
}}
|
||||
markerStyle={{
|
||||
initial: {
|
||||
fill: "#e91e63",
|
||||
stroke: "#ffffff",
|
||||
"stroke-width": 5,
|
||||
"stroke-opacity": 0.5,
|
||||
r: 7,
|
||||
},
|
||||
hover: {
|
||||
fill: "E91E63",
|
||||
stroke: "#ffffff",
|
||||
"stroke-width": 5,
|
||||
"stroke-opacity": 0.5,
|
||||
},
|
||||
selected: {
|
||||
fill: "E91E63",
|
||||
stroke: "#ffffff",
|
||||
"stroke-width": 5,
|
||||
"stroke-opacity": 0.5,
|
||||
},
|
||||
}}
|
||||
style={{
|
||||
marginTop: "-1.5rem",
|
||||
}}
|
||||
onRegionTipShow={() => false}
|
||||
onMarkerTipShow={() => false}
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</MDBox>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
export default SalesByCountry;
|
||||
@ -1,21 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
const reportsBarChartData = {
|
||||
labels: ["M", "T", "W", "T", "F", "S", "S"],
|
||||
datasets: { label: "Sales", data: [50, 20, 10, 22, 50, 10, 40] },
|
||||
};
|
||||
|
||||
export default reportsBarChartData;
|
||||
@ -1,27 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
const reportsLineChartData = {
|
||||
sales: {
|
||||
labels: ["Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
|
||||
datasets: { label: "Mobile apps", data: [50, 40, 300, 320, 500, 350, 200, 230, 500] },
|
||||
},
|
||||
tasks: {
|
||||
labels: ["Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
|
||||
datasets: { label: "Desktop apps", data: [50, 40, 300, 220, 500, 250, 400, 230, 500] },
|
||||
},
|
||||
};
|
||||
|
||||
export default reportsLineChartData;
|
||||
@ -1,229 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
// @mui material components
|
||||
import Grid from "@mui/material/Grid";
|
||||
import Tooltip from "@mui/material/Tooltip";
|
||||
import Icon from "@mui/material/Icon";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDBox from "components/MDBox";
|
||||
import MDTypography from "components/MDTypography";
|
||||
|
||||
// Material Dashboard 2 PRO React TS examples components
|
||||
import DashboardLayout from "examples/LayoutContainers/DashboardLayout";
|
||||
import DashboardNavbar from "examples/Navbars/DashboardNavbar";
|
||||
import Footer from "examples/Footer";
|
||||
import ReportsBarChart from "examples/Charts/BarCharts/ReportsBarChart";
|
||||
import ReportsLineChart from "examples/Charts/LineCharts/ReportsLineChart";
|
||||
import ComplexStatisticsCard from "examples/Cards/StatisticsCards/ComplexStatisticsCard";
|
||||
import BookingCard from "examples/Cards/BookingCard";
|
||||
|
||||
// Anaytics dashboard components
|
||||
import SalesByCountry from "layouts/dashboards/analytics/components/SalesByCountry";
|
||||
|
||||
// Data
|
||||
import reportsBarChartData from "layouts/dashboards/analytics/data/reportsBarChartData";
|
||||
import reportsLineChartData from "layouts/dashboards/analytics/data/reportsLineChartData";
|
||||
|
||||
// Images
|
||||
import booking1 from "assets/images/products/product-1-min.jpg";
|
||||
import booking2 from "assets/images/products/product-2-min.jpg";
|
||||
import booking3 from "assets/images/products/product-3-min.jpg";
|
||||
import { useReducer } from "react";
|
||||
|
||||
function Analytics(): JSX.Element {
|
||||
const { sales, tasks } = reportsLineChartData;
|
||||
const [, forceUpdate] = useReducer((x) => x + 1, 0);
|
||||
|
||||
// Action buttons for the BookingCard
|
||||
const actionButtons = (
|
||||
<>
|
||||
<Tooltip title="Refresh" placement="bottom">
|
||||
<MDTypography
|
||||
variant="body1"
|
||||
color="primary"
|
||||
lineHeight={1}
|
||||
sx={{ cursor: "pointer", mx: 3 }}
|
||||
>
|
||||
<Icon color="inherit">refresh</Icon>
|
||||
</MDTypography>
|
||||
</Tooltip>
|
||||
<Tooltip title="Edit" placement="bottom">
|
||||
<MDTypography variant="body1" color="info" lineHeight={1} sx={{ cursor: "pointer", mx: 3 }}>
|
||||
<Icon color="inherit">edit</Icon>
|
||||
</MDTypography>
|
||||
</Tooltip>
|
||||
</>
|
||||
);
|
||||
|
||||
return (
|
||||
<DashboardLayout>
|
||||
<DashboardNavbar />
|
||||
<MDBox py={3}>
|
||||
<Grid container>
|
||||
<SalesByCountry />
|
||||
</Grid>
|
||||
<MDBox mt={6}>
|
||||
<Grid container spacing={3}>
|
||||
<Grid item xs={12} md={6} lg={4}>
|
||||
<MDBox mb={3}>
|
||||
<ReportsBarChart
|
||||
color="info"
|
||||
title="website views"
|
||||
description="Last Campaign Performance"
|
||||
date="campaign sent 2 days ago"
|
||||
chart={reportsBarChartData}
|
||||
/>
|
||||
</MDBox>
|
||||
</Grid>
|
||||
<Grid item xs={12} md={6} lg={4}>
|
||||
<MDBox mb={3}>
|
||||
<ReportsLineChart
|
||||
color="success"
|
||||
title="daily sales"
|
||||
description={
|
||||
<>
|
||||
(<strong>+15%</strong>) increase in today sales.
|
||||
</>
|
||||
}
|
||||
date="updated 4 min ago"
|
||||
chart={sales}
|
||||
/>
|
||||
</MDBox>
|
||||
</Grid>
|
||||
<Grid item xs={12} md={6} lg={4}>
|
||||
<MDBox mb={3}>
|
||||
<ReportsLineChart
|
||||
color="dark"
|
||||
title="completed tasks"
|
||||
description="Last Campaign Performance"
|
||||
date="just updated"
|
||||
chart={tasks}
|
||||
/>
|
||||
</MDBox>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</MDBox>
|
||||
<MDBox mt={1.5}>
|
||||
<Grid container spacing={3}>
|
||||
<Grid item xs={12} md={6} lg={3}>
|
||||
<MDBox mb={1.5}>
|
||||
<ComplexStatisticsCard
|
||||
color="dark"
|
||||
icon="weekend"
|
||||
title="Bookings"
|
||||
count={281}
|
||||
percentage={{
|
||||
color: "success",
|
||||
amount: "+55%",
|
||||
label: "than lask week",
|
||||
}}
|
||||
/>
|
||||
</MDBox>
|
||||
</Grid>
|
||||
<Grid item xs={12} md={6} lg={3}>
|
||||
<MDBox mb={1.5}>
|
||||
<ComplexStatisticsCard
|
||||
icon="leaderboard"
|
||||
title="Today's Users"
|
||||
count="2,300"
|
||||
percentage={{
|
||||
color: "success",
|
||||
amount: "+3%",
|
||||
label: "than last month",
|
||||
}}
|
||||
/>
|
||||
</MDBox>
|
||||
</Grid>
|
||||
<Grid item xs={12} md={6} lg={3}>
|
||||
<MDBox mb={1.5}>
|
||||
<ComplexStatisticsCard
|
||||
color="success"
|
||||
icon="store"
|
||||
title="Revenue"
|
||||
count="34k"
|
||||
percentage={{
|
||||
color: "success",
|
||||
amount: "+1%",
|
||||
label: "than yesterday",
|
||||
}}
|
||||
/>
|
||||
</MDBox>
|
||||
</Grid>
|
||||
<Grid item xs={12} md={6} lg={3}>
|
||||
<MDBox mb={1.5}>
|
||||
<ComplexStatisticsCard
|
||||
color="primary"
|
||||
icon="person_add"
|
||||
title="Followers"
|
||||
count="+91"
|
||||
percentage={{
|
||||
color: "success",
|
||||
amount: "",
|
||||
label: "Just updated",
|
||||
}}
|
||||
/>
|
||||
</MDBox>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</MDBox>
|
||||
<MDBox mt={2}>
|
||||
<Grid container spacing={3}>
|
||||
<Grid item xs={12} md={6} lg={4}>
|
||||
<MDBox mt={3}>
|
||||
<BookingCard
|
||||
image={booking1}
|
||||
title="Cozy 5 Stars Apartment"
|
||||
description='The place is close to Barceloneta Beach and bus stop just 2 min by walk and near to "Naviglio" where you can enjoy the main night life in Barcelona.'
|
||||
price="$899/night"
|
||||
location="Barcelona, Spain"
|
||||
action={actionButtons}
|
||||
/>
|
||||
</MDBox>
|
||||
</Grid>
|
||||
<Grid item xs={12} md={6} lg={4}>
|
||||
<MDBox mt={3}>
|
||||
<BookingCard
|
||||
image={booking2}
|
||||
title="Office Studio"
|
||||
description='The place is close to Metro Station and bus stop just 2 min by walk and near to "Naviglio" where you can enjoy the night life in London, UK.'
|
||||
price="$1.119/night"
|
||||
location="London, UK"
|
||||
action={actionButtons}
|
||||
/>
|
||||
</MDBox>
|
||||
</Grid>
|
||||
<Grid item xs={12} md={6} lg={4}>
|
||||
<MDBox mt={3}>
|
||||
<BookingCard
|
||||
image={booking3}
|
||||
title="Beautiful Castle"
|
||||
description='The place is close to Metro Station and bus stop just 2 min by walk and near to "Naviglio" where you can enjoy the main night life in Milan.'
|
||||
price="$459/night"
|
||||
location="Milan, Italy"
|
||||
action={actionButtons}
|
||||
/>
|
||||
</MDBox>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
<Footer />
|
||||
</DashboardLayout>
|
||||
);
|
||||
}
|
||||
|
||||
export default Analytics;
|
||||
@ -1,25 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
const channelChartData = {
|
||||
labels: ["Facebook", "Direct", "Organic", "Referral"],
|
||||
datasets: {
|
||||
label: "Projects",
|
||||
backgroundColors: ["info", "primary", "dark", "secondary", "primary"],
|
||||
data: [15, 20, 12, 60],
|
||||
},
|
||||
};
|
||||
|
||||
export default channelChartData;
|
||||
@ -1,94 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
// @mui material components
|
||||
import Card from "@mui/material/Card";
|
||||
import Tooltip from "@mui/material/Tooltip";
|
||||
import Icon from "@mui/material/Icon";
|
||||
import Grid from "@mui/material/Grid";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDBox from "components/MDBox";
|
||||
import MDTypography from "components/MDTypography";
|
||||
import MDButton from "components/MDButton";
|
||||
import MDBadgeDot from "components/MDBadgeDot";
|
||||
import PieChart from "examples/Charts/PieChart";
|
||||
|
||||
// Data
|
||||
import channelChartData from "layouts/dashboards/sales/components/ChannelsChart/data";
|
||||
|
||||
// Material Dashboard 2 PRO React TS contexts
|
||||
import { useMaterialUIController } from "context";
|
||||
|
||||
function ChannelsChart(): JSX.Element {
|
||||
const [controller] = useMaterialUIController();
|
||||
const { darkMode } = controller;
|
||||
|
||||
return (
|
||||
<Card sx={{ height: "100%" }}>
|
||||
<MDBox display="flex" justifyContent="space-between" alignItems="center" pt={2} px={2}>
|
||||
<MDTypography variant="h6">Channels</MDTypography>
|
||||
<Tooltip title="See traffic channels" placement="bottom" arrow>
|
||||
<MDButton variant="outlined" color="secondary" size="small" circular iconOnly>
|
||||
<Icon>priority_high</Icon>
|
||||
</MDButton>
|
||||
</Tooltip>
|
||||
</MDBox>
|
||||
<MDBox mt={3}>
|
||||
<Grid container alignItems="center">
|
||||
<Grid item xs={7}>
|
||||
<PieChart chart={channelChartData} height="12.5rem" />
|
||||
</Grid>
|
||||
<Grid item xs={5}>
|
||||
<MDBox pr={1}>
|
||||
<MDBox mb={1}>
|
||||
<MDBadgeDot color="info" size="sm" badgeContent="Facebook" />
|
||||
</MDBox>
|
||||
<MDBox mb={1}>
|
||||
<MDBadgeDot color="primary" size="sm" badgeContent="Direct" />
|
||||
</MDBox>
|
||||
<MDBox mb={1}>
|
||||
<MDBadgeDot color="dark" size="sm" badgeContent="Organic" />
|
||||
</MDBox>
|
||||
<MDBox mb={1}>
|
||||
<MDBadgeDot color="secondary" size="sm" badgeContent="Referral" />
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</MDBox>
|
||||
<MDBox
|
||||
pt={4}
|
||||
pb={2}
|
||||
px={2}
|
||||
display="flex"
|
||||
flexDirection={{ xs: "column", sm: "row" }}
|
||||
mt="auto"
|
||||
>
|
||||
<MDBox width={{ xs: "100%", sm: "60%" }} lineHeight={1}>
|
||||
<MDTypography variant="button" color="text" fontWeight="light">
|
||||
More than <strong>1,200,000</strong> sales are made using referral marketing, and{" "}
|
||||
<strong>700,000</strong> are from social media.
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
<MDBox width={{ xs: "100%", sm: "40%" }} textAlign="right" mt={{ xs: 2, sm: "auto" }}>
|
||||
<MDButton color={darkMode ? "white" : "light"}>read more</MDButton>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
export default ChannelsChart;
|
||||
@ -1,29 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
import { ReactNode } from "react";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDTypography from "components/MDTypography";
|
||||
|
||||
function DefaultCell({ children }: { children: ReactNode }): JSX.Element {
|
||||
return (
|
||||
<MDTypography variant="button" fontWeight="regular" color="text">
|
||||
{children}
|
||||
</MDTypography>
|
||||
);
|
||||
}
|
||||
|
||||
export default DefaultCell;
|
||||
@ -1,49 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDBox from "components/MDBox";
|
||||
import MDTypography from "components/MDTypography";
|
||||
import MDAvatar from "components/MDAvatar";
|
||||
|
||||
// Declaring props types for ProductCell
|
||||
interface Props {
|
||||
image: string;
|
||||
name: string;
|
||||
orders: string | number;
|
||||
}
|
||||
|
||||
function ProductCell({ image, name, orders }: Props): JSX.Element {
|
||||
return (
|
||||
<MDBox display="flex" alignItems="center" pr={2}>
|
||||
<MDBox mr={2}>
|
||||
<MDAvatar src={image} alt={name} />
|
||||
</MDBox>
|
||||
<MDBox display="flex" flexDirection="column">
|
||||
<MDTypography variant="button" fontWeight="medium">
|
||||
{name}
|
||||
</MDTypography>
|
||||
<MDTypography variant="button" fontWeight="regular" color="secondary">
|
||||
<MDTypography component="span" variant="button" fontWeight="regular" color="success">
|
||||
{orders}
|
||||
</MDTypography>{" "}
|
||||
orders
|
||||
</MDTypography>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
);
|
||||
}
|
||||
|
||||
export default ProductCell;
|
||||
@ -1,47 +0,0 @@
|
||||
/**
|
||||
=========================================================
|
||||
* Material Dashboard 2 PRO React TS - v1.0.0
|
||||
=========================================================
|
||||
|
||||
* Product Page: https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts
|
||||
* Copyright 2022 Creative Tim (https://www.creative-tim.com)
|
||||
|
||||
Coded by www.creative-tim.com
|
||||
|
||||
=========================================================
|
||||
|
||||
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
*/
|
||||
|
||||
// @mui material components
|
||||
import Icon from "@mui/material/Icon";
|
||||
|
||||
// Material Dashboard 2 PRO React TS components
|
||||
import MDBox from "components/MDBox";
|
||||
import MDTypography from "components/MDTypography";
|
||||
|
||||
// Declaring props types for RefundsCell
|
||||
interface Props {
|
||||
value: string | number;
|
||||
icon: {
|
||||
color: "info" | "success" | "warning" | "error";
|
||||
name: string;
|
||||
};
|
||||
}
|
||||
|
||||
function RefundsCell({ value, icon }: Props): JSX.Element {
|
||||
return (
|
||||
<MDBox display="flex" justifyContent="center" alignItems="center" px={2}>
|
||||
<MDTypography variant="button" fontWeight="regular" color="text">
|
||||
{value}
|
||||
</MDTypography>
|
||||
<MDBox color={icon.color} lineHeight={0}>
|
||||
<Icon sx={{ fontWeight: "bold" }} fontSize="small">
|
||||
{icon.name}
|
||||
</Icon>
|
||||
</MDBox>
|
||||
</MDBox>
|
||||
);
|
||||
}
|
||||
|
||||
export default RefundsCell;
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user