mirror of
https://github.com/Kingsrook/qqq-frontend-material-dashboard.git
synced 2025-07-18 05:10:45 +00:00
10406 lines
443 KiB
JavaScript
10406 lines
443 KiB
JavaScript
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
import ReactDOM from 'react-dom';
|
|
import { useLocation, NavLink, Link as Link$1, Routes, Route, Navigate, BrowserRouter } from 'react-router-dom';
|
|
import { forwardRef, createContext, useReducer, useMemo, useContext, useState, useEffect, Fragment as Fragment$1 } from 'react';
|
|
import { styled, createTheme as createTheme$1, ThemeProvider } from '@mui/material/styles';
|
|
import CssBaseline from '@mui/material/CssBaseline';
|
|
import Icon from '@mui/material/Icon';
|
|
import Box from '@mui/material/Box';
|
|
import List from '@mui/material/List';
|
|
import Divider from '@mui/material/Divider';
|
|
import Link from '@mui/material/Link';
|
|
import Typography from '@mui/material/Typography';
|
|
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 Drawer from '@mui/material/Drawer';
|
|
import GitHubButton from 'react-github-btn';
|
|
import Switch from '@mui/material/Switch';
|
|
import IconButton from '@mui/material/IconButton';
|
|
import TwitterIcon from '@mui/icons-material/Twitter';
|
|
import FacebookIcon from '@mui/icons-material/Facebook';
|
|
import Button from '@mui/material/Button';
|
|
import { createTheme, Breadcrumbs as Breadcrumbs$1 } from '@mui/material';
|
|
import chroma from 'chroma-js';
|
|
import Fade from '@mui/material/Fade';
|
|
import rtlPlugin from 'stylis-plugin-rtl';
|
|
import { CacheProvider } from '@emotion/react';
|
|
import createCache from '@emotion/cache';
|
|
import Grid from '@mui/material/Grid';
|
|
import Tooltip from '@mui/material/Tooltip';
|
|
import AppBar from '@mui/material/AppBar';
|
|
import Toolbar from '@mui/material/Toolbar';
|
|
import Menu from '@mui/material/Menu';
|
|
import TextField from '@mui/material/TextField';
|
|
import Badge from '@mui/material/Badge';
|
|
import MenuItem from '@mui/material/MenuItem';
|
|
import { Bar, Line, Pie } from 'react-chartjs-2';
|
|
import Card from '@mui/material/Card';
|
|
import { VectorMap } from '@react-jvectormap/core';
|
|
import { worldMerc } from '@react-jvectormap/world';
|
|
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';
|
|
import TableCell$1 from '@mui/material/TableCell';
|
|
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';
|
|
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 { useTable, useGlobalFilter, useSortBy, usePagination, useAsyncDebounce } from 'react-table';
|
|
import Autocomplete from '@mui/material/Autocomplete';
|
|
import AU from 'assets/images/icons/flags/AU.png';
|
|
import Avatar from '@mui/material/Avatar';
|
|
import nikeV22 from 'assets/images/ecommerce/blue-shoe.jpeg';
|
|
import businessKit from 'assets/images/ecommerce/black-mug.jpeg';
|
|
import blackChair from 'assets/images/ecommerce/black-chair.jpeg';
|
|
import wirelessCharger from 'assets/images/ecommerce/bang-sound.jpeg';
|
|
import tripKit from 'assets/images/ecommerce/photo-tools.jpeg';
|
|
import InstagramIcon from '@mui/icons-material/Instagram';
|
|
import CardMedia from '@mui/material/CardMedia';
|
|
import Tabs from '@mui/material/Tabs';
|
|
import Tab from '@mui/material/Tab';
|
|
import burceMars from 'assets/images/bruce-mars.jpg';
|
|
import backgroundImage from 'assets/images/bg-profile.jpeg';
|
|
import kal from 'assets/images/kal-visuals-square.jpg';
|
|
import marie from 'assets/images/marie.jpg';
|
|
import ivana from 'assets/images/ivana-square.jpg';
|
|
import team3 from 'assets/images/team-3.jpg';
|
|
import team4 from 'assets/images/team-4.jpg';
|
|
import homeDecor1 from 'assets/images/home-decor-1.jpg';
|
|
import homeDecor2 from 'assets/images/home-decor-2.jpg';
|
|
import homeDecor3 from 'assets/images/home-decor-3.jpg';
|
|
import homeDecor4 from 'assets/images/home-decor-4.jpeg';
|
|
import team1 from 'assets/images/team-1.jpg';
|
|
import team2 from 'assets/images/team-2.jpg';
|
|
import logoSlack from 'assets/images/small-logos/logo-slack.svg';
|
|
import logoSpotify from 'assets/images/small-logos/logo-spotify.svg';
|
|
import logoAtlassian from 'assets/images/small-logos/logo-atlassian.svg';
|
|
import logoAsana from 'assets/images/small-logos/logo-asana.svg';
|
|
import GitHubIcon from '@mui/icons-material/GitHub';
|
|
import GoogleIcon from '@mui/icons-material/Google';
|
|
import Popper from '@mui/material/Popper';
|
|
import Grow from '@mui/material/Grow';
|
|
import Container from '@mui/material/Container';
|
|
import bgImage from 'assets/images/bg-sign-in-basic.jpeg';
|
|
import { QController } from 'qqq-frontend-core/lib/controllers/QController';
|
|
import brandWhite from 'assets/images/logo-ct.png';
|
|
import brandDark from 'assets/images/logo-ct-dark.png';
|
|
|
|
/**
|
|
=========================================================
|
|
* 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.
|
|
*/
|
|
var MDBoxRoot = styled(Box)(({ theme, ownerState }) => {
|
|
const { palette, functions, borders, boxShadows } = theme;
|
|
const { variant, bgColor, color, opacity, borderRadius, shadow, coloredShadow } = ownerState;
|
|
const { gradients, grey, white } = palette;
|
|
const { linearGradient } = functions;
|
|
const { borderRadius: radius } = borders;
|
|
const { colored } = boxShadows;
|
|
const greyColors = {
|
|
"grey-100": grey[100],
|
|
"grey-200": grey[200],
|
|
"grey-300": grey[300],
|
|
"grey-400": grey[400],
|
|
"grey-500": grey[500],
|
|
"grey-600": grey[600],
|
|
"grey-700": grey[700],
|
|
"grey-800": grey[800],
|
|
"grey-900": grey[900],
|
|
};
|
|
const validGradients = [
|
|
"primary",
|
|
"secondary",
|
|
"info",
|
|
"success",
|
|
"warning",
|
|
"error",
|
|
"dark",
|
|
"light",
|
|
];
|
|
const validColors = [
|
|
"transparent",
|
|
"white",
|
|
"black",
|
|
"primary",
|
|
"secondary",
|
|
"info",
|
|
"success",
|
|
"warning",
|
|
"error",
|
|
"light",
|
|
"dark",
|
|
"text",
|
|
"grey-100",
|
|
"grey-200",
|
|
"grey-300",
|
|
"grey-400",
|
|
"grey-500",
|
|
"grey-600",
|
|
"grey-700",
|
|
"grey-800",
|
|
"grey-900",
|
|
];
|
|
const validBorderRadius = ["xs", "sm", "md", "lg", "xl", "xxl", "section"];
|
|
const validBoxShadows = ["xs", "sm", "md", "lg", "xl", "xxl", "inset"];
|
|
// background value
|
|
let backgroundValue = bgColor;
|
|
if (variant === "gradient") {
|
|
backgroundValue = validGradients.find((el) => el === bgColor)
|
|
? linearGradient(gradients[bgColor].main, gradients[bgColor].state)
|
|
: white.main;
|
|
}
|
|
else if (validColors.find((el) => el === bgColor)) {
|
|
backgroundValue = palette[bgColor] ? palette[bgColor].main : greyColors[bgColor];
|
|
}
|
|
else {
|
|
backgroundValue = bgColor;
|
|
}
|
|
// color value
|
|
let colorValue = color;
|
|
if (validColors.find((el) => el === color)) {
|
|
colorValue = palette[color] ? palette[color].main : greyColors[color];
|
|
}
|
|
// borderRadius value
|
|
let borderRadiusValue = borderRadius;
|
|
if (validBorderRadius.find((el) => el === borderRadius)) {
|
|
borderRadiusValue = radius[borderRadius];
|
|
}
|
|
// boxShadow value
|
|
let boxShadowValue = "none";
|
|
if (validBoxShadows.find((el) => el === shadow)) {
|
|
boxShadowValue = boxShadows[shadow];
|
|
}
|
|
else if (coloredShadow) {
|
|
boxShadowValue = colored[coloredShadow] ? colored[coloredShadow] : "none";
|
|
}
|
|
return {
|
|
opacity,
|
|
background: backgroundValue,
|
|
color: colorValue,
|
|
borderRadius: borderRadiusValue,
|
|
boxShadow: boxShadowValue,
|
|
};
|
|
});
|
|
|
|
const MDBox = forwardRef(({ variant, bgColor, color, opacity, borderRadius, shadow, coloredShadow, ...rest }, ref) => (jsx(MDBoxRoot, { ...rest, ref: ref, ownerState: { variant, bgColor, color, opacity, borderRadius, shadow, coloredShadow } })));
|
|
// Declaring default props for MDBox
|
|
MDBox.defaultProps = {
|
|
variant: "contained",
|
|
bgColor: "transparent",
|
|
color: "dark",
|
|
opacity: 1,
|
|
borderRadius: "none",
|
|
shadow: "none",
|
|
coloredShadow: "none",
|
|
};
|
|
|
|
/**
|
|
=========================================================
|
|
* 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.
|
|
*/
|
|
var MDTypographyRoot = styled(Typography)(({ theme, ownerState }) => {
|
|
const { palette, typography, functions } = theme;
|
|
const { color, textTransform, verticalAlign, fontWeight, opacity, textGradient, darkMode } = ownerState;
|
|
const { gradients, transparent, white } = palette;
|
|
const { fontWeightLight, fontWeightRegular, fontWeightMedium, fontWeightBold } = typography;
|
|
const { linearGradient } = functions;
|
|
// fontWeight styles
|
|
const fontWeights = {
|
|
light: fontWeightLight,
|
|
regular: fontWeightRegular,
|
|
medium: fontWeightMedium,
|
|
bold: fontWeightBold,
|
|
};
|
|
// styles for the typography with textGradient={true}
|
|
const gradientStyles = () => ({
|
|
backgroundImage: color !== "inherit" && color !== "text" && color !== "white" && gradients[color]
|
|
? linearGradient(gradients[color].main, gradients[color].state)
|
|
: linearGradient(gradients.dark.main, gradients.dark.state),
|
|
display: "inline-block",
|
|
WebkitBackgroundClip: "text",
|
|
WebkitTextFillColor: transparent.main,
|
|
position: "relative",
|
|
zIndex: 1,
|
|
});
|
|
// color value
|
|
let colorValue = color === "inherit" || !palette[color] ? "inherit" : palette[color].main;
|
|
if (darkMode && (color === "inherit" || !palette[color])) {
|
|
colorValue = "inherit";
|
|
}
|
|
else if (darkMode && color === "dark")
|
|
colorValue = white.main;
|
|
return {
|
|
opacity,
|
|
textTransform,
|
|
verticalAlign,
|
|
textDecoration: "none",
|
|
color: colorValue,
|
|
fontWeight: fontWeights[fontWeight] && fontWeights[fontWeight],
|
|
...(textGradient && gradientStyles()),
|
|
};
|
|
});
|
|
|
|
// The Material Dashboard 2 PRO React TSUI Dashboard PRO Material main context
|
|
const MaterialUI = createContext(null);
|
|
// Setting custom name for the context which is visible on react dev tools
|
|
MaterialUI.displayName = "MaterialUIContext";
|
|
// Material Dashboard 2 PRO React reducer
|
|
function reducer(state, action) {
|
|
switch (action.type) {
|
|
case "MINI_SIDENAV": {
|
|
return { ...state, miniSidenav: action.value };
|
|
}
|
|
case "TRANSPARENT_SIDENAV": {
|
|
return { ...state, transparentSidenav: action.value };
|
|
}
|
|
case "WHITE_SIDENAV": {
|
|
return { ...state, whiteSidenav: action.value };
|
|
}
|
|
case "SIDENAV_COLOR": {
|
|
return { ...state, sidenavColor: action.value };
|
|
}
|
|
case "TRANSPARENT_NAVBAR": {
|
|
return { ...state, transparentNavbar: action.value };
|
|
}
|
|
case "FIXED_NAVBAR": {
|
|
return { ...state, fixedNavbar: action.value };
|
|
}
|
|
case "OPEN_CONFIGURATOR": {
|
|
return { ...state, openConfigurator: action.value };
|
|
}
|
|
case "DIRECTION": {
|
|
return { ...state, direction: action.value };
|
|
}
|
|
case "LAYOUT": {
|
|
return { ...state, layout: action.value };
|
|
}
|
|
case "DARKMODE": {
|
|
return { ...state, darkMode: action.value };
|
|
}
|
|
default: {
|
|
throw new Error(`Unhandled action type: ${action.type}`);
|
|
}
|
|
}
|
|
}
|
|
// Material Dashboard 2 PRO React context provider
|
|
function MaterialUIControllerProvider({ children }) {
|
|
const initialState = {
|
|
miniSidenav: false,
|
|
transparentSidenav: false,
|
|
whiteSidenav: false,
|
|
sidenavColor: "info",
|
|
transparentNavbar: true,
|
|
fixedNavbar: true,
|
|
openConfigurator: false,
|
|
direction: "ltr",
|
|
layout: "dashboard",
|
|
darkMode: false,
|
|
};
|
|
const [controller, dispatch] = useReducer(reducer, initialState);
|
|
const value = useMemo(() => [controller, dispatch], [controller, dispatch]);
|
|
return jsx(MaterialUI.Provider, { value: value, children: children });
|
|
}
|
|
// Material Dashboard 2 PRO React custom hook for using context
|
|
function useMaterialUIController() {
|
|
const context = useContext(MaterialUI);
|
|
if (!context) {
|
|
throw new Error("useMaterialUIController should be used inside the MaterialUIControllerProvider.");
|
|
}
|
|
return context;
|
|
}
|
|
// Context module functions
|
|
const setMiniSidenav = (dispatch, value) => dispatch({ type: "MINI_SIDENAV", value });
|
|
const setTransparentSidenav = (dispatch, value) => dispatch({ type: "TRANSPARENT_SIDENAV", value });
|
|
const setWhiteSidenav = (dispatch, value) => dispatch({ type: "WHITE_SIDENAV", value });
|
|
const setSidenavColor = (dispatch, value) => dispatch({ type: "SIDENAV_COLOR", value });
|
|
const setTransparentNavbar = (dispatch, value) => dispatch({ type: "TRANSPARENT_NAVBAR", value });
|
|
const setFixedNavbar = (dispatch, value) => dispatch({ type: "FIXED_NAVBAR", value });
|
|
const setOpenConfigurator = (dispatch, value) => dispatch({ type: "OPEN_CONFIGURATOR", value });
|
|
const setLayout = (dispatch, value) => dispatch({ type: "LAYOUT", value });
|
|
const setDarkMode = (dispatch, value) => dispatch({ type: "DARKMODE", value });
|
|
|
|
const MDTypography = forwardRef(({ color, fontWeight, textTransform, verticalAlign, textGradient, opacity, children, ...rest }, ref) => {
|
|
const [controller] = useMaterialUIController();
|
|
const { darkMode } = controller;
|
|
return (jsx(MDTypographyRoot, { ...rest, ref: ref, ownerState: {
|
|
color,
|
|
textTransform,
|
|
verticalAlign,
|
|
fontWeight,
|
|
opacity,
|
|
textGradient,
|
|
darkMode,
|
|
}, children: children }));
|
|
});
|
|
// Declaring default props for MDTypography
|
|
MDTypography.defaultProps = {
|
|
color: "dark",
|
|
fontWeight: undefined,
|
|
textTransform: "none",
|
|
verticalAlign: "unset",
|
|
textGradient: false,
|
|
opacity: 1,
|
|
};
|
|
|
|
/**
|
|
=========================================================
|
|
* 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 collapseItem(theme, ownerState) {
|
|
const { palette, transitions, breakpoints, boxShadows, borders, functions } = theme;
|
|
const { active, transparentSidenav, whiteSidenav, darkMode } = ownerState;
|
|
const { white, transparent, dark, grey } = palette;
|
|
const { md } = boxShadows;
|
|
const { borderRadius } = borders;
|
|
const { pxToRem, rgba } = functions;
|
|
return {
|
|
background: () => {
|
|
let backgroundValue;
|
|
if (transparentSidenav && darkMode) {
|
|
backgroundValue = active ? rgba(white.main, 0.2) : transparent.main;
|
|
}
|
|
else if (transparentSidenav && !darkMode) {
|
|
backgroundValue = active ? grey[300] : transparent.main;
|
|
}
|
|
else if (whiteSidenav) {
|
|
backgroundValue = active ? grey[200] : transparent.main;
|
|
}
|
|
else {
|
|
backgroundValue = active ? rgba(white.main, 0.2) : transparent.main;
|
|
}
|
|
return backgroundValue;
|
|
},
|
|
color: (transparentSidenav && !darkMode) || whiteSidenav ? dark.main : white.main,
|
|
display: "flex",
|
|
alignItems: "center",
|
|
width: "100%",
|
|
padding: `${pxToRem(8)} ${pxToRem(16)}`,
|
|
margin: `${pxToRem(1.5)} ${pxToRem(16)}`,
|
|
borderRadius: borderRadius.md,
|
|
cursor: "pointer",
|
|
userSelect: "none",
|
|
whiteSpace: "nowrap",
|
|
boxShadow: active && !whiteSidenav && !darkMode && !transparentSidenav ? md : "none",
|
|
[breakpoints.up("xl")]: {
|
|
transition: transitions.create(["box-shadow", "background-color"], {
|
|
easing: transitions.easing.easeInOut,
|
|
duration: transitions.duration.shorter,
|
|
}),
|
|
},
|
|
"&:hover, &:focus": {
|
|
backgroundColor: transparentSidenav && !darkMode
|
|
? grey[300]
|
|
: rgba(whiteSidenav ? grey[400] : white.main, 0.2),
|
|
},
|
|
};
|
|
}
|
|
function collapseIconBox(theme, ownerState) {
|
|
const { palette, transitions, borders, functions } = theme;
|
|
const { transparentSidenav, whiteSidenav, darkMode } = ownerState;
|
|
const { white, dark } = palette;
|
|
const { borderRadius } = borders;
|
|
const { pxToRem } = functions;
|
|
return {
|
|
minWidth: pxToRem(32),
|
|
minHeight: pxToRem(32),
|
|
color: (transparentSidenav && !darkMode) || whiteSidenav ? dark.main : white.main,
|
|
borderRadius: borderRadius.md,
|
|
display: "grid",
|
|
placeItems: "center",
|
|
transition: transitions.create("margin", {
|
|
easing: transitions.easing.easeInOut,
|
|
duration: transitions.duration.standard,
|
|
}),
|
|
"& svg, svg g": {
|
|
color: transparentSidenav || whiteSidenav ? dark.main : white.main,
|
|
},
|
|
};
|
|
}
|
|
const collapseIcon = ({ palette: { white, gradients } }, { active }) => ({
|
|
color: active ? white.main : gradients.dark.state,
|
|
});
|
|
function collapseText(theme, ownerState) {
|
|
const { typography, transitions, breakpoints, functions } = theme;
|
|
const { miniSidenav, transparentSidenav, active } = ownerState;
|
|
const { size, fontWeightRegular, fontWeightLight } = typography;
|
|
const { pxToRem } = functions;
|
|
return {
|
|
marginLeft: pxToRem(10),
|
|
[breakpoints.up("xl")]: {
|
|
opacity: miniSidenav || (miniSidenav && transparentSidenav) ? 0 : 1,
|
|
maxWidth: miniSidenav || (miniSidenav && transparentSidenav) ? 0 : "100%",
|
|
marginLeft: miniSidenav || (miniSidenav && transparentSidenav) ? 0 : pxToRem(10),
|
|
transition: transitions.create(["opacity", "margin"], {
|
|
easing: transitions.easing.easeInOut,
|
|
duration: transitions.duration.standard,
|
|
}),
|
|
},
|
|
"& span": {
|
|
fontWeight: active ? fontWeightRegular : fontWeightLight,
|
|
fontSize: size.sm,
|
|
lineHeight: 0,
|
|
},
|
|
};
|
|
}
|
|
function collapseArrow(theme, ownerState) {
|
|
const { palette, typography, transitions, breakpoints, functions } = theme;
|
|
const { noCollapse, transparentSidenav, whiteSidenav, miniSidenav, open, active, darkMode } = ownerState;
|
|
const { white, dark } = palette;
|
|
const { size } = typography;
|
|
const { pxToRem, rgba } = functions;
|
|
return {
|
|
fontSize: `${size.lg} !important`,
|
|
fontWeight: 700,
|
|
marginBottom: pxToRem(-1),
|
|
transform: open ? "rotate(0)" : "rotate(-180deg)",
|
|
color: () => {
|
|
let colorValue;
|
|
if (transparentSidenav && darkMode) {
|
|
colorValue = open || active ? white.main : rgba(white.main, 0.25);
|
|
}
|
|
else if (transparentSidenav || whiteSidenav) {
|
|
colorValue = open || active ? dark.main : rgba(dark.main, 0.25);
|
|
}
|
|
else {
|
|
colorValue = open || active ? white.main : rgba(white.main, 0.5);
|
|
}
|
|
return colorValue;
|
|
},
|
|
transition: transitions.create(["color", "transform", "opacity"], {
|
|
easing: transitions.easing.easeInOut,
|
|
duration: transitions.duration.shorter,
|
|
}),
|
|
[breakpoints.up("xl")]: {
|
|
display: noCollapse || (transparentSidenav && miniSidenav) || miniSidenav
|
|
? "none !important"
|
|
: "block !important",
|
|
},
|
|
};
|
|
}
|
|
|
|
function SidenavCollapse({ icon, name, children, active, noCollapse, open, ...rest }) {
|
|
const [controller] = useMaterialUIController();
|
|
const { miniSidenav, transparentSidenav, whiteSidenav, darkMode } = controller;
|
|
return (jsxs(Fragment, { children: [jsx(ListItem, { component: "li", children: jsxs(MDBox, { ...rest, sx: (theme) => collapseItem(theme, { active, transparentSidenav, whiteSidenav, darkMode }), children: [jsx(ListItemIcon, { sx: (theme) => collapseIconBox(theme, { transparentSidenav, whiteSidenav, darkMode }), children: typeof icon === "string" ? (jsx(Icon, { sx: (theme) => collapseIcon(theme, { active }), children: icon })) : (icon) }), jsx(ListItemText, { primary: name, sx: (theme) => collapseText(theme, {
|
|
miniSidenav,
|
|
transparentSidenav,
|
|
whiteSidenav,
|
|
active,
|
|
}) }), jsx(Icon, { sx: (theme) => collapseArrow(theme, {
|
|
noCollapse,
|
|
transparentSidenav,
|
|
whiteSidenav,
|
|
miniSidenav,
|
|
open,
|
|
active,
|
|
darkMode,
|
|
}), children: "expand_less" })] }) }), children && (jsx(Collapse, { in: Boolean(open), unmountOnExit: true, children: children }))] }));
|
|
}
|
|
// Declaring default props for SidenavCollapse
|
|
SidenavCollapse.defaultProps = {
|
|
active: false,
|
|
noCollapse: false,
|
|
children: false,
|
|
open: false,
|
|
};
|
|
|
|
function SidenavList({ children }) {
|
|
return (jsx(List, { sx: {
|
|
px: 2,
|
|
my: 0.3,
|
|
}, children: children }));
|
|
}
|
|
|
|
/* eslint-disable prefer-destructuring */
|
|
function item(theme, ownerState) {
|
|
const { palette, borders, functions, transitions } = theme;
|
|
const { active, color, transparentSidenav, whiteSidenav, darkMode } = ownerState;
|
|
const { transparent, white, grey } = palette;
|
|
const { borderRadius } = borders;
|
|
const { rgba } = functions;
|
|
return {
|
|
pl: 3,
|
|
mt: 0.375,
|
|
mb: 0.3,
|
|
width: "100%",
|
|
borderRadius: borderRadius.md,
|
|
cursor: "pointer",
|
|
backgroundColor: () => {
|
|
let backgroundValue = transparent.main;
|
|
if ((active === "isParent" && !transparentSidenav && !whiteSidenav) ||
|
|
(active === "isParent" && transparentSidenav && darkMode)) {
|
|
backgroundValue = rgba(white.main, 0.2);
|
|
}
|
|
else if (active === "isParent" && transparentSidenav) {
|
|
backgroundValue = grey[300];
|
|
}
|
|
else if (active === "isParent" && whiteSidenav) {
|
|
backgroundValue = grey[200];
|
|
}
|
|
else if (active) {
|
|
backgroundValue = palette[color].main;
|
|
}
|
|
return backgroundValue;
|
|
},
|
|
transition: transitions.create("background-color", {
|
|
easing: transitions.easing.easeInOut,
|
|
duration: transitions.duration.shorter,
|
|
}),
|
|
"&:hover, &:focus": {
|
|
backgroundColor: !active &&
|
|
rgba((transparentSidenav && !darkMode) || whiteSidenav ? grey[400] : white.main, 0.2),
|
|
},
|
|
};
|
|
}
|
|
function itemContent(theme, ownerState) {
|
|
const { palette, typography, transitions, functions } = theme;
|
|
const { miniSidenav, name, active, transparentSidenav, whiteSidenav, darkMode } = ownerState;
|
|
const { white, dark } = palette;
|
|
const { size, fontWeightRegular, fontWeightLight } = typography;
|
|
const { pxToRem } = functions;
|
|
return {
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "space-between",
|
|
width: "100%",
|
|
padding: `${pxToRem(12)} ${pxToRem(16)}`,
|
|
marginLeft: pxToRem(18),
|
|
userSelect: "none",
|
|
position: "relative",
|
|
"& span": {
|
|
color: ((transparentSidenav && !darkMode) || whiteSidenav) && (active === "isParent" || !active)
|
|
? dark.main
|
|
: white.main,
|
|
fontWeight: active ? fontWeightRegular : fontWeightLight,
|
|
fontSize: size.sm,
|
|
opacity: miniSidenav ? 0 : 1,
|
|
transition: transitions.create(["opacity", "color"], {
|
|
easing: transitions.easing.easeInOut,
|
|
duration: transitions.duration.standard,
|
|
}),
|
|
},
|
|
"&::before": {
|
|
content: `"${name[0]}"`,
|
|
color: ((transparentSidenav && !darkMode) || whiteSidenav) && (active === "isParent" || !active)
|
|
? dark.main
|
|
: white.main,
|
|
fontWeight: fontWeightRegular,
|
|
display: "flex",
|
|
alignItems: "center",
|
|
position: "absolute",
|
|
top: "50%",
|
|
transform: "translateY(-50%)",
|
|
left: pxToRem(-15),
|
|
opacity: 1,
|
|
borderRadius: "50%",
|
|
fontSize: size.sm,
|
|
},
|
|
};
|
|
}
|
|
function itemArrow(theme, ownerState) {
|
|
const { palette, typography, transitions, breakpoints, functions } = theme;
|
|
const { noCollapse, transparentSidenav, whiteSidenav, miniSidenav, open, active, darkMode } = ownerState;
|
|
const { white, dark } = palette;
|
|
const { size } = typography;
|
|
const { pxToRem, rgba } = functions;
|
|
return {
|
|
fontSize: `${size.lg} !important`,
|
|
fontWeight: 700,
|
|
marginBottom: pxToRem(-1),
|
|
transform: open ? "rotate(0)" : "rotate(-180deg)",
|
|
color: () => {
|
|
let colorValue;
|
|
if (transparentSidenav && darkMode) {
|
|
colorValue = open || active ? white.main : rgba(white.main, 0.25);
|
|
}
|
|
else if (transparentSidenav || whiteSidenav) {
|
|
colorValue = open || active ? dark.main : rgba(dark.main, 0.25);
|
|
}
|
|
else {
|
|
colorValue = open || active ? white.main : rgba(white.main, 0.5);
|
|
}
|
|
return colorValue;
|
|
},
|
|
transition: transitions.create(["color", "transform", "opacity"], {
|
|
easing: transitions.easing.easeInOut,
|
|
duration: transitions.duration.shorter,
|
|
}),
|
|
[breakpoints.up("xl")]: {
|
|
display: noCollapse || (transparentSidenav && miniSidenav) || miniSidenav
|
|
? "none !important"
|
|
: "block !important",
|
|
},
|
|
};
|
|
}
|
|
|
|
function SidenavItem({ color, name, active, nested, children, open, ...rest }) {
|
|
const [controller] = useMaterialUIController();
|
|
const { miniSidenav, transparentSidenav, whiteSidenav, darkMode } = controller;
|
|
return (jsxs(Fragment, { children: [jsx(ListItem, { ...rest, component: "li", sx: (theme) => item(theme, { active, color, transparentSidenav, whiteSidenav, darkMode }), children: jsxs(MDBox, { sx: (theme) => itemContent(theme, {
|
|
active,
|
|
miniSidenav,
|
|
name,
|
|
open,
|
|
nested,
|
|
transparentSidenav,
|
|
whiteSidenav,
|
|
darkMode,
|
|
}), children: [jsx(ListItemText, { primary: name }), children && (jsx(Icon, { component: "i", sx: (theme) => itemArrow(theme, { open, miniSidenav, transparentSidenav, whiteSidenav, darkMode }), children: "expand_less" }))] }) }), children && (jsx(Collapse, { in: open, timeout: "auto", unmountOnExit: true, ...rest, children: children }))] }));
|
|
}
|
|
// Declaring default props for SidenavItem
|
|
SidenavItem.defaultProps = {
|
|
color: "info",
|
|
active: false,
|
|
nested: false,
|
|
children: false,
|
|
open: false,
|
|
};
|
|
|
|
/**
|
|
=========================================================
|
|
* 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.
|
|
*/
|
|
var SidenavRoot = styled(Drawer)(({ theme, ownerState }) => {
|
|
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()),
|
|
},
|
|
};
|
|
});
|
|
|
|
/**
|
|
=========================================================
|
|
* 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 sidenavLogoLabel(theme, ownerState) {
|
|
const { functions, transitions, typography, breakpoints } = theme;
|
|
const { miniSidenav } = ownerState;
|
|
const { pxToRem } = functions;
|
|
const { fontWeightMedium } = typography;
|
|
return {
|
|
ml: 0.5,
|
|
fontWeight: fontWeightMedium,
|
|
wordSpacing: pxToRem(-1),
|
|
transition: transitions.create("opacity", {
|
|
easing: transitions.easing.easeInOut,
|
|
duration: transitions.duration.standard,
|
|
}),
|
|
[breakpoints.up("xl")]: {
|
|
opacity: miniSidenav ? 0 : 1,
|
|
},
|
|
};
|
|
}
|
|
|
|
function Sidenav$1({ color, brand, brandName, routes, ...rest }) {
|
|
const [openCollapse, setOpenCollapse] = useState(false);
|
|
const [openNestedCollapse, setOpenNestedCollapse] = useState(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];
|
|
let textColor = "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);
|
|
// 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) => {
|
|
const template = collapse.map(({ name, route, key, href }) => href ? (jsx(Link, { href: href, target: "_blank", rel: "noreferrer", sx: { textDecoration: "none" }, children: jsx(SidenavItem, { name: name, nested: true }) }, key)) : (jsx(NavLink, { to: route, style: { textDecoration: "none" }, children: jsx(SidenavItem, { name: name, active: route === pathname, nested: true }) }, key)));
|
|
return template;
|
|
};
|
|
// Render the all the collpases from the routes.js
|
|
const renderCollapse = (collapses) => collapses.map(({ name, collapse, route, href, key }) => {
|
|
let returnValue;
|
|
if (collapse) {
|
|
returnValue = (jsx(SidenavItem, { color: color, name: name, active: key === itemParentName ? "isParent" : false, open: openNestedCollapse === key, onClick: ({ currentTarget }) => openNestedCollapse === key && currentTarget.classList.contains("MuiListItem-root")
|
|
? setOpenNestedCollapse(false)
|
|
: setOpenNestedCollapse(key), children: renderNestedCollapse(collapse) }, key));
|
|
}
|
|
else {
|
|
returnValue = href ? (jsx(Link, { href: href, target: "_blank", rel: "noreferrer", sx: { textDecoration: "none" }, children: jsx(SidenavItem, { color: color, name: name, active: key === itemName }) }, key)) : (jsx(NavLink, { to: route, style: { textDecoration: "none" }, children: jsx(SidenavItem, { color: color, name: name, active: key === itemName }) }, key));
|
|
}
|
|
return jsx(SidenavList, { children: returnValue }, key);
|
|
});
|
|
// 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 }) => {
|
|
let returnValue;
|
|
if (type === "collapse") {
|
|
if (href) {
|
|
returnValue = (jsx(Link, { href: href, target: "_blank", rel: "noreferrer", sx: { textDecoration: "none" }, children: jsx(SidenavCollapse, { name: name, icon: icon, active: key === collapseName, noCollapse: noCollapse }) }, key));
|
|
}
|
|
else if (noCollapse && route) {
|
|
returnValue = (jsx(NavLink, { to: route, children: jsx(SidenavCollapse, { name: name, icon: icon, noCollapse: noCollapse, active: key === collapseName, children: collapse ? renderCollapse(collapse) : null }) }, key));
|
|
}
|
|
else {
|
|
returnValue = (jsx(SidenavCollapse, { name: name, icon: icon, active: key === collapseName, open: openCollapse === key, onClick: () => (openCollapse === key ? setOpenCollapse(false) : setOpenCollapse(key)), children: collapse ? renderCollapse(collapse) : null }, key));
|
|
}
|
|
}
|
|
else if (type === "title") {
|
|
returnValue = (jsx(MDTypography, { color: textColor, display: "block", variant: "caption", fontWeight: "bold", textTransform: "uppercase", pl: 3, mt: 2, mb: 1, ml: 1, children: title }, key));
|
|
}
|
|
else if (type === "divider") {
|
|
returnValue = (jsx(Divider, { light: (!darkMode && !whiteSidenav && !transparentSidenav) ||
|
|
(darkMode && !transparentSidenav && whiteSidenav) }, key));
|
|
}
|
|
return returnValue;
|
|
});
|
|
return (jsxs(SidenavRoot, { ...rest, variant: "permanent", ownerState: { transparentSidenav, whiteSidenav, miniSidenav, darkMode }, children: [jsxs(MDBox, { pt: 3, pb: 1, px: 4, textAlign: "center", children: [jsx(MDBox, { display: { xs: "block", xl: "none" }, position: "absolute", top: 0, right: 0, p: 1.625, onClick: closeSidenav, sx: { cursor: "pointer" }, children: jsx(MDTypography, { variant: "h6", color: "secondary", children: jsx(Icon, { sx: { fontWeight: "bold" }, children: "close" }) }) }), jsxs(MDBox, { component: NavLink, to: "/", display: "flex", alignItems: "center", children: [brand && jsx(MDBox, { component: "img", src: brand, alt: "Brand", width: "2rem" }), jsx(MDBox, { width: !brandName && "100%", sx: (theme) => sidenavLogoLabel(theme, { miniSidenav }), children: jsx(MDTypography, { component: "h6", variant: "button", fontWeight: "medium", color: textColor, children: brandName }) })] })] }), jsx(Divider, { light: (!darkMode && !whiteSidenav && !transparentSidenav) ||
|
|
(darkMode && !transparentSidenav && whiteSidenav) }), jsx(List, { children: renderRoutes })] }));
|
|
}
|
|
// Declaring default props for Sidenav
|
|
Sidenav$1.defaultProps = {
|
|
color: "info",
|
|
brand: "",
|
|
};
|
|
|
|
/* eslint-disable prefer-destructuring */
|
|
var MDButtonRoot = styled(Button)(({ theme, ownerState }) => {
|
|
const { palette, functions, borders, boxShadows } = theme;
|
|
const { color, variant, size, circular, iconOnly, darkMode } = ownerState;
|
|
const { white, text, transparent, gradients, grey } = palette;
|
|
const { boxShadow, linearGradient, pxToRem, rgba } = functions;
|
|
const { borderRadius } = borders;
|
|
const { colored } = boxShadows;
|
|
// styles for the button with variant="contained"
|
|
const containedStyles = () => {
|
|
// background color value
|
|
const backgroundValue = palette[color] ? palette[color].main : white.main;
|
|
// backgroundColor value when button is focused
|
|
const focusedBackgroundValue = palette[color] ? palette[color].focus : white.focus;
|
|
// boxShadow value
|
|
const boxShadowValue = colored[color]
|
|
? `${boxShadow([0, 3], [3, 0], palette[color].main, 0.15)}, ${boxShadow([0, 3], [1, -2], palette[color].main, 0.2)}, ${boxShadow([0, 1], [5, 0], palette[color].main, 0.15)}`
|
|
: "none";
|
|
// boxShadow value when button is hovered
|
|
const hoveredBoxShadowValue = colored[color]
|
|
? `${boxShadow([0, 14], [26, -12], palette[color].main, 0.4)}, ${boxShadow([0, 4], [23, 0], palette[color].main, 0.15)}, ${boxShadow([0, 8], [10, -5], palette[color].main, 0.2)}`
|
|
: "none";
|
|
// color value
|
|
let colorValue = white.main;
|
|
if (!darkMode && (color === "white" || color === "light" || !palette[color])) {
|
|
colorValue = text.main;
|
|
}
|
|
else if (darkMode && (color === "white" || color === "light" || !palette[color])) {
|
|
colorValue = grey[600];
|
|
}
|
|
// color value when button is focused
|
|
let focusedColorValue = white.main;
|
|
if (color === "white") {
|
|
focusedColorValue = text.main;
|
|
}
|
|
else if (color === "primary" || color === "error" || color === "dark") {
|
|
focusedColorValue = white.main;
|
|
}
|
|
return {
|
|
background: backgroundValue,
|
|
color: colorValue,
|
|
boxShadow: boxShadowValue,
|
|
"&:hover": {
|
|
backgroundColor: backgroundValue,
|
|
color: colorValue,
|
|
boxShadow: hoveredBoxShadowValue,
|
|
},
|
|
"&:focus:not(:hover)": {
|
|
backgroundColor: focusedBackgroundValue,
|
|
color: colorValue,
|
|
boxShadow: palette[color]
|
|
? boxShadow([0, 0], [0, 3.2], palette[color].main, 0.5)
|
|
: boxShadow([0, 0], [0, 3.2], white.main, 0.5),
|
|
},
|
|
"&:disabled": {
|
|
backgroundColor: backgroundValue,
|
|
color: focusedColorValue,
|
|
},
|
|
};
|
|
};
|
|
// styles for the button with variant="outlined"
|
|
const outlinedStyles = () => {
|
|
// background color value
|
|
const backgroundValue = color === "white" ? rgba(white.main, 0.1) : transparent.main;
|
|
// color value
|
|
const colorValue = palette[color] ? palette[color].main : white.main;
|
|
// boxShadow value
|
|
const boxShadowValue = palette[color]
|
|
? boxShadow([0, 0], [0, 3.2], palette[color].main, 0.5)
|
|
: boxShadow([0, 0], [0, 3.2], white.main, 0.5);
|
|
// border color value
|
|
let borderColorValue = palette[color] ? palette[color].main : rgba(white.main, 0.75);
|
|
if (color === "white") {
|
|
borderColorValue = rgba(white.main, 0.75);
|
|
}
|
|
return {
|
|
background: backgroundValue,
|
|
color: colorValue,
|
|
border: `${pxToRem(1)} solid ${borderColorValue}`,
|
|
"&:hover": {
|
|
background: transparent.main,
|
|
color: colorValue,
|
|
borderColor: colorValue,
|
|
opacity: 0.85,
|
|
},
|
|
"&:focus:not(:hover)": {
|
|
background: transparent.main,
|
|
color: colorValue,
|
|
boxShadow: boxShadowValue,
|
|
},
|
|
"&:active:not(:hover)": {
|
|
backgroundColor: colorValue,
|
|
color: white.main,
|
|
opacity: 0.85,
|
|
},
|
|
"&:disabled": {
|
|
color: colorValue,
|
|
borderColor: colorValue,
|
|
},
|
|
};
|
|
};
|
|
// styles for the button with variant="gradient"
|
|
const gradientStyles = () => {
|
|
// background value
|
|
const backgroundValue = color === "white" || !gradients[color]
|
|
? white.main
|
|
: linearGradient(gradients[color].main, gradients[color].state);
|
|
// boxShadow value
|
|
const boxShadowValue = colored[color]
|
|
? `${boxShadow([0, 3], [3, 0], palette[color].main, 0.15)}, ${boxShadow([0, 3], [1, -2], palette[color].main, 0.2)}, ${boxShadow([0, 1], [5, 0], palette[color].main, 0.15)}`
|
|
: "none";
|
|
// boxShadow value when button is hovered
|
|
const hoveredBoxShadowValue = colored[color]
|
|
? `${boxShadow([0, 14], [26, -12], palette[color].main, 0.4)}, ${boxShadow([0, 4], [23, 0], palette[color].main, 0.15)}, ${boxShadow([0, 8], [10, -5], palette[color].main, 0.2)}`
|
|
: "none";
|
|
// color value
|
|
let colorValue = white.main;
|
|
if (color === "white") {
|
|
colorValue = text.main;
|
|
}
|
|
else if (color === "light") {
|
|
colorValue = gradients.dark.state;
|
|
}
|
|
return {
|
|
background: backgroundValue,
|
|
color: colorValue,
|
|
boxShadow: boxShadowValue,
|
|
"&:hover": {
|
|
boxShadow: hoveredBoxShadowValue,
|
|
color: colorValue,
|
|
},
|
|
"&:focus:not(:hover)": {
|
|
boxShadow: boxShadowValue,
|
|
color: colorValue,
|
|
},
|
|
"&:disabled": {
|
|
background: backgroundValue,
|
|
color: colorValue,
|
|
},
|
|
};
|
|
};
|
|
// styles for the button with variant="text"
|
|
const textStyles = () => {
|
|
// color value
|
|
const colorValue = palette[color] ? palette[color].main : white.main;
|
|
// color value when button is focused
|
|
const focusedColorValue = palette[color] ? palette[color].focus : white.focus;
|
|
return {
|
|
color: colorValue,
|
|
"&:hover": {
|
|
color: focusedColorValue,
|
|
},
|
|
"&:focus:not(:hover)": {
|
|
color: focusedColorValue,
|
|
},
|
|
};
|
|
};
|
|
// styles for the button with circular={true}
|
|
const circularStyles = () => ({
|
|
borderRadius: borderRadius.section,
|
|
});
|
|
// styles for the button with iconOnly={true}
|
|
const iconOnlyStyles = () => {
|
|
// width, height, minWidth and minHeight values
|
|
let sizeValue = pxToRem(38);
|
|
if (size === "small") {
|
|
sizeValue = pxToRem(25.4);
|
|
}
|
|
else if (size === "large") {
|
|
sizeValue = pxToRem(52);
|
|
}
|
|
// padding value
|
|
let paddingValue = `${pxToRem(11)} ${pxToRem(11)} ${pxToRem(10)}`;
|
|
if (size === "small") {
|
|
paddingValue = pxToRem(4.5);
|
|
}
|
|
else if (size === "large") {
|
|
paddingValue = pxToRem(16);
|
|
}
|
|
return {
|
|
width: sizeValue,
|
|
minWidth: sizeValue,
|
|
height: sizeValue,
|
|
minHeight: sizeValue,
|
|
padding: paddingValue,
|
|
"& .material-icons": {
|
|
marginTop: 0,
|
|
},
|
|
"&:hover, &:focus, &:active": {
|
|
transform: "none",
|
|
},
|
|
};
|
|
};
|
|
return {
|
|
...(variant === "contained" && containedStyles()),
|
|
...(variant === "outlined" && outlinedStyles()),
|
|
...(variant === "gradient" && gradientStyles()),
|
|
...(variant === "text" && textStyles()),
|
|
...(circular && circularStyles()),
|
|
...(iconOnly && iconOnlyStyles()),
|
|
};
|
|
});
|
|
|
|
const MDButton = forwardRef(({ color, variant, size, circular, iconOnly, children, ...rest }, ref) => {
|
|
const [controller] = useMaterialUIController();
|
|
const { darkMode } = controller;
|
|
return (jsx(MDButtonRoot, { ...rest, ref: ref, ownerState: { color, variant, size, circular, iconOnly, darkMode }, children: children }));
|
|
});
|
|
// Declaring default props for MDButton
|
|
MDButton.defaultProps = {
|
|
color: "white",
|
|
variant: "contained",
|
|
size: "medium",
|
|
circular: false,
|
|
iconOnly: false,
|
|
};
|
|
|
|
/**
|
|
=========================================================
|
|
* 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.
|
|
*/
|
|
var ConfiguratorRoot = styled(Drawer)(({ theme, ownerState }) => {
|
|
const { boxShadows, functions, transitions } = theme;
|
|
const { openConfigurator } = ownerState;
|
|
const configuratorWidth = 360;
|
|
const { lg } = boxShadows;
|
|
const { pxToRem } = functions;
|
|
// drawer styles when openConfigurator={true}
|
|
const drawerOpenStyles = () => ({
|
|
width: configuratorWidth,
|
|
left: "initial",
|
|
right: 0,
|
|
transition: transitions.create("right", {
|
|
easing: transitions.easing.sharp,
|
|
duration: transitions.duration.short,
|
|
}),
|
|
});
|
|
// drawer styles when openConfigurator={false}
|
|
const drawerCloseStyles = () => ({
|
|
left: "initial",
|
|
right: pxToRem(-350),
|
|
transition: transitions.create("all", {
|
|
easing: transitions.easing.sharp,
|
|
duration: transitions.duration.short,
|
|
}),
|
|
});
|
|
return {
|
|
"& .MuiDrawer-paper": {
|
|
height: "100vh",
|
|
margin: 0,
|
|
padding: `0 ${pxToRem(10)}`,
|
|
borderRadius: 0,
|
|
boxShadow: lg,
|
|
overflowY: "auto",
|
|
...(openConfigurator ? drawerOpenStyles() : drawerCloseStyles()),
|
|
},
|
|
};
|
|
});
|
|
|
|
function Configurator() {
|
|
const [controller, dispatch] = useMaterialUIController();
|
|
const { openConfigurator, miniSidenav, fixedNavbar, sidenavColor, transparentSidenav, whiteSidenav, darkMode, } = controller;
|
|
const [disabled, setDisabled] = useState(false);
|
|
const sidenavColors = ["primary", "dark", "info", "success", "warning", "error"];
|
|
// Use the useEffect hook to change the button state for the sidenav type based on window size.
|
|
useEffect(() => {
|
|
// A function that sets the disabled state of the buttons for the sidenav type.
|
|
function handleDisabled() {
|
|
return window.innerWidth > 1200 ? setDisabled(false) : setDisabled(true);
|
|
}
|
|
// The event listener that's calling the handleDisabled function when resizing the window.
|
|
window.addEventListener("resize", handleDisabled);
|
|
// Call the handleDisabled function to set the state with the initial value.
|
|
handleDisabled();
|
|
// Remove event listener on cleanup
|
|
return () => window.removeEventListener("resize", handleDisabled);
|
|
}, []);
|
|
const handleCloseConfigurator = () => setOpenConfigurator(dispatch, false);
|
|
const handleTransparentSidenav = () => {
|
|
setTransparentSidenav(dispatch, true);
|
|
setWhiteSidenav(dispatch, false);
|
|
};
|
|
const handleWhiteSidenav = () => {
|
|
setWhiteSidenav(dispatch, true);
|
|
setTransparentSidenav(dispatch, false);
|
|
};
|
|
const handleDarkSidenav = () => {
|
|
setWhiteSidenav(dispatch, false);
|
|
setTransparentSidenav(dispatch, false);
|
|
};
|
|
const handleMiniSidenav = () => setMiniSidenav(dispatch, !miniSidenav);
|
|
const handleFixedNavbar = () => setFixedNavbar(dispatch, !fixedNavbar);
|
|
const handleDarkMode = () => setDarkMode(dispatch, !darkMode);
|
|
// sidenav type buttons styles
|
|
const sidenavTypeButtonsStyles = ({ functions: { pxToRem }, palette: { white, dark, background }, borders: { borderWidth }, }) => ({
|
|
height: pxToRem(39),
|
|
background: darkMode ? background.sidenav : white.main,
|
|
color: darkMode ? white.main : dark.main,
|
|
border: `${borderWidth[1]} solid ${darkMode ? white.main : dark.main}`,
|
|
"&:hover, &:focus, &:focus:not(:hover)": {
|
|
background: darkMode ? background.sidenav : white.main,
|
|
color: darkMode ? white.main : dark.main,
|
|
border: `${borderWidth[1]} solid ${darkMode ? white.main : dark.main}`,
|
|
},
|
|
});
|
|
// sidenav type active button styles
|
|
const sidenavTypeActiveButtonStyles = ({ functions: { pxToRem, linearGradient }, palette: { white, gradients, background }, }) => ({
|
|
height: pxToRem(39),
|
|
background: darkMode ? white.main : linearGradient(gradients.dark.main, gradients.dark.state),
|
|
color: darkMode ? background.sidenav : white.main,
|
|
"&:hover, &:focus, &:focus:not(:hover)": {
|
|
background: darkMode ? white.main : linearGradient(gradients.dark.main, gradients.dark.state),
|
|
color: darkMode ? background.sidenav : white.main,
|
|
},
|
|
});
|
|
return (jsxs(ConfiguratorRoot, { variant: "permanent", ownerState: { openConfigurator }, children: [jsxs(MDBox, { display: "flex", justifyContent: "space-between", alignItems: "baseline", pt: 4, pb: 0.5, px: 3, children: [jsxs(MDBox, { children: [jsx(MDTypography, { variant: "h5", children: "Material UI Configurator" }), jsx(MDTypography, { variant: "body2", color: "text", children: "See our dashboard options." })] }), jsx(Icon, { sx: ({ typography: { size }, palette: { dark, white } }) => ({
|
|
fontSize: `${size.lg} !important`,
|
|
color: darkMode ? white.main : dark.main,
|
|
stroke: "currentColor",
|
|
strokeWidth: "2px",
|
|
cursor: "pointer",
|
|
transform: "translateY(5px)",
|
|
}), onClick: handleCloseConfigurator, children: "close" })] }), jsx(Divider, {}), jsxs(MDBox, { pt: 0.5, pb: 3, px: 3, children: [jsxs(MDBox, { children: [jsx(MDTypography, { variant: "h6", children: "Sidenav Colors" }), jsx(MDBox, { mb: 0.5, children: sidenavColors.map((color) => (jsx(IconButton, { sx: ({ borders: { borderWidth }, palette: { white, dark, background }, transitions, }) => ({
|
|
width: "24px",
|
|
height: "24px",
|
|
padding: 0,
|
|
border: `${borderWidth[1]} solid ${darkMode ? background.sidenav : white.main}`,
|
|
borderColor: () => {
|
|
let borderColorValue = sidenavColor === color && dark.main;
|
|
if (darkMode && sidenavColor === color) {
|
|
borderColorValue = white.main;
|
|
}
|
|
return borderColorValue;
|
|
},
|
|
transition: transitions.create("border-color", {
|
|
easing: transitions.easing.sharp,
|
|
duration: transitions.duration.shorter,
|
|
}),
|
|
backgroundImage: ({ functions: { linearGradient }, palette: { gradients } }) => linearGradient(gradients[color].main, gradients[color].state),
|
|
"&:not(:last-child)": {
|
|
mr: 1,
|
|
},
|
|
"&:hover, &:focus, &:active": {
|
|
borderColor: darkMode ? white.main : dark.main,
|
|
},
|
|
}), onClick: () => setSidenavColor(dispatch, color) }, color))) })] }), jsxs(MDBox, { mt: 3, lineHeight: 1, children: [jsx(MDTypography, { variant: "h6", children: "Sidenav Type" }), jsx(MDTypography, { variant: "button", color: "text", children: "Choose between different sidenav types." }), jsxs(MDBox, { sx: {
|
|
display: "flex",
|
|
mt: 2,
|
|
mr: 1,
|
|
}, children: [jsx(MDButton, { color: "dark", variant: "gradient", onClick: handleDarkSidenav, disabled: disabled, fullWidth: true, sx: !transparentSidenav && !whiteSidenav
|
|
? sidenavTypeActiveButtonStyles
|
|
: sidenavTypeButtonsStyles, children: "Dark" }), jsx(MDBox, { sx: { mx: 1, width: "8rem", minWidth: "8rem" }, children: jsx(MDButton, { color: "dark", variant: "gradient", onClick: handleTransparentSidenav, disabled: disabled, fullWidth: true, sx: transparentSidenav && !whiteSidenav
|
|
? sidenavTypeActiveButtonStyles
|
|
: sidenavTypeButtonsStyles, children: "Transparent" }) }), jsx(MDButton, { color: "dark", variant: "gradient", onClick: handleWhiteSidenav, disabled: disabled, fullWidth: true, sx: whiteSidenav && !transparentSidenav
|
|
? sidenavTypeActiveButtonStyles
|
|
: sidenavTypeButtonsStyles, children: "White" })] })] }), jsxs(MDBox, { display: "flex", justifyContent: "space-between", alignItems: "center", mt: 3, lineHeight: 1, children: [jsx(MDTypography, { variant: "h6", children: "Navbar Fixed" }), jsx(Switch, { checked: fixedNavbar, onChange: handleFixedNavbar })] }), jsx(Divider, {}), jsxs(MDBox, { display: "flex", justifyContent: "space-between", alignItems: "center", lineHeight: 1, children: [jsx(MDTypography, { variant: "h6", children: "Sidenav Mini" }), jsx(Switch, { checked: miniSidenav, onChange: handleMiniSidenav })] }), jsx(Divider, {}), jsxs(MDBox, { display: "flex", justifyContent: "space-between", alignItems: "center", lineHeight: 1, children: [jsx(MDTypography, { variant: "h6", children: "Light / Dark" }), jsx(Switch, { checked: darkMode, onChange: handleDarkMode })] }), jsx(Divider, {}), jsxs(MDBox, { mt: 3, mb: 2, children: [jsx(MDBox, { mb: 2, children: jsx(MDButton, { component: Link, href: "https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts", target: "_blank", rel: "noreferrer", color: "info", variant: "gradient", fullWidth: true, children: "buy now" }) }), jsx(MDBox, { mb: 2, children: jsx(MDButton, { component: Link, href: "https://www.creative-tim.com/product/material-dashboard-pro-react", target: "_blank", rel: "noreferrer", color: "dark", variant: "gradient", fullWidth: true, children: "buy javascript version" }) }), jsx(MDButton, { component: Link, href: "https://www.creative-tim.com/learning-lab/react/quick-start/material-dashboard/", target: "_blank", rel: "noreferrer", color: darkMode ? "light" : "dark", variant: "outlined", fullWidth: true, children: "view documentation" })] }), jsx(MDBox, { display: "flex", justifyContent: "center", children: jsx(GitHubButton, { href: "https://github.com/creativetimofficial/ct-material-dashboard-pro-react", "data-icon": "octicon-star", "data-size": "large", "data-show-count": "true", "aria-label": "Star creativetimofficial/ct-material-dashboard-pro-react on GitHub", children: "Star" }) }), jsxs(MDBox, { mt: 2, textAlign: "center", children: [jsx(MDBox, { mb: 0.5, children: jsx(MDTypography, { variant: "h6", children: "Thank you for sharing!" }) }), jsxs(MDBox, { display: "flex", justifyContent: "center", children: [jsx(MDBox, { mr: 1.5, children: jsxs(MDButton, { component: Link, href: "//twitter.com/intent/tweet?text=Check%20Material%20Dashboard%202%20PRO%20React%20made%20by%20%40CreativeTim%20%23webdesign%20%23dashboard%20%23react%20%mui&url=https%3A%2F%2Fwww.creative-tim.com%2Fproduct%2Fmaterial-dashboard-2-pro-react-ts", target: "_blank", rel: "noreferrer", color: "dark", children: [jsx(TwitterIcon, {}), "\u00A0 Tweet"] }) }), jsxs(MDButton, { component: Link, href: "https://www.facebook.com/sharer/sharer.php?u=https://www.creative-tim.com/product/material-dashboard-2-pro-react-ts", target: "_blank", rel: "noreferrer", color: "dark", children: [jsx(FacebookIcon, {}), "\u00A0 Share"] })] })] })] })] }));
|
|
}
|
|
|
|
/**
|
|
=========================================================
|
|
* 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 colors$1 = {
|
|
background: {
|
|
default: "#f0f2f5",
|
|
},
|
|
text: {
|
|
main: "#7b809a",
|
|
focus: "#7b809a",
|
|
},
|
|
transparent: {
|
|
main: "transparent",
|
|
},
|
|
white: {
|
|
main: "#ffffff",
|
|
focus: "#ffffff",
|
|
},
|
|
black: {
|
|
light: "#000000",
|
|
main: "#000000",
|
|
focus: "#000000",
|
|
},
|
|
primary: {
|
|
main: "#e91e63",
|
|
focus: "#e91e63",
|
|
},
|
|
secondary: {
|
|
main: "#7b809a",
|
|
focus: "#8f93a9",
|
|
},
|
|
info: {
|
|
main: "#1A73E8",
|
|
focus: "#1662C4",
|
|
},
|
|
success: {
|
|
main: "#4CAF50",
|
|
focus: "#67bb6a",
|
|
},
|
|
warning: {
|
|
main: "#fb8c00",
|
|
focus: "#fc9d26",
|
|
},
|
|
error: {
|
|
main: "#F44335",
|
|
focus: "#f65f53",
|
|
},
|
|
light: {
|
|
main: "#f0f2f5",
|
|
focus: "#f0f2f5",
|
|
},
|
|
dark: {
|
|
main: "#344767",
|
|
focus: "#2c3c58",
|
|
},
|
|
grey: {
|
|
100: "#f8f9fa",
|
|
200: "#f0f2f5",
|
|
300: "#dee2e6",
|
|
400: "#ced4da",
|
|
500: "#adb5bd",
|
|
600: "#6c757d",
|
|
700: "#495057",
|
|
800: "#343a40",
|
|
900: "#212529",
|
|
},
|
|
gradients: {
|
|
primary: {
|
|
main: "#EC407A",
|
|
state: "#D81B60",
|
|
},
|
|
secondary: {
|
|
main: "#747b8a",
|
|
state: "#495361",
|
|
},
|
|
info: {
|
|
main: "#49a3f1",
|
|
state: "#1A73E8",
|
|
},
|
|
success: {
|
|
main: "#66BB6A",
|
|
state: "#43A047",
|
|
},
|
|
warning: {
|
|
main: "#FFA726",
|
|
state: "#FB8C00",
|
|
},
|
|
error: {
|
|
main: "#EF5350",
|
|
state: "#E53935",
|
|
},
|
|
light: {
|
|
main: "#EBEFF4",
|
|
state: "#CED4DA",
|
|
},
|
|
dark: {
|
|
main: "#42424a",
|
|
state: "#191919",
|
|
},
|
|
},
|
|
socialMediaColors: {
|
|
facebook: {
|
|
main: "#3b5998",
|
|
dark: "#344e86",
|
|
},
|
|
twitter: {
|
|
main: "#55acee",
|
|
dark: "#3ea1ec",
|
|
},
|
|
instagram: {
|
|
main: "#125688",
|
|
dark: "#0e456d",
|
|
},
|
|
linkedin: {
|
|
main: "#0077b5",
|
|
dark: "#00669c",
|
|
},
|
|
pinterest: {
|
|
main: "#cc2127",
|
|
dark: "#b21d22",
|
|
},
|
|
youtube: {
|
|
main: "#e52d27",
|
|
dark: "#d41f1a",
|
|
},
|
|
vimeo: {
|
|
main: "#1ab7ea",
|
|
dark: "#13a3d2",
|
|
},
|
|
slack: {
|
|
main: "#3aaf85",
|
|
dark: "#329874",
|
|
},
|
|
dribbble: {
|
|
main: "#ea4c89",
|
|
dark: "#e73177",
|
|
},
|
|
github: {
|
|
main: "#24292e",
|
|
dark: "#171a1d",
|
|
},
|
|
reddit: {
|
|
main: "#ff4500",
|
|
dark: "#e03d00",
|
|
},
|
|
tumblr: {
|
|
main: "#35465c",
|
|
dark: "#2a3749",
|
|
},
|
|
},
|
|
badgeColors: {
|
|
primary: {
|
|
background: "#f8b3ca",
|
|
text: "#cc084b",
|
|
},
|
|
secondary: {
|
|
background: "#d7d9e1",
|
|
text: "#6c757d",
|
|
},
|
|
info: {
|
|
background: "#aecef7",
|
|
text: "#095bc6",
|
|
},
|
|
success: {
|
|
background: "#bce2be",
|
|
text: "#339537",
|
|
},
|
|
warning: {
|
|
background: "#ffd59f",
|
|
text: "#c87000",
|
|
},
|
|
error: {
|
|
background: "#fcd3d0",
|
|
text: "#f61200",
|
|
},
|
|
light: {
|
|
background: "#ffffff",
|
|
text: "#c7d3de",
|
|
},
|
|
dark: {
|
|
background: "#8097bf",
|
|
text: "#1e2e4a",
|
|
},
|
|
},
|
|
coloredShadows: {
|
|
primary: "#e91e62",
|
|
secondary: "#110e0e",
|
|
info: "#00bbd4",
|
|
success: "#4caf4f",
|
|
warning: "#ff9900",
|
|
error: "#f44336",
|
|
light: "#adb5bd",
|
|
dark: "#404040",
|
|
},
|
|
inputBorderColor: "#d2d6da",
|
|
tabs: {
|
|
indicator: { boxShadow: "#ddd" },
|
|
},
|
|
};
|
|
|
|
/**
|
|
=========================================================
|
|
* 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.
|
|
*/
|
|
/**
|
|
* The base breakpoints for the Material Dashboard 2 PRO React TSUI Dashboard PRO Material.
|
|
* You can add new breakpoints using this file.
|
|
* You can customized the breakpoints for the entire Material Dashboard 2 PRO React TSUI Dashboard PRO Material using thie file.
|
|
*/
|
|
const breakpoints$1 = {
|
|
values: {
|
|
xs: 0,
|
|
sm: 576,
|
|
md: 768,
|
|
lg: 992,
|
|
xl: 1200,
|
|
xxl: 1400,
|
|
},
|
|
};
|
|
|
|
/**
|
|
=========================================================
|
|
* 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.
|
|
*/
|
|
/**
|
|
The pxToRem() function helps you to convert a px unit into a rem unit,
|
|
*/
|
|
function pxToRem$1(number, baseNumber = 16) {
|
|
return `${number / baseNumber}rem`;
|
|
}
|
|
|
|
/**
|
|
=========================================================
|
|
* 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 { dark: dark$e } = colors$1;
|
|
const baseProperties$1 = {
|
|
fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
|
|
fontWeightLighter: 100,
|
|
fontWeightLight: 300,
|
|
fontWeightRegular: 400,
|
|
fontWeightMedium: 600,
|
|
fontWeightBold: 700,
|
|
fontSizeXXS: pxToRem$1(10.4),
|
|
fontSizeXS: pxToRem$1(12),
|
|
fontSizeSM: pxToRem$1(14),
|
|
fontSizeMD: pxToRem$1(16),
|
|
fontSizeLG: pxToRem$1(18),
|
|
fontSizeXL: pxToRem$1(20),
|
|
fontSize2XL: pxToRem$1(24),
|
|
fontSize3XL: pxToRem$1(30),
|
|
};
|
|
const baseHeadingProperties$1 = {
|
|
fontFamily: baseProperties$1.fontFamily,
|
|
color: dark$e.main,
|
|
fontWeight: baseProperties$1.fontWeightBold,
|
|
};
|
|
const baseDisplayProperties$1 = {
|
|
fontFamily: baseProperties$1.fontFamily,
|
|
color: dark$e.main,
|
|
fontWeight: baseProperties$1.fontWeightLight,
|
|
lineHeight: 1.2,
|
|
};
|
|
const typography$1 = {
|
|
fontFamily: baseProperties$1.fontFamily,
|
|
fontWeightLighter: baseProperties$1.fontWeightLighter,
|
|
fontWeightLight: baseProperties$1.fontWeightLight,
|
|
fontWeightRegular: baseProperties$1.fontWeightRegular,
|
|
fontWeightMedium: baseProperties$1.fontWeightMedium,
|
|
fontWeightBold: baseProperties$1.fontWeightBold,
|
|
h1: {
|
|
fontSize: pxToRem$1(48),
|
|
lineHeight: 1.25,
|
|
...baseHeadingProperties$1,
|
|
},
|
|
h2: {
|
|
fontSize: pxToRem$1(36),
|
|
lineHeight: 1.3,
|
|
...baseHeadingProperties$1,
|
|
},
|
|
h3: {
|
|
fontSize: pxToRem$1(30),
|
|
lineHeight: 1.375,
|
|
...baseHeadingProperties$1,
|
|
},
|
|
h4: {
|
|
fontSize: pxToRem$1(24),
|
|
lineHeight: 1.375,
|
|
...baseHeadingProperties$1,
|
|
},
|
|
h5: {
|
|
fontSize: pxToRem$1(20),
|
|
lineHeight: 1.375,
|
|
...baseHeadingProperties$1,
|
|
},
|
|
h6: {
|
|
fontSize: pxToRem$1(16),
|
|
lineHeight: 1.625,
|
|
...baseHeadingProperties$1,
|
|
},
|
|
subtitle1: {
|
|
fontFamily: baseProperties$1.fontFamily,
|
|
fontSize: baseProperties$1.fontSizeXL,
|
|
fontWeight: baseProperties$1.fontWeightLight,
|
|
lineHeight: 1.625,
|
|
},
|
|
subtitle2: {
|
|
fontFamily: baseProperties$1.fontFamily,
|
|
fontSize: baseProperties$1.fontSizeMD,
|
|
fontWeight: baseProperties$1.fontWeightLight,
|
|
lineHeight: 1.6,
|
|
},
|
|
body1: {
|
|
fontFamily: baseProperties$1.fontFamily,
|
|
fontSize: baseProperties$1.fontSizeXL,
|
|
fontWeight: baseProperties$1.fontWeightRegular,
|
|
lineHeight: 1.625,
|
|
},
|
|
body2: {
|
|
fontFamily: baseProperties$1.fontFamily,
|
|
fontSize: baseProperties$1.fontSizeMD,
|
|
fontWeight: baseProperties$1.fontWeightLight,
|
|
lineHeight: 1.6,
|
|
},
|
|
button: {
|
|
fontFamily: baseProperties$1.fontFamily,
|
|
fontSize: baseProperties$1.fontSizeSM,
|
|
fontWeight: baseProperties$1.fontWeightLight,
|
|
lineHeight: 1.5,
|
|
textTransform: "uppercase",
|
|
},
|
|
caption: {
|
|
fontFamily: baseProperties$1.fontFamily,
|
|
fontSize: baseProperties$1.fontSizeXS,
|
|
fontWeight: baseProperties$1.fontWeightLight,
|
|
lineHeight: 1.25,
|
|
},
|
|
overline: {
|
|
fontFamily: baseProperties$1.fontFamily,
|
|
},
|
|
d1: {
|
|
fontSize: pxToRem$1(80),
|
|
...baseDisplayProperties$1,
|
|
},
|
|
d2: {
|
|
fontSize: pxToRem$1(72),
|
|
...baseDisplayProperties$1,
|
|
},
|
|
d3: {
|
|
fontSize: pxToRem$1(64),
|
|
...baseDisplayProperties$1,
|
|
},
|
|
d4: {
|
|
fontSize: pxToRem$1(56),
|
|
...baseDisplayProperties$1,
|
|
},
|
|
d5: {
|
|
fontSize: pxToRem$1(48),
|
|
...baseDisplayProperties$1,
|
|
},
|
|
d6: {
|
|
fontSize: pxToRem$1(40),
|
|
...baseDisplayProperties$1,
|
|
},
|
|
size: {
|
|
xxs: baseProperties$1.fontSizeXXS,
|
|
xs: baseProperties$1.fontSizeXS,
|
|
sm: baseProperties$1.fontSizeSM,
|
|
md: baseProperties$1.fontSizeMD,
|
|
lg: baseProperties$1.fontSizeLG,
|
|
xl: baseProperties$1.fontSizeXL,
|
|
"2xl": baseProperties$1.fontSize2XL,
|
|
"3xl": baseProperties$1.fontSize3XL,
|
|
},
|
|
lineHeight: {
|
|
sm: 1.25,
|
|
md: 1.5,
|
|
lg: 2,
|
|
},
|
|
};
|
|
|
|
/**
|
|
=========================================================
|
|
* 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 hexToRgb$1(color) {
|
|
return chroma(color).rgb().join(", ");
|
|
}
|
|
|
|
/**
|
|
=========================================================
|
|
* 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 rgba$1(color, opacity) {
|
|
return `rgba(${hexToRgb$1(color)}, ${opacity})`;
|
|
}
|
|
|
|
/**
|
|
=========================================================
|
|
* 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 boxShadow$1(offset, radius, color, opacity, inset = "") {
|
|
const [x, y] = offset;
|
|
const [blur, spread] = radius;
|
|
return `${inset} ${pxToRem$1(x)} ${pxToRem$1(y)} ${pxToRem$1(blur)} ${pxToRem$1(spread)} ${rgba$1(color, opacity)}`;
|
|
}
|
|
|
|
/**
|
|
=========================================================
|
|
* 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 { black: black$7, white: white$x, tabs: tabs$3, coloredShadows: coloredShadows$1 } = colors$1;
|
|
const boxShadows$1 = {
|
|
xs: boxShadow$1([0, 2], [9, -5], black$7.main, 0.15),
|
|
sm: boxShadow$1([0, 5], [10, 0], black$7.main, 0.12),
|
|
md: `${boxShadow$1([0, 4], [6, -1], black$7.main, 0.1)}, ${boxShadow$1([0, 2], [4, -1], black$7.main, 0.06)}`,
|
|
lg: `${boxShadow$1([0, 10], [15, -3], black$7.main, 0.1)}, ${boxShadow$1([0, 4], [6, -2], black$7.main, 0.05)}`,
|
|
xl: `${boxShadow$1([0, 20], [25, -5], black$7.main, 0.1)}, ${boxShadow$1([0, 10], [10, -5], black$7.main, 0.04)}`,
|
|
xxl: boxShadow$1([0, 20], [27, 0], black$7.main, 0.05),
|
|
inset: boxShadow$1([0, 1], [2, 0], black$7.main, 0.075, "inset"),
|
|
colored: {
|
|
primary: `${boxShadow$1([0, 4], [20, 0], black$7.main, 0.14)}, ${boxShadow$1([0, 7], [10, -5], coloredShadows$1.primary, 0.4)}`,
|
|
secondary: `${boxShadow$1([0, 4], [20, 0], black$7.main, 0.14)}, ${boxShadow$1([0, 7], [10, -5], coloredShadows$1.secondary, 0.4)}`,
|
|
info: `${boxShadow$1([0, 4], [20, 0], black$7.main, 0.14)}, ${boxShadow$1([0, 7], [10, -5], coloredShadows$1.info, 0.4)}`,
|
|
success: `${boxShadow$1([0, 4], [20, 0], black$7.main, 0.14)}, ${boxShadow$1([0, 7], [10, -5], coloredShadows$1.success, 0.4)}`,
|
|
warning: `${boxShadow$1([0, 4], [20, 0], black$7.main, 0.14)}, ${boxShadow$1([0, 7], [10, -5], coloredShadows$1.warning, 0.4)}`,
|
|
error: `${boxShadow$1([0, 4], [20, 0], black$7.main, 0.14)}, ${boxShadow$1([0, 7], [10, -5], coloredShadows$1.error, 0.4)}`,
|
|
light: `${boxShadow$1([0, 4], [20, 0], black$7.main, 0.14)}, ${boxShadow$1([0, 7], [10, -5], coloredShadows$1.light, 0.4)}`,
|
|
dark: `${boxShadow$1([0, 4], [20, 0], black$7.main, 0.14)}, ${boxShadow$1([0, 7], [10, -5], coloredShadows$1.dark, 0.4)}`,
|
|
},
|
|
navbarBoxShadow: `${boxShadow$1([0, 0], [1, 1], white$x.main, 0.9, "inset")}, ${boxShadow$1([0, 20], [27, 0], black$7.main, 0.05)}`,
|
|
sliderBoxShadow: {
|
|
thumb: boxShadow$1([0, 1], [13, 0], black$7.main, 0.2),
|
|
},
|
|
tabsBoxShadow: {
|
|
indicator: boxShadow$1([0, 1], [5, 1], tabs$3.indicator.boxShadow, 1),
|
|
},
|
|
};
|
|
|
|
/**
|
|
=========================================================
|
|
* 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 { grey: grey$a } = colors$1;
|
|
const borders$1 = {
|
|
borderColor: grey$a[300],
|
|
borderWidth: {
|
|
0: 0,
|
|
1: pxToRem$1(1),
|
|
2: pxToRem$1(2),
|
|
3: pxToRem$1(3),
|
|
4: pxToRem$1(4),
|
|
5: pxToRem$1(5),
|
|
},
|
|
borderRadius: {
|
|
xs: pxToRem$1(1.6),
|
|
sm: pxToRem$1(2),
|
|
md: pxToRem$1(6),
|
|
lg: pxToRem$1(8),
|
|
xl: pxToRem$1(12),
|
|
xxl: pxToRem$1(16),
|
|
section: pxToRem$1(160),
|
|
},
|
|
};
|
|
|
|
/**
|
|
=========================================================
|
|
* 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 { info: info$l, dark: dark$d } = colors$1;
|
|
const globals$1 = {
|
|
html: {
|
|
scrollBehavior: "smooth",
|
|
},
|
|
"*, *::before, *::after": {
|
|
margin: 0,
|
|
padding: 0,
|
|
},
|
|
"a, a:link, a:visited": {
|
|
textDecoration: "none !important",
|
|
},
|
|
"a.link, .link, a.link:link, .link:link, a.link:visited, .link:visited": {
|
|
color: `${dark$d.main} !important`,
|
|
transition: "color 150ms ease-in !important",
|
|
},
|
|
"a.link:hover, .link:hover, a.link:focus, .link:focus": {
|
|
color: `${info$l.main} !important`,
|
|
},
|
|
};
|
|
|
|
/**
|
|
=========================================================
|
|
* 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.
|
|
*/
|
|
/**
|
|
The linearGradient() function helps you to create a linear gradient color background
|
|
*/
|
|
function linearGradient$1(color, colorState, angle = 195) {
|
|
return `linear-gradient(${angle}deg, ${color}, ${colorState})`;
|
|
}
|
|
|
|
/**
|
|
=========================================================
|
|
* 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 { white: white$w } = colors$1;
|
|
const { borderRadius: borderRadius$B } = borders$1;
|
|
const sidenav$1 = {
|
|
styleOverrides: {
|
|
root: {
|
|
width: pxToRem$1(250),
|
|
whiteSpace: "nowrap",
|
|
border: "none",
|
|
},
|
|
paper: {
|
|
width: pxToRem$1(250),
|
|
backgroundColor: white$w.main,
|
|
height: `calc(100vh - ${pxToRem$1(32)})`,
|
|
margin: pxToRem$1(16),
|
|
borderRadius: borderRadius$B.xl,
|
|
border: "none",
|
|
},
|
|
paperAnchorDockedLeft: {
|
|
borderRight: "none",
|
|
},
|
|
},
|
|
};
|
|
|
|
/**
|
|
=========================================================
|
|
* 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 list$1 = {
|
|
styleOverrides: {
|
|
padding: {
|
|
paddingTop: 0,
|
|
paddingBottom: 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 listItem$1 = {
|
|
defaultProps: {
|
|
disableGutters: true,
|
|
},
|
|
styleOverrides: {
|
|
root: {
|
|
paddingTop: 0,
|
|
paddingBottom: 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 listItemText$1 = {
|
|
styleOverrides: {
|
|
root: {
|
|
marginTop: 0,
|
|
marginBottom: 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 { black: black$6, white: white$v } = colors$1;
|
|
const { borderWidth: borderWidth$h, borderRadius: borderRadius$A } = borders$1;
|
|
const { md: md$a } = boxShadows$1;
|
|
const card$1 = {
|
|
styleOverrides: {
|
|
root: {
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
position: "relative",
|
|
minWidth: 0,
|
|
wordWrap: "break-word",
|
|
backgroundColor: white$v.main,
|
|
backgroundClip: "border-box",
|
|
border: `${borderWidth$h[0]} solid ${rgba$1(black$6.main, 0.125)}`,
|
|
borderRadius: borderRadius$A.xl,
|
|
boxShadow: md$a,
|
|
overflow: "visible",
|
|
},
|
|
},
|
|
};
|
|
|
|
/**
|
|
=========================================================
|
|
* 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 { borderRadius: borderRadius$z } = borders$1;
|
|
const cardMedia$1 = {
|
|
styleOverrides: {
|
|
root: {
|
|
borderRadius: borderRadius$z.xl,
|
|
margin: `${pxToRem$1(16)} ${pxToRem$1(16)} 0`,
|
|
},
|
|
media: {
|
|
width: "auto",
|
|
},
|
|
},
|
|
};
|
|
|
|
/**
|
|
=========================================================
|
|
* 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 cardContent$1 = {
|
|
styleOverrides: {
|
|
root: {
|
|
marginTop: 0,
|
|
marginBottom: 0,
|
|
padding: `${pxToRem$1(8)} ${pxToRem$1(24)} ${pxToRem$1(24)}`,
|
|
},
|
|
},
|
|
};
|
|
|
|
/**
|
|
=========================================================
|
|
* 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 { fontWeightBold: fontWeightBold$3, size: size$z } = typography$1;
|
|
const { borderRadius: borderRadius$y } = borders$1;
|
|
const root$1 = {
|
|
display: "inline-flex",
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
fontSize: size$z.xs,
|
|
fontWeight: fontWeightBold$3,
|
|
borderRadius: borderRadius$y.lg,
|
|
padding: `${pxToRem$1(6.302)} ${pxToRem$1(16.604)}`,
|
|
lineHeight: 1.4,
|
|
textAlign: "center",
|
|
textTransform: "uppercase",
|
|
userSelect: "none",
|
|
backgroundSize: "150% !important",
|
|
backgroundPositionX: "25% !important",
|
|
transition: "all 150ms ease-in",
|
|
"&:disabled": {
|
|
pointerEvent: "none",
|
|
opacity: 0.65,
|
|
},
|
|
"& .material-icons": {
|
|
fontSize: pxToRem$1(15),
|
|
marginTop: pxToRem$1(-2),
|
|
},
|
|
};
|
|
|
|
/**
|
|
=========================================================
|
|
* 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 { white: white$u, text: text$e, info: info$k, secondary: secondary$5 } = colors$1;
|
|
const { size: size$y } = typography$1;
|
|
const contained$1 = {
|
|
base: {
|
|
backgroundColor: white$u.main,
|
|
minHeight: pxToRem$1(40),
|
|
color: text$e.main,
|
|
padding: `${pxToRem$1(10)} ${pxToRem$1(24)}`,
|
|
"&:hover": {
|
|
backgroundColor: white$u.main,
|
|
},
|
|
"&:active, &:active:focus, &:active:hover": {
|
|
opacity: 0.85,
|
|
},
|
|
"& .material-icon, .material-icons-round, svg": {
|
|
fontSize: `${pxToRem$1(16)} !important`,
|
|
},
|
|
},
|
|
small: {
|
|
minHeight: pxToRem$1(32),
|
|
padding: `${pxToRem$1(6)} ${pxToRem$1(16)}`,
|
|
fontSize: size$y.xs,
|
|
"& .material-icon, .material-icons-round, svg": {
|
|
fontSize: `${pxToRem$1(12)} !important`,
|
|
},
|
|
},
|
|
large: {
|
|
minHeight: pxToRem$1(47),
|
|
padding: `${pxToRem$1(12)} ${pxToRem$1(28)}`,
|
|
fontSize: size$y.sm,
|
|
"& .material-icon, .material-icons-round, svg": {
|
|
fontSize: `${pxToRem$1(22)} !important`,
|
|
},
|
|
},
|
|
primary: {
|
|
backgroundColor: info$k.main,
|
|
"&:hover": {
|
|
backgroundColor: info$k.main,
|
|
},
|
|
"&:focus:not(:hover)": {
|
|
backgroundColor: info$k.focus,
|
|
},
|
|
},
|
|
secondary: {
|
|
backgroundColor: secondary$5.main,
|
|
"&:hover": {
|
|
backgroundColor: secondary$5.main,
|
|
},
|
|
"&:focus:not(:hover)": {
|
|
backgroundColor: secondary$5.focus,
|
|
},
|
|
},
|
|
};
|
|
|
|
/**
|
|
=========================================================
|
|
* 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 { transparent: transparent$p, light: light$9, info: info$j, secondary: secondary$4 } = colors$1;
|
|
const { size: size$x } = typography$1;
|
|
const outlined$1 = {
|
|
base: {
|
|
minHeight: pxToRem$1(40),
|
|
color: light$9.main,
|
|
borderColor: light$9.main,
|
|
padding: `${pxToRem$1(10)} ${pxToRem$1(24)}`,
|
|
"&:hover": {
|
|
opacity: 0.75,
|
|
backgroundColor: transparent$p.main,
|
|
},
|
|
"& .material-icon, .material-icons-round, svg": {
|
|
fontSize: `${pxToRem$1(16)} !important`,
|
|
},
|
|
},
|
|
small: {
|
|
minHeight: pxToRem$1(32),
|
|
padding: `${pxToRem$1(6)} ${pxToRem$1(16)}`,
|
|
fontSize: size$x.xs,
|
|
"& .material-icon, .material-icons-round, svg": {
|
|
fontSize: `${pxToRem$1(12)} !important`,
|
|
},
|
|
},
|
|
large: {
|
|
minHeight: pxToRem$1(47),
|
|
padding: `${pxToRem$1(12)} ${pxToRem$1(28)}`,
|
|
fontSize: size$x.sm,
|
|
"& .material-icon, .material-icons-round, svg": {
|
|
fontSize: `${pxToRem$1(22)} !important`,
|
|
},
|
|
},
|
|
primary: {
|
|
backgroundColor: transparent$p.main,
|
|
borderColor: info$j.main,
|
|
"&:hover": {
|
|
backgroundColor: transparent$p.main,
|
|
},
|
|
},
|
|
secondary: {
|
|
backgroundColor: transparent$p.main,
|
|
borderColor: secondary$4.main,
|
|
"&:hover": {
|
|
backgroundColor: transparent$p.main,
|
|
},
|
|
},
|
|
};
|
|
|
|
/**
|
|
=========================================================
|
|
* 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 { text: text$d, info: info$i, secondary: secondary$3, transparent: transparent$o } = colors$1;
|
|
const { size: size$w } = typography$1;
|
|
const buttonText$1 = {
|
|
base: {
|
|
backgroundColor: transparent$o.main,
|
|
minHeight: pxToRem$1(40),
|
|
color: text$d.main,
|
|
boxShadow: "none",
|
|
padding: `${pxToRem$1(10)} ${pxToRem$1(24)}`,
|
|
"&:hover": {
|
|
backgroundColor: transparent$o.main,
|
|
boxShadow: "none",
|
|
},
|
|
"&:focus": {
|
|
boxShadow: "none",
|
|
},
|
|
"&:active, &:active:focus, &:active:hover": {
|
|
opacity: 0.85,
|
|
boxShadow: "none",
|
|
},
|
|
"&:disabled": {
|
|
boxShadow: "none",
|
|
},
|
|
"& .material-icon, .material-icons-round, svg": {
|
|
fontSize: `${pxToRem$1(16)} !important`,
|
|
},
|
|
},
|
|
small: {
|
|
minHeight: pxToRem$1(32),
|
|
padding: `${pxToRem$1(6)} ${pxToRem$1(16)}`,
|
|
fontSize: size$w.xs,
|
|
"& .material-icon, .material-icons-round, svg": {
|
|
fontSize: `${pxToRem$1(12)} !important`,
|
|
},
|
|
},
|
|
large: {
|
|
minHeight: pxToRem$1(47),
|
|
padding: `${pxToRem$1(12)} ${pxToRem$1(28)}`,
|
|
fontSize: size$w.sm,
|
|
"& .material-icon, .material-icons-round, svg": {
|
|
fontSize: `${pxToRem$1(22)} !important`,
|
|
},
|
|
},
|
|
primary: {
|
|
color: info$i.main,
|
|
"&:hover": {
|
|
color: info$i.main,
|
|
},
|
|
"&:focus:not(:hover)": {
|
|
color: info$i.focus,
|
|
boxShadow: "none",
|
|
},
|
|
},
|
|
secondary: {
|
|
color: secondary$3.main,
|
|
"&:hover": {
|
|
color: secondary$3.main,
|
|
},
|
|
"&:focus:not(:hover)": {
|
|
color: secondary$3.focus,
|
|
boxShadow: "none",
|
|
},
|
|
},
|
|
};
|
|
|
|
/**
|
|
=========================================================
|
|
* 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 button$1 = {
|
|
defaultProps: {
|
|
disableRipple: false,
|
|
},
|
|
styleOverrides: {
|
|
root: { ...root$1 },
|
|
contained: { ...contained$1.base },
|
|
containedSizeSmall: { ...contained$1.small },
|
|
containedSizeLarge: { ...contained$1.large },
|
|
containedPrimary: { ...contained$1.primary },
|
|
containedSecondary: { ...contained$1.secondary },
|
|
outlined: { ...outlined$1.base },
|
|
outlinedSizeSmall: { ...outlined$1.small },
|
|
outlinedSizeLarge: { ...outlined$1.large },
|
|
outlinedPrimary: { ...outlined$1.primary },
|
|
outlinedSecondary: { ...outlined$1.secondary },
|
|
text: { ...buttonText$1.base },
|
|
textSizeSmall: { ...buttonText$1.small },
|
|
textSizeLarge: { ...buttonText$1.large },
|
|
textPrimary: { ...buttonText$1.primary },
|
|
textSecondary: { ...buttonText$1.secondary },
|
|
},
|
|
};
|
|
|
|
/**
|
|
=========================================================
|
|
* 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 { transparent: transparent$n } = colors$1;
|
|
const iconButton$1 = {
|
|
styleOverrides: {
|
|
root: {
|
|
"&:hover": {
|
|
backgroundColor: transparent$n.main,
|
|
},
|
|
},
|
|
},
|
|
};
|
|
|
|
/**
|
|
=========================================================
|
|
* 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 { info: info$h, inputBorderColor: inputBorderColor$3, dark: dark$c } = colors$1;
|
|
const { size: size$v } = typography$1;
|
|
const { borderWidth: borderWidth$g } = borders$1;
|
|
const input$1 = {
|
|
styleOverrides: {
|
|
root: {
|
|
fontSize: size$v.sm,
|
|
color: dark$c.main,
|
|
"&:hover:not(.Mui-disabled):before": {
|
|
borderBottom: `${borderWidth$g[1]} solid ${inputBorderColor$3}`,
|
|
},
|
|
"&:before": {
|
|
borderColor: inputBorderColor$3,
|
|
},
|
|
"&:after": {
|
|
borderColor: info$h.main,
|
|
},
|
|
},
|
|
},
|
|
};
|
|
|
|
/**
|
|
=========================================================
|
|
* 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 { text: text$c, info: info$g } = colors$1;
|
|
const { size: size$u } = typography$1;
|
|
const inputLabel$1 = {
|
|
styleOverrides: {
|
|
root: {
|
|
fontSize: size$u.sm,
|
|
color: text$c.main,
|
|
lineHeight: 0.9,
|
|
"&.Mui-focused": {
|
|
color: info$g.main,
|
|
},
|
|
"&.MuiInputLabel-shrink": {
|
|
lineHeight: 1.5,
|
|
fontSize: size$u.md,
|
|
"~ .MuiInputBase-root .MuiOutlinedInput-notchedOutline legend": {
|
|
fontSize: "0.85em",
|
|
},
|
|
},
|
|
},
|
|
sizeSmall: {
|
|
fontSize: size$u.xs,
|
|
lineHeight: 1.625,
|
|
"&.MuiInputLabel-shrink": {
|
|
lineHeight: 1.6,
|
|
fontSize: size$u.sm,
|
|
"~ .MuiInputBase-root .MuiOutlinedInput-notchedOutline legend": {
|
|
fontSize: "0.72em",
|
|
},
|
|
},
|
|
},
|
|
},
|
|
};
|
|
|
|
/**
|
|
=========================================================
|
|
* 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 { inputBorderColor: inputBorderColor$2, info: info$f, grey: grey$9, transparent: transparent$m } = colors$1;
|
|
const { borderRadius: borderRadius$x } = borders$1;
|
|
const { size: size$t } = typography$1;
|
|
const inputOutlined$1 = {
|
|
styleOverrides: {
|
|
root: {
|
|
backgroundColor: transparent$m.main,
|
|
fontSize: size$t.sm,
|
|
borderRadius: borderRadius$x.md,
|
|
"&:hover .MuiOutlinedInput-notchedOutline": {
|
|
borderColor: inputBorderColor$2,
|
|
},
|
|
"&.Mui-focused": {
|
|
"& .MuiOutlinedInput-notchedOutline": {
|
|
borderColor: info$f.main,
|
|
},
|
|
},
|
|
},
|
|
notchedOutline: {
|
|
borderColor: inputBorderColor$2,
|
|
},
|
|
input: {
|
|
color: grey$9[700],
|
|
padding: pxToRem$1(12),
|
|
backgroundColor: transparent$m.main,
|
|
},
|
|
inputSizeSmall: {
|
|
fontSize: size$t.xs,
|
|
padding: pxToRem$1(10),
|
|
},
|
|
multiline: {
|
|
color: grey$9[700],
|
|
padding: 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 { transparent: transparent$l } = colors$1;
|
|
const textField$1 = {
|
|
styleOverrides: {
|
|
root: {
|
|
backgroundColor: transparent$l.main,
|
|
},
|
|
},
|
|
};
|
|
|
|
/**
|
|
=========================================================
|
|
* 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 { lg: lg$5 } = boxShadows$1;
|
|
const { size: size$s } = typography$1;
|
|
const { text: text$b, white: white$t } = colors$1;
|
|
const { borderRadius: borderRadius$w } = borders$1;
|
|
const menu$1 = {
|
|
defaultProps: {
|
|
disableAutoFocusItem: true,
|
|
},
|
|
styleOverrides: {
|
|
paper: {
|
|
minWidth: pxToRem$1(160),
|
|
boxShadow: lg$5,
|
|
padding: `${pxToRem$1(16)} ${pxToRem$1(8)}`,
|
|
fontSize: size$s.sm,
|
|
color: text$b.main,
|
|
textAlign: "left",
|
|
backgroundColor: `${white$t.main} !important`,
|
|
borderRadius: borderRadius$w.md,
|
|
},
|
|
},
|
|
};
|
|
|
|
/**
|
|
=========================================================
|
|
* 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 { light: light$8, text: text$a, dark: dark$b } = colors$1;
|
|
const { borderRadius: borderRadius$v } = borders$1;
|
|
const { size: size$r } = typography$1;
|
|
const menuItem$2 = {
|
|
styleOverrides: {
|
|
root: {
|
|
minWidth: pxToRem$1(160),
|
|
minHeight: "unset",
|
|
padding: `${pxToRem$1(4.8)} ${pxToRem$1(16)}`,
|
|
borderRadius: borderRadius$v.md,
|
|
fontSize: size$r.sm,
|
|
color: text$a.main,
|
|
transition: "background-color 300ms ease, color 300ms ease",
|
|
"&:hover, &:focus, &.Mui-selected, &.Mui-selected:hover, &.Mui-selected:focus": {
|
|
backgroundColor: light$8.main,
|
|
color: dark$b.main,
|
|
},
|
|
},
|
|
},
|
|
};
|
|
|
|
/**
|
|
=========================================================
|
|
* 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 { white: white$s, gradients: gradients$8, grey: grey$8, transparent: transparent$k } = colors$1;
|
|
const { borderWidth: borderWidth$f } = borders$1;
|
|
const { md: md$9 } = boxShadows$1;
|
|
const switchButton$1 = {
|
|
defaultProps: {
|
|
disableRipple: false,
|
|
},
|
|
styleOverrides: {
|
|
switchBase: {
|
|
color: gradients$8.dark.main,
|
|
"&:hover": {
|
|
backgroundColor: transparent$k.main,
|
|
},
|
|
"&.Mui-checked": {
|
|
color: gradients$8.dark.main,
|
|
"&:hover": {
|
|
backgroundColor: transparent$k.main,
|
|
},
|
|
"& .MuiSwitch-thumb": {
|
|
borderColor: `${gradients$8.dark.main} !important`,
|
|
},
|
|
"& + .MuiSwitch-track": {
|
|
backgroundColor: `${gradients$8.dark.main} !important`,
|
|
borderColor: `${gradients$8.dark.main} !important`,
|
|
opacity: 1,
|
|
},
|
|
},
|
|
"&.Mui-disabled + .MuiSwitch-track": {
|
|
opacity: "0.3 !important",
|
|
},
|
|
"&.Mui-focusVisible .MuiSwitch-thumb": {
|
|
backgroundImage: linearGradient$1(gradients$8.info.main, gradients$8.info.state),
|
|
},
|
|
},
|
|
thumb: {
|
|
backgroundColor: white$s.main,
|
|
boxShadow: md$9,
|
|
border: `${borderWidth$f[1]} solid ${grey$8[400]}`,
|
|
},
|
|
track: {
|
|
width: pxToRem$1(32),
|
|
height: pxToRem$1(15),
|
|
backgroundColor: grey$8[400],
|
|
border: `${borderWidth$f[1]} solid ${grey$8[400]}`,
|
|
opacity: 1,
|
|
},
|
|
checked: {},
|
|
},
|
|
};
|
|
|
|
/**
|
|
=========================================================
|
|
* 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 { dark: dark$a, transparent: transparent$j, white: white$r } = colors$1;
|
|
const divider$1 = {
|
|
styleOverrides: {
|
|
root: {
|
|
backgroundColor: transparent$j.main,
|
|
backgroundImage: `linear-gradient(to right, ${rgba$1(dark$a.main, 0)}, ${rgba$1(dark$a.main, 0.4)}, ${rgba$1(dark$a.main, 0)}) !important`,
|
|
height: pxToRem$1(1),
|
|
margin: `${pxToRem$1(16)} 0`,
|
|
borderBottom: "none",
|
|
opacity: 0.25,
|
|
},
|
|
vertical: {
|
|
backgroundColor: transparent$j.main,
|
|
backgroundImage: `linear-gradient(to bottom, ${rgba$1(dark$a.main, 0)}, ${rgba$1(dark$a.main, 0.4)}, ${rgba$1(dark$a.main, 0)}) !important`,
|
|
width: pxToRem$1(1),
|
|
height: "100%",
|
|
margin: `0 ${pxToRem$1(16)}`,
|
|
borderRight: "none",
|
|
},
|
|
light: {
|
|
backgroundColor: transparent$j.main,
|
|
backgroundImage: `linear-gradient(to right, ${rgba$1(white$r.main, 0)}, ${white$r.main}, ${rgba$1(white$r.main, 0)}) !important`,
|
|
"&.MuiDivider-vertical": {
|
|
backgroundImage: `linear-gradient(to bottom, ${rgba$1(white$r.main, 0)}, ${white$r.main}, ${rgba$1(white$r.main, 0)}) !important`,
|
|
},
|
|
},
|
|
},
|
|
};
|
|
|
|
/**
|
|
=========================================================
|
|
* 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 { white: white$q } = colors$1;
|
|
const { md: md$8 } = boxShadows$1;
|
|
const { borderRadius: borderRadius$u } = borders$1;
|
|
const tableContainer$1 = {
|
|
styleOverrides: {
|
|
root: {
|
|
backgroundColor: white$q.main,
|
|
boxShadow: md$8,
|
|
borderRadius: borderRadius$u.xl,
|
|
},
|
|
},
|
|
};
|
|
|
|
/**
|
|
=========================================================
|
|
* 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 { borderRadius: borderRadius$t } = borders$1;
|
|
const tableHead$1 = {
|
|
styleOverrides: {
|
|
root: {
|
|
display: "block",
|
|
padding: `${pxToRem$1(16)} ${pxToRem$1(16)} 0 ${pxToRem$1(16)}`,
|
|
borderRadius: `${borderRadius$t.xl} ${borderRadius$t.xl} 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 { borderWidth: borderWidth$e } = borders$1;
|
|
const { light: light$7 } = colors$1;
|
|
const tableCell$1 = {
|
|
styleOverrides: {
|
|
root: {
|
|
padding: `${pxToRem$1(12)} ${pxToRem$1(16)}`,
|
|
borderBottom: `${borderWidth$e[1]} solid ${light$7.main}`,
|
|
},
|
|
},
|
|
};
|
|
|
|
/**
|
|
=========================================================
|
|
* 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 { borderRadius: borderRadius$s } = borders$1;
|
|
const { light: light$6 } = colors$1;
|
|
const linearProgress$1 = {
|
|
styleOverrides: {
|
|
root: {
|
|
height: pxToRem$1(6),
|
|
borderRadius: borderRadius$s.md,
|
|
overflow: "visible",
|
|
position: "relative",
|
|
},
|
|
colorPrimary: {
|
|
backgroundColor: light$6.main,
|
|
},
|
|
colorSecondary: {
|
|
backgroundColor: light$6.main,
|
|
},
|
|
bar: {
|
|
height: pxToRem$1(6),
|
|
borderRadius: borderRadius$s.sm,
|
|
position: "absolute",
|
|
transform: `translate(0, 0) !important`,
|
|
transition: "width 0.6s ease !important",
|
|
},
|
|
},
|
|
};
|
|
|
|
/**
|
|
=========================================================
|
|
* 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 { grey: grey$7 } = colors$1;
|
|
const { size: size$q } = typography$1;
|
|
const breadcrumbs$1 = {
|
|
styleOverrides: {
|
|
li: {
|
|
lineHeight: 0,
|
|
},
|
|
separator: {
|
|
fontSize: size$q.sm,
|
|
color: grey$7[600],
|
|
},
|
|
},
|
|
};
|
|
|
|
/**
|
|
=========================================================
|
|
* 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 { grey: grey$6, white: white$p, black: black$5, info: info$e } = colors$1;
|
|
const { borderRadius: borderRadius$r, borderWidth: borderWidth$d } = borders$1;
|
|
const { sliderBoxShadow: sliderBoxShadow$1 } = boxShadows$1;
|
|
const slider$1 = {
|
|
styleOverrides: {
|
|
root: {
|
|
width: "100%",
|
|
"& .MuiSlider-active, & .Mui-focusVisible": {
|
|
boxShadow: "none !important",
|
|
},
|
|
"& .MuiSlider-valueLabel": {
|
|
color: black$5.main,
|
|
},
|
|
},
|
|
rail: {
|
|
height: pxToRem$1(2),
|
|
background: grey$6[200],
|
|
borderRadius: borderRadius$r.sm,
|
|
opacity: 1,
|
|
},
|
|
track: {
|
|
background: info$e.main,
|
|
height: pxToRem$1(2),
|
|
position: "relative",
|
|
border: "none",
|
|
borderRadius: borderRadius$r.lg,
|
|
zIndex: 1,
|
|
},
|
|
thumb: {
|
|
width: pxToRem$1(14),
|
|
height: pxToRem$1(14),
|
|
backgroundColor: white$p.main,
|
|
zIndex: 10,
|
|
boxShadow: sliderBoxShadow$1.thumb,
|
|
border: `${borderWidth$d[1]} solid ${info$e.main}`,
|
|
transition: "all 200ms linear",
|
|
"&:hover": {
|
|
boxShadow: "none",
|
|
},
|
|
"&:active": {
|
|
transform: "translate(-50%, -50%) scale(1.4)",
|
|
},
|
|
"&.Mui-active": { boxShadow: boxShadow$1([0, 0], [0, 14], info$e.main, 0.16) },
|
|
},
|
|
},
|
|
};
|
|
|
|
/**
|
|
=========================================================
|
|
* 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 { borderRadius: borderRadius$q } = borders$1;
|
|
const avatar$1 = {
|
|
styleOverrides: {
|
|
root: {
|
|
transition: "all 200ms ease-in-out",
|
|
},
|
|
rounded: {
|
|
borderRadius: borderRadius$q.lg,
|
|
},
|
|
img: {
|
|
height: "auto",
|
|
},
|
|
},
|
|
};
|
|
|
|
/**
|
|
=========================================================
|
|
* 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 { black: black$4, light: light$5 } = colors$1;
|
|
const { size: size$p, fontWeightRegular: fontWeightRegular$5 } = typography$1;
|
|
const { borderRadius: borderRadius$p } = borders$1;
|
|
const tooltip$1 = {
|
|
defaultProps: {
|
|
arrow: true,
|
|
TransitionComponent: Fade,
|
|
},
|
|
styleOverrides: {
|
|
tooltip: {
|
|
maxWidth: pxToRem$1(200),
|
|
backgroundColor: black$4.main,
|
|
color: light$5.main,
|
|
fontSize: size$p.sm,
|
|
fontWeight: fontWeightRegular$5,
|
|
textAlign: "center",
|
|
borderRadius: borderRadius$p.md,
|
|
opacity: 0.7,
|
|
padding: `${pxToRem$1(5)} ${pxToRem$1(8)} ${pxToRem$1(4)}`,
|
|
},
|
|
arrow: {
|
|
color: black$4.main,
|
|
},
|
|
},
|
|
};
|
|
|
|
/**
|
|
=========================================================
|
|
* 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 appBar$1 = {
|
|
defaultProps: {
|
|
color: "transparent",
|
|
},
|
|
styleOverrides: {
|
|
root: {
|
|
boxShadow: "none",
|
|
},
|
|
},
|
|
};
|
|
|
|
/**
|
|
=========================================================
|
|
* 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 { grey: grey$5, white: white$o } = colors$1;
|
|
const { borderRadius: borderRadius$o } = borders$1;
|
|
const { tabsBoxShadow } = boxShadows$1;
|
|
const tabs$2 = {
|
|
styleOverrides: {
|
|
root: {
|
|
position: "relative",
|
|
backgroundColor: grey$5[100],
|
|
borderRadius: borderRadius$o.xl,
|
|
minHeight: "unset",
|
|
padding: pxToRem$1(4),
|
|
},
|
|
flexContainer: {
|
|
height: "100%",
|
|
position: "relative",
|
|
zIndex: 10,
|
|
},
|
|
fixed: {
|
|
overflow: "unset !important",
|
|
overflowX: "unset !important",
|
|
},
|
|
vertical: {
|
|
"& .MuiTabs-indicator": {
|
|
width: "100%",
|
|
},
|
|
},
|
|
indicator: {
|
|
height: "100%",
|
|
borderRadius: borderRadius$o.lg,
|
|
backgroundColor: white$o.main,
|
|
boxShadow: tabsBoxShadow.indicator,
|
|
transition: "all 500ms ease",
|
|
},
|
|
},
|
|
};
|
|
|
|
/**
|
|
=========================================================
|
|
* 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 { size: size$o, fontWeightRegular: fontWeightRegular$4 } = typography$1;
|
|
const { borderRadius: borderRadius$n } = borders$1;
|
|
const { dark: dark$9 } = colors$1;
|
|
const tab$1 = {
|
|
styleOverrides: {
|
|
root: {
|
|
display: "flex",
|
|
alignItems: "center",
|
|
flexDirection: "row",
|
|
flex: "1 1 auto",
|
|
textAlign: "center",
|
|
maxWidth: "unset !important",
|
|
minWidth: "unset !important",
|
|
minHeight: "unset !important",
|
|
fontSize: size$o.md,
|
|
fontWeight: fontWeightRegular$4,
|
|
textTransform: "none",
|
|
lineHeight: "inherit",
|
|
padding: pxToRem$1(4),
|
|
borderRadius: borderRadius$n.lg,
|
|
color: `${dark$9.main} !important`,
|
|
opacity: "1 !important",
|
|
"& .material-icons, .material-icons-round": {
|
|
marginBottom: "0 !important",
|
|
marginRight: pxToRem$1(6),
|
|
},
|
|
"& svg": {
|
|
marginBottom: "0 !important",
|
|
marginRight: pxToRem$1(6),
|
|
},
|
|
},
|
|
labelIcon: {
|
|
paddingTop: pxToRem$1(4),
|
|
},
|
|
},
|
|
};
|
|
|
|
/**
|
|
=========================================================
|
|
* 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 { transparent: transparent$i, gradients: gradients$7 } = colors$1;
|
|
const { borderRadius: borderRadius$m } = borders$1;
|
|
const { colored: colored$1 } = boxShadows$1;
|
|
const stepper$1 = {
|
|
styleOverrides: {
|
|
root: {
|
|
background: linearGradient$1(gradients$7.info.main, gradients$7.info.state),
|
|
padding: `${pxToRem$1(24)} 0 ${pxToRem$1(16)}`,
|
|
borderRadius: borderRadius$m.lg,
|
|
boxShadow: colored$1.info,
|
|
"&.MuiPaper-root": {
|
|
backgroundColor: transparent$i.main,
|
|
},
|
|
},
|
|
},
|
|
};
|
|
|
|
/**
|
|
=========================================================
|
|
* 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 step$1 = {
|
|
styleOverrides: {
|
|
root: {
|
|
padding: `0 ${pxToRem$1(6)}`,
|
|
},
|
|
},
|
|
};
|
|
|
|
/**
|
|
=========================================================
|
|
* 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 { white: white$n } = colors$1;
|
|
const { borderWidth: borderWidth$c } = borders$1;
|
|
const stepConnector$1 = {
|
|
styleOverrides: {
|
|
root: {
|
|
color: "#9fc9ff",
|
|
transition: "all 200ms linear",
|
|
"&.Mui-active": {
|
|
color: white$n.main,
|
|
},
|
|
"&.Mui-completed": {
|
|
color: white$n.main,
|
|
},
|
|
},
|
|
alternativeLabel: {
|
|
top: "14%",
|
|
left: "-50%",
|
|
right: "50%",
|
|
},
|
|
line: {
|
|
borderWidth: `${borderWidth$c[2]} !important`,
|
|
borderColor: "currentColor",
|
|
opacity: 0.5,
|
|
},
|
|
},
|
|
};
|
|
|
|
/**
|
|
=========================================================
|
|
* 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 { size: size$n, fontWeightRegular: fontWeightRegular$3 } = typography$1;
|
|
const { white: white$m } = colors$1;
|
|
const stepLabel$1 = {
|
|
styleOverrides: {
|
|
label: {
|
|
marginTop: `${pxToRem$1(8)} !important`,
|
|
fontWeight: fontWeightRegular$3,
|
|
fontSize: size$n.xs,
|
|
color: "#9fc9ff",
|
|
textTransform: "uppercase",
|
|
"&.Mui-active": {
|
|
fontWeight: `${fontWeightRegular$3} !important`,
|
|
color: `${rgba$1(white$m.main, 0.8)} !important`,
|
|
},
|
|
"&.Mui-completed": {
|
|
fontWeight: `${fontWeightRegular$3} !important`,
|
|
color: `${rgba$1(white$m.main, 0.8)} !important`,
|
|
},
|
|
},
|
|
},
|
|
};
|
|
|
|
/**
|
|
=========================================================
|
|
* 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 { white: white$l } = colors$1;
|
|
const stepIcon$1 = {
|
|
styleOverrides: {
|
|
root: {
|
|
background: "#9fc9ff",
|
|
fill: "#9fc9ff",
|
|
stroke: "#9fc9ff",
|
|
strokeWidth: pxToRem$1(10),
|
|
width: pxToRem$1(13),
|
|
height: pxToRem$1(13),
|
|
borderRadius: "50%",
|
|
zIndex: 99,
|
|
transition: "all 200ms linear",
|
|
"&.Mui-active": {
|
|
background: white$l.main,
|
|
fill: white$l.main,
|
|
stroke: white$l.main,
|
|
borderColor: white$l.main,
|
|
boxShadow: boxShadow$1([0, 0], [0, 2], white$l.main, 1),
|
|
},
|
|
"&.Mui-completed": {
|
|
background: white$l.main,
|
|
fill: white$l.main,
|
|
stroke: white$l.main,
|
|
borderColor: white$l.main,
|
|
boxShadow: boxShadow$1([0, 0], [0, 2], white$l.main, 1),
|
|
},
|
|
},
|
|
},
|
|
};
|
|
|
|
/**
|
|
=========================================================
|
|
* 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 { transparent: transparent$h } = colors$1;
|
|
const select$1 = {
|
|
styleOverrides: {
|
|
select: {
|
|
display: "grid",
|
|
alignItems: "center",
|
|
padding: `0 ${pxToRem$1(12)} !important`,
|
|
"& .Mui-selected": {
|
|
backgroundColor: transparent$h.main,
|
|
},
|
|
},
|
|
selectMenu: {
|
|
background: "none",
|
|
height: "none",
|
|
minHeight: "none",
|
|
overflow: "unset",
|
|
},
|
|
icon: {
|
|
display: "none",
|
|
},
|
|
},
|
|
};
|
|
|
|
/**
|
|
=========================================================
|
|
* 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 { dark: dark$8 } = colors$1;
|
|
const { size: size$m, fontWeightBold: fontWeightBold$2 } = typography$1;
|
|
const formControlLabel$1 = {
|
|
styleOverrides: {
|
|
root: {
|
|
display: "block",
|
|
minHeight: pxToRem$1(24),
|
|
marginBottom: pxToRem$1(2),
|
|
},
|
|
label: {
|
|
display: "inline-block",
|
|
fontSize: size$m.sm,
|
|
fontWeight: fontWeightBold$2,
|
|
color: dark$8.main,
|
|
lineHeight: 1,
|
|
transform: `translateY(${pxToRem$1(1)})`,
|
|
marginLeft: pxToRem$1(4),
|
|
"&.Mui-disabled": {
|
|
color: dark$8.main,
|
|
},
|
|
},
|
|
},
|
|
};
|
|
|
|
/**
|
|
=========================================================
|
|
* 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 { text: text$9 } = colors$1;
|
|
const formLabel$1 = {
|
|
styleOverrides: {
|
|
root: {
|
|
color: text$9.main,
|
|
},
|
|
},
|
|
};
|
|
|
|
/**
|
|
=========================================================
|
|
* 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 { borderWidth: borderWidth$b, borderColor: borderColor$5 } = borders$1;
|
|
const { transparent: transparent$g, info: info$d } = colors$1;
|
|
const checkbox$1 = {
|
|
styleOverrides: {
|
|
root: {
|
|
"& .MuiSvgIcon-root": {
|
|
backgroundPosition: "center",
|
|
backgroundSize: "contain",
|
|
backgroundRepeat: "no-repeat",
|
|
width: pxToRem$1(20),
|
|
height: pxToRem$1(20),
|
|
color: transparent$g.main,
|
|
border: `${borderWidth$b[1]} solid ${borderColor$5}`,
|
|
borderRadius: pxToRem$1(5.6),
|
|
},
|
|
"&:hover": {
|
|
backgroundColor: transparent$g.main,
|
|
},
|
|
"&.Mui-focusVisible": {
|
|
border: `${borderWidth$b[2]} solid ${info$d.main} !important`,
|
|
},
|
|
},
|
|
colorPrimary: {
|
|
color: borderColor$5,
|
|
"&.Mui-checked": {
|
|
color: info$d.main,
|
|
"& .MuiSvgIcon-root": {
|
|
backgroundImage: `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -1 22 22'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M6 10l3 3l6-6'/%3e%3c/svg%3e"), ${linearGradient$1(info$d.main, info$d.main)}`,
|
|
borderColor: info$d.main,
|
|
},
|
|
},
|
|
},
|
|
colorSecondary: {
|
|
color: borderColor$5,
|
|
"& .MuiSvgIcon-root": {
|
|
color: info$d.main,
|
|
"&.Mui-checked": {
|
|
backgroundImage: `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -1 22 22'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M6 10l3 3l6-6'/%3e%3c/svg%3e"), ${linearGradient$1(info$d.main, info$d.main)}`,
|
|
borderColor: info$d.main,
|
|
},
|
|
},
|
|
},
|
|
},
|
|
};
|
|
|
|
/**
|
|
=========================================================
|
|
* 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 { borderWidth: borderWidth$a, borderColor: borderColor$4 } = borders$1;
|
|
const { transparent: transparent$f, info: info$c } = colors$1;
|
|
const radio$1 = {
|
|
styleOverrides: {
|
|
root: {
|
|
"& .MuiSvgIcon-root": {
|
|
width: pxToRem$1(20),
|
|
height: pxToRem$1(20),
|
|
color: transparent$f.main,
|
|
border: `${borderWidth$a[1]} solid ${borderColor$4}`,
|
|
borderRadius: "50%",
|
|
},
|
|
"&:after": {
|
|
transition: "opacity 250ms ease-in-out",
|
|
content: `""`,
|
|
position: "absolute",
|
|
width: pxToRem$1(14),
|
|
height: pxToRem$1(14),
|
|
borderRadius: "50%",
|
|
backgroundImage: linearGradient$1(info$c.main, info$c.main),
|
|
opacity: 0,
|
|
left: 0,
|
|
right: 0,
|
|
top: 0,
|
|
bottom: 0,
|
|
margin: "auto",
|
|
},
|
|
"&:hover": {
|
|
backgroundColor: transparent$f.main,
|
|
},
|
|
"&.Mui-focusVisible": {
|
|
border: `${borderWidth$a[2]} solid ${info$c.main} !important`,
|
|
},
|
|
},
|
|
colorPrimary: {
|
|
color: borderColor$4,
|
|
"&.Mui-checked": {
|
|
color: info$c.main,
|
|
"& .MuiSvgIcon-root": {
|
|
borderColor: info$c.main,
|
|
},
|
|
"&:after": {
|
|
opacity: 1,
|
|
},
|
|
},
|
|
},
|
|
colorSecondary: {
|
|
color: borderColor$4,
|
|
"&.Mui-checked": {
|
|
color: info$c.main,
|
|
"& .MuiSvgIcon-root": {
|
|
borderColor: info$c.main,
|
|
},
|
|
"&:after": {
|
|
opacity: 1,
|
|
},
|
|
},
|
|
},
|
|
},
|
|
};
|
|
|
|
/**
|
|
=========================================================
|
|
* 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 { lg: lg$4 } = boxShadows$1;
|
|
const { size: size$l } = typography$1;
|
|
const { text: text$8, white: white$k, transparent: transparent$e, light: light$4, dark: dark$7, gradients: gradients$6 } = colors$1;
|
|
const { borderRadius: borderRadius$l } = borders$1;
|
|
const autocomplete = {
|
|
styleOverrides: {
|
|
popper: {
|
|
boxShadow: lg$4,
|
|
padding: pxToRem$1(8),
|
|
fontSize: size$l.sm,
|
|
color: text$8.main,
|
|
textAlign: "left",
|
|
backgroundColor: `${white$k.main} !important`,
|
|
borderRadius: borderRadius$l.md,
|
|
},
|
|
paper: {
|
|
boxShadow: "none",
|
|
backgroundColor: transparent$e.main,
|
|
},
|
|
option: {
|
|
padding: `${pxToRem$1(4.8)} ${pxToRem$1(16)}`,
|
|
borderRadius: borderRadius$l.md,
|
|
fontSize: size$l.sm,
|
|
color: text$8.main,
|
|
transition: "background-color 300ms ease, color 300ms ease",
|
|
"&:hover, &:focus, &.Mui-selected, &.Mui-selected:hover, &.Mui-selected:focus": {
|
|
backgroundColor: light$4.main,
|
|
color: dark$7.main,
|
|
},
|
|
'&[aria-selected="true"]': {
|
|
backgroundColor: `${light$4.main} !important`,
|
|
color: `${dark$7.main} !important`,
|
|
},
|
|
},
|
|
noOptions: {
|
|
fontSize: size$l.sm,
|
|
color: text$8.main,
|
|
},
|
|
groupLabel: {
|
|
color: dark$7.main,
|
|
},
|
|
loading: {
|
|
fontSize: size$l.sm,
|
|
color: text$8.main,
|
|
},
|
|
tag: {
|
|
display: "flex",
|
|
alignItems: "center",
|
|
height: "auto",
|
|
padding: pxToRem$1(4),
|
|
backgroundColor: gradients$6.dark.state,
|
|
color: white$k.main,
|
|
"& .MuiChip-label": {
|
|
lineHeight: 1.2,
|
|
padding: `0 ${pxToRem$1(10)} 0 ${pxToRem$1(4)}`,
|
|
},
|
|
"& .MuiSvgIcon-root, & .MuiSvgIcon-root:hover, & .MuiSvgIcon-root:focus": {
|
|
color: white$k.main,
|
|
marginRight: 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 { info: info$b, white: white$j, gradients: gradients$5 } = colors$1;
|
|
const flatpickr$1 = {
|
|
".flatpickr-day:hover, .flatpickr-day:focus, .flatpickr-day.nextMonthDay:hover, .flatpickr-day.nextMonthDay:focus": {
|
|
background: rgba$1(info$b.main, 0.28),
|
|
border: "none",
|
|
},
|
|
".flatpickr-day.today": {
|
|
background: info$b.main,
|
|
color: white$j.main,
|
|
border: "none",
|
|
"&:hover, &:focus": {
|
|
background: `${info$b.focus} !important`,
|
|
},
|
|
},
|
|
".flatpickr-day.selected, .flatpickr-day.selected:hover, .flatpickr-day.nextMonthDay.selected, .flatpickr-day.nextMonthDay.selected:hover, .flatpickr-day.nextMonthDay.selected:focus": {
|
|
background: `${gradients$5.info.state} !important`,
|
|
color: white$j.main,
|
|
border: "none",
|
|
},
|
|
".flatpickr-months .flatpickr-next-month:hover svg, .flatpickr-months .flatpickr-prev-month:hover svg": {
|
|
color: `${info$b.main} !important`,
|
|
fill: `${info$b.main} !important`,
|
|
},
|
|
};
|
|
|
|
/**
|
|
=========================================================
|
|
* 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 { values: { sm: sm$1, md: md$7, lg: lg$3, xl: xl$1, xxl: xxl$3 }, } = breakpoints$1;
|
|
const SM$1 = `@media (min-width: ${sm$1}px)`;
|
|
const MD$1 = `@media (min-width: ${md$7}px)`;
|
|
const LG$1 = `@media (min-width: ${lg$3}px)`;
|
|
const XL$1 = `@media (min-width: ${xl$1}px)`;
|
|
const XXL$1 = `@media (min-width: ${xxl$3}px)`;
|
|
const sharedClasses$1 = {
|
|
paddingRight: `${pxToRem$1(24)} !important`,
|
|
paddingLeft: `${pxToRem$1(24)} !important`,
|
|
marginRight: "auto !important",
|
|
marginLeft: "auto !important",
|
|
width: "100% !important",
|
|
position: "relative",
|
|
};
|
|
const container$1 = {
|
|
[SM$1]: {
|
|
".MuiContainer-root": {
|
|
...sharedClasses$1,
|
|
maxWidth: "540px !important",
|
|
},
|
|
},
|
|
[MD$1]: {
|
|
".MuiContainer-root": {
|
|
...sharedClasses$1,
|
|
maxWidth: "720px !important",
|
|
},
|
|
},
|
|
[LG$1]: {
|
|
".MuiContainer-root": {
|
|
...sharedClasses$1,
|
|
maxWidth: "960px !important",
|
|
},
|
|
},
|
|
[XL$1]: {
|
|
".MuiContainer-root": {
|
|
...sharedClasses$1,
|
|
maxWidth: "1140px !important",
|
|
},
|
|
},
|
|
[XXL$1]: {
|
|
".MuiContainer-root": {
|
|
...sharedClasses$1,
|
|
maxWidth: "1320px !important",
|
|
},
|
|
},
|
|
};
|
|
|
|
/**
|
|
=========================================================
|
|
* 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 { transparent: transparent$d } = colors$1;
|
|
const { lg: lg$2 } = boxShadows$1;
|
|
const { borderRadius: borderRadius$k } = borders$1;
|
|
const popover$1 = {
|
|
styleOverrides: {
|
|
paper: {
|
|
backgroundColor: transparent$d.main,
|
|
boxShadow: lg$2,
|
|
padding: pxToRem$1(8),
|
|
borderRadius: borderRadius$k.md,
|
|
},
|
|
},
|
|
};
|
|
|
|
/**
|
|
=========================================================
|
|
* 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 buttonBase$1 = {
|
|
defaultProps: {
|
|
disableRipple: false,
|
|
},
|
|
};
|
|
|
|
/**
|
|
=========================================================
|
|
* 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 icon$1 = {
|
|
defaultProps: {
|
|
baseClassName: "material-icons-round",
|
|
fontSize: "inherit",
|
|
},
|
|
styleOverrides: {
|
|
fontSizeInherit: {
|
|
fontSize: "inherit !important",
|
|
},
|
|
fontSizeSmall: {
|
|
fontSize: `${pxToRem$1(20)} !important`,
|
|
},
|
|
fontSizeLarge: {
|
|
fontSize: `${pxToRem$1(36)} !important`,
|
|
},
|
|
},
|
|
};
|
|
|
|
/**
|
|
=========================================================
|
|
* 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 svgIcon$1 = {
|
|
defaultProps: {
|
|
fontSize: "inherit",
|
|
},
|
|
styleOverrides: {
|
|
fontSizeInherit: {
|
|
fontSize: "inherit !important",
|
|
},
|
|
fontSizeSmall: {
|
|
fontSize: `${pxToRem$1(20)} !important`,
|
|
},
|
|
fontSizeLarge: {
|
|
fontSize: `${pxToRem$1(36)} !important`,
|
|
},
|
|
},
|
|
};
|
|
|
|
/**
|
|
=========================================================
|
|
* 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 link$1 = {
|
|
defaultProps: {
|
|
underline: "none",
|
|
color: "inherit",
|
|
},
|
|
};
|
|
|
|
/**
|
|
=========================================================
|
|
* 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 { borderRadius: borderRadius$j } = borders$1;
|
|
const { xxl: xxl$2 } = boxShadows$1;
|
|
const dialog$1 = {
|
|
styleOverrides: {
|
|
paper: {
|
|
borderRadius: borderRadius$j.lg,
|
|
boxShadow: xxl$2,
|
|
},
|
|
paperFullScreen: {
|
|
borderRadius: 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 { size: size$k } = typography$1;
|
|
const dialogTitle$1 = {
|
|
styleOverrides: {
|
|
root: {
|
|
padding: pxToRem$1(16),
|
|
fontSize: size$k.xl,
|
|
},
|
|
},
|
|
};
|
|
|
|
/**
|
|
=========================================================
|
|
* 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 { size: size$j } = typography$1;
|
|
const { text: text$7 } = colors$1;
|
|
const { borderWidth: borderWidth$9, borderColor: borderColor$3 } = borders$1;
|
|
const dialogContent$1 = {
|
|
styleOverrides: {
|
|
root: {
|
|
padding: pxToRem$1(16),
|
|
fontSize: size$j.md,
|
|
color: text$7.main,
|
|
},
|
|
dividers: {
|
|
borderTop: `${borderWidth$9[1]} solid ${borderColor$3}`,
|
|
borderBottom: `${borderWidth$9[1]} solid ${borderColor$3}`,
|
|
},
|
|
},
|
|
};
|
|
|
|
/**
|
|
=========================================================
|
|
* 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 { size: size$i } = typography$1;
|
|
const { text: text$6 } = colors$1;
|
|
const dialogContentText$1 = {
|
|
styleOverrides: {
|
|
root: {
|
|
fontSize: size$i.md,
|
|
color: text$6.main,
|
|
},
|
|
},
|
|
};
|
|
|
|
/**
|
|
=========================================================
|
|
* 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 dialogActions$1 = {
|
|
styleOverrides: {
|
|
root: {
|
|
padding: pxToRem$1(16),
|
|
},
|
|
},
|
|
};
|
|
|
|
/**
|
|
=========================================================
|
|
* Material Dashboard 2 PRO React - v2.0.0
|
|
=========================================================
|
|
|
|
* Product Page: https://www.creative-tim.com/product/soft-ui-dashboard-pro-material-ui
|
|
* Copyright 2021 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.
|
|
*/
|
|
var theme = createTheme({
|
|
breakpoints: { ...breakpoints$1 },
|
|
palette: { ...colors$1 },
|
|
typography: { ...typography$1 },
|
|
boxShadows: { ...boxShadows$1 },
|
|
borders: { ...borders$1 },
|
|
functions: {
|
|
boxShadow: boxShadow$1,
|
|
hexToRgb: hexToRgb$1,
|
|
linearGradient: linearGradient$1,
|
|
pxToRem: pxToRem$1,
|
|
rgba: rgba$1,
|
|
},
|
|
components: {
|
|
MuiCssBaseline: {
|
|
styleOverrides: {
|
|
...globals$1,
|
|
...flatpickr$1,
|
|
...container$1,
|
|
},
|
|
},
|
|
MuiDrawer: { ...sidenav$1 },
|
|
MuiList: { ...list$1 },
|
|
MuiListItem: { ...listItem$1 },
|
|
MuiListItemText: { ...listItemText$1 },
|
|
MuiCard: { ...card$1 },
|
|
MuiCardMedia: { ...cardMedia$1 },
|
|
MuiCardContent: { ...cardContent$1 },
|
|
MuiButton: { ...button$1 },
|
|
MuiIconButton: { ...iconButton$1 },
|
|
MuiInput: { ...input$1 },
|
|
MuiInputLabel: { ...inputLabel$1 },
|
|
MuiOutlinedInput: { ...inputOutlined$1 },
|
|
MuiTextField: { ...textField$1 },
|
|
MuiMenu: { ...menu$1 },
|
|
MuiMenuItem: { ...menuItem$2 },
|
|
MuiSwitch: { ...switchButton$1 },
|
|
MuiDivider: { ...divider$1 },
|
|
MuiTableContainer: { ...tableContainer$1 },
|
|
MuiTableHead: { ...tableHead$1 },
|
|
MuiTableCell: { ...tableCell$1 },
|
|
MuiLinearProgress: { ...linearProgress$1 },
|
|
MuiBreadcrumbs: { ...breadcrumbs$1 },
|
|
MuiSlider: { ...slider$1 },
|
|
MuiAvatar: { ...avatar$1 },
|
|
MuiTooltip: { ...tooltip$1 },
|
|
MuiAppBar: { ...appBar$1 },
|
|
MuiTabs: { ...tabs$2 },
|
|
MuiTab: { ...tab$1 },
|
|
MuiStepper: { ...stepper$1 },
|
|
MuiStep: { ...step$1 },
|
|
MuiStepConnector: { ...stepConnector$1 },
|
|
MuiStepLabel: { ...stepLabel$1 },
|
|
MuiStepIcon: { ...stepIcon$1 },
|
|
MuiSelect: { ...select$1 },
|
|
MuiFormControlLabel: { ...formControlLabel$1 },
|
|
MuiFormLabel: { ...formLabel$1 },
|
|
MuiCheckbox: { ...checkbox$1 },
|
|
MuiRadio: { ...radio$1 },
|
|
MuiAutocomplete: { ...autocomplete },
|
|
MuiPopover: { ...popover$1 },
|
|
MuiButtonBase: { ...buttonBase$1 },
|
|
MuiIcon: { ...icon$1 },
|
|
MuiSvgIcon: { ...svgIcon$1 },
|
|
MuiLink: { ...link$1 },
|
|
MuiDialog: { ...dialog$1 },
|
|
MuiDialogTitle: { ...dialogTitle$1 },
|
|
MuiDialogContent: { ...dialogContent$1 },
|
|
MuiDialogContentText: { ...dialogContentText$1 },
|
|
MuiDialogActions: { ...dialogActions$1 },
|
|
},
|
|
});
|
|
|
|
/**
|
|
=========================================================
|
|
* Material Dashboard 2 PRO React - v2.0.0
|
|
=========================================================
|
|
|
|
* Product Page: https://www.creative-tim.com/product/soft-ui-dashboard-pro-material-ui
|
|
* Copyright 2021 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.
|
|
*/
|
|
var themeRTL = createTheme$1({
|
|
direction: "rtl",
|
|
breakpoints: { ...breakpoints$1 },
|
|
palette: { ...colors$1 },
|
|
typography: { ...typography$1 },
|
|
boxShadows: { ...boxShadows$1 },
|
|
borders: { ...borders$1 },
|
|
functions: {
|
|
boxShadow: boxShadow$1,
|
|
hexToRgb: hexToRgb$1,
|
|
linearGradient: linearGradient$1,
|
|
pxToRem: pxToRem$1,
|
|
rgba: rgba$1,
|
|
},
|
|
components: {
|
|
MuiCssBaseline: {
|
|
styleOverrides: {
|
|
...globals$1,
|
|
...flatpickr$1,
|
|
...container$1,
|
|
},
|
|
},
|
|
MuiDrawer: { ...sidenav$1 },
|
|
MuiList: { ...list$1 },
|
|
MuiListItem: { ...listItem$1 },
|
|
MuiListItemText: { ...listItemText$1 },
|
|
MuiCard: { ...card$1 },
|
|
MuiCardMedia: { ...cardMedia$1 },
|
|
MuiCardContent: { ...cardContent$1 },
|
|
MuiButton: { ...button$1 },
|
|
MuiIconButton: { ...iconButton$1 },
|
|
MuiInput: { ...input$1 },
|
|
MuiInputLabel: { ...inputLabel$1 },
|
|
MuiOutlinedInput: { ...inputOutlined$1 },
|
|
MuiTextField: { ...textField$1 },
|
|
MuiMenu: { ...menu$1 },
|
|
MuiMenuItem: { ...menuItem$2 },
|
|
MuiSwitch: { ...switchButton$1 },
|
|
MuiDivider: { ...divider$1 },
|
|
MuiTableContainer: { ...tableContainer$1 },
|
|
MuiTableHead: { ...tableHead$1 },
|
|
MuiTableCell: { ...tableCell$1 },
|
|
MuiLinearProgress: { ...linearProgress$1 },
|
|
MuiBreadcrumbs: { ...breadcrumbs$1 },
|
|
MuiSlider: { ...slider$1 },
|
|
MuiAvatar: { ...avatar$1 },
|
|
MuiTooltip: { ...tooltip$1 },
|
|
MuiAppBar: { ...appBar$1 },
|
|
MuiTabs: { ...tabs$2 },
|
|
MuiTab: { ...tab$1 },
|
|
MuiStepper: { ...stepper$1 },
|
|
MuiStep: { ...step$1 },
|
|
MuiStepConnector: { ...stepConnector$1 },
|
|
MuiStepLabel: { ...stepLabel$1 },
|
|
MuiStepIcon: { ...stepIcon$1 },
|
|
MuiSelect: { ...select$1 },
|
|
MuiFormControlLabel: { ...formControlLabel$1 },
|
|
MuiFormLabel: { ...formLabel$1 },
|
|
MuiCheckbox: { ...checkbox$1 },
|
|
MuiRadio: { ...radio$1 },
|
|
MuiAutocomplete: { ...autocomplete },
|
|
MuiPopover: { ...popover$1 },
|
|
MuiButtonBase: { ...buttonBase$1 },
|
|
MuiIcon: { ...icon$1 },
|
|
MuiSvgIcon: { ...svgIcon$1 },
|
|
MuiLink: { ...link$1 },
|
|
MuiDialog: { ...dialog$1 },
|
|
MuiDialogTitle: { ...dialogTitle$1 },
|
|
MuiDialogContent: { ...dialogContent$1 },
|
|
MuiDialogContentText: { ...dialogContentText$1 },
|
|
MuiDialogActions: { ...dialogActions$1 },
|
|
},
|
|
});
|
|
|
|
/**
|
|
=========================================================
|
|
* 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 colors = {
|
|
background: {
|
|
default: "#1a2035",
|
|
sidenav: "#1f283e",
|
|
card: "#202940",
|
|
},
|
|
text: {
|
|
main: "#ffffffcc",
|
|
focus: "#ffffffcc",
|
|
},
|
|
transparent: {
|
|
main: "transparent",
|
|
},
|
|
white: {
|
|
main: "#ffffff",
|
|
focus: "#ffffff",
|
|
},
|
|
black: {
|
|
light: "#000000",
|
|
main: "#000000",
|
|
focus: "#000000",
|
|
},
|
|
primary: {
|
|
main: "#e91e63",
|
|
focus: "#e91e63",
|
|
},
|
|
secondary: {
|
|
main: "#7b809a",
|
|
focus: "#8f93a9",
|
|
},
|
|
info: {
|
|
main: "#1A73E8",
|
|
focus: "#1662C4",
|
|
},
|
|
success: {
|
|
main: "#4CAF50",
|
|
focus: "#67bb6a",
|
|
},
|
|
warning: {
|
|
main: "#fb8c00",
|
|
focus: "#fc9d26",
|
|
},
|
|
error: {
|
|
main: "#F44335",
|
|
focus: "#f65f53",
|
|
},
|
|
light: {
|
|
main: "#f0f2f566",
|
|
focus: "#f0f2f566",
|
|
},
|
|
dark: {
|
|
main: "#344767",
|
|
focus: "#2c3c58",
|
|
},
|
|
grey: {
|
|
100: "#f8f9fa",
|
|
200: "#f0f2f5",
|
|
300: "#dee2e6",
|
|
400: "#ced4da",
|
|
500: "#adb5bd",
|
|
600: "#6c757d",
|
|
700: "#495057",
|
|
800: "#343a40",
|
|
900: "#212529",
|
|
},
|
|
gradients: {
|
|
primary: {
|
|
main: "#EC407A",
|
|
state: "#D81B60",
|
|
},
|
|
secondary: {
|
|
main: "#747b8a",
|
|
state: "#495361",
|
|
},
|
|
info: {
|
|
main: "#49a3f1",
|
|
state: "#1A73E8",
|
|
},
|
|
success: {
|
|
main: "#66BB6A",
|
|
state: "#43A047",
|
|
},
|
|
warning: {
|
|
main: "#FFA726",
|
|
state: "#FB8C00",
|
|
},
|
|
error: {
|
|
main: "#EF5350",
|
|
state: "#E53935",
|
|
},
|
|
light: {
|
|
main: "#EBEFF4",
|
|
state: "#CED4DA",
|
|
},
|
|
dark: {
|
|
main: "#323a54",
|
|
state: "#1a2035",
|
|
},
|
|
},
|
|
socialMediaColors: {
|
|
facebook: {
|
|
main: "#3b5998",
|
|
dark: "#344e86",
|
|
},
|
|
twitter: {
|
|
main: "#55acee",
|
|
dark: "#3ea1ec",
|
|
},
|
|
instagram: {
|
|
main: "#125688",
|
|
dark: "#0e456d",
|
|
},
|
|
linkedin: {
|
|
main: "#0077b5",
|
|
dark: "#00669c",
|
|
},
|
|
pinterest: {
|
|
main: "#cc2127",
|
|
dark: "#b21d22",
|
|
},
|
|
youtube: {
|
|
main: "#e52d27",
|
|
dark: "#d41f1a",
|
|
},
|
|
vimeo: {
|
|
main: "#1ab7ea",
|
|
dark: "#13a3d2",
|
|
},
|
|
slack: {
|
|
main: "#3aaf85",
|
|
dark: "#329874",
|
|
},
|
|
dribbble: {
|
|
main: "#ea4c89",
|
|
dark: "#e73177",
|
|
},
|
|
github: {
|
|
main: "#24292e",
|
|
dark: "#171a1d",
|
|
},
|
|
reddit: {
|
|
main: "#ff4500",
|
|
dark: "#e03d00",
|
|
},
|
|
tumblr: {
|
|
main: "#35465c",
|
|
dark: "#2a3749",
|
|
},
|
|
},
|
|
badgeColors: {
|
|
primary: {
|
|
background: "#f8b3ca",
|
|
text: "#cc084b",
|
|
},
|
|
secondary: {
|
|
background: "#d7d9e1",
|
|
text: "#6c757d",
|
|
},
|
|
info: {
|
|
background: "#aecef7",
|
|
text: "#095bc6",
|
|
},
|
|
success: {
|
|
background: "#bce2be",
|
|
text: "#339537",
|
|
},
|
|
warning: {
|
|
background: "#ffd59f",
|
|
text: "#c87000",
|
|
},
|
|
error: {
|
|
background: "#fcd3d0",
|
|
text: "#f61200",
|
|
},
|
|
light: {
|
|
background: "#ffffff",
|
|
text: "#c7d3de",
|
|
},
|
|
dark: {
|
|
background: "#8097bf",
|
|
text: "#1e2e4a",
|
|
},
|
|
},
|
|
coloredShadows: {
|
|
primary: "#e91e62",
|
|
secondary: "#110e0e",
|
|
info: "#00bbd4",
|
|
success: "#4caf4f",
|
|
warning: "#ff9900",
|
|
error: "#f44336",
|
|
light: "#adb5bd",
|
|
dark: "#404040",
|
|
},
|
|
inputBorderColor: "#d2d6da",
|
|
tabs: {
|
|
indicator: { boxShadow: "#ddd" },
|
|
},
|
|
};
|
|
|
|
/**
|
|
=========================================================
|
|
* 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.
|
|
*/
|
|
/**
|
|
* The base breakpoints for the Material Dashboard 2 PRO React TSUI Dashboard PRO Material.
|
|
* You can add new breakpoints using this file.
|
|
* You can customized the breakpoints for the entire Material Dashboard 2 PRO React TSUI Dashboard PRO Material using thie file.
|
|
*/
|
|
const breakpoints = {
|
|
values: {
|
|
xs: 0,
|
|
sm: 576,
|
|
md: 768,
|
|
lg: 992,
|
|
xl: 1200,
|
|
xxl: 1400,
|
|
},
|
|
};
|
|
|
|
/**
|
|
=========================================================
|
|
* 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.
|
|
*/
|
|
/**
|
|
The pxToRem() function helps you to convert a px unit into a rem unit,
|
|
*/
|
|
function pxToRem(number, baseNumber = 16) {
|
|
return `${number / baseNumber}rem`;
|
|
}
|
|
|
|
/**
|
|
=========================================================
|
|
* 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 { white: white$i } = colors;
|
|
const baseProperties = {
|
|
fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
|
|
fontWeightLighter: 100,
|
|
fontWeightLight: 300,
|
|
fontWeightRegular: 400,
|
|
fontWeightMedium: 600,
|
|
fontWeightBold: 700,
|
|
fontSizeXXS: pxToRem(10.4),
|
|
fontSizeXS: pxToRem(12),
|
|
fontSizeSM: pxToRem(14),
|
|
fontSizeMD: pxToRem(16),
|
|
fontSizeLG: pxToRem(18),
|
|
fontSizeXL: pxToRem(20),
|
|
fontSize2XL: pxToRem(24),
|
|
fontSize3XL: pxToRem(30),
|
|
};
|
|
const baseHeadingProperties = {
|
|
fontFamily: baseProperties.fontFamily,
|
|
color: white$i.main,
|
|
fontWeight: baseProperties.fontWeightBold,
|
|
};
|
|
const baseDisplayProperties = {
|
|
fontFamily: baseProperties.fontFamily,
|
|
color: white$i.main,
|
|
fontWeight: baseProperties.fontWeightLight,
|
|
lineHeight: 1.2,
|
|
};
|
|
const typography = {
|
|
fontFamily: baseProperties.fontFamily,
|
|
fontWeightLighter: baseProperties.fontWeightLighter,
|
|
fontWeightLight: baseProperties.fontWeightLight,
|
|
fontWeightRegular: baseProperties.fontWeightRegular,
|
|
fontWeightMedium: baseProperties.fontWeightMedium,
|
|
fontWeightBold: baseProperties.fontWeightBold,
|
|
h1: {
|
|
fontSize: pxToRem(48),
|
|
lineHeight: 1.25,
|
|
...baseHeadingProperties,
|
|
},
|
|
h2: {
|
|
fontSize: pxToRem(36),
|
|
lineHeight: 1.3,
|
|
...baseHeadingProperties,
|
|
},
|
|
h3: {
|
|
fontSize: pxToRem(30),
|
|
lineHeight: 1.375,
|
|
...baseHeadingProperties,
|
|
},
|
|
h4: {
|
|
fontSize: pxToRem(24),
|
|
lineHeight: 1.375,
|
|
...baseHeadingProperties,
|
|
},
|
|
h5: {
|
|
fontSize: pxToRem(20),
|
|
lineHeight: 1.375,
|
|
...baseHeadingProperties,
|
|
},
|
|
h6: {
|
|
fontSize: pxToRem(16),
|
|
lineHeight: 1.625,
|
|
...baseHeadingProperties,
|
|
},
|
|
subtitle1: {
|
|
fontFamily: baseProperties.fontFamily,
|
|
fontSize: baseProperties.fontSizeXL,
|
|
fontWeight: baseProperties.fontWeightLight,
|
|
lineHeight: 1.625,
|
|
},
|
|
subtitle2: {
|
|
fontFamily: baseProperties.fontFamily,
|
|
fontSize: baseProperties.fontSizeMD,
|
|
fontWeight: baseProperties.fontWeightLight,
|
|
lineHeight: 1.6,
|
|
},
|
|
body1: {
|
|
fontFamily: baseProperties.fontFamily,
|
|
fontSize: baseProperties.fontSizeXL,
|
|
fontWeight: baseProperties.fontWeightRegular,
|
|
lineHeight: 1.625,
|
|
},
|
|
body2: {
|
|
fontFamily: baseProperties.fontFamily,
|
|
fontSize: baseProperties.fontSizeMD,
|
|
fontWeight: baseProperties.fontWeightLight,
|
|
lineHeight: 1.6,
|
|
},
|
|
button: {
|
|
fontFamily: baseProperties.fontFamily,
|
|
fontSize: baseProperties.fontSizeSM,
|
|
fontWeight: baseProperties.fontWeightLight,
|
|
lineHeight: 1.5,
|
|
textTransform: "uppercase",
|
|
},
|
|
caption: {
|
|
fontFamily: baseProperties.fontFamily,
|
|
fontSize: baseProperties.fontSizeXS,
|
|
fontWeight: baseProperties.fontWeightLight,
|
|
lineHeight: 1.25,
|
|
},
|
|
overline: {
|
|
fontFamily: baseProperties.fontFamily,
|
|
},
|
|
d1: {
|
|
fontSize: pxToRem(80),
|
|
...baseDisplayProperties,
|
|
},
|
|
d2: {
|
|
fontSize: pxToRem(72),
|
|
...baseDisplayProperties,
|
|
},
|
|
d3: {
|
|
fontSize: pxToRem(64),
|
|
...baseDisplayProperties,
|
|
},
|
|
d4: {
|
|
fontSize: pxToRem(56),
|
|
...baseDisplayProperties,
|
|
},
|
|
d5: {
|
|
fontSize: pxToRem(48),
|
|
...baseDisplayProperties,
|
|
},
|
|
d6: {
|
|
fontSize: pxToRem(40),
|
|
...baseDisplayProperties,
|
|
},
|
|
size: {
|
|
xxs: baseProperties.fontSizeXXS,
|
|
xs: baseProperties.fontSizeXS,
|
|
sm: baseProperties.fontSizeSM,
|
|
md: baseProperties.fontSizeMD,
|
|
lg: baseProperties.fontSizeLG,
|
|
xl: baseProperties.fontSizeXL,
|
|
"2xl": baseProperties.fontSize2XL,
|
|
"3xl": baseProperties.fontSize3XL,
|
|
},
|
|
lineHeight: {
|
|
sm: 1.25,
|
|
md: 1.5,
|
|
lg: 2,
|
|
},
|
|
};
|
|
|
|
/**
|
|
=========================================================
|
|
* 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 boxShadow(offset, radius, color, opacity, inset = "") {
|
|
const [x, y] = offset;
|
|
const [blur, spread] = radius;
|
|
return `${inset} ${pxToRem$1(x)} ${pxToRem$1(y)} ${pxToRem$1(blur)} ${pxToRem$1(spread)} ${rgba$1(color, opacity)}`;
|
|
}
|
|
|
|
/**
|
|
=========================================================
|
|
* 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 { black: black$3, dark: dark$6, tabs: tabs$1, coloredShadows } = colors;
|
|
const boxShadows = {
|
|
xs: boxShadow([0, 2], [9, -5], black$3.main, 0.15),
|
|
sm: boxShadow([0, 5], [10, 0], black$3.main, 0.12),
|
|
md: `${boxShadow([0, 2], [2, 0], black$3.main, 0.14)}, ${boxShadow([0, 3], [1, -2], black$3.main, 0.2)}, ${boxShadow([0, 1], [5, 0], black$3.main, 0.12)}`,
|
|
lg: `${boxShadow([0, 10], [15, -3], black$3.main, 0.1)}, ${boxShadow([0, 4], [6, -2], black$3.main, 0.05)}`,
|
|
xl: `${boxShadow([0, 20], [25, -5], black$3.main, 0.1)}, ${boxShadow([0, 10], [10, -5], black$3.main, 0.04)}`,
|
|
xxl: boxShadow([0, 20], [27, 0], black$3.main, 0.05),
|
|
inset: boxShadow([0, 1], [2, 0], black$3.main, 0.075, "inset"),
|
|
colored: {
|
|
primary: `${boxShadow([0, 4], [20, 0], black$3.main, 0.14)}, ${boxShadow([0, 7], [10, -5], coloredShadows.primary, 0.4)}`,
|
|
secondary: `${boxShadow([0, 4], [20, 0], black$3.main, 0.14)}, ${boxShadow([0, 7], [10, -5], coloredShadows.secondary, 0.4)}`,
|
|
info: `${boxShadow([0, 4], [20, 0], black$3.main, 0.14)}, ${boxShadow([0, 7], [10, -5], coloredShadows.info, 0.4)}`,
|
|
success: `${boxShadow([0, 4], [20, 0], black$3.main, 0.14)}, ${boxShadow([0, 7], [10, -5], coloredShadows.success, 0.4)}`,
|
|
warning: `${boxShadow([0, 4], [20, 0], black$3.main, 0.14)}, ${boxShadow([0, 7], [10, -5], coloredShadows.warning, 0.4)}`,
|
|
error: `${boxShadow([0, 4], [20, 0], black$3.main, 0.14)}, ${boxShadow([0, 7], [10, -5], coloredShadows.error, 0.4)}`,
|
|
light: `${boxShadow([0, 4], [20, 0], black$3.main, 0.14)}, ${boxShadow([0, 7], [10, -5], coloredShadows.light, 0.4)}`,
|
|
dark: `${boxShadow([0, 4], [20, 0], black$3.main, 0.14)}, ${boxShadow([0, 7], [10, -5], coloredShadows.dark, 0.4)}`,
|
|
},
|
|
navbarBoxShadow: `${boxShadow([0, 0], [1, 1], dark$6.main, 0.9, "inset")}, ${boxShadow([0, 20], [27, 0], black$3.main, 0.05)}`,
|
|
sliderBoxShadow: {
|
|
thumb: boxShadow([0, 1], [13, 0], black$3.main, 0.2),
|
|
},
|
|
tabsBoxShadow: {
|
|
indicator: boxShadow([0, 1], [5, 1], tabs$1.indicator.boxShadow, 1),
|
|
},
|
|
};
|
|
|
|
/**
|
|
=========================================================
|
|
* 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 rgba(color, opacity) {
|
|
return `rgba(${hexToRgb$1(color)}, ${opacity})`;
|
|
}
|
|
|
|
/**
|
|
=========================================================
|
|
* 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 { white: white$h } = colors;
|
|
const borders = {
|
|
borderColor: rgba(white$h.main, 0.4),
|
|
borderWidth: {
|
|
0: 0,
|
|
1: pxToRem(1),
|
|
2: pxToRem(2),
|
|
3: pxToRem(3),
|
|
4: pxToRem(4),
|
|
5: pxToRem(5),
|
|
},
|
|
borderRadius: {
|
|
xs: pxToRem(1.6),
|
|
sm: pxToRem(2),
|
|
md: pxToRem(6),
|
|
lg: pxToRem(8),
|
|
xl: pxToRem(12),
|
|
xxl: pxToRem(16),
|
|
section: pxToRem(160),
|
|
},
|
|
};
|
|
|
|
/**
|
|
=========================================================
|
|
* 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 { info: info$a, dark: dark$5 } = colors;
|
|
const globals = {
|
|
html: {
|
|
scrollBehavior: "smooth",
|
|
},
|
|
"*, *::before, *::after": {
|
|
margin: 0,
|
|
padding: 0,
|
|
},
|
|
"a, a:link, a:visited": {
|
|
textDecoration: "none !important",
|
|
},
|
|
"a.link, .link, a.link:link, .link:link, a.link:visited, .link:visited": {
|
|
color: `${dark$5.main} !important`,
|
|
transition: "color 150ms ease-in !important",
|
|
},
|
|
"a.link:hover, .link:hover, a.link:focus, .link:focus": {
|
|
color: `${info$a.main} !important`,
|
|
},
|
|
};
|
|
|
|
/**
|
|
=========================================================
|
|
* 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 hexToRgb(color) {
|
|
return chroma(color).rgb().join(", ");
|
|
}
|
|
|
|
/**
|
|
=========================================================
|
|
* 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.
|
|
*/
|
|
/**
|
|
The linearGradient() function helps you to create a linear gradient color background
|
|
*/
|
|
function linearGradient(color, colorState, angle = 195) {
|
|
return `linear-gradient(${angle}deg, ${color}, ${colorState})`;
|
|
}
|
|
|
|
/**
|
|
=========================================================
|
|
* 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 { background: background$5 } = colors;
|
|
const { borderRadius: borderRadius$i } = borders;
|
|
const sidenav = {
|
|
styleOverrides: {
|
|
root: {
|
|
width: pxToRem(250),
|
|
whiteSpace: "nowrap",
|
|
border: "none",
|
|
},
|
|
paper: {
|
|
width: pxToRem(250),
|
|
backgroundColor: background$5.sidenav,
|
|
height: `calc(100vh - ${pxToRem(32)})`,
|
|
margin: pxToRem(16),
|
|
borderRadius: borderRadius$i.xl,
|
|
border: "none",
|
|
},
|
|
paperAnchorDockedLeft: {
|
|
borderRight: "none",
|
|
},
|
|
},
|
|
};
|
|
|
|
/**
|
|
=========================================================
|
|
* 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 list = {
|
|
styleOverrides: {
|
|
padding: {
|
|
paddingTop: 0,
|
|
paddingBottom: 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 listItem = {
|
|
defaultProps: {
|
|
disableGutters: true,
|
|
},
|
|
styleOverrides: {
|
|
root: {
|
|
paddingTop: 0,
|
|
paddingBottom: 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 listItemText = {
|
|
styleOverrides: {
|
|
root: {
|
|
marginTop: 0,
|
|
marginBottom: 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 { black: black$2, background: background$4 } = colors;
|
|
const { borderWidth: borderWidth$8, borderRadius: borderRadius$h } = borders;
|
|
const { md: md$6 } = boxShadows;
|
|
const card = {
|
|
styleOverrides: {
|
|
root: {
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
position: "relative",
|
|
minWidth: 0,
|
|
wordWrap: "break-word",
|
|
backgroundImage: "none",
|
|
backgroundColor: background$4.card,
|
|
backgroundClip: "border-box",
|
|
border: `${borderWidth$8[0]} solid ${rgba(black$2.main, 0.125)}`,
|
|
borderRadius: borderRadius$h.xl,
|
|
boxShadow: md$6,
|
|
overflow: "visible",
|
|
},
|
|
},
|
|
};
|
|
|
|
/**
|
|
=========================================================
|
|
* 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 { borderRadius: borderRadius$g } = borders;
|
|
const cardMedia = {
|
|
styleOverrides: {
|
|
root: {
|
|
borderRadius: borderRadius$g.xl,
|
|
margin: `${pxToRem(16)} ${pxToRem(16)} 0`,
|
|
},
|
|
media: {
|
|
width: "auto",
|
|
},
|
|
},
|
|
};
|
|
|
|
/**
|
|
=========================================================
|
|
* 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 cardContent = {
|
|
styleOverrides: {
|
|
root: {
|
|
marginTop: 0,
|
|
marginBottom: 0,
|
|
padding: `${pxToRem(8)} ${pxToRem(24)} ${pxToRem(24)}`,
|
|
},
|
|
},
|
|
};
|
|
|
|
/**
|
|
=========================================================
|
|
* 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 { fontWeightBold: fontWeightBold$1, size: size$h } = typography;
|
|
const { borderRadius: borderRadius$f } = borders;
|
|
const root = {
|
|
display: "inline-flex",
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
fontSize: size$h.xs,
|
|
fontWeight: fontWeightBold$1,
|
|
borderRadius: borderRadius$f.lg,
|
|
padding: `${pxToRem(6.302)} ${pxToRem(16.604)}`,
|
|
lineHeight: 1.4,
|
|
textAlign: "center",
|
|
textTransform: "uppercase",
|
|
userSelect: "none",
|
|
backgroundSize: "150% !important",
|
|
backgroundPositionX: "25% !important",
|
|
transition: "all 150ms ease-in",
|
|
"&:disabled": {
|
|
pointerEvent: "none",
|
|
opacity: 0.65,
|
|
},
|
|
"& .material-icons": {
|
|
fontSize: pxToRem(15),
|
|
marginTop: pxToRem(-2),
|
|
},
|
|
};
|
|
|
|
/**
|
|
=========================================================
|
|
* 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 { white: white$g, text: text$5, info: info$9, secondary: secondary$2 } = colors;
|
|
const { size: size$g } = typography;
|
|
const contained = {
|
|
base: {
|
|
backgroundColor: white$g.main,
|
|
minHeight: pxToRem(37),
|
|
color: text$5.main,
|
|
padding: `${pxToRem(9)} ${pxToRem(24)}`,
|
|
"&:hover": {
|
|
backgroundColor: white$g.main,
|
|
},
|
|
"&:active, &:active:focus, &:active:hover": {
|
|
opacity: 0.85,
|
|
},
|
|
"& .material-icon, .material-icons-round, svg": {
|
|
fontSize: `${pxToRem(16)} !important`,
|
|
},
|
|
},
|
|
small: {
|
|
minHeight: pxToRem(29),
|
|
padding: `${pxToRem(6)} ${pxToRem(18)}`,
|
|
fontSize: size$g.xs,
|
|
"& .material-icon, .material-icons-round, svg": {
|
|
fontSize: `${pxToRem(12)} !important`,
|
|
},
|
|
},
|
|
large: {
|
|
minHeight: pxToRem(44),
|
|
padding: `${pxToRem(12)} ${pxToRem(64)}`,
|
|
fontSize: size$g.sm,
|
|
"& .material-icon, .material-icons-round, svg": {
|
|
fontSize: `${pxToRem(22)} !important`,
|
|
},
|
|
},
|
|
primary: {
|
|
backgroundColor: info$9.main,
|
|
"&:hover": {
|
|
backgroundColor: info$9.main,
|
|
},
|
|
"&:focus:not(:hover)": {
|
|
backgroundColor: info$9.focus,
|
|
},
|
|
},
|
|
secondary: {
|
|
backgroundColor: secondary$2.main,
|
|
"&:hover": {
|
|
backgroundColor: secondary$2.main,
|
|
},
|
|
"&:focus:not(:hover)": {
|
|
backgroundColor: secondary$2.focus,
|
|
},
|
|
},
|
|
};
|
|
|
|
/**
|
|
=========================================================
|
|
* 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 { transparent: transparent$c, light: light$3, info: info$8, secondary: secondary$1 } = colors;
|
|
const { size: size$f } = typography;
|
|
const outlined = {
|
|
base: {
|
|
minHeight: pxToRem(39),
|
|
color: light$3.main,
|
|
borderColor: light$3.main,
|
|
padding: `${pxToRem(9)} ${pxToRem(24)}`,
|
|
"&:hover": {
|
|
opacity: 0.75,
|
|
backgroundColor: transparent$c.main,
|
|
},
|
|
"& .material-icon, .material-icons-round, svg": {
|
|
fontSize: `${pxToRem(16)} !important`,
|
|
},
|
|
},
|
|
small: {
|
|
minHeight: pxToRem(31),
|
|
padding: `${pxToRem(6)} ${pxToRem(18)}`,
|
|
fontSize: size$f.xs,
|
|
"& .material-icon, .material-icons-round, svg": {
|
|
fontSize: `${pxToRem(12)} !important`,
|
|
},
|
|
},
|
|
large: {
|
|
minHeight: pxToRem(46),
|
|
padding: `${pxToRem(12)} ${pxToRem(64)}`,
|
|
fontSize: size$f.sm,
|
|
"& .material-icon, .material-icons-round, svg": {
|
|
fontSize: `${pxToRem(22)} !important`,
|
|
},
|
|
},
|
|
primary: {
|
|
backgroundColor: transparent$c.main,
|
|
borderColor: info$8.main,
|
|
"&:hover": {
|
|
backgroundColor: transparent$c.main,
|
|
},
|
|
},
|
|
secondary: {
|
|
backgroundColor: transparent$c.main,
|
|
borderColor: secondary$1.main,
|
|
"&:hover": {
|
|
backgroundColor: transparent$c.main,
|
|
},
|
|
},
|
|
};
|
|
|
|
/**
|
|
=========================================================
|
|
* 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 { text: text$4, info: info$7, secondary, transparent: transparent$b } = colors;
|
|
const { size: size$e } = typography;
|
|
const buttonText = {
|
|
base: {
|
|
backgroundColor: transparent$b.main,
|
|
minHeight: pxToRem(37),
|
|
color: text$4.main,
|
|
boxShadow: "none",
|
|
padding: `${pxToRem(9)} ${pxToRem(24)}`,
|
|
"&:hover": {
|
|
backgroundColor: transparent$b.main,
|
|
boxShadow: "none",
|
|
},
|
|
"&:focus": {
|
|
boxShadow: "none",
|
|
},
|
|
"&:active, &:active:focus, &:active:hover": {
|
|
opacity: 0.85,
|
|
boxShadow: "none",
|
|
},
|
|
"&:disabled": {
|
|
boxShadow: "none",
|
|
},
|
|
"& .material-icon, .material-icons-round, svg": {
|
|
fontSize: `${pxToRem(16)} !important`,
|
|
},
|
|
},
|
|
small: {
|
|
minHeight: pxToRem(29),
|
|
padding: `${pxToRem(6)} ${pxToRem(18)}`,
|
|
fontSize: size$e.xs,
|
|
"& .material-icon, .material-icons-round, svg": {
|
|
fontSize: `${pxToRem(12)} !important`,
|
|
},
|
|
},
|
|
large: {
|
|
minHeight: pxToRem(44),
|
|
padding: `${pxToRem(12)} ${pxToRem(64)}`,
|
|
fontSize: size$e.sm,
|
|
"& .material-icon, .material-icons-round, svg": {
|
|
fontSize: `${pxToRem(22)} !important`,
|
|
},
|
|
},
|
|
primary: {
|
|
color: info$7.main,
|
|
"&:hover": {
|
|
color: info$7.main,
|
|
},
|
|
"&:focus:not(:hover)": {
|
|
color: info$7.focus,
|
|
boxShadow: "none",
|
|
},
|
|
},
|
|
secondary: {
|
|
color: secondary.main,
|
|
"&:hover": {
|
|
color: secondary.main,
|
|
},
|
|
"&:focus:not(:hover)": {
|
|
color: secondary.focus,
|
|
boxShadow: "none",
|
|
},
|
|
},
|
|
};
|
|
|
|
/**
|
|
=========================================================
|
|
* 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 button = {
|
|
defaultProps: {
|
|
disableRipple: false,
|
|
},
|
|
styleOverrides: {
|
|
root: { ...root },
|
|
contained: { ...contained.base },
|
|
containedSizeSmall: { ...contained.small },
|
|
containedSizeLarge: { ...contained.large },
|
|
containedPrimary: { ...contained.primary },
|
|
containedSecondary: { ...contained.secondary },
|
|
outlined: { ...outlined.base },
|
|
outlinedSizeSmall: { ...outlined.small },
|
|
outlinedSizeLarge: { ...outlined.large },
|
|
outlinedPrimary: { ...outlined.primary },
|
|
outlinedSecondary: { ...outlined.secondary },
|
|
text: { ...buttonText.base },
|
|
textSizeSmall: { ...buttonText.small },
|
|
textSizeLarge: { ...buttonText.large },
|
|
textPrimary: { ...buttonText.primary },
|
|
textSecondary: { ...buttonText.secondary },
|
|
},
|
|
};
|
|
|
|
/**
|
|
=========================================================
|
|
* 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 { transparent: transparent$a } = colors;
|
|
const iconButton = {
|
|
styleOverrides: {
|
|
root: {
|
|
"&:hover": {
|
|
backgroundColor: transparent$a.main,
|
|
},
|
|
},
|
|
},
|
|
};
|
|
|
|
/**
|
|
=========================================================
|
|
* 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 { info: info$6, inputBorderColor: inputBorderColor$1, dark: dark$4, grey: grey$4, white: white$f } = colors;
|
|
const { size: size$d } = typography;
|
|
const { borderWidth: borderWidth$7 } = borders;
|
|
const input = {
|
|
styleOverrides: {
|
|
root: {
|
|
fontSize: size$d.sm,
|
|
color: dark$4.main,
|
|
"&:hover:not(.Mui-disabled):before": {
|
|
borderBottom: `${borderWidth$7[1]} solid ${rgba(inputBorderColor$1, 0.6)}`,
|
|
},
|
|
"&:before": {
|
|
borderColor: rgba(inputBorderColor$1, 0.6),
|
|
},
|
|
"&:after": {
|
|
borderColor: info$6.main,
|
|
},
|
|
input: {
|
|
color: white$f.main,
|
|
"&::-webkit-input-placeholder": {
|
|
color: grey$4[100],
|
|
},
|
|
},
|
|
},
|
|
},
|
|
};
|
|
|
|
/**
|
|
=========================================================
|
|
* 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 { text: text$3, info: info$5 } = colors;
|
|
const { size: size$c } = typography;
|
|
const inputLabel = {
|
|
styleOverrides: {
|
|
root: {
|
|
fontSize: size$c.sm,
|
|
color: text$3.main,
|
|
lineHeight: 0.9,
|
|
"&.Mui-focused": {
|
|
color: info$5.main,
|
|
},
|
|
"&.MuiInputLabel-shrink": {
|
|
lineHeight: 1.5,
|
|
fontSize: size$c.md,
|
|
"~ .MuiInputBase-root .MuiOutlinedInput-notchedOutline legend": {
|
|
fontSize: "0.85em",
|
|
},
|
|
},
|
|
},
|
|
sizeSmall: {
|
|
fontSize: size$c.xs,
|
|
lineHeight: 1.625,
|
|
"&.MuiInputLabel-shrink": {
|
|
lineHeight: 1.6,
|
|
fontSize: size$c.sm,
|
|
"~ .MuiInputBase-root .MuiOutlinedInput-notchedOutline legend": {
|
|
fontSize: "0.72em",
|
|
},
|
|
},
|
|
},
|
|
},
|
|
};
|
|
|
|
/**
|
|
=========================================================
|
|
* 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 { inputBorderColor, info: info$4, grey: grey$3, transparent: transparent$9, white: white$e } = colors;
|
|
const { borderRadius: borderRadius$e } = borders;
|
|
const { size: size$b } = typography;
|
|
const inputOutlined = {
|
|
styleOverrides: {
|
|
root: {
|
|
backgroundColor: transparent$9.main,
|
|
fontSize: size$b.sm,
|
|
borderRadius: borderRadius$e.md,
|
|
"&:hover .MuiOutlinedInput-notchedOutline": {
|
|
borderColor: rgba(inputBorderColor, 0.6),
|
|
},
|
|
"&.Mui-focused": {
|
|
"& .MuiOutlinedInput-notchedOutline": {
|
|
borderColor: info$4.main,
|
|
},
|
|
},
|
|
},
|
|
notchedOutline: {
|
|
borderColor: rgba(inputBorderColor, 0.6),
|
|
},
|
|
input: {
|
|
color: white$e.main,
|
|
padding: pxToRem(12),
|
|
backgroundColor: transparent$9.main,
|
|
"&::-webkit-input-placeholder": {
|
|
color: grey$3[100],
|
|
},
|
|
},
|
|
inputSizeSmall: {
|
|
fontSize: size$b.xs,
|
|
padding: pxToRem(10),
|
|
},
|
|
multiline: {
|
|
color: grey$3[700],
|
|
padding: 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 { transparent: transparent$8 } = colors;
|
|
const textField = {
|
|
styleOverrides: {
|
|
root: {
|
|
backgroundColor: transparent$8.main,
|
|
},
|
|
},
|
|
};
|
|
|
|
/**
|
|
=========================================================
|
|
* 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 { md: md$5 } = boxShadows;
|
|
const { size: size$a } = typography;
|
|
const { text: text$2, background: background$3 } = colors;
|
|
const { borderRadius: borderRadius$d } = borders;
|
|
const menu = {
|
|
defaultProps: {
|
|
disableAutoFocusItem: true,
|
|
},
|
|
styleOverrides: {
|
|
paper: {
|
|
minWidth: pxToRem(160),
|
|
boxShadow: md$5,
|
|
padding: `${pxToRem(16)} ${pxToRem(8)}`,
|
|
fontSize: size$a.sm,
|
|
color: text$2.main,
|
|
textAlign: "left",
|
|
backgroundColor: `${background$3.card} !important`,
|
|
borderRadius: borderRadius$d.md,
|
|
},
|
|
},
|
|
};
|
|
|
|
/**
|
|
=========================================================
|
|
* 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 { dark: dark$3, white: white$d } = colors;
|
|
const { borderRadius: borderRadius$c } = borders;
|
|
const { size: size$9 } = typography;
|
|
const menuItem$1 = {
|
|
styleOverrides: {
|
|
root: {
|
|
minWidth: pxToRem(160),
|
|
minHeight: "unset",
|
|
padding: `${pxToRem(4.8)} ${pxToRem(16)}`,
|
|
borderRadius: borderRadius$c.md,
|
|
fontSize: size$9.sm,
|
|
color: rgba(white$d.main, 0.8),
|
|
transition: "background-color 300ms ease, color 300ms ease",
|
|
"&:hover, &:focus, &.Mui-selected, &.Mui-selected:hover, &.Mui-selected:focus": {
|
|
backgroundColor: dark$3.main,
|
|
color: white$d.main,
|
|
},
|
|
},
|
|
},
|
|
};
|
|
|
|
/**
|
|
=========================================================
|
|
* 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 { white: white$c, gradients: gradients$4, grey: grey$2, transparent: transparent$7 } = colors;
|
|
const { borderWidth: borderWidth$6 } = borders;
|
|
const { md: md$4 } = boxShadows;
|
|
const switchButton = {
|
|
defaultProps: {
|
|
disableRipple: false,
|
|
},
|
|
styleOverrides: {
|
|
switchBase: {
|
|
color: gradients$4.dark.main,
|
|
"&:hover": {
|
|
backgroundColor: transparent$7.main,
|
|
},
|
|
"&.Mui-checked": {
|
|
color: gradients$4.dark.main,
|
|
"&:hover": {
|
|
backgroundColor: transparent$7.main,
|
|
},
|
|
"& .MuiSwitch-thumb": {
|
|
borderColor: `${gradients$4.dark.main} !important`,
|
|
},
|
|
"& + .MuiSwitch-track": {
|
|
backgroundColor: `${gradients$4.dark.main} !important`,
|
|
borderColor: `${gradients$4.dark.main} !important`,
|
|
opacity: 1,
|
|
},
|
|
},
|
|
"&.Mui-disabled + .MuiSwitch-track": {
|
|
opacity: "0.3 !important",
|
|
},
|
|
"&.Mui-focusVisible .MuiSwitch-thumb": {
|
|
backgroundImage: linearGradient(gradients$4.info.main, gradients$4.info.state),
|
|
},
|
|
},
|
|
thumb: {
|
|
backgroundColor: white$c.main,
|
|
boxShadow: md$4,
|
|
border: `${borderWidth$6[1]} solid ${grey$2[400]}`,
|
|
},
|
|
track: {
|
|
width: pxToRem(32),
|
|
height: pxToRem(15),
|
|
backgroundColor: grey$2[400],
|
|
border: `${borderWidth$6[1]} solid ${grey$2[400]}`,
|
|
opacity: 1,
|
|
},
|
|
checked: {},
|
|
},
|
|
};
|
|
|
|
/**
|
|
=========================================================
|
|
* 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 { dark: dark$2, transparent: transparent$6, white: white$b } = colors;
|
|
const divider = {
|
|
styleOverrides: {
|
|
root: {
|
|
backgroundColor: transparent$6.main,
|
|
backgroundImage: `linear-gradient(to right, ${rgba(dark$2.main, 0)}, ${white$b.main}, ${rgba(dark$2.main, 0)}) !important`,
|
|
height: pxToRem(1),
|
|
margin: `${pxToRem(16)} 0`,
|
|
borderBottom: "none",
|
|
opacity: 0.25,
|
|
},
|
|
vertical: {
|
|
backgroundColor: transparent$6.main,
|
|
backgroundImage: `linear-gradient(to bottom, ${rgba(dark$2.main, 0)}, ${white$b.main}, ${rgba(dark$2.main, 0)}) !important`,
|
|
width: pxToRem(1),
|
|
height: "100%",
|
|
margin: `0 ${pxToRem(16)}`,
|
|
borderRight: "none",
|
|
},
|
|
light: {
|
|
backgroundColor: transparent$6.main,
|
|
backgroundImage: `linear-gradient(to right, ${rgba(white$b.main, 0)}, ${rgba(dark$2.main, 0.4)}, ${rgba(white$b.main, 0)}) !important`,
|
|
"&.MuiDivider-vertical": {
|
|
backgroundImage: `linear-gradient(to bottom, ${rgba(white$b.main, 0)}, ${rgba(dark$2.main, 0.4)}, ${rgba(white$b.main, 0)}) !important`,
|
|
},
|
|
},
|
|
},
|
|
};
|
|
|
|
/**
|
|
=========================================================
|
|
* 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 { background: background$2 } = colors;
|
|
const { md: md$3 } = boxShadows;
|
|
const { borderRadius: borderRadius$b } = borders;
|
|
const tableContainer = {
|
|
styleOverrides: {
|
|
root: {
|
|
backgroundColor: background$2.card,
|
|
boxShadow: md$3,
|
|
borderRadius: borderRadius$b.xl,
|
|
},
|
|
},
|
|
};
|
|
|
|
/**
|
|
=========================================================
|
|
* 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 { borderRadius: borderRadius$a } = borders;
|
|
const tableHead = {
|
|
styleOverrides: {
|
|
root: {
|
|
display: "block",
|
|
padding: `${pxToRem(16)} ${pxToRem(16)} 0 ${pxToRem(16)}`,
|
|
borderRadius: `${borderRadius$a.xl} ${borderRadius$a.xl} 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 { borderWidth: borderWidth$5 } = borders;
|
|
const { light: light$2 } = colors;
|
|
const tableCell = {
|
|
styleOverrides: {
|
|
root: {
|
|
padding: `${pxToRem(12)} ${pxToRem(16)}`,
|
|
borderBottom: `${borderWidth$5[1]} solid ${light$2.main}`,
|
|
},
|
|
},
|
|
};
|
|
|
|
/**
|
|
=========================================================
|
|
* 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 { borderRadius: borderRadius$9 } = borders;
|
|
const { light: light$1 } = colors;
|
|
const linearProgress = {
|
|
styleOverrides: {
|
|
root: {
|
|
height: pxToRem(6),
|
|
borderRadius: borderRadius$9.md,
|
|
overflow: "visible",
|
|
position: "relative",
|
|
},
|
|
colorPrimary: {
|
|
backgroundColor: light$1.main,
|
|
},
|
|
colorSecondary: {
|
|
backgroundColor: light$1.main,
|
|
},
|
|
bar: {
|
|
height: pxToRem(6),
|
|
borderRadius: borderRadius$9.sm,
|
|
position: "absolute",
|
|
transform: `translate(0, 0) !important`,
|
|
transition: "width 0.6s ease !important",
|
|
},
|
|
},
|
|
};
|
|
|
|
/**
|
|
=========================================================
|
|
* 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 { grey: grey$1 } = colors;
|
|
const { size: size$8 } = typography;
|
|
const breadcrumbs = {
|
|
styleOverrides: {
|
|
li: {
|
|
lineHeight: 0,
|
|
},
|
|
separator: {
|
|
fontSize: size$8.sm,
|
|
color: grey$1[600],
|
|
},
|
|
},
|
|
};
|
|
|
|
/**
|
|
=========================================================
|
|
* 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 { grey, white: white$a, black: black$1, info: info$3 } = colors$1;
|
|
const { borderRadius: borderRadius$8, borderWidth: borderWidth$4 } = borders$1;
|
|
const { sliderBoxShadow } = boxShadows$1;
|
|
const slider = {
|
|
styleOverrides: {
|
|
root: {
|
|
width: "100%",
|
|
"& .MuiSlider-active, & .Mui-focusVisible": {
|
|
boxShadow: "none !important",
|
|
},
|
|
"& .MuiSlider-valueLabel": {
|
|
color: black$1.main,
|
|
},
|
|
},
|
|
rail: {
|
|
height: pxToRem$1(2),
|
|
background: grey[200],
|
|
borderRadius: borderRadius$8.sm,
|
|
opacity: 1,
|
|
},
|
|
track: {
|
|
background: info$3.main,
|
|
height: pxToRem$1(2),
|
|
position: "relative",
|
|
border: "none",
|
|
borderRadius: borderRadius$8.lg,
|
|
zIndex: 1,
|
|
},
|
|
thumb: {
|
|
width: pxToRem$1(14),
|
|
height: pxToRem$1(14),
|
|
backgroundColor: white$a.main,
|
|
zIndex: 10,
|
|
boxShadow: sliderBoxShadow.thumb,
|
|
border: `${borderWidth$4[1]} solid ${info$3.main}`,
|
|
transition: "all 200ms linear",
|
|
"&:hover": {
|
|
boxShadow: "none",
|
|
},
|
|
"&:active": {
|
|
transform: "translate(-50%, -50%) scale(1.4)",
|
|
},
|
|
"&.Mui-active": { boxShadow: boxShadow$1([0, 0], [0, 14], info$3.main, 0.16) },
|
|
},
|
|
},
|
|
};
|
|
|
|
/**
|
|
=========================================================
|
|
* 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 { borderRadius: borderRadius$7 } = borders;
|
|
const avatar = {
|
|
styleOverrides: {
|
|
root: {
|
|
transition: "all 200ms ease-in-out",
|
|
},
|
|
rounded: {
|
|
borderRadius: borderRadius$7.lg,
|
|
},
|
|
img: {
|
|
height: "auto",
|
|
},
|
|
},
|
|
};
|
|
|
|
/**
|
|
=========================================================
|
|
* 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 { black, white: white$9 } = colors;
|
|
const { size: size$7, fontWeightRegular: fontWeightRegular$2 } = typography;
|
|
const { borderRadius: borderRadius$6 } = borders;
|
|
const tooltip = {
|
|
defaultProps: {
|
|
arrow: true,
|
|
TransitionComponent: Fade,
|
|
},
|
|
styleOverrides: {
|
|
tooltip: {
|
|
maxWidth: pxToRem(200),
|
|
backgroundColor: black.main,
|
|
color: white$9.main,
|
|
fontSize: size$7.sm,
|
|
fontWeight: fontWeightRegular$2,
|
|
textAlign: "center",
|
|
borderRadius: borderRadius$6.md,
|
|
opacity: 0.7,
|
|
padding: `${pxToRem(5)} ${pxToRem(8)} ${pxToRem(4)}`,
|
|
},
|
|
arrow: {
|
|
color: black.main,
|
|
},
|
|
},
|
|
};
|
|
|
|
/**
|
|
=========================================================
|
|
* 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 appBar = {
|
|
defaultProps: {
|
|
color: "transparent",
|
|
},
|
|
styleOverrides: {
|
|
root: {
|
|
boxShadow: "none",
|
|
},
|
|
},
|
|
};
|
|
|
|
/**
|
|
=========================================================
|
|
* 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 { background: background$1 } = colors;
|
|
const { borderRadius: borderRadius$5 } = borders;
|
|
const { md: md$2 } = boxShadows;
|
|
const tabs = {
|
|
styleOverrides: {
|
|
root: {
|
|
position: "relative",
|
|
backgroundColor: background$1.card,
|
|
borderRadius: borderRadius$5.xl,
|
|
minHeight: "unset",
|
|
padding: pxToRem(4),
|
|
},
|
|
flexContainer: {
|
|
height: "100%",
|
|
position: "relative",
|
|
zIndex: 10,
|
|
},
|
|
fixed: {
|
|
overflow: "unset !important",
|
|
overflowX: "unset !important",
|
|
},
|
|
vertical: {
|
|
"& .MuiTabs-indicator": {
|
|
width: "100%",
|
|
},
|
|
},
|
|
indicator: {
|
|
height: "100%",
|
|
borderRadius: borderRadius$5.lg,
|
|
backgroundColor: background$1.default,
|
|
boxShadow: md$2,
|
|
transition: "all 500ms ease",
|
|
},
|
|
},
|
|
};
|
|
|
|
/**
|
|
=========================================================
|
|
* 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 { size: size$6, fontWeightRegular: fontWeightRegular$1 } = typography;
|
|
const { borderRadius: borderRadius$4 } = borders;
|
|
const { white: white$8 } = colors;
|
|
const tab = {
|
|
styleOverrides: {
|
|
root: {
|
|
display: "flex",
|
|
alignItems: "center",
|
|
flexDirection: "row",
|
|
flex: "1 1 auto",
|
|
textAlign: "center",
|
|
maxWidth: "unset !important",
|
|
minWidth: "unset !important",
|
|
minHeight: "unset !important",
|
|
fontSize: size$6.md,
|
|
fontWeight: fontWeightRegular$1,
|
|
textTransform: "none",
|
|
lineHeight: "inherit",
|
|
padding: pxToRem(4),
|
|
borderRadius: borderRadius$4.lg,
|
|
color: `${white$8.main} !important`,
|
|
opacity: "1 !important",
|
|
"& .material-icons, .material-icons-round": {
|
|
marginBottom: "0 !important",
|
|
marginRight: pxToRem(6),
|
|
},
|
|
"& svg": {
|
|
marginBottom: "0 !important",
|
|
marginRight: pxToRem(6),
|
|
},
|
|
},
|
|
labelIcon: {
|
|
paddingTop: pxToRem(4),
|
|
},
|
|
},
|
|
};
|
|
|
|
/**
|
|
=========================================================
|
|
* 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 { transparent: transparent$5, gradients: gradients$3 } = colors;
|
|
const { borderRadius: borderRadius$3 } = borders;
|
|
const { colored } = boxShadows;
|
|
const stepper = {
|
|
styleOverrides: {
|
|
root: {
|
|
background: linearGradient(gradients$3.info.main, gradients$3.info.state),
|
|
padding: `${pxToRem(24)} 0 ${pxToRem(16)}`,
|
|
borderRadius: borderRadius$3.lg,
|
|
boxShadow: colored.info,
|
|
"&.MuiPaper-root": {
|
|
backgroundColor: transparent$5.main,
|
|
},
|
|
},
|
|
},
|
|
};
|
|
|
|
/**
|
|
=========================================================
|
|
* 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 step = {
|
|
styleOverrides: {
|
|
root: {
|
|
padding: `0 ${pxToRem(6)}`,
|
|
},
|
|
},
|
|
};
|
|
|
|
/**
|
|
=========================================================
|
|
* 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 { white: white$7 } = colors;
|
|
const { borderWidth: borderWidth$3 } = borders;
|
|
const stepConnector = {
|
|
styleOverrides: {
|
|
root: {
|
|
color: "#9fc9ff",
|
|
transition: "all 200ms linear",
|
|
"&.Mui-active": {
|
|
color: white$7.main,
|
|
},
|
|
"&.Mui-completed": {
|
|
color: white$7.main,
|
|
},
|
|
},
|
|
alternativeLabel: {
|
|
top: "14%",
|
|
left: "-50%",
|
|
right: "50%",
|
|
},
|
|
line: {
|
|
borderWidth: `${borderWidth$3[2]} !important`,
|
|
borderColor: "currentColor",
|
|
opacity: 0.5,
|
|
},
|
|
},
|
|
};
|
|
|
|
/**
|
|
=========================================================
|
|
* 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 { size: size$5, fontWeightRegular } = typography;
|
|
const { white: white$6 } = colors;
|
|
const stepLabel = {
|
|
styleOverrides: {
|
|
label: {
|
|
marginTop: `${pxToRem(8)} !important`,
|
|
fontWeight: fontWeightRegular,
|
|
fontSize: size$5.xs,
|
|
color: "#9fc9ff",
|
|
textTransform: "uppercase",
|
|
"&.Mui-active": {
|
|
fontWeight: `${fontWeightRegular} !important`,
|
|
color: `${rgba(white$6.main, 0.8)} !important`,
|
|
},
|
|
"&.Mui-completed": {
|
|
fontWeight: `${fontWeightRegular} !important`,
|
|
color: `${rgba(white$6.main, 0.8)} !important`,
|
|
},
|
|
},
|
|
},
|
|
};
|
|
|
|
/**
|
|
=========================================================
|
|
* 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 { white: white$5 } = colors;
|
|
const stepIcon = {
|
|
styleOverrides: {
|
|
root: {
|
|
background: "#9fc9ff",
|
|
fill: "#9fc9ff",
|
|
stroke: "#9fc9ff",
|
|
strokeWidth: pxToRem(10),
|
|
width: pxToRem(13),
|
|
height: pxToRem(13),
|
|
borderRadius: "50%",
|
|
zIndex: 99,
|
|
transition: "all 200ms linear",
|
|
"&.Mui-active": {
|
|
background: white$5.main,
|
|
fill: white$5.main,
|
|
stroke: white$5.main,
|
|
borderColor: white$5.main,
|
|
boxShadow: boxShadow([0, 0], [0, 2], white$5.main, 1),
|
|
},
|
|
"&.Mui-completed": {
|
|
background: white$5.main,
|
|
fill: white$5.main,
|
|
stroke: white$5.main,
|
|
borderColor: white$5.main,
|
|
boxShadow: boxShadow([0, 0], [0, 2], white$5.main, 1),
|
|
},
|
|
},
|
|
},
|
|
};
|
|
|
|
/**
|
|
=========================================================
|
|
* 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 { transparent: transparent$4 } = colors;
|
|
const select = {
|
|
styleOverrides: {
|
|
select: {
|
|
display: "grid",
|
|
alignItems: "center",
|
|
padding: `0 ${pxToRem(12)} !important`,
|
|
"& .Mui-selected": {
|
|
backgroundColor: transparent$4.main,
|
|
},
|
|
},
|
|
selectMenu: {
|
|
background: "none",
|
|
height: "none",
|
|
minHeight: "none",
|
|
overflow: "unset",
|
|
},
|
|
icon: {
|
|
display: "none",
|
|
},
|
|
},
|
|
};
|
|
|
|
/**
|
|
=========================================================
|
|
* 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 { white: white$4 } = colors;
|
|
const { size: size$4, fontWeightBold } = typography;
|
|
const formControlLabel = {
|
|
styleOverrides: {
|
|
root: {
|
|
display: "block",
|
|
minHeight: pxToRem(24),
|
|
marginBottom: pxToRem(2),
|
|
},
|
|
label: {
|
|
display: "inline-block",
|
|
fontSize: size$4.sm,
|
|
fontWeight: fontWeightBold,
|
|
color: white$4.main,
|
|
lineHeight: 1,
|
|
transform: `translateY(${pxToRem(1)})`,
|
|
marginLeft: pxToRem(4),
|
|
"&.Mui-disabled": {
|
|
color: white$4.main,
|
|
},
|
|
},
|
|
},
|
|
};
|
|
|
|
/**
|
|
=========================================================
|
|
* 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 { text: text$1 } = colors;
|
|
const formLabel = {
|
|
styleOverrides: {
|
|
root: {
|
|
color: text$1.main,
|
|
},
|
|
},
|
|
};
|
|
|
|
/**
|
|
=========================================================
|
|
* 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 { borderWidth: borderWidth$2, borderColor: borderColor$2 } = borders;
|
|
const { transparent: transparent$3, info: info$2 } = colors;
|
|
const checkbox = {
|
|
styleOverrides: {
|
|
root: {
|
|
"& .MuiSvgIcon-root": {
|
|
backgroundPosition: "center",
|
|
backgroundSize: "contain",
|
|
backgroundRepeat: "no-repeat",
|
|
width: pxToRem(20),
|
|
height: pxToRem(20),
|
|
color: transparent$3.main,
|
|
border: `${borderWidth$2[1]} solid ${borderColor$2}`,
|
|
borderRadius: pxToRem(5.6),
|
|
},
|
|
"&:hover": {
|
|
backgroundColor: transparent$3.main,
|
|
},
|
|
"&.Mui-focusVisible": {
|
|
border: `${borderWidth$2[2]} solid ${info$2.main} !important`,
|
|
},
|
|
},
|
|
colorPrimary: {
|
|
color: borderColor$2,
|
|
"&.Mui-checked": {
|
|
color: info$2.main,
|
|
"& .MuiSvgIcon-root": {
|
|
backgroundImage: `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -1 22 22'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M6 10l3 3l6-6'/%3e%3c/svg%3e"), ${linearGradient(info$2.main, info$2.main)}`,
|
|
borderColor: info$2.main,
|
|
},
|
|
},
|
|
},
|
|
colorSecondary: {
|
|
color: borderColor$2,
|
|
"& .MuiSvgIcon-root": {
|
|
color: info$2.main,
|
|
"&.Mui-checked": {
|
|
backgroundImage: `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -1 22 22'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.5' d='M6 10l3 3l6-6'/%3e%3c/svg%3e"), ${linearGradient(info$2.main, info$2.main)}`,
|
|
borderColor: info$2.main,
|
|
},
|
|
},
|
|
},
|
|
},
|
|
};
|
|
|
|
/**
|
|
=========================================================
|
|
* 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 { borderWidth: borderWidth$1, borderColor: borderColor$1 } = borders;
|
|
const { transparent: transparent$2, info: info$1 } = colors;
|
|
const radio = {
|
|
styleOverrides: {
|
|
root: {
|
|
"& .MuiSvgIcon-root": {
|
|
width: pxToRem(20),
|
|
height: pxToRem(20),
|
|
color: transparent$2.main,
|
|
border: `${borderWidth$1[1]} solid ${borderColor$1}`,
|
|
borderRadius: "50%",
|
|
},
|
|
"&:after": {
|
|
transition: "opacity 250ms ease-in-out",
|
|
content: `""`,
|
|
position: "absolute",
|
|
width: pxToRem(14),
|
|
height: pxToRem(14),
|
|
borderRadius: "50%",
|
|
backgroundImage: linearGradient(info$1.main, info$1.main),
|
|
opacity: 0,
|
|
left: 0,
|
|
right: 0,
|
|
top: 0,
|
|
bottom: 0,
|
|
margin: "auto",
|
|
},
|
|
"&:hover": {
|
|
backgroundColor: transparent$2.main,
|
|
},
|
|
"&.Mui-focusVisible": {
|
|
border: `${borderWidth$1[2]} solid ${info$1.main} !important`,
|
|
},
|
|
},
|
|
colorPrimary: {
|
|
color: borderColor$1,
|
|
"&.Mui-checked": {
|
|
color: info$1.main,
|
|
"& .MuiSvgIcon-root": {
|
|
borderColor: info$1.main,
|
|
},
|
|
"&:after": {
|
|
opacity: 1,
|
|
},
|
|
},
|
|
},
|
|
colorSecondary: {
|
|
color: borderColor$1,
|
|
"&.Mui-checked": {
|
|
color: info$1.main,
|
|
"& .MuiSvgIcon-root": {
|
|
borderColor: info$1.main,
|
|
},
|
|
"&:after": {
|
|
opacity: 1,
|
|
},
|
|
},
|
|
},
|
|
},
|
|
};
|
|
|
|
/**
|
|
=========================================================
|
|
* 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 { md: md$1 } = boxShadows;
|
|
const { size: size$3 } = typography;
|
|
const { text, transparent: transparent$1, light, dark: dark$1, gradients: gradients$2, background, white: white$3 } = colors;
|
|
const { borderRadius: borderRadius$2 } = borders;
|
|
const autocompletle = {
|
|
styleOverrides: {
|
|
popper: {
|
|
boxShadow: md$1,
|
|
padding: pxToRem(8),
|
|
fontSize: size$3.sm,
|
|
color: text.main,
|
|
textAlign: "left",
|
|
backgroundColor: `${background.card} !important`,
|
|
borderRadius: borderRadius$2.md,
|
|
},
|
|
paper: {
|
|
boxShadow: "none",
|
|
backgroundColor: transparent$1.main,
|
|
},
|
|
option: {
|
|
padding: `${pxToRem(4.8)} ${pxToRem(16)}`,
|
|
borderRadius: borderRadius$2.md,
|
|
fontSize: size$3.sm,
|
|
color: text.main,
|
|
transition: "background-color 300ms ease, color 300ms ease",
|
|
"&:hover, &:focus, &.Mui-selected, &.Mui-selected:hover, &.Mui-selected:focus": {
|
|
backgroundColor: rgba(light.main, 0.2),
|
|
color: white$3.main,
|
|
},
|
|
'&[aria-selected="true"]': {
|
|
backgroundColor: `${rgba(light.main, 0.2)} !important`,
|
|
color: `${white$3.main} !important`,
|
|
},
|
|
},
|
|
noOptions: {
|
|
fontSize: size$3.sm,
|
|
color: text.main,
|
|
},
|
|
groupLabel: {
|
|
color: dark$1.main,
|
|
},
|
|
loading: {
|
|
fontSize: size$3.sm,
|
|
color: text.main,
|
|
},
|
|
tag: {
|
|
display: "flex",
|
|
alignItems: "center",
|
|
height: "auto",
|
|
padding: pxToRem(4),
|
|
backgroundColor: gradients$2.dark.state,
|
|
color: white$3.main,
|
|
"& .MuiChip-label": {
|
|
lineHeight: 1.2,
|
|
padding: `0 ${pxToRem(10)} 0 ${pxToRem(4)}`,
|
|
},
|
|
"& .MuiSvgIcon-root, & .MuiSvgIcon-root:hover, & .MuiSvgIcon-root:focus": {
|
|
color: white$3.main,
|
|
marginRight: 0,
|
|
},
|
|
},
|
|
popupIndicator: {
|
|
color: text.main,
|
|
},
|
|
clearIndicator: {
|
|
color: text.main,
|
|
},
|
|
},
|
|
};
|
|
|
|
/**
|
|
=========================================================
|
|
* 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 { info, white: white$2, gradients: gradients$1 } = colors;
|
|
const flatpickr = {
|
|
".flatpickr-day:hover, .flatpickr-day:focus, .flatpickr-day.nextMonthDay:hover, .flatpickr-day.nextMonthDay:focus": {
|
|
background: rgba(info.main, 0.28),
|
|
border: "none",
|
|
},
|
|
".flatpickr-day.today": {
|
|
background: info.main,
|
|
color: white$2.main,
|
|
border: "none",
|
|
"&:hover, &:focus": {
|
|
background: `${info.focus} !important`,
|
|
},
|
|
},
|
|
".flatpickr-day.selected, .flatpickr-day.selected:hover, .flatpickr-day.nextMonthDay.selected, .flatpickr-day.nextMonthDay.selected:hover, .flatpickr-day.nextMonthDay.selected:focus": {
|
|
background: `${gradients$1.info.state} !important`,
|
|
color: white$2.main,
|
|
border: "none",
|
|
},
|
|
".flatpickr-months .flatpickr-next-month:hover svg, .flatpickr-months .flatpickr-prev-month:hover svg": {
|
|
color: `${info.main} !important`,
|
|
fill: `${info.main} !important`,
|
|
},
|
|
};
|
|
|
|
/**
|
|
=========================================================
|
|
* 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 { values: { sm, md, lg: lg$1, xl, xxl: xxl$1 }, } = breakpoints;
|
|
const SM = `@media (min-width: ${sm}px)`;
|
|
const MD = `@media (min-width: ${md}px)`;
|
|
const LG = `@media (min-width: ${lg$1}px)`;
|
|
const XL = `@media (min-width: ${xl}px)`;
|
|
const XXL = `@media (min-width: ${xxl$1}px)`;
|
|
const sharedClasses = {
|
|
paddingRight: `${pxToRem(24)} !important`,
|
|
paddingLeft: `${pxToRem(24)} !important`,
|
|
marginRight: "auto !important",
|
|
marginLeft: "auto !important",
|
|
width: "100% !important",
|
|
position: "relative",
|
|
};
|
|
const container = {
|
|
[SM]: {
|
|
".MuiContainer-root": {
|
|
...sharedClasses,
|
|
maxWidth: "540px !important",
|
|
},
|
|
},
|
|
[MD]: {
|
|
".MuiContainer-root": {
|
|
...sharedClasses,
|
|
maxWidth: "720px !important",
|
|
},
|
|
},
|
|
[LG]: {
|
|
".MuiContainer-root": {
|
|
...sharedClasses,
|
|
maxWidth: "960px !important",
|
|
},
|
|
},
|
|
[XL]: {
|
|
".MuiContainer-root": {
|
|
...sharedClasses,
|
|
maxWidth: "1140px !important",
|
|
},
|
|
},
|
|
[XXL]: {
|
|
".MuiContainer-root": {
|
|
...sharedClasses,
|
|
maxWidth: "1320px !important",
|
|
},
|
|
},
|
|
};
|
|
|
|
/**
|
|
=========================================================
|
|
* 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 { transparent } = colors;
|
|
const { lg } = boxShadows;
|
|
const { borderRadius: borderRadius$1 } = borders;
|
|
const popover = {
|
|
styleOverrides: {
|
|
paper: {
|
|
backgroundColor: transparent.main,
|
|
boxShadow: lg,
|
|
borderRadius: borderRadius$1.md,
|
|
},
|
|
},
|
|
};
|
|
|
|
/**
|
|
=========================================================
|
|
* 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 buttonBase = {
|
|
defaultProps: {
|
|
disableRipple: false,
|
|
},
|
|
};
|
|
|
|
/**
|
|
=========================================================
|
|
* 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 icon = {
|
|
defaultProps: {
|
|
baseClassName: "material-icons-round",
|
|
fontSize: "inherit",
|
|
},
|
|
styleOverrides: {
|
|
fontSizeInherit: {
|
|
fontSize: "inherit !important",
|
|
},
|
|
fontSizeSmall: {
|
|
fontSize: `${pxToRem(20)} !important`,
|
|
},
|
|
fontSizeLarge: {
|
|
fontSize: `${pxToRem(36)} !important`,
|
|
},
|
|
},
|
|
};
|
|
|
|
/**
|
|
=========================================================
|
|
* 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 svgIcon = {
|
|
defaultProps: {
|
|
fontSize: "inherit",
|
|
},
|
|
styleOverrides: {
|
|
fontSizeInherit: {
|
|
fontSize: "inherit !important",
|
|
},
|
|
fontSizeSmall: {
|
|
fontSize: `${pxToRem(20)} !important`,
|
|
},
|
|
fontSizeLarge: {
|
|
fontSize: `${pxToRem(36)} !important`,
|
|
},
|
|
},
|
|
};
|
|
|
|
/**
|
|
=========================================================
|
|
* 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 link = {
|
|
defaultProps: {
|
|
underline: "none",
|
|
color: "inherit",
|
|
},
|
|
};
|
|
|
|
/**
|
|
=========================================================
|
|
* 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 { borderRadius } = borders;
|
|
const { xxl } = boxShadows;
|
|
const dialog = {
|
|
styleOverrides: {
|
|
paper: {
|
|
borderRadius: borderRadius.lg,
|
|
boxShadow: xxl,
|
|
},
|
|
paperFullScreen: {
|
|
borderRadius: 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 { size: size$2 } = typography;
|
|
const dialogTitle = {
|
|
styleOverrides: {
|
|
root: {
|
|
padding: pxToRem(16),
|
|
fontSize: size$2.xl,
|
|
},
|
|
},
|
|
};
|
|
|
|
/**
|
|
=========================================================
|
|
* 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 { size: size$1 } = typography;
|
|
const { white: white$1 } = colors;
|
|
const { borderWidth, borderColor } = borders;
|
|
const dialogContent = {
|
|
styleOverrides: {
|
|
root: {
|
|
padding: pxToRem(16),
|
|
fontSize: size$1.md,
|
|
color: rgba(white$1.main, 0.8),
|
|
},
|
|
dividers: {
|
|
borderTop: `${borderWidth[1]} solid ${rgba(borderColor, 0.6)}`,
|
|
borderBottom: `${borderWidth[1]} solid ${rgba(borderColor, 0.6)}`,
|
|
},
|
|
},
|
|
};
|
|
|
|
/**
|
|
=========================================================
|
|
* 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 { size } = typography;
|
|
const { white } = colors;
|
|
const dialogContentText = {
|
|
styleOverrides: {
|
|
root: {
|
|
fontSize: size.md,
|
|
color: rgba(white.main, 0.8),
|
|
},
|
|
},
|
|
};
|
|
|
|
/**
|
|
=========================================================
|
|
* 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 dialogActions = {
|
|
styleOverrides: {
|
|
root: {
|
|
padding: pxToRem(16),
|
|
},
|
|
},
|
|
};
|
|
|
|
/**
|
|
=========================================================
|
|
* Material Dashboard 2 PRO React - v2.0.0
|
|
=========================================================
|
|
|
|
* Product Page: https://www.creative-tim.com/product/soft-ui-dashboard-pro-material-ui
|
|
* Copyright 2021 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.
|
|
*/
|
|
var themeDark = createTheme$1({
|
|
breakpoints: { ...breakpoints },
|
|
palette: { ...colors },
|
|
typography: { ...typography },
|
|
boxShadows: { ...boxShadows },
|
|
borders: { ...borders },
|
|
functions: {
|
|
boxShadow,
|
|
hexToRgb,
|
|
linearGradient,
|
|
pxToRem,
|
|
rgba,
|
|
},
|
|
components: {
|
|
MuiCssBaseline: {
|
|
styleOverrides: {
|
|
...globals,
|
|
...flatpickr,
|
|
...container,
|
|
},
|
|
},
|
|
MuiDrawer: { ...sidenav },
|
|
MuiList: { ...list },
|
|
MuiListItem: { ...listItem },
|
|
MuiListItemText: { ...listItemText },
|
|
MuiCard: { ...card },
|
|
MuiCardMedia: { ...cardMedia },
|
|
MuiCardContent: { ...cardContent },
|
|
MuiButton: { ...button },
|
|
MuiIconButton: { ...iconButton },
|
|
MuiInput: { ...input },
|
|
MuiInputLabel: { ...inputLabel },
|
|
MuiOutlinedInput: { ...inputOutlined },
|
|
MuiTextField: { ...textField },
|
|
MuiMenu: { ...menu },
|
|
MuiMenuItem: { ...menuItem$1 },
|
|
MuiSwitch: { ...switchButton },
|
|
MuiDivider: { ...divider },
|
|
MuiTableContainer: { ...tableContainer },
|
|
MuiTableHead: { ...tableHead },
|
|
MuiTableCell: { ...tableCell },
|
|
MuiLinearProgress: { ...linearProgress },
|
|
MuiBreadcrumbs: { ...breadcrumbs },
|
|
MuiSlider: { ...slider },
|
|
MuiAvatar: { ...avatar },
|
|
MuiTooltip: { ...tooltip },
|
|
MuiAppBar: { ...appBar },
|
|
MuiTabs: { ...tabs },
|
|
MuiTab: { ...tab },
|
|
MuiStepper: { ...stepper },
|
|
MuiStep: { ...step },
|
|
MuiStepConnector: { ...stepConnector },
|
|
MuiStepLabel: { ...stepLabel },
|
|
MuiStepIcon: { ...stepIcon },
|
|
MuiSelect: { ...select },
|
|
MuiFormControlLabel: { ...formControlLabel },
|
|
MuiFormLabel: { ...formLabel },
|
|
MuiCheckbox: { ...checkbox },
|
|
MuiRadio: { ...radio },
|
|
MuiAutocomplete: { ...autocompletle },
|
|
MuiPopover: { ...popover },
|
|
MuiButtonBase: { ...buttonBase },
|
|
MuiIcon: { ...icon },
|
|
MuiSvgIcon: { ...svgIcon },
|
|
MuiLink: { ...link },
|
|
MuiDialog: { ...dialog },
|
|
MuiDialogTitle: { ...dialogTitle },
|
|
MuiDialogContent: { ...dialogContent },
|
|
MuiDialogContentText: { ...dialogContentText },
|
|
MuiDialogActions: { ...dialogActions },
|
|
},
|
|
});
|
|
|
|
/**
|
|
=========================================================
|
|
* Material Dashboard 2 PRO React - v2.0.0
|
|
=========================================================
|
|
|
|
* Product Page: https://www.creative-tim.com/product/soft-ui-dashboard-pro-material-ui
|
|
* Copyright 2021 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.
|
|
*/
|
|
var themeDarkRTL = createTheme$1({
|
|
direction: "rtl",
|
|
breakpoints: { ...breakpoints },
|
|
palette: { ...colors },
|
|
typography: { ...typography },
|
|
boxShadows: { ...boxShadows },
|
|
borders: { ...borders },
|
|
functions: {
|
|
boxShadow,
|
|
hexToRgb,
|
|
linearGradient,
|
|
pxToRem,
|
|
rgba,
|
|
},
|
|
components: {
|
|
MuiCssBaseline: {
|
|
styleOverrides: {
|
|
...globals,
|
|
...flatpickr,
|
|
...container,
|
|
},
|
|
},
|
|
MuiDrawer: { ...sidenav },
|
|
MuiList: { ...list },
|
|
MuiListItem: { ...listItem },
|
|
MuiListItemText: { ...listItemText },
|
|
MuiCard: { ...card },
|
|
MuiCardMedia: { ...cardMedia },
|
|
MuiCardContent: { ...cardContent },
|
|
MuiButton: { ...button },
|
|
MuiIconButton: { ...iconButton },
|
|
MuiInput: { ...input },
|
|
MuiInputLabel: { ...inputLabel },
|
|
MuiOutlinedInput: { ...inputOutlined },
|
|
MuiTextField: { ...textField },
|
|
MuiMenu: { ...menu },
|
|
MuiMenuItem: { ...menuItem$1 },
|
|
MuiSwitch: { ...switchButton },
|
|
MuiDivider: { ...divider },
|
|
MuiTableContainer: { ...tableContainer },
|
|
MuiTableHead: { ...tableHead },
|
|
MuiTableCell: { ...tableCell },
|
|
MuiLinearProgress: { ...linearProgress },
|
|
MuiBreadcrumbs: { ...breadcrumbs },
|
|
MuiSlider: { ...slider },
|
|
MuiAvatar: { ...avatar },
|
|
MuiTooltip: { ...tooltip },
|
|
MuiAppBar: { ...appBar },
|
|
MuiTabs: { ...tabs },
|
|
MuiTab: { ...tab },
|
|
MuiStepper: { ...stepper },
|
|
MuiStep: { ...step },
|
|
MuiStepConnector: { ...stepConnector },
|
|
MuiStepLabel: { ...stepLabel },
|
|
MuiStepIcon: { ...stepIcon },
|
|
MuiSelect: { ...select },
|
|
MuiFormControlLabel: { ...formControlLabel },
|
|
MuiFormLabel: { ...formLabel },
|
|
MuiCheckbox: { ...checkbox },
|
|
MuiRadio: { ...radio },
|
|
MuiAutocomplete: { ...autocompletle },
|
|
MuiPopover: { ...popover },
|
|
MuiButtonBase: { ...buttonBase },
|
|
MuiIcon: { ...icon },
|
|
MuiSvgIcon: { ...svgIcon },
|
|
MuiLink: { ...link },
|
|
MuiDialog: { ...dialog },
|
|
MuiDialogTitle: { ...dialogTitle },
|
|
MuiDialogContent: { ...dialogContent },
|
|
MuiDialogContentText: { ...dialogContentText },
|
|
MuiDialogActions: { ...dialogActions },
|
|
},
|
|
});
|
|
|
|
function DashboardLayout({ children }) {
|
|
const [controller, dispatch] = useMaterialUIController();
|
|
const { miniSidenav } = controller;
|
|
const { pathname } = useLocation();
|
|
useEffect(() => {
|
|
setLayout(dispatch, "dashboard");
|
|
}, [pathname]);
|
|
return (jsx(MDBox, { sx: ({ breakpoints, transitions, functions: { pxToRem } }) => ({
|
|
p: 3,
|
|
position: "relative",
|
|
[breakpoints.up("xl")]: {
|
|
marginLeft: miniSidenav ? pxToRem(120) : pxToRem(274),
|
|
transition: transitions.create(["margin-left", "margin-right"], {
|
|
easing: transitions.easing.easeInOut,
|
|
duration: transitions.duration.standard,
|
|
}),
|
|
},
|
|
}), children: children }));
|
|
}
|
|
|
|
/**
|
|
=========================================================
|
|
* 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.
|
|
*/
|
|
var MDInputRoot = styled(TextField)(({ theme, ownerState }) => {
|
|
const { palette, functions } = theme;
|
|
const { error, success, disabled } = ownerState;
|
|
const { grey, transparent, error: colorError, success: colorSuccess } = palette;
|
|
const { pxToRem } = functions;
|
|
// styles for the input with error={true}
|
|
const errorStyles = () => ({
|
|
backgroundImage: "url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23F44335' viewBox='0 0 12 12'%3E%3Ccircle cx='6' cy='6' r='4.5'/%3E%3Cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3E%3Ccircle cx='6' cy='8.2' r='.6' fill='%23F44335' stroke='none'/%3E%3C/svg%3E\")",
|
|
backgroundRepeat: "no-repeat",
|
|
backgroundPosition: `right ${pxToRem(12)} center`,
|
|
backgroundSize: `${pxToRem(16)} ${pxToRem(16)}`,
|
|
"& .Mui-focused": {
|
|
"& .MuiOutlinedInput-notchedOutline, &:after": {
|
|
borderColor: colorError.main,
|
|
},
|
|
},
|
|
"& .MuiInputLabel-root.Mui-focused": {
|
|
color: colorError.main,
|
|
},
|
|
});
|
|
// styles for the input with success={true}
|
|
const successStyles = () => ({
|
|
backgroundImage: "url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8'%3E%3Cpath fill='%234CAF50' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3E%3C/svg%3E\")",
|
|
backgroundRepeat: "no-repeat",
|
|
backgroundPosition: `right ${pxToRem(12)} center`,
|
|
backgroundSize: `${pxToRem(16)} ${pxToRem(16)}`,
|
|
"& .Mui-focused": {
|
|
"& .MuiOutlinedInput-notchedOutline, &:after": {
|
|
borderColor: colorSuccess.main,
|
|
},
|
|
},
|
|
"& .MuiInputLabel-root.Mui-focused": {
|
|
color: colorSuccess.main,
|
|
},
|
|
});
|
|
return {
|
|
backgroundColor: disabled ? `${grey[200]} !important` : transparent.main,
|
|
pointerEvents: disabled ? "none" : "auto",
|
|
...(error && errorStyles()),
|
|
...(success && successStyles()),
|
|
};
|
|
});
|
|
|
|
const MDInput = forwardRef(({ error, success, disabled, ...rest }, ref) => (jsx(MDInputRoot, { ...rest, ref: ref, ownerState: { error, success, disabled } })));
|
|
// Declaring default props for MDInput
|
|
MDInput.defaultProps = {
|
|
error: false,
|
|
success: false,
|
|
disabled: false,
|
|
};
|
|
|
|
/**
|
|
=========================================================
|
|
* 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.
|
|
*/
|
|
var MDBadgeRoot = styled(Badge)(({ theme, ownerState }) => {
|
|
const { palette, typography, borders, functions } = theme;
|
|
const { color, circular, border, size, indicator, variant, container, children } = ownerState;
|
|
const { white, dark, gradients, badgeColors } = palette;
|
|
const { size: fontSize, fontWeightBold } = typography;
|
|
const { borderRadius, borderWidth } = borders;
|
|
const { pxToRem, linearGradient } = functions;
|
|
// padding values
|
|
const paddings = {
|
|
xs: "0.45em 0.775em",
|
|
sm: "0.55em 0.9em",
|
|
md: "0.65em 1em",
|
|
lg: "0.85em 1.375em",
|
|
};
|
|
// fontSize value
|
|
const fontSizeValue = size === "xs" ? fontSize.xxs : fontSize.xs;
|
|
// border value
|
|
const borderValue = border ? `${borderWidth[3]} solid ${white.main}` : "none";
|
|
// borderRadius value
|
|
const borderRadiusValue = circular ? borderRadius.section : borderRadius.md;
|
|
// styles for the badge with indicator={true}
|
|
const indicatorStyles = (sizeProp) => {
|
|
let widthValue = pxToRem(20);
|
|
let heightValue = pxToRem(20);
|
|
if (sizeProp === "medium") {
|
|
widthValue = pxToRem(24);
|
|
heightValue = pxToRem(24);
|
|
}
|
|
else if (sizeProp === "large") {
|
|
widthValue = pxToRem(32);
|
|
heightValue = pxToRem(32);
|
|
}
|
|
return {
|
|
width: widthValue,
|
|
height: heightValue,
|
|
display: "grid",
|
|
placeItems: "center",
|
|
textAlign: "center",
|
|
borderRadius: "50%",
|
|
padding: 0,
|
|
border: borderValue,
|
|
};
|
|
};
|
|
// styles for the badge with variant="gradient"
|
|
const gradientStyles = (colorProp) => {
|
|
const backgroundValue = gradients[colorProp]
|
|
? linearGradient(gradients[colorProp].main, gradients[colorProp].state)
|
|
: linearGradient(gradients.info.main, gradients.info.state);
|
|
const colorValue = colorProp === "light" ? dark.main : white.main;
|
|
return {
|
|
background: backgroundValue,
|
|
color: colorValue,
|
|
};
|
|
};
|
|
// styles for the badge with variant="contained"
|
|
const containedStyles = (colorProp) => {
|
|
const backgroundValue = badgeColors[colorProp]
|
|
? badgeColors[colorProp].background
|
|
: badgeColors.info.background;
|
|
let colorValue = badgeColors[colorProp] ? badgeColors[colorProp].text : badgeColors.info.text;
|
|
if (colorProp === "light") {
|
|
colorValue = dark.main;
|
|
}
|
|
return {
|
|
background: backgroundValue,
|
|
color: colorValue,
|
|
};
|
|
};
|
|
// styles for the badge with no children and container={false}
|
|
const standAloneStyles = () => ({
|
|
position: "static",
|
|
marginLeft: pxToRem(8),
|
|
transform: "none",
|
|
fontSize: pxToRem(9),
|
|
});
|
|
// styles for the badge with container={true}
|
|
const containerStyles = () => ({
|
|
position: "relative",
|
|
transform: "none",
|
|
});
|
|
return {
|
|
"& .MuiBadge-badge": {
|
|
height: "auto",
|
|
padding: paddings[size] || paddings.xs,
|
|
fontSize: fontSizeValue,
|
|
fontWeight: fontWeightBold,
|
|
textTransform: "uppercase",
|
|
lineHeight: 1,
|
|
textAlign: "center",
|
|
whiteSpace: "nowrap",
|
|
verticalAlign: "baseline",
|
|
border: borderValue,
|
|
borderRadius: borderRadiusValue,
|
|
...(indicator && indicatorStyles(size)),
|
|
...(variant === "gradient" && gradientStyles(color)),
|
|
...(variant === "contained" && containedStyles(color)),
|
|
...(!children && !container && standAloneStyles()),
|
|
...(container && containerStyles()),
|
|
},
|
|
};
|
|
});
|
|
|
|
const MDBadge = forwardRef(({ color, variant, size, circular, indicator, border, container, children, ...rest }, ref) => (jsx(MDBadgeRoot, { ...rest, ownerState: { color, variant, size, circular, indicator, border, container, children }, ref: ref, color: "default", children: children })));
|
|
// declaring default props for MDBadge
|
|
MDBadge.defaultProps = {
|
|
color: "info",
|
|
variant: "gradient",
|
|
size: "sm",
|
|
circular: false,
|
|
indicator: false,
|
|
border: false,
|
|
container: false,
|
|
children: false,
|
|
};
|
|
|
|
function Breadcrumbs({ icon, title, route, light }) {
|
|
const routes = route.slice(0, -1);
|
|
return (jsxs(MDBox, { mr: { xs: 0, xl: 8 }, children: [jsxs(Breadcrumbs$1, { sx: {
|
|
"& .MuiBreadcrumbs-separator": {
|
|
color: ({ palette: { white, grey } }) => (light ? white.main : grey[600]),
|
|
},
|
|
}, children: [jsx(Link$1, { to: "/", children: jsx(MDTypography, { component: "span", variant: "body2", color: light ? "white" : "dark", opacity: light ? 0.8 : 0.5, sx: { lineHeight: 0 }, children: jsx(Icon, { children: icon }) }) }), routes.map((el) => (jsx(Link$1, { to: `/${el}`, children: jsx(MDTypography, { component: "span", variant: "button", fontWeight: "regular", textTransform: "capitalize", color: light ? "white" : "dark", opacity: light ? 0.8 : 0.5, sx: { lineHeight: 0 }, children: el }) }, el))), jsx(MDTypography, { variant: "button", fontWeight: "regular", textTransform: "capitalize", color: light ? "white" : "dark", sx: { lineHeight: 0 }, children: title.replace("-", " ") })] }), jsx(MDTypography, { fontWeight: "bold", textTransform: "capitalize", variant: "h6", color: light ? "white" : "dark", noWrap: true, children: title.replace("-", " ") })] }));
|
|
}
|
|
// Declaring default props for Breadcrumbs
|
|
Breadcrumbs.defaultProps = {
|
|
light: false,
|
|
};
|
|
|
|
function menuItem(theme) {
|
|
const { palette, borders, transitions } = theme;
|
|
const { secondary, light, dark } = palette;
|
|
const { borderRadius } = borders;
|
|
return {
|
|
display: "flex",
|
|
alignItems: "center",
|
|
width: "100%",
|
|
color: secondary.main,
|
|
borderRadius: borderRadius.md,
|
|
transition: transitions.create("background-color", {
|
|
easing: transitions.easing.easeInOut,
|
|
duration: transitions.duration.standard,
|
|
}),
|
|
"& *": {
|
|
transition: "color 100ms linear",
|
|
},
|
|
"&:not(:last-child)": {
|
|
mb: 1,
|
|
},
|
|
"&:hover": {
|
|
backgroundColor: light.main,
|
|
"& *": {
|
|
color: dark.main,
|
|
},
|
|
},
|
|
};
|
|
}
|
|
|
|
const NotificationItem = forwardRef(({ icon, title, ...rest }, ref) => (jsx(MenuItem, { ...rest, ref: ref, sx: (theme) => menuItem(theme), children: jsxs(MDBox, { component: Link, py: 0.5, display: "flex", alignItems: "center", lineHeight: 1, children: [jsx(MDTypography, { variant: "body1", color: "secondary", lineHeight: 0.75, children: icon }), jsx(MDTypography, { variant: "button", fontWeight: "regular", sx: { ml: 1 }, children: title })] }) })));
|
|
|
|
/**
|
|
=========================================================
|
|
* 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 navbar(theme, ownerState) {
|
|
const { palette, boxShadows, functions, transitions, breakpoints, borders } = theme;
|
|
const { transparentNavbar, absolute, light, darkMode } = ownerState;
|
|
const { dark, white, text, transparent, background } = palette;
|
|
const { navbarBoxShadow } = boxShadows;
|
|
const { rgba, pxToRem } = functions;
|
|
const { borderRadius } = borders;
|
|
return {
|
|
boxShadow: transparentNavbar || absolute ? "none" : navbarBoxShadow,
|
|
backdropFilter: transparentNavbar || absolute ? "none" : `saturate(200%) blur(${pxToRem(30)})`,
|
|
backgroundColor: transparentNavbar || absolute
|
|
? `${transparent.main} !important`
|
|
: rgba(darkMode ? background.default : white.main, 0.8),
|
|
color: () => {
|
|
let color;
|
|
if (light) {
|
|
color = white.main;
|
|
}
|
|
else if (transparentNavbar) {
|
|
color = text.main;
|
|
}
|
|
else {
|
|
color = dark.main;
|
|
}
|
|
return color;
|
|
},
|
|
top: absolute ? 0 : pxToRem(12),
|
|
minHeight: pxToRem(75),
|
|
display: "grid",
|
|
alignItems: "center",
|
|
borderRadius: borderRadius.xl,
|
|
paddingTop: pxToRem(8),
|
|
paddingBottom: pxToRem(8),
|
|
paddingRight: absolute ? pxToRem(8) : 0,
|
|
paddingLeft: absolute ? pxToRem(16) : 0,
|
|
"& > *": {
|
|
transition: transitions.create("all", {
|
|
easing: transitions.easing.easeInOut,
|
|
duration: transitions.duration.standard,
|
|
}),
|
|
},
|
|
"& .MuiToolbar-root": {
|
|
display: "flex",
|
|
justifyContent: "space-between",
|
|
alignItems: "center",
|
|
[breakpoints.up("sm")]: {
|
|
minHeight: "auto",
|
|
padding: `${pxToRem(4)} ${pxToRem(16)}`,
|
|
},
|
|
},
|
|
};
|
|
}
|
|
const navbarContainer = ({ breakpoints }) => ({
|
|
flexDirection: "column",
|
|
alignItems: "flex-start",
|
|
justifyContent: "space-between",
|
|
pt: 0.5,
|
|
pb: 0.5,
|
|
[breakpoints.up("md")]: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
paddingTop: "0",
|
|
paddingBottom: "0",
|
|
},
|
|
});
|
|
const navbarRow = ({ breakpoints }, { isMini }) => ({
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "space-between",
|
|
width: "100%",
|
|
[breakpoints.up("md")]: {
|
|
justifyContent: isMini ? "space-between" : "stretch",
|
|
width: isMini ? "100%" : "max-content",
|
|
},
|
|
[breakpoints.up("xl")]: {
|
|
justifyContent: "stretch !important",
|
|
width: "max-content !important",
|
|
},
|
|
});
|
|
const navbarIconButton = ({ typography: { size }, breakpoints }) => ({
|
|
px: 1,
|
|
"& .material-icons, .material-icons-round": {
|
|
fontSize: `${size.xl} !important`,
|
|
},
|
|
"& .MuiTypography-root": {
|
|
display: "none",
|
|
[breakpoints.up("sm")]: {
|
|
display: "inline-block",
|
|
lineHeight: 1.2,
|
|
ml: 0.5,
|
|
},
|
|
},
|
|
});
|
|
const navbarDesktopMenu = ({ breakpoints }) => ({
|
|
display: "none !important",
|
|
cursor: "pointer",
|
|
[breakpoints.up("xl")]: {
|
|
display: "inline-block !important",
|
|
},
|
|
});
|
|
const navbarMobileMenu = ({ breakpoints }) => ({
|
|
display: "inline-block",
|
|
lineHeight: 0,
|
|
[breakpoints.up("xl")]: {
|
|
display: "none",
|
|
},
|
|
});
|
|
|
|
function DashboardNavbar({ absolute, light, isMini }) {
|
|
const [navbarType, setNavbarType] = useState();
|
|
const [controller, dispatch] = useMaterialUIController();
|
|
const { miniSidenav, transparentNavbar, fixedNavbar, openConfigurator, darkMode } = controller;
|
|
const [openMenu, setOpenMenu] = useState(false);
|
|
const route = useLocation().pathname.split("/").slice(1);
|
|
useEffect(() => {
|
|
// Setting the navbar type
|
|
if (fixedNavbar) {
|
|
setNavbarType("sticky");
|
|
}
|
|
else {
|
|
setNavbarType("static");
|
|
}
|
|
// A function that sets the transparent state of the navbar.
|
|
function handleTransparentNavbar() {
|
|
setTransparentNavbar(dispatch, (fixedNavbar && window.scrollY === 0) || !fixedNavbar);
|
|
}
|
|
/**
|
|
The event listener that's calling the handleTransparentNavbar function when
|
|
scrolling the window.
|
|
*/
|
|
window.addEventListener("scroll", handleTransparentNavbar);
|
|
// Call the handleTransparentNavbar function to set the state with the initial value.
|
|
handleTransparentNavbar();
|
|
// Remove event listener on cleanup
|
|
return () => window.removeEventListener("scroll", handleTransparentNavbar);
|
|
}, [dispatch, fixedNavbar]);
|
|
const handleMiniSidenav = () => setMiniSidenav(dispatch, !miniSidenav);
|
|
const handleConfiguratorOpen = () => setOpenConfigurator(dispatch, !openConfigurator);
|
|
const handleOpenMenu = (event) => setOpenMenu(event.currentTarget);
|
|
const handleCloseMenu = () => setOpenMenu(false);
|
|
// Render the notifications menu
|
|
const renderMenu = () => (jsxs(Menu, { anchorEl: openMenu, anchorReference: null, anchorOrigin: {
|
|
vertical: "bottom",
|
|
horizontal: "left",
|
|
}, open: Boolean(openMenu), onClose: handleCloseMenu, sx: { mt: 2 }, children: [jsx(NotificationItem, { icon: jsx(Icon, { children: "email" }), title: "Check new messages" }), jsx(NotificationItem, { icon: jsx(Icon, { children: "podcasts" }), title: "Manage Podcast sessions" }), jsx(NotificationItem, { icon: jsx(Icon, { children: "shopping_cart" }), title: "Payment successfully completed" })] }));
|
|
// Styles for the navbar icons
|
|
const iconsStyle = ({ palette: { dark, white, text }, functions: { rgba }, }) => ({
|
|
color: () => {
|
|
let colorValue = light || darkMode ? white.main : dark.main;
|
|
if (transparentNavbar && !light) {
|
|
colorValue = darkMode ? rgba(text.main, 0.6) : text.main;
|
|
}
|
|
return colorValue;
|
|
},
|
|
});
|
|
return (jsx(AppBar, { position: absolute ? "absolute" : navbarType, color: "inherit", sx: (theme) => navbar(theme, { transparentNavbar, absolute, light, darkMode }), children: jsxs(Toolbar, { sx: navbarContainer, children: [jsxs(MDBox, { color: "inherit", mb: { xs: 1, md: 0 }, sx: (theme) => navbarRow(theme, { isMini }), children: [jsx(Breadcrumbs, { icon: "home", title: route[route.length - 1], route: route, light: light }), jsx(IconButton, { sx: navbarDesktopMenu, onClick: handleMiniSidenav, size: "small", disableRipple: true, children: jsx(Icon, { fontSize: "medium", sx: iconsStyle, children: miniSidenav ? "menu_open" : "menu" }) })] }), isMini ? null : (jsxs(MDBox, { sx: (theme) => navbarRow(theme, { isMini }), children: [jsx(MDBox, { pr: 1, children: jsx(MDInput, { label: "Search here" }) }), jsxs(MDBox, { color: light ? "white" : "inherit", children: [jsx(Link$1, { to: "/authentication/sign-in/basic", children: jsx(IconButton, { sx: navbarIconButton, size: "small", disableRipple: true, children: jsx(Icon, { sx: iconsStyle, children: "account_circle" }) }) }), jsx(IconButton, { size: "small", disableRipple: true, color: "inherit", sx: navbarMobileMenu, onClick: handleMiniSidenav, children: jsx(Icon, { sx: iconsStyle, fontSize: "medium", children: miniSidenav ? "menu_open" : "menu" }) }), jsx(IconButton, { size: "small", disableRipple: true, color: "inherit", sx: navbarIconButton, onClick: handleConfiguratorOpen, children: jsx(Icon, { sx: iconsStyle, children: "settings" }) }), jsx(IconButton, { size: "small", color: "inherit", sx: navbarIconButton, onClick: handleOpenMenu, children: jsx(MDBadge, { badgeContent: 9, color: "error", size: "xs", circular: true, children: jsx(Icon, { sx: iconsStyle, children: "notifications" }) }) }), renderMenu()] })] }))] }) }));
|
|
}
|
|
// Declaring default props for DashboardNavbar
|
|
DashboardNavbar.defaultProps = {
|
|
absolute: false,
|
|
light: false,
|
|
isMini: false,
|
|
};
|
|
|
|
function Footer$1({ company, links }) {
|
|
const { href, name } = company;
|
|
const { size } = typography$1;
|
|
const renderLinks = () => links.map((link) => (jsx(MDBox, { component: "li", px: 2, lineHeight: 1, children: jsx(Link, { href: link.href, target: "_blank", children: jsx(MDTypography, { variant: "button", fontWeight: "regular", color: "text", children: link.name }) }) }, link.name)));
|
|
return (jsxs(MDBox, { width: "100%", display: "flex", flexDirection: { xs: "column", lg: "row" }, justifyContent: "space-between", alignItems: "center", px: 1.5, children: [jsxs(MDBox, { display: "flex", justifyContent: "center", alignItems: "center", flexWrap: "wrap", color: "text", fontSize: size.sm, px: 1.5, children: ["\u00A9 ", new Date().getFullYear(), ", made with", jsx(MDBox, { fontSize: size.md, color: "text", mb: -0.5, mx: 0.25, children: jsx(Icon, { color: "inherit", fontSize: "inherit", children: "favorite" }) }), "by", jsx(Link, { href: href, target: "_blank", children: jsxs(MDTypography, { variant: "button", fontWeight: "medium", children: ["\u00A0", name, "\u00A0"] }) }), "for a better web."] }), jsx(MDBox, { component: "ul", sx: ({ breakpoints }) => ({
|
|
display: "flex",
|
|
flexWrap: "wrap",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
listStyle: "none",
|
|
mt: 3,
|
|
mb: 0,
|
|
p: 0,
|
|
[breakpoints.up("lg")]: {
|
|
mt: 0,
|
|
},
|
|
}), children: renderLinks() })] }));
|
|
}
|
|
// Declaring default props for Footer
|
|
Footer$1.defaultProps = {
|
|
company: { href: "https://www.creative-tim.com/", name: "Creative Tim" },
|
|
links: [
|
|
{ href: "https://www.creative-tim.com/", name: "Creative Tim" },
|
|
{ href: "https://www.creative-tim.com/presentation", name: "About Us" },
|
|
{ href: "https://www.creative-tim.com/blog", name: "Blog" },
|
|
{ href: "https://www.creative-tim.com/license", name: "License" },
|
|
],
|
|
};
|
|
|
|
/**
|
|
=========================================================
|
|
* 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$4(labels, datasets) {
|
|
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,
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
};
|
|
}
|
|
|
|
function ReportsBarChart({ color, title, description, date, chart }) {
|
|
const { data, options } = configs$4(chart.labels || [], chart.datasets || {});
|
|
return (jsx(Card, { sx: { height: "100%" }, children: jsxs(MDBox, { padding: "1rem", children: [useMemo(() => (jsx(MDBox, { variant: "gradient", bgColor: color, borderRadius: "lg", coloredShadow: color, py: 2, pr: 0.5, mt: -5, height: "12.5rem", children: jsx(Bar, { data: data, options: options }) })), [chart, color]), jsxs(MDBox, { pt: 3, pb: 1, px: 1, children: [jsx(MDTypography, { variant: "h6", textTransform: "capitalize", children: title }), jsx(MDTypography, { component: "div", variant: "button", color: "text", fontWeight: "light", children: description }), jsx(Divider, {}), jsxs(MDBox, { display: "flex", alignItems: "center", children: [jsx(MDTypography, { variant: "button", color: "text", lineHeight: 1, sx: { mt: 0.15, mr: 0.5 }, children: jsx(Icon, { children: "schedule" }) }), jsx(MDTypography, { variant: "button", color: "text", fontWeight: "light", children: date })] })] })] }) }));
|
|
}
|
|
// Setting default values for the props of ReportsBarChart
|
|
ReportsBarChart.defaultProps = {
|
|
color: "dark",
|
|
description: "",
|
|
};
|
|
|
|
/**
|
|
=========================================================
|
|
* 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$3(labels, datasets) {
|
|
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,
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
};
|
|
}
|
|
|
|
function ReportsLineChart({ color, title, description, date, chart }) {
|
|
const { data, options } = configs$3(chart.labels || [], chart.datasets || {});
|
|
return (jsx(Card, { sx: { height: "100%" }, children: jsxs(MDBox, { padding: "1rem", children: [useMemo(() => (jsx(MDBox, { variant: "gradient", bgColor: color, borderRadius: "lg", coloredShadow: color, py: 2, pr: 0.5, mt: -5, height: "12.5rem", children: jsx(Line, { data: data, options: options }) })), [chart, color]), jsxs(MDBox, { pt: 3, pb: 1, px: 1, children: [jsx(MDTypography, { variant: "h6", textTransform: "capitalize", children: title }), jsx(MDTypography, { component: "div", variant: "button", color: "text", fontWeight: "light", children: description }), jsx(Divider, {}), jsxs(MDBox, { display: "flex", alignItems: "center", children: [jsx(MDTypography, { variant: "button", color: "text", lineHeight: 1, sx: { mt: 0.15, mr: 0.5 }, children: jsx(Icon, { children: "schedule" }) }), jsx(MDTypography, { variant: "button", color: "text", fontWeight: "light", children: date })] })] })] }) }));
|
|
}
|
|
// Declaring default props for ReportsLineChart
|
|
ReportsLineChart.defaultProps = {
|
|
color: "dark",
|
|
description: "",
|
|
};
|
|
|
|
function ComplexStatisticsCard({ color, title, count, percentage, icon }) {
|
|
return (jsxs(Card, { children: [jsxs(MDBox, { display: "flex", justifyContent: "space-between", pt: 1, px: 2, children: [jsx(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, children: jsx(Icon, { fontSize: "medium", color: "inherit", children: icon }) }), jsxs(MDBox, { textAlign: "right", lineHeight: 1.25, children: [jsx(MDTypography, { variant: "button", fontWeight: "light", color: "text", children: title }), jsx(MDTypography, { variant: "h4", children: count })] })] }), jsx(Divider, {}), jsx(MDBox, { pb: 2, px: 2, children: jsxs(MDTypography, { component: "p", variant: "button", color: "text", display: "flex", children: [jsx(MDTypography, { component: "span", variant: "button", fontWeight: "bold", color: percentage.color, children: percentage.amount }), "\u00A0", percentage.label] }) })] }));
|
|
}
|
|
// Declaring defualt props for ComplexStatisticsCard
|
|
ComplexStatisticsCard.defaultProps = {
|
|
color: "info",
|
|
percentage: {
|
|
color: "success",
|
|
text: "",
|
|
label: "",
|
|
},
|
|
};
|
|
|
|
function BookingCard({ image, title, description, price, location, action }) {
|
|
return (jsxs(Card, { sx: {
|
|
"&:hover .card-header": {
|
|
transform: action && "translate3d(0, -50px, 0)",
|
|
},
|
|
}, children: [jsxs(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)" }, children: [jsx(MDBox, { component: "img", src: image, alt: title, borderRadius: "lg", shadow: "md", width: "100%", height: "100%", position: "relative", zIndex: 1 }), jsx(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",
|
|
} })] }), jsxs(MDBox, { textAlign: "center", pt: 3, px: 3, children: [jsx(MDBox, { display: "flex", justifyContent: "center", alignItems: "center", mt: action ? -8 : -4.25, children: action }), jsx(MDTypography, { variant: "h5", fontWeight: "regular", sx: { mt: 4 }, children: title }), jsx(MDTypography, { variant: "body2", color: "text", sx: { mt: 1.5, mb: 1 }, children: description })] }), jsx(Divider, {}), jsxs(MDBox, { display: "flex", justifyContent: "space-between", alignItems: "center", pt: 0.5, pb: 3, px: 3, lineHeight: 1, children: [jsx(MDTypography, { variant: "body2", fontWeight: "regular", color: "text", children: price }), jsxs(MDBox, { color: "text", display: "flex", alignItems: "center", children: [jsx(Icon, { color: "inherit", sx: { m: 0.5 }, children: "place" }), jsx(MDTypography, { variant: "button", fontWeight: "light", color: "text", children: location })] })] })] }));
|
|
}
|
|
// Declaring default props for BookingCard
|
|
BookingCard.defaultProps = {
|
|
action: false,
|
|
};
|
|
|
|
function SalesTableCell({ title, content, image, noBorder, ...rest }) {
|
|
let template;
|
|
if (image) {
|
|
template = (jsx(TableCell$1, { ...rest, align: "left", width: "30%", sx: { border: noBorder && 0 }, children: jsxs(MDBox, { display: "flex", alignItems: "center", width: "max-content", children: [jsx(MDBox, { component: "img", src: image, alt: content.toString(), width: "1.5rem", height: "auto" }), " ", jsxs(MDBox, { display: "flex", flexDirection: "column", ml: 3, children: [jsxs(MDTypography, { variant: "caption", color: "text", fontWeight: "medium", textTransform: "capitalize", children: [title, ":"] }), jsx(MDTypography, { variant: "button", fontWeight: "regular", textTransform: "capitalize", children: content })] })] }) }));
|
|
}
|
|
else {
|
|
template = (jsx(TableCell$1, { ...rest, align: "center", sx: { border: noBorder && 0 }, children: jsxs(MDBox, { display: "flex", flexDirection: "column", children: [jsxs(MDTypography, { variant: "caption", color: "text", fontWeight: "medium", textTransform: "capitalize", children: [title, ":"] }), jsx(MDTypography, { variant: "button", fontWeight: "regular", textTransform: "capitalize", children: content })] }) }));
|
|
}
|
|
return template;
|
|
}
|
|
// Declaring default props for SalesTableCell
|
|
SalesTableCell.defaultProps = {
|
|
image: "",
|
|
noBorder: false,
|
|
};
|
|
|
|
function SalesTable({ title, rows, shadow }) {
|
|
const renderTableCells = rows.map((row, key) => {
|
|
const tableRows = [];
|
|
const rowKey = `row-${key}`;
|
|
Object.entries(row).map(([cellTitle, cellContent]) => Array.isArray(cellContent)
|
|
? tableRows.push(jsx(SalesTableCell, { title: cellTitle, content: cellContent[1], image: cellContent[0], noBorder: key === rows.length - 1 }, cellContent[1]))
|
|
: tableRows.push(jsx(SalesTableCell, { title: cellTitle, content: cellContent, noBorder: key === rows.length - 1 }, cellContent)));
|
|
return jsx(TableRow, { children: tableRows }, rowKey);
|
|
});
|
|
return (jsx(TableContainer, { sx: { height: "100%", boxShadow: !shadow && "none" }, children: jsxs(Table, { children: [title ? (jsx(TableHead, { children: jsx(MDBox, { component: "tr", width: "max-content", display: "block", mb: 1.5, children: jsx(MDTypography, { variant: "h6", component: "td", children: title }) }) })) : null, jsx(TableBody, { children: useMemo(() => renderTableCells, [rows]) })] }) }));
|
|
}
|
|
// Declaring default props for SalesTable
|
|
SalesTable.defaultProps = {
|
|
title: "",
|
|
rows: [{}],
|
|
shadow: true,
|
|
};
|
|
|
|
/**
|
|
=========================================================
|
|
* 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 salesTableData$1 = [
|
|
{
|
|
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%" },
|
|
];
|
|
|
|
function SalesByCountry() {
|
|
return (jsxs(Card, { sx: { width: "100%" }, children: [jsxs(MDBox, { display: "flex", children: [jsx(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, children: jsx(Icon, { fontSize: "medium", color: "inherit", children: "language" }) }), jsx(MDTypography, { variant: "h6", sx: { mt: 2, mb: 1, ml: 2 }, children: "Sales by Country" })] }), jsx(MDBox, { p: 2, children: jsxs(Grid, { container: true, children: [jsx(Grid, { item: true, xs: 12, md: 7, lg: 6, children: jsx(SalesTable, { rows: salesTableData$1, shadow: false }) }), jsx(Grid, { item: true, xs: 12, md: 5, lg: 6, sx: { mt: { xs: 5, lg: 0 } }, children: jsx(VectorMap, { map: worldMerc, zoomOnScroll: false, zoomButtons: false, markersSelectable: true, 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 }) })] }) })] }));
|
|
}
|
|
|
|
/**
|
|
=========================================================
|
|
* 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] },
|
|
};
|
|
|
|
/**
|
|
=========================================================
|
|
* 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] },
|
|
},
|
|
};
|
|
|
|
function Analytics() {
|
|
const { sales, tasks } = reportsLineChartData;
|
|
// Action buttons for the BookingCard
|
|
const actionButtons = (jsxs(Fragment, { children: [jsx(Tooltip, { title: "Refresh", placement: "bottom", children: jsx(MDTypography, { variant: "body1", color: "primary", lineHeight: 1, sx: { cursor: "pointer", mx: 3 }, children: jsx(Icon, { color: "inherit", children: "refresh" }) }) }), jsx(Tooltip, { title: "Edit", placement: "bottom", children: jsx(MDTypography, { variant: "body1", color: "info", lineHeight: 1, sx: { cursor: "pointer", mx: 3 }, children: jsx(Icon, { color: "inherit", children: "edit" }) }) })] }));
|
|
return (jsxs(DashboardLayout, { children: [jsx(DashboardNavbar, {}), jsxs(MDBox, { py: 3, children: [jsx(Grid, { container: true, children: jsx(SalesByCountry, {}) }), jsx(MDBox, { mt: 6, children: jsxs(Grid, { container: true, spacing: 3, children: [jsx(Grid, { item: true, xs: 12, md: 6, lg: 4, children: jsx(MDBox, { mb: 3, children: jsx(ReportsBarChart, { color: "info", title: "website views", description: "Last Campaign Performance", date: "campaign sent 2 days ago", chart: reportsBarChartData }) }) }), jsx(Grid, { item: true, xs: 12, md: 6, lg: 4, children: jsx(MDBox, { mb: 3, children: jsx(ReportsLineChart, { color: "success", title: "daily sales", description: jsxs(Fragment, { children: ["(", jsx("strong", { children: "+15%" }), ") increase in today sales."] }), date: "updated 4 min ago", chart: sales }) }) }), jsx(Grid, { item: true, xs: 12, md: 6, lg: 4, children: jsx(MDBox, { mb: 3, children: jsx(ReportsLineChart, { color: "dark", title: "completed tasks", description: "Last Campaign Performance", date: "just updated", chart: tasks }) }) })] }) }), jsx(MDBox, { mt: 1.5, children: jsxs(Grid, { container: true, spacing: 3, children: [jsx(Grid, { item: true, xs: 12, md: 6, lg: 3, children: jsx(MDBox, { mb: 1.5, children: jsx(ComplexStatisticsCard, { color: "dark", icon: "weekend", title: "Bookings", count: 281, percentage: {
|
|
color: "success",
|
|
amount: "+55%",
|
|
label: "than lask week",
|
|
} }) }) }), jsx(Grid, { item: true, xs: 12, md: 6, lg: 3, children: jsx(MDBox, { mb: 1.5, children: jsx(ComplexStatisticsCard, { icon: "leaderboard", title: "Today's Users", count: "2,300", percentage: {
|
|
color: "success",
|
|
amount: "+3%",
|
|
label: "than last month",
|
|
} }) }) }), jsx(Grid, { item: true, xs: 12, md: 6, lg: 3, children: jsx(MDBox, { mb: 1.5, children: jsx(ComplexStatisticsCard, { color: "success", icon: "store", title: "Revenue", count: "34k", percentage: {
|
|
color: "success",
|
|
amount: "+1%",
|
|
label: "than yesterday",
|
|
} }) }) }), jsx(Grid, { item: true, xs: 12, md: 6, lg: 3, children: jsx(MDBox, { mb: 1.5, children: jsx(ComplexStatisticsCard, { color: "primary", icon: "person_add", title: "Followers", count: "+91", percentage: {
|
|
color: "success",
|
|
amount: "",
|
|
label: "Just updated",
|
|
} }) }) })] }) }), jsx(MDBox, { mt: 2, children: jsxs(Grid, { container: true, spacing: 3, children: [jsx(Grid, { item: true, xs: 12, md: 6, lg: 4, children: jsx(MDBox, { mt: 3, children: jsx(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 }) }) }), jsx(Grid, { item: true, xs: 12, md: 6, lg: 4, children: jsx(MDBox, { mt: 3, children: jsx(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 }) }) }), jsx(Grid, { item: true, xs: 12, md: 6, lg: 4, children: jsx(MDBox, { mt: 3, children: jsx(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 }) }) })] }) })] }), jsx(Footer$1, {})] }));
|
|
}
|
|
|
|
const MDBadgeDot = forwardRef(({ variant, color, size, badgeContent, font = {}, ...rest }, ref) => {
|
|
let finalSize;
|
|
let fontSize;
|
|
let padding;
|
|
if (size === "sm") {
|
|
finalSize = "0.5rem";
|
|
fontSize = "caption";
|
|
padding = "0.45em 0.775em";
|
|
}
|
|
else if (size === "lg") {
|
|
finalSize = "0.625rem";
|
|
fontSize = "body2";
|
|
padding = "0.85em 1.375em";
|
|
}
|
|
else if (size === "md") {
|
|
finalSize = "0.5rem";
|
|
fontSize = "button";
|
|
padding = "0.65em 1em";
|
|
}
|
|
else {
|
|
finalSize = "0.375rem";
|
|
fontSize = "caption";
|
|
padding = "0.45em 0.775em";
|
|
}
|
|
const validColors = [
|
|
"primary",
|
|
"secondary",
|
|
"info",
|
|
"success",
|
|
"warning",
|
|
"error",
|
|
"light",
|
|
"dark",
|
|
];
|
|
const validColorIndex = validColors.findIndex((el) => el === color);
|
|
return (jsxs(MDBox, { ref: ref, display: "flex", alignItems: "center", p: padding, ...rest, children: [jsx(MDBox, { component: "i", display: "inline-block", width: finalSize, height: finalSize, borderRadius: "50%", bgColor: validColors[validColorIndex], variant: variant, mr: 1 }), jsx(MDTypography, { variant: fontSize, fontWeight: font.weight ? font.weight : "regular", color: font.color ? font.color : "dark", sx: { lineHeight: 0 }, children: badgeContent })] }));
|
|
});
|
|
// Declaring default props for MDBadgeDot
|
|
MDBadgeDot.defaultProps = {
|
|
variant: "contained",
|
|
color: "info",
|
|
size: "xs",
|
|
font: {},
|
|
};
|
|
|
|
function DefaultStatisticsCard({ title, count, percentage, dropdown }) {
|
|
const [controller] = useMaterialUIController();
|
|
const { darkMode } = controller;
|
|
return (jsx(Card, { children: jsx(MDBox, { p: 2, children: jsxs(Grid, { container: true, children: [jsxs(Grid, { item: true, xs: 7, children: [jsx(MDBox, { mb: 0.5, lineHeight: 1, children: jsx(MDTypography, { variant: "button", fontWeight: "medium", color: "text", textTransform: "capitalize", children: title }) }), jsxs(MDBox, { lineHeight: 1, children: [jsx(MDTypography, { variant: "h5", fontWeight: "bold", children: count }), jsxs(MDTypography, { variant: "button", fontWeight: "bold", color: percentage.color, children: [percentage.value, "\u00A0", jsx(MDTypography, { variant: "button", fontWeight: "regular", color: darkMode ? "text" : "secondary", children: percentage.label })] })] })] }), jsx(Grid, { item: true, xs: 5, children: dropdown && (jsxs(MDBox, { width: "100%", textAlign: "right", lineHeight: 1, children: [jsx(MDTypography, { variant: "caption", color: "secondary", fontWeight: "regular", sx: { cursor: "pointer" }, onClick: dropdown.action, children: dropdown.value }), dropdown.menu] })) })] }) }) }));
|
|
}
|
|
// Setting default values for the props of DefaultStatisticsCard
|
|
DefaultStatisticsCard.defaultProps = {
|
|
percentage: {
|
|
color: "success",
|
|
value: "",
|
|
label: "",
|
|
},
|
|
dropdown: false,
|
|
};
|
|
|
|
/**
|
|
=========================================================
|
|
* 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$2(labels, datasets) {
|
|
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,
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
};
|
|
}
|
|
|
|
function DefaultLineChart({ icon, title, description, height, chart }) {
|
|
const chartDatasets = chart.datasets
|
|
? chart.datasets.map((dataset) => ({
|
|
...dataset,
|
|
tension: 0,
|
|
pointRadius: 3,
|
|
borderWidth: 4,
|
|
backgroundColor: "transparent",
|
|
fill: true,
|
|
pointBackgroundColor: colors$1[dataset.color]
|
|
? colors$1[dataset.color || "dark"].main
|
|
: colors$1.dark.main,
|
|
borderColor: colors$1[dataset.color]
|
|
? colors$1[dataset.color || "dark"].main
|
|
: colors$1.dark.main,
|
|
maxBarThickness: 6,
|
|
}))
|
|
: [];
|
|
const { data, options } = configs$2(chart.labels || [], chartDatasets);
|
|
const renderChart = (jsxs(MDBox, { py: 2, pr: 2, pl: icon.component ? 1 : 2, children: [title || description ? (jsxs(MDBox, { display: "flex", px: description ? 1 : 0, pt: description ? 1 : 0, children: [icon.component && (jsx(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, children: jsx(Icon, { fontSize: "medium", children: icon.component }) })), jsxs(MDBox, { mt: icon.component ? -2 : 0, children: [title && jsx(MDTypography, { variant: "h6", children: title }), jsx(MDBox, { mb: 2, children: jsx(MDTypography, { component: "div", variant: "button", color: "text", children: description }) })] })] })) : null, useMemo(() => (jsx(MDBox, { height: height, children: jsx(Line, { data: data, options: options }) })), [chart, height])] }));
|
|
return title || description ? jsx(Card, { children: renderChart }) : renderChart;
|
|
}
|
|
// Declaring default props DefaultLineChart
|
|
DefaultLineChart.defaultProps = {
|
|
icon: { color: "info", component: "" },
|
|
title: "",
|
|
description: "",
|
|
height: "19.125rem",
|
|
};
|
|
|
|
/**
|
|
=========================================================
|
|
* 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$1(labels, datasets) {
|
|
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,
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
};
|
|
}
|
|
|
|
function HorizontalBarChart({ icon, title, description, height, chart }) {
|
|
const chartDatasets = chart.datasets
|
|
? chart.datasets.map((dataset) => ({
|
|
...dataset,
|
|
weight: 5,
|
|
borderWidth: 0,
|
|
borderRadius: 4,
|
|
backgroundColor: colors$1[dataset.color]
|
|
? colors$1[dataset.color || "dark"].main
|
|
: colors$1.dark.main,
|
|
fill: false,
|
|
maxBarThickness: 35,
|
|
}))
|
|
: [];
|
|
const { data, options } = configs$1(chart.labels || [], chartDatasets);
|
|
const renderChart = (jsxs(MDBox, { py: 2, pr: 2, pl: icon.component ? 1 : 2, children: [title || description ? (jsxs(MDBox, { display: "flex", px: description ? 1 : 0, pt: description ? 1 : 0, children: [icon.component && (jsx(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, children: jsx(Icon, { fontSize: "medium", children: icon.component }) })), jsxs(MDBox, { mt: icon.component ? -2 : 0, children: [title && jsx(MDTypography, { variant: "h6", children: title }), jsx(MDBox, { mb: 2, children: jsx(MDTypography, { component: "div", variant: "button", color: "text", children: description }) })] })] })) : null, useMemo(() => (jsx(MDBox, { height: height, children: jsx(Bar, { data: data, options: options }) })), [chart, height])] }));
|
|
return title || description ? jsx(Card, { children: renderChart }) : renderChart;
|
|
}
|
|
// Declaring default props HorizontalBarChart
|
|
HorizontalBarChart.defaultProps = {
|
|
icon: { color: "info", component: "" },
|
|
title: "",
|
|
description: "",
|
|
height: "19.125rem",
|
|
};
|
|
|
|
/**
|
|
=========================================================
|
|
* 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.
|
|
*/
|
|
// @ts-ignore
|
|
var MDPaginationItemRoot = styled(MDButton)(({ theme, ownerState }) => {
|
|
const { borders, functions, typography, palette } = theme;
|
|
const { variant, paginationSize, active } = ownerState;
|
|
const { borderColor } = borders;
|
|
const { pxToRem } = functions;
|
|
const { fontWeightRegular, size: fontSize } = typography;
|
|
const { light } = palette;
|
|
// width, height, minWidth and minHeight values
|
|
let sizeValue = pxToRem(36);
|
|
if (paginationSize === "small") {
|
|
sizeValue = pxToRem(30);
|
|
}
|
|
else if (paginationSize === "large") {
|
|
sizeValue = pxToRem(46);
|
|
}
|
|
return {
|
|
borderColor,
|
|
margin: `0 ${pxToRem(2)}`,
|
|
pointerEvents: active ? "none" : "auto",
|
|
fontWeight: fontWeightRegular,
|
|
fontSize: fontSize.sm,
|
|
width: sizeValue,
|
|
minWidth: sizeValue,
|
|
height: sizeValue,
|
|
minHeight: sizeValue,
|
|
"&:hover, &:focus, &:active": {
|
|
transform: "none",
|
|
boxShadow: (variant !== "gradient" || variant !== "contained") && "none !important",
|
|
opacity: "1 !important",
|
|
},
|
|
"&:hover": {
|
|
backgroundColor: light.main,
|
|
borderColor,
|
|
},
|
|
};
|
|
});
|
|
|
|
// The Pagination main context
|
|
const Context = createContext(null);
|
|
const MDPagination = forwardRef(({ item, variant, color, size, active, children, ...rest }, ref) => {
|
|
const context = useContext(Context);
|
|
const paginationSize = context ? context.size : undefined;
|
|
const providerValue = useMemo(() => ({
|
|
variant,
|
|
color,
|
|
size,
|
|
}), [variant, color, size]);
|
|
return (jsx(Context.Provider, { value: providerValue, children: item ? (jsx(MDPaginationItemRoot, { ...rest, ref: ref, variant: active ? context.variant : "outlined", color: active ? context.color : "secondary", iconOnly: true, circular: true, ownerState: { variant, active, paginationSize }, children: children })) : (jsx(MDBox, { display: "flex", justifyContent: "flex-end", alignItems: "center", sx: { listStyle: "none" }, children: children })) }));
|
|
});
|
|
// Declaring default props for MDPagination
|
|
MDPagination.defaultProps = {
|
|
item: false,
|
|
variant: "gradient",
|
|
color: "info",
|
|
size: "medium",
|
|
active: false,
|
|
};
|
|
|
|
function DataTableHeadCell({ width, children, sorted, align, ...rest }) {
|
|
const [controller] = useMaterialUIController();
|
|
const { darkMode } = controller;
|
|
return (jsx(MDBox, { component: "th", width: width, py: 1.5, px: 3, sx: ({ palette: { light }, borders: { borderWidth } }) => ({
|
|
borderBottom: `${borderWidth[1]} solid ${light.main}`,
|
|
}), children: jsxs(MDBox, { ...rest, position: "relative", textAlign: align, color: darkMode ? "white" : "secondary", opacity: 0.7, sx: ({ typography: { size, fontWeightBold } }) => ({
|
|
fontSize: size.xxs,
|
|
fontWeight: fontWeightBold,
|
|
textTransform: "uppercase",
|
|
cursor: sorted && "pointer",
|
|
userSelect: sorted && "none",
|
|
}), children: [children, sorted && (jsxs(MDBox, { position: "absolute", top: 0, right: align !== "right" ? "16px" : 0, left: align === "right" ? "-5px" : "unset", sx: ({ typography: { size } }) => ({
|
|
fontSize: size.lg,
|
|
}), children: [jsx(MDBox, { position: "absolute", top: -6, color: sorted === "asce" ? "text" : "secondary", opacity: sorted === "asce" ? 1 : 0.5, children: jsx(Icon, { children: "arrow_drop_up" }) }), jsx(MDBox, { position: "absolute", top: 0, color: sorted === "desc" ? "text" : "secondary", opacity: sorted === "desc" ? 1 : 0.5, children: jsx(Icon, { children: "arrow_drop_down" }) })] }))] }) }));
|
|
}
|
|
// Declaring default props for DataTableHeadCell
|
|
DataTableHeadCell.defaultProps = {
|
|
width: "auto",
|
|
sorted: "none",
|
|
align: "left",
|
|
};
|
|
|
|
function DataTableBodyCell({ noBorder, align, children }) {
|
|
return (jsx(MDBox, { component: "td", textAlign: align, py: 1.5, px: 3, sx: ({ palette: { light }, typography: { size }, borders: { borderWidth } }) => ({
|
|
fontSize: size.sm,
|
|
borderBottom: noBorder ? "none" : `${borderWidth[1]} solid ${light.main}`,
|
|
}), children: jsx(MDBox, { display: "inline-block", width: "max-content", color: "text", sx: { verticalAlign: "middle" }, children: children }) }));
|
|
}
|
|
// Declaring default props for DataTableBodyCell
|
|
DataTableBodyCell.defaultProps = {
|
|
noBorder: false,
|
|
align: "left",
|
|
};
|
|
|
|
function DataTable({ entriesPerPage, canSearch, showTotalEntries, table, pagination, isSorted, noEndBorder, }) {
|
|
let defaultValue;
|
|
let entries;
|
|
if (entriesPerPage) {
|
|
defaultValue = entriesPerPage.defaultValue ? entriesPerPage.defaultValue : "10";
|
|
entries = entriesPerPage.entries ? entriesPerPage.entries : ["10", "25", "50", "100"];
|
|
}
|
|
const columns = useMemo(() => table.columns, [table]);
|
|
const data = useMemo(() => 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 }, } = 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) => setPageSize(value);
|
|
// Render the paginations
|
|
const renderPagination = pageOptions.map((option) => (jsx(MDPagination, { item: true, onClick: () => gotoPage(Number(option)), active: pageIndex === option, children: option + 1 }, option)));
|
|
// Handler for the input to set the pagination index
|
|
const handleInputPagination = ({ target: { value } }) => value > pageOptions.length || value < 0 ? gotoPage(0) : gotoPage(Number(value));
|
|
// Customized page options starting from 1
|
|
const customizedPageOptions = pageOptions.map((option) => option + 1);
|
|
// Setting value for the pagination input
|
|
const handleInputPaginationValue = ({ target: value }) => 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) => {
|
|
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 (jsxs(TableContainer, { sx: { boxShadow: "none" }, children: [entriesPerPage || canSearch ? (jsxs(MDBox, { display: "flex", justifyContent: "space-between", alignItems: "center", p: 3, children: [entriesPerPage && (jsxs(MDBox, { display: "flex", alignItems: "center", children: [jsx(Autocomplete, { disableClearable: true, value: pageSize.toString(), options: entries, onChange: (event, newValue) => {
|
|
setEntriesPerPage(parseInt(newValue, 10));
|
|
}, size: "small", sx: { width: "5rem" }, renderInput: (params) => jsx(MDInput, { ...params }) }), jsx(MDTypography, { variant: "caption", color: "secondary", children: "\u00A0\u00A0entries per page" })] })), canSearch && (jsx(MDBox, { width: "12rem", ml: "auto", children: jsx(MDInput, { placeholder: "Search...", value: search, size: "small", fullWidth: true, onChange: ({ currentTarget }) => {
|
|
setSearch(search);
|
|
onSearchChange(currentTarget.value);
|
|
} }) }))] })) : null, jsxs(Table, { ...getTableProps(), children: [jsx(MDBox, { component: "thead", children: headerGroups.map((headerGroup) => (jsx(TableRow, { ...headerGroup.getHeaderGroupProps(), children: headerGroup.headers.map((column) => (jsx(DataTableHeadCell, { ...column.getHeaderProps(isSorted && column.getSortByToggleProps()), width: column.width ? column.width : "auto", align: column.align ? column.align : "left", sorted: setSortedValue(column), children: column.render("Header") }))) }))) }), jsx(TableBody, { ...getTableBodyProps(), children: page.map((row, key) => {
|
|
prepareRow(row);
|
|
return (jsx(TableRow, { ...row.getRowProps(), children: row.cells.map((cell) => (jsx(DataTableBodyCell, { noBorder: noEndBorder && rows.length - 1 === key, align: cell.column.align ? cell.column.align : "left", ...cell.getCellProps(), children: cell.render("Cell") }))) }));
|
|
}) })] }), jsxs(MDBox, { display: "flex", flexDirection: { xs: "column", sm: "row" }, justifyContent: "space-between", alignItems: { xs: "flex-start", sm: "center" }, p: !showTotalEntries && pageOptions.length === 1 ? 0 : 3, children: [showTotalEntries && (jsx(MDBox, { mb: { xs: 3, sm: 0 }, children: jsxs(MDTypography, { variant: "button", color: "secondary", fontWeight: "regular", children: ["Showing ", entriesStart, " to ", entriesEnd, " of ", rows.length, " entries"] }) })), pageOptions.length > 1 && (jsxs(MDPagination, { variant: pagination.variant ? pagination.variant : "gradient", color: pagination.color ? pagination.color : "info", children: [canPreviousPage && (jsx(MDPagination, { item: true, onClick: () => previousPage(), children: jsx(Icon, { sx: { fontWeight: "bold" }, children: "chevron_left" }) })), renderPagination.length > 6 ? (jsx(MDBox, { width: "5rem", mx: 1, children: jsx(MDInput, { inputProps: { type: "number", min: 1, max: customizedPageOptions.length }, value: customizedPageOptions[pageIndex], onChange: (event) => {
|
|
handleInputPagination(event);
|
|
handleInputPaginationValue(event);
|
|
} }) })) : (renderPagination), canNextPage && (jsx(MDPagination, { item: true, onClick: () => nextPage(), children: jsx(Icon, { sx: { fontWeight: "bold" }, children: "chevron_right" }) }))] }))] })] }));
|
|
}
|
|
// 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,
|
|
};
|
|
|
|
/**
|
|
=========================================================
|
|
* 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 { gradients, dark } = colors$1;
|
|
function configs(labels, datasets) {
|
|
const backgroundColors = [];
|
|
if (datasets.backgroundColors) {
|
|
datasets.backgroundColors.forEach((color) => 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,
|
|
},
|
|
},
|
|
},
|
|
},
|
|
};
|
|
}
|
|
|
|
function PieChart({ icon, title, description, height, chart }) {
|
|
const { data, options } = configs(chart.labels || [], chart.datasets || {});
|
|
const renderChart = (jsxs(MDBox, { py: 2, pr: 2, pl: icon.component ? 1 : 2, children: [title || description ? (jsxs(MDBox, { display: "flex", px: description ? 1 : 0, pt: description ? 1 : 0, children: [icon.component && (jsx(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, children: jsx(Icon, { fontSize: "medium", children: icon.component }) })), jsxs(MDBox, { mt: icon.component ? -2 : 0, children: [title && jsx(MDTypography, { variant: "h6", children: title }), jsx(MDBox, { mb: 2, children: jsx(MDTypography, { component: "div", variant: "button", color: "text", children: description }) })] })] })) : null, useMemo(() => (jsx(MDBox, { height: height, children: jsx(Pie, { data: data, options: options }) })), [chart, height])] }));
|
|
return title || description ? jsx(Card, { children: renderChart }) : renderChart;
|
|
}
|
|
// Declaring default props for PieChart
|
|
PieChart.defaultProps = {
|
|
icon: { color: "info", component: "" },
|
|
title: "",
|
|
description: "",
|
|
height: "19.125rem",
|
|
};
|
|
|
|
/**
|
|
=========================================================
|
|
* 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],
|
|
},
|
|
};
|
|
|
|
function ChannelsChart() {
|
|
const [controller] = useMaterialUIController();
|
|
const { darkMode } = controller;
|
|
return (jsxs(Card, { sx: { height: "100%" }, children: [jsxs(MDBox, { display: "flex", justifyContent: "space-between", alignItems: "center", pt: 2, px: 2, children: [jsx(MDTypography, { variant: "h6", children: "Channels" }), jsx(Tooltip, { title: "See traffic channels", placement: "bottom", arrow: true, children: jsx(MDButton, { variant: "outlined", color: "secondary", size: "small", circular: true, iconOnly: true, children: jsx(Icon, { children: "priority_high" }) }) })] }), jsx(MDBox, { mt: 3, children: jsxs(Grid, { container: true, alignItems: "center", children: [jsx(Grid, { item: true, xs: 7, children: jsx(PieChart, { chart: channelChartData, height: "12.5rem" }) }), jsx(Grid, { item: true, xs: 5, children: jsxs(MDBox, { pr: 1, children: [jsx(MDBox, { mb: 1, children: jsx(MDBadgeDot, { color: "info", size: "sm", badgeContent: "Facebook" }) }), jsx(MDBox, { mb: 1, children: jsx(MDBadgeDot, { color: "primary", size: "sm", badgeContent: "Direct" }) }), jsx(MDBox, { mb: 1, children: jsx(MDBadgeDot, { color: "dark", size: "sm", badgeContent: "Organic" }) }), jsx(MDBox, { mb: 1, children: jsx(MDBadgeDot, { color: "secondary", size: "sm", badgeContent: "Referral" }) })] }) })] }) }), jsxs(MDBox, { pt: 4, pb: 2, px: 2, display: "flex", flexDirection: { xs: "column", sm: "row" }, mt: "auto", children: [jsx(MDBox, { width: { xs: "100%", sm: "60%" }, lineHeight: 1, children: jsxs(MDTypography, { variant: "button", color: "text", fontWeight: "light", children: ["More than ", jsx("strong", { children: "1,200,000" }), " sales are made using referral marketing, and", " ", jsx("strong", { children: "700,000" }), " are from social media."] }) }), jsx(MDBox, { width: { xs: "100%", sm: "40%" }, textAlign: "right", mt: { xs: 2, sm: "auto" }, children: jsx(MDButton, { color: darkMode ? "white" : "light", children: "read more" }) })] })] }));
|
|
}
|
|
|
|
/**
|
|
=========================================================
|
|
* 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 defaultLineChartData = {
|
|
labels: ["Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
|
|
datasets: [
|
|
{
|
|
label: "Facebook Ads",
|
|
color: "info",
|
|
data: [50, 100, 200, 190, 400, 350, 500, 450, 700],
|
|
},
|
|
{
|
|
label: "Google Ads",
|
|
color: "dark",
|
|
data: [10, 30, 40, 120, 150, 220, 280, 250, 280],
|
|
},
|
|
],
|
|
};
|
|
|
|
/**
|
|
=========================================================
|
|
* 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 horizontalBarChartData = {
|
|
labels: ["16-20", "21-25", "26-30", "31-36", "36-42", "42+"],
|
|
datasets: [
|
|
{
|
|
label: "Sales by age",
|
|
color: "dark",
|
|
data: [15, 20, 12, 60, 20, 15],
|
|
},
|
|
],
|
|
};
|
|
|
|
/**
|
|
=========================================================
|
|
* 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 salesTableData = [
|
|
{
|
|
country: [US, "united state"],
|
|
sales: 2500,
|
|
bounce: "29.9%",
|
|
},
|
|
{
|
|
country: [DE, "germany"],
|
|
sales: "3.900",
|
|
bounce: "40.22%",
|
|
},
|
|
{
|
|
country: [GB, "great britain"],
|
|
sales: "1.400",
|
|
bounce: "23.44%",
|
|
},
|
|
{ country: [BR, "brasil"], sales: 562, bounce: "32.14%" },
|
|
{ country: [AU, "australia"], sales: 400, bounce: "56.83%" },
|
|
];
|
|
|
|
/**
|
|
=========================================================
|
|
* 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.
|
|
*/
|
|
var MDAvatarRoot = styled(Avatar)(({ theme, ownerState }) => {
|
|
const { palette, functions, typography, boxShadows } = theme;
|
|
const { shadow, bgColor, size } = ownerState;
|
|
const { gradients, transparent, white } = palette;
|
|
const { pxToRem, linearGradient } = functions;
|
|
const { size: fontSize, fontWeightRegular } = typography;
|
|
// backgroundImage value
|
|
const backgroundValue = bgColor === "transparent"
|
|
? transparent.main
|
|
: linearGradient(gradients[bgColor].main, gradients[bgColor].state);
|
|
// size value
|
|
let sizeValue;
|
|
switch (size) {
|
|
case "xs":
|
|
sizeValue = {
|
|
width: pxToRem(24),
|
|
height: pxToRem(24),
|
|
fontSize: fontSize.xs,
|
|
};
|
|
break;
|
|
case "sm":
|
|
sizeValue = {
|
|
width: pxToRem(36),
|
|
height: pxToRem(36),
|
|
fontSize: fontSize.sm,
|
|
};
|
|
break;
|
|
case "lg":
|
|
sizeValue = {
|
|
width: pxToRem(58),
|
|
height: pxToRem(58),
|
|
fontSize: fontSize.sm,
|
|
};
|
|
break;
|
|
case "xl":
|
|
sizeValue = {
|
|
width: pxToRem(74),
|
|
height: pxToRem(74),
|
|
fontSize: fontSize.md,
|
|
};
|
|
break;
|
|
case "xxl":
|
|
sizeValue = {
|
|
width: pxToRem(110),
|
|
height: pxToRem(110),
|
|
fontSize: fontSize.md,
|
|
};
|
|
break;
|
|
default: {
|
|
sizeValue = {
|
|
width: pxToRem(48),
|
|
height: pxToRem(48),
|
|
fontSize: fontSize.md,
|
|
};
|
|
}
|
|
}
|
|
return {
|
|
background: backgroundValue,
|
|
color: white.main,
|
|
fontWeight: fontWeightRegular,
|
|
boxShadow: boxShadows[shadow],
|
|
...sizeValue,
|
|
};
|
|
});
|
|
|
|
const MDAvatar = forwardRef(({ bgColor, size, shadow, ...rest }, ref) => (jsx(MDAvatarRoot, { ref: ref, ownerState: { shadow, bgColor, size }, ...rest })));
|
|
// Declaring default props for MDAvatar
|
|
MDAvatar.defaultProps = {
|
|
bgColor: "transparent",
|
|
size: "md",
|
|
shadow: "none",
|
|
};
|
|
|
|
function ProductCell({ image, name, orders }) {
|
|
return (jsxs(MDBox, { display: "flex", alignItems: "center", pr: 2, children: [jsx(MDBox, { mr: 2, children: jsx(MDAvatar, { src: image, alt: name }) }), jsxs(MDBox, { display: "flex", flexDirection: "column", children: [jsx(MDTypography, { variant: "button", fontWeight: "medium", children: name }), jsxs(MDTypography, { variant: "button", fontWeight: "regular", color: "secondary", children: [jsx(MDTypography, { component: "span", variant: "button", fontWeight: "regular", color: "success", children: orders }), " ", "orders"] })] })] }));
|
|
}
|
|
|
|
function RefundsCell({ value, icon }) {
|
|
return (jsxs(MDBox, { display: "flex", justifyContent: "center", alignItems: "center", px: 2, children: [jsx(MDTypography, { variant: "button", fontWeight: "regular", color: "text", children: value }), jsx(MDBox, { color: icon.color, lineHeight: 0, children: jsx(Icon, { sx: { fontWeight: "bold" }, fontSize: "small", children: icon.name }) })] }));
|
|
}
|
|
|
|
function DefaultCell({ children }) {
|
|
return (jsx(MDTypography, { variant: "button", fontWeight: "regular", color: "text", children: children }));
|
|
}
|
|
|
|
const dataTableData$1 = {
|
|
columns: [
|
|
{ Header: "product", accessor: "product", width: "55%" },
|
|
{ Header: "value", accessor: "value" },
|
|
{ Header: "ads spent", accessor: "adsSpent", align: "center" },
|
|
{ Header: "refunds", accessor: "refunds", align: "center" },
|
|
],
|
|
rows: [
|
|
{
|
|
product: jsx(ProductCell, { image: nikeV22, name: "Nike v22 Running", orders: 8.232 }),
|
|
value: jsx(DefaultCell, { children: "$130.992" }),
|
|
adsSpent: jsx(DefaultCell, { children: "$9.500" }),
|
|
refunds: jsx(RefundsCell, { value: 13, icon: { color: "success", name: "keyboard_arrow_up" } }),
|
|
},
|
|
{
|
|
product: (jsx(ProductCell, { image: businessKit, name: "Business Kit (Mug + Notebook)", orders: 12.821 })),
|
|
value: jsx(DefaultCell, { children: "$80.250" }),
|
|
adsSpent: jsx(DefaultCell, { children: "$4.200" }),
|
|
refunds: jsx(RefundsCell, { value: 40, icon: { color: "error", name: "keyboard_arrow_down" } }),
|
|
},
|
|
{
|
|
product: jsx(ProductCell, { image: blackChair, name: "Black Chair", orders: 2.421 }),
|
|
value: jsx(DefaultCell, { children: "$40.600" }),
|
|
adsSpent: jsx(DefaultCell, { children: "$9.430" }),
|
|
refunds: jsx(RefundsCell, { value: 54, icon: { color: "success", name: "keyboard_arrow_up" } }),
|
|
},
|
|
{
|
|
product: jsx(ProductCell, { image: wirelessCharger, name: "Wireless Charger", orders: 5.921 }),
|
|
value: jsx(DefaultCell, { children: "$91.300" }),
|
|
adsSpent: jsx(DefaultCell, { children: "$7.364" }),
|
|
refunds: jsx(RefundsCell, { value: 5, icon: { color: "error", name: "keyboard_arrow_down" } }),
|
|
},
|
|
{
|
|
product: (jsx(ProductCell, { image: tripKit, name: "Mountain Trip Kit (Camera + Backpack)", orders: 921 })),
|
|
value: jsx(DefaultCell, { children: "$140.925" }),
|
|
adsSpent: jsx(DefaultCell, { children: "$20.531" }),
|
|
refunds: jsx(RefundsCell, { value: 121, icon: { color: "success", name: "keyboard_arrow_up" } }),
|
|
},
|
|
],
|
|
};
|
|
|
|
function Sales() {
|
|
// DefaultStatisticsCard state for the dropdown value
|
|
const [salesDropdownValue, setSalesDropdownValue] = useState("6 May - 7 May");
|
|
const [customersDropdownValue, setCustomersDropdownValue] = useState("6 May - 7 May");
|
|
const [revenueDropdownValue, setRevenueDropdownValue] = useState("6 May - 7 May");
|
|
// DefaultStatisticsCard state for the dropdown action
|
|
const [salesDropdown, setSalesDropdown] = useState(null);
|
|
const [customersDropdown, setCustomersDropdown] = useState(null);
|
|
const [revenueDropdown, setRevenueDropdown] = useState(null);
|
|
// DefaultStatisticsCard handler for the dropdown action
|
|
const openSalesDropdown = ({ currentTarget }) => setSalesDropdown(currentTarget);
|
|
const closeSalesDropdown = ({ currentTarget }) => {
|
|
setSalesDropdown(null);
|
|
setSalesDropdownValue(currentTarget.innerText || salesDropdownValue);
|
|
};
|
|
const openCustomersDropdown = ({ currentTarget }) => setCustomersDropdown(currentTarget);
|
|
const closeCustomersDropdown = ({ currentTarget }) => {
|
|
setCustomersDropdown(null);
|
|
setCustomersDropdownValue(currentTarget.innerText || salesDropdownValue);
|
|
};
|
|
const openRevenueDropdown = ({ currentTarget }) => setRevenueDropdown(currentTarget);
|
|
const closeRevenueDropdown = ({ currentTarget }) => {
|
|
setRevenueDropdown(null);
|
|
setRevenueDropdownValue(currentTarget.innerText || salesDropdownValue);
|
|
};
|
|
// Dropdown menu template for the DefaultStatisticsCard
|
|
const renderMenu = (state, close) => (jsxs(Menu, { anchorEl: state, transformOrigin: { vertical: "top", horizontal: "center" }, open: Boolean(state), onClose: close, keepMounted: true, disableAutoFocusItem: true, children: [jsx(MenuItem, { onClick: close, children: "Last 7 days" }), jsx(MenuItem, { onClick: close, children: "Last week" }), jsx(MenuItem, { onClick: close, children: "Last 30 days" })] }));
|
|
return (jsxs(DashboardLayout, { children: [jsx(DashboardNavbar, {}), jsxs(MDBox, { py: 3, children: [jsx(MDBox, { mb: 3, children: jsxs(Grid, { container: true, spacing: 3, children: [jsx(Grid, { item: true, xs: 12, sm: 4, children: jsx(DefaultStatisticsCard, { title: "sales", count: "$230,220", percentage: {
|
|
color: "success",
|
|
value: "+55%",
|
|
label: "since last month",
|
|
}, dropdown: {
|
|
action: openSalesDropdown,
|
|
menu: renderMenu(salesDropdown, closeSalesDropdown),
|
|
value: salesDropdownValue,
|
|
} }) }), jsx(Grid, { item: true, xs: 12, sm: 4, children: jsx(DefaultStatisticsCard, { title: "customers", count: "3.200", percentage: {
|
|
color: "success",
|
|
value: "+12%",
|
|
label: "since last month",
|
|
}, dropdown: {
|
|
action: openCustomersDropdown,
|
|
menu: renderMenu(customersDropdown, closeCustomersDropdown),
|
|
value: customersDropdownValue,
|
|
} }) }), jsx(Grid, { item: true, xs: 12, sm: 4, children: jsx(DefaultStatisticsCard, { title: "avg. revenue", count: "$1.200", percentage: {
|
|
color: "secondary",
|
|
value: "+$213",
|
|
label: "since last month",
|
|
}, dropdown: {
|
|
action: openRevenueDropdown,
|
|
menu: renderMenu(revenueDropdown, closeRevenueDropdown),
|
|
value: revenueDropdownValue,
|
|
} }) })] }) }), jsx(MDBox, { mb: 3, children: jsxs(Grid, { container: true, spacing: 3, children: [jsx(Grid, { item: true, xs: 12, sm: 6, lg: 4, children: jsx(ChannelsChart, {}) }), jsx(Grid, { item: true, xs: 12, sm: 6, lg: 8, children: jsx(DefaultLineChart, { title: "Revenue", description: jsxs(MDBox, { display: "flex", justifyContent: "space-between", children: [jsxs(MDBox, { display: "flex", ml: -1, children: [jsx(MDBadgeDot, { color: "info", size: "sm", badgeContent: "Facebook Ads" }), jsx(MDBadgeDot, { color: "dark", size: "sm", badgeContent: "Google Ads" })] }), jsx(MDBox, { mt: -4, mr: -1, position: "absolute", right: "1.5rem", children: jsx(Tooltip, { title: "See which ads perform better", placement: "left", arrow: true, children: jsx(MDButton, { variant: "outlined", color: "secondary", size: "small", circular: true, iconOnly: true, children: jsx(Icon, { children: "priority_high" }) }) }) })] }), chart: defaultLineChartData }) })] }) }), jsx(MDBox, { mb: 3, children: jsxs(Grid, { container: true, spacing: 3, children: [jsx(Grid, { item: true, xs: 12, lg: 8, children: jsx(HorizontalBarChart, { title: "Sales by age", chart: horizontalBarChartData }) }), jsx(Grid, { item: true, xs: 12, lg: 4, children: jsx(SalesTable, { title: "Sales by Country", rows: salesTableData }) })] }) }), jsx(Grid, { container: true, spacing: 3, children: jsx(Grid, { item: true, xs: 12, children: jsxs(Card, { children: [jsx(MDBox, { pt: 3, px: 3, children: jsx(MDTypography, { variant: "h6", fontWeight: "medium", children: "Top Selling Products" }) }), jsx(MDBox, { py: 1, children: jsx(DataTable, { table: dataTableData$1, entriesPerPage: false, showTotalEntries: false, isSorted: false, noEndBorder: true }) })] }) }) })] }), jsx(Footer$1, {})] }));
|
|
}
|
|
|
|
function ProfileInfoCard({ title, description, info, social, action, shadow }) {
|
|
const labels = [];
|
|
const values = [];
|
|
const { socialMediaColors } = colors$1;
|
|
const { size } = typography$1;
|
|
// Convert this form `objectKey` of the object key in to this `object key`
|
|
Object.keys(info).forEach((el) => {
|
|
if (el.match(/[A-Z\s]+/)) {
|
|
const uppercaseLetter = Array.from(el).find((i) => i.match(/[A-Z]+/));
|
|
const newElement = el.replace(uppercaseLetter, ` ${uppercaseLetter.toLowerCase()}`);
|
|
labels.push(newElement);
|
|
}
|
|
else {
|
|
labels.push(el);
|
|
}
|
|
});
|
|
// Push the object values into the values array
|
|
Object.values(info).forEach((el) => values.push(el));
|
|
// Render the card info items
|
|
const renderItems = labels.map((label, key) => (jsxs(MDBox, { display: "flex", py: 1, pr: 2, children: [jsxs(MDTypography, { variant: "button", fontWeight: "bold", textTransform: "capitalize", children: [label, ": \u00A0"] }), jsxs(MDTypography, { variant: "button", fontWeight: "regular", color: "text", children: ["\u00A0", values[key]] })] }, label)));
|
|
// Render the card social media icons
|
|
const renderSocial = social.map(({ link, icon, color }) => (jsx(MDBox, { component: "a", href: link, target: "_blank", rel: "noreferrer", fontSize: size.lg, color: socialMediaColors[color].main, pr: 1, pl: 0.5, lineHeight: 1, children: icon }, color)));
|
|
return (jsxs(Card, { sx: { height: "100%", boxShadow: !shadow && "none" }, children: [jsxs(MDBox, { display: "flex", justifyContent: "space-between", alignItems: "center", pt: 2, px: 2, children: [jsx(MDTypography, { variant: "h6", fontWeight: "medium", textTransform: "capitalize", children: title }), jsx(MDTypography, { component: Link$1, to: action.route, variant: "body2", color: "secondary", children: jsx(Tooltip, { title: action.tooltip, placement: "top", children: jsx(Icon, { children: "edit" }) }) })] }), jsxs(MDBox, { p: 2, children: [jsx(MDBox, { mb: 2, lineHeight: 1, children: jsx(MDTypography, { variant: "button", color: "text", fontWeight: "light", children: description }) }), jsx(MDBox, { opacity: 0.3, children: jsx(Divider, {}) }), jsxs(MDBox, { children: [renderItems, jsxs(MDBox, { display: "flex", py: 1, pr: 2, children: [jsx(MDTypography, { variant: "button", fontWeight: "bold", textTransform: "capitalize", children: "social: \u00A0" }), renderSocial] })] })] })] }));
|
|
}
|
|
// Declaring default props for ProfileInfoCard
|
|
ProfileInfoCard.defaultProps = {
|
|
shadow: true,
|
|
};
|
|
|
|
function ProfilesList({ title, profiles, shadow }) {
|
|
const renderProfiles = profiles.map(({ image, name, description, action }) => (jsxs(MDBox, { component: "li", display: "flex", alignItems: "center", py: 1, mb: 1, children: [jsx(MDBox, { mr: 2, children: jsx(MDAvatar, { src: image, alt: "something here", shadow: "md" }) }), jsxs(MDBox, { display: "flex", flexDirection: "column", alignItems: "flex-start", justifyContent: "center", children: [jsx(MDTypography, { variant: "button", fontWeight: "medium", children: name }), jsx(MDTypography, { variant: "caption", color: "text", children: description })] }), jsx(MDBox, { ml: "auto", children: action.type === "internal" ? (jsx(MDButton, { component: Link$1, to: action.route, variant: "text", color: "info", children: action.label })) : (jsx(MDButton, { component: "a", href: action.route, target: "_blank", rel: "noreferrer", variant: "text", color: action.color, children: action.label })) })] }, name)));
|
|
return (jsxs(Card, { sx: { height: "100%", boxShadow: !shadow && "none" }, children: [jsx(MDBox, { pt: 2, px: 2, children: jsx(MDTypography, { variant: "h6", fontWeight: "medium", textTransform: "capitalize", children: title }) }), jsx(MDBox, { p: 2, children: jsx(MDBox, { component: "ul", display: "flex", flexDirection: "column", p: 0, m: 0, children: renderProfiles }) })] }));
|
|
}
|
|
// Declaring defualt props for ProfilesList
|
|
ProfilesList.defaultProps = {
|
|
shadow: true,
|
|
};
|
|
|
|
function DefaultProjectCard({ image, label, title, description, action, authors, }) {
|
|
const renderAuthors = authors.map(({ image: media, name }) => (jsx(Tooltip, { title: name, placement: "bottom", children: jsx(MDAvatar, { src: media, alt: name, size: "xs", sx: ({ borders: { borderWidth }, palette: { white } }) => ({
|
|
border: `${borderWidth[2]} solid ${white.main}`,
|
|
cursor: "pointer",
|
|
position: "relative",
|
|
ml: -1.25,
|
|
"&:hover, &:focus": {
|
|
zIndex: "10",
|
|
},
|
|
}) }) }, name)));
|
|
return (jsxs(Card, { sx: {
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
backgroundColor: "transparent",
|
|
boxShadow: "none",
|
|
overflow: "visible",
|
|
}, children: [jsx(MDBox, { position: "relative", width: "100.25%", shadow: "xl", borderRadius: "xl", children: jsx(CardMedia, { src: image, component: "img", title: title, sx: {
|
|
maxWidth: "100%",
|
|
margin: 0,
|
|
boxShadow: ({ boxShadows: { md } }) => md,
|
|
objectFit: "cover",
|
|
objectPosition: "center",
|
|
} }) }), jsxs(MDBox, { mt: 1, mx: 0.5, children: [jsx(MDTypography, { variant: "button", fontWeight: "regular", color: "text", textTransform: "capitalize", children: label }), jsx(MDBox, { mb: 1, children: action.type === "internal" ? (jsx(MDTypography, { component: Link$1, to: action.route, variant: "h5", textTransform: "capitalize", children: title })) : (jsx(MDTypography, { component: "a", href: action.route, target: "_blank", rel: "noreferrer", variant: "h5", textTransform: "capitalize", children: title })) }), jsx(MDBox, { mb: 3, lineHeight: 0, children: jsx(MDTypography, { variant: "button", fontWeight: "light", color: "text", children: description }) }), jsxs(MDBox, { display: "flex", justifyContent: "space-between", alignItems: "center", children: [action.type === "internal" ? (jsx(MDButton, { component: Link$1, to: action.route, variant: "outlined", size: "small", color: action.color, children: action.label })) : (jsx(MDButton, { component: "a", href: action.route, target: "_blank", rel: "noreferrer", variant: "outlined", size: "small", color: action.color, children: action.label })), jsx(MDBox, { display: "flex", children: renderAuthors })] })] })] }));
|
|
}
|
|
// Declaring default props for DefaultProjectCard
|
|
DefaultProjectCard.defaultProps = {
|
|
authors: [],
|
|
};
|
|
|
|
function Header$1({ children }) {
|
|
const [tabsOrientation, setTabsOrientation] = useState("horizontal");
|
|
const [tabValue, setTabValue] = useState(0);
|
|
useEffect(() => {
|
|
// A function that sets the orientation state of the tabs.
|
|
function handleTabsOrientation() {
|
|
return window.innerWidth < breakpoints$1.values.sm
|
|
? setTabsOrientation("vertical")
|
|
: setTabsOrientation("horizontal");
|
|
}
|
|
/**
|
|
The event listener that's calling the handleTabsOrientation function when resizing the window.
|
|
*/
|
|
window.addEventListener("resize", handleTabsOrientation);
|
|
// Call the handleTabsOrientation function to set the state with the initial value.
|
|
handleTabsOrientation();
|
|
// Remove event listener on cleanup
|
|
return () => window.removeEventListener("resize", handleTabsOrientation);
|
|
}, [tabsOrientation]);
|
|
const handleSetTabValue = (event, newValue) => setTabValue(newValue);
|
|
return (jsxs(MDBox, { position: "relative", mb: 5, children: [jsx(MDBox, { display: "flex", alignItems: "center", position: "relative", minHeight: "18.75rem", borderRadius: "xl", sx: {
|
|
backgroundImage: ({ functions: { rgba, linearGradient }, palette: { gradients } }) => `${linearGradient(rgba(gradients.info.main, 0.6), rgba(gradients.info.state, 0.6))}, url(${backgroundImage})`,
|
|
backgroundSize: "cover",
|
|
backgroundPosition: "50%",
|
|
overflow: "hidden",
|
|
} }), jsxs(Card, { sx: {
|
|
position: "relative",
|
|
mt: -8,
|
|
mx: 3,
|
|
py: 2,
|
|
px: 2,
|
|
}, children: [jsxs(Grid, { container: true, spacing: 3, alignItems: "center", children: [jsx(Grid, { item: true, children: jsx(MDAvatar, { src: burceMars, alt: "profile-image", size: "xl", shadow: "sm" }) }), jsx(Grid, { item: true, children: jsxs(MDBox, { height: "100%", mt: 0.5, lineHeight: 1, children: [jsx(MDTypography, { variant: "h5", fontWeight: "medium", children: "Richard Davis" }), jsx(MDTypography, { variant: "button", color: "text", fontWeight: "regular", children: "CEO / Co-Founder" })] }) }), jsx(Grid, { item: true, xs: 12, md: 6, lg: 4, sx: { ml: "auto" }, children: jsx(AppBar, { position: "static", children: jsxs(Tabs, { orientation: tabsOrientation, value: tabValue, onChange: handleSetTabValue, children: [jsx(Tab, { label: "App", icon: jsx(Icon, { fontSize: "small", sx: { mt: -0.25 }, children: "home" }) }), jsx(Tab, { label: "Message", icon: jsx(Icon, { fontSize: "small", sx: { mt: -0.25 }, children: "email" }) }), jsx(Tab, { label: "Settings", icon: jsx(Icon, { fontSize: "small", sx: { mt: -0.25 }, children: "settings" }) })] }) }) })] }), children] })] }));
|
|
}
|
|
// Declaring default props for Header
|
|
Header$1.defaultProps = {
|
|
children: "",
|
|
};
|
|
|
|
function PlatformSettings() {
|
|
const [followsMe, setFollowsMe] = useState(true);
|
|
const [answersPost, setAnswersPost] = useState(false);
|
|
const [mentionsMe, setMentionsMe] = useState(true);
|
|
const [newLaunches, setNewLaunches] = useState(false);
|
|
const [productUpdate, setProductUpdate] = useState(true);
|
|
const [newsletter, setNewsletter] = useState(false);
|
|
return (jsxs(Card, { sx: { boxShadow: "none" }, children: [jsx(MDBox, { p: 2, children: jsx(MDTypography, { variant: "h6", fontWeight: "medium", textTransform: "capitalize", children: "platform settings" }) }), jsxs(MDBox, { pt: 1, pb: 2, px: 2, lineHeight: 1.25, children: [jsx(MDTypography, { variant: "caption", fontWeight: "bold", color: "text", textTransform: "uppercase", children: "account" }), jsxs(MDBox, { display: "flex", alignItems: "center", mb: 0.5, ml: -1.5, children: [jsx(MDBox, { mt: 0.5, children: jsx(Switch, { checked: followsMe, onChange: () => setFollowsMe(!followsMe) }) }), jsx(MDBox, { width: "80%", ml: 0.5, children: jsx(MDTypography, { variant: "button", fontWeight: "regular", color: "text", children: "Email me when someone follows me" }) })] }), jsxs(MDBox, { display: "flex", alignItems: "center", mb: 0.5, ml: -1.5, children: [jsx(MDBox, { mt: 0.5, children: jsx(Switch, { checked: answersPost, onChange: () => setAnswersPost(!answersPost) }) }), jsx(MDBox, { width: "80%", ml: 0.5, children: jsx(MDTypography, { variant: "button", fontWeight: "regular", color: "text", children: "Email me when someone answers on my post" }) })] }), jsxs(MDBox, { display: "flex", alignItems: "center", mb: 0.5, ml: -1.5, children: [jsx(MDBox, { mt: 0.5, children: jsx(Switch, { checked: mentionsMe, onChange: () => setMentionsMe(!mentionsMe) }) }), jsx(MDBox, { width: "80%", ml: 0.5, children: jsx(MDTypography, { variant: "button", fontWeight: "regular", color: "text", children: "Email me when someone mentions me" }) })] }), jsx(MDBox, { mt: 3, children: jsx(MDTypography, { variant: "caption", fontWeight: "bold", color: "text", textTransform: "uppercase", children: "application" }) }), jsxs(MDBox, { display: "flex", alignItems: "center", mb: 0.5, ml: -1.5, children: [jsx(MDBox, { mt: 0.5, children: jsx(Switch, { checked: newLaunches, onChange: () => setNewLaunches(!newLaunches) }) }), jsx(MDBox, { width: "80%", ml: 0.5, children: jsx(MDTypography, { variant: "button", fontWeight: "regular", color: "text", children: "New launches and projects" }) })] }), jsxs(MDBox, { display: "flex", alignItems: "center", mb: 0.5, ml: -1.5, children: [jsx(MDBox, { mt: 0.5, children: jsx(Switch, { checked: productUpdate, onChange: () => setProductUpdate(!productUpdate) }) }), jsx(MDBox, { width: "80%", ml: 0.5, children: jsx(MDTypography, { variant: "button", fontWeight: "regular", color: "text", children: "Monthly product updates" }) })] }), jsxs(MDBox, { display: "flex", alignItems: "center", mb: 0.5, ml: -1.5, children: [jsx(MDBox, { mt: 0.5, children: jsx(Switch, { checked: newsletter, onChange: () => setNewsletter(!newsletter) }) }), jsx(MDBox, { width: "80%", ml: 0.5, children: jsx(MDTypography, { variant: "button", fontWeight: "regular", color: "text", children: "Subscribe to newsletter" }) })] })] })] }));
|
|
}
|
|
|
|
/**
|
|
=========================================================
|
|
* 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 profileListData = [
|
|
{
|
|
image: kal,
|
|
name: "Sophie B.",
|
|
description: "Hi! I need more information..",
|
|
action: {
|
|
type: "internal",
|
|
route: "/pages/profile/profile-overview",
|
|
color: "info",
|
|
label: "reply",
|
|
},
|
|
},
|
|
{
|
|
image: marie,
|
|
name: "Anne Marie",
|
|
description: "Awesome work, can you..",
|
|
action: {
|
|
type: "internal",
|
|
route: "/pages/profile/profile-overview",
|
|
color: "info",
|
|
label: "reply",
|
|
},
|
|
},
|
|
{
|
|
image: ivana,
|
|
name: "Ivanna",
|
|
description: "About files I can..",
|
|
action: {
|
|
type: "internal",
|
|
route: "/pages/profile/profile-overview",
|
|
color: "info",
|
|
label: "reply",
|
|
},
|
|
},
|
|
{
|
|
image: team4,
|
|
name: "Peterson",
|
|
description: "Have a great afternoon..",
|
|
action: {
|
|
type: "internal",
|
|
route: "/pages/profile/profile-overview",
|
|
color: "info",
|
|
label: "reply",
|
|
},
|
|
},
|
|
{
|
|
image: team3,
|
|
name: "Nick Daniel",
|
|
description: "Hi! I need more information..",
|
|
action: {
|
|
type: "internal",
|
|
route: "/pages/profile/profile-overview",
|
|
color: "info",
|
|
label: "reply",
|
|
},
|
|
},
|
|
];
|
|
|
|
function Overview() {
|
|
return (jsxs(DashboardLayout, { children: [jsx(DashboardNavbar, {}), jsx(MDBox, { mb: 2 }), jsxs(Header$1, { children: [jsx(MDBox, { mt: 5, mb: 3, children: jsxs(Grid, { container: true, spacing: 1, children: [jsx(Grid, { item: true, xs: 12, md: 6, xl: 4, children: jsx(PlatformSettings, {}) }), jsxs(Grid, { item: true, xs: 12, md: 6, xl: 4, sx: { display: "flex" }, children: [jsx(Divider, { orientation: "vertical", sx: { ml: -2, mr: 1 } }), jsx(ProfileInfoCard, { title: "profile information", description: "Hi, I\u2019m Alec Thompson, Decisions: If you can\u2019t decide, the answer is no. If two equally difficult paths, choose the one more painful in the short term (pain avoidance is creating an illusion of equality).", info: {
|
|
fullName: "Alec M. Thompson",
|
|
mobile: "(44) 123 1234 123",
|
|
email: "alecthompson@mail.com",
|
|
location: "USA",
|
|
}, social: [
|
|
{
|
|
link: "https://www.facebook.com/CreativeTim/",
|
|
icon: jsx(FacebookIcon, {}),
|
|
color: "facebook",
|
|
},
|
|
{
|
|
link: "https://twitter.com/creativetim",
|
|
icon: jsx(TwitterIcon, {}),
|
|
color: "twitter",
|
|
},
|
|
{
|
|
link: "https://www.instagram.com/creativetimofficial/",
|
|
icon: jsx(InstagramIcon, {}),
|
|
color: "instagram",
|
|
},
|
|
], action: { route: "", tooltip: "Edit Profile" }, shadow: false }), jsx(Divider, { orientation: "vertical", sx: { mx: 0 } })] }), jsx(Grid, { item: true, xs: 12, xl: 4, children: jsx(ProfilesList, { title: "conversations", profiles: profileListData, shadow: false }) })] }) }), jsxs(MDBox, { pt: 2, px: 2, lineHeight: 1.25, children: [jsx(MDTypography, { variant: "h6", fontWeight: "medium", children: "Projects" }), jsx(MDBox, { mb: 1, children: jsx(MDTypography, { variant: "button", color: "text", children: "Architects design houses" }) })] }), jsx(MDBox, { p: 2, children: jsxs(Grid, { container: true, spacing: 6, children: [jsx(Grid, { item: true, xs: 12, md: 6, xl: 3, children: jsx(DefaultProjectCard, { image: homeDecor1, label: "project #2", title: "modern", description: "As Uber works through a huge amount of internal management turmoil.", action: {
|
|
type: "internal",
|
|
route: "/pages/profile/profile-overview",
|
|
color: "info",
|
|
label: "view project",
|
|
}, authors: [
|
|
{ image: team1, name: "Elena Morison" },
|
|
{ image: team2, name: "Ryan Milly" },
|
|
{ image: team3, name: "Nick Daniel" },
|
|
{ image: team4, name: "Peterson" },
|
|
] }) }), jsx(Grid, { item: true, xs: 12, md: 6, xl: 3, children: jsx(DefaultProjectCard, { image: homeDecor2, label: "project #1", title: "scandinavian", description: "Music is something that everyone has their own specific opinion about.", action: {
|
|
type: "internal",
|
|
route: "/pages/profile/profile-overview",
|
|
color: "info",
|
|
label: "view project",
|
|
}, authors: [
|
|
{ image: team3, name: "Nick Daniel" },
|
|
{ image: team4, name: "Peterson" },
|
|
{ image: team1, name: "Elena Morison" },
|
|
{ image: team2, name: "Ryan Milly" },
|
|
] }) }), jsx(Grid, { item: true, xs: 12, md: 6, xl: 3, children: jsx(DefaultProjectCard, { image: homeDecor3, label: "project #3", title: "minimalist", description: "Different people have different taste, and various types of music.", action: {
|
|
type: "internal",
|
|
route: "/pages/profile/profile-overview",
|
|
color: "info",
|
|
label: "view project",
|
|
}, authors: [
|
|
{ image: team4, name: "Peterson" },
|
|
{ image: team3, name: "Nick Daniel" },
|
|
{ image: team2, name: "Ryan Milly" },
|
|
{ image: team1, name: "Elena Morison" },
|
|
] }) }), jsx(Grid, { item: true, xs: 12, md: 6, xl: 3, children: jsx(DefaultProjectCard, { image: homeDecor4, label: "project #4", title: "gothic", description: "Why would anyone pick blue over pink? Pink is obviously a better color.", action: {
|
|
type: "internal",
|
|
route: "/pages/profile/profile-overview",
|
|
color: "info",
|
|
label: "view project",
|
|
}, authors: [
|
|
{ image: team4, name: "Peterson" },
|
|
{ image: team3, name: "Nick Daniel" },
|
|
{ image: team2, name: "Ryan Milly" },
|
|
{ image: team1, name: "Elena Morison" },
|
|
] }) })] }) })] }), jsx(Footer$1, {})] }));
|
|
}
|
|
|
|
function BaseLayout({ stickyNavbar, children }) {
|
|
const [tabsOrientation, setTabsOrientation] = useState("horizontal");
|
|
const [tabValue, setTabValue] = useState(0);
|
|
useEffect(() => {
|
|
// A function that sets the orientation state of the tabs.
|
|
function handleTabsOrientation() {
|
|
return window.innerWidth < breakpoints$1.values.sm
|
|
? setTabsOrientation("vertical")
|
|
: setTabsOrientation("horizontal");
|
|
}
|
|
/**
|
|
The event listener that's calling the handleTabsOrientation function when resizing the window.
|
|
*/
|
|
window.addEventListener("resize", handleTabsOrientation);
|
|
// Call the handleTabsOrientation function to set the state with the initial value.
|
|
handleTabsOrientation();
|
|
// Remove event listener on cleanup
|
|
return () => window.removeEventListener("resize", handleTabsOrientation);
|
|
}, [tabsOrientation]);
|
|
const handleSetTabValue = (event, newValue) => setTabValue(newValue);
|
|
return (jsxs(DashboardLayout, { children: [jsx(DashboardNavbar, { absolute: !stickyNavbar, isMini: true }), jsxs(MDBox, { mt: stickyNavbar ? 3 : 10, children: [jsx(Grid, { container: true, children: jsx(Grid, { item: true, xs: 12, sm: 8, lg: 4, children: jsx(AppBar, { position: "static", children: jsxs(Tabs, { orientation: tabsOrientation, value: tabValue, onChange: handleSetTabValue, children: [jsx(Tab, { label: "Messages" }), jsx(Tab, { label: "Social" }), jsx(Tab, { label: "Notifications" }), jsx(Tab, { label: "Backup" })] }) }) }) }), children] }), jsx(Footer$1, {})] }));
|
|
}
|
|
// Declaring default props for BaseLayout
|
|
BaseLayout.defaultProps = {
|
|
stickyNavbar: false,
|
|
};
|
|
|
|
function Sidenav() {
|
|
const [controller] = useMaterialUIController();
|
|
const { darkMode } = controller;
|
|
const sidenavItems = [
|
|
{ icon: "person", label: "profile", href: "profile" },
|
|
{ icon: "receipt_long", label: "basic info", href: "basic-info" },
|
|
{ icon: "lock", label: "change password", href: "change-password" },
|
|
{ icon: "security", label: "2FA", href: "2fa" },
|
|
{ icon: "badge", label: "accounts", href: "accounts" },
|
|
{ icon: "campaign", label: "notifications", href: "notifications" },
|
|
{ icon: "settings_applications", label: "sessions", href: "sessions" },
|
|
{ icon: "delete", label: "delete account", href: "delete-account" },
|
|
];
|
|
const renderSidenavItems = sidenavItems.map(({ icon, label, href }, key) => {
|
|
const itemKey = `item-${key}`;
|
|
return (jsx(MDBox, { component: "li", pt: key === 0 ? 0 : 1, children: jsxs(MDTypography, { component: "a", href: `#${href}`, variant: "button", fontWeight: "regular", textTransform: "capitalize", sx: ({ borders: { borderRadius }, functions: { pxToRem }, palette: { light }, transitions, }) => ({
|
|
display: "flex",
|
|
alignItems: "center",
|
|
borderRadius: borderRadius.md,
|
|
padding: `${pxToRem(10)} ${pxToRem(16)}`,
|
|
transition: transitions.create("background-color", {
|
|
easing: transitions.easing.easeInOut,
|
|
duration: transitions.duration.shorter,
|
|
}),
|
|
"&:hover": {
|
|
backgroundColor: light.main,
|
|
},
|
|
}), children: [jsx(MDBox, { mr: 1.5, lineHeight: 1, color: darkMode ? "white" : "dark", children: jsx(Icon, { fontSize: "small", children: icon }) }), label] }) }, itemKey));
|
|
});
|
|
return (jsx(Card, { sx: {
|
|
borderRadius: ({ borders: { borderRadius } }) => borderRadius.lg,
|
|
position: "sticky",
|
|
top: "1%",
|
|
}, children: jsx(MDBox, { component: "ul", display: "flex", flexDirection: "column", p: 2, m: 0, sx: { listStyle: "none" }, children: renderSidenavItems }) }));
|
|
}
|
|
|
|
function Header() {
|
|
const [visible, setVisible] = useState(true);
|
|
const handleSetVisible = () => setVisible(!visible);
|
|
return (jsx(Card, { id: "profile", children: jsx(MDBox, { p: 2, children: jsxs(Grid, { container: true, spacing: 3, alignItems: "center", children: [jsx(Grid, { item: true, children: jsx(MDAvatar, { src: burceMars, alt: "profile-image", size: "xl", shadow: "sm" }) }), jsx(Grid, { item: true, children: jsxs(MDBox, { height: "100%", mt: 0.5, lineHeight: 1, children: [jsx(MDTypography, { variant: "h5", fontWeight: "medium", children: "Alex Thompson" }), jsx(MDTypography, { variant: "button", color: "text", fontWeight: "medium", children: "CEO / Co-Founder" })] }) }), jsx(Grid, { item: true, xs: 12, md: 6, lg: 3, sx: { ml: "auto" }, children: jsxs(MDBox, { display: "flex", justifyContent: { md: "flex-end" }, alignItems: "center", lineHeight: 1, children: [jsxs(MDTypography, { variant: "caption", fontWeight: "regular", children: ["Switch to ", visible ? "invisible" : "visible"] }), jsx(MDBox, { ml: 1, children: jsx(Switch, { checked: visible, onChange: handleSetVisible }) })] }) })] }) }) }));
|
|
}
|
|
|
|
function FormField({ label, ...rest }) {
|
|
return (jsx(MDInput, { variant: "standard", label: label, fullWidth: true, InputLabelProps: { shrink: true }, ...rest }));
|
|
}
|
|
// Declaring default props for FormField
|
|
FormField.defaultProps = {
|
|
label: " ",
|
|
};
|
|
|
|
/**
|
|
=========================================================
|
|
* 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 selectData = {
|
|
gender: ["Male", "Female"],
|
|
birthDate: [
|
|
"January",
|
|
"February",
|
|
"March",
|
|
"April",
|
|
"May",
|
|
"June",
|
|
"July",
|
|
"August",
|
|
"September",
|
|
"October",
|
|
"November",
|
|
"December",
|
|
],
|
|
days: [
|
|
"1",
|
|
"2",
|
|
"3",
|
|
"4",
|
|
"5",
|
|
"6",
|
|
"7",
|
|
"8",
|
|
"9",
|
|
"10",
|
|
"11",
|
|
"12",
|
|
"13",
|
|
"14",
|
|
"15",
|
|
"16",
|
|
"17",
|
|
"18",
|
|
"19",
|
|
"20",
|
|
"21",
|
|
"22",
|
|
"23",
|
|
"24",
|
|
"25",
|
|
"26",
|
|
"27",
|
|
"28",
|
|
"29",
|
|
"30",
|
|
],
|
|
years: [
|
|
"1900",
|
|
"1901",
|
|
"1902",
|
|
"1903",
|
|
"1904",
|
|
"1905",
|
|
"1906",
|
|
"1907",
|
|
"1908",
|
|
"1909",
|
|
"1910",
|
|
"1911",
|
|
"1912",
|
|
"1913",
|
|
"1914",
|
|
"1915",
|
|
"1915",
|
|
"1915",
|
|
"1916",
|
|
"1917",
|
|
"1918",
|
|
"1919",
|
|
"1920",
|
|
"1921",
|
|
"1922",
|
|
"1923",
|
|
"1924",
|
|
"1925",
|
|
"1926",
|
|
"1927",
|
|
"1928",
|
|
"1929",
|
|
"1930",
|
|
"1931",
|
|
"1932",
|
|
"1933",
|
|
"1934",
|
|
"1935",
|
|
"1936",
|
|
"1937",
|
|
"1938",
|
|
"1939",
|
|
"1940",
|
|
"1941",
|
|
"1942",
|
|
"1943",
|
|
"1944",
|
|
"1945",
|
|
"1946",
|
|
"1947",
|
|
"1948",
|
|
"1949",
|
|
"1950",
|
|
"1951",
|
|
"1952",
|
|
"1953",
|
|
"1954",
|
|
"1955",
|
|
"1956",
|
|
"1957",
|
|
"1958",
|
|
"1959",
|
|
"1960",
|
|
"1961",
|
|
"1962",
|
|
"1963",
|
|
"1964",
|
|
"1965",
|
|
"1966",
|
|
"1967",
|
|
"1968",
|
|
"1969",
|
|
"1970",
|
|
"1971",
|
|
"1972",
|
|
"1973",
|
|
"1974",
|
|
"1975",
|
|
"1976",
|
|
"1977",
|
|
"1978",
|
|
"1979",
|
|
"1980",
|
|
"1981",
|
|
"1982",
|
|
"1983",
|
|
"1984",
|
|
"1985",
|
|
"1986",
|
|
"1987",
|
|
"1988",
|
|
"1989",
|
|
"1990",
|
|
"1991",
|
|
"1992",
|
|
"1993",
|
|
"1994",
|
|
"1995",
|
|
"1996",
|
|
"1997",
|
|
"1998",
|
|
"1999",
|
|
"2000",
|
|
"2001",
|
|
"2002",
|
|
"2003",
|
|
"2004",
|
|
"2005",
|
|
"2006",
|
|
"2007",
|
|
"2008",
|
|
"2009",
|
|
"2010",
|
|
"2011",
|
|
"2012",
|
|
"2013",
|
|
"2014",
|
|
"2015",
|
|
"2016",
|
|
"2017",
|
|
"2018",
|
|
"2019",
|
|
"2020",
|
|
"2021",
|
|
],
|
|
skills: ["react", "vue", "angular", "svelte", "javascript"],
|
|
};
|
|
|
|
function BasicInfo() {
|
|
return (jsxs(Card, { id: "basic-info", sx: { overflow: "visible" }, children: [jsx(MDBox, { p: 3, children: jsx(MDTypography, { variant: "h5", children: "Basic Info" }) }), jsx(MDBox, { component: "form", pb: 3, px: 3, children: jsxs(Grid, { container: true, spacing: 3, children: [jsx(Grid, { item: true, xs: 12, sm: 6, children: jsx(FormField, { label: "First Name", placeholder: "Alec" }) }), jsx(Grid, { item: true, xs: 12, sm: 6, children: jsx(FormField, { label: "Last Name", placeholder: "Thompson" }) }), jsx(Grid, { item: true, xs: 12, children: jsxs(Grid, { container: true, spacing: 3, children: [jsx(Grid, { item: true, xs: 12, sm: 4, children: jsx(Autocomplete, { defaultValue: "Male", options: selectData.gender, renderInput: (params) => (jsx(FormField, { ...params, label: "I'm", InputLabelProps: { shrink: true } })) }) }), jsx(Grid, { item: true, xs: 12, sm: 8, children: jsxs(Grid, { container: true, spacing: 3, children: [jsx(Grid, { item: true, xs: 12, sm: 5, children: jsx(Autocomplete, { defaultValue: "February", options: selectData.birthDate, renderInput: (params) => (jsx(FormField, { ...params, label: "Birth Date", InputLabelProps: { shrink: true } })) }) }), jsx(Grid, { item: true, xs: 12, sm: 4, children: jsx(Autocomplete, { defaultValue: "1", options: selectData.days, renderInput: (params) => (jsx(FormField, { ...params, InputLabelProps: { shrink: true } })) }) }), jsx(Grid, { item: true, xs: 12, sm: 3, children: jsx(Autocomplete, { defaultValue: "2021", options: selectData.years, renderInput: (params) => (jsx(FormField, { ...params, InputLabelProps: { shrink: true } })) }) })] }) })] }) }), jsx(Grid, { item: true, xs: 12, sm: 6, children: jsx(FormField, { label: "Email", placeholder: "example@email.com", inputProps: { type: "email" } }) }), jsx(Grid, { item: true, xs: 12, sm: 6, children: jsx(FormField, { label: "confirmation email", placeholder: "example@email.com", inputProps: { type: "email" } }) }), jsx(Grid, { item: true, xs: 12, sm: 6, children: jsx(FormField, { label: "your location", placeholder: "Sydney, A" }) }), jsx(Grid, { item: true, xs: 12, sm: 6, children: jsx(FormField, { label: "Phone Number", placeholder: "+40 735 631 620", inputProps: { type: "number" } }) }), jsx(Grid, { item: true, xs: 12, md: 6, children: jsx(FormField, { label: "Language", placeholder: "English" }) }), jsx(Grid, { item: true, xs: 12, md: 6, children: jsx(Autocomplete, { multiple: true, defaultValue: ["react", "angular"], options: selectData.skills, renderInput: (params) => jsx(FormField, { ...params, InputLabelProps: { shrink: true } }) }) })] }) })] }));
|
|
}
|
|
|
|
function ChangePassword() {
|
|
const passwordRequirements = [
|
|
"One special characters",
|
|
"Min 6 characters",
|
|
"One number (2 are recommended)",
|
|
"Change it often",
|
|
];
|
|
const renderPasswordRequirements = passwordRequirements.map((item, key) => {
|
|
const itemKey = `element-${key}`;
|
|
return (jsx(MDBox, { component: "li", color: "text", fontSize: "1.25rem", lineHeight: 1, children: jsx(MDTypography, { variant: "button", color: "text", fontWeight: "regular", verticalAlign: "middle", children: item }) }, itemKey));
|
|
});
|
|
return (jsxs(Card, { id: "change-password", children: [jsx(MDBox, { p: 3, children: jsx(MDTypography, { variant: "h5", children: "Change Password" }) }), jsxs(MDBox, { component: "form", pb: 3, px: 3, children: [jsxs(Grid, { container: true, spacing: 3, children: [jsx(Grid, { item: true, xs: 12, children: jsx(MDInput, { fullWidth: true, label: "Current Password", inputProps: { type: "password", autoComplete: "" } }) }), jsx(Grid, { item: true, xs: 12, children: jsx(MDInput, { fullWidth: true, label: "New Password", inputProps: { type: "password", autoComplete: "" } }) }), jsx(Grid, { item: true, xs: 12, children: jsx(MDInput, { fullWidth: true, label: "Confirm New Password", inputProps: { type: "password", autoComplete: "" } }) })] }), jsx(MDBox, { mt: 6, mb: 1, children: jsx(MDTypography, { variant: "h5", children: "Password requirements" }) }), jsx(MDBox, { mb: 1, children: jsx(MDTypography, { variant: "body2", color: "text", children: "Please follow this guide for a strong password" }) }), jsxs(MDBox, { display: "flex", justifyContent: "space-between", alignItems: "flex-end", flexWrap: "wrap", children: [jsx(MDBox, { component: "ul", m: 0, pl: 3.25, mb: { xs: 8, sm: 0 }, children: renderPasswordRequirements }), jsx(MDBox, { ml: "auto", children: jsx(MDButton, { variant: "gradient", color: "dark", size: "small", children: "update password" }) })] })] })] }));
|
|
}
|
|
|
|
function Authentication() {
|
|
return (jsxs(Card, { id: "2fa", sx: { overflow: "visible" }, children: [jsxs(MDBox, { display: "flex", justifyContent: "space-between", alignItems: "center", p: 3, children: [jsx(MDTypography, { variant: "h5", children: "Two-factor authentication" }), jsx(MDBadge, { variant: "contained", color: "success", badgeContent: "enabled", container: true })] }), jsxs(MDBox, { p: 3, children: [jsxs(MDBox, { display: "flex", justifyContent: "space-between", alignItems: { xs: "flex-start", sm: "center" }, flexDirection: { xs: "column", sm: "row" }, children: [jsx(MDTypography, { variant: "body2", color: "text", children: "Security keys" }), jsxs(MDBox, { display: "flex", alignItems: { xs: "flex-start", sm: "center" }, flexDirection: { xs: "column", sm: "row" }, children: [jsx(MDBox, { mx: { xs: 0, sm: 2 }, mb: { xs: 1, sm: 0 }, children: jsx(MDTypography, { variant: "button", color: "text", fontWeight: "regular", children: "No Security keys" }) }), jsx(MDButton, { variant: "outlined", color: "dark", size: "small", children: "add" })] })] }), jsx(Divider, {}), jsxs(MDBox, { display: "flex", justifyContent: "space-between", alignItems: { xs: "flex-start", sm: "center" }, flexDirection: { xs: "column", sm: "row" }, children: [jsx(MDTypography, { variant: "body2", color: "text", children: "SMS number" }), jsxs(MDBox, { display: "flex", alignItems: { xs: "flex-start", sm: "center" }, flexDirection: { xs: "column", sm: "row" }, children: [jsx(MDBox, { mx: { xs: 0, sm: 2 }, mb: { xs: 1, sm: 0 }, children: jsx(MDTypography, { variant: "button", color: "text", fontWeight: "regular", children: "+3012374423" }) }), jsx(MDButton, { variant: "outlined", color: "dark", size: "small", children: "edit" })] })] }), jsx(Divider, {}), jsxs(MDBox, { display: "flex", justifyContent: "space-between", alignItems: { xs: "flex-start", sm: "center" }, flexDirection: { xs: "column", sm: "row" }, children: [jsx(MDTypography, { variant: "body2", color: "text", children: "Authenticator app" }), jsxs(MDBox, { display: "flex", alignItems: { xs: "flex-start", sm: "center" }, flexDirection: { xs: "column", sm: "row" }, children: [jsx(MDBox, { mx: { xs: 0, sm: 2 }, mb: { xs: 1, sm: 0 }, children: jsx(MDTypography, { variant: "button", color: "text", fontWeight: "regular", children: "Not Configured" }) }), jsx(MDButton, { variant: "outlined", color: "dark", size: "small", children: "set up" })] })] })] })] }));
|
|
}
|
|
|
|
function Accounts() {
|
|
const [controller] = useMaterialUIController();
|
|
const { darkMode } = controller;
|
|
const [slack2FA, setSlack2FA] = useState(true);
|
|
const [spotify2FA, setSpotify2FA] = useState(true);
|
|
const [atlassian2FA, setAtlassian2FA] = useState(true);
|
|
const [asana2FA, setAsana2FA] = useState(false);
|
|
const handleSetSlack2FA = () => setSlack2FA(!slack2FA);
|
|
const handleSetSpotify2FA = () => setSpotify2FA(!spotify2FA);
|
|
const handleSetAtlassian2FA = () => setAtlassian2FA(!atlassian2FA);
|
|
const handleSetAsana2FA = () => setAsana2FA(!asana2FA);
|
|
return (jsxs(Card, { id: "accounts", children: [jsxs(MDBox, { p: 3, lineHeight: 1, children: [jsx(MDBox, { mb: 1, children: jsx(MDTypography, { variant: "h5", children: "Accounts" }) }), jsx(MDTypography, { variant: "button", color: "text", children: "Here you can setup and manage your integration settings." })] }), jsxs(MDBox, { pt: 2, pb: 3, px: 3, children: [jsxs(MDBox, { display: "flex", justifyContent: "space-between", alignItems: { xs: "flex-start", sm: "center" }, flexDirection: { xs: "column", sm: "row" }, children: [jsxs(MDBox, { display: "flex", alignItems: "center", children: [jsx(MDAvatar, { src: logoSlack, alt: "Slack logo", variant: "rounded" }), jsxs(MDBox, { ml: 2, children: [jsx(MDTypography, { variant: "h5", fontWeight: "medium", children: "Slack" }), jsxs(MDBox, { display: "flex", alignItems: "flex-end", children: [jsx(MDTypography, { variant: "button", color: "text", children: "Show less" }), jsx(MDTypography, { variant: "button", color: "text", sx: { lineHeight: 0 }, children: jsx(Icon, { fontSize: "small", children: "expand_less" }) })] })] })] }), jsxs(MDBox, { display: "flex", alignItems: "center", justifyContent: "flex-end", width: { xs: "100%", sm: "auto" }, mt: { xs: 1, sm: 0 }, children: [jsx(MDBox, { lineHeight: 0, mx: 2, children: jsx(MDTypography, { variant: "button", color: "text", children: slack2FA ? "Enabled" : "Disabled" }) }), jsx(MDBox, { mr: 1, children: jsx(Switch, { checked: slack2FA, onChange: handleSetSlack2FA }) })] })] }), jsxs(MDBox, { ml: 2, pl: 6, pt: 2, lineHeight: 1, children: [jsx(MDTypography, { variant: "button", color: "text", children: "You haven't added your Slack yet or you aren't authorized. Please add our Slack Bot to your account by clicking on here. When you've added the bot, send your verification code that you have received." }), jsxs(MDBox, { bgColor: darkMode ? "grey-900" : "grey-100", borderRadius: "lg", display: "flex", justifyContent: "space-between", alignItems: { xs: "flex-start", sm: "center" }, flexDirection: { xs: "column", sm: "row" }, my: 3, py: 1, pl: { xs: 1, sm: 2 }, pr: 1, children: [jsx(MDTypography, { variant: "button", fontWeight: "medium", color: "text", children: "Verification Code" }), jsx(MDBox, { width: { xs: "100%", sm: "25%", md: "15%" }, mt: { xs: 1, sm: 0 }, children: jsx(Tooltip, { title: "Copy", placement: "top", children: jsx(MDInput, { size: "small", value: "1172913" }) }) })] }), jsxs(MDBox, { bgColor: darkMode ? "grey-900" : "grey-100", borderRadius: "lg", display: "flex", justifyContent: "space-between", alignItems: { xs: "flex-start", sm: "center" }, flexDirection: { xs: "column", sm: "row" }, my: 3, py: 1, pl: { xs: 1, sm: 2 }, pr: 1, children: [jsx(MDTypography, { variant: "button", fontWeight: "medium", color: "text", children: "Connected account" }), jsxs(MDBox, { display: "flex", alignItems: { xs: "flex-start", sm: "center" }, flexDirection: { xs: "column", sm: "row" }, children: [jsx(MDBox, { mr: 2, mb: { xs: 1, sm: 0 }, lineHeight: 0, children: jsx(MDTypography, { variant: "button", fontWeight: "medium", children: "hello@creative-tim.com" }) }), jsx(MDButton, { variant: "gradient", color: "dark", size: "small", children: "delete" })] })] })] }), jsx(Divider, {}), jsxs(MDBox, { display: "flex", justifyContent: "space-between", alignItems: { xs: "flex-start", sm: "center" }, flexDirection: { xs: "column", sm: "row" }, children: [jsxs(MDBox, { display: "flex", alignItems: "center", children: [jsx(MDAvatar, { src: logoSpotify, alt: "Slack logo", variant: "rounded" }), jsxs(MDBox, { ml: 2, lineHeight: 0, children: [jsx(MDTypography, { variant: "h5", fontWeight: "medium", children: "Spotify" }), jsx(MDTypography, { variant: "button", color: "text", children: "Music" })] })] }), jsxs(MDBox, { display: "flex", justifyContent: "flex-end", alignItems: "center", width: { xs: "100%", sm: "auto" }, mt: { xs: 1, sm: 0 }, children: [jsx(MDBox, { lineHeight: 0, mx: 2, children: jsx(MDTypography, { variant: "button", color: "text", children: spotify2FA ? "Enabled" : "Disabled" }) }), jsx(MDBox, { mr: 1, children: jsx(Switch, { checked: spotify2FA, onChange: handleSetSpotify2FA }) })] })] }), jsx(Divider, {}), jsxs(MDBox, { display: "flex", justifyContent: "space-between", alignItems: { xs: "flex-start", sm: "center" }, flexDirection: { xs: "column", sm: "row" }, children: [jsxs(MDBox, { display: "flex", alignItems: "center", children: [jsx(MDAvatar, { src: logoAtlassian, alt: "Slack logo", variant: "rounded" }), jsxs(MDBox, { ml: 2, lineHeight: 0, children: [jsx(MDTypography, { variant: "h5", fontWeight: "medium", children: "Atlassian" }), jsx(MDTypography, { variant: "button", color: "text", children: "Payment vendor" })] })] }), jsxs(MDBox, { display: "flex", justifyContent: "flex-end", alignItems: "center", width: { xs: "100%", sm: "auto" }, mt: { xs: 1, sm: 0 }, children: [jsx(MDBox, { lineHeight: 0, mx: 2, children: jsx(MDTypography, { variant: "button", color: "text", children: atlassian2FA ? "Enabled" : "Disabled" }) }), jsx(MDBox, { mr: 1, children: jsx(Switch, { checked: atlassian2FA, onChange: handleSetAtlassian2FA }) })] })] }), jsx(Divider, {}), jsxs(MDBox, { display: "flex", justifyContent: "space-between", alignItems: { xs: "flex-start", sm: "center" }, flexDirection: { xs: "column", sm: "row" }, children: [jsxs(MDBox, { display: "flex", alignItems: "center", children: [jsx(MDAvatar, { src: logoAsana, alt: "Slack logo", variant: "rounded" }), jsxs(MDBox, { ml: 2, lineHeight: 0, children: [jsx(MDTypography, { variant: "h5", fontWeight: "medium", children: "Asana" }), jsx(MDTypography, { variant: "button", color: "text", children: "Organize your team" })] })] }), jsxs(MDBox, { display: "flex", alignItems: "center", justifyContent: "flex-end", width: { xs: "100%", sm: "auto" }, mt: { xs: 1, sm: 0 }, children: [jsx(MDBox, { lineHeight: 0, mx: 2, children: jsx(MDTypography, { variant: "button", color: "text", children: asana2FA ? "Enabled" : "Disabled" }) }), jsx(MDBox, { mr: 1, children: jsx(Switch, { checked: asana2FA, onChange: handleSetAsana2FA }) })] })] })] })] }));
|
|
}
|
|
|
|
function TableCell({ width, align, padding, noBorder, children }) {
|
|
return (jsx(MDBox, { component: "th", width: width, pt: padding[0], pr: padding[1], pb: padding[2], pl: padding[3], textAlign: align, sx: {
|
|
border: ({ borders: { borderWidth }, palette: { light } }) => noBorder ? 0 : `${borderWidth[1]} solid ${light.main}`,
|
|
}, children: jsx(MDTypography, { component: "div", variant: "body2", color: "text", children: children }) }));
|
|
}
|
|
// Declaring default props for TableCell
|
|
TableCell.defaultProps = {
|
|
width: "auto",
|
|
align: "left",
|
|
padding: [],
|
|
noBorder: false,
|
|
};
|
|
|
|
function Notifications() {
|
|
return (jsxs(Card, { id: "notifications", children: [jsxs(MDBox, { p: 3, lineHeight: 1, children: [jsx(MDBox, { mb: 1, children: jsx(MDTypography, { variant: "h5", children: "Notifications" }) }), jsx(MDTypography, { variant: "button", color: "text", children: "Choose how you receive notifications. These notification settings apply to the things you\u2019re watching." })] }), jsx(MDBox, { pb: 3, px: 3, children: jsx(MDBox, { minWidth: "auto", sx: { overflow: "scroll" }, children: jsxs(Table, { sx: { minWidth: "36rem" }, children: [jsx(MDBox, { component: "thead", children: jsxs(TableRow, { children: [jsx(TableCell, { width: "100%", padding: [1.5, 3, 1.5, 0.5], children: "Activity" }), jsx(TableCell, { align: "center", padding: [1.5, 6, 1.5, 6], children: "Email" }), jsx(TableCell, { align: "center", padding: [1.5, 6, 1.5, 6], children: "Push" }), jsx(TableCell, { align: "center", padding: [1.5, 6, 1.5, 6], children: "SMS" })] }) }), jsxs(TableBody, { children: [jsxs(TableRow, { children: [jsx(TableCell, { padding: [1, 1, 1, 0.5], children: jsxs(MDBox, { lineHeight: 1.4, children: [jsx(MDTypography, { display: "block", variant: "button", fontWeight: "regular", children: "Mentions" }), jsx(MDTypography, { variant: "caption", color: "text", fontWeight: "regular", children: "Notify when another user mentions you in a comment" })] }) }), jsx(TableCell, { align: "center", padding: [1, 1, 1, 0.5], children: jsx(Switch, { defaultChecked: true }) }), jsx(TableCell, { align: "center", padding: [1, 1, 1, 0.5], children: jsx(Switch, {}) }), jsx(TableCell, { align: "center", padding: [1, 1, 1, 0.5], children: jsx(Switch, {}) })] }), jsxs(TableRow, { children: [jsx(TableCell, { padding: [1, 1, 1, 0.5], children: jsxs(MDBox, { lineHeight: 1.4, children: [jsx(MDTypography, { display: "block", variant: "button", fontWeight: "regular", children: "Comments" }), jsx(MDTypography, { variant: "caption", color: "text", fontWeight: "regular", children: "Notify when another user comments your item." })] }) }), jsx(TableCell, { align: "center", padding: [1, 1, 1, 0.5], children: jsx(Switch, { defaultChecked: true }) }), jsx(TableCell, { align: "center", padding: [1, 1, 1, 0.5], children: jsx(Switch, { defaultChecked: true }) }), jsx(TableCell, { align: "center", padding: [1, 1, 1, 0.5], children: jsx(Switch, {}) })] }), jsxs(TableRow, { children: [jsx(TableCell, { padding: [1, 1, 1, 0.5], children: jsxs(MDBox, { lineHeight: 1.4, children: [jsx(MDTypography, { display: "block", variant: "button", fontWeight: "regular", children: "Follows" }), jsx(MDTypography, { variant: "caption", color: "text", fontWeight: "regular", children: "Notify when another user follows you." })] }) }), jsx(TableCell, { align: "center", padding: [1, 1, 1, 0.5], children: jsx(Switch, {}) }), jsx(TableCell, { align: "center", padding: [1, 1, 1, 0.5], children: jsx(Switch, { defaultChecked: true }) }), jsx(TableCell, { align: "center", padding: [1, 1, 1, 0.5], children: jsx(Switch, {}) })] }), jsxs(TableRow, { children: [jsx(TableCell, { padding: [1, 1, 1, 0.5], noBorder: true, children: jsx(MDTypography, { display: "block", variant: "button", color: "text", children: "Log in from a new device" }) }), jsx(TableCell, { align: "center", padding: [1, 1, 1, 0.5], noBorder: true, children: jsx(Switch, { defaultChecked: true }) }), jsx(TableCell, { align: "center", padding: [1, 1, 1, 0.5], noBorder: true, children: jsx(Switch, { defaultChecked: true }) }), jsx(TableCell, { align: "center", padding: [1, 1, 1, 0.5], noBorder: true, children: jsx(Switch, { defaultChecked: true }) })] })] })] }) }) })] }));
|
|
}
|
|
|
|
function Sessions() {
|
|
const actionButtonStyles = {
|
|
"& .material-icons-round": {
|
|
transform: `translateX(0)`,
|
|
transition: "all 200ms cubic-bezier(0.34,1.61,0.7,1.3)",
|
|
},
|
|
"&:hover .material-icons-round, &:focus .material-icons-round": {
|
|
transform: `translateX(4px)`,
|
|
},
|
|
};
|
|
return (jsxs(Card, { id: "sessions", children: [jsxs(MDBox, { p: 3, lineHeight: 1, children: [jsx(MDBox, { mb: 1, children: jsx(MDTypography, { variant: "h5", children: "Sessions" }) }), jsx(MDTypography, { variant: "button", color: "text", fontWeight: "regular", children: "This is a list of devices that have logged into your account. Remove those that you do not recognize." })] }), jsxs(MDBox, { pb: 3, px: 3, sx: { overflow: "auto" }, children: [jsxs(MDBox, { display: "flex", justifyContent: "space-between", alignItems: "center", width: { xs: "max-content", sm: "100%" }, children: [jsxs(MDBox, { display: "flex", alignItems: "center", children: [jsx(MDBox, { textAlign: "center", color: "text", px: { xs: 0, md: 1.5 }, opacity: 0.6, children: jsx(Icon, { children: "desktop_windows" }) }), jsxs(MDBox, { height: "100%", ml: 2, lineHeight: 1, mr: 2, children: [jsx(MDTypography, { display: "block", variant: "button", fontWeight: "regular", color: "text", children: "Bucharest 68.133.163.201" }), jsx(MDTypography, { variant: "caption", color: "text", children: "Your current session" })] })] }), jsxs(MDBox, { display: "flex", alignItems: "center", children: [jsx(MDBadge, { variant: "contained", size: "xs", badgeContent: "active", color: "success", container: true }), jsx(MDBox, { mx: 2, lineHeight: 1, children: jsx(MDTypography, { variant: "button", color: "secondary", fontWeight: "regular", children: "EU" }) }), jsxs(MDTypography, { component: "a", href: "#", variant: "button", color: "info", fontWeight: "regular", sx: actionButtonStyles, children: ["See more\u00A0", jsx(Icon, { sx: { fontWeight: "bold", verticalAlign: "middle" }, children: "arrow_forward" })] })] })] }), jsx(Divider, {}), jsxs(MDBox, { display: "flex", justifyContent: "space-between", alignItems: "center", width: { xs: "max-content", sm: "100%" }, children: [jsxs(MDBox, { display: "flex", alignItems: "center", mr: 2, children: [jsx(MDBox, { textAlign: "center", color: "text", px: { xs: 0, md: 1.5 }, opacity: 0.6, children: jsx(Icon, { children: "desktop_windows" }) }), jsx(MDBox, { ml: 2, children: jsx(MDTypography, { display: "block", variant: "body2", fontWeight: "regular", color: "text", children: "Chrome on macOS" }) })] }), jsxs(MDBox, { display: "flex", alignItems: "center", children: [jsx(MDBox, { mx: 2, lineHeight: 1, children: jsx(MDTypography, { variant: "button", color: "secondary", fontWeight: "regular", children: "US" }) }), jsxs(MDTypography, { component: "a", href: "#", variant: "button", color: "info", fontWeight: "regular", sx: actionButtonStyles, children: ["See more\u00A0", jsx(Icon, { sx: { fontWeight: "bold", verticalAlign: "middle" }, children: "arrow_forward" })] })] })] }), jsx(Divider, {}), jsxs(MDBox, { display: "flex", justifyContent: "space-between", alignItems: "center", width: { xs: "max-content", sm: "100%" }, children: [jsxs(MDBox, { display: "flex", alignItems: "center", mr: 2, children: [jsx(MDBox, { textAlign: "center", color: "text", px: { xs: 0, md: 1.5 }, opacity: 0.6, children: jsx(Icon, { children: "phone_iphone" }) }), jsx(MDBox, { ml: 2, children: jsx(MDTypography, { display: "block", variant: "body2", fontWeight: "regular", color: "text", children: "Safari on iPhone" }) })] }), jsxs(MDBox, { display: "flex", alignItems: "center", children: [jsx(MDBox, { mx: 2, lineHeight: 1, children: jsx(MDTypography, { variant: "button", color: "secondary", fontWeight: "regular", children: "US" }) }), jsxs(MDTypography, { component: "a", href: "#", variant: "button", color: "info", fontWeight: "regular", sx: actionButtonStyles, children: ["See more\u00A0", jsx(Icon, { sx: { fontWeight: "bold", verticalAlign: "middle" }, children: "arrow_forward" })] })] })] })] })] }));
|
|
}
|
|
|
|
function DeleteAccount() {
|
|
return (jsx(Card, { id: "delete-account", children: jsxs(MDBox, { pr: 3, display: "flex", justifyContent: "space-between", alignItems: { xs: "flex-start", sm: "center" }, flexDirection: { xs: "column", sm: "row" }, children: [jsxs(MDBox, { p: 3, lineHeight: 1, children: [jsx(MDBox, { mb: 1, children: jsx(MDTypography, { variant: "h5", children: "Delete Account" }) }), jsx(MDTypography, { variant: "button", color: "text", children: "Once you delete your account, there is no going back. Please be certain." })] }), jsxs(MDBox, { display: "flex", flexDirection: { xs: "column", sm: "row" }, children: [jsx(MDButton, { variant: "outlined", color: "secondary", children: "deactivate" }), jsx(MDBox, { ml: { xs: 0, sm: 1 }, mt: { xs: 1, sm: 0 }, children: jsx(MDButton, { variant: "gradient", color: "error", sx: { height: "100%" }, children: "delete account" }) })] })] }) }));
|
|
}
|
|
|
|
function Settings() {
|
|
return (jsx(BaseLayout, { children: jsx(MDBox, { mt: 4, children: jsxs(Grid, { container: true, spacing: 3, children: [jsx(Grid, { item: true, xs: 12, lg: 3, children: jsx(Sidenav, {}) }), jsx(Grid, { item: true, xs: 12, lg: 9, children: jsx(MDBox, { mb: 3, children: jsxs(Grid, { container: true, spacing: 3, children: [jsx(Grid, { item: true, xs: 12, children: jsx(Header, {}) }), jsx(Grid, { item: true, xs: 12, children: jsx(BasicInfo, {}) }), jsx(Grid, { item: true, xs: 12, children: jsx(ChangePassword, {}) }), jsx(Grid, { item: true, xs: 12, children: jsx(Authentication, {}) }), jsx(Grid, { item: true, xs: 12, children: jsx(Accounts, {}) }), jsx(Grid, { item: true, xs: 12, children: jsx(Notifications, {}) }), jsx(Grid, { item: true, xs: 12, children: jsx(Sessions, {}) }), jsx(Grid, { item: true, xs: 12, children: jsx(DeleteAccount, {}) })] }) }) })] }) }) }));
|
|
}
|
|
|
|
function DefaultNavbarDropdown({ name, icon, children, collapseStatus, light, href, route, collapse, ...rest }) {
|
|
const linkComponent = {
|
|
component: "a",
|
|
href,
|
|
target: "_blank",
|
|
rel: "noreferrer",
|
|
};
|
|
const routeComponent = {
|
|
component: Link$1,
|
|
to: route,
|
|
};
|
|
return (jsxs(Fragment, { children: [jsxs(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), children: [jsx(MDTypography, { variant: "body2", lineHeight: 1, color: "inherit", sx: { alignSelf: "center", "& *": { verticalAlign: "middle" } }, children: icon }), jsx(MDTypography, { variant: "button", fontWeight: "regular", textTransform: "capitalize", color: light ? "white" : "dark", sx: { fontWeight: "100%", ml: 1, mr: 0.25 }, children: name }), jsx(MDTypography, { variant: "body2", color: light ? "white" : "dark", ml: "auto", children: jsx(Icon, { sx: { fontWeight: "normal", verticalAlign: "middle" }, children: collapse && "keyboard_arrow_down" }) })] }), children && (jsx(Collapse, { in: Boolean(collapseStatus), timeout: 400, unmountOnExit: true, children: children }))] }));
|
|
}
|
|
// Declaring default props for DefaultNavbarDropdown
|
|
DefaultNavbarDropdown.defaultProps = {
|
|
icon: false,
|
|
children: false,
|
|
collapseStatus: false,
|
|
light: false,
|
|
href: "",
|
|
route: "",
|
|
};
|
|
|
|
function DefaultNavbarMobile({ routes, open }) {
|
|
const [collapse, setCollapse] = useState("");
|
|
const handleSetCollapse = (name) => collapse === name ? setCollapse(false) : setCollapse(name);
|
|
const renderNavbarItems = routes.map(({ name, icon, collapse: routeCollapses, href, route, collapse: navCollapse }) => (jsx(DefaultNavbarDropdown, { name: name, icon: icon, collapseStatus: name === collapse, onClick: () => handleSetCollapse(name), href: href, route: route, collapse: Boolean(navCollapse), children: jsx(MDBox, { sx: { height: "15rem", maxHeight: "15rem", overflowY: "scroll" }, children: routeCollapses &&
|
|
routeCollapses.map((item) => (jsx(MDBox, { px: 2, children: item.collapse ? (jsxs(Fragment, { children: [jsx(MDTypography, { display: "block", variant: "button", fontWeight: "bold", textTransform: "capitalize", py: 1, px: 0.5, children: item.name }), item.collapse.map((el) => (jsx(MDTypography, { component: el.route ? Link$1 : Link, 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 } }) => ({
|
|
borderRadius: borderRadius.md,
|
|
cursor: "pointer",
|
|
transition: "all 300ms linear",
|
|
"&:hover": {
|
|
backgroundColor: grey[200],
|
|
color: dark.main,
|
|
},
|
|
}), children: el.name }, el.name)))] })) : (jsxs(MDBox, { display: "block", component: item.route ? Link$1 : Link, 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,
|
|
},
|
|
},
|
|
}), children: [jsx(MDTypography, { display: "block", variant: "button", fontWeight: "bold", textTransform: "capitalize", children: item.name }), jsx(MDTypography, { display: "block", variant: "button", color: "text", fontWeight: "regular", sx: { transition: "all 300ms linear" }, children: item.description })] }, item.key)) }, item.name))) }) }, name)));
|
|
return (jsx(Collapse, { in: Boolean(open), timeout: "auto", unmountOnExit: true, children: jsx(MDBox, { width: "calc(100% + 1.625rem)", my: 2, ml: -2, children: renderNavbarItems }) }));
|
|
}
|
|
|
|
function NewGrow(props) {
|
|
return jsx(Grow, { ...props });
|
|
}
|
|
function DefaultNavbar({ routes, brand, transparent, light, action }) {
|
|
const [controller] = useMaterialUIController();
|
|
const { darkMode } = controller;
|
|
const [dropdown, setDropdown] = useState("");
|
|
const [dropdownEl, setDropdownEl] = useState("");
|
|
const [dropdownName, setDropdownName] = useState("");
|
|
const [nestedDropdown, setNestedDropdown] = useState("");
|
|
const [nestedDropdownEl, setNestedDropdownEl] = useState("");
|
|
const [nestedDropdownName, setNestedDropdownName] = useState("");
|
|
const [arrowRef, setArrowRef] = useState(null);
|
|
const [mobileNavbar, setMobileNavbar] = useState(false);
|
|
const [mobileView, setMobileView] = useState(false);
|
|
const openMobileNavbar = () => setMobileNavbar(!mobileNavbar);
|
|
useEffect(() => {
|
|
// A function that sets the display state for the DefaultNavbarMobile.
|
|
function displayMobileNavbar() {
|
|
if (window.innerWidth < breakpoints$1.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 }) => (jsx(DefaultNavbarDropdown, { name: name, icon: icon, href: href, route: route, collapse: Boolean(collapse), onMouseEnter: ({ currentTarget }) => {
|
|
if (collapse) {
|
|
setDropdown(currentTarget);
|
|
setDropdownEl(currentTarget);
|
|
setDropdownName(name);
|
|
}
|
|
}, onMouseLeave: () => collapse && setDropdown(null), light: light }, name)));
|
|
// Render the routes on the dropdown menu
|
|
const renderRoutes = routes.map(({ name, collapse, columns, rowsPerColumn }) => {
|
|
let template;
|
|
// Render the dropdown menu that should be display as columns
|
|
if (collapse && columns && name === dropdownName) {
|
|
const calculateColumns = collapse.reduce((resultArray, item, index) => {
|
|
const chunkIndex = Math.floor(index / rowsPerColumn);
|
|
if (!resultArray[chunkIndex]) {
|
|
resultArray[chunkIndex] = [];
|
|
}
|
|
resultArray[chunkIndex].push(item);
|
|
return resultArray;
|
|
}, []);
|
|
template = (jsx(Grid, { container: true, spacing: 3, py: 1, px: 1.5, children: calculateColumns.map((cols, key) => {
|
|
const gridKey = `grid-${key}`;
|
|
const dividerKey = `divider-${key}`;
|
|
return (jsxs(Grid, { item: true, xs: 12 / columns, sx: { position: "relative" }, children: [cols.map((col, index) => (jsxs(Fragment$1, { children: [jsxs(MDBox, { width: "100%", display: "flex", alignItems: "center", py: 1, mt: index !== 0 ? 2 : 0, children: [jsx(MDBox, { display: "flex", justifyContent: "center", alignItems: "center", width: "1.5rem", height: "1.5rem", borderRadius: "md", color: "text", mr: 1, fontSize: "1rem", lineHeight: 1, children: col.icon }), jsx(MDTypography, { display: "block", variant: "button", fontWeight: "bold", textTransform: "capitalize", children: col.name })] }), col.collapse.map((item) => (jsx(MDTypography, { component: item.route ? Link$1 : Link, to: item.route ? item.route : "", href: item.href ? item.href : (e) => 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 } }) => ({
|
|
borderRadius: borderRadius.md,
|
|
cursor: "pointer",
|
|
transition: "all 300ms linear",
|
|
"&:hover": {
|
|
backgroundColor: grey[200],
|
|
color: dark.main,
|
|
},
|
|
}), children: item.name }, item.name)))] }, col.name))), key !== 0 && (jsx(Divider, { orientation: "vertical", sx: {
|
|
position: "absolute",
|
|
top: "50%",
|
|
left: "-4px",
|
|
transform: "translateY(-45%)",
|
|
height: "90%",
|
|
} }, dividerKey))] }, gridKey));
|
|
}) }, name));
|
|
// Render the dropdown menu that should be display as list items
|
|
}
|
|
else if (collapse && name === dropdownName) {
|
|
template = collapse.map((item) => {
|
|
const linkComponent = {
|
|
component: Link,
|
|
href: item.href,
|
|
target: "_blank",
|
|
rel: "noreferrer",
|
|
};
|
|
const routeComponent = {
|
|
component: Link$1,
|
|
to: item.route,
|
|
};
|
|
return (jsxs(MDTypography, { ...(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 } }) => ({
|
|
borderRadius: borderRadius.md,
|
|
cursor: "pointer",
|
|
transition: "all 300ms linear",
|
|
"&:hover": {
|
|
backgroundColor: grey[200],
|
|
color: dark.main,
|
|
"& *": {
|
|
color: dark.main,
|
|
},
|
|
},
|
|
}), onMouseEnter: ({ currentTarget }) => {
|
|
if (item.dropdown) {
|
|
setNestedDropdown(currentTarget);
|
|
setNestedDropdownEl(currentTarget);
|
|
setNestedDropdownName(item.name);
|
|
}
|
|
}, onMouseLeave: () => {
|
|
if (item.dropdown) {
|
|
setNestedDropdown(null);
|
|
}
|
|
}, children: [item.description ? (jsxs(MDBox, { display: "flex", py: 0.25, fontSize: "1rem", color: "text", children: [typeof item.icon === "string" ? (jsx(Icon, { color: "inherit", children: item.icon })) : (jsx(MDBox, { color: "inherit", children: item.icon })), jsxs(MDBox, { pl: 1, lineHeight: 0, children: [jsx(MDTypography, { variant: "button", display: "block", fontWeight: "bold", textTransform: "capitalize", children: item.name }), jsx(MDTypography, { variant: "button", fontWeight: "regular", color: "text", children: item.description })] })] })) : (jsxs(MDBox, { display: "flex", alignItems: "center", color: "text", children: [jsx(Icon, { sx: { mr: 1 }, children: item.icon }), item.name] })), item.collapse && (jsx(Icon, { sx: { fontWeight: "normal", verticalAlign: "middle", mr: -0.5 }, children: "keyboard_arrow_right" }))] }, item.name));
|
|
});
|
|
}
|
|
return template;
|
|
});
|
|
// Routes dropdown menu
|
|
const dropdownMenu = (jsx(Popper, { anchorEl: dropdown, popperRef: null, open: Boolean(dropdown), placement: "top-start", transition: true, style: { zIndex: 10 }, modifiers: [
|
|
{
|
|
name: "arrow",
|
|
enabled: true,
|
|
options: {
|
|
element: arrowRef,
|
|
},
|
|
},
|
|
], onMouseEnter: () => setDropdown(dropdownEl), onMouseLeave: () => {
|
|
if (!nestedDropdown) {
|
|
setDropdown(null);
|
|
setDropdownName("");
|
|
}
|
|
}, children: ({ TransitionProps }) => (jsx(NewGrow, { ...TransitionProps, sx: {
|
|
transformOrigin: "left top",
|
|
background: ({ palette: { white } }) => white.main,
|
|
}, children: jsxs(MDBox, { borderRadius: "lg", children: [jsx(MDTypography, { variant: "h1", color: "white", children: jsx(Icon, { ref: setArrowRef, sx: { mt: -3 }, children: "arrow_drop_up" }) }), jsx(MDBox, { shadow: "lg", borderRadius: "lg", p: 1.625, mt: 1, children: renderRoutes })] }) })) }));
|
|
// Render routes that are nested inside the dropdown menu routes
|
|
const renderNestedRoutes = routes.map(({ collapse, columns }) => collapse && !columns
|
|
? collapse.map(({ name: parentName, collapse: nestedCollapse }) => {
|
|
let template;
|
|
if (parentName === nestedDropdownName) {
|
|
template =
|
|
nestedCollapse &&
|
|
nestedCollapse.map((item) => {
|
|
const linkComponent = {
|
|
component: Link,
|
|
href: item.href,
|
|
target: "_blank",
|
|
rel: "noreferrer",
|
|
};
|
|
const routeComponent = {
|
|
component: Link$1,
|
|
to: item.route,
|
|
};
|
|
return (jsxs(MDTypography, { ...(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 } }) => ({
|
|
borderRadius: borderRadius.md,
|
|
cursor: "pointer",
|
|
transition: "all 300ms linear",
|
|
"&:hover": {
|
|
backgroundColor: grey[200],
|
|
color: dark.main,
|
|
"& *": {
|
|
color: dark.main,
|
|
},
|
|
},
|
|
}), children: [item.description ? (jsxs(MDBox, { children: [item.name, jsx(MDTypography, { display: "block", variant: "button", color: "text", fontWeight: "regular", sx: { transition: "all 300ms linear" }, children: item.description })] })) : (item.name), item.collapse && (jsx(Icon, { fontSize: "small", sx: { fontWeight: "normal", verticalAlign: "middle", mr: -0.5 }, children: "keyboard_arrow_right" }))] }, item.name));
|
|
});
|
|
}
|
|
return template;
|
|
})
|
|
: null);
|
|
// Dropdown menu for the nested dropdowns
|
|
const nestedDropdownMenu = (jsx(Popper, { anchorEl: nestedDropdown, popperRef: null, open: Boolean(nestedDropdown), placement: "right-start", transition: true, style: { zIndex: 10 }, onMouseEnter: () => {
|
|
setNestedDropdown(nestedDropdownEl);
|
|
}, onMouseLeave: () => {
|
|
setNestedDropdown(null);
|
|
setNestedDropdownName("");
|
|
setDropdown(null);
|
|
}, children: ({ TransitionProps }) => (jsx(NewGrow, { ...TransitionProps, sx: {
|
|
transformOrigin: "left top",
|
|
background: ({ palette: { white } }) => white.main,
|
|
}, children: jsx(MDBox, { ml: 2.5, mt: -2.5, borderRadius: "lg", children: jsx(MDBox, { shadow: "lg", borderRadius: "lg", py: 1.5, px: 1, mt: 2, children: renderNestedRoutes }) }) })) }));
|
|
return (jsxs(Container, { children: [jsxs(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 }, }) => ({
|
|
backgroundColor: transparent
|
|
? transparentColor.main
|
|
: rgba(darkMode ? background.sidenav : white.main, 0.8),
|
|
backdropFilter: transparent ? "none" : `saturate(200%) blur(30px)`,
|
|
}), children: [jsx(MDBox, { component: Link$1, to: "/", py: transparent ? 1.5 : 0.75, lineHeight: 1, pl: { xs: 0, lg: 1 }, children: jsx(MDTypography, { variant: "button", fontWeight: "bold", color: light ? "white" : "dark", children: brand }) }), jsx(MDBox, { color: "inherit", display: { xs: "none", lg: "flex" }, m: 0, p: 0, children: renderNavbarItems }), action &&
|
|
(action.type === "internal" ? (jsx(MDBox, { display: { xs: "none", lg: "inline-block" }, children: jsx(MDButton, { component: Link$1, to: action.route, variant: "gradient", color: action.color ? action.color : "info", size: "small", children: action.label }) })) : (jsx(MDBox, { display: { xs: "none", lg: "inline-block" }, children: jsx(MDButton, { component: "a", href: action.route, target: "_blank", rel: "noreferrer", variant: "gradient", color: action.color ? action.color : "info", size: "small", sx: { mt: -0.3 }, children: action.label }) }))), jsx(MDBox, { display: { xs: "inline-block", lg: "none" }, lineHeight: 0, py: 1.5, pl: 1.5, color: "inherit", sx: { cursor: "pointer" }, onClick: openMobileNavbar, children: mobileView && jsx(DefaultNavbarMobile, { routes: routes, open: mobileNavbar }) })] }), dropdownMenu, nestedDropdownMenu] }));
|
|
}
|
|
// Declaring default props for DefaultNavbar
|
|
DefaultNavbar.defaultProps = {
|
|
brand: "Material Dashboard PRO",
|
|
transparent: false,
|
|
light: false,
|
|
action: false,
|
|
};
|
|
|
|
function PageLayout({ background, children }) {
|
|
const [, dispatch] = useMaterialUIController();
|
|
const { pathname } = useLocation();
|
|
useEffect(() => {
|
|
setLayout(dispatch, "page");
|
|
}, [pathname]);
|
|
return (jsx(MDBox, { width: "100vw", height: "100%", minHeight: "100vh", bgColor: background, sx: { overflowX: "hidden" }, children: children }));
|
|
}
|
|
// Declaring default props for PageLayout
|
|
PageLayout.defaultProps = {
|
|
background: "default",
|
|
};
|
|
|
|
const pageRoutes = [
|
|
{
|
|
name: "pages",
|
|
columns: 3,
|
|
rowsPerColumn: 2,
|
|
collapse: [
|
|
{
|
|
name: "dashboards",
|
|
icon: jsx(Icon, { children: "dashboard" }),
|
|
collapse: [
|
|
{
|
|
name: "analytics",
|
|
route: "/dashboards/analytics",
|
|
},
|
|
{
|
|
name: "sales",
|
|
route: "/dashboards/sales",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
name: "users",
|
|
icon: jsx(Icon, { children: "people" }),
|
|
collapse: [
|
|
{
|
|
name: "reports",
|
|
route: "/pages/users/reports",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
name: "extra",
|
|
icon: jsx(Icon, { children: "queue_play_next" }),
|
|
collapse: [
|
|
{
|
|
name: "pricing page",
|
|
route: "/pages/pricing-page",
|
|
},
|
|
{ name: "RTL", route: "/pages/rtl" },
|
|
{ name: "widgets", route: "/pages/widgets" },
|
|
{ name: "charts", route: "/pages/charts" },
|
|
{
|
|
name: "notfications",
|
|
route: "/pages/notifications",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
name: "projects",
|
|
icon: jsx(Icon, { children: "precision_manufacturing" }),
|
|
collapse: [
|
|
{
|
|
name: "timeline",
|
|
route: "/pages/projects/timeline",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
name: "account",
|
|
icon: jsx(Icon, { children: "account_balance" }),
|
|
collapse: [
|
|
{
|
|
name: "settings",
|
|
route: "/pages/account/setting",
|
|
},
|
|
{
|
|
name: "billing",
|
|
route: "/pages/account/billing",
|
|
},
|
|
{
|
|
name: "invoice",
|
|
route: "/pages/account/invoice",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
name: "profile",
|
|
icon: jsx(Icon, { children: "badge" }),
|
|
collapse: [
|
|
{
|
|
name: "profile overview",
|
|
route: "/pages/profile/profile-overview",
|
|
},
|
|
{
|
|
name: "all projects",
|
|
route: "/pages/profile/all-projects",
|
|
},
|
|
],
|
|
},
|
|
],
|
|
},
|
|
{
|
|
name: "authenticaton",
|
|
collapse: [
|
|
{
|
|
name: "sign in",
|
|
dropdown: true,
|
|
icon: jsx(Icon, { children: "login" }),
|
|
collapse: [
|
|
{
|
|
name: "basic",
|
|
route: "/authentication/sign-in/basic",
|
|
},
|
|
{
|
|
name: "cover",
|
|
route: "/authentication/sign-in/cover",
|
|
},
|
|
{
|
|
name: "illustration",
|
|
route: "/authentication/sign-in/illustration",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
name: "sign up",
|
|
dropdown: true,
|
|
icon: jsx(Icon, { children: "assignment" }),
|
|
collapse: [
|
|
{
|
|
name: "cover",
|
|
route: "/authentication/sign-up/cover",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
name: "reset password",
|
|
dropdown: true,
|
|
icon: jsx(Icon, { children: "restart_alt" }),
|
|
collapse: [
|
|
{
|
|
name: "cover",
|
|
route: "/authentication/reset-password/cover",
|
|
},
|
|
],
|
|
},
|
|
],
|
|
},
|
|
{
|
|
name: "application",
|
|
collapse: [
|
|
{
|
|
name: "kanban",
|
|
route: "/applications/kanban",
|
|
icon: "widgets",
|
|
},
|
|
{
|
|
name: "wizard",
|
|
route: "/applications/wizard",
|
|
icon: "import_contacts",
|
|
},
|
|
{
|
|
name: "data tables",
|
|
route: "/applications/data-tables",
|
|
icon: "backup_table",
|
|
},
|
|
{
|
|
name: "calendar",
|
|
route: "/applications/calendar",
|
|
icon: "event",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
name: "ecommerce",
|
|
columns: 2,
|
|
rowsPerColumn: 1,
|
|
collapse: [
|
|
{
|
|
name: "orders",
|
|
icon: jsx(Icon, { children: "shopping_cart" }),
|
|
collapse: [
|
|
{
|
|
name: "order list",
|
|
route: "/ecommerce/orders/order-list",
|
|
},
|
|
{
|
|
name: "order details",
|
|
route: "/ecommerce/orders/order-details",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
name: "products",
|
|
icon: jsx(Icon, { children: "memory" }),
|
|
collapse: [
|
|
{
|
|
name: "new product",
|
|
route: "/ecommerce/products/new-product",
|
|
},
|
|
{
|
|
name: "edit product",
|
|
route: "/ecommerce/products/edit-product",
|
|
},
|
|
{
|
|
name: "product page",
|
|
route: "/ecommerce/products/product-page",
|
|
},
|
|
],
|
|
},
|
|
],
|
|
},
|
|
{
|
|
name: "docs",
|
|
collapse: [
|
|
{
|
|
name: "getting started",
|
|
href: "https://www.creative-tim.com/learning-lab/react/quick-start/material-dashboard/",
|
|
description: "All about overview, quick start, license and contents",
|
|
icon: jsx(Icon, { children: "article" }),
|
|
},
|
|
{
|
|
name: "foundation",
|
|
href: "https://www.creative-tim.com/learning-lab/react/colors/material-dashboard/",
|
|
description: "See our colors, icons and typography",
|
|
icon: jsx(Icon, { children: "grading" }),
|
|
},
|
|
{
|
|
name: "components",
|
|
href: "https://www.creative-tim.com/learning-lab/react/alerts/material-dashboard/",
|
|
description: "Explore our collection of fully designed components",
|
|
icon: jsx(Icon, { children: "apps" }),
|
|
},
|
|
{
|
|
name: "plugins",
|
|
href: "https://www.creative-tim.com/learning-lab/react/datepicker/material-dashboard/",
|
|
description: "Check how you can integrate our plugins",
|
|
icon: jsx(Icon, { children: "extension" }),
|
|
},
|
|
],
|
|
},
|
|
];
|
|
|
|
function Footer({ light }) {
|
|
const { size } = typography$1;
|
|
return (jsx(MDBox, { position: "absolute", width: "100%", bottom: 0, py: 4, children: jsx(Container, { children: jsxs(MDBox, { width: "100%", display: "flex", flexDirection: { xs: "column", lg: "row" }, justifyContent: "space-between", alignItems: "center", px: 1.5, children: [jsxs(MDBox, { display: "flex", justifyContent: "center", alignItems: "center", flexWrap: "wrap", color: light ? "white" : "text", fontSize: size.sm, children: ["\u00A9 ", new Date().getFullYear(), ", made with", jsx(MDBox, { fontSize: size.md, color: light ? "white" : "dark", mb: -0.5, mx: 0.25, children: jsx(Icon, { color: "inherit", fontSize: "inherit", children: "favorite" }) }), "by", jsx(Link, { href: "https://www.creative-tim.com/", target: "_blank", children: jsx(MDTypography, { variant: "button", fontWeight: "medium", color: light ? "white" : "dark", children: "\u00A0Creative Tim\u00A0" }) }), "for a better web."] }), jsxs(MDBox, { component: "ul", sx: ({ breakpoints }) => ({
|
|
display: "flex",
|
|
flexWrap: "wrap",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
listStyle: "none",
|
|
mt: 3,
|
|
mb: 0,
|
|
p: 0,
|
|
[breakpoints.up("lg")]: {
|
|
mt: 0,
|
|
},
|
|
}), children: [jsx(MDBox, { component: "li", pr: 2, lineHeight: 1, children: jsx(Link, { href: "https://www.creative-tim.com/", target: "_blank", children: jsx(MDTypography, { variant: "button", fontWeight: "regular", color: light ? "white" : "dark", children: "Creative Tim" }) }) }), jsx(MDBox, { component: "li", px: 2, lineHeight: 1, children: jsx(Link, { href: "https://www.creative-tim.com/presentation", target: "_blank", children: jsx(MDTypography, { variant: "button", fontWeight: "regular", color: light ? "white" : "dark", children: "About Us" }) }) }), jsx(MDBox, { component: "li", px: 2, lineHeight: 1, children: jsx(Link, { href: "https://www.creative-tim.com/blog", target: "_blank", children: jsx(MDTypography, { variant: "button", fontWeight: "regular", color: light ? "white" : "dark", children: "Blog" }) }) }), jsx(MDBox, { component: "li", pl: 2, lineHeight: 1, children: jsx(Link, { href: "https://www.creative-tim.com/license", target: "_blank", children: jsx(MDTypography, { variant: "button", fontWeight: "regular", color: light ? "white" : "dark", children: "License" }) }) })] })] }) }) }));
|
|
}
|
|
// Declaring default props for Footer
|
|
Footer.defaultProps = {
|
|
light: false,
|
|
};
|
|
|
|
function BasicLayout({ image, children }) {
|
|
return (jsxs(PageLayout, { children: [jsx(DefaultNavbar, { routes: pageRoutes, action: {
|
|
type: "external",
|
|
route: "https://creative-tim.com/product/material-dashboard-2-pro-react-ts",
|
|
label: "buy now",
|
|
color: "info",
|
|
}, transparent: true, light: true }), jsx(MDBox, { position: "absolute", width: "100%", minHeight: "100vh", sx: {
|
|
backgroundImage: ({ functions: { linearGradient, rgba }, palette: { gradients }, }) => image &&
|
|
`${linearGradient(rgba(gradients.dark.main, 0.6), rgba(gradients.dark.state, 0.6))}, url(${image})`,
|
|
backgroundSize: "cover",
|
|
backgroundPosition: "center",
|
|
backgroundRepeat: "no-repeat",
|
|
} }), jsx(MDBox, { px: 1, width: "100%", height: "100vh", mx: "auto", children: jsx(Grid, { container: true, spacing: 1, justifyContent: "center", alignItems: "center", height: "100%", children: jsx(Grid, { item: true, xs: 11, sm: 9, md: 5, lg: 4, xl: 3, children: children }) }) }), jsx(Footer, { light: true })] }));
|
|
}
|
|
|
|
function Basic() {
|
|
const [rememberMe, setRememberMe] = useState(false);
|
|
const handleSetRememberMe = () => setRememberMe(!rememberMe);
|
|
return (jsx(BasicLayout, { image: bgImage, children: jsxs(Card, { children: [jsxs(MDBox, { variant: "gradient", bgColor: "info", borderRadius: "lg", coloredShadow: "info", mx: 2, mt: -3, p: 2, mb: 1, textAlign: "center", children: [jsx(MDTypography, { variant: "h4", fontWeight: "medium", color: "white", mt: 1, children: "Sign in" }), jsxs(Grid, { container: true, spacing: 3, justifyContent: "center", sx: { mt: 1, mb: 2 }, children: [jsx(Grid, { item: true, xs: 2, children: jsx(MDTypography, { component: Link, href: "#", variant: "body1", color: "white", children: jsx(FacebookIcon, { color: "inherit" }) }) }), jsx(Grid, { item: true, xs: 2, children: jsx(MDTypography, { component: Link, href: "#", variant: "body1", color: "white", children: jsx(GitHubIcon, { color: "inherit" }) }) }), jsx(Grid, { item: true, xs: 2, children: jsx(MDTypography, { component: Link, href: "#", variant: "body1", color: "white", children: jsx(GoogleIcon, { color: "inherit" }) }) })] })] }), jsx(MDBox, { pt: 4, pb: 3, px: 3, children: jsxs(MDBox, { component: "form", role: "form", children: [jsx(MDBox, { mb: 2, children: jsx(MDInput, { type: "email", label: "Email", fullWidth: true }) }), jsx(MDBox, { mb: 2, children: jsx(MDInput, { type: "password", label: "Password", fullWidth: true }) }), jsxs(MDBox, { display: "flex", alignItems: "center", ml: -1, children: [jsx(Switch, { checked: rememberMe, onChange: handleSetRememberMe }), jsx(MDTypography, { variant: "button", fontWeight: "regular", color: "text", onClick: handleSetRememberMe, sx: { cursor: "pointer", userSelect: "none", ml: -1 }, children: "\u00A0\u00A0Remember me" })] }), jsx(MDBox, { mt: 4, mb: 1, children: jsx(MDButton, { variant: "gradient", color: "info", fullWidth: true, children: "sign in" }) }), jsx(MDBox, { mt: 3, mb: 1, textAlign: "center", children: jsxs(MDTypography, { variant: "button", color: "text", children: ["Don't have an account?", " ", jsx(MDTypography, { component: Link$1, to: "/authentication/sign-up/cover", variant: "button", color: "info", fontWeight: "medium", textGradient: true, children: "Sign up" })] }) })] }) })] }) }));
|
|
}
|
|
|
|
// import DefaultCell from "../../layouts/ecommerce/orders/order-list/components/DefaultCell";
|
|
// import team2 from "../../assets/images/team-2.jpg";
|
|
// import team3 from "../../assets/images/team-3.jpg";
|
|
const qController$1 = new QController("http://localhost:8000");
|
|
console.log(qController$1);
|
|
/*
|
|
function entityCell({ value }: any) {
|
|
const [name, data] = value;
|
|
return (
|
|
<DefaultCell value={typeof value === "string" ? value : name} suffix={data.suffix || false} />
|
|
);
|
|
}
|
|
|
|
*/
|
|
let dataTableData = {
|
|
columns: [],
|
|
rows: [],
|
|
};
|
|
function EntityList({ table }) {
|
|
const [menu, setMenu] = useState(null);
|
|
const openMenu = (event) => setMenu(event.currentTarget);
|
|
const closeMenu = () => setMenu(null);
|
|
(async () => {
|
|
await qController$1.loadTableMetaData(table.name).then((tableMetaData) => {
|
|
// alert(typeof tableMetaData);
|
|
// alert(typeof tableMetaData.fields);
|
|
// alert(Object.keys(tableMetaData.fields));
|
|
dataTableData = {
|
|
columns: [],
|
|
rows: [],
|
|
};
|
|
dataTableData.columns.push({ Header: "derp", accessor: "derp", width: "20%" });
|
|
Object.keys(tableMetaData.fields).forEach((key) => {
|
|
dataTableData.columns.push({
|
|
Header: key,
|
|
accessor: key,
|
|
});
|
|
});
|
|
qController$1.query(table.name).then((results) => {
|
|
alert(results.length);
|
|
results.forEach((record) => {
|
|
alert(record);
|
|
const row = new Map();
|
|
Object.keys(record.values).forEach((key) => {
|
|
row.set(key, record.values.get(key));
|
|
});
|
|
alert(row);
|
|
dataTableData.rows.push(row);
|
|
});
|
|
});
|
|
dataTableData.rows.push({
|
|
id: "234",
|
|
firstName: "tim",
|
|
lastName: "chambers",
|
|
modifyDate: "8/27/2020",
|
|
email: "tim@tim.tim",
|
|
createDate: "8/27/2020",
|
|
birthDate: "8/27/2020",
|
|
});
|
|
/*
|
|
Object.keys(tableMetaData.fields).forEach((key) => {
|
|
dataTableData.columns.push({
|
|
Header: key,
|
|
accessor: key,
|
|
Cell: entityCell,
|
|
});
|
|
});
|
|
|
|
dataTableData.rows = [
|
|
{
|
|
id: "#10421",
|
|
date: "1 Nov, 10:20 AM",
|
|
status: "paid",
|
|
customer: ["Orlando Imieto", { image: team2 }],
|
|
product: "Nike Sport V2",
|
|
revenue: "$140,20",
|
|
},
|
|
];
|
|
|
|
alert(dataTableData.rows.length);
|
|
|
|
*/
|
|
});
|
|
})();
|
|
const renderMenu = (jsxs(Menu, { anchorEl: menu, anchorOrigin: { vertical: "bottom", horizontal: "left" }, transformOrigin: { vertical: "top", horizontal: "left" }, open: Boolean(menu), onClose: closeMenu, keepMounted: true, children: [jsx(MenuItem, { onClick: closeMenu, children: "Status: Paid" }), jsx(MenuItem, { onClick: closeMenu, children: "Status: Refunded" }), jsx(MenuItem, { onClick: closeMenu, children: "Status: Canceled" }), jsx(Divider, { sx: { margin: "0.5rem 0" } }), jsx(MenuItem, { onClick: closeMenu, children: jsx(MDTypography, { variant: "button", color: "error", fontWeight: "regular", children: "Remove Filter" }) })] }));
|
|
return (jsxs(DashboardLayout, { children: [jsx(DashboardNavbar, {}), jsxs(MDBox, { my: 3, children: [jsxs(MDBox, { display: "flex", justifyContent: "space-between", alignItems: "flex-start", mb: 2, children: [jsxs(MDButton, { variant: "gradient", color: "info", children: ["new ", table.label] }), jsxs(MDBox, { display: "flex", children: [jsxs(MDButton, { variant: menu ? "contained" : "outlined", color: "dark", onClick: openMenu, children: ["filters\u00A0", jsx(Icon, { children: "keyboard_arrow_down" })] }), renderMenu, jsx(MDBox, { ml: 1, children: jsxs(MDButton, { variant: "outlined", color: "dark", children: [jsx(Icon, { children: "description" }), "\u00A0export csv"] }) })] })] }), jsx(Card, { children: jsx(DataTable, { table: dataTableData, entriesPerPage: false, canSearch: true }) })] }), jsx(Footer$1, {})] }));
|
|
}
|
|
|
|
// import { QTableMetaData } from "qqq-frontend-core/lib/model/metaData/QTableMetaData";
|
|
// import thing from "qqq-frontend-core/lib/qqq-frontend-core.js";
|
|
// import QController from "qqq-frontend-core/lib/qqq-frontend-core.js";
|
|
// import {QTableMetaData} from "qqq-frontend-core/lib/model/metaData/QTableMetaData";
|
|
// import {QFieldMetaData} from "qqq-frontend-core/lib/model/metaData/QFieldMetaData";
|
|
// import {QFieldType} from "qqq-frontend-core/lib/model/metaData/QFieldType";
|
|
const qqqRoutes = [
|
|
{
|
|
type: "collapse",
|
|
name: "Brooklyn Alice",
|
|
key: "brooklyn-alice",
|
|
icon: jsx(MDAvatar, { src: team3, alt: "Brooklyn Alice", size: "sm" }),
|
|
collapse: [
|
|
{
|
|
name: "My Profile",
|
|
key: "my-profile",
|
|
route: "/pages/profile/profile-overview",
|
|
component: jsx(Overview, {}),
|
|
},
|
|
{
|
|
name: "Settings",
|
|
key: "profile-settings",
|
|
route: "/pages/account/settings",
|
|
component: jsx(Settings, {}),
|
|
},
|
|
{
|
|
name: "Logout",
|
|
key: "logout",
|
|
route: "/authentication/sign-in/basic",
|
|
component: jsx(Basic, {}),
|
|
},
|
|
],
|
|
},
|
|
{ type: "divider", key: "divider-0" },
|
|
{
|
|
type: "collapse",
|
|
name: "Dashboards",
|
|
key: "dashboards",
|
|
icon: jsx(Icon, { fontSize: "medium", children: "dashboard" }),
|
|
collapse: [
|
|
{
|
|
name: "Analytics",
|
|
key: "analytics",
|
|
route: "/dashboards/analytics",
|
|
component: jsx(Analytics, {}),
|
|
},
|
|
{
|
|
name: "Sales",
|
|
key: "sales",
|
|
route: "/dashboards/sales",
|
|
component: jsx(Sales, {}),
|
|
},
|
|
],
|
|
},
|
|
/*
|
|
{ type: "title", title: "Pages", key: "title-pages" },
|
|
{
|
|
type: "collapse",
|
|
name: "Pages",
|
|
key: "pages",
|
|
icon: <Icon fontSize="medium">image</Icon>,
|
|
collapse: [
|
|
{
|
|
name: "Profile",
|
|
key: "profile",
|
|
collapse: [
|
|
{
|
|
name: "Profile Overview",
|
|
key: "profile-overview",
|
|
route: "/pages/profile/profile-overview",
|
|
component: <ProfileOverview />,
|
|
},
|
|
{
|
|
name: "All Projects",
|
|
key: "all-projects",
|
|
route: "/pages/profile/all-projects",
|
|
component: <AllProjects />,
|
|
},
|
|
],
|
|
},
|
|
{
|
|
name: "Users",
|
|
key: "users",
|
|
collapse: [
|
|
{
|
|
name: "New User",
|
|
key: "new-user",
|
|
route: "/pages/users/new-user",
|
|
component: <NewUser />,
|
|
},
|
|
],
|
|
},
|
|
{
|
|
name: "Account",
|
|
key: "account",
|
|
collapse: [
|
|
{
|
|
name: "Settings",
|
|
key: "settings",
|
|
route: "/pages/account/settings",
|
|
component: <Settings />,
|
|
},
|
|
{
|
|
name: "Billing",
|
|
key: "billing",
|
|
route: "/pages/account/billing",
|
|
component: <Billing />,
|
|
},
|
|
{
|
|
name: "Invoice",
|
|
key: "invoice",
|
|
route: "/pages/account/invoice",
|
|
component: <Invoice />,
|
|
},
|
|
],
|
|
},
|
|
{
|
|
name: "Projects",
|
|
key: "projects",
|
|
collapse: [
|
|
{
|
|
name: "Timeline",
|
|
key: "timeline",
|
|
route: "/pages/projects/timeline",
|
|
component: <Timeline />,
|
|
},
|
|
],
|
|
},
|
|
{
|
|
name: "Pricing Page",
|
|
key: "pricing-page",
|
|
route: "/pages/pricing-page",
|
|
component: <PricingPage />,
|
|
},
|
|
{ name: "RTL", key: "rtl", route: "/pages/rtl", component: <RTL /> },
|
|
{ name: "Widgets", key: "widgets", route: "/pages/widgets", component: <Widgets /> },
|
|
{ name: "Charts", key: "charts", route: "/pages/charts", component: <Charts /> },
|
|
{
|
|
name: "Notfications",
|
|
key: "notifications",
|
|
route: "/pages/notifications",
|
|
component: <Notifications />,
|
|
},
|
|
],
|
|
},
|
|
{
|
|
type: "collapse",
|
|
name: "Applications",
|
|
key: "applications",
|
|
icon: <Icon fontSize="medium">apps</Icon>,
|
|
collapse: [
|
|
{
|
|
name: "Kanban",
|
|
key: "kanban",
|
|
route: "/applications/kanban",
|
|
component: <Kanban />,
|
|
},
|
|
{
|
|
name: "Wizard",
|
|
key: "wizard",
|
|
route: "/applications/wizard",
|
|
component: <Wizard />,
|
|
},
|
|
{
|
|
name: "Data Tables",
|
|
key: "data-tables",
|
|
route: "/applications/data-tables",
|
|
component: <DataTables />,
|
|
},
|
|
{
|
|
name: "Calendar",
|
|
key: "calendar",
|
|
route: "/applications/calendar",
|
|
component: <Calendar />,
|
|
},
|
|
],
|
|
},
|
|
{
|
|
type: "collapse",
|
|
name: "Ecommerce",
|
|
key: "ecommerce",
|
|
icon: <Icon fontSize="medium">shopping_basket</Icon>,
|
|
collapse: [
|
|
{
|
|
name: "Products",
|
|
key: "products",
|
|
collapse: [
|
|
{
|
|
name: "New Product",
|
|
key: "new-product",
|
|
route: "/ecommerce/products/new-product",
|
|
component: <NewProduct />,
|
|
},
|
|
{
|
|
name: "Edit Product",
|
|
key: "edit-product",
|
|
route: "/ecommerce/products/edit-product",
|
|
component: <EditProduct />,
|
|
},
|
|
{
|
|
name: "Product Page",
|
|
key: "product-page",
|
|
route: "/ecommerce/products/product-page",
|
|
component: <ProductPage />,
|
|
},
|
|
],
|
|
},
|
|
{
|
|
name: "Orders",
|
|
key: "orders",
|
|
collapse: [
|
|
{
|
|
name: "Order List",
|
|
key: "order-list",
|
|
route: "/ecommerce/orders/order-list",
|
|
component: <OrderList />,
|
|
},
|
|
{
|
|
name: "Order Details",
|
|
key: "order-details",
|
|
route: "/ecommerce/orders/order-details",
|
|
component: <OrderDetails />,
|
|
},
|
|
],
|
|
},
|
|
{
|
|
name: "Orders",
|
|
key: "orders",
|
|
collapse: [
|
|
{
|
|
name: "Order List",
|
|
key: "order-list",
|
|
route: "/ecommerce/orders/order-list",
|
|
component: <OrderList />,
|
|
},
|
|
{
|
|
name: "Order Details",
|
|
key: "order-details",
|
|
route: "/ecommerce/orders/order-details",
|
|
component: <OrderDetails />,
|
|
},
|
|
],
|
|
},
|
|
],
|
|
},
|
|
{
|
|
type: "collapse",
|
|
name: "Authentication",
|
|
key: "authentication",
|
|
icon: <Icon fontSize="medium">content_paste</Icon>,
|
|
collapse: [
|
|
{
|
|
name: "Sign In",
|
|
key: "sign-in",
|
|
collapse: [
|
|
{
|
|
name: "Basic",
|
|
key: "basic",
|
|
route: "/authentication/sign-in/basic",
|
|
component: <SignInBasic />,
|
|
},
|
|
{
|
|
name: "Cover",
|
|
key: "cover",
|
|
route: "/authentication/sign-in/cover",
|
|
component: <SignInCover />,
|
|
},
|
|
{
|
|
name: "Illustration",
|
|
key: "illustration",
|
|
route: "/authentication/sign-in/illustration",
|
|
component: <SignInIllustration />,
|
|
},
|
|
],
|
|
},
|
|
{
|
|
name: "Sign Up",
|
|
key: "sign-up",
|
|
collapse: [
|
|
{
|
|
name: "Cover",
|
|
key: "cover",
|
|
route: "/authentication/sign-up/cover",
|
|
component: <SignUpCover />,
|
|
},
|
|
],
|
|
},
|
|
{
|
|
name: "Reset Password",
|
|
key: "reset-password",
|
|
collapse: [
|
|
{
|
|
name: "Cover",
|
|
key: "cover",
|
|
route: "/authentication/reset-password/cover",
|
|
component: <ResetCover />,
|
|
},
|
|
],
|
|
},
|
|
],
|
|
},
|
|
*/
|
|
{ type: "divider", key: "divider-1" },
|
|
{ type: "title", title: "Tables", key: "title-docs" },
|
|
];
|
|
const qController = new QController("http://localhost:8000");
|
|
console.log(qController);
|
|
(async () => {
|
|
await qController.loadMetaData().then((metaData) => {
|
|
console.log(`metaData: ${metaData}`);
|
|
const tableList = [];
|
|
metaData.forEach((value, key) => {
|
|
const table = metaData.get(key);
|
|
tableList.push({
|
|
name: table.label,
|
|
key: table.name,
|
|
route: `/${table.name}/list`,
|
|
component: jsx(EntityList, { table: table }),
|
|
});
|
|
});
|
|
const tables = {
|
|
type: "collapse",
|
|
name: "Tables",
|
|
key: "tables",
|
|
icon: jsx(Icon, { fontSize: "medium", children: "dashboard" }),
|
|
collapse: tableList,
|
|
};
|
|
qqqRoutes.push(tables);
|
|
});
|
|
})();
|
|
|
|
function App() {
|
|
const [controller, dispatch] = useMaterialUIController();
|
|
const { miniSidenav, direction, layout, openConfigurator, sidenavColor, transparentSidenav, whiteSidenav, darkMode, } = controller;
|
|
const [onMouseEnter, setOnMouseEnter] = useState(false);
|
|
const [rtlCache, setRtlCache] = useState(null);
|
|
const { pathname } = useLocation();
|
|
// Cache for the rtl
|
|
useMemo(() => {
|
|
const pluginRtl = rtlPlugin;
|
|
const cacheRtl = createCache({
|
|
key: "rtl",
|
|
stylisPlugins: [pluginRtl],
|
|
});
|
|
setRtlCache(cacheRtl);
|
|
}, []);
|
|
// Open sidenav when mouse enter on mini sidenav
|
|
const handleOnMouseEnter = () => {
|
|
if (miniSidenav && !onMouseEnter) {
|
|
setMiniSidenav(dispatch, false);
|
|
setOnMouseEnter(true);
|
|
}
|
|
};
|
|
// Close sidenav when mouse leave mini sidenav
|
|
const handleOnMouseLeave = () => {
|
|
if (onMouseEnter) {
|
|
setMiniSidenav(dispatch, true);
|
|
setOnMouseEnter(false);
|
|
}
|
|
};
|
|
// Change the openConfigurator state
|
|
const handleConfiguratorOpen = () => setOpenConfigurator(dispatch, !openConfigurator);
|
|
// Setting the dir attribute for the body element
|
|
useEffect(() => {
|
|
document.body.setAttribute("dir", direction);
|
|
}, [direction]);
|
|
// Setting page scroll to 0 when changing the route
|
|
useEffect(() => {
|
|
document.documentElement.scrollTop = 0;
|
|
document.scrollingElement.scrollTop = 0;
|
|
}, [pathname]);
|
|
const getRoutes = (allRoutes) => allRoutes.map((route) => {
|
|
if (route.collapse) {
|
|
return getRoutes(route.collapse);
|
|
}
|
|
if (route.route) {
|
|
return jsx(Route, { path: route.route, element: route.component }, route.key);
|
|
}
|
|
return null;
|
|
});
|
|
const configsButton = (jsx(MDBox, { display: "flex", justifyContent: "center", alignItems: "center", width: "3.25rem", height: "3.25rem", bgColor: "white", shadow: "sm", borderRadius: "50%", position: "fixed", right: "2rem", bottom: "2rem", zIndex: 99, color: "dark", sx: { cursor: "pointer" }, onClick: handleConfiguratorOpen, children: jsx(Icon, { fontSize: "small", color: "inherit", children: "settings" }) }));
|
|
return direction === "rtl" ? (jsx(CacheProvider, { value: rtlCache, children: jsxs(ThemeProvider, { theme: darkMode ? themeDarkRTL : themeRTL, children: [jsx(CssBaseline, {}), layout === "dashboard" && (jsxs(Fragment, { children: [jsx(Sidenav$1, { color: sidenavColor, brand: (transparentSidenav && !darkMode) || whiteSidenav ? brandDark : brandWhite, brandName: "Material Dashboard PRO", routes: qqqRoutes, onMouseEnter: handleOnMouseEnter, onMouseLeave: handleOnMouseLeave }), jsx(Configurator, {}), configsButton] })), layout === "vr" && jsx(Configurator, {}), jsxs(Routes, { children: [getRoutes(qqqRoutes), jsx(Route, { path: "*", element: jsx(Navigate, { to: "/dashboards/analytics" }) })] })] }) })) : (jsxs(ThemeProvider, { theme: darkMode ? themeDark : theme, children: [jsx(CssBaseline, {}), layout === "dashboard" && (jsxs(Fragment, { children: [jsx(Sidenav$1, { color: sidenavColor, brand: (transparentSidenav && !darkMode) || whiteSidenav ? brandDark : brandWhite, brandName: "Material Dashboard PRO", routes: qqqRoutes, onMouseEnter: handleOnMouseEnter, onMouseLeave: handleOnMouseLeave }), jsx(Configurator, {}), configsButton] })), layout === "vr" && jsx(Configurator, {}), jsxs(Routes, { children: [getRoutes(qqqRoutes), jsx(Route, { path: "*", element: jsx(Navigate, { to: "/dashboards/analytics" }) })] })] }));
|
|
}
|
|
|
|
ReactDOM.render(jsx(BrowserRouter, { children: jsx(MaterialUIControllerProvider, { children: jsx(App, {}) }) }), document.getElementById("root"));
|