\r\n \r\n A beautiful react component made by{\" \"}\r\n \r\n International Justice Mission\r\n \r\n . Please checkout their{\" \"}\r\n \r\n full documentation.\r\n \r\n \r\n }\r\n />\r\n {alert}\r\n \r\n \r\n \r\n \r\n selectedEvent(event)}\r\n onSelectSlot={slotInfo => addNewEventAlert(slotInfo)}\r\n eventPropGetter={eventColors}\r\n />\r\n \r\n \r\n \r\n \r\n
\r\n );\r\n}\r\n","import {\r\n warningCardHeader,\r\n successCardHeader,\r\n dangerCardHeader,\r\n infoCardHeader,\r\n primaryCardHeader,\r\n roseCardHeader,\r\n whiteColor,\r\n blackColor,\r\n hexToRgb\r\n} from \"assets/jss/material-dashboard-pro-react.js\";\r\nconst cardHeaderStyle = {\r\n cardHeader: {\r\n padding: \"0.75rem 1.25rem\",\r\n marginBottom: \"0\",\r\n borderBottom: \"none\",\r\n background: \"transparent\",\r\n zIndex: \"3 !important\",\r\n \"&$cardHeaderPlain,&$cardHeaderImage,&$cardHeaderContact,&$cardHeaderSignup,&$cardHeaderIcon,&$cardHeaderStats,&$warningCardHeader,&$successCardHeader,&$dangerCardHeader,&$infoCardHeader,&$primaryCardHeader,&$roseCardHeader\": {\r\n margin: \"0 15px\",\r\n padding: \"0\",\r\n position: \"relative\",\r\n color: whiteColor\r\n },\r\n \"&:first-child\": {\r\n borderRadius: \"calc(.25rem - 1px) calc(.25rem - 1px) 0 0\"\r\n },\r\n \"&$warningCardHeader,&$successCardHeader,&$dangerCardHeader,&$infoCardHeader,&$primaryCardHeader,&$roseCardHeader\": {\r\n \"&:not($cardHeaderIcon):not($cardHeaderImage):not($cardHeaderText)\": {\r\n borderRadius: \"3px\",\r\n marginTop: \"-20px\",\r\n padding: \"15px\"\r\n }\r\n },\r\n \"&$cardHeaderStats svg\": {\r\n fontSize: \"36px\",\r\n lineHeight: \"56px\",\r\n textAlign: \"center\",\r\n width: \"36px\",\r\n height: \"36px\",\r\n margin: \"10px 10px 4px\"\r\n },\r\n \"&$cardHeaderStats .fab,&$cardHeaderStats .fas,&$cardHeaderStats .far,&$cardHeaderStats .fal,&$cardHeaderStats .material-icons\": {\r\n fontSize: \"36px\",\r\n lineHeight: \"56px\",\r\n width: \"56px\",\r\n height: \"56px\",\r\n textAlign: \"center\",\r\n overflow: \"unset\",\r\n marginBottom: \"1px\"\r\n },\r\n \"&$cardHeaderStats$cardHeaderIcon\": {\r\n textAlign: \"right\"\r\n },\r\n \"&$cardHeaderImage\": {\r\n marginLeft: \"15px\",\r\n marginRight: \"15px\",\r\n marginTop: \"-30px\",\r\n borderRadius: \"6px\"\r\n },\r\n \"&$cardHeaderText\": {\r\n display: \"inline-block\"\r\n }\r\n },\r\n cardHeaderPlain: {\r\n marginLeft: \"0px\",\r\n marginRight: \"0px\",\r\n \"&$cardHeaderImage\": {\r\n margin: \"0 !important\"\r\n }\r\n },\r\n cardHeaderImage: {\r\n position: \"relative\",\r\n padding: \"0\",\r\n zIndex: \"1\",\r\n \"& img\": {\r\n width: \"100%\",\r\n borderRadius: \"6px\",\r\n pointerEvents: \"none\",\r\n boxShadow:\r\n \"0 5px 15px -8px rgba(\" +\r\n hexToRgb(blackColor) +\r\n \", 0.24), 0 8px 10px -5px rgba(\" +\r\n hexToRgb(blackColor) +\r\n \", 0.2)\"\r\n },\r\n \"& a\": {\r\n display: \"block\"\r\n }\r\n },\r\n cardHeaderContact: {\r\n margin: \"0 15px\",\r\n marginTop: \"-20px\"\r\n },\r\n cardHeaderSignup: {\r\n marginLeft: \"20px\",\r\n marginRight: \"20px\",\r\n marginTop: \"-40px\",\r\n padding: \"20px 0\",\r\n width: \"100%\",\r\n marginBottom: \"15px\"\r\n },\r\n cardHeaderStats: {\r\n \"& $cardHeaderIcon\": {\r\n textAlign: \"right\"\r\n },\r\n \"& h1,& h2,& h3,& h4,& h5,& h6\": {\r\n margin: \"0 !important\"\r\n }\r\n },\r\n cardHeaderIcon: {\r\n \"&$warningCardHeader,&$successCardHeader,&$dangerCardHeader,&$infoCardHeader,&$primaryCardHeader,&$roseCardHeader\": {\r\n background: \"transparent\",\r\n boxShadow: \"none\"\r\n },\r\n \"& .fab,& .fas,& .far,& .fal,& .material-icons\": {\r\n width: \"33px\",\r\n height: \"33px\",\r\n textAlign: \"center\",\r\n lineHeight: \"33px\"\r\n },\r\n \"& svg\": {\r\n width: \"24px\",\r\n height: \"24px\",\r\n textAlign: \"center\",\r\n lineHeight: \"33px\",\r\n margin: \"5px 4px 0px\"\r\n }\r\n },\r\n cardHeaderText: {},\r\n warningCardHeader: {\r\n color: whiteColor,\r\n \"&:not($cardHeaderText):not($cardHeaderIcon)\": {\r\n ...warningCardHeader\r\n }\r\n },\r\n successCardHeader: {\r\n color: whiteColor,\r\n \"&:not($cardHeaderText):not($cardHeaderIcon)\": {\r\n ...successCardHeader\r\n }\r\n },\r\n dangerCardHeader: {\r\n color: whiteColor,\r\n \"&:not($cardHeaderText):not($cardHeaderIcon)\": {\r\n ...dangerCardHeader\r\n }\r\n },\r\n infoCardHeader: {\r\n color: whiteColor,\r\n \"&:not($cardHeaderText):not($cardHeaderIcon)\": {\r\n ...infoCardHeader\r\n }\r\n },\r\n primaryCardHeader: {\r\n color: whiteColor,\r\n \"&:not($cardHeaderText):not($cardHeaderIcon)\": {\r\n ...primaryCardHeader\r\n }\r\n },\r\n roseCardHeader: {\r\n color: whiteColor,\r\n \"&:not($cardHeaderText):not($cardHeaderIcon)\": {\r\n ...roseCardHeader\r\n }\r\n }\r\n};\r\n\r\nexport default cardHeaderStyle;\r\n","import React from \"react\";\r\n// nodejs library that concatenates classes\r\nimport classNames from \"classnames\";\r\n// nodejs library to set properties for components\r\nimport PropTypes from \"prop-types\";\r\n// @material-ui/core components\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\n// @material-ui/icons\r\n\r\n// core components\r\nimport styles from \"assets/jss/material-dashboard-pro-react/components/cardHeaderStyle.js\";\r\n\r\nconst useStyles = makeStyles(styles);\r\n\r\nexport default function CardHeader(props) {\r\n const classes = useStyles();\r\n const {\r\n className,\r\n children,\r\n color,\r\n plain,\r\n image,\r\n contact,\r\n signup,\r\n stats,\r\n icon,\r\n text,\r\n ...rest\r\n } = props;\r\n const cardHeaderClasses = classNames({\r\n [classes.cardHeader]: true,\r\n [classes[color + \"CardHeader\"]]: color,\r\n [classes.cardHeaderPlain]: plain,\r\n [classes.cardHeaderImage]: image,\r\n [classes.cardHeaderContact]: contact,\r\n [classes.cardHeaderSignup]: signup,\r\n [classes.cardHeaderStats]: stats,\r\n [classes.cardHeaderIcon]: icon,\r\n [classes.cardHeaderText]: text,\r\n [className]: className !== undefined\r\n });\r\n return (\r\n \r\n {children}\r\n
\r\n );\r\n}\r\n\r\nCardHeader.propTypes = {\r\n className: PropTypes.string,\r\n color: PropTypes.oneOf([\r\n \"warning\",\r\n \"success\",\r\n \"danger\",\r\n \"info\",\r\n \"primary\",\r\n \"rose\"\r\n ]),\r\n plain: PropTypes.bool,\r\n image: PropTypes.bool,\r\n contact: PropTypes.bool,\r\n signup: PropTypes.bool,\r\n stats: PropTypes.bool,\r\n icon: PropTypes.bool,\r\n text: PropTypes.bool,\r\n children: PropTypes.node\r\n};\r\n","import {\r\n warningCardHeader,\r\n successCardHeader,\r\n dangerCardHeader,\r\n infoCardHeader,\r\n primaryCardHeader,\r\n roseCardHeader,\r\n grayColor\r\n} from \"assets/jss/material-dashboard-pro-react.js\";\r\nconst cardIconStyle = {\r\n cardIcon: {\r\n \"&$warningCardHeader,&$successCardHeader,&$dangerCardHeader,&$infoCardHeader,&$primaryCardHeader,&$roseCardHeader\": {\r\n borderRadius: \"3px\",\r\n backgroundColor: grayColor[0],\r\n padding: \"15px\",\r\n marginTop: \"-20px\",\r\n marginRight: \"15px\",\r\n float: \"left\"\r\n }\r\n },\r\n warningCardHeader,\r\n successCardHeader,\r\n dangerCardHeader,\r\n infoCardHeader,\r\n primaryCardHeader,\r\n roseCardHeader\r\n};\r\n\r\nexport default cardIconStyle;\r\n","import React from \"react\";\r\n// nodejs library that concatenates classes\r\nimport classNames from \"classnames\";\r\n// nodejs library to set properties for components\r\nimport PropTypes from \"prop-types\";\r\n// @material-ui/core components\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\n// @material-ui/icons\r\n\r\n// core components\r\nimport styles from \"assets/jss/material-dashboard-pro-react/components/cardIconStyle.js\";\r\n\r\nconst useStyles = makeStyles(styles);\r\n\r\nexport default function CardIcon(props) {\r\n const classes = useStyles();\r\n const { className, children, color, ...rest } = props;\r\n const cardIconClasses = classNames({\r\n [classes.cardIcon]: true,\r\n [classes[color + \"CardHeader\"]]: color,\r\n [className]: className !== undefined\r\n });\r\n return (\r\n \r\n {children}\r\n
\r\n );\r\n}\r\n\r\nCardIcon.propTypes = {\r\n className: PropTypes.string,\r\n color: PropTypes.oneOf([\r\n \"warning\",\r\n \"success\",\r\n \"danger\",\r\n \"info\",\r\n \"primary\",\r\n \"rose\"\r\n ]),\r\n children: PropTypes.node\r\n};\r\n","import { grayColor } from \"assets/jss/material-dashboard-pro-react.js\";\r\n\r\nconst cardFooterStyle = {\r\n cardFooter: {\r\n padding: \"0\",\r\n paddingTop: \"10px\",\r\n margin: \"0 15px 10px\",\r\n borderRadius: \"0\",\r\n justifyContent: \"space-between\",\r\n alignItems: \"center\",\r\n display: \"flex\",\r\n backgroundColor: \"transparent\",\r\n border: \"0\"\r\n },\r\n cardFooterProfile: {\r\n marginTop: \"-15px\"\r\n },\r\n cardFooterPlain: {\r\n paddingLeft: \"5px\",\r\n paddingRight: \"5px\",\r\n backgroundColor: \"transparent\"\r\n },\r\n cardFooterPricing: {\r\n zIndex: \"2\"\r\n },\r\n cardFooterTestimonial: {\r\n display: \"block\"\r\n },\r\n cardFooterStats: {\r\n borderTop: \"1px solid\" + grayColor[8],\r\n marginTop: \"20px\",\r\n \"& svg\": {\r\n position: \"relative\",\r\n top: \"4px\",\r\n marginRight: \"3px\",\r\n marginLeft: \"3px\",\r\n width: \"16px\",\r\n height: \"16px\"\r\n },\r\n \"& .fab,& .fas,& .far,& .fal,& .material-icons\": {\r\n position: \"relative\",\r\n top: \"4px\",\r\n marginRight: \"3px\",\r\n marginLeft: \"3px\",\r\n fontSize: \"16px\",\r\n lineHeight: \"16px\"\r\n }\r\n },\r\n cardFooterChart: {\r\n borderTop: \"1px solid\" + grayColor[8]\r\n }\r\n};\r\n\r\nexport default cardFooterStyle;\r\n","import React from \"react\";\r\n// nodejs library that concatenates classes\r\nimport classNames from \"classnames\";\r\n// nodejs library to set properties for components\r\nimport PropTypes from \"prop-types\";\r\n// @material-ui/core components\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\n// @material-ui/icons\r\n\r\n// core components\r\nimport styles from \"assets/jss/material-dashboard-pro-react/components/cardFooterStyle.js\";\r\n\r\nconst useStyles = makeStyles(styles);\r\n\r\nexport default function CardFooter(props) {\r\n const classes = useStyles();\r\n const {\r\n className,\r\n children,\r\n plain,\r\n profile,\r\n pricing,\r\n testimonial,\r\n stats,\r\n chart,\r\n product,\r\n ...rest\r\n } = props;\r\n const cardFooterClasses = classNames({\r\n [classes.cardFooter]: true,\r\n [classes.cardFooterPlain]: plain,\r\n [classes.cardFooterProfile]: profile || testimonial,\r\n [classes.cardFooterPricing]: pricing,\r\n [classes.cardFooterTestimonial]: testimonial,\r\n [classes.cardFooterStats]: stats,\r\n [classes.cardFooterChart]: chart || product,\r\n [className]: className !== undefined\r\n });\r\n return (\r\n \r\n {children}\r\n
\r\n );\r\n}\r\n\r\nCardFooter.propTypes = {\r\n className: PropTypes.string,\r\n plain: PropTypes.bool,\r\n profile: PropTypes.bool,\r\n pricing: PropTypes.bool,\r\n testimonial: PropTypes.bool,\r\n stats: PropTypes.bool,\r\n chart: PropTypes.bool,\r\n product: PropTypes.bool,\r\n children: PropTypes.node\r\n};\r\n","import {\r\n primaryColor,\r\n warningColor,\r\n dangerColor,\r\n successColor,\r\n infoColor,\r\n roseColor,\r\n grayColor,\r\n cardTitle\r\n} from \"assets/jss/material-dashboard-pro-react.js\";\r\n\r\nconst chartsStyle = {\r\n cardTitle,\r\n cardCategory: {\r\n margin: \"0\",\r\n color: grayColor[0]\r\n },\r\n cardIconTitle: {\r\n ...cardTitle,\r\n marginTop: \"15px\",\r\n marginBottom: \"0px\"\r\n },\r\n legendTitle: {\r\n color: grayColor[0],\r\n margin: \"10px 0 !important\",\r\n display: \"flex\"\r\n },\r\n primary: {\r\n color: primaryColor[0]\r\n },\r\n warning: {\r\n color: warningColor[0]\r\n },\r\n danger: {\r\n color: dangerColor[0]\r\n },\r\n success: {\r\n color: successColor[0]\r\n },\r\n info: {\r\n color: infoColor[0]\r\n },\r\n rose: {\r\n color: roseColor[0]\r\n },\r\n gray: {\r\n color: grayColor[0]\r\n },\r\n cardFooter: {\r\n display: \"block\"\r\n }\r\n};\r\n\r\nexport default chartsStyle;\r\n","/*eslint-disable*/\r\nimport React from \"react\";\r\n// react plugin for creating charts\r\nimport ChartistGraph from \"react-chartist\";\r\n\r\n// @material-ui/core components\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\n\r\n// @material-ui/icons\r\nimport Timeline from \"@material-ui/icons/Timeline\";\r\n\r\n// core components\r\nimport Heading from \"components/Heading/Heading.js\";\r\nimport GridContainer from \"components/Grid/GridContainer.js\";\r\nimport GridItem from \"components/Grid/GridItem.js\";\r\n\r\nimport Card from \"components/Card/Card.js\";\r\nimport CardHeader from \"components/Card/CardHeader.js\";\r\nimport CardIcon from \"components/Card/CardIcon.js\";\r\nimport CardBody from \"components/Card/CardBody.js\";\r\nimport CardFooter from \"components/Card/CardFooter.js\";\r\n\r\nimport {\r\n roundedLineChart,\r\n straightLinesChart,\r\n simpleBarChart,\r\n colouredLineChart,\r\n multipleBarsChart,\r\n colouredLinesChart,\r\n pieChart\r\n} from \"variables/charts.js\";\r\n\r\nimport styles from \"assets/jss/material-dashboard-pro-react/views/chartsStyle.js\";\r\n\r\nconst useStyles = makeStyles(styles);\r\n\r\nexport default function Charts() {\r\n const classes = useStyles();\r\n return (\r\n \r\n \r\n A react wrapper for{\" \"}\r\n \r\n Chartist.js\r\n \r\n . Please checkout the{\" \"}\r\n \r\n full documentation of Chartist.js\r\n {\" \"}\r\n and{\" \"}\r\n \r\n full documentation of react-chartist\r\n \r\n .\r\n \r\n }\r\n />\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n}\r\n","import {\r\n warningColor,\r\n primaryColor,\r\n dangerColor,\r\n successColor,\r\n infoColor,\r\n roseColor,\r\n grayColor,\r\n blackColor,\r\n defaultFont,\r\n hexToRgb\r\n} from \"assets/jss/material-dashboard-pro-react.js\";\r\n\r\nconst tableStyle = theme => ({\r\n warning: {\r\n color: warningColor[0]\r\n },\r\n primary: {\r\n color: primaryColor[0]\r\n },\r\n danger: {\r\n color: dangerColor[0]\r\n },\r\n success: {\r\n color: successColor[0]\r\n },\r\n info: {\r\n color: infoColor[0]\r\n },\r\n rose: {\r\n color: roseColor[0]\r\n },\r\n gray: {\r\n color: grayColor[0]\r\n },\r\n right: {\r\n textAlign: \"right\"\r\n },\r\n table: {\r\n marginBottom: \"0\",\r\n width: \"100%\",\r\n maxWidth: \"100%\",\r\n backgroundColor: \"transparent\",\r\n borderSpacing: \"0\",\r\n borderCollapse: \"collapse\",\r\n overflow: \"auto\"\r\n },\r\n tableShoppingHead: {\r\n fontSize: \"0.9em !important\",\r\n textTransform: \"uppercase !important\"\r\n },\r\n tableHeadFontSize: {\r\n fontSize: \"1.25em !important\"\r\n },\r\n tableHeadCell: {\r\n color: \"rgba(\" + hexToRgb(blackColor) + \", 0.87)\",\r\n border: \"none !important\"\r\n },\r\n tableCell: {\r\n ...defaultFont,\r\n lineHeight: \"1.42857143\",\r\n padding: \"12px 8px!important\",\r\n verticalAlign: \"middle\",\r\n fontSize: \"1em\",\r\n borderBottom: \"none\",\r\n borderTop: \"1px solid \" + grayColor[5],\r\n position: \"relative\",\r\n [theme.breakpoints.down(\"sm\")]: {\r\n minHeight: \"24px\",\r\n minWidth: \"32px\"\r\n }\r\n },\r\n tableCellTotal: {\r\n fontWeight: \"500\",\r\n fontSize: \"1.25em\",\r\n paddingTop: \"14px\",\r\n textAlign: \"right\"\r\n },\r\n tableCellAmount: {\r\n fontSize: \"26px\",\r\n fontWeight: \"300\",\r\n marginTop: \"5px\",\r\n textAlign: \"right\"\r\n },\r\n tableResponsive: {\r\n // width: \"100%\",\r\n minHeight: \"0.1%\",\r\n overflowX: \"auto\"\r\n },\r\n tableStripedRow: {\r\n backgroundColor: grayColor[12]\r\n },\r\n tableRowHover: {\r\n \"&:hover\": {\r\n backgroundColor: grayColor[13]\r\n }\r\n },\r\n warningRow: {\r\n backgroundColor: warningColor[6],\r\n \"&:hover\": {\r\n backgroundColor: warningColor[5]\r\n }\r\n },\r\n dangerRow: {\r\n backgroundColor: dangerColor[6],\r\n \"&:hover\": {\r\n backgroundColor: dangerColor[5]\r\n }\r\n },\r\n successRow: {\r\n backgroundColor: successColor[6],\r\n \"&:hover\": {\r\n backgroundColor: successColor[5]\r\n }\r\n },\r\n infoRow: {\r\n backgroundColor: infoColor[6],\r\n \"&:hover\": {\r\n backgroundColor: infoColor[5]\r\n }\r\n },\r\n tableRowBody: {\r\n height: \"48px\"\r\n },\r\n tableRowHead: {\r\n height: \"56px\"\r\n }\r\n});\r\n\r\nexport default tableStyle;\r\n","import React from \"react\";\r\nimport cx from \"classnames\";\r\nimport PropTypes from \"prop-types\";\r\n\r\n// @material-ui/core components\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport Table from \"@material-ui/core/Table\";\r\nimport TableBody from \"@material-ui/core/TableBody\";\r\nimport TableCell from \"@material-ui/core/TableCell\";\r\nimport TableHead from \"@material-ui/core/TableHead\";\r\nimport TableRow from \"@material-ui/core/TableRow\";\r\n\r\nimport styles from \"assets/jss/material-dashboard-pro-react/components/tableStyle\";\r\n\r\nconst useStyles = makeStyles(styles);\r\n\r\nexport default function CustomTable(props) {\r\n const classes = useStyles();\r\n const {\r\n tableHead,\r\n tableData,\r\n tableHeaderColor,\r\n hover,\r\n colorsColls,\r\n coloredColls,\r\n customCellClasses,\r\n customClassesForCells,\r\n striped,\r\n tableShopping,\r\n customHeadCellClasses,\r\n customHeadClassesForCells\r\n } = props;\r\n return (\r\n Rounded Line Chart
\r\nLine Chart
\r\nStraight Lines Chart
\r\nLine Chart with Points
\r\nSimple Bar Chart
\r\nBar Chart
\r\n\r\n Coloured Line Chart - Rounded\r\n
\r\n\r\n Multiple Bars Chart - Bar Chart\r\n
\r\n\r\n Coloured Lines Chart - Rounded\r\n
\r\nPie Chart
\r\nLegend
\r\n Apple{` `}\r\n Samsung\r\n {` `}\r\n Windows Phone\r\n {` `}\r\n\r\n \r\n {tableHead !== undefined ? (\r\n
\r\n
\r\n );\r\n}\r\n\r\nCustomTable.defaultProps = {\r\n tableHeaderColor: \"gray\",\r\n hover: false,\r\n colorsColls: [],\r\n coloredColls: [],\r\n striped: false,\r\n customCellClasses: [],\r\n customClassesForCells: [],\r\n customHeadCellClasses: [],\r\n customHeadClassesForCells: []\r\n};\r\n\r\nCustomTable.propTypes = {\r\n tableHeaderColor: PropTypes.oneOf([\r\n \"warning\",\r\n \"primary\",\r\n \"danger\",\r\n \"success\",\r\n \"info\",\r\n \"rose\",\r\n \"gray\"\r\n ]),\r\n tableHead: PropTypes.arrayOf(PropTypes.string),\r\n // Of(PropTypes.arrayOf(PropTypes.node)) || Of(PropTypes.object),\r\n tableData: PropTypes.array,\r\n hover: PropTypes.bool,\r\n coloredColls: PropTypes.arrayOf(PropTypes.number),\r\n // Of([\"warning\",\"primary\",\"danger\",\"success\",\"info\",\"rose\",\"gray\"]) - colorsColls\r\n colorsColls: PropTypes.array,\r\n customCellClasses: PropTypes.arrayOf(PropTypes.string),\r\n customClassesForCells: PropTypes.arrayOf(PropTypes.number),\r\n customHeadCellClasses: PropTypes.arrayOf(PropTypes.string),\r\n customHeadClassesForCells: PropTypes.arrayOf(PropTypes.number),\r\n striped: PropTypes.bool,\r\n // this will cause some changes in font\r\n tableShopping: PropTypes.bool\r\n};\r\n","import {\r\n defaultFont,\r\n primaryColor,\r\n infoColor,\r\n successColor,\r\n warningColor,\r\n dangerColor,\r\n grayColor\r\n} from \"assets/jss/material-dashboard-pro-react.js\";\r\n\r\nconst typographyStyle = {\r\n defaultFontStyle: {\r\n ...defaultFont,\r\n fontSize: \"14px\"\r\n },\r\n defaultHeaderMargins: {\r\n marginTop: \"20px\",\r\n marginBottom: \"10px\"\r\n },\r\n quote: {\r\n padding: \"10px 20px\",\r\n margin: \"0 0 20px\",\r\n fontSize: \"17.5px\",\r\n borderLeft: \"5px solid\" + grayColor[8]\r\n },\r\n quoteText: {\r\n margin: \"0 0 10px\",\r\n fontStyle: \"italic\"\r\n },\r\n quoteAuthor: {\r\n display: \"block\",\r\n fontSize: \"80%\",\r\n lineHeight: \"1.42857143\",\r\n color: grayColor[1]\r\n },\r\n mutedText: {\r\n color: grayColor[1]\r\n },\r\n primaryText: {\r\n color: primaryColor[0]\r\n },\r\n infoText: {\r\n color: infoColor[0]\r\n },\r\n successText: {\r\n color: successColor[0]\r\n },\r\n warningText: {\r\n color: warningColor[0]\r\n },\r\n dangerText: {\r\n color: dangerColor[0]\r\n }\r\n};\r\n\r\nexport default typographyStyle;\r\n","import React from \"react\";\r\nimport PropTypes from \"prop-types\";\r\n\r\n// @material-ui/core components\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\n\r\nimport styles from \"assets/jss/material-dashboard-pro-react/components/typographyStyle.js\";\r\n\r\nconst useStyles = makeStyles(styles);\r\n\r\nexport default function Danger(props) {\r\n const classes = useStyles();\r\n const { children } = props;\r\n return (\r\n \r\n {children}\r\n
\r\n );\r\n}\r\n\r\nDanger.propTypes = {\r\n children: PropTypes.node\r\n};\r\n","import {\r\n successColor,\r\n tooltip,\r\n cardTitle,\r\n grayColor\r\n} from \"assets/jss/material-dashboard-pro-react.js\";\r\n\r\nimport hoverCardStyle from \"assets/jss/material-dashboard-pro-react/hoverCardStyle.js\";\r\n\r\nconst dashboardStyle = {\r\n ...hoverCardStyle,\r\n tooltip,\r\n cardTitle: {\r\n ...cardTitle,\r\n marginTop: \"0px\",\r\n marginBottom: \"3px\"\r\n },\r\n cardIconTitle: {\r\n ...cardTitle,\r\n marginTop: \"15px\",\r\n marginBottom: \"0px\"\r\n },\r\n cardProductTitle: {\r\n ...cardTitle,\r\n marginTop: \"0px\",\r\n marginBottom: \"3px\",\r\n textAlign: \"center\"\r\n },\r\n cardCategory: {\r\n color: grayColor[0],\r\n fontSize: \"14px\",\r\n paddingTop: \"10px\",\r\n marginBottom: \"0\",\r\n marginTop: \"0\",\r\n margin: \"0\"\r\n },\r\n cardProductDesciprion: {\r\n textAlign: \"center\",\r\n color: grayColor[0]\r\n },\r\n stats: {\r\n color: grayColor[0],\r\n fontSize: \"12px\",\r\n lineHeight: \"22px\",\r\n display: \"inline-flex\",\r\n \"& svg\": {\r\n position: \"relative\",\r\n top: \"4px\",\r\n width: \"16px\",\r\n height: \"16px\",\r\n marginRight: \"3px\"\r\n },\r\n \"& .fab,& .fas,& .far,& .fal,& .material-icons\": {\r\n position: \"relative\",\r\n top: \"4px\",\r\n fontSize: \"16px\",\r\n marginRight: \"3px\"\r\n }\r\n },\r\n productStats: {\r\n paddingTop: \"7px\",\r\n paddingBottom: \"7px\",\r\n margin: \"0\"\r\n },\r\n successText: {\r\n color: successColor[0]\r\n },\r\n upArrowCardCategory: {\r\n width: 14,\r\n height: 14\r\n },\r\n underChartIcons: {\r\n width: \"17px\",\r\n height: \"17px\"\r\n },\r\n price: {\r\n color: \"inherit\",\r\n \"& h4\": {\r\n marginBottom: \"0px\",\r\n marginTop: \"0px\"\r\n }\r\n }\r\n};\r\n\r\nexport default dashboardStyle;\r\n","const hoverCardStyle = {\r\n cardHover: {\r\n \"&:hover\": {\r\n \"& $cardHeaderHover\": {\r\n transform: \"translate3d(0, -50px, 0)\"\r\n }\r\n }\r\n },\r\n cardHeaderHover: {\r\n transition: \"all 300ms cubic-bezier(0.34, 1.61, 0.7, 1)\"\r\n },\r\n cardHoverUnder: {\r\n position: \"absolute\",\r\n zIndex: \"1\",\r\n top: \"-50px\",\r\n width: \"calc(100% - 30px)\",\r\n left: \"17px\",\r\n right: \"17px\",\r\n textAlign: \"center\"\r\n }\r\n};\r\n\r\nexport default hoverCardStyle;\r\n","import React from \"react\";\r\n// react plugin for creating charts\r\nimport ChartistGraph from \"react-chartist\";\r\n// react plugin for creating vector maps\r\nimport { VectorMap } from \"react-jvectormap\";\r\n\r\n// @material-ui/core components\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport Tooltip from \"@material-ui/core/Tooltip\";\r\nimport Icon from \"@material-ui/core/Icon\";\r\n\r\n// @material-ui/icons\r\n// import ContentCopy from \"@material-ui/icons/ContentCopy\";\r\nimport Store from \"@material-ui/icons/Store\";\r\n// import InfoOutline from \"@material-ui/icons/InfoOutline\";\r\nimport Warning from \"@material-ui/icons/Warning\";\r\nimport DateRange from \"@material-ui/icons/DateRange\";\r\nimport LocalOffer from \"@material-ui/icons/LocalOffer\";\r\nimport Update from \"@material-ui/icons/Update\";\r\nimport ArrowUpward from \"@material-ui/icons/ArrowUpward\";\r\nimport AccessTime from \"@material-ui/icons/AccessTime\";\r\nimport Refresh from \"@material-ui/icons/Refresh\";\r\nimport Edit from \"@material-ui/icons/Edit\";\r\nimport Place from \"@material-ui/icons/Place\";\r\nimport ArtTrack from \"@material-ui/icons/ArtTrack\";\r\nimport Language from \"@material-ui/icons/Language\";\r\n\r\n// core components\r\nimport GridContainer from \"components/Grid/GridContainer.js\";\r\nimport GridItem from \"components/Grid/GridItem.js\";\r\nimport Table from \"components/Table/Table.js\";\r\nimport Button from \"components/CustomButtons/Button.js\";\r\nimport Danger from \"components/Typography/Danger.js\";\r\nimport Card from \"components/Card/Card.js\";\r\nimport CardHeader from \"components/Card/CardHeader.js\";\r\nimport CardIcon from \"components/Card/CardIcon.js\";\r\nimport CardBody from \"components/Card/CardBody.js\";\r\nimport CardFooter from \"components/Card/CardFooter.js\";\r\n\r\nimport {\r\n dailySalesChart,\r\n emailsSubscriptionChart,\r\n completedTasksChart,\r\n} from \"variables/charts\";\r\nimport {\r\n roundedLineChart,\r\n straightLinesChart,\r\n simpleBarChart,\r\n colouredLineChart,\r\n multipleBarsChart,\r\n colouredLinesChart,\r\n pieChart,\r\n} from \"variables/charts.js\";\r\n\r\nimport styles from \"assets/jss/material-dashboard-pro-react/views/dashboardStyle.js\";\r\nimport TrendingUpIcon from \"@material-ui/icons/TrendingUp\";\r\nimport priceImage1 from \"assets/img/card-2.jpeg\";\r\nimport priceImage2 from \"assets/img/card-3.jpeg\";\r\nimport priceImage3 from \"assets/img/card-1.jpeg\";\r\n\r\nconst us_flag = require(\"assets/img/flags/US.png\");\r\nconst de_flag = require(\"assets/img/flags/DE.png\");\r\nconst au_flag = require(\"assets/img/flags/AU.png\");\r\nconst gb_flag = require(\"assets/img/flags/GB.png\");\r\nconst ro_flag = require(\"assets/img/flags/RO.png\");\r\nconst br_flag = require(\"assets/img/flags/BR.png\");\r\n\r\nvar mapData = {\r\n AU: 760,\r\n BR: 550,\r\n CA: 120,\r\n DE: 1300,\r\n FR: 540,\r\n GB: 690,\r\n GE: 200,\r\n IN: 200,\r\n RO: 600,\r\n RU: 300,\r\n US: 2920,\r\n};\r\n\r\nconst useStyles = makeStyles(styles);\r\n\r\nexport default function Dashboard() {\r\n const classes = useStyles();\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n content_copy \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n info_outline \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n 
,\r\n \"Germany\",\r\n \"1.300\",\r\n \"20.43%\",\r\n ],\r\n [\r\n 
,\r\n \"Australia\",\r\n \"760\",\r\n \"10.35%\",\r\n ],\r\n [\r\n 
,\r\n \"United Kingdom\",\r\n \"690\",\r\n \"7.87%\",\r\n ],\r\n [\r\n 
,\r\n \"Romania\",\r\n \"600\",\r\n \"5.94%\",\r\n ],\r\n [\r\n 
,\r\n \"Brasil\",\r\n \"550\",\r\n \"4.34%\",\r\n ],\r\n ]}\r\n />\r\n \r\n \r\n {/* \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n\r\n \r\n \r\n \r\n e.preventDefault()}>\r\n 
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n e.preventDefault()}>\r\n 
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n e.preventDefault()}>\r\n 
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n}\r\n","import { title, whiteColor } from \"assets/jss/material-dashboard-pro-react.js\";\r\n\r\nconst errorPageStyles = () => ({\r\n contentCenter: {\r\n position: \"absolute\",\r\n top: \"50%\",\r\n left: \"50%\",\r\n zIndex: \"3\",\r\n transform: \"translate(-50%,-50%)\",\r\n textAlign: \"center\",\r\n color: whiteColor,\r\n padding: \"0 15px\",\r\n width: \"100%\",\r\n maxWidth: \"880px\"\r\n },\r\n title: {\r\n ...title,\r\n fontSize: \"13.7em\",\r\n color: whiteColor,\r\n letterSpacing: \"14px\",\r\n fontWeight: \"700\"\r\n },\r\n subTitle: {\r\n fontSize: \"2.25rem\",\r\n marginTop: \"0\",\r\n marginBottom: \"8px\"\r\n },\r\n description: {\r\n fontSize: \"1.125rem\",\r\n marginTop: \"0\",\r\n marginBottom: \"8px\"\r\n }\r\n});\r\n\r\nexport default errorPageStyles;\r\n","import React from \"react\";\r\n\r\n// @material-ui/core components\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\n\r\n// core components\r\nimport GridContainer from \"components/Grid/GridContainer.js\";\r\nimport GridItem from \"components/Grid/GridItem.js\";\r\n\r\nimport styles from \"assets/jss/material-dashboard-pro-react/views/errorPageStyles.js\";\r\n\r\nconst useStyles = makeStyles(styles);\r\n\r\nexport default function ErrorPage() {\r\n const classes = useStyles();\r\n return (\r\n Used Space
\r\n\r\n 49/50 GB\r\n
\r\n\r\n \r\n \r\n e.preventDefault()}>\r\n Get more space\r\n \r\n
\r\n Revenue
\r\n$34,245
\r\n\r\n
\r\n Fixed Issues
\r\n75
\r\n\r\n
\r\n Followers
\r\n+245
\r\n\r\n
\r\n \r\n Tỉ lệ chốt đơn theo danh mục\r\n
\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n Daily Sales
\r\n\r\n \r\n
\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n Email Subscriptions
\r\nLast Campaign Performance
\r\n\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n Completed Tasks
\r\nLast Campaign Performance
\r\n\r\n
\r\n Manage Listings
\r\n\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n e.preventDefault()}>\r\n Cozy 5 Stars Apartment\r\n \r\n
\r\n\r\n The place is close to Barceloneta Beach and bus stop just 2 min\r\n by walk and near to {'\"'}Naviglio{'\"'} where you can enjoy the\r\n main night life in Barcelona.\r\n
\r\n\r\n
\r\n $899/night
\r\n\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n e.preventDefault()}>\r\n Office Studio\r\n \r\n
\r\n\r\n The place is close to Metro Station and bus stop just 2 min by\r\n walk and near to {'\"'}Naviglio{'\"'} where you can enjoy the\r\n night life in London, UK.\r\n
\r\n\r\n
\r\n $1.119/night
\r\n\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n e.preventDefault()}>\r\n Beautiful Castle\r\n \r\n
\r\n\r\n The place is close to Metro Station and bus stop just 2 min by\r\n walk and near to {'\"'}Naviglio{'\"'} where you can enjoy the main\r\n night life in Milan.\r\n
\r\n\r\n
\r\n $459/night
\r\n\r\n
\r\n \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n}\r\n","import {\r\n primaryColor,\r\n warningColor,\r\n dangerColor,\r\n successColor,\r\n infoColor,\r\n roseColor,\r\n grayColor,\r\n hexToRgb\r\n} from \"assets/jss/material-dashboard-pro-react.js\";\r\n\r\nconst customLinearProgressStyle = {\r\n root: {\r\n height: \"4px\",\r\n marginBottom: \"20px\",\r\n overflow: \"hidden\"\r\n },\r\n bar: {\r\n height: \"4px\"\r\n },\r\n primary: {\r\n backgroundColor: primaryColor[0]\r\n },\r\n warning: {\r\n backgroundColor: warningColor[0]\r\n },\r\n danger: {\r\n backgroundColor: dangerColor[0]\r\n },\r\n success: {\r\n backgroundColor: successColor[0]\r\n },\r\n info: {\r\n backgroundColor: infoColor[0]\r\n },\r\n rose: {\r\n backgroundColor: roseColor[0]\r\n },\r\n gray: {\r\n backgroundColor: grayColor[0]\r\n },\r\n primaryBackground: {\r\n background: \"rgba(\" + hexToRgb(primaryColor[0]) + \", 0.2)\"\r\n },\r\n warningBackground: {\r\n background: \"rgba(\" + hexToRgb(warningColor[0]) + \", 0.2)\"\r\n },\r\n dangerBackground: {\r\n background: \"rgba(\" + hexToRgb(dangerColor[0]) + \", 0.2)\"\r\n },\r\n successBackground: {\r\n background: \"rgba(\" + hexToRgb(successColor[0]) + \", 0.2)\"\r\n },\r\n infoBackground: {\r\n background: \"rgba(\" + hexToRgb(infoColor[0]) + \", 0.2)\"\r\n },\r\n roseBackground: {\r\n background: \"rgba(\" + hexToRgb(roseColor[0]) + \", 0.2)\"\r\n },\r\n grayBackground: {\r\n background: \"rgba(\" + hexToRgb(grayColor[5]) + \", 0.2)\"\r\n }\r\n};\r\n\r\nexport default customLinearProgressStyle;\r\n","import React from \"react\";\r\nimport PropTypes from \"prop-types\";\r\n\r\n// @material-ui/core components\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport LinearProgress from \"@material-ui/core/LinearProgress\";\r\n\r\nimport styles from \"assets/jss/material-dashboard-pro-react/components/customLinearProgressStyle.js\";\r\n\r\nconst useStyles = makeStyles(styles);\r\n\r\nexport default function CustomLinearProgress(props) {\r\n const classes = useStyles();\r\n const { color, ...rest } = props;\r\n return (\r\n 404
\r\nPage not found :(
\r\n\r\n Ooooups! Looks like you got lost.\r\n
\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Datetime Picker \r\n
\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Date Picker \r\n
\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Time Picker \r\n
\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n
\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Choose City\r\n \r\n \r\n \r\n Choose City\r\n \r\n \r\n Paris\r\n \r\n \r\n Bucharest\r\n \r\n \r\n Rome\r\n \r\n \r\n New York\r\n \r\n \r\n Miami\r\n \r\n \r\n Piatra Neamt\r\n \r\n \r\n Paris\r\n \r\n \r\n Bucharest\r\n \r\n \r\n Rome\r\n \r\n \r\n New York\r\n \r\n \r\n Miami\r\n \r\n \r\n Piatra Neamt\r\n \r\n \r\n Paris\r\n \r\n \r\n Bucharest\r\n \r\n \r\n Rome\r\n \r\n \r\n New York\r\n \r\n \r\n Miami\r\n \r\n \r\n Piatra Neamt\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Choose City\r\n \r\n \r\n \r\n Choose City\r\n \r\n \r\n Paris\r\n \r\n \r\n Bucharest\r\n \r\n \r\n Rome\r\n \r\n \r\n New York\r\n \r\n \r\n Miami\r\n \r\n \r\n Piatra Neamt\r\n \r\n \r\n Paris\r\n \r\n \r\n Bucharest\r\n \r\n \r\n Rome\r\n \r\n \r\n New York\r\n \r\n \r\n Miami\r\n \r\n \r\n Piatra Neamt\r\n \r\n \r\n Paris\r\n \r\n \r\n Bucharest\r\n \r\n \r\n Rome\r\n \r\n \r\n New York\r\n \r\n \r\n Miami\r\n \r\n \r\n Piatra Neamt\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n
\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n
\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n}\r\n","import buttonGroupStyle from \"assets/jss/material-dashboard-pro-react/buttonGroupStyle.js\";\r\nimport customCheckboxRadioSwitch from \"assets/jss/material-dashboard-pro-react/customCheckboxRadioSwitch.js\";\r\nimport {\r\n cardTitle,\r\n grayColor,\r\n} from \"assets/jss/material-dashboard-pro-react.js\";\r\n\r\nconst extendedTablesStyle = {\r\n ...customCheckboxRadioSwitch,\r\n ...buttonGroupStyle,\r\n right: {\r\n textAlign: \"right\",\r\n },\r\n center: {\r\n textAlign: \"center\",\r\n },\r\n description: {\r\n maxWidth: \"150px\",\r\n },\r\n actionButton: {\r\n margin: \"0 0 0 5px\",\r\n padding: \"5px\",\r\n \"& svg,& .fab,& .fas,& .far,& .fal,& .material-icons\": {\r\n marginRight: \"0px\",\r\n },\r\n },\r\n icon: {\r\n verticalAlign: \"middle\",\r\n width: \"17px\",\r\n height: \"17px\",\r\n top: \"-1px\",\r\n position: \"relative\",\r\n },\r\n imgContainer: {\r\n width: \"120px\",\r\n maxHeight: \"160px\",\r\n overflow: \"hidden\",\r\n display: \"block\",\r\n },\r\n img: {\r\n width: \"100%\",\r\n height: \"auto\",\r\n verticalAlign: \"middle\",\r\n border: \"0\",\r\n },\r\n tdName: {\r\n minWidth: \"200px\",\r\n fontWeight: \"400\",\r\n fontSize: \"1.5em\",\r\n },\r\n tdNameAnchor: {\r\n color: grayColor[2],\r\n },\r\n tdNameSmall: {\r\n color: grayColor[0],\r\n fontSize: \"0.75em\",\r\n fontWeight: \"300\",\r\n },\r\n tdNumber: {\r\n textAlign: \"right\",\r\n minWidth: \"145px\",\r\n fontWeight: \"300\",\r\n fontSize: \"1.3em !important\",\r\n },\r\n tdNumberSmall: {\r\n marginRight: \"3px\",\r\n },\r\n tdNumberAndButtonGroup: {\r\n lineHeight: \"1 !important\",\r\n },\r\n positionAbsolute: {\r\n position: \"absolute\",\r\n right: \"0\",\r\n top: \"0\",\r\n },\r\n customFont: {\r\n fontSize: \"16px !important\",\r\n },\r\n actionButtonRound: {\r\n width: \"auto\",\r\n height: \"auto\",\r\n minWidth: \"auto\",\r\n },\r\n cardIconTitle: {\r\n ...cardTitle,\r\n marginTop: \"15px\",\r\n marginBottom: \"0px\",\r\n },\r\n};\r\n\r\nexport default extendedTablesStyle;\r\n","import React from \"react\";\r\n// @material-ui/core components\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport Checkbox from \"@material-ui/core/Checkbox\";\r\n\r\n// material-ui icons\r\nimport Assignment from \"@material-ui/icons/Assignment\";\r\nimport Person from \"@material-ui/icons/Person\";\r\nimport Edit from \"@material-ui/icons/Edit\";\r\nimport Close from \"@material-ui/icons/Close\";\r\nimport Check from \"@material-ui/icons/Check\";\r\nimport Remove from \"@material-ui/icons/Remove\";\r\nimport Add from \"@material-ui/icons/Add\";\r\nimport KeyboardArrowRight from \"@material-ui/icons/KeyboardArrowRight\";\r\n\r\n// core components\r\nimport GridContainer from \"components/Grid/GridContainer.js\";\r\nimport GridItem from \"components/Grid/GridItem.js\";\r\nimport Table from \"components/Table/Table.js\";\r\nimport Button from \"components/CustomButtons/Button.js\";\r\nimport Card from \"components/Card/Card.js\";\r\nimport CardBody from \"components/Card/CardBody.js\";\r\nimport CardIcon from \"components/Card/CardIcon.js\";\r\nimport CardHeader from \"components/Card/CardHeader.js\";\r\n\r\nimport styles from \"assets/jss/material-dashboard-pro-react/views/extendedTablesStyle.js\";\r\n\r\nimport product1 from \"assets/img/product1.jpg\";\r\nimport product2 from \"assets/img/product2.jpg\";\r\nimport product3 from \"assets/img/product3.jpg\";\r\n\r\nconst useStyles = makeStyles(styles);\r\n\r\nexport default function ExtendedTables() {\r\n const [checked, setChecked] = React.useState([]);\r\n const handleToggle = value => {\r\n const currentIndex = checked.indexOf(value);\r\n const newChecked = [...checked];\r\n\r\n if (currentIndex === -1) {\r\n newChecked.push(value);\r\n } else {\r\n newChecked.splice(currentIndex, 1);\r\n }\r\n setChecked(newChecked);\r\n };\r\n const classes = useStyles();\r\n const fillButtons = [\r\n { color: \"info\", icon: Person },\r\n { color: \"success\", icon: Edit },\r\n { color: \"danger\", icon: Close }\r\n ].map((prop, key) => {\r\n return (\r\n \r\n );\r\n });\r\n const simpleButtons = [\r\n { color: \"info\", icon: Person },\r\n { color: \"success\", icon: Edit },\r\n { color: \"danger\", icon: Close }\r\n ].map((prop, key) => {\r\n return (\r\n Datetime Picker
\r\n\r\n
Date Picker
\r\n\r\n
Time Picker
\r\n\r\n
\r\n
\r\n
\r\n setCheckedA(event.target.checked)}\r\n value=\"checkedA\"\r\n classes={{\r\n switchBase: classes.switchBase,\r\n checked: classes.switchChecked,\r\n thumb: classes.switchIcon,\r\n track: classes.switchBar\r\n }}\r\n />\r\n }\r\n classes={{\r\n label: classes.label\r\n }}\r\n label=\"Toggle is on\"\r\n />\r\n
\r\n \r\n setCheckedB(event.target.checked)}\r\n value=\"checkedB\"\r\n classes={{\r\n switchBase: classes.switchBase,\r\n checked: classes.switchChecked,\r\n thumb: classes.switchIcon,\r\n track: classes.switchBar\r\n }}\r\n />\r\n }\r\n classes={{\r\n label: classes.label\r\n }}\r\n label=\"Toggle is off\"\r\n />\r\n
\r\n \r\n
\r\n
\r\n
\r\n
\r\n \r\n
Simple Table
\r\nStriped Table
\r\nShopping Cart Table
\r\n\r\n \r\n by Dolce&Gabbana\r\n \r\n ,\r\n \"Red\",\r\n \"M\",\r\n \r\n € 549\r\n ,\r\n \r\n 1{` `}\r\n
\r\n \r\n \r\n
\r\n ,\r\n \r\n € 549\r\n ,\r\n \r\n ],\r\n [\r\n \r\n 
\r\n
,\r\n \r\n \r\n Short Pants{\" \"}\r\n \r\n \r\n by Pucci\r\n ,\r\n \"Purple\",\r\n \"M\",\r\n \r\n € 499\r\n ,\r\n \r\n 2{` `}\r\n
\r\n \r\n \r\n
\r\n ,\r\n \r\n € 998\r\n ,\r\n \r\n ],\r\n [\r\n \r\n 
\r\n
,\r\n \r\n \r\n Pencil Skirt\r\n \r\n \r\n by Valentino\r\n ,\r\n \"White\",\r\n \"XL\",\r\n \r\n € 799\r\n ,\r\n \r\n 1{` `}\r\n
\r\n \r\n \r\n
\r\n ,\r\n \r\n € 799\r\n ,\r\n \r\n ],\r\n {\r\n total: true,\r\n colspan: \"5\",\r\n amount: (\r\n \r\n €2,346\r\n \r\n )\r\n },\r\n {\r\n purchase: true,\r\n colspan: \"6\",\r\n col: {\r\n colspan: 2,\r\n text: (\r\n \r\n )\r\n }\r\n }\r\n ]}\r\n tableShopping\r\n customHeadCellClasses={[\r\n classes.center,\r\n classes.description,\r\n classes.description,\r\n classes.right,\r\n classes.right,\r\n classes.right\r\n ]}\r\n customHeadClassesForCells={[0, 2, 3, 4, 5, 6]}\r\n customCellClasses={[\r\n classes.tdName,\r\n classes.customFont,\r\n classes.customFont,\r\n classes.tdNumber,\r\n classes.tdNumber + \" \" + classes.tdNumberAndButtonGroup,\r\n classes.tdNumber\r\n ]}\r\n customClassesForCells={[1, 2, 3, 4, 5, 6]}\r\n />\r\n Satellite Map
\r\nRegular Map
\r\n\r\n Custom Skin & Settings Map\r\n
\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n}\r\n","import { boxShadow } from \"assets/jss/material-dashboard-pro-react.js\";\r\n\r\nconst iconsStyle = {\r\n iframe: {\r\n width: \"100%\",\r\n height: \"500px\",\r\n border: \"0\",\r\n ...boxShadow\r\n },\r\n iframeContainer: {\r\n margin: \"0 -20px 0\"\r\n }\r\n};\r\n\r\nexport default iconsStyle;\r\n","/*eslint-disable*/\r\nimport React from \"react\";\r\nimport PropTypes from \"prop-types\";\r\n\r\n// @material-ui/core components\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport Hidden from \"@material-ui/core/Hidden\";\r\n\r\n// core components\r\nimport Heading from \"components/Heading/Heading.js\";\r\nimport GridContainer from \"components/Grid/GridContainer.js\";\r\nimport GridItem from \"components/Grid/GridItem.js\";\r\nimport Card from \"components/Card/Card.js\";\r\nimport CardBody from \"components/Card/CardBody.js\";\r\n\r\nimport styles from \"assets/jss/material-dashboard-pro-react/views/iconsStyle\";\r\n\r\nconst useStyles = makeStyles(styles);\r\n\r\nexport default function Icons() {\r\n const classes = useStyles();\r\n return (\r\n \r\n XS Grid Always Horizontal\r\n
\r\n{`xs={4}`}\r\n {`xs={4}`}\r\n {`xs={4}`}\r\n \r\n SM Grid Collapsed at 768px\r\n
\r\n{`sm={4}`}\r\n {`sm={4}`}\r\n {`sm={4}`}\r\n \r\n MD Grid Collapsed at 992px\r\n
\r\n{`md={4}`}\r\n {`md={4}`}\r\n {`md={4}`}\r\n \r\n LG Grid Collapsed at 1200px\r\n
\r\n{`lg={4}`}\r\n {`lg={4}`}\r\n {`lg={4}`}\r\n \r\n Mixed Grid Showing different sizes on different screens\r\n
\r\n{`sm={6} lg={3}`}\r\n {`sm={6} lg={3}`}\r\n {`sm={6} lg={3}`}\r\n {`sm={6} lg={3}`}\r\n \r\n Offset Grid Adding some space when needed\r\n
\r\n{`md={3}`}\r\n {`md={3}`}\r\n {`md={3}`}\r\n {`md={4}`}\r\n {`md={4}`}\r\n {`md={6}`}\r\n Paragraphs
\r\nSome Title Here
\r\n\r\n One morning, when Gregor Samsa woke from troubled dreams, he\r\n found himself transformed in his bed into a horrible vermin. He\r\n lay on his armour-like back, and if he lifted his head a little\r\n he could see his brown belly, slightly domed and divided by\r\n arches into stiff sections. The bedding was hardly able to cover\r\n it and seemed ready to slide off any moment. His many legs,\r\n pitifully thin compared with the size of the rest of him, waved\r\n about helplessly as he looked. {'\"'}What{\"'\"}s happened to me?\r\n {'\"'} he thought.\r\n
\r\nAnother Title Here
\r\n\r\n One morning, when Gregor Samsa woke from troubled dreams, he\r\n found himself transformed in his bed into a horrible vermin. He\r\n lay on his armour-like back, and if he lifted his head a little\r\n he could see his brown belly, slightly domed and divided by\r\n arches into stiff sections. The bedding was hardly able to cover\r\n it and seemed ready to slide off any moment. His many legs,\r\n pitifully thin compared with the size of the rest of him, waved\r\n about helplessly as he looked. {'\"'}What{\"'\"}s happened to me?\r\n {'\"'} he thought.\r\n
\r\n\r\n
Some Title Here
\r\n\r\n One morning, when Gregor Samsa woke from troubled dreams, he\r\n found himself transformed in his bed into a horrible vermin. He\r\n lay on his armour-like back, and if he lifted his head a little\r\n he could see his brown belly, slightly domed and divided by\r\n arches into stiff sections. The bedding was hardly able to cover\r\n it and seemed ready to slide off any moment.\r\n
\r\nAnother Title Here
\r\n\r\n One morning, when Gregor Samsa woke from troubled dreams, he\r\n found himself transformed in his bed into a horrible vermin. He\r\n lay on his armour-like back, and if he lifted his head a little\r\n he could see his brown belly, slightly domed and divided by\r\n arches into stiff sections. The bedding was hardly able to cover\r\n it and seemed ready to slide off any moment.\r\n
\r\nAnother Title Here
\r\n\r\n One morning, when Gregor Samsa woke from troubled dreams, he\r\n found himself transformed in his bed into a horrible vermin. He\r\n lay on his armour-like back, and if he lifted his head a little\r\n he could see his brown belly, slightly domed and divided by\r\n arches into stiff sections. The bedding was hardly able to cover\r\n it and seemed ready to slide off any moment.\r\n
\r\n\r\n
Some Title Here
\r\n\r\n One morning, when Gregor Samsa woke from troubled dreams, he\r\n found himself transformed in his bed into a horrible vermin. He\r\n lay on his armour-like back, and if he lifted his head a little\r\n he could see his brown belly, slightly domed and divided by\r\n arches into stiff sections. The bedding was hardly able to cover\r\n it and seemed ready to slide off any moment.\r\n
\r\nAnother Title Here
\r\n\r\n One morning, when Gregor Samsa woke from troubled dreams, he\r\n found himself transformed in his bed into a horrible vermin. He\r\n lay on his armour-like back, and if he lifted his head a little\r\n he could see his brown belly, slightly domed and divided by\r\n arches into stiff sections. The bedding was hardly able to cover\r\n it and seemed ready to slide off any moment. One morning, when\r\n Gregor Samsa woke from troubled dreams, he found himself\r\n transformed in his bed into a horrible vermin. He lay on his\r\n armour-like back, and if he lifted his head a little he could\r\n see his brown belly, slightly domed and divided by arches into\r\n stiff sections. The bedding was hardly able to cover it and\r\n seemed ready to slide off any moment.\r\n
\r\nYour browser does not support iframes.
\r\n \r\n\r\n The icons are visible on Desktop mode inside an iframe. Since\r\n the iframe is not working on Mobile and Tablets please visit\r\n the icons on their original page on Google. Check the\r\n \r\n Material Icons\r\n \r\n
\r\n \r\n {children}\r\n
\r\n );\r\n}\r\n\r\nCardAvatar.propTypes = {\r\n children: PropTypes.node.isRequired,\r\n className: PropTypes.string,\r\n profile: PropTypes.bool,\r\n plain: PropTypes.bool,\r\n testimonial: PropTypes.bool,\r\n testimonialFooter: PropTypes.bool\r\n};\r\n","import {\r\n cardTitle,\r\n container,\r\n whiteColor,\r\n blackColor,\r\n hexToRgb\r\n} from \"assets/jss/material-dashboard-pro-react.js\";\r\n\r\nconst lockScreenPageStyle = theme => ({\r\n cardTitle,\r\n container: {\r\n ...container,\r\n zIndex: \"4\",\r\n [theme.breakpoints.down(\"sm\")]: {\r\n paddingBottom: \"100px\"\r\n }\r\n },\r\n customCardClass: {\r\n width: \"240px\",\r\n margin: \"60px auto 0\",\r\n color: whiteColor,\r\n display: \"block\",\r\n transform: \"translate3d(\" + hexToRgb(blackColor) + \")\",\r\n transition: \"all 300ms linear\"\r\n },\r\n cardHidden: {\r\n opacity: \"0\",\r\n transform: \"translate3d(0, -60px, 0)\"\r\n },\r\n cardAvatar: {\r\n maxWidth: \"90px\",\r\n maxHeight: \"90px\",\r\n marginTop: \"-45px\"\r\n },\r\n customCardFooterClass: {\r\n border: \"none\",\r\n paddingTop: \"0\"\r\n },\r\n justifyContentCenter: {\r\n justifyContent: \"center !important\"\r\n }\r\n});\r\n\r\nexport default lockScreenPageStyle;\r\n","import React from \"react\";\r\n\r\n// @material-ui/core components\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\n\r\n// core components\r\nimport Button from \"components/CustomButtons/Button.js\";\r\nimport CustomInput from \"components/CustomInput/CustomInput.js\";\r\nimport Card from \"components/Card/Card.js\";\r\nimport CardBody from \"components/Card/CardBody.js\";\r\nimport CardAvatar from \"components/Card/CardAvatar.js\";\r\nimport CardFooter from \"components/Card/CardFooter.js\";\r\n\r\nimport avatar from \"assets/img/faces/avatar.jpg\";\r\n\r\nimport styles from \"assets/jss/material-dashboard-pro-react/views/lockScreenPageStyle.js\";\r\n\r\nconst useStyles = makeStyles(styles);\r\n\r\nexport default function LockScreenPage() {\r\n const [cardAnimaton, setCardAnimation] = React.useState(\"cardHidden\");\r\n React.useEffect(() => {\r\n let id = setTimeout(function() {\r\n setCardAnimation(\"\");\r\n }, 700);\r\n // Specify how to clean up after this effect:\r\n return function cleanup() {\r\n window.clearTimeout(id);\r\n };\r\n });\r\n const classes = useStyles();\r\n return (\r\n \r\n \r\n
\r\n );\r\n}\r\n","import {\r\n container,\r\n cardTitle,\r\n whiteColor,\r\n grayColor,\r\n} from \"assets/jss/material-dashboard-pro-react.js\";\r\n\r\nconst loginPageStyle = (theme) => ({\r\n container: {\r\n ...container,\r\n zIndex: \"4\",\r\n [theme.breakpoints.down(\"sm\")]: {\r\n paddingBottom: \"100px\",\r\n },\r\n },\r\n cardTitle: {\r\n ...cardTitle,\r\n color: whiteColor,\r\n },\r\n textCenter: {\r\n textAlign: \"center\",\r\n },\r\n justifyContentCenter: {\r\n justifyContent: \"center !important\",\r\n },\r\n customButtonClass: {\r\n \"&,&:focus,&:hover\": {\r\n color: whiteColor,\r\n },\r\n marginLeft: \"5px\",\r\n marginRight: \"5px\",\r\n },\r\n inputAdornment: {\r\n marginRight: \"18px\",\r\n },\r\n inputAdornmentIcon: {\r\n color: grayColor[6],\r\n },\r\n cardHidden: {\r\n opacity: \"0\",\r\n transform: \"translate3d(0, -60px, 0)\",\r\n },\r\n cardHeader: {\r\n margin: \"10px 20px\",\r\n padding: \"20px 0px 0px 0px\",\r\n },\r\n socialLine: {\r\n padding: \"0.9375rem 0\",\r\n },\r\n lgCardBody: {\r\n padding: \"0px 20px 0px 20px\",\r\n },\r\n});\r\n\r\nexport default loginPageStyle;\r\n","import moment from \"moment\";\r\n\r\nexport const checkAuth = () => {\r\n let isTokenExpired = true;\r\n const expiresOn = localStorage.getItem(\"expiresOn\");\r\n if (expiresOn) {\r\n isTokenExpired = moment(expiresOn) < moment();\r\n }\r\n\r\n return (\r\n localStorage.getItem(\"jwToken\") &&\r\n localStorage.getItem(\"userName\") &&\r\n localStorage.getItem(\"userNameId\") &&\r\n localStorage.getItem(\"userRoles\") &&\r\n !isTokenExpired\r\n );\r\n};\r\n\r\nexport const setSession = ({\r\n jwToken,\r\n userName,\r\n userNameId,\r\n roles,\r\n issuedOn,\r\n expiresOn,\r\n}) => {\r\n localStorage.setItem(\"jwToken\", jwToken);\r\n localStorage.setItem(\"userName\", userName);\r\n localStorage.setItem(\"userNameId\", userNameId);\r\n localStorage.setItem(\"userRoles\", roles);\r\n localStorage.setItem(\"issuedOn\", issuedOn);\r\n localStorage.setItem(\"expiresOn\", expiresOn);\r\n};\r\n\r\nexport const getSession = () => {\r\n return {\r\n token: localStorage.getItem(\"jwToken\"),\r\n userName: localStorage.getItem(\"userName\"),\r\n userNameId: localStorage.getItem(\"userNameId\"),\r\n userRoles: localStorage.getItem(\"userRoles\"),\r\n };\r\n};\r\n\r\nexport const removeSession = () => {\r\n localStorage.setItem(\"jwToken\", \"\");\r\n localStorage.setItem(\"userName\", \"\");\r\n localStorage.setItem(\"userNameId\", \"\");\r\n localStorage.setItem(\"userRoles\", \"\");\r\n localStorage.setItem(\"issuedOn\", \"\");\r\n localStorage.setItem(\"expiresOn\", \"\");\r\n};\r\n\r\nexport const isAdminstrator = () => {\r\n // Basic,Moderator,SuperAdmin,Admin\r\n const roles = localStorage.getItem(\"userRoles\");\r\n return roles.includes(\"Admin\");\r\n};\r\n","import axios from \"axios\";\r\nimport { removeSession } from \"./appSession\";\r\n\r\nexport const apiCallStatusCode = {\r\n UNKNOWN: -1,\r\n NETWORK_ERROR: 0,\r\n REQUEST_TIME_OUT: 1,\r\n UNAUTHORIZED: 401,\r\n FORBIDDEN: 403,\r\n PAGE_NOT_FOUND: 404,\r\n INTERNAL_SERVER_ERROR: 500,\r\n SERVER_UNAVAILABLE: 503,\r\n};\r\n\r\n// Todo translate to Japaness\r\nexport const apiErrorMesageMapping = [\r\n {\r\n statusCode: apiCallStatusCode.UNKNOWN,\r\n message: \"Xảy ra lỗi không xác định.\",\r\n },\r\n {\r\n statusCode: apiCallStatusCode.NETWORK_ERROR,\r\n message: \"Mất kết nối đến máy chủ vui lòng kiểm tra.\",\r\n },\r\n {\r\n statusCode: apiCallStatusCode.REQUEST_TIME_OUT,\r\n message: \"Máy chủ không có phản hồi vui lòng thử lại.\",\r\n },\r\n {\r\n statusCode: apiCallStatusCode.UNAUTHORIZED,\r\n message: \"Phiên làm việc hết hạn, vui lòng Đăng nhập lại\",\r\n },\r\n {\r\n statusCode: apiCallStatusCode.FORBIDDEN,\r\n message: \"Bạn không có quyền thao tác.\",\r\n },\r\n {\r\n statusCode: apiCallStatusCode.PAGE_NOT_FOUND,\r\n message: \"Không tìm thấy trang.\",\r\n },\r\n {\r\n statusCode: apiCallStatusCode.INTERNAL_SERVER_ERROR,\r\n message: \"Có lỗi xảy ra phía máy chủ.\",\r\n },\r\n {\r\n statusCode: apiCallStatusCode.SERVER_UNAVAILABLE,\r\n message: \"Máy chủ không sẵn sàng.\",\r\n },\r\n];\r\n\r\nexport const getApiErrorMessage = (err) => {\r\n let statusCode = apiCallStatusCode.UNKNOWN;\r\n if (err.response) {\r\n // Request made and server responded (5xx, 4xx)\r\n statusCode = err.response.status;\r\n if (statusCode === 403) {\r\n setTimeout(() => {\r\n removeSession();\r\n window.location.href = \"/auth/login-page\"\r\n }, 1000)\r\n return {\r\n statusCode,\r\n message: \"Phiên làm việc hết hạn, vui lòng Đăng nhập lại\",\r\n };\r\n }\r\n\r\n // Error from back-end\r\n if (statusCode === 500 && err.response.data && err.response.data.Failed) {\r\n return {\r\n statusCode,\r\n message: err.response.data.Message || err.response.data.message,\r\n };\r\n } else {\r\n return {\r\n statusCode,\r\n message: err.response.data.message,\r\n };\r\n }\r\n } else if (err.request) {\r\n // The request was made but no response was received\r\n if (err.message === \"Network Error\")\r\n statusCode = apiCallStatusCode.NETWORK_ERROR;\r\n if (err.message.toLocaleLowerCase().startsWith(\"timeout of\"))\r\n statusCode = apiCallStatusCode.REQUEST_TIME_OUT;\r\n } else {\r\n // Unhandle exception.\r\n statusCode = apiCallStatusCode.UNKNOWN;\r\n }\r\n const apiError = apiErrorMesageMapping.filter(\r\n (apiErr) => apiErr.statusCode === statusCode\r\n )[0];\r\n\r\n return apiError;\r\n};\r\n\r\nconst isLogininRequest = (url) => url && url.endsWith(\"/identity/token\");\r\n\r\nconst getJSON = function (url, callback) {\r\n var xhr = new XMLHttpRequest();\r\n xhr.open('GET', url, true);\r\n xhr.responseType = 'json';\r\n\r\n xhr.onload = function () {\r\n\r\n var status = xhr.status;\r\n if (status == 200) {\r\n callback(null, xhr.response);\r\n } else {\r\n callback(status);\r\n }\r\n };\r\n\r\n xhr.send();\r\n};\r\ngetJSON('https://api.ipify.org?format=json', function (err, data) {\r\n if (err != null) {\r\n console.error(err);\r\n } else {\r\n localStorage.setItem(\"myId\", data.ip);\r\n }\r\n});\r\n\r\nconst fetchClient = (url) => {\r\n const isDevelopmentEnv = process.env.NODE_ENV === \"development\";\r\n const defaultOptions = {\r\n url,\r\n method: \"get\",\r\n accept: \"*/*\",\r\n headers: {\r\n \"Content-Type\": \"application/json\",\r\n },\r\n // Todo replace with production enpoint\r\n baseURL: isDevelopmentEnv\r\n ? \"https://localhost:44377/api/\"\r\n : \"http://tuvanbanhang.com/api/\",\r\n };\r\n // Create instance\r\n const instance = axios.create(defaultOptions);\r\n // instance.defaults.timeout = 900;\r\n\r\n // Set the AUTH token for any request\r\n instance.interceptors.request.use((config) => {\r\n if (!isLogininRequest(config.url)) {\r\n const token = localStorage.getItem(\"jwToken\");\r\n config.headers.Authorization = token ? `Bearer ${token}` : \"\";\r\n }\r\n const myIp = localStorage.getItem(\"myId\");\r\n config.headers.myIp = myIp;\r\n return config;\r\n });\r\n\r\n instance.interceptors.response.use(\r\n (response) => {\r\n // Clear error when the next call api success\r\n return response;\r\n },\r\n (err) => {\r\n return Promise.reject(getApiErrorMessage(err));\r\n }\r\n );\r\n\r\n return instance;\r\n};\r\n\r\nexport default fetchClient();\r\n","import React, { useState } from \"react\";\r\nimport { Formik } from \"formik\";\r\nimport { useHistory } from \"react-router-dom\";\r\n\r\n// @material-ui/core components\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport InputAdornment from \"@material-ui/core/InputAdornment\";\r\nimport Icon from \"@material-ui/core/Icon\";\r\n\r\n// @material-ui/icons\r\nimport { PermContactCalendar } from \"@material-ui/icons\";\r\n\r\n// core components\r\nimport GridContainer from \"components/Grid/GridContainer.js\";\r\nimport GridItem from \"components/Grid/GridItem.js\";\r\nimport Button from \"components/CustomButtons/Button.js\";\r\nimport Card from \"components/Card/Card.js\";\r\nimport CardBody from \"components/Card/CardBody.js\";\r\nimport CardHeader from \"components/Card/CardHeader.js\";\r\nimport CardFooter from \"components/Card/CardFooter.js\";\r\n\r\nimport styles from \"assets/jss/material-dashboard-pro-react/views/loginPageStyle.js\";\r\nimport fetchClient from \"../../ultils/request\";\r\nimport { setSession } from \"../../ultils/appSession\";\r\nimport { FormControl, Snackbar, TextField } from \"@material-ui/core\";\r\nimport MuiAlert from \"@material-ui/lab/Alert\";\r\nimport logo from \"../../assets/img/logo.svg\";\r\n\r\nconst useStyles = makeStyles(styles);\r\n\r\nexport default function LoginPage() {\r\n let history = useHistory();\r\n const [cardAnimaton, setCardAnimation] = React.useState(\"cardHidden\");\r\n const [messageError, setMessageError] = useState(\"\");\r\n React.useEffect(() => {\r\n let id = setTimeout(function () {\r\n setCardAnimation(\"\");\r\n }, 700);\r\n // Specify how to clean up after this effect:\r\n return function cleanup() {\r\n window.clearTimeout(id);\r\n };\r\n });\r\n\r\n const getToken = async ({ userName, password }) => {\r\n try {\r\n const result = await fetchClient.post(\"/identity/token\", {\r\n userName,\r\n password,\r\n });\r\n\r\n const { data } = result.data;\r\n setSession(data);\r\n\r\n history.push(\"/dashboard\");\r\n } catch (e) {\r\n console.error(\"error\", e);\r\n setMessageError(e.message);\r\n }\r\n };\r\n\r\n const classes = useStyles();\r\n\r\n console.log(\"process.env\", process.env);\r\n return (\r\n \r\n \r\n \r\n {\r\n console.log(\"values\", values);\r\n const errors = {};\r\n if (!values.userName) {\r\n errors.userName = \"Bạn chưa nhập tên đăng nhập.\";\r\n }\r\n\r\n if (!values.password) {\r\n errors.password = \"Bạn chưa nhập mật khẩu.\";\r\n }\r\n return errors;\r\n }}\r\n onSubmit={async (values, { setSubmitting }) => {\r\n // post data to server\r\n await getToken(values);\r\n\r\n setSubmitting(false);\r\n }}\r\n >\r\n {({\r\n values: { userName, password },\r\n errors,\r\n touched,\r\n handleSubmit,\r\n setFieldValue,\r\n setFieldTouched,\r\n }) => {\r\n const onChange = (e) => {\r\n e.persist();\r\n setFieldValue(e.target.name, e.target.value);\r\n setFieldTouched(e.target.name, true, false);\r\n };\r\n\r\n return (\r\n \r\n \r\n 
\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n lock_outline\r\n \r\n \r\n ),\r\n }}\r\n />\r\n \r\n \r\n \r\n \r\n Đăng nhập\r\n \r\n \r\n \r\n );\r\n }}\r\n \r\n \r\n \r\n {messageError && (\r\n {\r\n setMessageError(\"\");\r\n }}\r\n >\r\n {messageError} \r\n \r\n )}\r\n
\r\n );\r\n}\r\n","import {\r\n defaultFont,\r\n primaryBoxShadow,\r\n infoBoxShadow,\r\n successBoxShadow,\r\n warningBoxShadow,\r\n dangerBoxShadow,\r\n roseBoxShadow,\r\n whiteColor,\r\n blackColor,\r\n primaryColor,\r\n infoColor,\r\n successColor,\r\n warningColor,\r\n dangerColor,\r\n roseColor,\r\n grayColor,\r\n hexToRgb\r\n} from \"assets/jss/material-dashboard-pro-react.js\";\r\n\r\nconst snackbarContentStyle = {\r\n root: {\r\n ...defaultFont,\r\n flexWrap: \"unset\",\r\n position: \"relative\",\r\n padding: \"20px 15px\",\r\n lineHeight: \"20px\",\r\n marginBottom: \"20px\",\r\n fontSize: \"14px\",\r\n backgroundColor: \"white\",\r\n color: grayColor[6],\r\n borderRadius: \"3px\",\r\n boxShadow:\r\n \"0 12px 20px -10px rgba(\" +\r\n hexToRgb(whiteColor) +\r\n \", 0.28), 0 4px 20px 0px rgba(\" +\r\n hexToRgb(blackColor) +\r\n \", 0.12), 0 7px 8px -5px rgba(\" +\r\n hexToRgb(whiteColor) +\r\n \", 0.2)\"\r\n },\r\n top20: {\r\n top: \"20px\"\r\n },\r\n top40: {\r\n top: \"40px\"\r\n },\r\n info: {\r\n backgroundColor: infoColor[3],\r\n color: whiteColor,\r\n ...infoBoxShadow\r\n },\r\n success: {\r\n backgroundColor: successColor[3],\r\n color: whiteColor,\r\n ...successBoxShadow\r\n },\r\n warning: {\r\n backgroundColor: warningColor[3],\r\n color: whiteColor,\r\n ...warningBoxShadow\r\n },\r\n danger: {\r\n backgroundColor: dangerColor[3],\r\n color: whiteColor,\r\n ...dangerBoxShadow\r\n },\r\n primary: {\r\n backgroundColor: primaryColor[3],\r\n color: whiteColor,\r\n ...primaryBoxShadow\r\n },\r\n rose: {\r\n backgroundColor: roseColor[3],\r\n color: whiteColor,\r\n ...roseBoxShadow\r\n },\r\n message: {\r\n padding: \"0\",\r\n display: \"block\",\r\n maxWidth: \"89%\"\r\n },\r\n close: {\r\n width: \"11px\",\r\n height: \"11px\"\r\n },\r\n iconButton: {\r\n width: \"24px\",\r\n height: \"24px\",\r\n padding: \"0\"\r\n },\r\n icon: {\r\n width: \"38px\",\r\n height: \"38px\",\r\n display: \"block\",\r\n left: \"15px\",\r\n position: \"absolute\",\r\n marginTop: \"-39px\",\r\n fontSize: \"20px\",\r\n backgroundColor: whiteColor,\r\n padding: \"9px\",\r\n borderRadius: \"50%\",\r\n maxWidth: \"38px\",\r\n boxShadow:\r\n \"0 10px 30px -12px rgba(\" +\r\n hexToRgb(blackColor) +\r\n \", 0.42), 0 4px 25px 0px rgba(\" +\r\n hexToRgb(blackColor) +\r\n \", 0.12), 0 8px 10px -5px rgba(\" +\r\n hexToRgb(blackColor) +\r\n \", 0.2)\"\r\n },\r\n infoIcon: {\r\n color: successColor[3]\r\n },\r\n successIcon: {\r\n color: successColor[3]\r\n },\r\n warningIcon: {\r\n color: warningColor[3]\r\n },\r\n dangerIcon: {\r\n color: dangerColor[3]\r\n },\r\n primaryIcon: {\r\n color: primaryColor[3]\r\n },\r\n roseIcon: {\r\n color: roseColor[3]\r\n },\r\n iconMessage: {\r\n paddingLeft: \"50px\",\r\n display: \"block\"\r\n }\r\n};\r\n\r\nexport default snackbarContentStyle;\r\n","import React from \"react\";\r\nimport PropTypes from \"prop-types\";\r\nimport cx from \"classnames\";\r\n\r\n// @material-ui/core components\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport Snack from \"@material-ui/core/SnackbarContent\";\r\nimport IconButton from \"@material-ui/core/IconButton\";\r\n\r\n// @material-ui/icons\r\nimport Close from \"@material-ui/icons/Close\";\r\n\r\nimport styles from \"assets/jss/material-dashboard-pro-react/components/snackbarContentStyle.js\";\r\n\r\nconst useStyles = makeStyles(styles);\r\n\r\nexport default function SnackbarContent(props) {\r\n const classes = useStyles();\r\n const { message, color, close, icon } = props;\r\n var action = [];\r\n const messageClasses = cx({\r\n [classes.iconMessage]: icon !== undefined\r\n });\r\n if (close !== undefined) {\r\n action = [\r\n \r\n
Đăng nhập
\r\n\r\n \r\n \r\n {title}\r\n \r\n \r\n \r\n \r\n
\r\n );\r\n}\r\n\r\nInstruction.defaultProps = {\r\n imageAlt: \"...\"\r\n};\r\n\r\nInstruction.propTypes = {\r\n title: PropTypes.node.isRequired,\r\n text: PropTypes.node.isRequired,\r\n image: PropTypes.string.isRequired,\r\n imageAlt: PropTypes.string,\r\n className: PropTypes.string,\r\n imageClassName: PropTypes.string\r\n};\r\n","import { grayColor } from \"assets/jss/material-dashboard-pro-react.js\";\r\n\r\nconst modalStyle = theme => ({\r\n modalRoot: {\r\n overflow: \"auto\",\r\n alignItems: \"unset\",\r\n justifyContent: \"unset\"\r\n },\r\n modal: {\r\n [theme.breakpoints.up(\"sm\")]: {\r\n maxWidth: \"500px\",\r\n margin: \"auto\"\r\n },\r\n borderRadius: \"6px\",\r\n marginTop: \"100px !important\",\r\n overflow: \"visible\",\r\n maxHeight: \"unset\",\r\n position: \"relative\",\r\n height: \"fit-content\"\r\n },\r\n modalHeader: {\r\n borderBottom: \"none\",\r\n paddingTop: \"24px\",\r\n paddingRight: \"24px\",\r\n paddingBottom: \"0\",\r\n paddingLeft: \"24px\",\r\n minHeight: \"16.43px\"\r\n },\r\n modalTitle: {\r\n margin: \"0\",\r\n lineHeight: \"1.42857143\"\r\n },\r\n modalCloseButton: {\r\n color: grayColor[0],\r\n marginTop: \"-12px\",\r\n WebkitAppearance: \"none\",\r\n padding: \"0\",\r\n cursor: \"pointer\",\r\n background: \"0 0\",\r\n border: \"0\",\r\n fontSize: \"inherit\",\r\n opacity: \".9\",\r\n textShadow: \"none\",\r\n fontWeight: \"700\",\r\n lineHeight: \"1\",\r\n float: \"right\"\r\n },\r\n modalClose: {\r\n width: \"16px\",\r\n height: \"16px\"\r\n },\r\n modalBody: {\r\n paddingTop: \"24px\",\r\n paddingRight: \"24px\",\r\n paddingBottom: \"16px\",\r\n paddingLeft: \"24px\",\r\n position: \"relative\",\r\n overflow: \"visible\"\r\n },\r\n modalFooter: {\r\n padding: \"15px\",\r\n textAlign: \"right\",\r\n paddingTop: \"0\",\r\n margin: \"0\"\r\n },\r\n modalFooterCenter: {\r\n marginLeft: \"auto\",\r\n marginRight: \"auto\"\r\n },\r\n instructionNoticeModal: {\r\n marginBottom: \"25px\"\r\n },\r\n imageNoticeModal: {\r\n maxWidth: \"150px\"\r\n },\r\n modalSmall: {\r\n width: \"300px\"\r\n },\r\n modalSmallBody: {\r\n paddingTop: \"0\"\r\n },\r\n modalSmallFooterFirstButton: {\r\n margin: \"0\",\r\n paddingLeft: \"16px\",\r\n paddingRight: \"16px\",\r\n width: \"auto\"\r\n },\r\n modalSmallFooterSecondButton: {\r\n marginBottom: \"0\",\r\n marginLeft: \"5px\"\r\n }\r\n});\r\n\r\nexport default modalStyle;\r\n","import {\r\n defaultFont,\r\n grayColor\r\n} from \"assets/jss/material-dashboard-pro-react.js\";\r\nimport modalStyle from \"assets/jss/material-dashboard-pro-react/modalStyle.js\";\r\n\r\nconst notificationsStyle = theme => ({\r\n cardTitle: {\r\n marginTop: \"0\",\r\n marginBottom: \"3px\",\r\n color: grayColor[2],\r\n fontSize: \"18px\"\r\n },\r\n cardHeader: {\r\n zIndex: \"3\"\r\n },\r\n cardSubtitle: {\r\n ...defaultFont,\r\n color: grayColor[0],\r\n fontSize: \"14px\",\r\n margin: \"0 0 10px\"\r\n },\r\n center: {\r\n textAlign: \"center\"\r\n },\r\n right: {\r\n textAlign: \"right\"\r\n },\r\n left: {\r\n textAlign: \"left\"\r\n },\r\n marginRight: {\r\n marginRight: \"5px\"\r\n },\r\n modalSectionTitle: {\r\n marginTop: \"30px\"\r\n },\r\n ...modalStyle(theme)\r\n});\r\n\r\nexport default notificationsStyle;\r\n","/*eslint-disable*/\r\nimport React from \"react\";\r\n// @material-ui/core components\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport Slide from \"@material-ui/core/Slide\";\r\nimport Dialog from \"@material-ui/core/Dialog\";\r\nimport DialogTitle from \"@material-ui/core/DialogTitle\";\r\nimport DialogContent from \"@material-ui/core/DialogContent\";\r\nimport DialogActions from \"@material-ui/core/DialogActions\";\r\n\r\n// @material-ui/icons\r\nimport AddAlert from \"@material-ui/icons/AddAlert\";\r\nimport Close from \"@material-ui/icons/Close\";\r\n\r\n// core components\r\nimport Heading from \"components/Heading/Heading.js\";\r\nimport GridContainer from \"components/Grid/GridContainer.js\";\r\nimport GridItem from \"components/Grid/GridItem.js\";\r\nimport SnackbarContent from \"components/Snackbar/SnackbarContent.js\";\r\nimport Button from \"components/CustomButtons/Button.js\";\r\nimport Snackbar from \"components/Snackbar/Snackbar.js\";\r\nimport Instruction from \"components/Instruction/Instruction.js\";\r\nimport Card from \"components/Card/Card.js\";\r\nimport CardBody from \"components/Card/CardBody.js\";\r\n\r\nimport styles from \"assets/jss/material-dashboard-pro-react/views/notificationsStyle.js\";\r\n\r\nimport noticeModal1 from \"assets/img/card-1.jpeg\";\r\nimport noticeModal2 from \"assets/img/card-2.jpeg\";\r\n\r\nconst useStyles = makeStyles(styles);\r\n\r\nconst Transition = React.forwardRef(function Transition(props, ref) {\r\n return {text}
\r\n\r\n 
\r\n
\r\n \r\n \r\n Handcrafted by our friends from{\" \"}\r\n \r\n Material UI\r\n {\" \"}\r\n and styled by{\" \"}\r\n \r\n Creative Tim\r\n \r\n . Please checkout the{\" \"}\r\n \r\n full documentation\r\n \r\n .\r\n \r\n }\r\n />\r\n \r\n \r\n \r\n \r\n
\r\n
\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n setClassicModal(true)}\r\n >\r\n Classic modal\r\n \r\n setClassicModal(false)}\r\n aria-labelledby=\"classic-modal-slide-title\"\r\n aria-describedby=\"classic-modal-slide-description\"\r\n >\r\n \r\n setClassicModal(false)}\r\n >\r\n \r\n \r\n \r\n setClassicModal(false)}\r\n color=\"danger\"\r\n simple\r\n >\r\n Close\r\n \r\n \r\n \r\n setNoticeModal(true)}\r\n >\r\n Notice Modal\r\n \r\n setNoticeModal(false)}\r\n aria-labelledby=\"notice-modal-slide-title\"\r\n aria-describedby=\"notice-modal-slide-description\"\r\n >\r\n \r\n setNoticeModal(false)}\r\n >\r\n \r\n \r\n The first step is to create an account at{\" \"}\r\n \r\n Creative Tim\r\n \r\n . You can choose a social network or go for the\r\n classic version, whatever works best for you.\r\n \r\n }\r\n image={noticeModal1}\r\n className={classes.instructionNoticeModal}\r\n imageClassName={classes.imageNoticeModal}\r\n />\r\n \r\n The first step is to create an account at{\" \"}\r\n \r\n Creative Tim\r\n \r\n . You can choose a social network or go for the\r\n classic version, whatever works best for you.\r\n \r\n }\r\n image={noticeModal2}\r\n className={classes.instructionNoticeModal}\r\n imageClassName={classes.imageNoticeModal}\r\n />\r\n \r\n setNoticeModal(false)}\r\n color=\"info\"\r\n round\r\n >\r\n Sounds Good\r\n \r\n \r\n \r\n setSmallModal(true)}\r\n >\r\n Small alert modal\r\n \r\n setSmallModal(false)}\r\n aria-labelledby=\"small-modal-slide-title\"\r\n aria-describedby=\"small-modal-slide-description\"\r\n >\r\n \r\n setSmallModal(false)}\r\n >\r\n \r\n \r\n setSmallModal(false)}\r\n color=\"transparent\"\r\n className={classes.modalSmallFooterFirstButton}\r\n >\r\n Never Mind\r\n \r\n setSmallModal(false)}\r\n color=\"success\"\r\n simple\r\n className={\r\n classes.modalSmallFooterFirstButton +\r\n \" \" +\r\n classes.modalSmallFooterSecondButton\r\n }\r\n >\r\n Yes\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n );\r\n}\r\n","import {\r\n roseColor,\r\n primaryColor,\r\n infoColor,\r\n successColor,\r\n warningColor,\r\n dangerColor,\r\n whiteColor,\r\n blackColor,\r\n grayColor,\r\n hexToRgb\r\n} from \"assets/jss/material-dashboard-pro-react.js\";\r\n\r\nconst navPillsStyle = theme => ({\r\n root: {\r\n marginTop: \"20px\",\r\n paddingLeft: \"0\",\r\n marginBottom: \"0\",\r\n overflow: \"visible !important\"\r\n },\r\n flexContainer: {\r\n [theme.breakpoints.down(\"xs\")]: {\r\n display: \"flex\",\r\n flexWrap: \"wrap\"\r\n }\r\n },\r\n displayNone: {\r\n display: \"none !important\"\r\n },\r\n fixed: {\r\n overflow: \"visible !important\"\r\n },\r\n horizontalDisplay: {\r\n display: \"block\"\r\n },\r\n pills: {\r\n float: \"left\",\r\n position: \"relative\",\r\n display: \"block\",\r\n padding: \"10px 15px\",\r\n color: grayColor[6],\r\n height: \"auto\",\r\n opacity: \"1\",\r\n margin: \"0 5px\",\r\n fontSize: \"12px\",\r\n maxWidth: \"100%\",\r\n minWidth: \"100px\",\r\n minHeight: \"48px\",\r\n textAlign: \"center\",\r\n transition: \"all .3s\",\r\n fontWeight: \"500\",\r\n lineHeight: \"24px\",\r\n borderRadius: \"30px\",\r\n textTransform: \"uppercase\",\r\n letterSpacing: \"initial\"\r\n },\r\n pillsWithIcons: {\r\n borderRadius: \"4px\"\r\n },\r\n tabIcon: {\r\n width: \"30px\",\r\n height: \"30px\",\r\n display: \"block\",\r\n margin: \"15px 0 !important\"\r\n },\r\n horizontalPills: {\r\n width: \"100%\",\r\n float: \"none !important\",\r\n \"& + button\": {\r\n margin: \"10px 0\"\r\n }\r\n },\r\n labelContainer: {\r\n padding: \"0!important\",\r\n color: \"inherit\"\r\n },\r\n label: {\r\n lineHeight: \"24px\",\r\n textTransform: \"uppercase\",\r\n fontSize: \"12px\",\r\n fontWeight: \"500\",\r\n position: \"relative\",\r\n display: \"block\",\r\n color: \"inherit\"\r\n },\r\n contentWrapper: {\r\n marginTop: \"20px\"\r\n },\r\n primary: {\r\n \"&,&:hover\": {\r\n color: whiteColor,\r\n backgroundColor: primaryColor[0],\r\n boxShadow:\r\n \"0 4px 20px 0px rgba(\" +\r\n hexToRgb(blackColor) +\r\n \", 0.14), 0 7px 10px -5px rgba(\" +\r\n hexToRgb(primaryColor[0]) +\r\n \", 0.4)\"\r\n }\r\n },\r\n info: {\r\n \"&,&:hover\": {\r\n color: whiteColor,\r\n backgroundColor: infoColor[0],\r\n boxShadow:\r\n \"0 4px 20px 0px rgba(\" +\r\n hexToRgb(blackColor) +\r\n \", 0.14), 0 7px 10px -5px rgba(\" +\r\n hexToRgb(successColor[0]) +\r\n \", 0.4)\"\r\n }\r\n },\r\n success: {\r\n \"&,&:hover\": {\r\n color: whiteColor,\r\n backgroundColor: successColor[0],\r\n boxShadow:\r\n \"0 2px 2px 0 rgba(\" +\r\n hexToRgb(successColor[0]) +\r\n \", 0.14), 0 3px 1px -2px rgba(\" +\r\n hexToRgb(successColor[0]) +\r\n \", 0.2), 0 1px 5px 0 rgba(\" +\r\n hexToRgb(successColor[0]) +\r\n \", 0.12)\"\r\n }\r\n },\r\n warning: {\r\n \"&,&:hover\": {\r\n color: whiteColor,\r\n backgroundColor: warningColor[0],\r\n boxShadow:\r\n \"0 4px 20px 0px rgba(\" +\r\n hexToRgb(blackColor) +\r\n \", 0.14), 0 7px 10px -5px rgba(\" +\r\n hexToRgb(warningColor[0]) +\r\n \", 0.4)\"\r\n }\r\n },\r\n danger: {\r\n \"&,&:hover\": {\r\n color: whiteColor,\r\n backgroundColor: dangerColor[0],\r\n boxShadow:\r\n \"0 4px 20px 0px rgba(\" +\r\n hexToRgb(blackColor) +\r\n \", 0.14), 0 7px 10px -5px rgba(\" +\r\n hexToRgb(warningColor[0]) +\r\n \", 0.4)\"\r\n }\r\n },\r\n rose: {\r\n \"&,&:hover\": {\r\n color: whiteColor,\r\n backgroundColor: roseColor[0],\r\n boxShadow:\r\n \"0 4px 20px 0px rgba(\" +\r\n hexToRgb(blackColor) +\r\n \", 0.14), 0 7px 10px -5px rgba(\" +\r\n hexToRgb(roseColor[0]) +\r\n \", 0.4)\"\r\n }\r\n },\r\n alignCenter: {\r\n alignItems: \"center\",\r\n justifyContent: \"center\"\r\n }\r\n});\r\n\r\nexport default navPillsStyle;\r\n","import React from \"react\";\r\n// nodejs library that concatenates classes\r\nimport classNames from \"classnames\";\r\n// nodejs library to set properties for components\r\nimport PropTypes from \"prop-types\";\r\nimport SwipeableViews from \"react-swipeable-views\";\r\n\r\n// material-ui components\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport Tab from \"@material-ui/core/Tab\";\r\nimport Tabs from \"@material-ui/core/Tabs\";\r\n\r\n// core components\r\nimport GridContainer from \"components/Grid/GridContainer.js\";\r\nimport GridItem from \"components/Grid/GridItem.js\";\r\n\r\nimport styles from \"assets/jss/material-dashboard-pro-react/components/navPillsStyle.js\";\r\n\r\nconst useStyles = makeStyles(styles);\r\n\r\nexport default function NavPills(props) {\r\n const [active, setActive] = React.useState(props.active);\r\n const handleChange = (event, active) => {\r\n setActive(active);\r\n };\r\n const handleChangeIndex = index => {\r\n setActive(index);\r\n };\r\n const classes = useStyles();\r\n const { tabs, direction, color, horizontal, alignCenter } = props;\r\n const flexContainerClasses = classNames({\r\n [classes.flexContainer]: true,\r\n [classes.horizontalDisplay]: horizontal !== undefined\r\n });\r\n const tabButtons = (\r\n \r\n
\r\n Notifications Style
\r\n\r\n
\r\n
\r\n
\r\n
\r\n
\r\n \r\n
\r\n Notification states
\r\n\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n showNotification(\"tl\")}\r\n >\r\n Top Left\r\n \r\n setTL(false)}\r\n close\r\n />\r\n \r\n \r\n showNotification(\"tc\")}\r\n >\r\n Top Center\r\n \r\n setTC(false)}\r\n close\r\n />\r\n \r\n \r\n showNotification(\"tr\")}\r\n >\r\n Top Right\r\n \r\n setTR(false)}\r\n close\r\n />\r\n \r\n \r\n \r\n \r\n showNotification(\"bl\")}\r\n >\r\n Bottom Left\r\n \r\n setBL(false)}\r\n close\r\n />\r\n \r\n \r\n showNotification(\"bc\")}\r\n >\r\n Bottom Center\r\n \r\n setBC(false)}\r\n close\r\n />\r\n \r\n \r\n showNotification(\"br\")}\r\n >\r\n Bottom Right\r\n \r\n setBR(false)}\r\n close\r\n />\r\n \r\n \r\n \r\n \r\n \r\n
\r\n \r\n
\r\n \r\n Notifications Places\r\n
\r\n\r\n Click to view notifications\r\n
\r\nModal
\r\nModal title
\r\n \r\n\r\n Far far away, behind the word mountains, far from the\r\n countries Vokalia and Consonantia, there live the\r\n blind texts. Separated they live in Bookmarksgrove\r\n right at the coast of the Semantics, a large language\r\n ocean. A small river named Duden flows by their place\r\n and supplies it with the necessary regelialia. It is a\r\n paradisematic country, in which roasted parts of\r\n sentences fly into your mouth. Even the all-powerful\r\n Pointing has no control about the blind texts it is an\r\n almost unorthographic life One day however a small\r\n line of blind text by the name of Lorem Ipsum decided\r\n to leave for the far World of Grammar.\r\n
\r\n \r\nNotice Modal
\r\n \r\n\r\n If you have more questions, don{\"'\"}t hesitate to\r\n contact us or send us a tweet @creativetim. We{\"'\"}\r\n re here to help!\r\n
\r\n \r\nAre you sure you want to do this?
\r\n \r\n\r\n \r\n {tabs.map((prop, key) => {\r\n return (\r\n
\r\n );\r\n return horizontal !== undefined ? (\r\n \r\n {prop.tabContent}\r\n
\r\n );\r\n })}\r\n \r\n \r\n {tabButtons}\r\n {tabContent}\r\n
\r\n );\r\n}\r\n\r\nNavPills.defaultProps = {\r\n active: 0,\r\n color: \"primary\"\r\n};\r\n\r\nNavPills.propTypes = {\r\n // index of the default active pill\r\n active: PropTypes.number,\r\n tabs: PropTypes.arrayOf(\r\n PropTypes.shape({\r\n tabButton: PropTypes.string,\r\n tabIcon: PropTypes.object,\r\n tabContent: PropTypes.node\r\n })\r\n ).isRequired,\r\n color: PropTypes.oneOf([\r\n \"primary\",\r\n \"warning\",\r\n \"danger\",\r\n \"success\",\r\n \"info\",\r\n \"rose\"\r\n ]),\r\n direction: PropTypes.string,\r\n horizontal: PropTypes.shape({\r\n tabsGrid: PropTypes.object,\r\n contentGrid: PropTypes.object\r\n }),\r\n alignCenter: PropTypes.bool\r\n};\r\n","import {\r\n primaryColor,\r\n grayColor\r\n} from \"assets/jss/material-dashboard-pro-react.js\";\r\n\r\nconst accordionStyle = theme => ({\r\n root: {\r\n flexGrow: 1,\r\n marginBottom: \"20px\"\r\n },\r\n expansionPanel: {\r\n boxShadow: \"none\",\r\n \"&:before\": {\r\n display: \"none !important\"\r\n }\r\n },\r\n expansionPanelExpanded: {\r\n margin: \"0 !important\"\r\n },\r\n expansionPanelSummary: {\r\n minHeight: \"auto !important\",\r\n backgroundColor: \"transparent\",\r\n borderBottom: \"1px solid \" + grayColor[5],\r\n padding: \"25px 10px 5px 0px\",\r\n borderTopLeftRadius: \"3px\",\r\n borderTopRightRadius: \"3px\",\r\n color: grayColor[2],\r\n \"&:hover\": {\r\n color: primaryColor[0]\r\n }\r\n },\r\n expansionPanelSummaryExpaned: {\r\n color: primaryColor[0],\r\n \"& $expansionPanelSummaryExpandIcon\": {\r\n [theme.breakpoints.up(\"md\")]: {\r\n top: \"auto !important\"\r\n },\r\n transform: \"rotate(180deg)\",\r\n [theme.breakpoints.down(\"sm\")]: {\r\n top: \"10px !important\"\r\n }\r\n }\r\n },\r\n expansionPanelSummaryContent: {\r\n margin: \"0 !important\"\r\n },\r\n expansionPanelSummaryExpandIcon: {\r\n [theme.breakpoints.up(\"md\")]: {\r\n top: \"auto !important\"\r\n },\r\n transform: \"rotate(0deg)\",\r\n color: \"inherit\",\r\n position: \"absolute\",\r\n right: \"20px\",\r\n [theme.breakpoints.down(\"sm\")]: {\r\n top: \"10px !important\"\r\n }\r\n },\r\n expansionPanelSummaryExpandIconExpanded: {},\r\n title: {\r\n fontSize: \"15px\",\r\n fontWeight: \"bolder\",\r\n marginTop: \"0\",\r\n marginBottom: \"0\",\r\n color: \"inherit\"\r\n },\r\n expansionPanelDetails: {\r\n padding: \"15px 0px 5px\"\r\n }\r\n});\r\n\r\nexport default accordionStyle;\r\n","import React from \"react\";\r\nimport PropTypes from \"prop-types\";\r\n\r\n// @material-ui/core components\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport ExpansionPanel from \"@material-ui/core/ExpansionPanel\";\r\nimport ExpansionPanelSummary from \"@material-ui/core/ExpansionPanelSummary\";\r\nimport ExpansionPanelDetails from \"@material-ui/core/ExpansionPanelDetails\";\r\n\r\n// @material-ui/icons\r\nimport ExpandMore from \"@material-ui/icons/ExpandMore\";\r\n\r\nimport styles from \"assets/jss/material-dashboard-pro-react/components/accordionStyle.js\";\r\n\r\nconst useStyles = makeStyles(styles);\r\n\r\nexport default function Accordion(props) {\r\n const [active, setActive] = React.useState(props.active);\r\n const handleChange = panel => (event, expanded) => {\r\n setActive(expanded ? panel : -1);\r\n };\r\n const classes = useStyles();\r\n const { collapses } = props;\r\n return (\r\n \r\n {collapses.map((prop, key) => {\r\n return (\r\n \r\n \r\n {prop.content}\r\n \r\n \r\n );\r\n })}\r\n
\r\n );\r\n}\r\n\r\nAccordion.defaultProps = {\r\n active: -1\r\n};\r\n\r\nAccordion.propTypes = {\r\n // index of the default active collapse\r\n active: PropTypes.number,\r\n collapses: PropTypes.arrayOf(\r\n PropTypes.shape({\r\n title: PropTypes.string,\r\n content: PropTypes.node\r\n })\r\n ).isRequired\r\n};\r\n","import React from \"react\";\r\n// @material-ui/core components\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\n\r\n// @material-ui/icons\r\nimport Dashboard from \"@material-ui/icons/Dashboard\";\r\nimport Schedule from \"@material-ui/icons/Schedule\";\r\nimport Info from \"@material-ui/icons/Info\";\r\nimport LocationOn from \"@material-ui/icons/LocationOn\";\r\nimport Gavel from \"@material-ui/icons/Gavel\";\r\nimport HelpOutline from \"@material-ui/icons/HelpOutline\";\r\n\r\n// core components\r\nimport GridContainer from \"components/Grid/GridContainer.js\";\r\nimport GridItem from \"components/Grid/GridItem.js\";\r\nimport NavPills from \"components/NavPills/NavPills.js\";\r\nimport Accordion from \"components/Accordion/Accordion.js\";\r\nimport Card from \"components/Card/Card.js\";\r\nimport CardHeader from \"components/Card/CardHeader.js\";\r\nimport CardBody from \"components/Card/CardBody.js\";\r\n\r\nimport { cardTitle } from \"assets/jss/material-dashboard-pro-react.js\";\r\n\r\nconst styles = {\r\n cardTitle,\r\n pageSubcategoriesTitle: {\r\n color: \"#3C4858\",\r\n textDecoration: \"none\",\r\n textAlign: \"center\"\r\n },\r\n cardCategory: {\r\n margin: \"0\",\r\n color: \"#999999\"\r\n }\r\n};\r\n\r\nconst useStyles = makeStyles(styles);\r\n\r\nexport default function Panels() {\r\n const classes = useStyles();\r\n return (\r\n {prop.title}
\r\n \r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n
\r\n
\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n
\r\n
\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n
\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n\r\n \r\n \r\n \r\n Collaboratively administrate empowered markets via\r\n plug-and-play networks. Dynamically procrastinate B2C\r\n users after installed base benefits.\r\n
\r\n
\r\n Dramatically visualize customer directed convergence\r\n without revolutionary ROI.\r\n \r\n \r\n )\r\n },\r\n {\r\n tabButton: \"Location\",\r\n tabIcon: LocationOn,\r\n tabContent: (\r\n \r\n \r\n \r\n \r\n Efficiently unleash cross-media information without\r\n cross-media value. Quickly maximize timely deliverables\r\n for real-time schemas.\r\n
\r\n
\r\n Dramatically maintain clicks-and-mortar solutions without\r\n functional solutions.\r\n \r\n \r\n )\r\n },\r\n {\r\n tabButton: \"Legal Info\",\r\n tabIcon: Gavel,\r\n tabContent: (\r\n \r\n \r\n \r\n \r\n Completely synergize resource taxing relationships via\r\n premier niche markets. Professionally cultivate one-to-one\r\n customer service with robust ideas.\r\n
\r\n
\r\n Dynamically innovate resource-leveling customer service\r\n for state of the art customer service.\r\n \r\n \r\n )\r\n },\r\n {\r\n tabButton: \"Help Center\",\r\n tabIcon: HelpOutline,\r\n tabContent: (\r\n \r\n \r\n \r\n \r\n From the seamless transition of glass and metal to the\r\n streamlined profile, every detail was carefully considered\r\n to enhance your experience. So while its display is\r\n larger, the phone feels just right.\r\n
\r\n
\r\n Another Text. The first thing you notice when you hold the\r\n phone is how great it feels in your hand. The cover glass\r\n curves down around the sides to meet the anodized aluminum\r\n enclosure in a remarkable, simplified design.\r\n \r\n \r\n )\r\n }\r\n ]}\r\n />\r\n \r\n \r\n
\r\n );\r\n}\r\n","import {\r\n container,\r\n defaultFont,\r\n cardTitle,\r\n roseColor,\r\n whiteColor,\r\n grayColor,\r\n hexToRgb\r\n} from \"assets/jss/material-dashboard-pro-react.js\";\r\n\r\nconst pricingPageStyle = theme => ({\r\n container: {\r\n ...container,\r\n zIndex: \"4\",\r\n [theme.breakpoints.down(\"sm\")]: {\r\n paddingBottom: \"100px\"\r\n }\r\n },\r\n title: {\r\n ...defaultFont,\r\n color: whiteColor,\r\n marginTop: \"5vh\",\r\n marginBottom: \"30px\",\r\n textAlign: \"center\"\r\n },\r\n description: {\r\n fontSize: \"18px\",\r\n color: whiteColor,\r\n textAlign: \"center\"\r\n },\r\n cardTitleWhite: {\r\n ...cardTitle,\r\n color: whiteColor + \" !important\"\r\n },\r\n cardCategory: {\r\n color: grayColor[0],\r\n marginTop: \"10px\"\r\n },\r\n cardCategoryWhite: {\r\n color: whiteColor,\r\n marginTop: \"10px\"\r\n },\r\n icon: {\r\n color: \"rgba(\" + hexToRgb(whiteColor) + \", 0.76)\",\r\n margin: \"10px auto 0\",\r\n width: \"130px\",\r\n height: \"130px\",\r\n border: \"1px solid \" + grayColor[11],\r\n borderRadius: \"50%\",\r\n lineHeight: \"174px\",\r\n \"& svg\": {\r\n width: \"55px\",\r\n height: \"55px\"\r\n },\r\n \"& .fab,& .fas,& .far,& .fal,& .material-icons\": {\r\n width: \"55px\",\r\n fontSize: \"55px\"\r\n }\r\n },\r\n iconWhite: {\r\n color: whiteColor\r\n },\r\n iconRose: {\r\n color: roseColor[0]\r\n },\r\n marginTop30: {\r\n marginTop: \"30px\"\r\n }\r\n});\r\n\r\nexport default pricingPageStyle;\r\n","import React from \"react\";\r\n\r\n// @material-ui/core components\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport Icon from \"@material-ui/core/Icon\";\r\n\r\n// @material-ui/icons\r\n// import Weekend from \"@material-ui/icons/Weekend\";\r\nimport Home from \"@material-ui/icons/Home\";\r\nimport Business from \"@material-ui/icons/Business\";\r\nimport AccountBalance from \"@material-ui/icons/AccountBalance\";\r\n\r\n// core components\r\nimport GridContainer from \"components/Grid/GridContainer.js\";\r\nimport GridItem from \"components/Grid/GridItem.js\";\r\nimport Button from \"components/CustomButtons/Button.js\";\r\nimport Card from \"components/Card/Card.js\";\r\nimport CardBody from \"components/Card/CardBody.js\";\r\n\r\nimport styles from \"assets/jss/material-dashboard-pro-react/views/pricingPageStyle.js\";\r\n\r\nconst useStyles = makeStyles(styles);\r\n\r\nexport default function PricingPage() {\r\n const classes = useStyles();\r\n return (\r\n \r\n Navigation Pills - Horizontal Tabs\r\n
\r\n\r\n Collaboratively administrate empowered markets via\r\n plug-and-play networks. Dynamically procrastinate B2C\r\n users after installed base benefits.\r\n
\r\n\r\n
\r\n Dramatically visualize customer directed convergence\r\n without revolutionary ROI. Collaboratively\r\n administrate empowered markets via plug-and-play\r\n networks. Dynamically procrastinate B2C users after\r\n installed base benefits.\r\n
\r\n\r\n
This is very nice.
\r\n \r\n )\r\n },\r\n {\r\n tabButton: \"Settings\",\r\n tabContent: (\r\n \r\n\r\n Efficiently unleash cross-media information without\r\n cross-media value. Quickly maximize timely\r\n deliverables for real-time schemas.\r\n
\r\n\r\n
\r\n Dramatically maintain clicks-and-mortar solutions\r\n without functional solutions.\r\n
\r\n \r\n )\r\n },\r\n {\r\n tabButton: \"Options\",\r\n tabContent: (\r\n \r\n\r\n Completely synergize resource taxing relationships via\r\n premier niche markets. Professionally cultivate\r\n one-to-one customer service with robust ideas.{\" \"}\r\n
\r\n\r\n
\r\n Dynamically innovate resource-leveling customer\r\n service for state of the art customer service.\r\n
\r\n \r\n )\r\n }\r\n ]}\r\n />\r\n\r\n Navigation Pills - Vertical Tabs\r\n
\r\n\r\n Collaboratively administrate empowered markets via\r\n plug-and-play networks. Dynamically procrastinate B2C\r\n users after installed base benefits.\r\n
\r\n\r\n
\r\n Dramatically visualize customer directed convergence\r\n without revolutionary ROI. Collaboratively\r\n administrate empowered markets via plug-and-play\r\n networks. Dynamically procrastinate B2C users after\r\n installed base benefits.\r\n
\r\n\r\n
This is very nice.
\r\n \r\n )\r\n },\r\n {\r\n tabButton: \"Settings\",\r\n tabContent: (\r\n \r\n\r\n Efficiently unleash cross-media information without\r\n cross-media value. Quickly maximize timely\r\n deliverables for real-time schemas.\r\n
\r\n\r\n
\r\n Dramatically maintain clicks-and-mortar solutions\r\n without functional solutions.\r\n
\r\n \r\n )\r\n },\r\n {\r\n tabButton: \"Options\",\r\n tabContent: (\r\n \r\n\r\n Completely synergize resource taxing relationships via\r\n premier niche markets. Professionally cultivate\r\n one-to-one customer service with robust ideas.{\" \"}\r\n
\r\n\r\n
\r\n Dynamically innovate resource-leveling customer\r\n service for state of the art customer service.\r\n
\r\n \r\n )\r\n }\r\n ]}\r\n />\r\nCollapsible Accordion
\r\n\r\n Navigation Pills Icons - Vertical Tabs\r\n
\r\n\r\n Collaboratively administrate empowered markets via\r\n plug-and-play networks. Dynamically procrastinate B2C\r\n users after installed base benefits.\r\n
\r\n\r\n
\r\n Dramatically visualize customer directed convergence\r\n without revolutionary ROI. Collaboratively\r\n administrate empowered markets via plug-and-play\r\n networks. Dynamically procrastinate B2C users after\r\n installed base benefits.\r\n
\r\n\r\n
\r\n Dramatically visualize customer directed convergence\r\n without revolutionary ROI. Collaboratively\r\n administrate empowered markets via plug-and-play\r\n networks. Dynamically procrastinate B2C users after\r\n installed base benefits.\r\n
\r\n \r\n )\r\n },\r\n {\r\n tabButton: \"Schedule\",\r\n tabIcon: Schedule,\r\n tabContent: (\r\n \r\n\r\n Efficiently unleash cross-media information without\r\n cross-media value. Quickly maximize timely\r\n deliverables for real-time schemas.\r\n
\r\n\r\n
\r\n Dramatically maintain clicks-and-mortar solutions\r\n without functional solutions. Dramatically visualize\r\n customer directed convergence without revolutionary\r\n ROI. Collaboratively administrate empowered markets\r\n via plug-and-play networks. Dynamically procrastinate\r\n B2C users after installed base benefits.\r\n
\r\n \r\n )\r\n }\r\n ]}\r\n />\r\nPage Subcategories
\r\n\r\n
\r\n Description about product\r\n
\r\n\r\n More information here\r\n
\r\n\r\n
\r\n Dramatically visualize customer directed convergence\r\n without revolutionary ROI.\r\n
\r\n Location of the product\r\n
\r\n\r\n More information here\r\n
\r\n\r\n
\r\n Dramatically maintain clicks-and-mortar solutions without\r\n functional solutions.\r\n
\r\n Legal info of the product\r\n
\r\n\r\n More information here\r\n
\r\n\r\n
\r\n Dynamically innovate resource-leveling customer service\r\n for state of the art customer service.\r\n
Help center
\r\n\r\n More information here\r\n
\r\n\r\n
\r\n Another Text. The first thing you notice when you hold the\r\n phone is how great it feels in your hand. The cover glass\r\n curves down around the sides to meet the anodized aluminum\r\n enclosure in a remarkable, simplified design.\r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n FREE\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n $69\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n $159\r\n \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n}\r\n","import {\r\n primaryColor,\r\n warningColor,\r\n dangerColor,\r\n successColor,\r\n infoColor,\r\n roseColor,\r\n grayColor,\r\n whiteColor\r\n} from \"assets/jss/material-dashboard-pro-react.js\";\r\n\r\nconst badgeStyle = {\r\n badge: {\r\n borderRadius: \"12px\",\r\n padding: \"5px 12px\",\r\n textTransform: \"uppercase\",\r\n fontSize: \"10px\",\r\n fontWeight: \"700\",\r\n lineHeight: \"1\",\r\n color: whiteColor,\r\n textAlign: \"center\",\r\n verticalAlign: \"baseline\",\r\n display: \"inline-block\"\r\n },\r\n primary: {\r\n backgroundColor: primaryColor[0]\r\n },\r\n warning: {\r\n backgroundColor: warningColor[0]\r\n },\r\n danger: {\r\n backgroundColor: dangerColor[0]\r\n },\r\n success: {\r\n backgroundColor: successColor[0]\r\n },\r\n info: {\r\n backgroundColor: infoColor[0]\r\n },\r\n rose: {\r\n backgroundColor: roseColor[0]\r\n },\r\n gray: {\r\n backgroundColor: grayColor[0]\r\n }\r\n};\r\n\r\nexport default badgeStyle;\r\n","import React from \"react\";\r\nimport PropTypes from \"prop-types\";\r\n\r\n// @material-ui/core components\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\n\r\nimport styles from \"assets/jss/material-dashboard-pro-react/components/badgeStyle.js\";\r\n\r\nconst useStyles = makeStyles(styles);\r\n\r\nexport default function Badge(props) {\r\n const { color, children } = props;\r\n const classes = useStyles();\r\n return (\r\n {children}\r\n );\r\n}\r\n\r\nBadge.propTypes = {\r\n color: PropTypes.oneOf([\r\n \"primary\",\r\n \"warning\",\r\n \"danger\",\r\n \"success\",\r\n \"info\",\r\n \"rose\",\r\n \"gray\"\r\n ]),\r\n children: PropTypes.node\r\n};\r\n","import {\r\n infoColor,\r\n primaryColor,\r\n successColor,\r\n dangerColor,\r\n warningColor,\r\n whiteColor,\r\n blackColor,\r\n grayColor,\r\n hexToRgb\r\n} from \"assets/jss/material-dashboard-pro-react.js\";\r\nconst timelineStyle = theme => ({\r\n timeline: {\r\n [theme.breakpoints.down(\"sm\")]: {\r\n \"&:before\": {\r\n left: \"5% !important\"\r\n }\r\n },\r\n listStyle: \"none\",\r\n padding: \"20px 0 20px\",\r\n position: \"relative\",\r\n marginTop: \"30px\",\r\n \"&:before\": {\r\n top: \"50px\",\r\n bottom: \"0\",\r\n position: \"absolute\",\r\n content: '\" \"',\r\n width: \"3px\",\r\n backgroundColor: grayColor[11],\r\n left: \"50%\",\r\n marginLeft: \"-1px\"\r\n }\r\n },\r\n timelineSimple: {\r\n marginTop: \"30px\",\r\n padding: \"0 0 20px\",\r\n \"&:before\": {\r\n left: \"5%\"\r\n }\r\n },\r\n item: {\r\n marginBottom: \"20px\",\r\n position: \"relative\",\r\n \"&:before,&:after\": {\r\n content: '\" \"',\r\n display: \"table\"\r\n },\r\n \"&:after\": {\r\n clear: \"both\"\r\n }\r\n },\r\n timelineBadge: {\r\n [theme.breakpoints.down(\"sm\")]: {\r\n left: \"5% !important\"\r\n },\r\n color: whiteColor,\r\n width: \"50px\",\r\n height: \"50px\",\r\n lineHeight: \"51px\",\r\n fontSize: \"1.4em\",\r\n textAlign: \"center\",\r\n position: \"absolute\",\r\n top: \"16px\",\r\n left: \"50%\",\r\n marginLeft: \"-24px\",\r\n zIndex: \"100\",\r\n borderTopRightRadius: \"50%\",\r\n borderTopLeftRadius: \"50%\",\r\n borderBottomRightRadius: \"50%\",\r\n borderBottomLeftRadius: \"50%\"\r\n },\r\n timelineSimpleBadge: {\r\n left: \"5%\"\r\n },\r\n info: {\r\n backgroundColor: infoColor[0],\r\n boxShadow:\r\n \"0 4px 20px 0px rgba(\" +\r\n hexToRgb(blackColor) +\r\n \", 0.14), 0 7px 10px -5px rgba(\" +\r\n hexToRgb(infoColor[0]) +\r\n \", 0.4)\"\r\n },\r\n success: {\r\n backgroundColor: successColor[0],\r\n boxShadow:\r\n \"0 4px 20px 0px rgba(\" +\r\n hexToRgb(blackColor) +\r\n \", 0.14), 0 7px 10px -5px rgba(\" +\r\n hexToRgb(successColor[0]) +\r\n \", 0.4)\"\r\n },\r\n danger: {\r\n backgroundColor: dangerColor[0],\r\n boxShadow:\r\n \"0 4px 20px 0px rgba(\" +\r\n hexToRgb(blackColor) +\r\n \", 0.14), 0 7px 10px -5px rgba(\" +\r\n hexToRgb(dangerColor[0]) +\r\n \", 0.4)\"\r\n },\r\n warning: {\r\n backgroundColor: warningColor[0],\r\n boxShadow:\r\n \"0 4px 20px 0px rgba(\" +\r\n hexToRgb(blackColor) +\r\n \", 0.14), 0 7px 10px -5px rgba(\" +\r\n hexToRgb(warningColor[0]) +\r\n \", 0.4)\"\r\n },\r\n primary: {\r\n backgroundColor: primaryColor[0],\r\n boxShadow:\r\n \"0 4px 20px 0px rgba(\" +\r\n hexToRgb(blackColor) +\r\n \", 0.14), 0 7px 10px -5px rgba(\" +\r\n hexToRgb(primaryColor[0]) +\r\n \", 0.4)\"\r\n },\r\n badgeIcon: {\r\n width: \"24px\",\r\n height: \"51px\"\r\n },\r\n timelinePanel: {\r\n [theme.breakpoints.down(\"sm\")]: {\r\n float: \"right !important\",\r\n width: \"86% !important\",\r\n \"&:before\": {\r\n borderLeftWidth: \"0 !important\",\r\n borderRightWidth: \"15px !important\",\r\n left: \"-15px !important\",\r\n right: \"auto !important\"\r\n },\r\n \"&:after\": {\r\n borderLeftWidth: \"0 !important\",\r\n borderRightWidth: \"14px !important\",\r\n left: \"-14px !important\",\r\n right: \"auto !important\"\r\n }\r\n },\r\n width: \"45%\",\r\n float: \"left\",\r\n padding: \"20px\",\r\n marginBottom: \"20px\",\r\n position: \"relative\",\r\n boxShadow: \"0 1px 4px 0 rgba(\" + hexToRgb(blackColor) + \", 0.14)\",\r\n borderRadius: \"6px\",\r\n color: \"rgba(\" + hexToRgb(blackColor) + \", 0.87)\",\r\n background: whiteColor,\r\n \"&:before\": {\r\n position: \"absolute\",\r\n top: \"26px\",\r\n right: \"-15px\",\r\n display: \"inline-block\",\r\n borderTop: \"15px solid transparent\",\r\n borderLeft: \"15px solid \" + grayColor[10],\r\n borderRight: \"0 solid \" + grayColor[10],\r\n borderBottom: \"15px solid transparent\",\r\n content: '\" \"'\r\n },\r\n \"&:after\": {\r\n position: \"absolute\",\r\n top: \"27px\",\r\n right: \"-14px\",\r\n display: \"inline-block\",\r\n borderTop: \"14px solid transparent\",\r\n borderLeft: \"14px solid \" + whiteColor,\r\n borderRight: \"0 solid \" + whiteColor,\r\n borderBottom: \"14px solid transparent\",\r\n content: '\" \"'\r\n }\r\n },\r\n timelineSimplePanel: {\r\n width: \"86%\"\r\n },\r\n timelinePanelInverted: {\r\n [theme.breakpoints.up(\"sm\")]: {\r\n float: \"right\",\r\n backgroundColor: whiteColor,\r\n \"&:before\": {\r\n borderLeftWidth: \"0\",\r\n borderRightWidth: \"15px\",\r\n left: \"-15px\",\r\n right: \"auto\"\r\n },\r\n \"&:after\": {\r\n borderLeftWidth: \"0\",\r\n borderRightWidth: \"14px\",\r\n left: \"-14px\",\r\n right: \"auto\"\r\n }\r\n }\r\n },\r\n timelineHeading: {\r\n marginBottom: \"15px\"\r\n },\r\n timelineBody: {\r\n fontSize: \"14px\",\r\n lineHeight: \"21px\"\r\n },\r\n timelineFooter: {\r\n zIndex: \"1000\",\r\n position: \"relative\",\r\n float: \"left\"\r\n },\r\n footerTitle: {\r\n color: grayColor[7],\r\n fontWeight: \"400\",\r\n margin: \"10px 0px 0px\"\r\n },\r\n footerLine: {\r\n marginTop: \"10px\",\r\n marginBottom: \"5px\"\r\n }\r\n});\r\n\r\nexport default timelineStyle;\r\n","import React from \"react\";\r\nimport cx from \"classnames\";\r\nimport PropTypes from \"prop-types\";\r\n\r\n// @material-ui/core components\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\n\r\n// core components\r\nimport Badge from \"components/Badge/Badge.js\";\r\n\r\nimport styles from \"assets/jss/material-dashboard-pro-react/components/timelineStyle.js\";\r\n\r\nconst useStyles = makeStyles(styles);\r\n\r\nexport default function Timeline(props) {\r\n const classes = useStyles();\r\n const { stories, simple } = props;\r\n const timelineClass =\r\n classes.timeline +\r\n \" \" +\r\n cx({\r\n [classes.timelineSimple]: simple\r\n });\r\n return (\r\n Pick the best plan for you
\r\n\r\n You have Free Unlimited Updates and Premium Support on each package.\r\n
\r\nFreelancer
\r\n\r\n weekend \r\n
\r\n \r\n This is good if your company size is between 2 and 10 Persons.\r\n
\r\n \r\nSMALL COMPANY
\r\n\r\n
\r\n \r\n $29\r\n
\r\n\r\n This is good if your company size is between 2 and 10 Persons.\r\n
\r\n \r\nMEDIUM COMPANY
\r\n\r\n
\r\n \r\n This is good if your company size is between 11 and 99 Persons.\r\n
\r\n \r\nENTERPRISE
\r\n\r\n
\r\n \r\n This is good if your company size is 99+ persons.\r\n
\r\n \r\n- \r\n {stories.map((prop, key) => {\r\n const panelClasses =\r\n classes.timelinePanel +\r\n \" \" +\r\n cx({\r\n [classes.timelinePanelInverted]: prop.inverted || simple,\r\n [classes.timelineSimplePanel]: simple\r\n });\r\n const timelineBadgeClasses =\r\n classes.timelineBadge +\r\n \" \" +\r\n classes[prop.badgeColor] +\r\n \" \" +\r\n cx({\r\n [classes.timelineSimpleBadge]: simple\r\n });\r\n return (\r\n
- \r\n {prop.badgeIcon ? (\r\n \r\n\r\n ) : null}\r\n
\r\n \r\n {prop.title ? (\r\n\r\n\r\n\r\n ) : null}\r\n{prop.title} \r\n{prop.body}\r\n {prop.footerTitle ? (\r\n{prop.footerTitle}
\r\n ) : null}\r\n {prop.footer ?
: null}\r\n {prop.footer ? (\r\n{prop.footer}\r\n ) : null}\r\n \r\n );\r\n })}\r\n
{title}
: null}\r\n {prop.tabContent}
;\r\n }\r\n return null;\r\n })}\r\n \r\n {children}\r\n
\r\n );\r\n}\r\n\r\nCardText.propTypes = {\r\n className: PropTypes.string,\r\n color: PropTypes.oneOf([\r\n \"warning\",\r\n \"success\",\r\n \"danger\",\r\n \"info\",\r\n \"primary\",\r\n \"rose\"\r\n ]),\r\n children: PropTypes.node\r\n};\r\n","import React from \"react\";\r\n// @material-ui/core components\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport Icon from \"@material-ui/core/Icon\";\r\n// @material-ui/icons\r\n// import Weekend from \"@material-ui/icons/Weekend\";\r\nimport Home from \"@material-ui/icons/Home\";\r\nimport BugReport from \"@material-ui/icons/BugReport\";\r\nimport Code from \"@material-ui/icons/Code\";\r\nimport Cloud from \"@material-ui/icons/Cloud\";\r\nimport FormatQuote from \"@material-ui/icons/FormatQuote\";\r\n\r\n// core components\r\nimport GridContainer from \"components/Grid/GridContainer.js\";\r\nimport GridItem from \"components/Grid/GridItem.js\";\r\nimport Table from \"components/Table/Table.js\";\r\nimport Timeline from \"components/Timeline/Timeline.js\";\r\nimport Button from \"components/CustomButtons/Button.js\";\r\nimport CustomTabs from \"components/CustomTabs/CustomTabs.js\";\r\nimport Tasks from \"components/Tasks/Tasks.js\";\r\nimport Card from \"components/Card/Card.js\";\r\nimport CardHeader from \"components/Card/CardHeader.js\";\r\nimport CardAvatar from \"components/Card/CardAvatar.js\";\r\nimport CardText from \"components/Card/CardText.js\";\r\nimport CardBody from \"components/Card/CardBody.js\";\r\nimport CardFooter from \"components/Card/CardFooter.js\";\r\n\r\nimport {\r\n rtlStories,\r\n rtlBugs,\r\n rtlWebsite,\r\n rtlServer\r\n} from \"variables/general.js\";\r\n\r\nimport image from \"assets/img/faces/card-profile1-square.jpg\";\r\n\r\nimport {\r\n cardTitle,\r\n roseColor\r\n} from \"assets/jss/material-dashboard-pro-react.js\";\r\n\r\nconst styles = {\r\n cardTitle,\r\n cardTitleWhite: {\r\n ...cardTitle,\r\n color: \"#FFFFFF\",\r\n marginTop: \"0\"\r\n },\r\n cardCategoryWhite: {\r\n margin: \"0\",\r\n color: \"rgba(255, 255, 255, 0.8)\",\r\n fontSize: \".875rem\"\r\n },\r\n cardCategory: {\r\n color: \"#999999\",\r\n marginTop: \"10px\"\r\n },\r\n icon: {\r\n color: \"#333333\",\r\n margin: \"10px auto 0\",\r\n width: \"130px\",\r\n height: \"130px\",\r\n border: \"1px solid #E5E5E5\",\r\n borderRadius: \"50%\",\r\n lineHeight: \"174px\",\r\n \"& svg\": {\r\n width: \"55px\",\r\n height: \"55px\"\r\n },\r\n \"& .fab,& .fas,& .far,& .fal,& .material-icons\": {\r\n width: \"55px\",\r\n fontSize: \"55px\"\r\n }\r\n },\r\n iconRose: {\r\n color: roseColor\r\n },\r\n marginTop30: {\r\n marginTop: \"30px\"\r\n },\r\n testimonialIcon: {\r\n marginTop: \"30px\",\r\n \"& svg\": {\r\n width: \"40px\",\r\n height: \"40px\"\r\n }\r\n },\r\n cardTestimonialDescription: {\r\n fontStyle: \"italic\",\r\n color: \"#999999\"\r\n }\r\n};\r\n\r\nconst useStyles = makeStyles(styles);\r\n\r\nexport default function RTLSupport() {\r\n const classes = useStyles();\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n e.preventDefault()}>\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n}\r\n","/*eslint-disable*/\r\nimport React from \"react\";\r\nimport {\r\n useTable,\r\n useFilters,\r\n useAsyncDebounce,\r\n useSortBy,\r\n usePagination\r\n} from \"react-table\";\r\nimport classnames from \"classnames\";\r\n// A great library for fuzzy filtering/sorting items\r\nimport matchSorter from \"match-sorter\";\r\n// @material-ui/core components\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport FormControl from \"@material-ui/core/FormControl\";\r\nimport FormControlLabel from \"@material-ui/core/FormControlLabel\";\r\nimport InputLabel from \"@material-ui/core/InputLabel\";\r\nimport Switch from \"@material-ui/core/Switch\";\r\nimport Select from \"@material-ui/core/Select\";\r\nimport MenuItem from \"@material-ui/core/MenuItem\";\r\n// core components\r\nimport CustomInput from \"components/CustomInput/CustomInput.js\";\r\nimport GridContainer from \"components/Grid/GridContainer.js\";\r\nimport GridItem from \"components/Grid/GridItem.js\";\r\n\r\nimport styles from \"assets/jss/material-dashboard-pro-react/customSelectStyle.js\";\r\n\r\nconst newStyles = {\r\n ...styles,\r\n formControlMargins: {\r\n margin: \"3px 0 !important\"\r\n },\r\n gridContainer: {\r\n justifyContent: \"center\"\r\n }\r\n};\r\n\r\nconst useStyles = makeStyles(newStyles);\r\n\r\n// Define a default UI for filtering\r\nfunction DefaultColumnFilter({\r\n column: { filterValue, preFilteredRows, setFilter }\r\n}) {\r\n const count = preFilteredRows.length;\r\n\r\n return (\r\n لتكاليف يبق
\r\n\r\n بالإنزال وفي. خيار ومضى العمليات تم ذلك, تم معقل مرمى\r\n
\r\nجيوب سليمان، الإنزال
\r\n\r\n
\r\n \r\n $29\r\n
\r\n\r\n الأجل المتساقطة، من. عرض بسبب وأكثرها الاندونيسية بـ.\r\n
\r\n \r\nالمتحدة لتقليعة
\r\n\r\n weekend \r\n
\r\n \r\n قائمة\r\n
\r\n\r\n الأجل المتساقطة، من. عرض بسبب وأكثرها الاندونيسية بـ.\r\n
\r\n \r\n\r\n
\r\n \r\n بعد و وسوء الأحمر, دون عقبت الهادي أم, قد حول قادة حكومة\r\n يتعلّق. أخذ حصدت اوروبا أن, كلا مهمّات اسبوعين التخطيط عل.\r\n وإيطالي الأوروبي و نفس. صفحة احداث أضف ان, هو مرجع نهاية\r\n لهيمنة كما. تم مايو لفشل المدن دول, جعل أن عسكرياً التّحول\r\n استرجاع.\r\n
\r\nأليك طومسون
\r\nأليك طومسون@
\r\n\r\n \r\n \r\n {headerGroups.map(headerGroup => (\r\n
\r\n \r\n
\r\n \r\n );\r\n}\r\n\r\n// Define a custom filter filter function!\r\nfunction filterGreaterThan(rows, id, filterValue) {\r\n return rows.filter(row => {\r\n const rowValue = row.values[id];\r\n return rowValue >= filterValue;\r\n });\r\n}\r\n\r\n// This is an autoRemove method on the filter function that\r\n// when given the new filter value and returns true, the filter\r\n// will be automatically removed. Normally this is just an undefined\r\n// check, but here, we want to remove the filter if it's not a number\r\nfilterGreaterThan.autoRemove = val => typeof val !== \"number\";\r\n\r\nexport default Table;\r\n","import React from \"react\";\r\n\r\n// @material-ui/core components\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\n// @material-ui/icons\r\nimport Assignment from \"@material-ui/icons/Assignment\";\r\nimport Dvr from \"@material-ui/icons/Dvr\";\r\nimport Favorite from \"@material-ui/icons/Favorite\";\r\nimport Close from \"@material-ui/icons/Close\";\r\n// core components\r\nimport GridContainer from \"components/Grid/GridContainer.js\";\r\nimport GridItem from \"components/Grid/GridItem.js\";\r\nimport Button from \"components/CustomButtons/Button.js\";\r\nimport Card from \"components/Card/Card.js\";\r\nimport CardBody from \"components/Card/CardBody.js\";\r\nimport CardIcon from \"components/Card/CardIcon.js\";\r\nimport CardHeader from \"components/Card/CardHeader.js\";\r\nimport ReactTable from \"components/ReactTable/ReactTable.js\";\r\n\r\nimport { dataTable } from \"variables/general.js\";\r\n\r\nimport { cardTitle } from \"assets/jss/material-dashboard-pro-react.js\";\r\n\r\nconst styles = {\r\n cardIconTitle: {\r\n ...cardTitle,\r\n marginTop: \"15px\",\r\n marginBottom: \"0px\"\r\n }\r\n};\r\n\r\nconst useStyles = makeStyles(styles);\r\n\r\nexport default function ReactTables() {\r\n const [data, setData] = React.useState(\r\n dataTable.dataRows.map((prop, key) => {\r\n return {\r\n id: key,\r\n name: prop[0],\r\n position: prop[1],\r\n office: prop[2],\r\n age: prop[3],\r\n actions: (\r\n // we've added some custom button actions\r\n \r\n
\r\n \r\n
\r\n \r\n previousPage()}\r\n disabled={!canPreviousPage}\r\n className=\"-btn\"\r\n >\r\n Previous\r\n \r\n
\r\n \r\n \r\n \r\n \r\n {\r\n gotoPage(event.target.value);\r\n handlePageSelect(event.target.value);\r\n }}\r\n inputProps={{\r\n name: \"pageSelect\",\r\n id: \"page-select\"\r\n }}\r\n >\r\n {pageSelectData.map((prop, key) => {\r\n return (\r\n \r\n Page {key + 1}\r\n \r\n );\r\n })}\r\n \r\n \r\n \r\n \r\n \r\n {\r\n setPageSize(event.target.value);\r\n setNumberOfRows(event.target.value);\r\n }}\r\n inputProps={{\r\n name: \"numberOfRows\",\r\n id: \"number-of-rows\"\r\n }}\r\n >\r\n {numberOfRowsData.map(prop => {\r\n return (\r\n \r\n {prop} rows\r\n \r\n );\r\n })}\r\n \r\n \r\n \r\n \r\n
\r\n \r\n nextPage()}\r\n disabled={!canNextPage}\r\n className=\"-btn\"\r\n >\r\n Next\r\n \r\n
\r\n | \r\n {cell.render(\"Cell\")}\r\n | \r\n );\r\n })}\r\n \r\n );\r\n })}\r\n
\r\n {/* use this button to add a like kind of action */}\r\n {\r\n let obj = data.find(o => o.id === key);\r\n alert(\r\n \"You've clicked LIKE button on \\n{ \\nName: \" +\r\n obj.name +\r\n \", \\nposition: \" +\r\n obj.position +\r\n \", \\noffice: \" +\r\n obj.office +\r\n \", \\nage: \" +\r\n obj.age +\r\n \"\\n}.\"\r\n );\r\n }}\r\n color=\"info\"\r\n className=\"like\"\r\n >\r\n {\r\n let obj = data.find(o => o.id === key);\r\n alert(\r\n \"You've clicked EDIT button on \\n{ \\nName: \" +\r\n obj.name +\r\n \", \\nposition: \" +\r\n obj.position +\r\n \", \\noffice: \" +\r\n obj.office +\r\n \", \\nage: \" +\r\n obj.age +\r\n \"\\n}.\"\r\n );\r\n }}\r\n color=\"warning\"\r\n className=\"edit\"\r\n >\r\n {\r\n var newData = data;\r\n newData.find((o, i) => {\r\n if (o.id === key) {\r\n // here you should add some custom code so you can delete the data\r\n // from this component and from your server as well\r\n newData.splice(i, 1);\r\n return true;\r\n }\r\n return false;\r\n });\r\n setData([...newData]);\r\n }}\r\n color=\"danger\"\r\n className=\"remove\"\r\n >\r\n
\r\n )\r\n };\r\n })\r\n );\r\n const classes = useStyles();\r\n return (\r\n React Table
\r\n\r\n
\r\n );\r\n}\r\n\r\nInfoArea.defaultProps = {\r\n iconColor: \"gray\"\r\n};\r\n\r\nInfoArea.propTypes = {\r\n icon: PropTypes.object.isRequired,\r\n title: PropTypes.string.isRequired,\r\n description: PropTypes.string.isRequired,\r\n iconColor: PropTypes.oneOf([\r\n \"primary\",\r\n \"warning\",\r\n \"danger\",\r\n \"success\",\r\n \"info\",\r\n \"rose\",\r\n \"gray\"\r\n ])\r\n};\r\n","import {\r\n container,\r\n cardTitle,\r\n blackColor,\r\n hexToRgb,\r\n grayColor\r\n} from \"assets/jss/material-dashboard-pro-react.js\";\r\n\r\nimport customCheckboxRadioSwitch from \"assets/jss/material-dashboard-pro-react/customCheckboxRadioSwitch.js\";\r\n\r\nconst registerPageStyle = {\r\n ...customCheckboxRadioSwitch,\r\n cardTitle: {\r\n ...cardTitle,\r\n textAlign: \"center\"\r\n },\r\n container: {\r\n ...container,\r\n position: \"relative\",\r\n zIndex: \"3\"\r\n // paddingTop: \"23vh\"\r\n },\r\n cardSignup: {\r\n borderRadius: \"6px\",\r\n boxShadow:\r\n \"0 16px 24px 2px rgba(\" +\r\n hexToRgb(blackColor) +\r\n \", 0.14), 0 6px 30px 5px rgba(\" +\r\n hexToRgb(blackColor) +\r\n \", 0.12), 0 8px 10px -5px rgba(\" +\r\n hexToRgb(blackColor) +\r\n \", 0.2)\",\r\n marginBottom: \"100px\",\r\n padding: \"40px 0px\",\r\n marginTop: \"15vh\"\r\n },\r\n center: {\r\n textAlign: \"center\"\r\n },\r\n right: {\r\n textAlign: \"right\"\r\n },\r\n left: {\r\n textAlign: \"left\"\r\n },\r\n form: {\r\n padding: \"0 20px\",\r\n position: \"relative\"\r\n },\r\n socialTitle: {\r\n fontSize: \"18px\"\r\n },\r\n inputAdornment: {\r\n marginRight: \"18px\",\r\n position: \"relative\"\r\n },\r\n inputAdornmentIcon: {\r\n color: grayColor[6]\r\n },\r\n customFormControlClasses: {\r\n margin: \"0 12px\"\r\n },\r\n checkboxLabelControl: {\r\n margin: \"0\"\r\n },\r\n checkboxLabel: {\r\n fontSize: \"0.875rem\",\r\n marginLeft: \"6px\",\r\n color: \"rgba(\" + hexToRgb(blackColor) + \", 0.26)\"\r\n }\r\n};\r\n\r\nexport default registerPageStyle;\r\n","import React from \"react\";\r\n\r\n// @material-ui/core components\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport InputAdornment from \"@material-ui/core/InputAdornment\";\r\nimport Checkbox from \"@material-ui/core/Checkbox\";\r\nimport FormControlLabel from \"@material-ui/core/FormControlLabel\";\r\nimport Icon from \"@material-ui/core/Icon\";\r\n\r\n// @material-ui/icons\r\nimport Timeline from \"@material-ui/icons/Timeline\";\r\nimport Code from \"@material-ui/icons/Code\";\r\nimport Group from \"@material-ui/icons/Group\";\r\nimport Face from \"@material-ui/icons/Face\";\r\nimport Email from \"@material-ui/icons/Email\";\r\n// import LockOutline from \"@material-ui/icons/LockOutline\";\r\nimport Check from \"@material-ui/icons/Check\";\r\n\r\n// core components\r\nimport GridContainer from \"components/Grid/GridContainer.js\";\r\nimport GridItem from \"components/Grid/GridItem.js\";\r\nimport Button from \"components/CustomButtons/Button.js\";\r\nimport CustomInput from \"components/CustomInput/CustomInput.js\";\r\nimport InfoArea from \"components/InfoArea/InfoArea.js\";\r\nimport Card from \"components/Card/Card.js\";\r\nimport CardBody from \"components/Card/CardBody.js\";\r\n\r\nimport styles from \"assets/jss/material-dashboard-pro-react/views/registerPageStyle\";\r\n\r\nconst useStyles = makeStyles(styles);\r\n\r\nexport default function RegisterPage() {\r\n const [checked, setChecked] = React.useState([]);\r\n const handleToggle = value => {\r\n const currentIndex = checked.indexOf(value);\r\n const newChecked = [...checked];\r\n\r\n if (currentIndex === -1) {\r\n newChecked.push(value);\r\n } else {\r\n newChecked.splice(currentIndex, 1);\r\n }\r\n setChecked(newChecked);\r\n };\r\n const classes = useStyles();\r\n return (\r\n \r\n
\r\n \r\n
\r\n {title}
\r\n{description}
\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n}\r\n","import {\r\n cardTitle,\r\n successColor,\r\n dangerColor\r\n} from \"assets/jss/material-dashboard-pro-react.js\";\r\nimport customCheckboxRadioSwitch from \"assets/jss/material-dashboard-pro-react/customCheckboxRadioSwitch.js\";\r\n\r\nconst regularFormsStyle = {\r\n ...customCheckboxRadioSwitch,\r\n cardIconTitle: {\r\n ...cardTitle,\r\n marginTop: \"15px\",\r\n marginBottom: \"0px\"\r\n },\r\n staticFormGroup: {\r\n marginLeft: \"0\",\r\n marginRight: \"0\",\r\n paddingBottom: \"10px\",\r\n margin: \"8px 0 0 0\",\r\n position: \"relative\",\r\n \"&:before,&:after\": {\r\n display: \"table\",\r\n content: '\" \"'\r\n },\r\n \"&:after\": {\r\n clear: \"both\"\r\n }\r\n },\r\n staticFormControl: {\r\n marginBottom: \"0\",\r\n paddingTop: \"8px\",\r\n paddingBottom: \"8px\",\r\n minHeight: \"34px\"\r\n },\r\n inputAdornment: {\r\n marginRight: \"8px\",\r\n position: \"relative\"\r\n },\r\n inputAdornmentIconSuccess: {\r\n color: successColor[0] + \"!important\"\r\n },\r\n inputAdornmentIconError: {\r\n color: dangerColor[0] + \"!important\"\r\n }\r\n};\r\n\r\nexport default regularFormsStyle;\r\n","import React from \"react\";\r\n// @material-ui/core components\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport FormLabel from \"@material-ui/core/FormLabel\";\r\nimport FormControlLabel from \"@material-ui/core/FormControlLabel\";\r\nimport InputAdornment from \"@material-ui/core/InputAdornment\";\r\nimport Radio from \"@material-ui/core/Radio\";\r\nimport Checkbox from \"@material-ui/core/Checkbox\";\r\n\r\n// @material-ui/icons\r\nimport MailOutline from \"@material-ui/icons/MailOutline\";\r\nimport Check from \"@material-ui/icons/Check\";\r\nimport Clear from \"@material-ui/icons/Clear\";\r\nimport Contacts from \"@material-ui/icons/Contacts\";\r\nimport FiberManualRecord from \"@material-ui/icons/FiberManualRecord\";\r\n\r\n// core components\r\nimport GridContainer from \"components/Grid/GridContainer.js\";\r\nimport GridItem from \"components/Grid/GridItem.js\";\r\nimport CustomInput from \"components/CustomInput/CustomInput.js\";\r\nimport Button from \"components/CustomButtons/Button.js\";\r\nimport Card from \"components/Card/Card.js\";\r\nimport CardHeader from \"components/Card/CardHeader.js\";\r\nimport CardText from \"components/Card/CardText.js\";\r\nimport CardIcon from \"components/Card/CardIcon.js\";\r\nimport CardBody from \"components/Card/CardBody.js\";\r\n\r\nimport styles from \"assets/jss/material-dashboard-pro-react/views/regularFormsStyle\";\r\n\r\nconst useStyles = makeStyles(styles);\r\n\r\nexport default function RegularForms() {\r\n const [checked, setChecked] = React.useState([24, 22]);\r\n const [selectedEnabled, setSelectedEnabled] = React.useState(\"b\");\r\n const [selectedValue, setSelectedValue] = React.useState(null);\r\n const handleChange = event => {\r\n setSelectedValue(event.target.value);\r\n };\r\n const handleChangeEnabled = event => {\r\n setSelectedEnabled(event.target.value);\r\n };\r\n const handleToggle = value => {\r\n const currentIndex = checked.indexOf(value);\r\n const newChecked = [...checked];\r\n\r\n if (currentIndex === -1) {\r\n newChecked.push(value);\r\n } else {\r\n newChecked.splice(currentIndex, 1);\r\n }\r\n setChecked(newChecked);\r\n };\r\n const classes = useStyles();\r\n return (\r\n Register
\r\n\r\n \r\n {` `}\r\n \r\n {` `}\r\n \r\n {` `}\r\n
\r\n \r\n or be classical
\r\nStacked Form
\r\nHorizontal Form
\r\nForm Elements
\r\nInput Variants
\r\nSimple Table
\r\n\r\n Table on Plain Background\r\n - Here is a subtitle for this table\r\n
\r\nRegular Table with Colors
\r\n\r\n You entered: {e}\r\n
\r\n }\r\n />\r\n );\r\n }, 200);\r\n };\r\n const successDelete = () => {\r\n setAlert(\r\n\r\n \r\n A beautiful plugin, that replace the classic alert, Handcrafted by\r\n our friend{\" \"}\r\n \r\n Daniel Jorgensen\r\n \r\n . Please check out the{\" \"}\r\n \r\n full documentation.\r\n \r\n .\r\n \r\n }\r\n />\r\n {alert}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n}\r\n","import React from \"react\";\r\nimport PropTypes from \"prop-types\";\r\n\r\n// @material-ui/core components\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\n\r\nimport styles from \"assets/jss/material-dashboard-pro-react/components/typographyStyle.js\";\r\n\r\nconst useStyles = makeStyles(styles);\r\n\r\nexport default function Quote(props) {\r\n const classes = useStyles();\r\n const { text, author } = props;\r\n return (\r\n \r\n
\r\n Basic example
\r\n \r\n\r\n
\r\n A title with a text under
\r\n \r\n\r\n
\r\n A success message
\r\n \r\n\r\n
\r\n Custom HTML description
\r\n \r\n\r\n
\r\n \r\n A warning message, with a function attached to the {'\"'}\r\n Confirm{'\"'}\r\n Button...\r\n
\r\n \r\n\r\n \r\n Try me!\r\n \r\n
\r\n \r\n ...and by passing a parameter, you can execute something else\r\n for {'\"'}Cancel{'\"'}\r\n
\r\n\r\n
\r\n A message with auto close timer set to 2 seconds
\r\n \r\n\r\n
\r\n Modal window with input field
\r\n \r\n\r\n\r\n );\r\n}\r\n\r\nQuote.propTypes = {\r\n text: PropTypes.node,\r\n author: PropTypes.node\r\n};\r\n","import React from \"react\";\r\nimport PropTypes from \"prop-types\";\r\n\r\n// @material-ui/core components\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\n\r\nimport styles from \"assets/jss/material-dashboard-pro-react/components/typographyStyle.js\";\r\n\r\nconst useStyles = makeStyles(styles);\r\n\r\nexport default function Muted(props) {\r\n const classes = useStyles();\r\n const { children } = props;\r\n return (\r\n{text}
\r\n {author}\r\n
\r\n {children}\r\n
\r\n );\r\n}\r\n\r\nMuted.propTypes = {\r\n children: PropTypes.node\r\n};\r\n","import React from \"react\";\r\nimport PropTypes from \"prop-types\";\r\n\r\n// @material-ui/core components\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\n\r\nimport styles from \"assets/jss/material-dashboard-pro-react/components/typographyStyle.js\";\r\n\r\nconst useStyles = makeStyles(styles);\r\n\r\nexport default function Primary(props) {\r\n const classes = useStyles();\r\n const { children } = props;\r\n return (\r\n \r\n {children}\r\n
\r\n );\r\n}\r\n\r\nPrimary.propTypes = {\r\n children: PropTypes.node\r\n};\r\n","import React from \"react\";\r\nimport PropTypes from \"prop-types\";\r\n\r\n// @material-ui/core components\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\n\r\nimport styles from \"assets/jss/material-dashboard-pro-react/components/typographyStyle.js\";\r\n\r\nconst useStyles = makeStyles(styles);\r\n\r\nexport default function Info(props) {\r\n const classes = useStyles();\r\n const { children } = props;\r\n return (\r\n \r\n {children}\r\n
\r\n );\r\n}\r\n\r\nInfo.propTypes = {\r\n children: PropTypes.node\r\n};\r\n","import React from \"react\";\r\nimport PropTypes from \"prop-types\";\r\n\r\n// @material-ui/core components\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\n\r\nimport styles from \"assets/jss/material-dashboard-pro-react/components/typographyStyle.js\";\r\n\r\nconst useStyles = makeStyles(styles);\r\n\r\nexport default function Success(props) {\r\n const classes = useStyles();\r\n const { children } = props;\r\n return (\r\n \r\n {children}\r\n
\r\n );\r\n}\r\n\r\nSuccess.propTypes = {\r\n children: PropTypes.node\r\n};\r\n","import React from \"react\";\r\nimport PropTypes from \"prop-types\";\r\n\r\n// @material-ui/core components\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\n\r\nimport styles from \"assets/jss/material-dashboard-pro-react/components/typographyStyle.js\";\r\n\r\nconst useStyles = makeStyles(styles);\r\n\r\nexport default function Warning(props) {\r\n const classes = useStyles();\r\n const { children } = props;\r\n return (\r\n \r\n {children}\r\n
\r\n );\r\n}\r\n\r\nWarning.propTypes = {\r\n children: PropTypes.node\r\n};\r\n","import React from \"react\";\r\n\r\n// @material-ui/core components\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\n\r\n// core components\r\nimport Quote from \"components/Typography/Quote.js\";\r\nimport Muted from \"components/Typography/Muted.js\";\r\nimport Primary from \"components/Typography/Primary.js\";\r\nimport Info from \"components/Typography/Info.js\";\r\nimport Success from \"components/Typography/Success.js\";\r\nimport Warning from \"components/Typography/Warning.js\";\r\nimport Danger from \"components/Typography/Danger.js\";\r\nimport Heading from \"components/Heading/Heading.js\";\r\nimport Card from \"components/Card/Card.js\";\r\nimport CardBody from \"components/Card/CardBody.js\";\r\n\r\nconst styles = {\r\n typo: {\r\n paddingLeft: \"25%\",\r\n marginBottom: \"40px\",\r\n position: \"relative\",\r\n },\r\n note: {\r\n fontFamily: '\"Roboto\", \"Helvetica\", \"Arial\", sans-serif',\r\n bottom: \"10px\",\r\n color: \"#c0c1c2\",\r\n display: \"block\",\r\n fontWeight: \"400\",\r\n fontSize: \"13px\",\r\n lineHeight: \"13px\",\r\n left: \"0\",\r\n marginLeft: \"20px\",\r\n position: \"absolute\",\r\n width: \"260px\",\r\n },\r\n};\r\n\r\nconst useStyles = makeStyles(styles);\r\n\r\nexport default function Typography() {\r\n const classes = useStyles();\r\n return (\r\n \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n}\r\n","import React from \"react\";\r\n\r\n// mterial-ui components\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\n\r\nconst styles = {\r\n clearfix: {\r\n \"&:after,&:before\": {\r\n display: \"table\",\r\n content: '\" \"'\r\n },\r\n \"&:after\": {\r\n clear: \"both\"\r\n }\r\n }\r\n};\r\n\r\nconst useStyles = makeStyles(styles);\r\n\r\nexport default function Clearfix() {\r\n const classes = useStyles();\r\n return ;\r\n}\r\n","import {\r\n cardTitle,\r\n grayColor\r\n} from \"assets/jss/material-dashboard-pro-react.js\";\r\n\r\nconst userProfileStyles = {\r\n cardTitle,\r\n cardIconTitle: {\r\n ...cardTitle,\r\n marginTop: \"15px\",\r\n marginBottom: \"0px\",\r\n \"& small\": {\r\n fontSize: \"80%\",\r\n fontWeight: \"400\"\r\n }\r\n },\r\n cardCategory: {\r\n marginTop: \"10px\",\r\n color: grayColor[0] + \" !important\",\r\n textAlign: \"center\"\r\n },\r\n description: {\r\n color: grayColor[0]\r\n },\r\n updateProfileButton: {\r\n float: \"right\"\r\n }\r\n};\r\nexport default userProfileStyles;\r\n","import React from \"react\";\r\n// @material-ui/core components\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport InputLabel from \"@material-ui/core/InputLabel\";\r\n\r\n// @material-ui/icons\r\nimport PermIdentity from \"@material-ui/icons/PermIdentity\";\r\n\r\n// core components\r\nimport GridContainer from \"components/Grid/GridContainer.js\";\r\nimport GridItem from \"components/Grid/GridItem.js\";\r\nimport Button from \"components/CustomButtons/Button.js\";\r\nimport CustomInput from \"components/CustomInput/CustomInput.js\";\r\nimport Clearfix from \"components/Clearfix/Clearfix.js\";\r\nimport Card from \"components/Card/Card.js\";\r\nimport CardBody from \"components/Card/CardBody.js\";\r\nimport CardHeader from \"components/Card/CardHeader.js\";\r\nimport CardIcon from \"components/Card/CardIcon.js\";\r\nimport CardAvatar from \"components/Card/CardAvatar.js\";\r\n\r\nimport styles from \"assets/jss/material-dashboard-pro-react/views/userProfileStyles.js\";\r\n\r\nimport avatar from \"assets/img/faces/marc.jpg\";\r\n\r\nconst useStyles = makeStyles(styles);\r\n\r\nexport default function UserProfile() {\r\n const classes = useStyles();\r\n return (\r\n \r\n
\r\n Header 1
\r\n The Life of Material Dashboard
\r\n\r\n
\r\n Header 2
\r\n The Life of Material Dashboard
\r\n\r\n
\r\n Header 3
\r\n The Life of Material Dashboard
\r\n\r\n
\r\n Header 4
\r\n The Life of Material Dashboard
\r\n\r\n
\r\n Header 5
\r\n The Life of Material Dashboard
\r\n\r\n
\r\n Header 6
\r\n The Life of Material Dashboard
\r\n\r\n
\r\n Paragraph
\r\n \r\n I will be the leader of a company that ends up being worth\r\n billions of dollars, because I got the answers. I understand\r\n culture. I am the nucleus. I think that’s a responsibility that I\r\n have, to push possibilities, to show people, this is the level\r\n that things could be at.\r\n
\r\n\r\n
\r\n Quote
\r\n \r\n \r\n I will be the leader of a company that ends up being worth\r\n billions of dollars, because I got the answers...\r\n \r\n
\r\n Muted Text
\r\n \r\n \r\n I will be the leader of a company that ends up being worth\r\n billions of dollars, because I got the answers...\r\n \r\n
\r\n Primary Text
\r\n \r\n \r\n I will be the leader of a company that ends up being worth\r\n billions of dollars, because I got the answers...\r\n \r\n
\r\n Info Text
\r\n \r\n \r\n I will be the leader of a company that ends up being worth\r\n billions of dollars, because I got the answers...\r\n \r\n
\r\n Success Text
\r\n \r\n \r\n I will be the leader of a company that ends up being worth\r\n billions of dollars, because I got the answers...\r\n \r\n
\r\n Warning Text
\r\n \r\n \r\n I will be the leader of a company that ends up being worth\r\n billions of dollars, because I got the answers...\r\n \r\n
\r\n Danger Text
\r\n \r\n \r\n Header with small subtitle\r\n
\r\n
\r\n Small Tag
\r\n \r\n Header with small subtitle\r\n
\r\n \r\n Use {'\"'}small{'\"'} tag for the headers\r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n About me \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n e.preventDefault()}>\r\n 
\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n}\r\n","import {\r\n cardTitle,\r\n dangerColor,\r\n whiteColor,\r\n grayColor\r\n} from \"assets/jss/material-dashboard-pro-react.js\";\r\nimport customCheckboxRadioSwitch from \"assets/jss/material-dashboard-pro-react/customCheckboxRadioSwitch.js\";\r\n\r\nconst validationFormsStyle = {\r\n ...customCheckboxRadioSwitch,\r\n cardTitle: {\r\n ...cardTitle,\r\n color: whiteColor\r\n },\r\n cardIconTitle: {\r\n ...cardTitle,\r\n marginTop: \"15px\",\r\n marginBottom: \"0px\"\r\n },\r\n formCategory: {\r\n marginBottom: \"0\",\r\n color: grayColor[0],\r\n fontSize: \"14px\",\r\n padding: \"10px 0 10px\"\r\n },\r\n center: {\r\n textAlign: \"center\"\r\n },\r\n justifyContentCenter: {\r\n justifyContent: \"center\"\r\n },\r\n registerButton: {\r\n float: \"right\"\r\n },\r\n danger: {\r\n color: dangerColor[0] + \"!important\"\r\n }\r\n};\r\n\r\nexport default validationFormsStyle;\r\n","/*eslint-disable*/\r\nimport React from \"react\";\r\n// @material-ui/core components\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport FormControlLabel from \"@material-ui/core/FormControlLabel\";\r\nimport FormLabel from \"@material-ui/core/FormLabel\";\r\nimport Checkbox from \"@material-ui/core/Checkbox\";\r\nimport InputAdornment from \"@material-ui/core/InputAdornment\";\r\n\r\n// material ui icons\r\nimport MailOutline from \"@material-ui/icons/MailOutline\";\r\nimport Contacts from \"@material-ui/icons/Contacts\";\r\nimport Check from \"@material-ui/icons/Check\";\r\nimport Close from \"@material-ui/icons/Close\";\r\n\r\n// core components\r\nimport GridContainer from \"components/Grid/GridContainer.js\";\r\nimport GridItem from \"components/Grid/GridItem.js\";\r\nimport CustomInput from \"components/CustomInput/CustomInput.js\";\r\nimport Button from \"components/CustomButtons/Button.js\";\r\nimport Card from \"components/Card/Card.js\";\r\nimport CardHeader from \"components/Card/CardHeader.js\";\r\nimport CardText from \"components/Card/CardText.js\";\r\nimport CardIcon from \"components/Card/CardIcon.js\";\r\nimport CardBody from \"components/Card/CardBody.js\";\r\nimport CardFooter from \"components/Card/CardFooter.js\";\r\n\r\n// style for this view\r\nimport styles from \"assets/jss/material-dashboard-pro-react/views/validationFormsStyle.js\";\r\n\r\nconst useStyles = makeStyles(styles);\r\n\r\nexport default function ValidationForms() {\r\n // register form\r\n const [registerEmail, setregisterEmail] = React.useState(\"\");\r\n const [registerEmailState, setregisterEmailState] = React.useState(\"\");\r\n const [registerPassword, setregisterPassword] = React.useState(\"\");\r\n const [registerPasswordState, setregisterPasswordState] = React.useState(\"\");\r\n const [registerConfirmPassword, setregisterConfirmPassword] = React.useState(\r\n \"\"\r\n );\r\n const [\r\n registerConfirmPasswordState,\r\n setregisterConfirmPasswordState\r\n ] = React.useState(\"\");\r\n const [registerCheckbox, setregisterCheckbox] = React.useState(false);\r\n const [registerCheckboxState, setregisterCheckboxState] = React.useState(\"\");\r\n // login form\r\n const [loginEmail, setloginEmail] = React.useState(\"\");\r\n const [loginEmailState, setloginEmailState] = React.useState(\"\");\r\n const [loginPassword, setloginPassword] = React.useState(\"\");\r\n const [loginPasswordState, setloginPasswordState] = React.useState(\"\");\r\n // type validation\r\n const [required, setrequired] = React.useState(\"\");\r\n const [requiredState, setrequiredState] = React.useState(\"\");\r\n const [typeEmail, settypeEmail] = React.useState(\"\");\r\n const [typeEmailState, settypeEmailState] = React.useState(\"\");\r\n const [number, setnumber] = React.useState(\"\");\r\n const [numberState, setnumberState] = React.useState(\"\");\r\n const [url, seturl] = React.useState(\"\");\r\n const [urlState, seturlState] = React.useState(\"\");\r\n const [equalTo, setequalTo] = React.useState(\"\");\r\n const [whichEqualTo, setwhichEqualTo] = React.useState(\"\");\r\n const [equalToState, setequalToState] = React.useState(\"\");\r\n // range validation\r\n const [minLength, setminLength] = React.useState(\"\");\r\n const [minLengthState, setminLengthState] = React.useState(\"\");\r\n const [maxLength, setmaxLength] = React.useState(\"\");\r\n const [maxLengthState, setmaxLengthState] = React.useState(\"\");\r\n const [range, setrange] = React.useState(\"\");\r\n const [rangeState, setrangeState] = React.useState(\"\");\r\n const [minValue, setminValue] = React.useState(\"\");\r\n const [minValueState, setminValueState] = React.useState(\"\");\r\n const [maxValue, setmaxValue] = React.useState(\"\");\r\n const [maxValueState, setmaxValueState] = React.useState(\"\");\r\n // function that returns true if value is email, false otherwise\r\n const verifyEmail = value => {\r\n var emailRex = /^(([^<>()[\\]\\\\.,;:\\s@\"]+(\\.[^<>()[\\]\\\\.,;:\\s@\"]+)*)|(\".+\"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\])|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))$/;\r\n if (emailRex.test(value)) {\r\n return true;\r\n }\r\n return false;\r\n };\r\n // function that verifies if a string has a given length or not\r\n const verifyLength = (value, length) => {\r\n if (value.length >= length) {\r\n return true;\r\n }\r\n return false;\r\n };\r\n // function that verifies if value contains only numbers\r\n const verifyNumber = value => {\r\n var numberRex = new RegExp(\"^[0-9]+$\");\r\n if (numberRex.test(value)) {\r\n return true;\r\n }\r\n return false;\r\n };\r\n // verifies if value is a valid URL\r\n const verifyUrl = value => {\r\n try {\r\n new URL(value);\r\n return true;\r\n } catch (_) {\r\n return false;\r\n }\r\n };\r\n const registerClick = () => {\r\n if (registerEmailState === \"\") {\r\n setregisterEmailState(\"error\");\r\n }\r\n if (registerPasswordState === \"\") {\r\n setregisterPasswordState(\"error\");\r\n }\r\n if (registerConfirmPasswordState === \"\") {\r\n setregisterConfirmPasswordState(\"error\");\r\n }\r\n if (registerCheckboxState === \"\") {\r\n setregisterCheckboxState(\"error\");\r\n }\r\n };\r\n const loginClick = () => {\r\n if (loginEmailState === \"\") {\r\n setloginEmailState(\"error\");\r\n }\r\n if (loginPasswordState === \"\") {\r\n setloginPasswordState(\"error\");\r\n }\r\n };\r\n const typeClick = () => {\r\n if (requiredState === \"\") {\r\n setrequiredState(\"error\");\r\n }\r\n if (typeEmailState === \"\") {\r\n settypeEmailState(\"error\");\r\n }\r\n if (numberState === \"\") {\r\n setnumberState(\"error\");\r\n }\r\n if (urlState === \"\") {\r\n seturlState(\"error\");\r\n }\r\n if (equalToState === \"\") {\r\n setequalToState(\"error\");\r\n }\r\n };\r\n const rangeClick = () => {\r\n if (minLengthState === \"\") {\r\n setminLengthState(\"error\");\r\n }\r\n if (maxLengthState === \"\") {\r\n setmaxLengthState(\"error\");\r\n }\r\n if (rangeState === \"\") {\r\n setrangeState(\"error\");\r\n }\r\n if (minValueState === \"\") {\r\n setminValueState(\"error\");\r\n }\r\n if (maxValueState === \"\") {\r\n setmaxValueState(\"error\");\r\n }\r\n };\r\n const classes = useStyles();\r\n return (\r\n \r\n Edit Profile - Complete your profile\r\n
\r\nCEO / CO-FOUNDER
\r\nAlec Thompson
\r\n\r\n Don{\"'\"}t be scared of the truth because we need to restart the\r\n human foundation in truth And I love you like Kanye loves Kanye\r\n I love Rick Owens’ bed design but the back is...\r\n
\r\n \r\nRegister Forms
\r\nLogin Form
\r\nType Validation
\r\nRange Validation
\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n e.preventDefault()}>\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n}\r\n","import {\r\n primaryColor,\r\n dangerColor,\r\n successColor,\r\n roseColor,\r\n infoColor,\r\n warningColor,\r\n whiteColor,\r\n blackColor,\r\n grayColor,\r\n hexToRgb\r\n} from \"assets/jss/material-dashboard-pro-react.js\";\r\n\r\nconst wizardStyle = {\r\n wizardContainer: {},\r\n card: {\r\n display: \"inline-block\",\r\n position: \"relative\",\r\n width: \"100%\",\r\n margin: \"25px 0\",\r\n boxShadow: \"0 1px 4px 0 rgba(\" + hexToRgb(blackColor) + \", 0.14)\",\r\n borderRadius: \"6px\",\r\n color: \"rgba(\" + hexToRgb(blackColor) + \", 0.87)\",\r\n background: whiteColor,\r\n transition: \"all 300ms linear\",\r\n minHeight: \"410px\"\r\n },\r\n wizardHeader: {\r\n textAlign: \"center\",\r\n padding: \"25px 0 35px\"\r\n },\r\n title: {\r\n margin: \"0\"\r\n },\r\n subtitle: {\r\n margin: \"5px 0 0\"\r\n },\r\n wizardNavigation: {\r\n position: \"relative\"\r\n },\r\n nav: {\r\n marginTop: \"20px\",\r\n paddingLeft: \"0\",\r\n marginBottom: \"0\",\r\n listStyle: \"none\",\r\n backgroundColor: \"rgba(\" + hexToRgb(grayColor[17]) + \", 0.2)\",\r\n \"&:after,&:before\": {\r\n display: \"table\",\r\n content: '\" \"'\r\n },\r\n \"&:after\": {\r\n boxSizing: \"border-box\"\r\n }\r\n },\r\n steps: {\r\n marginLeft: \"0\",\r\n textAlign: \"center\",\r\n // float: \"left\",\r\n // display: \"block\",\r\n position: \"relative\",\r\n display: \"inline-block\"\r\n },\r\n stepsAnchor: {\r\n cursor: \"pointer\",\r\n position: \"relative\",\r\n display: \"block\",\r\n padding: \"10px 15px\",\r\n textDecoration: \"none\",\r\n transition: \"all .3s\",\r\n border: \"0 !important\",\r\n borderRadius: \"30px\",\r\n lineHeight: \"18px\",\r\n textTransform: \"uppercase\",\r\n fontSize: \"12px\",\r\n fontWeight: \"500\",\r\n minWidth: \"100px\",\r\n textAlign: \"center\",\r\n color: grayColor[6] + \" !important\"\r\n },\r\n content: {\r\n marginTop: \"20px\",\r\n minHeight: \"340px\",\r\n padding: \"20px 15px\"\r\n },\r\n stepContent: {\r\n display: \"none\"\r\n },\r\n stepContentActive: {\r\n display: \"block\"\r\n },\r\n movingTab: {\r\n position: \"absolute\",\r\n textAlign: \"center\",\r\n padding: \"12px\",\r\n fontSize: \"12px\",\r\n textTransform: \"uppercase\",\r\n WebkitFontSmoothing: \"subpixel-antialiased\",\r\n top: \"-4px\",\r\n left: \"0px\",\r\n borderRadius: \"4px\",\r\n color: whiteColor,\r\n cursor: \"pointer\",\r\n fontWeight: \"500\"\r\n },\r\n primary: {\r\n backgroundColor: primaryColor[0],\r\n boxShadow:\r\n \"0 4px 20px 0px rgba(\" +\r\n hexToRgb(blackColor) +\r\n \", 0.14), 0 7px 10px -5px rgba(\" +\r\n hexToRgb(primaryColor[0]) +\r\n \", 0.4)\"\r\n },\r\n warning: {\r\n backgroundColor: warningColor[0],\r\n boxShadow:\r\n \"0 4px 20px 0px rgba(\" +\r\n hexToRgb(blackColor) +\r\n \", 0.14), 0 7px 10px -5px rgba(\" +\r\n hexToRgb(warningColor[0]) +\r\n \", 0.4)\"\r\n },\r\n danger: {\r\n backgroundColor: dangerColor[0],\r\n boxShadow:\r\n \"0 4px 20px 0px rgba(\" +\r\n hexToRgb(blackColor) +\r\n \", 0.14), 0 7px 10px -5px rgba(\" +\r\n hexToRgb(dangerColor[0]) +\r\n \", 0.4)\"\r\n },\r\n success: {\r\n backgroundColor: successColor[0],\r\n boxShadow:\r\n \"0 4px 20px 0px rgba(\" +\r\n hexToRgb(blackColor) +\r\n \", 0.14), 0 7px 10px -5px rgba(\" +\r\n hexToRgb(successColor[0]) +\r\n \", 0.4)\"\r\n },\r\n info: {\r\n backgroundColor: infoColor[0],\r\n boxShadow:\r\n \"0 4px 20px 0px rgba(\" +\r\n hexToRgb(blackColor) +\r\n \", 0.14), 0 7px 10px -5px rgba(\" +\r\n hexToRgb(infoColor[0]) +\r\n \", 0.4)\"\r\n },\r\n rose: {\r\n backgroundColor: roseColor[0],\r\n boxShadow:\r\n \"0 4px 20px 0px rgba(\" +\r\n hexToRgb(blackColor) +\r\n \", 0.14), 0 7px 10px -5px rgba(\" +\r\n hexToRgb(roseColor[0]) +\r\n \", 0.4)\"\r\n },\r\n footer: {\r\n padding: \"0 15px\"\r\n },\r\n left: {\r\n float: \"left!important\"\r\n },\r\n right: {\r\n float: \"right!important\"\r\n },\r\n clearfix: {\r\n \"&:after,&:before\": {\r\n display: \"table\",\r\n content: '\" \"'\r\n },\r\n clear: \"both\"\r\n }\r\n};\r\n\r\nexport default wizardStyle;\r\n","import React from \"react\";\r\nimport cx from \"classnames\";\r\nimport PropTypes from \"prop-types\";\r\n\r\n// @material-ui/core components\r\nimport withStyles from \"@material-ui/core/styles/withStyles\";\r\n// core components\r\nimport Button from \"components/CustomButtons/Button.js\";\r\nimport Card from \"components/Card/Card.js\";\r\n\r\nimport wizardStyle from \"assets/jss/material-dashboard-pro-react/components/wizardStyle.js\";\r\n\r\nclass Wizard extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n var width;\r\n if (this.props.steps.length === 1) {\r\n width = \"100%\";\r\n } else {\r\n if (window.innerWidth < 600) {\r\n if (this.props.steps.length !== 3) {\r\n width = \"50%\";\r\n } else {\r\n width = 100 / 3 + \"%\";\r\n }\r\n } else {\r\n if (this.props.steps.length === 2) {\r\n width = \"50%\";\r\n } else {\r\n width = 100 / 3 + \"%\";\r\n }\r\n }\r\n }\r\n this.state = {\r\n currentStep: 0,\r\n color: this.props.color,\r\n nextButton: this.props.steps.length > 1 ? true : false,\r\n previousButton: false,\r\n finishButton: this.props.steps.length === 1 ? true : false,\r\n width: width,\r\n movingTabStyle: {\r\n transition: \"transform 0s\"\r\n },\r\n allStates: {}\r\n };\r\n this.navigationStepChange = this.navigationStepChange.bind(this);\r\n this.refreshAnimation = this.refreshAnimation.bind(this);\r\n this.previousButtonClick = this.previousButtonClick.bind(this);\r\n this.previousButtonClick = this.previousButtonClick.bind(this);\r\n this.finishButtonClick = this.finishButtonClick.bind(this);\r\n this.updateWidth = this.updateWidth.bind(this);\r\n }\r\n wizard = React.createRef();\r\n componentDidMount() {\r\n this.refreshAnimation(0);\r\n window.addEventListener(\"resize\", this.updateWidth);\r\n }\r\n componentWillUnmount() {\r\n window.removeEventListener(\"resize\", this.updateWidth);\r\n }\r\n updateWidth() {\r\n this.refreshAnimation(this.state.currentStep);\r\n }\r\n navigationStepChange(key) {\r\n if (this.props.steps) {\r\n var validationState = true;\r\n if (key > this.state.currentStep) {\r\n for (var i = this.state.currentStep; i < key; i++) {\r\n if (this[this.props.steps[i].stepId].sendState !== undefined) {\r\n this.setState({\r\n allStates: {\r\n ...this.state.allStates,\r\n [this.props.steps[i].stepId]: this[\r\n this.props.steps[i].stepId\r\n ].sendState()\r\n }\r\n });\r\n }\r\n if (\r\n this[this.props.steps[i].stepId].isValidated !== undefined &&\r\n this[this.props.steps[i].stepId].isValidated() === false\r\n ) {\r\n validationState = false;\r\n break;\r\n }\r\n }\r\n }\r\n if (validationState) {\r\n this.setState({\r\n currentStep: key,\r\n nextButton: this.props.steps.length > key + 1 ? true : false,\r\n previousButton: key > 0 ? true : false,\r\n finishButton: this.props.steps.length === key + 1 ? true : false\r\n });\r\n this.refreshAnimation(key);\r\n }\r\n }\r\n }\r\n nextButtonClick() {\r\n if (\r\n (this.props.validate &&\r\n ((this[this.props.steps[this.state.currentStep].stepId].isValidated !==\r\n undefined &&\r\n this[\r\n this.props.steps[this.state.currentStep].stepId\r\n ].isValidated()) ||\r\n this[this.props.steps[this.state.currentStep].stepId].isValidated ===\r\n undefined)) ||\r\n this.props.validate === undefined\r\n ) {\r\n if (\r\n this[this.props.steps[this.state.currentStep].stepId].sendState !==\r\n undefined\r\n ) {\r\n this.setState({\r\n allStates: {\r\n ...this.state.allStates,\r\n [this.props.steps[this.state.currentStep].stepId]: this[\r\n this.props.steps[this.state.currentStep].stepId\r\n ].sendState()\r\n }\r\n });\r\n }\r\n var key = this.state.currentStep + 1;\r\n this.setState({\r\n currentStep: key,\r\n nextButton: this.props.steps.length > key + 1 ? true : false,\r\n previousButton: key > 0 ? true : false,\r\n finishButton: this.props.steps.length === key + 1 ? true : false\r\n });\r\n this.refreshAnimation(key);\r\n }\r\n }\r\n previousButtonClick() {\r\n if (\r\n this[this.props.steps[this.state.currentStep].stepId].sendState !==\r\n undefined\r\n ) {\r\n this.setState({\r\n allStates: {\r\n ...this.state.allStates,\r\n [this.props.steps[this.state.currentStep].stepId]: this[\r\n this.props.steps[this.state.currentStep].stepId\r\n ].sendState()\r\n }\r\n });\r\n }\r\n var key = this.state.currentStep - 1;\r\n if (key >= 0) {\r\n this.setState({\r\n currentStep: key,\r\n nextButton: this.props.steps.length > key + 1 ? true : false,\r\n previousButton: key > 0 ? true : false,\r\n finishButton: this.props.steps.length === key + 1 ? true : false\r\n });\r\n this.refreshAnimation(key);\r\n }\r\n }\r\n finishButtonClick() {\r\n if (\r\n (this.props.validate === false &&\r\n this.props.finishButtonClick !== undefined) ||\r\n (this.props.validate &&\r\n ((this[this.props.steps[this.state.currentStep].stepId].isValidated !==\r\n undefined &&\r\n this[\r\n this.props.steps[this.state.currentStep].stepId\r\n ].isValidated()) ||\r\n this[this.props.steps[this.state.currentStep].stepId].isValidated ===\r\n undefined) &&\r\n this.props.finishButtonClick !== undefined)\r\n ) {\r\n this.setState(\r\n {\r\n allStates: {\r\n ...this.state.allStates,\r\n [this.props.steps[this.state.currentStep].stepId]: this[\r\n this.props.steps[this.state.currentStep].stepId\r\n ].sendState()\r\n }\r\n },\r\n () => {\r\n this.props.finishButtonClick(this.state.allStates);\r\n }\r\n );\r\n }\r\n }\r\n refreshAnimation(index) {\r\n var total = this.props.steps.length;\r\n var li_width = 100 / total;\r\n var total_steps = this.props.steps.length;\r\n var move_distance =\r\n this.wizard.current.children[0].offsetWidth / total_steps;\r\n var index_temp = index;\r\n var vertical_level = 0;\r\n\r\n var mobile_device = window.innerWidth < 600 && total > 3;\r\n\r\n if (mobile_device) {\r\n move_distance = this.wizard.current.children[0].offsetWidth / 2;\r\n index_temp = index % 2;\r\n li_width = 50;\r\n }\r\n\r\n this.setState({ width: li_width + \"%\" });\r\n\r\n var step_width = move_distance;\r\n move_distance = move_distance * index_temp;\r\n\r\n var current = index + 1;\r\n\r\n if (current === 1 || (mobile_device === true && index % 2 === 0)) {\r\n move_distance -= 8;\r\n } else if (\r\n current === total_steps ||\r\n (mobile_device === true && index % 2 === 1)\r\n ) {\r\n move_distance += 8;\r\n }\r\n\r\n if (mobile_device) {\r\n vertical_level = parseInt(index / 2, 10);\r\n vertical_level = vertical_level * 38;\r\n }\r\n var movingTabStyle = {\r\n width: step_width,\r\n transform:\r\n \"translate3d(\" + move_distance + \"px, \" + vertical_level + \"px, 0)\",\r\n transition: \"all 0.5s cubic-bezier(0.29, 1.42, 0.79, 1)\"\r\n };\r\n this.setState({ movingTabStyle: movingTabStyle });\r\n }\r\n render() {\r\n const { classes, title, subtitle, color, steps } = this.props;\r\n return (\r\n Employees Stats
\r\n\r\n New employees on 15th September, 2016\r\n
\r\nSMALL COMPANY
\r\n\r\n
\r\n \r\n $29\r\n
\r\n\r\n This is good if your company size is between 2 and 10\r\n Persons.\r\n
\r\n \r\nFreelancer
\r\n\r\n weekend \r\n
\r\n \r\n FREE\r\n
\r\n\r\n This is good if your company size is between 2 and 10\r\n Persons.\r\n
\r\n \r\n\r\n
\r\n \r\n Your products, all the kits that I have downloaded from your\r\n site and worked with are sooo cool! I love the color\r\n mixtures, cards... everything. Keep up the great work!\r\n
\r\nAlec Thompson
\r\n@ALECTHOMPSON
\r\n\r\n \r\n
\r\n \r\n
\r\n {title}
\r\n{subtitle}
\r\n\r\n \r\n {steps[this.state.currentStep].stepName}\r\n
\r\n - \r\n {steps.map((prop, key) => {\r\n return (\r\n
\r\n {steps.map((prop, key) => {\r\n const stepContentClasses = cx({\r\n [classes.stepContentActive]: this.state.currentStep === key,\r\n [classes.stepContent]: this.state.currentStep !== key\r\n });\r\n return (\r\n
\r\n \r\n (this[prop.stepId] = node)}\r\n allStates={this.state.allStates}\r\n />\r\n
\r\n );\r\n })}\r\n \r\n
\r\n \r\n \r\n );\r\n }\r\n}\r\n\r\nWizard.defaultProps = {\r\n color: \"rose\",\r\n title: \"Here should go your title\",\r\n subtitle: \"And this would be your subtitle\",\r\n previousButtonText: \"Previous\",\r\n previousButtonClasses: \"\",\r\n nextButtonClasses: \"\",\r\n nextButtonText: \"Next\",\r\n finishButtonClasses: \"\",\r\n finishButtonText: \"Finish\"\r\n};\r\n\r\nWizard.propTypes = {\r\n classes: PropTypes.object.isRequired,\r\n steps: PropTypes.arrayOf(\r\n PropTypes.shape({\r\n stepName: PropTypes.string.isRequired,\r\n stepComponent: PropTypes.object.isRequired,\r\n stepId: PropTypes.string.isRequired\r\n })\r\n ).isRequired,\r\n color: PropTypes.oneOf([\r\n \"primary\",\r\n \"warning\",\r\n \"danger\",\r\n \"success\",\r\n \"info\",\r\n \"rose\"\r\n ]),\r\n title: PropTypes.string,\r\n subtitle: PropTypes.string,\r\n previousButtonClasses: PropTypes.string,\r\n previousButtonText: PropTypes.string,\r\n nextButtonClasses: PropTypes.string,\r\n nextButtonText: PropTypes.string,\r\n finishButtonClasses: PropTypes.string,\r\n finishButtonText: PropTypes.string,\r\n finishButtonClick: PropTypes.func,\r\n validate: PropTypes.bool\r\n};\r\n\r\nexport default withStyles(wizardStyle)(Wizard);\r\n","/*eslint-disable*/\r\nimport React from \"react\";\r\n\r\nimport defaultImage from \"assets/img/default-avatar.png\";\r\n\r\nexport default function PictureUpload() {\r\n const [file, setFile] = React.useState(null);\r\n const [imagePreviewUrl, setImagePreviewUrl] = React.useState(defaultImage);\r\n const handleImageChange = e => {\r\n e.preventDefault();\r\n let reader = new FileReader();\r\n let newFile = e.target.files[0];\r\n reader.onloadend = () => {\r\n setFile(newFile);\r\n setImagePreviewUrl(reader.result);\r\n };\r\n if (newFile) {\r\n reader.readAsDataURL(newFile);\r\n }\r\n };\r\n // eslint-disable-next-line\r\n const handleSubmit = e => {\r\n e.preventDefault();\r\n // this.state.file is the file/image uploaded\r\n // in this function you can save the image (this.state.file) on form submit\r\n // you have to call it yourself\r\n };\r\n return (\r\n \r\n {this.state.previousButton ? (\r\n this.previousButtonClick()}\r\n >\r\n {this.props.previousButtonText}\r\n \r\n ) : null}\r\n
\r\n \r\n {this.state.nextButton ? (\r\n this.nextButtonClick()}\r\n >\r\n {this.props.nextButtonText}\r\n \r\n ) : null}\r\n {this.state.finishButton ? (\r\n this.finishButtonClick()}\r\n >\r\n {this.props.finishButtonText}\r\n \r\n ) : null}\r\n
\r\n \r\n \r\n
\r\n );\r\n}\r\n","import React from \"react\";\r\nimport PropTypes from \"prop-types\";\r\n// @material-ui/icons\r\nimport Face from \"@material-ui/icons/Face\";\r\nimport RecordVoiceOver from \"@material-ui/icons/RecordVoiceOver\";\r\nimport Email from \"@material-ui/icons/Email\";\r\n\r\n// @material-ui/core components\r\nimport withStyles from \"@material-ui/core/styles/withStyles\";\r\nimport InputAdornment from \"@material-ui/core/InputAdornment\";\r\n\r\n// core components\r\nimport GridContainer from \"components/Grid/GridContainer.js\";\r\nimport GridItem from \"components/Grid/GridItem.js\";\r\nimport PictureUpload from \"components/CustomUpload/PictureUpload.js\";\r\nimport CustomInput from \"components/CustomInput/CustomInput.js\";\r\n\r\nconst style = {\r\n infoText: {\r\n fontWeight: \"300\",\r\n margin: \"10px 0 30px\",\r\n textAlign: \"center\"\r\n },\r\n inputAdornmentIcon: {\r\n color: \"#555\"\r\n },\r\n inputAdornment: {\r\n position: \"relative\"\r\n }\r\n};\r\n\r\nclass Step1 extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n firstname: \"\",\r\n firstnameState: \"\",\r\n lastname: \"\",\r\n lastnameState: \"\",\r\n email: \"\",\r\n emailState: \"\"\r\n };\r\n }\r\n sendState() {\r\n return this.state;\r\n }\r\n // function that returns true if value is email, false otherwise\r\n verifyEmail(value) {\r\n var emailRex = /^(([^<>()[\\]\\\\.,;:\\s@\"]+(\\.[^<>()[\\]\\\\.,;:\\s@\"]+)*)|(\".+\"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\])|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))$/;\r\n if (emailRex.test(value)) {\r\n return true;\r\n }\r\n return false;\r\n }\r\n // function that verifies if a string has a given length or not\r\n verifyLength(value, length) {\r\n if (value.length >= length) {\r\n return true;\r\n }\r\n return false;\r\n }\r\n change(event, stateName, type, stateNameEqualTo) {\r\n switch (type) {\r\n case \"email\":\r\n if (this.verifyEmail(event.target.value)) {\r\n this.setState({ [stateName + \"State\"]: \"success\" });\r\n } else {\r\n this.setState({ [stateName + \"State\"]: \"error\" });\r\n }\r\n break;\r\n case \"length\":\r\n if (this.verifyLength(event.target.value, stateNameEqualTo)) {\r\n this.setState({ [stateName + \"State\"]: \"success\" });\r\n } else {\r\n this.setState({ [stateName + \"State\"]: \"error\" });\r\n }\r\n break;\r\n default:\r\n break;\r\n }\r\n this.setState({ [stateName]: event.target.value });\r\n }\r\n isValidated() {\r\n if (\r\n this.state.firstnameState === \"success\" &&\r\n this.state.lastnameState === \"success\" &&\r\n this.state.emailState === \"success\"\r\n ) {\r\n return true;\r\n } else {\r\n if (this.state.firstnameState !== \"success\") {\r\n this.setState({ firstnameState: \"error\" });\r\n }\r\n if (this.state.lastnameState !== \"success\") {\r\n this.setState({ lastnameState: \"error\" });\r\n }\r\n if (this.state.emailState !== \"success\") {\r\n this.setState({ emailState: \"error\" });\r\n }\r\n }\r\n return false;\r\n }\r\n render() {\r\n const { classes } = this.props;\r\n return (\r\n \r\n 
\r\n handleImageChange(e)} />\r\n
\r\n Choose Picture
\r\n\r\n Let{\"'\"}s start with the basic information (with validation)\r\n
\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n Choose City\r\n \r\n \r\n \r\n Choose City\r\n \r\n \r\n Paris\r\n \r\n \r\n Bucharest\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nStep2.propTypes = {\r\n classes: PropTypes.object\r\n};\r\n\r\nexport default withStyles(style)(Step2);\r\n","import React from \"react\";\r\nimport PropTypes from \"prop-types\";\r\n// @material-ui/core components\r\nimport withStyles from \"@material-ui/core/styles/withStyles\";\r\nimport Select from \"@material-ui/core/Select\";\r\nimport MenuItem from \"@material-ui/core/MenuItem\";\r\nimport InputLabel from \"@material-ui/core/InputLabel\";\r\nimport FormControl from \"@material-ui/core/FormControl\";\r\n\r\n// core components\r\nimport CustomInput from \"components/CustomInput/CustomInput.js\";\r\nimport GridContainer from \"components/Grid/GridContainer.js\";\r\nimport GridItem from \"components/Grid/GridItem.js\";\r\n\r\nimport customSelectStyle from \"assets/jss/material-dashboard-pro-react/customSelectStyle.js\";\r\n\r\nconst style = {\r\n infoText: {\r\n fontWeight: \"300\",\r\n margin: \"10px 0 30px\",\r\n textAlign: \"center\"\r\n },\r\n ...customSelectStyle\r\n};\r\n\r\nclass Step3 extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n simpleSelect: \"\",\r\n desgin: false,\r\n code: false,\r\n develop: false\r\n };\r\n }\r\n sendState() {\r\n return this.state;\r\n }\r\n handleSimple = event => {\r\n this.setState({ [event.target.name]: event.target.value });\r\n };\r\n isValidated() {\r\n return true;\r\n }\r\n render() {\r\n const { classes } = this.props;\r\n return (\r\n What are you doing? (checkboxes)
\r\n\r\n
\r\n Design
\r\n\r\n
\r\n Code
\r\n\r\n
\r\n Develop
\r\nAre you living in a nice area?
\r\n\r\n {/* use this button to add a like kind of action */}\r\n {\r\n let obj = data.find((o) => o.id === key);\r\n alert(\r\n \"You've clicked LIKE button on \\n{ \\nName: \" +\r\n obj.name +\r\n \", \\nposition: \" +\r\n obj.position +\r\n \", \\noffice: \" +\r\n obj.office +\r\n \", \\nage: \" +\r\n obj.age +\r\n \"\\n}.\"\r\n );\r\n }}\r\n color=\"info\"\r\n className=\"like\"\r\n >\r\n {\r\n let obj = data.find((o) => o.id === key);\r\n alert(\r\n \"You've clicked EDIT button on \\n{ \\nName: \" +\r\n obj.name +\r\n \", \\nposition: \" +\r\n obj.position +\r\n \", \\noffice: \" +\r\n obj.office +\r\n \", \\nage: \" +\r\n obj.age +\r\n \"\\n}.\"\r\n );\r\n }}\r\n color=\"warning\"\r\n className=\"edit\"\r\n >\r\n {\r\n var newData = data;\r\n newData.find((o, i) => {\r\n if (o.id === key) {\r\n // here you should add some custom code so you can delete the data\r\n // from this component and from your server as well\r\n newData.splice(i, 1);\r\n return true;\r\n }\r\n return false;\r\n });\r\n setData([...newData]);\r\n }}\r\n color=\"danger\"\r\n className=\"remove\"\r\n >\r\n
\r\n ),\r\n };\r\n })\r\n );\r\n const classes = useStyles();\r\n return (\r\n React Table
\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n setOpenCreate(false)}\r\n aria-labelledby=\"responsive-dialog-title\"\r\n >\r\n \r\n {\" Đăng ký tài khoản\"}\r\n \r\n \r\n \r\n \r\n \r\n \r\n onchangeInput(\"UserName\", e.target.value),\r\n }}\r\n formControlProps={{\r\n fullWidth: true,\r\n }}\r\n helperText={errorText.UserName ? errorText.UserName : \"\"}\r\n error={errorFile.UserName}\r\n />\r\n \r\n \r\n \r\n \r\n Loại tài khoản\r\n \r\n onchangeInput(\"Role\", e.target.value)}\r\n MenuProps={{ className: classes.selectMenu }}\r\n classes={{ select: classes.select }}\r\n error={errorFile.Role}\r\n disabled\r\n >\r\n {/* \r\n Loại tài khoản\r\n */}\r\n \r\n User\r\n \r\n \r\n Admin\r\n \r\n \r\n \r\n {errorText.Role ? errorText.Role : \"\"}\r\n \r\n \r\n \r\n \r\n onchangeInput(\"Email\", e.target.value),\r\n }}\r\n formControlProps={{\r\n fullWidth: true,\r\n }}\r\n helperText={errorText.Email ? errorText.Email : \"\"}\r\n error={errorFile.Email}\r\n />\r\n \r\n \r\n \r\n onchangeInput(\"Password\", e.target.value),\r\n }}\r\n formControlProps={{\r\n fullWidth: true,\r\n }}\r\n helperText={errorText.Password ? errorText.Password : \"\"}\r\n error={errorFile.Password}\r\n />\r\n \r\n \r\n \r\n onchangeInput(\"FirstName\", e.target.value),\r\n }}\r\n formControlProps={{\r\n fullWidth: true,\r\n }}\r\n helperText={errorText.FirstName ? errorText.FirstName : \"\"}\r\n error={errorFile.FirstName}\r\n />\r\n \r\n \r\n \r\n onchangeInput(\"LastName\", e.target.value),\r\n }}\r\n formControlProps={{\r\n fullWidth: true,\r\n }}\r\n helperText={errorText.LastName ? errorText.LastName : \"\"}\r\n error={errorFile.LastName}\r\n />\r\n \r\n \r\n \r\n \r\n Trạng Thái\r\n \r\n \r\n onchangeInput(\"IsActive\", e.target.value)\r\n }\r\n MenuProps={{ className: classes.selectMenu }}\r\n classes={{ select: classes.select }}\r\n error={errorFile.IsActive}\r\n >\r\n \r\n Trạng Thái\r\n \r\n \r\n Không hoạt động\r\n \r\n \r\n Hoạt động\r\n \r\n \r\n \r\n {errorText.IsActive ? errorText.IsActive : \"\"}\r\n \r\n \r\n \r\n \r\n \r\n \r\n Giới hạn mạng điện thoại\r\n \r\n \r\n onchangeInput(\"MobileNetworkSupplier\", e.target.value)\r\n }\r\n MenuProps={{ className: classes.selectMenu }}\r\n classes={{ select: classes.select }}\r\n error={errorFile.MobileNetworkSupplier}\r\n >\r\n \r\n Giới hạn mạng điện thoại\r\n \r\n {MobileNetworkSupplierList &&\r\n MobileNetworkSupplierList.map((e, i) => {\r\n return (\r\n \r\n {e.value}\r\n \r\n );\r\n })}\r\n \r\n \r\n {errorText.MobileNetworkSupplier ? errorText.MobileNetworkSupplier : \"\"}\r\n \r\n \r\n \r\n \r\n \r\n \r\n Giới hạn dữ liệu\r\n \r\n \r\n onchangeInput(\"DataCategory\", e.target.value)\r\n }\r\n MenuProps={{ className: classes.selectMenu }}\r\n classes={{ select: classes.select }}\r\n error={errorFile.DataCategory}\r\n >\r\n \r\n Giới hạn dữ liệu\r\n \r\n {listCategory &&\r\n listCategory.map((e, i) => {\r\n return (\r\n \r\n {e.value}\r\n \r\n );\r\n })}\r\n \r\n \r\n {errorText.DataCategory ? errorText.DataCategory : \"\"}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n setOpenTransferDialog(false)}\r\n onSave={() => {\r\n transferSuccess();\r\n setOpenTransferDialog(false);\r\n }}\r\n />\r\n setOpenBlogDialog(false)}\r\n >\r\n setOpenEditDialog(false)}\r\n >\r\n \r\n
\r\n );\r\n}\r\n\r\nconst DialogBlockUser = (props) => {\r\n\r\n const [usersTextSearch, setUsersTextSearch] = useState(\"\");\r\n const [data, setData] = useState([]);\r\n const { open, classes, handleClose } = props\r\n const [openLoading, setOpenLoading] = useState(false);\r\n\r\n const getUserListByName = async () => {\r\n try {\r\n let result;\r\n const currentSession = getSession();\r\n if (currentSession.userRoles != \"Admin\") {\r\n result = await fetchClient.get(`/users/iUserByUserName/?userName=${usersTextSearch}`);\r\n }\r\n else {\r\n result = await fetchClient.get(`/users/iUser-my-team/?userName=${usersTextSearch}`);\r\n }\r\n if (result) {\r\n return result;\r\n }\r\n } catch (e) {\r\n console.log(e);\r\n }\r\n };\r\n useEffect(() => {\r\n handSearch();\r\n }, [open])\r\n\r\n const closeDialog = () => {\r\n setUsersTextSearch(\"\");\r\n handleClose();\r\n }\r\n\r\n const RoundButtons = (props) => {\r\n const { block, onclick } = props\r\n return (\r\n <>\r\n {block ? Danh sách nhân viên
\r\n\r\n
\r\n Đang hoạt động
:Dừng hoạt động
,\r\nBảng dữ liệu
\r\n\r\n
\r\n
\r\n \r\n \r\n \r\n \r\n setFiles(files[0])}\r\n showPreviews={false}\r\n maxFileSize={209715200}\r\n filesLimit={1}\r\n dropzoneText=\"Kéo, thả file hoặc click vào đây để tải file lên.\"\r\n clearOnUnmount\r\n fullWidth\r\n acceptedFiles={[\r\n \"application/xhtml+xml\",\r\n \"application/vnd.ms-excel\",\r\n \"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet\",\r\n \".csv\",\r\n ]}\r\n />\r\n \r\n {errorText.files ? errorText.files : \"\"}\r\n \r\n {files && (\r\n \r\n Xem trước 10 bản ghi\r\n \r\n )}\r\n \r\n \r\n \r\n \r\n \r\n \r\n Loại dữ liệu\r\n \r\n setDataType(e.target.value)}\r\n MenuProps={{ className: classes.selectMenu }}\r\n classes={{ select: classes.select }}\r\n >\r\n {listCategory &&\r\n listCategory.map((e, i) => {\r\n return (\r\n \r\n {e.value}\r\n \r\n );\r\n })}\r\n \r\n \r\n {errorText.dataType ? errorText.dataType : \"\"}\r\n \r\n \r\n \r\n setIsOverRide(event.target.checked)}\r\n name=\"isOverRide\"\r\n color=\"secondary\"\r\n />\r\n }\r\n label=\"Ghi đè thông tin\"\r\n />\r\n \r\n {isOverRide && (\r\n <>\r\n \r\n \r\n Trạng thái ghi đè\r\n \r\n setOverrideStatusList(e.target.value)}\r\n MenuProps={{ className: classes.selectMenu }}\r\n classes={{ select: classes.select }}\r\n >\r\n {\r\n CALL_STATUS.map((e, i) => {\r\n return (\r\n \r\n {e.label}\r\n \r\n );\r\n })}\r\n \r\n \r\n \r\n setOverrideFrom(date)}\r\n />\r\n setOverrideTo(date)}\r\n />\r\n )\r\n }\r\n \r\n Upload\r\n \r\n \r\n \r\n \r\n\r\n {/* Table data */}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {\r\n setOpen(false);\r\n setMessage(\"\");\r\n }}\r\n >\r\n {message} \r\n \r\n {\r\n setOpenSuccess(false);\r\n setMessage(\"\");\r\n }}\r\n >\r\n {message} \r\n \r\n \r\n \r\n
}\r\n \r\n );\r\n}\r\n\r\nconst PreviewDialog = (props) => {\r\n const { openDialog, handleCloseDialog, dataPreview, classes } = props;\r\n return (\r\n \r\n Bảng danh sách file tải lên\r\n
\r\n\r\n
\r\n Bảng dữ liệu
\r\n\r\n
,\r\n e.all,\r\n \r\n {e.missCall}\r\n
\r\n {e.missCall > 0 && !roleAdminBase && }\r\n Bảng danh mục hoạt động
\r\nBảng danh mục không hoạt động
\r\nBảng chi tiết danh mục
\r\nLịch sử cuộc gọi
\r\nDanh sách dữ liệu
\r\n\r\n {data.length > 0 && data.map((e) =>\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {statusCustomer.filter(x => x.key == e.logStatusCode)[0]?.value}\r\n
\r\n {e.createdOn ? moment(e.createdOn).format(\"MM-DD-YYYY HH:mm:ss\") : \"---\"}\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n {/* \r\n */}\r\n \r\n )}\r\n
\r\n {e.fullName}
\r\n{e.productBuy}
\r\n\r\n {e.createdOn ? moment(e.createdOn).format(\"MM-DD-YYYY HH:mm:ss\") : \"---\"}\r\n
{formatPhoneNumber(e.phoneNumber)}
\r\n{formatCurrency(e.cod)}
\r\n{e.product}
\r\n{e.address}
\r\nThống kê theo nhân viên
\r\n{title}
\r\nTổng số cuộc gọi
\r\n\r\n {checkNumber(dataAll)}\r\n
\r\nSố lượng khách đồng ý
\r\n{checkNumber(dataCall.Accepted)}
\r\n\r\n Số lượng khách không bắt máy\r\n
\r\n{checkNumber(dataCall.MissCall)}
\r\nSố lượng khách từ chối
\r\n{checkNumber(dataCall.Rejected)}
\r\n\r\n Số lượng không liên lạc được\r\n
\r\n{checkNumber(dataCall.WrongPhoneNumber)}
\r\n\r\n Số lượng bỏ qua\r\n
\r\n{checkNumber(dataCall.Ignore)}
\r\nĐang hoạt động
:Dừng hoạt động
,\r\n <>\r\n \r\n \r\n \r\n ]);\r\n })\r\n setDataMyTeam(dataMapTable)\r\n })\r\n }\r\n\r\n\r\n const displayDataCategory = (dataCategoryListStr) => {\r\n if (!dataCategoryListStr) return null;\r\n const datacategoryList = dataCategoryListStr.split(\",\");\r\n let listCategoryName = [];\r\n for (let index = 0; index < datacategoryList.length; index++) {\r\n const categoryId = datacategoryList[index];\r\n const category = listCategory.filter((item) => item.key == categoryId);\r\n if (category && category.length > 0) {\r\n listCategoryName.push(category[0].value);\r\n } else {\r\n listCategoryName.push(`(${categoryId})`);\r\n }\r\n }\r\n\r\n return listCategoryName.join(\", \");\r\n };\r\n const editUser = (value) => {\r\n // Todo Edit\r\n setIdEdit(value)\r\n setOpenCreate(true)\r\n }\r\n\r\n const callDeleteUser = async (id) => {\r\n return await fetchClient.post(`/team/delete/?userId=${id}`);\r\n };\r\n\r\n const deleteUser = (id) => {\r\n callDeleteUser(id).then((result) => {\r\n handleReloadTable();\r\n })\r\n }\r\n\r\n const getUserListOutTeam = async () => {\r\n return await fetchClient.get(\"/users/list-user-role/?roleName=Basic\");\r\n };\r\n\r\n const callAddUser = async (id) => {\r\n try {\r\n return await fetchClient.post(`/team/add/?userId=${id}`);\r\n } catch (error) {\r\n setSnackbar({\r\n ...snackbarData,\r\n open: true,\r\n status: 'error',\r\n msg: 'Bạn không thể thêm tài khoản này vào nhóm'\r\n })\r\n }\r\n };\r\n\r\n const addUser = (id) => {\r\n callAddUser(id).then((result) => {\r\n if (result) {\r\n handleReloadTable();\r\n\r\n }\r\n })\r\n }\r\n\r\n const getDataOutTeam = () => {\r\n getUserListOutTeam().then((result) => {\r\n if (result) {\r\n var dataTable = result.data;\r\n var dataMapTable = [];\r\n dataTable && dataTable.forEach((e) => {\r\n dataMapTable.push([\r\n e.userName,\r\n e.email,\r\n e.mobileNetworkSupplier,\r\n displayDataCategory(e.dataCategory),\r\n e.isActive ?\r\nĐang hoạt động
:Dừng hoạt động
,\r\n \r\n ]);\r\n })\r\n setDataOutTeam(dataMapTable)\r\n }\r\n })\r\n }\r\n return (\r\nBảng danh sách nhóm
\r\nBảng danh sách thành viên trong nhóm
\r\nBảng danh sách thành viên chưa có nhóm
\r\n\r\n
\r\n \r\n );\r\n}\r\n","import {\r\n defaultFont,\r\n dangerColor,\r\n whiteColor\r\n} from \"assets/jss/material-dashboard-pro-react.js\";\r\n\r\nimport customDropdownStyle from \"assets/jss/material-dashboard-pro-react/components/customDropdownStyle.js\";\r\n\r\nconst adminNavbarLinksStyle = theme => ({\r\n ...customDropdownStyle(theme),\r\n search: {\r\n margin: \"0\",\r\n paddingTop: \"7px\",\r\n paddingBottom: \"7px\",\r\n [theme.breakpoints.down(\"sm\")]: {\r\n margin: \"10px 15px\",\r\n float: \"none !important\",\r\n paddingTop: \"1px\",\r\n paddingBottom: \"1px\",\r\n padding: \"10px 15px\",\r\n width: \"auto\"\r\n }\r\n },\r\n searchInput: {\r\n paddingTop: \"2px\"\r\n },\r\n searchRTL: {\r\n [theme.breakpoints.down(\"sm\")]: {\r\n marginRight: \"18px !important\"\r\n },\r\n [theme.breakpoints.up(\"md\")]: {\r\n marginLeft: \"12px\"\r\n }\r\n },\r\n linkText: {\r\n zIndex: \"4\",\r\n ...defaultFont,\r\n fontSize: \"14px\",\r\n margin: \"0!important\",\r\n textTransform: \"none\"\r\n },\r\n buttonLink: {\r\n [theme.breakpoints.down(\"sm\")]: {\r\n display: \"flex\",\r\n margin: \"5px 15px 0\",\r\n width: \"auto\",\r\n height: \"auto\",\r\n \"& svg\": {\r\n width: \"30px\",\r\n height: \"24px\",\r\n marginRight: \"19px\",\r\n marginLeft: \"3px\"\r\n },\r\n \"& .fab,& .fas,& .far,& .fal,& .material-icons\": {\r\n width: \"30px\",\r\n fontSize: \"24px\",\r\n lineHeight: \"30px\",\r\n marginRight: \"19px\",\r\n marginLeft: \"3px\"\r\n }\r\n }\r\n },\r\n searchButton: {\r\n [theme.breakpoints.down(\"sm\")]: {\r\n top: \"-50px !important\",\r\n marginRight: \"38px\",\r\n float: \"right\"\r\n }\r\n },\r\n top: {\r\n zIndex: \"4\"\r\n },\r\n searchIcon: {\r\n width: \"17px\",\r\n zIndex: \"4\"\r\n },\r\n links: {\r\n width: \"20px\",\r\n height: \"20px\",\r\n zIndex: \"4\",\r\n [theme.breakpoints.down(\"sm\")]: {\r\n display: \"block\",\r\n width: \"30px\",\r\n height: \"30px\",\r\n color: \"inherit\",\r\n opacity: \"0.8\",\r\n marginRight: \"16px\",\r\n marginLeft: \"-5px\"\r\n }\r\n },\r\n notifications: {\r\n zIndex: \"4\",\r\n [theme.breakpoints.up(\"md\")]: {\r\n position: \"absolute\",\r\n top: \"5px\",\r\n border: \"1px solid \" + whiteColor,\r\n right: \"5px\",\r\n fontSize: \"9px\",\r\n background: dangerColor[0],\r\n color: whiteColor,\r\n minWidth: \"16px\",\r\n height: \"16px\",\r\n borderRadius: \"10px\",\r\n textAlign: \"center\",\r\n lineHeight: \"14px\",\r\n verticalAlign: \"middle\",\r\n display: \"block\"\r\n },\r\n [theme.breakpoints.down(\"sm\")]: {\r\n ...defaultFont,\r\n fontSize: \"14px\",\r\n marginRight: \"8px\"\r\n }\r\n },\r\n wrapperRTL: {\r\n [theme.breakpoints.up(\"md\")]: {\r\n paddingLeft: \"16px\"\r\n }\r\n },\r\n buttonLinkRTL: {\r\n [theme.breakpoints.down(\"sm\")]: {\r\n alignItems: \"center\",\r\n justifyContent: \"flex-end\",\r\n width: \"-webkit-fill-available\",\r\n margin: \"10px 15px 0\",\r\n padding: \"10px 15px\",\r\n display: \"block\",\r\n position: \"relative\"\r\n }\r\n },\r\n labelRTL: {\r\n [theme.breakpoints.down(\"sm\")]: {\r\n flexDirection: \"row-reverse\",\r\n justifyContent: \"initial\",\r\n display: \"flex\"\r\n }\r\n },\r\n linksRTL: {\r\n [theme.breakpoints.down(\"sm\")]: {\r\n marginRight: \"-5px !important\",\r\n marginLeft: \"16px !important\"\r\n }\r\n },\r\n managerClasses: {\r\n [theme.breakpoints.up(\"md\")]: {\r\n display: \"inline-block\"\r\n }\r\n },\r\n headerLinksSvg: {\r\n width: \"20px !important\",\r\n height: \"20px !important\"\r\n }\r\n});\r\n\r\nexport default adminNavbarLinksStyle;\r\n","import React from \"react\";\r\nimport classNames from \"classnames\";\r\nimport PropTypes from \"prop-types\";\r\n// import { Manager, Target, Popper } from \"react-popper\";\r\n\r\n// @material-ui/core components\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport MenuItem from \"@material-ui/core/MenuItem\";\r\nimport MenuList from \"@material-ui/core/MenuList\";\r\nimport ClickAwayListener from \"@material-ui/core/ClickAwayListener\";\r\nimport Paper from \"@material-ui/core/Paper\";\r\nimport Grow from \"@material-ui/core/Grow\";\r\nimport Hidden from \"@material-ui/core/Hidden\";\r\nimport Popper from \"@material-ui/core/Popper\";\r\nimport Divider from \"@material-ui/core/Divider\";\r\n\r\n// @material-ui/icons\r\nimport Person from \"@material-ui/icons/Person\";\r\nimport Notifications from \"@material-ui/icons/Notifications\";\r\nimport Dashboard from \"@material-ui/icons/Dashboard\";\r\nimport Search from \"@material-ui/icons/Search\";\r\n\r\n// core components\r\nimport CustomInput from \"components/CustomInput/CustomInput.js\";\r\nimport Button from \"components/CustomButtons/Button.js\";\r\n\r\nimport styles from \"assets/jss/material-dashboard-pro-react/components/adminNavbarLinksStyle.js\";\r\n\r\nconst useStyles = makeStyles(styles);\r\n\r\nexport default function HeaderLinks(props) {\r\n const [openNotification, setOpenNotification] = React.useState(null);\r\n const handleClickNotification = event => {\r\n if (openNotification && openNotification.contains(event.target)) {\r\n setOpenNotification(null);\r\n } else {\r\n setOpenNotification(event.currentTarget);\r\n }\r\n };\r\n const handleCloseNotification = () => {\r\n setOpenNotification(null);\r\n };\r\n const [openProfile, setOpenProfile] = React.useState(null);\r\n const handleClickProfile = event => {\r\n if (openProfile && openProfile.contains(event.target)) {\r\n setOpenProfile(null);\r\n } else {\r\n setOpenProfile(event.currentTarget);\r\n }\r\n };\r\n const handleCloseProfile = () => {\r\n setOpenProfile(null);\r\n };\r\n const classes = useStyles();\r\n const { rtlActive } = props;\r\n const searchButton =\r\n classes.top +\r\n \" \" +\r\n classes.searchButton +\r\n \" \" +\r\n classNames({\r\n [classes.searchRTL]: rtlActive\r\n });\r\n const dropdownItem = classNames(classes.dropdownItem, classes.primaryHover, {\r\n [classes.dropdownItemRTL]: rtlActive\r\n });\r\n const wrapper = classNames({\r\n [classes.wrapperRTL]: rtlActive\r\n });\r\n const managerClasses = classNames({\r\n [classes.managerClasses]: true\r\n });\r\n return (\r\n \r\n \r\n \r\n {getRoutes(routes)}\r\n \r\n \r\n
\r\n \r\n \r\n \r\n \r\n \r\n {rtlActive ? \"لوحة القيادة\" : \"Dashboard\"}\r\n \r\n \r\n \r\n
\r\n );\r\n}\r\n\r\nHeaderLinks.propTypes = {\r\n rtlActive: PropTypes.bool\r\n};\r\n","import {\r\n containerFluid,\r\n defaultFont,\r\n primaryColor,\r\n defaultBoxShadow,\r\n infoColor,\r\n successColor,\r\n warningColor,\r\n dangerColor,\r\n whiteColor,\r\n grayColor,\r\n} from \"assets/jss/material-dashboard-pro-react.js\";\r\n\r\nconst headerStyle = () => ({\r\n appBar: {\r\n backgroundColor: \"transparent\",\r\n boxShadow: \"none\",\r\n borderBottom: \"0\",\r\n marginBottom: \"0\",\r\n position: \"absolute\",\r\n width: \"100%\",\r\n paddingTop: \"10px\",\r\n zIndex: \"1029\",\r\n color: grayColor[6],\r\n border: \"0\",\r\n borderRadius: \"3px\",\r\n padding: \"10px 0\",\r\n transition: \"all 150ms ease 0s\",\r\n minHeight: \"50px\",\r\n display: \"block\",\r\n },\r\n container: {\r\n ...containerFluid,\r\n minHeight: \"50px\",\r\n },\r\n flex: {\r\n flex: 1,\r\n },\r\n title: {\r\n ...defaultFont,\r\n lineHeight: \"30px\",\r\n fontSize: \"24px\",\r\n borderRadius: \"3px\",\r\n textTransform: \"none\",\r\n color: \"inherit\",\r\n paddingTop: \"0.625rem\",\r\n paddingBottom: \"0.625rem\",\r\n margin: \"0 !important\",\r\n letterSpacing: \"unset\",\r\n \"&:hover,&:focus\": {\r\n background: \"transparent\",\r\n },\r\n },\r\n primary: {\r\n backgroundColor: primaryColor[0],\r\n color: whiteColor,\r\n ...defaultBoxShadow,\r\n },\r\n info: {\r\n backgroundColor: infoColor[0],\r\n color: whiteColor,\r\n ...defaultBoxShadow,\r\n },\r\n success: {\r\n backgroundColor: successColor[0],\r\n color: whiteColor,\r\n ...defaultBoxShadow,\r\n },\r\n warning: {\r\n backgroundColor: warningColor[0],\r\n color: whiteColor,\r\n ...defaultBoxShadow,\r\n },\r\n danger: {\r\n backgroundColor: dangerColor[0],\r\n color: whiteColor,\r\n ...defaultBoxShadow,\r\n },\r\n sidebarMinimize: {\r\n float: \"left\",\r\n padding: \"0 0 0 15px\",\r\n display: \"block\",\r\n color: grayColor[6],\r\n },\r\n sidebarMinimizeRTL: {\r\n padding: \"0 15px 0 0 !important\",\r\n },\r\n sidebarMiniIcon: {\r\n width: \"20px\",\r\n height: \"17px\",\r\n },\r\n});\r\n\r\nexport default headerStyle;\r\n","import React from \"react\";\r\n// nodejs library to set properties for components\r\nimport PropTypes from \"prop-types\";\r\nimport cx from \"classnames\";\r\n\r\n// @material-ui/core components\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport AppBar from \"@material-ui/core/AppBar\";\r\nimport Toolbar from \"@material-ui/core/Toolbar\";\r\nimport Hidden from \"@material-ui/core/Hidden\";\r\n\r\n// material-ui icons\r\nimport Menu from \"@material-ui/icons/Menu\";\r\nimport MoreVert from \"@material-ui/icons/MoreVert\";\r\nimport ViewList from \"@material-ui/icons/ViewList\";\r\n\r\n// core components\r\nimport AdminNavbarLinks from \"./AdminNavbarLinks\";\r\nimport Button from \"components/CustomButtons/Button.js\";\r\n\r\nimport styles from \"assets/jss/material-dashboard-pro-react/components/adminNavbarStyle.js\";\r\n\r\nconst useStyles = makeStyles(styles);\r\n\r\nexport default function AdminNavbar(props) {\r\n const classes = useStyles();\r\n const { color, rtlActive, brandText } = props;\r\n const appBarClasses = cx({\r\n [\" \" + classes[color]]: color,\r\n });\r\n const sidebarMinimize =\r\n classes.sidebarMinimize +\r\n \" \" +\r\n cx({\r\n [classes.sidebarMinimizeRTL]: rtlActive,\r\n });\r\n return (\r\n \r\n \r\n \r\n \r\n {rtlActive ? \"إعلام\" : \"Notification\"}\r\n \r\n \r\n \r\n \r\n {({ TransitionProps }) => (\r\n \r\n \r\n \r\n \r\n \r\n {rtlActive\r\n ? \"إجلاء أوزار الأسيوي حين بل, كما\"\r\n : \"Mike John responded to your email\"}\r\n \r\n \r\n {rtlActive\r\n ? \"شعار إعلان الأرضية قد ذلك\"\r\n : \"You have 5 new tasks\"}\r\n \r\n \r\n {rtlActive\r\n ? \"ثمّة الخاصّة و على. مع جيما\"\r\n : \"You're now friend with Andrew\"}\r\n \r\n \r\n {rtlActive ? \"قد علاقة\" : \"Another Notification\"}\r\n \r\n \r\n {rtlActive ? \"قد فاتّبع\" : \"Another One\"}\r\n \r\n \r\n \r\n \r\n \r\n )}\r\n \r\n
\r\n\r\n \r\n \r\n \r\n \r\n {rtlActive ? \"الملف الشخصي\" : \"Profile\"}\r\n \r\n \r\n \r\n \r\n {({ TransitionProps }) => (\r\n \r\n \r\n \r\n \r\n \r\n {rtlActive ? \"الملف الشخصي\" : \"Profile\"}\r\n \r\n \r\n {rtlActive ? \"الإعدادات\" : \"Settings\"}\r\n \r\n \r\n {rtlActive ? \"الخروج\" : \"Log out\"}\r\n \r\n \r\n \r\n \r\n \r\n )}\r\n \r\n
\r\n \r\n {props.miniActive ? (\r\n \r\n \r\n
\r\n \r\n {/* Here we create navbar brand, based on route name */}\r\n \r\n
\r\n \r\n {user}\r\n {headerLinks}\r\n {links}\r\n
\r\n );\r\n }\r\n}\r\n\r\nclass Sidebar extends React.Component {\r\n constructor(props) {\r\n super(props);\r\n this.state = {\r\n openAvatar: false,\r\n miniActive: true,\r\n ...this.getCollapseStates(props.routes),\r\n };\r\n }\r\n mainPanel = React.createRef();\r\n // this creates the intial state of this component based on the collapse routes\r\n // that it gets through this.props.routes\r\n getCollapseStates = (routes) => {\r\n let initialState = {};\r\n routes.map((prop) => {\r\n if (prop.collapse) {\r\n initialState = {\r\n [prop.state]: this.getCollapseInitialState(prop.views),\r\n ...this.getCollapseStates(prop.views),\r\n ...initialState,\r\n };\r\n }\r\n return null;\r\n });\r\n return initialState;\r\n };\r\n // this verifies if any of the collapses should be default opened on a rerender of this component\r\n // for example, on the refresh of the page,\r\n // while on the src/views/forms/RegularForms.jsx - route /admin/regular-forms\r\n getCollapseInitialState(routes) {\r\n for (let i = 0; i < routes.length; i++) {\r\n if (routes[i].collapse && this.getCollapseInitialState(routes[i].views)) {\r\n return true;\r\n } else if (window.location.href.indexOf(routes[i].path) !== -1) {\r\n return true;\r\n }\r\n }\r\n return false;\r\n }\r\n // verifies if routeName is the one active (in browser input)\r\n activeRoute = (routeName) => {\r\n return window.location.href.indexOf(routeName) > -1 ? \"active\" : \"\";\r\n };\r\n openCollapse(collapse) {\r\n var st = {};\r\n st[collapse] = !this.state[collapse];\r\n this.setState(st);\r\n }\r\n // this function creates the links and collapses that appear in the sidebar (left menu)\r\n createLinks = (routes) => {\r\n const { classes, color, rtlActive } = this.props;\r\n return routes.map((prop, key) => {\r\n if (prop.redirect) {\r\n return null;\r\n }\r\n if (prop.collapse) {\r\n var st = {};\r\n st[prop[\"state\"]] = !this.state[prop.state];\r\n const navLinkClasses =\r\n classes.itemLink +\r\n \" \" +\r\n cx({\r\n [\" \" + classes.collapseActive]: this.getCollapseInitialState(\r\n prop.views\r\n ),\r\n });\r\n const itemText =\r\n classes.itemText +\r\n \" \" +\r\n cx({\r\n [classes.itemTextMini]:\r\n this.props.miniActive && this.state.miniActive,\r\n [classes.itemTextMiniRTL]:\r\n rtlActive && this.props.miniActive && this.state.miniActive,\r\n [classes.itemTextRTL]: rtlActive,\r\n });\r\n const collapseItemText =\r\n classes.collapseItemText +\r\n \" \" +\r\n cx({\r\n [classes.collapseItemTextMini]:\r\n this.props.miniActive && this.state.miniActive,\r\n [classes.collapseItemTextMiniRTL]:\r\n rtlActive && this.props.miniActive && this.state.miniActive,\r\n [classes.collapseItemTextRTL]: rtlActive,\r\n });\r\n const itemIcon =\r\n classes.itemIcon +\r\n \" \" +\r\n cx({\r\n [classes.itemIconRTL]: rtlActive,\r\n });\r\n const caret =\r\n classes.caret +\r\n \" \" +\r\n cx({\r\n [classes.caretRTL]: rtlActive,\r\n });\r\n const collapseItemMini =\r\n classes.collapseItemMini +\r\n \" \" +\r\n cx({\r\n [classes.collapseItemMiniRTL]: rtlActive,\r\n });\r\n return (\r\n - \r\n {this.createLinks(prop.views)}\r\n
\r\n
\r\n );\r\n var links = (\r\n \r\n \r\n
\r\n - \r\n
- \r\n
- {this.createLinks(routes)}
\r\n \r\n \r\n \r\n
\r\n );\r\n const drawerPaper =\r\n classes.drawerPaper +\r\n \" \" +\r\n cx({\r\n [classes.drawerPaperMini]:\r\n this.props.miniActive && this.state.miniActive,\r\n [classes.drawerPaperRTL]: rtlActive,\r\n });\r\n const sidebarWrapper =\r\n classes.sidebarWrapper +\r\n \" \" +\r\n cx({\r\n [classes.drawerPaperMini]:\r\n this.props.miniActive && this.state.miniActive,\r\n [classes.sidebarWrapperWithPerfectScrollbar]:\r\n navigator.platform.indexOf(\"Win\") > -1,\r\n });\r\n return (\r\n \r\n \r\n \r\n {brand}\r\n \r\n \r\n this.setState({ miniActive: false })}\r\n onMouseOut={() => this.setState({ miniActive: true })}\r\n anchor={rtlActive ? \"right\" : \"left\"}\r\n variant=\"permanent\"\r\n open\r\n classes={{\r\n paper: drawerPaper + \" \" + classes[bgColor + \"Background\"],\r\n }}\r\n >\r\n {brand}\r\n \r\n
\r\n );\r\n }\r\n}\r\n\r\nSidebar.defaultProps = {\r\n bgColor: \"blue\",\r\n};\r\n\r\nSidebar.propTypes = {\r\n classes: PropTypes.object.isRequired,\r\n bgColor: PropTypes.oneOf([\"white\", \"black\", \"blue\"]),\r\n rtlActive: PropTypes.bool,\r\n color: PropTypes.oneOf([\r\n \"white\",\r\n \"red\",\r\n \"orange\",\r\n \"green\",\r\n \"blue\",\r\n \"purple\",\r\n \"rose\",\r\n ]),\r\n logo: PropTypes.string,\r\n logoText: PropTypes.string,\r\n image: PropTypes.string,\r\n routes: PropTypes.arrayOf(PropTypes.object),\r\n miniActive: PropTypes.bool,\r\n open: PropTypes.bool,\r\n handleDrawerToggle: PropTypes.func,\r\n};\r\n\r\nSidebarWrapper.propTypes = {\r\n className: PropTypes.string,\r\n user: PropTypes.object,\r\n headerLinks: PropTypes.object,\r\n links: PropTypes.object,\r\n};\r\n\r\nexport default withStyles(sidebarStyle)(Sidebar);\r\n","/*eslint-disable*/\r\nimport React, { Component } from \"react\";\r\nimport { NavLink } from \"react-router-dom\";\r\n// nodejs library to set properties for components\r\nimport PropTypes from \"prop-types\";\r\n\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\nimport Switch from \"@material-ui/core/Switch\";\r\n\r\nimport styles from \"assets/jss/material-dashboard-pro-react/customCheckboxRadioSwitch.js\";\r\n\r\nimport imagine1 from \"assets/img/sidebar-1.jpg\";\r\nimport imagine2 from \"assets/img/sidebar-2.jpg\";\r\nimport imagine3 from \"assets/img/sidebar-3.jpg\";\r\nimport imagine4 from \"assets/img/sidebar-4.jpg\";\r\n\r\nimport Button from \"components/CustomButtons/Button.js\";\r\n\r\nconst useStyles = makeStyles(styles);\r\n\r\nexport default function FixedPlugin(props) {\r\n const [classes, setClasses] = React.useState(\"dropdown show\");\r\n const [bg_checked, setBg_checked] = React.useState(true);\r\n const [bgImage, setBgImage] = React.useState(props.bgImage);\r\n const [showImage, setShowImage] = React.useState(true);\r\n const handleClick = () => {\r\n props.handleFixedClick();\r\n };\r\n const handleChange = name => event => {\r\n switch (name) {\r\n case \"miniActive\":\r\n props.sidebarMinimize();\r\n break;\r\n case \"image\":\r\n if (event.target.checked) {\r\n props.handleImageClick(bgImage);\r\n } else {\r\n props.handleImageClick();\r\n }\r\n setShowImage(event.target.checked);\r\n break;\r\n default:\r\n break;\r\n }\r\n };\r\n const classesObj = useStyles();\r\n return (\r\n \r\n
\r\n \r\n );\r\n}\r\n\r\nFixedPlugin.propTypes = {\r\n bgImage: PropTypes.string,\r\n handleFixedClick: PropTypes.func,\r\n miniActive: PropTypes.bool,\r\n fixedClasses: PropTypes.string,\r\n bgColor: PropTypes.oneOf([\"white\", \"black\", \"blue\"]),\r\n color: PropTypes.oneOf([\r\n \"white\",\r\n \"red\",\r\n \"orange\",\r\n \"green\",\r\n \"blue\",\r\n \"purple\",\r\n \"rose\"\r\n ]),\r\n handleBgColorClick: PropTypes.func,\r\n handleColorClick: PropTypes.func,\r\n handleImageClick: PropTypes.func,\r\n sidebarMinimize: PropTypes.func,\r\n rtlActive: PropTypes.bool\r\n};\r\n","import {\r\n drawerWidth,\r\n drawerMiniWidth,\r\n transition,\r\n containerFluid\r\n} from \"assets/jss/material-dashboard-pro-react.js\";\r\n\r\nconst appStyle = theme => ({\r\n wrapper: {\r\n position: \"relative\",\r\n top: \"0\",\r\n height: \"100vh\",\r\n \"&:after\": {\r\n display: \"table\",\r\n clear: \"both\",\r\n content: '\" \"'\r\n },\r\n \"& header,& header + div\": {\r\n direction: \"rtl\"\r\n }\r\n },\r\n mainPanel: {\r\n transitionProperty: \"top, bottom, width\",\r\n transitionDuration: \".2s, .2s, .35s\",\r\n transitionTimingFunction: \"linear, linear, ease\",\r\n [theme.breakpoints.up(\"md\")]: {\r\n width: `calc(100% - ${drawerWidth}px)`\r\n },\r\n overflow: \"auto\",\r\n position: \"relative\",\r\n float: \"left\",\r\n ...transition,\r\n maxHeight: \"100%\",\r\n width: \"100%\",\r\n overflowScrolling: \"touch\"\r\n },\r\n content: {\r\n marginTop: \"70px\",\r\n padding: \"30px 15px\",\r\n minHeight: \"calc(100% - 123px)\"\r\n },\r\n container: { ...containerFluid },\r\n mainPanelSidebarMini: {\r\n [theme.breakpoints.up(\"md\")]: {\r\n width: `calc(100% - ${drawerMiniWidth}px)`\r\n }\r\n }\r\n});\r\n\r\nexport default appStyle;\r\n","import React from \"react\";\r\nimport cx from \"classnames\";\r\n\r\nimport { Switch, Route, Redirect } from \"react-router-dom\";\r\n// creates a beautiful scrollbar\r\nimport PerfectScrollbar from \"perfect-scrollbar\";\r\nimport \"perfect-scrollbar/css/perfect-scrollbar.css\";\r\n\r\n// @material-ui/core components\r\nimport { makeStyles } from \"@material-ui/core/styles\";\r\n\r\n// core components\r\nimport AdminNavbar from \"components/Navbars/AdminNavbar.js\";\r\nimport Footer from \"components/Footer/Footer.js\";\r\nimport Sidebar from \"components/Sidebar/Sidebar.js\";\r\nimport FixedPlugin from \"components/FixedPlugin/FixedPlugin.js\";\r\n\r\nimport routes from \"routes.js\";\r\n\r\nimport styles from \"assets/jss/material-dashboard-pro-react/layouts/rtlStyle.js\";\r\n\r\nvar ps;\r\n\r\nconst useStyles = makeStyles(styles);\r\n\r\nexport default function RTL(props) {\r\n const { ...rest } = props;\r\n // states and functions\r\n const [mobileOpen, setMobileOpen] = React.useState(false);\r\n const [miniActive, setMiniActive] = React.useState(false);\r\n const [image, setImage] = React.useState(require(\"assets/img/sidebar-2.jpg\"));\r\n const [color, setColor] = React.useState(\"blue\");\r\n const [bgColor, setBgColor] = React.useState(\"black\");\r\n // const [hasImage, setHasImage] = React.useState(true);\r\n const [fixedClasses, setFixedClasses] = React.useState(\"dropdown\");\r\n const [logo, setLogo] = React.useState(require(\"assets/img/logo-white.svg\"));\r\n // styles\r\n const classes = useStyles();\r\n const mainPanelClasses =\r\n classes.mainPanel +\r\n \" \" +\r\n cx({\r\n [classes.mainPanelSidebarMini]: miniActive\r\n });\r\n // ref for main panel div\r\n const mainPanel = React.createRef();\r\n // effect instead of componentDidMount, componentDidUpdate and componentWillUnmount\r\n React.useEffect(() => {\r\n if (navigator.platform.indexOf(\"Win\") > -1) {\r\n ps = new PerfectScrollbar(mainPanel.current, {\r\n suppressScrollX: true,\r\n suppressScrollY: false\r\n });\r\n document.body.style.overflow = \"hidden\";\r\n }\r\n window.addEventListener(\"resize\", resizeFunction);\r\n\r\n // Specify how to clean up after this effect:\r\n return function cleanup() {\r\n if (navigator.platform.indexOf(\"Win\") > -1) {\r\n ps.destroy();\r\n }\r\n window.removeEventListener(\"resize\", resizeFunction);\r\n };\r\n });\r\n // functions for changeing the states from components\r\n const handleImageClick = image => {\r\n setImage(image);\r\n };\r\n const handleColorClick = color => {\r\n setColor(color);\r\n };\r\n const handleBgColorClick = bgColor => {\r\n switch (bgColor) {\r\n case \"white\":\r\n setLogo(require(\"assets/img/logo.svg\"));\r\n break;\r\n default:\r\n setLogo(require(\"assets/img/logo-white.svg\"));\r\n break;\r\n }\r\n setBgColor(bgColor);\r\n };\r\n const handleFixedClick = () => {\r\n if (fixedClasses === \"dropdown\") {\r\n setFixedClasses(\"dropdown show\");\r\n } else {\r\n setFixedClasses(\"dropdown\");\r\n }\r\n };\r\n const handleDrawerToggle = () => {\r\n setMobileOpen(!mobileOpen);\r\n };\r\n const getActiveRoute = routes => {\r\n let activeRoute = \"Default Brand Text\";\r\n for (let i = 0; i < routes.length; i++) {\r\n if (routes[i].collapse) {\r\n let collapseActiveRoute = getActiveRoute(routes[i].views);\r\n if (collapseActiveRoute !== activeRoute) {\r\n return collapseActiveRoute;\r\n }\r\n } else {\r\n if (\r\n window.location.href.indexOf(routes[i].layout + routes[i].path) !== -1\r\n ) {\r\n return routes[i].name;\r\n }\r\n }\r\n }\r\n return activeRoute;\r\n };\r\n const getRoutes = routes => {\r\n return routes.map((prop, key) => {\r\n if (prop.collapse) {\r\n return getRoutes(prop.views);\r\n }\r\n if (prop.layout === \"/rtl\") {\r\n return (\r\n \r\n \r\n
\r\n - \r\n
- SIDEBAR FILTERS \r\n
- \r\n \r\n \r\n\r\n \r\n \r\n \r\n
- SIDEBAR BACKGROUND \r\n
- \r\n \r\n \r\n\r\n \r\n \r\n \r\n
- \r\n \r\n
Sidebar Mini
\r\n \r\n - \r\n \r\n
Sidebar Image
\r\n \r\n - Images \r\n
- \r\n
\r\n \r\n
\r\n - \r\n
\r\n \r\n
\r\n - \r\n
\r\n \r\n
\r\n - \r\n
\r\n \r\n
\r\n - \r\n \r\n\r\n \r\n
- \r\n \r\n\r\n \r\n
- \r\n Thank you for sharing!\r\n
\r\n \r\n
\r\n
\r\n );\r\n}\r\n","import React from \"react\";\r\nimport PropTypes from \"prop-types\";\r\nimport { Redirect, Route } from \"react-router-dom\";\r\nimport { checkAuth } from \"../../ultils/appSession\";\r\n\r\n/* eslint-disable react/jsx-props-no-spreading */\r\nfunction PrivateRouter({ component: Component, ...rest }) {\r\n const role = localStorage.getItem(\"userRoles\")\r\n const isAdmin = role && role.indexOf('Admin') != -1\r\n const roleCorrectFlowPath = rest.role\r\n let failRole = false;\r\n if (!isAdmin && roleCorrectFlowPath == 'Admin') {\r\n failRole = true\r\n }\r\n return (\r\n \r\n
\r\n \r\n
\r\n \r\n \r\n \r\n {getRoutes(routes)}\r\n \r\n
\r\n \r\n
\r\n );\r\n}\r\n","import React, { useState, useEffect } from \"react\";\r\nimport { fade, makeStyles } from \"@material-ui/core/styles\";\r\nimport AppBar from \"@material-ui/core/AppBar\";\r\nimport Toolbar from \"@material-ui/core/Toolbar\";\r\nimport IconButton from \"@material-ui/core/IconButton\";\r\nimport Badge from \"@material-ui/core/Badge\";\r\nimport MenuItem from \"@material-ui/core/MenuItem\";\r\nimport Menu from \"@material-ui/core/Menu\";\r\nimport MenuIcon from \"@material-ui/icons/Menu\";\r\nimport AccountCircle from \"@material-ui/icons/AccountCircle\";\r\nimport PowerSettingsNew from \"@material-ui/icons/PowerSettingsNew\";\r\nimport PhoneCallback from \"@material-ui/icons/PhoneCallback\";\r\nimport appLogo from \"../../assets/img/logo-white.svg\";\r\nimport { useHistory } from \"react-router-dom\";\r\nimport PhoneForwardedIcon from \"@material-ui/icons/PhoneForwarded\";\r\nimport VpnKeyIcon from \"@material-ui/icons/VpnKey\";\r\nimport queryString from 'query-string';\r\nimport GridContainer from \"components/Grid/GridContainer.js\";\r\nimport GridItem from \"components/Grid/GridItem.js\";\r\nimport Button from \"components/CustomButtons/Button.js\";\r\nimport CustomInput from \"components/CustomInput/CustomInput\";\r\nimport {\r\n FormHelperText,\r\n Select,\r\n InputLabel,\r\n FormControl,\r\n DialogTitle,\r\n DialogContentText,\r\n DialogContent,\r\n DialogActions,\r\n Dialog,\r\n Grid,\r\n Checkbox,\r\n FormControlLabel,\r\n} from \"@material-ui/core\";\r\nimport { Snackbar } from \"@material-ui/core\";\r\nimport MuiAlert from \"@material-ui/lab/Alert\";\r\nimport { getSession, removeSession } from \"../../ultils/appSession\";\r\n\r\nimport fetchClient from \"../../ultils/request\";\r\n\r\nconst useStyles = makeStyles((theme) => ({\r\n grow: {\r\n flexGrow: 1,\r\n },\r\n menuButton: {\r\n marginRight: theme.spacing(2),\r\n },\r\n title: {\r\n display: \"none\",\r\n [theme.breakpoints.up(\"sm\")]: {\r\n display: \"block\",\r\n },\r\n },\r\n search: {\r\n position: \"relative\",\r\n borderRadius: theme.shape.borderRadius,\r\n backgroundColor: fade(theme.palette.common.white, 0.15),\r\n \"&:hover\": {\r\n backgroundColor: fade(theme.palette.common.white, 0.25),\r\n },\r\n marginRight: theme.spacing(2),\r\n marginLeft: 0,\r\n width: \"100%\",\r\n [theme.breakpoints.up(\"sm\")]: {\r\n marginLeft: theme.spacing(3),\r\n width: \"auto\",\r\n },\r\n },\r\n searchIcon: {\r\n padding: theme.spacing(0, 2),\r\n height: \"100%\",\r\n position: \"absolute\",\r\n pointerEvents: \"none\",\r\n display: \"flex\",\r\n alignItems: \"center\",\r\n justifyContent: \"center\",\r\n },\r\n inputRoot: {\r\n color: \"inherit\",\r\n },\r\n inputInput: {\r\n padding: theme.spacing(1, 1, 1, 0),\r\n // vertical padding + font size from searchIcon\r\n paddingLeft: `calc(1em + ${theme.spacing(4)}px)`,\r\n transition: theme.transitions.create(\"width\"),\r\n width: \"100%\",\r\n [theme.breakpoints.up(\"md\")]: {\r\n width: \"20ch\",\r\n },\r\n },\r\n sectionDesktop: {\r\n display: \"none\",\r\n [theme.breakpoints.up(\"md\")]: {\r\n display: \"flex\",\r\n },\r\n },\r\n sectionMobile: {\r\n display: \"flex\",\r\n [theme.breakpoints.up(\"md\")]: {\r\n display: \"none\",\r\n },\r\n },\r\n logoImage: {\r\n maxHeight: 30,\r\n },\r\n headerText: {\r\n fontSize: 16,\r\n },\r\n}));\r\n\r\nexport default function PrimarySearchAppBar() {\r\n let history = useHistory();\r\n const classes = useStyles();\r\n const [anchorEl, setAnchorEl] = React.useState(null);\r\n const [mobileMoreAnchorEl, setMobileMoreAnchorEl] = React.useState(null);\r\n const [openDialog, setOpenDialog] = useState(false);\r\n const [errorMessage, setErrorMessage] = useState(\"\");\r\n\r\n const isMenuOpen = Boolean(anchorEl);\r\n const isMobileMenuOpen = Boolean(mobileMoreAnchorEl);\r\n\r\n const handleProfileMenuOpen = (event) => {\r\n setAnchorEl(event.currentTarget);\r\n };\r\n\r\n const handleMobileMenuClose = () => {\r\n setMobileMoreAnchorEl(null);\r\n };\r\n\r\n const handleMenuClose = () => {\r\n setAnchorEl(null);\r\n handleMobileMenuClose();\r\n };\r\n\r\n const handleMobileMenuOpen = (event) => {\r\n setMobileMoreAnchorEl(event.currentTarget);\r\n };\r\n\r\n const menuId = \"primary-search-account-menu\";\r\n const renderMenu = (\r\n \r\n
\r\n \r\n
\r\n ) : (\r\n \r\n \r\n {getRoutes(routes)}\r\n \r\n
\r\n \r\n \r\n {getRoutes(routes)}\r\n \r\n
\r\n )}\r\n {getRoute() ? : null}\r\n \r\n \r\n \r\n 
\r\n \r\n \r\n \r\n {renderMobileMenu}\r\n {renderMenu}\r\n \r\n \r\n {errorMessage && (\r\n {\r\n setErrorMessage(\"\");\r\n }}\r\n >\r\n \r\n {errorMessage}\r\n \r\n \r\n )}\r\n
\r\n );\r\n}\r\n\r\nconst UpdatePassword = (props) => {\r\n const { openDialog, handleCloseDialog, handerApiError, history } = props\r\n const [errorText, setErrorText] = useState({});\r\n const [errorField, setErrorField] = useState({});\r\n const [password, setPassword] = useState({\r\n passwordNew: '',\r\n passwordOld: '',\r\n });\r\n\r\n const closeDialog = () => {\r\n setErrorText({});\r\n setErrorField({});\r\n setPassword({\r\n passwordNew: '',\r\n passwordOld: '',\r\n });\r\n handleCloseDialog();\r\n }\r\n\r\n const handleSubmit = async () => {\r\n try {\r\n var query = queryString.stringify({ passwordNew: password.passwordNew, passwordOld: password.passwordOld }, { arrayFormat: 'comma' });\r\n var result = await fetchClient.post(`/identity/reset-password-user/?${query}`);\r\n return result;\r\n } catch (error) {\r\n handerApiError(\"Thông tin mật khẩu không đúng\");\r\n }\r\n\r\n };\r\n\r\n const submitEdit = () => {\r\n if (validate()) {\r\n handleSubmit().then((result) => {\r\n if (result && result.data) {\r\n closeDialog();\r\n removeSession();\r\n history.push(\"/auth/login\");\r\n }\r\n })\r\n }\r\n }\r\n\r\n const validate = () => {\r\n var error = {};\r\n var helperText = {};\r\n var numberErr = 0;\r\n const { passwordNew, passwordOld } = password\r\n\r\n if (!passwordOld) {\r\n numberErr++;\r\n error.passwordOld = true;\r\n helperText.passwordOld = \"Đây là trường bắt buộc\";\r\n }\r\n\r\n if (!passwordNew) {\r\n numberErr++;\r\n error.passwordNew = true;\r\n helperText.passwordNew = \"Đây là trường bắt buộc\";\r\n }\r\n\r\n if (passwordNew && passwordNew.length < 6) {\r\n numberErr++;\r\n error.passwordNew = true;\r\n helperText.passwordNew = \"Độ dài tối thiểu là 6\";\r\n }\r\n if (passwordNew && passwordNew.length >= 6) {\r\n var regExpAZ = /[A-Z]/g;\r\n var regExpaz = /[a-z]/g;\r\n if (!regExpAZ.test(passwordNew) || !regExpaz.test(passwordNew)) {\r\n numberErr++;\r\n error.passwordNew = true;\r\n helperText.passwordNew = \"Mật khẩu phải bao gồm cả chữ hoa và chữ thường\";\r\n }\r\n }\r\n\r\n setErrorText(helperText);\r\n setErrorField(error);\r\n return !numberErr;\r\n };\r\n\r\n const onchangeInput = (fieldName, value) => {\r\n setPassword({ ...password, [fieldName]: value });\r\n };\r\n\r\n return (\r\n {inCallPage() ? (\r\n \r\n \r\n \r\n
\r\n \r\n \r\n
\r\n