(
22 |
23 |
24 | {options.map((option) => (
25 | } label={option.label} />
26 | ))}
27 |
28 |
29 | {!!error && (
30 |
31 | {error.message}
32 |
33 | )}
34 |
35 | )}
36 | />
37 | );
38 | }
39 |
--------------------------------------------------------------------------------
/src/components/hook-form/RHFSelect.js:
--------------------------------------------------------------------------------
1 | import PropTypes from 'prop-types';
2 | // form
3 | import { useFormContext, Controller } from 'react-hook-form';
4 | // @mui
5 | import { TextField } from '@mui/material';
6 |
7 | // ----------------------------------------------------------------------
8 |
9 | RHFSelect.propTypes = {
10 | children: PropTypes.node,
11 | name: PropTypes.string,
12 | };
13 |
14 | export default function RHFSelect({ name, children, ...other }) {
15 | const { control } = useFormContext();
16 |
17 | return (
18 | (
22 |
31 | {children}
32 |
33 | )}
34 | />
35 | );
36 | }
37 |
--------------------------------------------------------------------------------
/src/components/hook-form/RHFSwitch.js:
--------------------------------------------------------------------------------
1 | import PropTypes from 'prop-types';
2 | // form
3 | import { useFormContext, Controller } from 'react-hook-form';
4 | // @mui
5 | import { Switch, FormControlLabel } from '@mui/material';
6 |
7 | // ----------------------------------------------------------------------
8 |
9 | RHFSwitch.propTypes = {
10 | name: PropTypes.string,
11 | };
12 |
13 | export default function RHFSwitch({ name, ...other }) {
14 | const { control } = useFormContext();
15 |
16 | return (
17 | } />
20 | }
21 | {...other}
22 | />
23 | );
24 | }
25 |
--------------------------------------------------------------------------------
/src/components/hook-form/RHFTextField.js:
--------------------------------------------------------------------------------
1 | import PropTypes from 'prop-types';
2 | // form
3 | import { useFormContext, Controller } from 'react-hook-form';
4 | // @mui
5 | import { TextField } from '@mui/material';
6 |
7 | // ----------------------------------------------------------------------
8 |
9 | RHFTextField.propTypes = {
10 | name: PropTypes.string,
11 | };
12 |
13 | export default function RHFTextField({ name, ...other }) {
14 | const { control } = useFormContext();
15 |
16 | return (
17 | (
21 |
22 | )}
23 | />
24 | );
25 | }
26 |
--------------------------------------------------------------------------------
/src/components/hook-form/index.js:
--------------------------------------------------------------------------------
1 | export * from './RHFCheckbox';
2 | export * from './RHFUpload';
3 |
4 | export { default as FormProvider } from './FormProvider';
5 |
6 | export { default as RHFSwitch } from './RHFSwitch';
7 | export { default as RHFSelect } from './RHFSelect';
8 | export { default as RHFEditor } from './RHFEditor';
9 | export { default as RHFTextField } from './RHFTextField';
10 | export { default as RHFRadioGroup } from './RHFRadioGroup';
11 |
--------------------------------------------------------------------------------
/src/components/map/MapControlFullscreen.js:
--------------------------------------------------------------------------------
1 | import { FullscreenControl } from 'react-map-gl';
2 | // @mui
3 | import { styled } from '@mui/material/styles';
4 |
5 | // ----------------------------------------------------------------------
6 |
7 | const FullscreenControlStyle = styled(FullscreenControl)(({ theme }) => ({
8 | zIndex: 99,
9 | borderRadius: 8,
10 | overflow: 'hidden',
11 | top: theme.spacing(1.5),
12 | left: theme.spacing(1.5),
13 | boxShadow: theme.customShadows.z8,
14 | '& span.mapboxgl-ctrl-icon': {
15 | transform: ' scale(0.75)',
16 | },
17 | }));
18 |
19 | // ----------------------------------------------------------------------
20 |
21 | export default function MapControlFullscreen({ ...other }) {
22 | return ;
23 | }
24 |
--------------------------------------------------------------------------------
/src/components/map/MapControlGeolocate.js:
--------------------------------------------------------------------------------
1 | import { GeolocateControl } from 'react-map-gl';
2 | // @mui
3 | import { styled } from '@mui/material/styles';
4 |
5 | // ----------------------------------------------------------------------
6 |
7 | const GeolocateControlStyle = styled(GeolocateControl)(({ theme }) => ({
8 | zIndex: 99,
9 | borderRadius: 8,
10 | overflow: 'hidden',
11 | top: theme.spacing(6),
12 | left: theme.spacing(1.5),
13 | boxShadow: theme.customShadows.z8,
14 | }));
15 |
16 | // ----------------------------------------------------------------------
17 |
18 | export default function MapControlGeolocate({ ...other }) {
19 | return ;
20 | }
21 |
--------------------------------------------------------------------------------
/src/components/map/MapControlMarker.js:
--------------------------------------------------------------------------------
1 | import PropTypes from 'prop-types';
2 | import { Marker } from 'react-map-gl';
3 | // @mui
4 | import { styled } from '@mui/material/styles';
5 |
6 | // ----------------------------------------------------------------------
7 |
8 | const ICON = `M20.2,15.7L20.2,15.7c1.1-1.6,1.8-3.6,1.8-5.7c0-5.6-4.5-10-10-10S2,4.5,2,10c0,2,0.6,3.9,1.6,5.4c0,0.1,0.1,0.2,0.2,0.3
9 | c0,0,0.1,0.1,0.1,0.2c0.2,0.3,0.4,0.6,0.7,0.9c2.6,3.1,7.4,7.6,7.4,7.6s4.8-4.5,7.4-7.5c0.2-0.3,0.5-0.6,0.7-0.9
10 | C20.1,15.8,20.2,15.8,20.2,15.7z`;
11 | const SIZE = 20;
12 |
13 | const IconStyle = styled('svg')(({ theme }) => ({
14 | height: SIZE,
15 | stroke: 'none',
16 | cursor: 'pointer',
17 | fill: theme.palette.error.main,
18 | transform: `translate(${-SIZE / 2}px,${-SIZE}px)`,
19 | }));
20 |
21 | // ----------------------------------------------------------------------
22 |
23 | MapControlMarker.propTypes = {
24 | onClick: PropTypes.func,
25 | };
26 |
27 | export default function MapControlMarker({ onClick, ...other }) {
28 | return (
29 |
30 |
31 |
32 |
33 |
34 | );
35 | }
36 |
--------------------------------------------------------------------------------
/src/components/map/MapControlNavigation.js:
--------------------------------------------------------------------------------
1 | import { NavigationControl } from 'react-map-gl';
2 | // @mui
3 | import { styled } from '@mui/material/styles';
4 |
5 | // ----------------------------------------------------------------------
6 |
7 | const NavigationControlStyle = styled(NavigationControl)(({ theme }) => ({
8 | zIndex: 99,
9 | borderRadius: 8,
10 | overflow: 'hidden',
11 | bottom: theme.spacing(6),
12 | left: theme.spacing(1.5),
13 | boxShadow: theme.customShadows.z8,
14 | '& button+button': {
15 | borderTop: `1px solid ${theme.palette.divider}`,
16 | },
17 | }));
18 |
19 | // ----------------------------------------------------------------------
20 |
21 | export default function MapControlNavigation({ ...other }) {
22 | return ;
23 | }
24 |
--------------------------------------------------------------------------------
/src/components/map/MapControlScale.js:
--------------------------------------------------------------------------------
1 | import PropTypes from 'prop-types';
2 | import { ScaleControl } from 'react-map-gl';
3 | // @mui
4 | import { styled } from '@mui/material/styles';
5 |
6 | // ----------------------------------------------------------------------
7 |
8 | const RootStyle = styled('div')(({ theme }) => ({
9 | zIndex: 99,
10 | position: 'absolute',
11 | left: theme.spacing(1.5),
12 | bottom: theme.spacing(3.5),
13 | boxShadow: theme.customShadows.z8,
14 | '& .mapboxgl-ctrl': {
15 | border: 'none',
16 | borderRadius: 4,
17 | lineHeight: '14px',
18 | color: theme.palette.common.white,
19 | backgroundImage: `linear-gradient(to right, #8a2387, #e94057, #f27121)`,
20 | },
21 | }));
22 |
23 | // ----------------------------------------------------------------------
24 |
25 | MapControlScale.propTypes = {
26 | sx: PropTypes.object,
27 | };
28 |
29 | export default function MapControlScale({ sx, ...other }) {
30 | return (
31 |
32 |
33 |
34 | );
35 | }
36 |
--------------------------------------------------------------------------------
/src/components/map/index.js:
--------------------------------------------------------------------------------
1 | export { default as MapControlPopup } from './MapControlPopup';
2 | export { default as MapControlScale } from './MapControlScale';
3 | export { default as MapControlMarker } from './MapControlMarker';
4 | export { default as MapControlGeolocate } from './MapControlGeolocate';
5 | export { default as MapControlFullscreen } from './MapControlFullscreen';
6 | export { default as MapControlNavigation } from './MapControlNavigation';
7 |
--------------------------------------------------------------------------------
/src/components/mega-menu/MenuHotProducts.js:
--------------------------------------------------------------------------------
1 | import PropTypes from 'prop-types';
2 | import { Link as RouterLink } from 'react-router-dom';
3 | // @mui
4 | import { Link, Typography, Box } from '@mui/material';
5 |
6 | // ----------------------------------------------------------------------
7 |
8 | MenuHotProducts.propTypes = {
9 | tags: PropTypes.array.isRequired,
10 | };
11 |
12 | export default function MenuHotProducts({ tags, ...other }) {
13 | return (
14 |
15 |
16 | Hot Products:
17 |
18 |
19 | {tags.map((tag, index) => (
20 | theme.transitions.create('all'),
29 | '&:hover': { color: 'primary.main' },
30 | }}
31 | >
32 | {index === 0 ? tag.name : `, ${tag.name} `}
33 |
34 | ))}
35 |
36 | );
37 | }
38 |
--------------------------------------------------------------------------------
/src/components/mega-menu/index.js:
--------------------------------------------------------------------------------
1 | export { default as MegaMenuDesktopVertical } from './MegaMenuDesktopVertical';
2 | export { default as MegaMenuDesktopHorizon } from './MegaMenuDesktopHorizon';
3 | export { default as MegaMenuMobile } from './MegaMenuMobile';
4 | export { default as MenuConfig } from './MenuConfig';
5 |
--------------------------------------------------------------------------------
/src/components/nav-section/horizontal/index.js:
--------------------------------------------------------------------------------
1 | import PropTypes from 'prop-types';
2 | import { memo } from 'react';
3 | // @mui
4 | import { Stack } from '@mui/material';
5 | //
6 | import { NavListRoot } from './NavList';
7 |
8 | // ----------------------------------------------------------------------
9 |
10 | const hideScrollbar = {
11 | msOverflowStyle: 'none',
12 | scrollbarWidth: 'none',
13 | overflowY: 'scroll',
14 | '&::-webkit-scrollbar': {
15 | display: 'none',
16 | },
17 | };
18 |
19 | NavSectionHorizontal.propTypes = {
20 | navConfig: PropTypes.array,
21 | };
22 |
23 | function NavSectionHorizontal({ navConfig }) {
24 | return (
25 |
26 |
27 | {navConfig.map((group) => (
28 |
29 | {group.items.map((list) => (
30 |
31 | ))}
32 |
33 | ))}
34 |
35 |
36 | );
37 | }
38 |
39 | export default memo(NavSectionHorizontal);
40 |
--------------------------------------------------------------------------------
/src/components/nav-section/index.js:
--------------------------------------------------------------------------------
1 | import { matchPath } from 'react-router-dom';
2 |
3 | // ----------------------------------------------------------------------
4 |
5 | export { default as NavSectionVertical } from './vertical';
6 | export { default as NavSectionHorizontal } from './horizontal';
7 |
8 | export function isExternalLink(path) {
9 | return path.includes('http');
10 | }
11 |
12 | export function getActive(path, pathname) {
13 | return path ? !!matchPath({ path, end: false }, pathname) : false;
14 | }
15 |
--------------------------------------------------------------------------------
/src/components/nav-section/vertical/index.js:
--------------------------------------------------------------------------------
1 | import PropTypes from 'prop-types';
2 | // @mui
3 | import { styled } from '@mui/material/styles';
4 | import { List, Box, ListSubheader } from '@mui/material';
5 | // hooks
6 | import useLocales from '../../../hooks/useLocales';
7 | //
8 | import { NavListRoot } from './NavList';
9 |
10 | // ----------------------------------------------------------------------
11 |
12 | export const ListSubheaderStyle = styled((props) => )(
13 | ({ theme }) => ({
14 | ...theme.typography.overline,
15 | paddingTop: theme.spacing(3),
16 | paddingLeft: theme.spacing(2),
17 | paddingBottom: theme.spacing(1),
18 | color: theme.palette.text.primary,
19 | transition: theme.transitions.create('opacity', {
20 | duration: theme.transitions.duration.shorter,
21 | }),
22 | })
23 | );
24 |
25 | // ----------------------------------------------------------------------
26 |
27 | NavSectionVertical.propTypes = {
28 | isCollapse: PropTypes.bool,
29 | navConfig: PropTypes.array,
30 | };
31 |
32 | export default function NavSectionVertical({ navConfig, isCollapse = false, ...other }) {
33 | const { translate } = useLocales();
34 |
35 | return (
36 |
37 | {navConfig.map((group) => (
38 |
39 |
46 | {translate(group.subheader)}
47 |
48 |
49 | {group.items.map((list) => (
50 |
51 | ))}
52 |
53 | ))}
54 |
55 | );
56 | }
57 |
--------------------------------------------------------------------------------
/src/components/settings/ThemeColorPresets.js:
--------------------------------------------------------------------------------
1 | import PropTypes from 'prop-types';
2 | import { useMemo } from 'react';
3 | // @mui
4 | import { alpha, ThemeProvider, createTheme, useTheme } from '@mui/material/styles';
5 | // hooks
6 | import useSettings from '../../hooks/useSettings';
7 | //
8 | import componentsOverride from '../../theme/overrides';
9 |
10 | // ----------------------------------------------------------------------
11 |
12 | ThemeColorPresets.propTypes = {
13 | children: PropTypes.node,
14 | };
15 |
16 | export default function ThemeColorPresets({ children }) {
17 | const defaultTheme = useTheme();
18 |
19 | const { setColor } = useSettings();
20 |
21 | const themeOptions = useMemo(
22 | () => ({
23 | ...defaultTheme,
24 | palette: {
25 | ...defaultTheme.palette,
26 | primary: setColor,
27 | },
28 | customShadows: {
29 | ...defaultTheme.customShadows,
30 | primary: `0 8px 16px 0 ${alpha(setColor.main, 0.24)}`,
31 | },
32 | }),
33 | [setColor, defaultTheme]
34 | );
35 |
36 | const theme = createTheme(themeOptions);
37 |
38 | theme.components = componentsOverride(theme);
39 |
40 | return {children};
41 | }
42 |
--------------------------------------------------------------------------------
/src/components/settings/ThemeLocalization.js:
--------------------------------------------------------------------------------
1 | import PropTypes from 'prop-types';
2 | // @mui
3 | import { ThemeProvider, createTheme, useTheme } from '@mui/material/styles';
4 | // hooks
5 | import useLocales from '../../hooks/useLocales';
6 |
7 | // ----------------------------------------------------------------------
8 |
9 | ThemeLocalization.propTypes = {
10 | children: PropTypes.node.isRequired,
11 | };
12 |
13 | export default function ThemeLocalization({ children }) {
14 | const defaultTheme = useTheme();
15 |
16 | const { currentLang } = useLocales();
17 |
18 | const theme = createTheme(defaultTheme, currentLang.systemValue);
19 |
20 | return {children};
21 | }
22 |
--------------------------------------------------------------------------------
/src/components/settings/ThemeRtlLayout.js:
--------------------------------------------------------------------------------
1 | import PropTypes from 'prop-types';
2 | import { useEffect } from 'react';
3 | // rtl
4 | import rtlPlugin from 'stylis-plugin-rtl';
5 | // emotion
6 | import createCache from '@emotion/cache';
7 | import { CacheProvider } from '@emotion/react';
8 | // @mui
9 | import { useTheme } from '@mui/material/styles';
10 |
11 | // ----------------------------------------------------------------------
12 |
13 | ThemeRtlLayout.propTypes = {
14 | children: PropTypes.node,
15 | };
16 |
17 | export default function ThemeRtlLayout({ children }) {
18 | const theme = useTheme();
19 |
20 | useEffect(() => {
21 | document.dir = theme.direction;
22 | }, [theme.direction]);
23 |
24 | const cacheRtl = createCache({
25 | key: theme.direction === 'rtl' ? 'rtl' : 'css',
26 | stylisPlugins: theme.direction === 'rtl' ? [rtlPlugin] : [],
27 | });
28 |
29 | return {children};
30 | }
31 |
--------------------------------------------------------------------------------
/src/components/settings/drawer/BoxMask.js:
--------------------------------------------------------------------------------
1 | import PropTypes from 'prop-types';
2 | // @mui
3 | import { Radio, FormControlLabel } from '@mui/material';
4 |
5 | // ----------------------------------------------------------------------
6 |
7 | BoxMask.propTypes = {
8 | value: PropTypes.string,
9 | };
10 |
11 | export default function BoxMask({ value }) {
12 | return (
13 | }
17 | sx={{
18 | m: 0,
19 | top: 0,
20 | right: 0,
21 | bottom: 0,
22 | left: 0,
23 | position: 'absolute',
24 | }}
25 | />
26 | );
27 | }
28 |
--------------------------------------------------------------------------------
/src/components/settings/drawer/SettingContrast.js:
--------------------------------------------------------------------------------
1 | // @mui
2 | import { styled } from '@mui/material/styles';
3 | import { Grid, RadioGroup, CardActionArea } from '@mui/material';
4 | // hooks
5 | import useSettings from '../../../hooks/useSettings';
6 | //
7 | import Iconify from '../../Iconify';
8 | import BoxMask from './BoxMask';
9 |
10 | // ----------------------------------------------------------------------
11 |
12 | const BoxStyle = styled(CardActionArea)(({ theme }) => ({
13 | height: 72,
14 | display: 'flex',
15 | alignItems: 'center',
16 | justifyContent: 'center',
17 | color: theme.palette.text.disabled,
18 | border: `solid 1px ${theme.palette.grey[500_12]}`,
19 | borderRadius: Number(theme.shape.borderRadius) * 1.25,
20 | }));
21 |
22 | // ----------------------------------------------------------------------
23 |
24 | export default function SettingContrast() {
25 | const { themeContrast, onChangeContrast } = useSettings();
26 |
27 | return (
28 |
29 |
30 | {['default', 'bold'].map((contrast, index) => {
31 | const isSelected = themeContrast === contrast;
32 |
33 | return (
34 |
35 | theme.customShadows.z20,
40 | }),
41 | }}
42 | >
43 |
44 |
45 |
46 |
47 | );
48 | })}
49 |
50 |
51 | );
52 | }
53 |
--------------------------------------------------------------------------------
/src/components/settings/drawer/SettingFullscreen.js:
--------------------------------------------------------------------------------
1 | import { useState } from 'react';
2 | // @mui
3 | import { alpha } from '@mui/material/styles';
4 | import { Button } from '@mui/material';
5 | //
6 | import Iconify from '../../Iconify';
7 |
8 | // ----------------------------------------------------------------------
9 |
10 | export default function SettingFullscreen() {
11 | const [fullscreen, setFullscreen] = useState(false);
12 |
13 | const toggleFullScreen = () => {
14 | if (!document.fullscreenElement) {
15 | document.documentElement.requestFullscreen();
16 | setFullscreen(true);
17 | } else if (document.exitFullscreen) {
18 | document.exitFullscreen();
19 | setFullscreen(false);
20 | }
21 | };
22 |
23 | return (
24 | }
30 | onClick={toggleFullScreen}
31 | sx={{
32 | fontSize: 14,
33 | ...(fullscreen && {
34 | bgcolor: (theme) => alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity),
35 | }),
36 | }}
37 | >
38 | {fullscreen ? 'Exit Fullscreen' : 'Fullscreen'}
39 |
40 | );
41 | }
42 |
--------------------------------------------------------------------------------
/src/components/settings/drawer/SettingMode.js:
--------------------------------------------------------------------------------
1 | // @mui
2 | import { styled } from '@mui/material/styles';
3 | import { Grid, RadioGroup, CardActionArea } from '@mui/material';
4 | // hooks
5 | import useSettings from '../../../hooks/useSettings';
6 | //
7 | import Iconify from '../../Iconify';
8 | import BoxMask from './BoxMask';
9 |
10 | // ----------------------------------------------------------------------
11 |
12 | const BoxStyle = styled(CardActionArea)(({ theme }) => ({
13 | height: 72,
14 | display: 'flex',
15 | alignItems: 'center',
16 | justifyContent: 'center',
17 | color: theme.palette.text.disabled,
18 | border: `solid 1px ${theme.palette.grey[500_12]}`,
19 | borderRadius: Number(theme.shape.borderRadius) * 1.25,
20 | }));
21 |
22 | // ----------------------------------------------------------------------
23 |
24 | export default function SettingMode() {
25 | const { themeMode, onChangeMode } = useSettings();
26 |
27 | return (
28 |
29 |
30 | {['light', 'dark'].map((mode, index) => {
31 | const isSelected = themeMode === mode;
32 |
33 | return (
34 |
35 | theme.customShadows.z20,
41 | }),
42 | }}
43 | >
44 |
45 |
46 |
47 |
48 | );
49 | })}
50 |
51 |
52 | );
53 | }
54 |
--------------------------------------------------------------------------------
/src/components/settings/index.js:
--------------------------------------------------------------------------------
1 | import PropTypes from 'prop-types';
2 | //
3 | import SettingsDrawer from './drawer';
4 | //
5 | import ThemeContrast from './ThemeContrast';
6 | import ThemeRtlLayout from './ThemeRtlLayout';
7 | import ThemeColorPresets from './ThemeColorPresets';
8 | import ThemeLocalization from './ThemeLocalization';
9 |
10 | // ----------------------------------------------------------------------
11 |
12 | ThemeSettings.propTypes = {
13 | children: PropTypes.node.isRequired,
14 | };
15 |
16 | export default function ThemeSettings({ children }) {
17 | return (
18 |
19 |
20 |
21 |
22 | {children}
23 |
24 |
25 |
26 |
27 |
28 | );
29 | }
30 |
--------------------------------------------------------------------------------
/src/components/skeleton/SkeletonConversationItem.js:
--------------------------------------------------------------------------------
1 | // @mui
2 | import { Stack, Skeleton } from '@mui/material';
3 |
4 | // ----------------------------------------------------------------------
5 |
6 | export default function SkeletonConversationItem() {
7 | return (
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 | );
17 | }
18 |
--------------------------------------------------------------------------------
/src/components/skeleton/SkeletonKanbanColumn.js:
--------------------------------------------------------------------------------
1 | // @mui
2 | import { Stack, Skeleton, Box, Paper } from '@mui/material';
3 |
4 | // ----------------------------------------------------------------------
5 |
6 | export default function SkeletonKanbanColumn() {
7 | return (
8 |
15 | {[...Array(3)].map((_, index) => (
16 |
17 |
18 |
19 | {index === 0 && (
20 |
21 | )}
22 | {index !== 2 && (
23 |
24 | )}
25 |
26 |
27 | ))}
28 |
29 | );
30 | }
31 |
--------------------------------------------------------------------------------
/src/components/skeleton/SkeletonMailSidebarItem.js:
--------------------------------------------------------------------------------
1 | // @mui
2 | import { Stack, Skeleton } from '@mui/material';
3 |
4 | // ----------------------------------------------------------------------
5 |
6 | export default function SkeletonMailSidebarItem() {
7 | return (
8 |
9 |
10 |
11 |
12 | );
13 | }
14 |
--------------------------------------------------------------------------------
/src/components/skeleton/SkeletonMap.js:
--------------------------------------------------------------------------------
1 | // @mui
2 | import { Stack, Skeleton } from '@mui/material';
3 |
4 | // ----------------------------------------------------------------------
5 |
6 | export default function SkeletonMap() {
7 | return (
8 |
9 | {[...Array(5)].map((_, index) => (
10 |
15 | ))}
16 |
17 | );
18 | }
19 |
--------------------------------------------------------------------------------
/src/components/skeleton/SkeletonPost.js:
--------------------------------------------------------------------------------
1 | // @mui
2 | import { Box, Skeleton } from '@mui/material';
3 |
4 | // ----------------------------------------------------------------------
5 |
6 | export default function SkeletonPost() {
7 | return (
8 | <>
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 | );
20 | }
21 |
--------------------------------------------------------------------------------
/src/components/skeleton/SkeletonPostItem.js:
--------------------------------------------------------------------------------
1 | // @mui
2 | import { Box, Skeleton, Grid } from '@mui/material';
3 |
4 | // ----------------------------------------------------------------------
5 |
6 | export default function SkeletonPostItem() {
7 | return (
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 | );
16 | }
17 |
--------------------------------------------------------------------------------
/src/components/skeleton/SkeletonProduct.js:
--------------------------------------------------------------------------------
1 | // @mui
2 | import { Grid, Skeleton } from '@mui/material';
3 |
4 | // ----------------------------------------------------------------------
5 |
6 | export default function SkeletonProduct() {
7 | return (
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 | );
21 | }
22 |
--------------------------------------------------------------------------------
/src/components/skeleton/SkeletonProductItem.js:
--------------------------------------------------------------------------------
1 | // @mui
2 | import { Card, Skeleton, Stack } from '@mui/material';
3 |
4 | // ----------------------------------------------------------------------
5 |
6 | export default function SkeletonProductItem() {
7 | return (
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 | );
23 | }
24 |
--------------------------------------------------------------------------------
/src/components/skeleton/index.js:
--------------------------------------------------------------------------------
1 | export { default as SkeletonMap } from './SkeletonMap';
2 | export { default as SkeletonPost } from './SkeletonPost';
3 | export { default as SkeletonProduct } from './SkeletonProduct';
4 | export { default as SkeletonPostItem } from './SkeletonPostItem';
5 | export { default as SkeletonProductItem } from './SkeletonProductItem';
6 | export { default as SkeletonKanbanColumn } from './SkeletonKanbanColumn';
7 | export { default as SkeletonMailSidebarItem } from './SkeletonMailSidebarItem';
8 | export { default as SkeletonConversationItem } from './SkeletonConversationItem';
9 |
--------------------------------------------------------------------------------
/src/components/table/TableEmptyRows.js:
--------------------------------------------------------------------------------
1 | import PropTypes from 'prop-types';
2 | // @mui
3 | import { TableRow, TableCell } from '@mui/material';
4 |
5 | // ----------------------------------------------------------------------
6 |
7 | TableEmptyRows.propTypes = {
8 | emptyRows: PropTypes.number,
9 | height: PropTypes.number,
10 | };
11 |
12 | export default function TableEmptyRows({ emptyRows, height }) {
13 | if (!emptyRows) {
14 | return null;
15 | }
16 |
17 | return (
18 |
25 |
26 |
27 | );
28 | }
29 |
--------------------------------------------------------------------------------
/src/components/table/TableMoreMenu.js:
--------------------------------------------------------------------------------
1 | import PropTypes from 'prop-types';
2 | // @mui
3 | import { IconButton } from '@mui/material';
4 | //
5 | import Iconify from '../Iconify';
6 | import MenuPopover from '../MenuPopover';
7 |
8 | // ----------------------------------------------------------------------
9 |
10 | TableMoreMenu.propTypes = {
11 | actions: PropTypes.node,
12 | open: PropTypes.object,
13 | onClose: PropTypes.func,
14 | onOpen: PropTypes.func,
15 | };
16 |
17 | export default function TableMoreMenu({ actions, open, onClose, onOpen }) {
18 | return (
19 | <>
20 |
21 |
22 |
23 |
24 |
42 | {actions}
43 |
44 |
45 | );
46 | }
47 |
--------------------------------------------------------------------------------
/src/components/table/TableNoData.js:
--------------------------------------------------------------------------------
1 | import PropTypes from 'prop-types';
2 | // @mui
3 | import { TableRow, TableCell } from '@mui/material';
4 | //
5 | import EmptyContent from '../EmptyContent';
6 |
7 | // ----------------------------------------------------------------------
8 |
9 | TableNoData.propTypes = {
10 | isNotFound: PropTypes.bool,
11 | };
12 |
13 | export default function TableNoData({ isNotFound }) {
14 | return (
15 |
16 | {isNotFound ? (
17 |
18 |
24 |
25 | ) : (
26 |
27 | )}
28 |
29 | );
30 | }
31 |
--------------------------------------------------------------------------------
/src/components/table/TableSelectedActions.js:
--------------------------------------------------------------------------------
1 | import PropTypes from 'prop-types';
2 | // @mui
3 | import { Checkbox, Typography, Stack } from '@mui/material';
4 |
5 | // ----------------------------------------------------------------------
6 |
7 | TableSelectedActions.propTypes = {
8 | dense: PropTypes.bool,
9 | actions: PropTypes.node,
10 | rowCount: PropTypes.number,
11 | numSelected: PropTypes.number,
12 | onSelectAllRows: PropTypes.func,
13 | sx: PropTypes.object,
14 | };
15 |
16 | export default function TableSelectedActions({ dense, actions, rowCount, numSelected, onSelectAllRows, sx, ...other }) {
17 | return (
18 |
39 | 0 && numSelected < rowCount}
41 | checked={rowCount > 0 && numSelected === rowCount}
42 | onChange={(event) => onSelectAllRows(event.target.checked)}
43 | />
44 |
45 |
56 | {numSelected} selected
57 |
58 |
59 | {actions && actions}
60 |
61 | );
62 | }
63 |
--------------------------------------------------------------------------------
/src/components/table/TableSkeleton.js:
--------------------------------------------------------------------------------
1 | // @mui
2 | import { TableRow, TableCell, Skeleton, Stack } from '@mui/material';
3 |
4 | // ----------------------------------------------------------------------
5 |
6 | export default function TableSkeleton({ ...other }) {
7 | return (
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 | );
21 | }
22 |
--------------------------------------------------------------------------------
/src/components/table/index.js:
--------------------------------------------------------------------------------
1 | export { default as TableNoData } from './TableNoData';
2 | export { default as TableMoreMenu } from './TableMoreMenu';
3 | export { default as TableSkeleton } from './TableSkeleton';
4 | export { default as TableEmptyRows } from './TableEmptyRows';
5 | export { default as TableHeadCustom } from './TableHeadCustom';
6 | export { default as TableSelectedActions } from './TableSelectedActions';
7 |
--------------------------------------------------------------------------------
/src/components/upload/BlockContent.js:
--------------------------------------------------------------------------------
1 | // @mui
2 | import { Box, Typography, Stack } from '@mui/material';
3 | // assets
4 | import { UploadIllustration } from '../../assets';
5 |
6 | // ----------------------------------------------------------------------
7 |
8 | export default function BlockContent() {
9 | return (
10 |
17 |
18 |
19 |
20 |
21 | Drop or Select file
22 |
23 |
24 |
25 | Drop files here or click
26 |
31 | browse
32 |
33 | thorough your machine
34 |
35 |
36 |
37 | );
38 | }
39 |
--------------------------------------------------------------------------------
/src/components/upload/RejectionFiles.js:
--------------------------------------------------------------------------------
1 | import PropTypes from 'prop-types';
2 | // @mui
3 | import { alpha } from '@mui/material/styles';
4 | import { Box, Paper, Typography } from '@mui/material';
5 | // utils
6 | import { fData } from '../../utils/formatNumber';
7 | import getFileData from '../../utils/getFileData';
8 |
9 | // ----------------------------------------------------------------------
10 |
11 | RejectionFiles.propTypes = {
12 | fileRejections: PropTypes.array.isRequired,
13 | };
14 |
15 | export default function RejectionFiles({ fileRejections }) {
16 | return (
17 | alpha(theme.palette.error.main, 0.08),
25 | }}
26 | >
27 | {fileRejections.map(({ file, errors }) => {
28 | const { path, size } = getFileData(file);
29 |
30 | return (
31 |
32 |
33 | {path} - {size ? fData(size) : ''}
34 |
35 |
36 | {errors.map((error) => (
37 |
38 | {error.message}
39 |
40 | ))}
41 |
42 | );
43 | })}
44 |
45 | );
46 | }
47 |
--------------------------------------------------------------------------------
/src/components/upload/index.js:
--------------------------------------------------------------------------------
1 | export { default as BlockContent } from './BlockContent';
2 | export { default as RejectionFiles } from './RejectionFiles';
3 | export { default as MultiFilePreview } from './MultiFilePreview';
4 |
5 | export { default as UploadAvatar } from './UploadAvatar';
6 | export { default as UploadMultiFile } from './UploadMultiFile';
7 | export { default as UploadSingleFile } from './UploadSingleFile';
8 |
--------------------------------------------------------------------------------
/src/guards/AuthGuard.js:
--------------------------------------------------------------------------------
1 | import PropTypes from 'prop-types';
2 | import { useState } from 'react';
3 | import { Navigate, useLocation } from 'react-router-dom';
4 | // hooks
5 | import useAuth from '../hooks/useAuth';
6 | // pages
7 | import Login from '../pages/auth/Login';
8 | // components
9 | import LoadingScreen from '../components/LoadingScreen';
10 |
11 | // ----------------------------------------------------------------------
12 |
13 | AuthGuard.propTypes = {
14 | children: PropTypes.node,
15 | };
16 |
17 | export default function AuthGuard({ children }) {
18 | const { isAuthenticated, isInitialized } = useAuth();
19 |
20 | const { pathname } = useLocation();
21 |
22 | const [requestedLocation, setRequestedLocation] = useState(null);
23 |
24 | if (!isInitialized) {
25 | return ;
26 | }
27 |
28 | if (!isAuthenticated) {
29 | if (pathname !== requestedLocation) {
30 | setRequestedLocation(pathname);
31 | }
32 | return ;
33 | }
34 |
35 | if (requestedLocation && pathname !== requestedLocation) {
36 | setRequestedLocation(null);
37 | return ;
38 | }
39 |
40 | return <>{children};
41 | }
42 |
--------------------------------------------------------------------------------
/src/guards/GuestGuard.js:
--------------------------------------------------------------------------------
1 | import PropTypes from 'prop-types';
2 | import { Navigate } from 'react-router-dom';
3 | // hooks
4 | import useAuth from '../hooks/useAuth';
5 | // routes
6 | import { PATH_DASHBOARD } from '../routes/paths';
7 |
8 | // ----------------------------------------------------------------------
9 |
10 | GuestGuard.propTypes = {
11 | children: PropTypes.node,
12 | };
13 |
14 | export default function GuestGuard({ children }) {
15 | const { isAuthenticated } = useAuth();
16 |
17 | if (isAuthenticated) {
18 | return ;
19 | }
20 |
21 | return <>{children};
22 | }
23 |
--------------------------------------------------------------------------------
/src/guards/RoleBasedGuard.js:
--------------------------------------------------------------------------------
1 | import PropTypes from 'prop-types';
2 | import { m } from 'framer-motion';
3 | // @mui
4 | import { Container, Typography } from '@mui/material';
5 | // hooks
6 | import useAuth from '../hooks/useAuth';
7 | // components
8 | import { MotionContainer, varBounce } from '../components/animate';
9 | // assets
10 | import { ForbiddenIllustration } from '../assets';
11 |
12 | // ----------------------------------------------------------------------
13 |
14 | RoleBasedGuard.propTypes = {
15 | hasContent: PropTypes.bool,
16 | roles: PropTypes.arrayOf(PropTypes.string), // Example ['admin', 'leader']
17 | children: PropTypes.node.isRequired,
18 | };
19 |
20 | export default function RoleBasedGuard({ hasContent, roles, children }) {
21 | // Logic here to get current user role
22 | const { user } = useAuth();
23 |
24 | // const currentRole = 'user';
25 | const currentRole = user?.role; // admin;
26 |
27 | if (typeof roles !== 'undefined' && !roles.includes(currentRole)) {
28 | return hasContent ? (
29 |
30 |
31 |
32 | Permission Denied
33 |
34 |
35 |
36 |
37 | You do not have permission to access this page
38 |
39 |
40 |
41 |
42 |
43 |
44 | ) : null;
45 | }
46 |
47 | return <>{children};
48 | }
49 |
--------------------------------------------------------------------------------
/src/hooks/useAuth.js:
--------------------------------------------------------------------------------
1 | import { useContext } from 'react';
2 | //
3 | import { AuthContext } from '../contexts/JWTContext';
4 | // import { AuthContext } from '../contexts/Auth0Context';
5 | // import { AuthContext } from '../contexts/FirebaseContext';
6 | // import { AuthContext } from '../contexts/AwsCognitoContext';
7 |
8 | // ----------------------------------------------------------------------
9 |
10 | const useAuth = () => {
11 | const context = useContext(AuthContext);
12 |
13 | if (!context) throw new Error('Auth context must be use inside AuthProvider');
14 |
15 | return context;
16 | };
17 |
18 | export default useAuth;
19 |
--------------------------------------------------------------------------------
/src/hooks/useCollapseDrawer.js:
--------------------------------------------------------------------------------
1 | import { useContext } from 'react';
2 | import { CollapseDrawerContext } from '../contexts/CollapseDrawerContext';
3 |
4 | // ----------------------------------------------------------------------
5 |
6 | const useCollapseDrawer = () => useContext(CollapseDrawerContext);
7 |
8 | export default useCollapseDrawer;
9 |
--------------------------------------------------------------------------------
/src/hooks/useCountdown.js:
--------------------------------------------------------------------------------
1 | import { useState, useEffect } from 'react';
2 |
3 | // ----------------------------------------------------------------------
4 |
5 | export default function useCountdown(date) {
6 | const [countdown, setCountdown] = useState({
7 | days: '00',
8 | hours: '00',
9 | minutes: '00',
10 | seconds: '00'
11 | });
12 |
13 | useEffect(() => {
14 | const interval = setInterval(() => setNewTime(), 1000);
15 | return () => clearInterval(interval);
16 | // eslint-disable-next-line react-hooks/exhaustive-deps
17 | }, []);
18 |
19 | const setNewTime = () => {
20 | const startTime = date;
21 | const endTime = new Date();
22 | const distanceToNow = startTime - endTime;
23 |
24 | const getDays = Math.floor(distanceToNow / (1000 * 60 * 60 * 24));
25 | const getHours = `0${Math.floor((distanceToNow % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))}`.slice(-2);
26 | const getMinutes = `0${Math.floor((distanceToNow % (1000 * 60 * 60)) / (1000 * 60))}`.slice(-2);
27 | const getSeconds = `0${Math.floor((distanceToNow % (1000 * 60)) / 1000)}`.slice(-2);
28 |
29 | setCountdown({
30 | days: getDays || '000',
31 | hours: getHours || '000',
32 | minutes: getMinutes || '000',
33 | seconds: getSeconds || '000'
34 | });
35 | };
36 |
37 | return countdown;
38 | }
39 |
40 | // Usage
41 | // const countdown = useCountdown(new Date('07/07/2022 21:30'));
42 |
--------------------------------------------------------------------------------
/src/hooks/useCustomer.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable prettier/prettier */
2 | import { useDispatch } from 'react-redux';
3 |
4 | // redux
5 | import { addCustomer, editCustomer, deleteCustomer } from '../redux/slices/user';
6 |
7 | // ----------------------------------------------------------------------
8 |
9 | export default function useCustomer() {
10 | const dispatch = useDispatch();
11 |
12 | return {
13 | // -------------- Editing part ---------------------
14 | editCustomer: ({ data }) => {
15 | dispatch(editCustomer({ data }));
16 | },
17 | // -------------- Creating part ---------------------
18 | addCustomer: ({ data }) => {
19 | dispatch(addCustomer({ data }));
20 | },
21 |
22 | // -------------- Delete Employee ---------------------
23 | deleteCustomer: (id) => {
24 | dispatch(deleteCustomer(id));
25 | },
26 | };
27 | }
28 |
--------------------------------------------------------------------------------
/src/hooks/useDateRangePicker.js:
--------------------------------------------------------------------------------
1 | import { useState } from 'react';
2 | import { isSameDay, isSameMonth } from 'date-fns';
3 | //
4 | import useToggle from './useToggle';
5 |
6 | // ----------------------------------------------------------------------
7 |
8 | export default function useDateRangePicker(date) {
9 | const { toggle: openPicker, onOpen: onOpenPicker, onClose: onClosePicker } = useToggle();
10 |
11 | const [startTime, setStartTime] = useState(date[0]);
12 |
13 | const [endTime, setEndTime] = useState(date[1]);
14 |
15 | const isSameDays = startTime && endTime ? isSameDay(new Date(startTime), new Date(endTime)) : false;
16 |
17 | const isSameMonths = startTime && endTime ? isSameMonth(new Date(startTime), new Date(endTime)) : false;
18 |
19 | const handleChangeStartTime = (newValue) => {
20 | setStartTime(newValue);
21 | };
22 |
23 | const handleChangeEndTime = (newValue) => {
24 | setEndTime(newValue);
25 | };
26 |
27 | return {
28 | startTime,
29 | endTime,
30 | onChangeStartTime: handleChangeStartTime,
31 | onChangeEndTime: handleChangeEndTime,
32 | //
33 | openPicker,
34 | onOpenPicker,
35 | onClosePicker,
36 | //
37 | isSameDays,
38 | isSameMonths,
39 | };
40 | }
41 |
--------------------------------------------------------------------------------
/src/hooks/useEmployee.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable prettier/prettier */
2 | import { useDispatch } from 'react-redux';
3 |
4 | // redux
5 | import { addEmployee, editEmployee, deleteEmployee } from '../redux/slices/user';
6 |
7 | // ----------------------------------------------------------------------
8 |
9 | export default function useEmployee() {
10 | const dispatch = useDispatch();
11 |
12 | return {
13 | // -------------- Editing part ---------------------
14 | editEmployee: ({ data }) => {
15 | dispatch(editEmployee({ data }));
16 | },
17 | // -------------- Creating part ---------------------
18 | addEmployee: ({ data }) => {
19 | dispatch(addEmployee({ data }));
20 | },
21 |
22 | // -------------- Delete Employee ---------------------
23 | deleteEmployee: (id) => {
24 | dispatch(deleteEmployee(id));
25 | },
26 | };
27 | }
28 |
--------------------------------------------------------------------------------
/src/hooks/useIsMountedRef.js:
--------------------------------------------------------------------------------
1 | import { useRef, useEffect } from 'react';
2 |
3 | // ----------------------------------------------------------------------
4 |
5 | export default function useIsMountedRef() {
6 | const isMounted = useRef(true);
7 |
8 | useEffect(
9 | () => () => {
10 | isMounted.current = false;
11 | },
12 | []
13 | );
14 |
15 | return isMounted;
16 | }
17 |
--------------------------------------------------------------------------------
/src/hooks/useLocalStorage.js:
--------------------------------------------------------------------------------
1 | import { useState, useEffect } from 'react';
2 |
3 | // ----------------------------------------------------------------------
4 |
5 | export default function useLocalStorage(key, defaultValue) {
6 | const [value, setValue] = useState(() => {
7 | const storedValue = localStorage.getItem(key);
8 |
9 | return storedValue === null ? defaultValue : JSON.parse(storedValue);
10 | });
11 |
12 | useEffect(() => {
13 | const listener = (e) => {
14 | if (e.storageArea === localStorage && e.key === key) {
15 | setValue(JSON.parse(e.newValue));
16 | }
17 | };
18 | window.addEventListener('storage', listener);
19 |
20 | return () => {
21 | window.removeEventListener('storage', listener);
22 | };
23 | }, [key, defaultValue]);
24 |
25 | const setValueInLocalStorage = (newValue) => {
26 | setValue((currentValue) => {
27 | const result = typeof newValue === 'function' ? newValue(currentValue) : newValue;
28 |
29 | localStorage.setItem(key, JSON.stringify(result));
30 |
31 | return result;
32 | });
33 | };
34 |
35 | return [value, setValueInLocalStorage];
36 | }
37 |
--------------------------------------------------------------------------------
/src/hooks/useLocales.js:
--------------------------------------------------------------------------------
1 | import { useTranslation } from 'react-i18next';
2 | import useSettings from './useSettings';
3 | // config
4 | import { allLangs, defaultLang } from '../config';
5 |
6 | // ----------------------------------------------------------------------
7 |
8 | export default function useLocales() {
9 | const { i18n, t: translate } = useTranslation();
10 |
11 | const { onChangeDirectionByLang } = useSettings();
12 |
13 | const langStorage = localStorage.getItem('i18nextLng');
14 |
15 | const currentLang = allLangs.find((_lang) => _lang.value === langStorage) || defaultLang;
16 |
17 | const handleChangeLanguage = (newlang) => {
18 | i18n.changeLanguage(newlang);
19 | onChangeDirectionByLang(newlang);
20 | };
21 |
22 | return {
23 | onChangeLang: handleChangeLanguage,
24 | translate: (text, options) => translate(text, options),
25 | currentLang,
26 | allLangs,
27 | };
28 | }
29 |
--------------------------------------------------------------------------------
/src/hooks/useOffSetTop.js:
--------------------------------------------------------------------------------
1 | import { useState, useEffect } from 'react';
2 |
3 | // ----------------------------------------------------------------------
4 |
5 | export default function useOffSetTop(top) {
6 | const [offsetTop, setOffSetTop] = useState(false);
7 | const isTop = top || 100;
8 |
9 | useEffect(() => {
10 | window.onscroll = () => {
11 | if (window.pageYOffset > isTop) {
12 | setOffSetTop(true);
13 | } else {
14 | setOffSetTop(false);
15 | }
16 | };
17 | return () => {
18 | window.onscroll = null;
19 | };
20 | }, [isTop]);
21 |
22 | return offsetTop;
23 | }
24 |
25 | // Usage
26 | // const offset = useOffSetTop(100);
27 |
--------------------------------------------------------------------------------
/src/hooks/useResponsive.js:
--------------------------------------------------------------------------------
1 | // @mui
2 | import { useTheme } from '@mui/material/styles';
3 | import useMediaQuery from '@mui/material/useMediaQuery';
4 |
5 | // ----------------------------------------------------------------------
6 |
7 | export default function useResponsive(query, key, start, end) {
8 | const theme = useTheme();
9 |
10 | const mediaUp = useMediaQuery(theme.breakpoints.up(key));
11 |
12 | const mediaDown = useMediaQuery(theme.breakpoints.down(key));
13 |
14 | const mediaBetween = useMediaQuery(theme.breakpoints.between(start, end));
15 |
16 | const mediaOnly = useMediaQuery(theme.breakpoints.only(key));
17 |
18 | if (query === 'up') {
19 | return mediaUp;
20 | }
21 |
22 | if (query === 'down') {
23 | return mediaDown;
24 | }
25 |
26 | if (query === 'between') {
27 | return mediaBetween;
28 | }
29 |
30 | if (query === 'only') {
31 | return mediaOnly;
32 | }
33 | return null;
34 | }
35 |
--------------------------------------------------------------------------------
/src/hooks/useSettings.js:
--------------------------------------------------------------------------------
1 | import { useContext } from 'react';
2 | import { SettingsContext } from '../contexts/SettingsContext';
3 |
4 | // ----------------------------------------------------------------------
5 |
6 | const useSettings = () => useContext(SettingsContext);
7 |
8 | export default useSettings;
9 |
--------------------------------------------------------------------------------
/src/hooks/useTabs.js:
--------------------------------------------------------------------------------
1 | import { useState } from 'react';
2 |
3 | // ----------------------------------------------------------------------
4 |
5 | export default function useTabs(defaultValues) {
6 | const [currentTab, setCurrentTab] = useState(defaultValues || '');
7 |
8 | return {
9 | currentTab,
10 | onChangeTab: (event, newValue) => {
11 | setCurrentTab(newValue);
12 | },
13 | setCurrentTab,
14 | };
15 | }
16 |
--------------------------------------------------------------------------------
/src/hooks/useToggle.js:
--------------------------------------------------------------------------------
1 | import { useState } from 'react';
2 |
3 | // ----------------------------------------------------------------------
4 |
5 | export default function useToggle(defaultChecked) {
6 | const [toggle, setToggle] = useState(defaultChecked || false);
7 |
8 | return {
9 | toggle,
10 | onToggle: () => setToggle(!toggle),
11 | onOpen: () => setToggle(true),
12 | onClose: () => setToggle(false),
13 | setToggle,
14 | };
15 | }
16 |
--------------------------------------------------------------------------------
/src/layouts/LogoOnlyLayout.js:
--------------------------------------------------------------------------------
1 | import { Outlet } from 'react-router-dom';
2 | // @mui
3 | import { styled } from '@mui/material/styles';
4 | // components
5 | import Logo from '../components/Logo';
6 |
7 | // ----------------------------------------------------------------------
8 |
9 | const HeaderStyle = styled('header')(({ theme }) => ({
10 | top: 0,
11 | left: 0,
12 | lineHeight: 0,
13 | width: '100%',
14 | position: 'absolute',
15 | padding: theme.spacing(3, 3, 0),
16 | [theme.breakpoints.up('sm')]: {
17 | padding: theme.spacing(5, 5, 0)
18 | }
19 | }));
20 |
21 | // ----------------------------------------------------------------------
22 |
23 | export default function LogoOnlyLayout() {
24 | return (
25 | <>
26 |
27 |
28 |
29 |
30 |
31 | );
32 | }
33 |
--------------------------------------------------------------------------------
/src/layouts/dashboard/navbar/NavConfig.js:
--------------------------------------------------------------------------------
1 | // routes
2 | import { PATH_DASHBOARD } from '../../../routes/paths';
3 | // components
4 | import SvgIconStyle from '../../../components/SvgIconStyle';
5 |
6 | // ----------------------------------------------------------------------
7 |
8 | const getIcon = (name) => ;
9 |
10 | const ICONS = {
11 | user: getIcon('ic_user'),
12 | dashboard: getIcon('ic_dashboard'),
13 | };
14 |
15 | const navConfig = [
16 | // GENERAL
17 | // ----------------------------------------------------------------------
18 | {
19 | subheader: 'Dashboard',
20 | items: [
21 | { title: 'Manage Bus List', path: PATH_DASHBOARD.bus.buslist, icon: ICONS.dashboard },
22 | { title: 'Tasks', path: PATH_DASHBOARD.task.tasklist, icon: ICONS.dashboard },
23 | { title: 'Employees', path: PATH_DASHBOARD.employee.employeelist, icon: ICONS.user },
24 | { title: 'Customers', path: PATH_DASHBOARD.customer.customerlist, icon: ICONS.user },
25 | ],
26 | },
27 | ];
28 |
29 | export default navConfig;
30 |
--------------------------------------------------------------------------------
/src/layouts/dashboard/navbar/NavbarHorizontal.js:
--------------------------------------------------------------------------------
1 | import { memo } from 'react';
2 | // @mui
3 | import { styled } from '@mui/material/styles';
4 | import { Container, AppBar } from '@mui/material';
5 | // config
6 | import { HEADER } from '../../../config';
7 | // components
8 | import { NavSectionHorizontal } from '../../../components/nav-section';
9 | //
10 | import navConfig from './NavConfig';
11 |
12 | // ----------------------------------------------------------------------
13 |
14 | const RootStyle = styled(AppBar)(({ theme }) => ({
15 | transition: theme.transitions.create('top', {
16 | easing: theme.transitions.easing.easeInOut,
17 | duration: theme.transitions.duration.shorter,
18 | }),
19 | width: '100%',
20 | position: 'fixed',
21 | zIndex: theme.zIndex.appBar,
22 | padding: theme.spacing(1, 0),
23 | boxShadow: theme.customShadows.z8,
24 | top: HEADER.DASHBOARD_DESKTOP_OFFSET_HEIGHT,
25 | backgroundColor: theme.palette.background.default,
26 | }));
27 |
28 | // ----------------------------------------------------------------------
29 |
30 | function NavbarHorizontal() {
31 | return (
32 |
33 |
34 |
35 |
36 |
37 | );
38 | }
39 |
40 | export default memo(NavbarHorizontal);
41 |
--------------------------------------------------------------------------------
/src/layouts/main/MenuConfig.js:
--------------------------------------------------------------------------------
1 | // Path
2 | import { PATH_AUTH } from '../../routes/paths';
3 | // components
4 | import Iconify from '../../components/Iconify';
5 |
6 | // ----------------------------------------------------------------------
7 |
8 | const ICON_SIZE = {
9 | width: 22,
10 | height: 22,
11 | };
12 |
13 | const menuConfig = [
14 | {
15 | title: 'LogIn',
16 | icon: ,
17 | path: PATH_AUTH.login,
18 | },
19 | ];
20 |
21 | export default menuConfig;
22 |
--------------------------------------------------------------------------------
/src/layouts/main/index.js:
--------------------------------------------------------------------------------
1 | import { useLocation, Outlet } from 'react-router-dom';
2 | // @mui
3 | import { Box, Link, Container, Typography, Stack } from '@mui/material';
4 | // components
5 | import Logo from '../../components/Logo';
6 | //
7 | import MainHeader from './MainHeader';
8 |
9 | // ----------------------------------------------------------------------
10 |
11 | export default function MainLayout() {
12 | const { pathname } = useLocation();
13 |
14 | // const isHome = pathname === '/';
15 |
16 | return (
17 |
18 |
19 |
20 |
21 |
22 |
23 |
31 |
32 |
33 |
34 | admin@admin.com
35 |
36 |
37 |
38 |
39 | );
40 | }
41 |
--------------------------------------------------------------------------------
/src/locales/cn.js:
--------------------------------------------------------------------------------
1 | // ----------------------------------------------------------------------
2 |
3 | // IF THIS TRANSLATION IS INCORRECT PLEASE IGNORE THIS AS THIS TRANSLATION IS FOR DEMO PURPOSES ONLY
4 | // We are happy if you can help improve the translation by sending an email to support@minimals.cc.
5 |
6 | // ----------------------------------------------------------------------
7 |
8 | const cn = {
9 | demo: {
10 | title: `Chinese`,
11 | introduction: `Lorem Ipsum 只是印刷和排版行业的虚拟文本。 自 1500 年代以来，Lorem Ipsum 一直是行业的标准虚拟文本，当时一位不知名的印刷商采用了一种类型的厨房并将其加扰以制作类型样本书。 它不仅经历了五个世纪，而且经历了电子排版的飞跃，基本保持不变。 它在 1960 年代随着包含 Lorem Ipsum 段落的 Letraset 表的发布而流行起来，最近还随着 Aldus PageMaker 等桌面出版软件（包括 Lorem Ipsum 的版本）而普及.`,
12 | },
13 | docs: {
14 | hi: `你好`,
15 | description: `需要帮忙？\n 请查看我们的文档.`,
16 | documentation: `文件`,
17 | },
18 | app: `应用程序`,
19 | user: `用户`,
20 | list: `列表`,
21 | edit: `编辑`,
22 | shop: `商店`,
23 | blog: `博客`,
24 | post: `邮政`,
25 | mail: `电子邮件`,
26 | chat: `聊天`,
27 | cards: `牌`,
28 | posts: `帖子`,
29 | create: `创建`,
30 | kanban: `登机`,
31 | general: `一般的`,
32 | banking: `银行业`,
33 | booking: `预订`,
34 | profile: `轮廓`,
35 | account: `帐户`,
36 | product: `产品`,
37 | invoice: `发票`,
38 | details: `细节`,
39 | checkout: `退房`,
40 | calendar: `日历`,
41 | analytics: `分析`,
42 | ecommerce: `电子商务`,
43 | management: `管理`,
44 | menu_level_1: `菜单级别 1`,
45 | menu_level_2: `菜单级别 2`,
46 | menu_level_3: `菜单级别 3`,
47 | item_disabled: `项目已禁用`,
48 | item_label: `项目标签`,
49 | item_caption: `项目标题`,
50 | description: `描述`,
51 | other_cases: `其他情况`,
52 | item_by_roles: `按角色逐项`,
53 | only_admin_can_see_this_item: `只有管理员可以看到这个项目`,
54 | };
55 |
56 | export default cn;
57 |
--------------------------------------------------------------------------------
/src/locales/i18n.js:
--------------------------------------------------------------------------------
1 | import i18n from 'i18next';
2 | import LanguageDetector from 'i18next-browser-languagedetector';
3 | import { initReactI18next } from 'react-i18next';
4 | // config
5 | import { defaultLang } from '../config';
6 | //
7 | import enLocales from './en';
8 | import frLocales from './fr';
9 | import vnLocales from './vn';
10 | import cnLocales from './cn';
11 | import arLocales from './ar';
12 |
13 | // ----------------------------------------------------------------------
14 |
15 | i18n
16 | .use(LanguageDetector)
17 | .use(initReactI18next)
18 | .init({
19 | resources: {
20 | en: { translations: enLocales },
21 | fr: { translations: frLocales },
22 | vn: { translations: vnLocales },
23 | cn: { translations: cnLocales },
24 | ar: { translations: arLocales },
25 | },
26 | lng: localStorage.getItem('i18nextLng') || defaultLang.value,
27 | fallbackLng: defaultLang.value,
28 | debug: false,
29 | ns: ['translations'],
30 | defaultNS: 'translations',
31 | interpolation: {
32 | escapeValue: false,
33 | },
34 | });
35 |
36 | export default i18n;
37 |
--------------------------------------------------------------------------------
/src/pages/Home.js:
--------------------------------------------------------------------------------
1 | // @mui
2 | import { styled } from '@mui/material/styles';
3 | // components
4 | import Page from '../components/Page';
5 | // sections
6 | import {
7 | HomeHero,
8 | HomeMinimal,
9 | HomeDarkMode,
10 | HomeLookingFor,
11 | HomeColorPresets,
12 | HomePricingPlans,
13 | HomeAdvertisement,
14 | HomeCleanInterfaces,
15 | HomeHugePackElements,
16 | } from '../sections/home';
17 |
18 | // ----------------------------------------------------------------------
19 |
20 | const ContentStyle = styled('div')(({ theme }) => ({
21 | overflow: 'hidden',
22 | position: 'relative',
23 | backgroundColor: theme.palette.background.default,
24 | }));
25 |
26 | // ----------------------------------------------------------------------
27 |
28 | export default function HomePage() {
29 | return (
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 | );
52 | }
53 |
--------------------------------------------------------------------------------
/src/pages/Page500.js:
--------------------------------------------------------------------------------
1 | import { m } from 'framer-motion';
2 | import { Link as RouterLink } from 'react-router-dom';
3 | import { styled } from '@mui/material/styles';
4 | // @mui
5 | import { Button, Typography, Container } from '@mui/material';
6 | // components
7 | import Page from '../components/Page';
8 | import { MotionContainer, varBounce } from '../components/animate';
9 | // assets
10 | import { SeverErrorIllustration } from '../assets';
11 |
12 | // ----------------------------------------------------------------------
13 |
14 | const ContentStyle = styled('div')(({ theme }) => ({
15 | maxWidth: 480,
16 | margin: 'auto',
17 | minHeight: '100vh',
18 | display: 'flex',
19 | justifyContent: 'center',
20 | flexDirection: 'column',
21 | padding: theme.spacing(12, 0),
22 | }));
23 |
24 | // ----------------------------------------------------------------------
25 |
26 | export default function Page500() {
27 | return (
28 |
29 |
30 |
31 |
32 |
33 | 500 Internal Server Error
34 |
35 |
36 |
37 |
38 | There was an error, please try again later.
39 |
40 |
41 |
42 |
43 |
44 |
45 |
48 |
49 |
50 |
51 | );
52 | }
53 |
--------------------------------------------------------------------------------
/src/pages/dashboard/bus/BusCreate.js:
--------------------------------------------------------------------------------
1 | import { paramCase, capitalCase } from 'change-case';
2 | import { useParams, useLocation } from 'react-router-dom';
3 | // @mui
4 | import { Container } from '@mui/material';
5 | // routes
6 | import { PATH_DASHBOARD } from '../../../routes/paths';
7 | // hooks
8 | import useSettings from '../../../hooks/useSettings';
9 | // _mock_
10 | import { _userList } from '../../../_mock';
11 | // components
12 | import Page from '../../../components/Page';
13 | import HeaderBreadcrumbs from '../../../components/HeaderBreadcrumbs';
14 | // sections
15 | import BusNewEditForm from '../../../sections/@dashboard/bus/BusNewEditForm';
16 |
17 | // ----------------------------------------------------------------------
18 |
19 | export default function BusCreate() {
20 | const { themeStretch } = useSettings();
21 |
22 | const { pathname } = useLocation();
23 |
24 | const { name = '' } = useParams();
25 |
26 | const isEdit = pathname.includes('edit');
27 |
28 | const currentUser = _userList.find((user) => paramCase(user.name) === name);
29 |
30 | return (
31 |
32 |
33 |
41 |
42 |
43 |
44 |
45 | );
46 | }
47 |
--------------------------------------------------------------------------------
/src/pages/dashboard/bus/Buses.js:
--------------------------------------------------------------------------------
1 | // @mui
2 | import { Container } from '@mui/material';
3 | // hooks
4 | import useSettings from '../../../hooks/useSettings';
5 | // components
6 | import Page from '../../../components/Page';
7 | import BusList from './BusList';
8 |
9 | // ----------------------------------------------------------------------
10 |
11 | export default function Buses() {
12 | const { themeStretch } = useSettings();
13 |
14 | return (
15 |
16 |
17 |
18 |
19 |
20 | );
21 | }
22 |
--------------------------------------------------------------------------------
/src/pages/dashboard/order/OrderCreate.js:
--------------------------------------------------------------------------------
1 | import { paramCase, capitalCase } from 'change-case';
2 | import { useParams, useLocation } from 'react-router-dom';
3 | // @mui
4 | import { Container } from '@mui/material';
5 | // routes
6 | import { PATH_DASHBOARD } from '../../../routes/paths';
7 | // hooks
8 | import useSettings from '../../../hooks/useSettings';
9 | // _mock_
10 | import { _userList } from '../../../_mock';
11 | // components
12 | import Page from '../../../components/Page';
13 | import HeaderBreadcrumbs from '../../../components/HeaderBreadcrumbs';
14 | // sections
15 | import OrderNewEditForm from '../../../sections/@dashboard/order/OrderNewEditForm';
16 |
17 | // ----------------------------------------------------------------------
18 |
19 | export default function OrderCreate() {
20 | const { themeStretch } = useSettings();
21 |
22 | const { pathname } = useLocation();
23 |
24 | const { name = '' } = useParams();
25 |
26 | const isEdit = pathname.includes('edit');
27 |
28 | const currentUser = _userList.find((user) => paramCase(user.name) === name);
29 |
30 | return (
31 |
32 |
33 |
41 |
42 |
43 |
44 |
45 | );
46 | }
47 |
--------------------------------------------------------------------------------
/src/pages/dashboard/order/Orders.js:
--------------------------------------------------------------------------------
1 | // @mui
2 | import { Container } from '@mui/material';
3 | // hooks
4 | import useSettings from '../../../hooks/useSettings';
5 | // components
6 | import Page from '../../../components/Page';
7 | import OrderList from './OrderList';
8 |
9 | // ----------------------------------------------------------------------
10 |
11 | export default function Orders() {
12 | const { themeStretch } = useSettings();
13 |
14 | return (
15 |
16 |
17 |
18 |
19 |
20 | );
21 | }
22 |
--------------------------------------------------------------------------------
/src/pages/dashboard/user/UserAccount.js:
--------------------------------------------------------------------------------
1 | // @mui
2 | import { Container } from '@mui/material';
3 | // routes
4 | import { PATH_DASHBOARD } from '../../../routes/paths';
5 | // hooks
6 | import useSettings from '../../../hooks/useSettings';
7 | // components
8 | import Page from '../../../components/Page';
9 | import HeaderBreadcrumbs from '../../../components/HeaderBreadcrumbs';
10 | // sections
11 | import { AccountGeneral } from '../../../sections/@dashboard/user/account';
12 |
13 | // ----------------------------------------------------------------------
14 |
15 | export default function UserAccount() {
16 | const { themeStretch } = useSettings();
17 |
18 | return (
19 |
20 |
21 |
25 |
26 |
27 |
28 | );
29 | }
30 |
--------------------------------------------------------------------------------
/src/pages/dashboard/user/customer/Customers.js:
--------------------------------------------------------------------------------
1 | // @mui
2 | import { Container } from '@mui/material';
3 | // hooks
4 | import useSettings from '../../../../hooks/useSettings';
5 | // components
6 | import Page from '../../../../components/Page';
7 | import CustomerList from './CustomerList';
8 |
9 | // ----------------------------------------------------------------------
10 |
11 | export default function Customers() {
12 | const { themeStretch } = useSettings();
13 |
14 | return (
15 |
16 |
17 |
18 |
19 |
20 | );
21 | }
22 |
--------------------------------------------------------------------------------
/src/pages/dashboard/user/employee/Employees.js:
--------------------------------------------------------------------------------
1 | // @mui
2 | import { Container } from '@mui/material';
3 | // hooks
4 | import useSettings from '../../../../hooks/useSettings';
5 | // components
6 | import Page from '../../../../components/Page';
7 | import EmployeesList from './EmployeesList';
8 |
9 | // ----------------------------------------------------------------------
10 |
11 | export default function Employees() {
12 | const { themeStretch } = useSettings();
13 |
14 | return (
15 |
16 |
17 |
18 |
19 |
20 | );
21 | }
22 |
--------------------------------------------------------------------------------
/src/redux/rootReducer.js:
--------------------------------------------------------------------------------
1 | import { combineReducers } from 'redux';
2 | import storage from 'redux-persist/lib/storage';
3 | // slices
4 | // import orderReducer from './slices/order';
5 | import userReducer from './slices/user';
6 |
7 | // ----------------------------------------------------------------------
8 |
9 | const rootPersistConfig = {
10 | key: 'root',
11 | storage,
12 | keyPrefix: 'redux-',
13 | whitelist: [],
14 | };
15 |
16 | const rootReducer = combineReducers({
17 | // order: orderReducer,
18 | user: userReducer,
19 | });
20 |
21 | export { rootPersistConfig, rootReducer };
22 |
--------------------------------------------------------------------------------
/src/redux/slices/order.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/clever-web/Buswash-React-Node-MySQL/4afb6bc6c28e67649aaf47f8f699c3842fcd5535/src/redux/slices/order.js
--------------------------------------------------------------------------------
/src/redux/store.js:
--------------------------------------------------------------------------------
1 | import { configureStore } from '@reduxjs/toolkit';
2 | import { useDispatch as useAppDispatch, useSelector as useAppSelector } from 'react-redux';
3 | import { persistStore, persistReducer } from 'redux-persist';
4 | import { rootPersistConfig, rootReducer } from './rootReducer';
5 |
6 | // ----------------------------------------------------------------------
7 |
8 | const store = configureStore({
9 | reducer: persistReducer(rootPersistConfig, rootReducer),
10 | middleware: (getDefaultMiddleware) =>
11 | getDefaultMiddleware({
12 | serializableCheck: false,
13 | immutableCheck: false,
14 | }),
15 | });
16 |
17 | const persistor = persistStore(store);
18 |
19 | const { dispatch } = store;
20 |
21 | const useSelector = useAppSelector;
22 |
23 | const useDispatch = () => useAppDispatch();
24 |
25 | export { store, persistor, dispatch, useSelector, useDispatch };
26 |
--------------------------------------------------------------------------------
/src/reportWebVitals.js:
--------------------------------------------------------------------------------
1 | const reportWebVitals = (onPerfEntry) => {
2 | if (onPerfEntry && onPerfEntry instanceof Function) {
3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
4 | getCLS(onPerfEntry);
5 | getFID(onPerfEntry);
6 | getFCP(onPerfEntry);
7 | getLCP(onPerfEntry);
8 | getTTFB(onPerfEntry);
9 | });
10 | }
11 | };
12 |
13 | export default reportWebVitals;
14 |
--------------------------------------------------------------------------------
/src/routes/paths.js:
--------------------------------------------------------------------------------
1 | // ----------------------------------------------------------------------
2 |
3 | function path(root, sublink) {
4 | return `${root}${sublink}`;
5 | }
6 |
7 | const ROOTS_AUTH = '/auth';
8 | const ROOTS_DASHBOARD = '/dashboard';
9 |
10 | // ----------------------------------------------------------------------
11 |
12 | export const PATH_AUTH = {
13 | root: ROOTS_AUTH,
14 | login: path(ROOTS_AUTH, '/login'),
15 | register: path(ROOTS_AUTH, '/register'),
16 | verify: path(ROOTS_AUTH, '/verify'),
17 | resetPassword: path(ROOTS_AUTH, '/reset-password'),
18 | newPassword: path(ROOTS_AUTH, '/new-password'),
19 | };
20 |
21 | export const PATH_PAGE = {
22 | page403: '/403',
23 | page404: '/404',
24 | page500: '/500',
25 | };
26 |
27 | export const PATH_DASHBOARD = {
28 | root: ROOTS_DASHBOARD,
29 | task: {
30 | tasklist: path(ROOTS_DASHBOARD, '/task'),
31 | new: path(ROOTS_DASHBOARD, '/task/new'),
32 | edit: (name) => path(ROOTS_DASHBOARD, `/task/${name}/edit`),
33 | },
34 | bus: {
35 | buslist: path(ROOTS_DASHBOARD, '/bus'),
36 | new: path(ROOTS_DASHBOARD, '/bus/new'),
37 | edit: (name) => path(ROOTS_DASHBOARD, `/bus/${name}/edit`),
38 | },
39 | employee: {
40 | employeelist: path(ROOTS_DASHBOARD, '/employee'),
41 | new: path(ROOTS_DASHBOARD, '/employee/new'),
42 | edit: (name) => path(ROOTS_DASHBOARD, `/employee/${name}/edit`),
43 | },
44 | customer: {
45 | customerlist: path(ROOTS_DASHBOARD, '/customer'),
46 | new: path(ROOTS_DASHBOARD, '/customer/new'),
47 | edit: (name) => path(ROOTS_DASHBOARD, `/customer/${name}/edit`),
48 | },
49 | permissionDenied: path(ROOTS_DASHBOARD, '/permission-denied'),
50 | user: {
51 | profile: path(ROOTS_DASHBOARD, '/profile'),
52 | },
53 | };
54 |
--------------------------------------------------------------------------------
/src/sections/@dashboard/bus/list/BusTableToolbar.js:
--------------------------------------------------------------------------------
1 | import PropTypes from 'prop-types';
2 | import { Stack, InputAdornment, TextField, MenuItem } from '@mui/material';
3 | // components
4 | import Iconify from '../../../../components/Iconify';
5 |
6 | // ----------------------------------------------------------------------
7 |
8 | BusTableToolbar.propTypes = {
9 | filterName: PropTypes.string,
10 | onFilterName: PropTypes.func,
11 | onFilterRole: PropTypes.func,
12 | optionsRole: PropTypes.arrayOf(PropTypes.string),
13 | };
14 |
15 | export default function BusTableToolbar({ filterName, onFilterName, optionsRole }) {
16 | return (
17 |
18 | onFilterName(event.target.value)}
22 | placeholder="Search Bus..."
23 | InputProps={{
24 | startAdornment: (
25 |
26 |
27 |
28 | ),
29 | }}
30 | />
31 |
32 | );
33 | }
34 |
--------------------------------------------------------------------------------
/src/sections/@dashboard/bus/list/index.js:
--------------------------------------------------------------------------------
1 | export { default as BusTableRow } from './BusTableRow';
2 | export { default as BusTableToolbar } from './BusTableToolbar';
3 |
--------------------------------------------------------------------------------
/src/sections/@dashboard/customer/list/CustomerTableToolbar.js:
--------------------------------------------------------------------------------
1 | import PropTypes from 'prop-types';
2 | import { Stack, InputAdornment, TextField, MenuItem } from '@mui/material';
3 | // components
4 | import Iconify from '../../../../components/Iconify';
5 |
6 | // ----------------------------------------------------------------------
7 |
8 | CustomerTableToolbar.propTypes = {
9 | filterName: PropTypes.string,
10 | onFilterName: PropTypes.func,
11 | };
12 |
13 | export default function CustomerTableToolbar({ filterName, onFilterName }) {
14 | return (
15 |
16 | onFilterName(event.target.value)}
20 | placeholder="Search user..."
21 | InputProps={{
22 | startAdornment: (
23 |
24 |
25 |
26 | ),
27 | }}
28 | />
29 |
30 | );
31 | }
32 |
--------------------------------------------------------------------------------
/src/sections/@dashboard/customer/list/index.js:
--------------------------------------------------------------------------------
1 | export { default as CustomerTableRow } from './CustomerTableRow';
2 | export { default as CustomerTableToolbar } from './CustomerTableToolbar';
3 |
--------------------------------------------------------------------------------
/src/sections/@dashboard/employee/list/EmployeeTableToolbar.js:
--------------------------------------------------------------------------------
1 | import PropTypes from 'prop-types';
2 | import { Stack, InputAdornment, TextField } from '@mui/material';
3 | // components
4 | import Iconify from '../../../../components/Iconify';
5 |
6 | // ----------------------------------------------------------------------
7 |
8 | EmployeeTableToolbar.propTypes = {
9 | filterName: PropTypes.string,
10 | onFilterName: PropTypes.func,
11 | };
12 |
13 | export default function EmployeeTableToolbar({ filterName, onFilterName }) {
14 | return (
15 |
16 | onFilterName(event.target.value)}
20 | placeholder="Search user..."
21 | InputProps={{
22 | startAdornment: (
23 |
24 |
25 |
26 | ),
27 | }}
28 | />
29 |
30 | );
31 | }
32 |
--------------------------------------------------------------------------------
/src/sections/@dashboard/employee/list/index.js:
--------------------------------------------------------------------------------
1 | export { default as EmployeeTableRow } from './EmployeeTableRow';
2 | export { default as EmployeeTableToolbar } from './EmployeeTableToolbar';
3 |
--------------------------------------------------------------------------------
/src/sections/@dashboard/order/list/OrderTableToolbar.js:
--------------------------------------------------------------------------------
1 | import PropTypes from 'prop-types';
2 | import { Stack, InputAdornment, TextField, MenuItem } from '@mui/material';
3 | // components
4 | import Iconify from '../../../../components/Iconify';
5 |
6 | // ----------------------------------------------------------------------
7 |
8 | OrderTableToolbar.propTypes = {
9 | filterName: PropTypes.string,
10 | onFilterName: PropTypes.func,
11 | };
12 |
13 | export default function OrderTableToolbar({ filterName, onFilterName }) {
14 | return (
15 |
16 | onFilterName(event.target.value)}
20 | placeholder="Search user..."
21 | InputProps={{
22 | startAdornment: (
23 |
24 |
25 |
26 | ),
27 | }}
28 | />
29 |
30 | );
31 | }
32 |
--------------------------------------------------------------------------------
/src/sections/@dashboard/order/list/index.js:
--------------------------------------------------------------------------------
1 | export { default as OrderTableRow } from './OrderTableRow';
2 | export { default as OrderTableToolbar } from './OrderTableToolbar';
3 |
--------------------------------------------------------------------------------
/src/sections/@dashboard/user/account/index.js:
--------------------------------------------------------------------------------
1 | export { default as AccountGeneral } from './AccountGeneral';
2 |
--------------------------------------------------------------------------------
/src/sections/auth/AuthFirebaseSocial.js:
--------------------------------------------------------------------------------
1 | // @mui
2 | import { Stack, Button, Divider, Typography } from '@mui/material';
3 | // components
4 | import Iconify from '../../components/Iconify';
5 |
6 | // ----------------------------------------------------------------------
7 |
8 | export default function AuthFirebaseSocial() {
9 | return (
10 | <>
11 |
12 |
15 |
16 |
19 |
20 |
23 |
24 |
25 |
26 |
27 | OR
28 |
29 |
30 |
31 | );
32 | }
33 |
--------------------------------------------------------------------------------
/src/sections/auth/login/index.js:
--------------------------------------------------------------------------------
1 | export { default as LoginForm } from './LoginForm';
2 |
--------------------------------------------------------------------------------
/src/sections/auth/new-password/index.js:
--------------------------------------------------------------------------------
1 | export { default as NewPasswordForm } from './NewPasswordForm';
2 |
--------------------------------------------------------------------------------
/src/sections/auth/register/index.js:
--------------------------------------------------------------------------------
1 | export { default as RegisterForm } from './RegisterForm';
2 |
--------------------------------------------------------------------------------
/src/sections/auth/reset-password/ResetPasswordForm.js:
--------------------------------------------------------------------------------
1 | import * as Yup from 'yup';
2 | import { useNavigate } from 'react-router-dom';
3 | // form
4 | import { yupResolver } from '@hookform/resolvers/yup';
5 | import { useForm } from 'react-hook-form';
6 | // @mui
7 | import { Stack } from '@mui/material';
8 | import { LoadingButton } from '@mui/lab';
9 | // routes
10 | import { PATH_AUTH } from '../../../routes/paths';
11 | // components
12 | import { FormProvider, RHFTextField } from '../../../components/hook-form';
13 |
14 | // ----------------------------------------------------------------------
15 |
16 | export default function ResetPasswordForm() {
17 | const navigate = useNavigate();
18 |
19 | const ResetPasswordSchema = Yup.object().shape({
20 | email: Yup.string().email('Email must be a valid email address').required('Email is required'),
21 | });
22 |
23 | const methods = useForm({
24 | resolver: yupResolver(ResetPasswordSchema),
25 | defaultValues: { email: '' },
26 | });
27 |
28 | const {
29 | handleSubmit,
30 | formState: { isSubmitting },
31 | } = methods;
32 |
33 | const onSubmit = async (data) => {
34 | try {
35 | await new Promise((resolve) => setTimeout(resolve, 500));
36 |
37 | sessionStorage.setItem('email-recovery', data.email);
38 |
39 | navigate(PATH_AUTH.newPassword);
40 | } catch (error) {
41 | console.error(error);
42 | }
43 | };
44 |
45 | return (
46 |
47 |
48 |
49 |
50 |
51 | Send Request
52 |
53 |
54 |
55 | );
56 | }
57 |
--------------------------------------------------------------------------------
/src/sections/auth/reset-password/index.js:
--------------------------------------------------------------------------------
1 | export { default as ResetPasswordForm } from './ResetPasswordForm';
2 |
--------------------------------------------------------------------------------
/src/sections/auth/verify-code/index.js:
--------------------------------------------------------------------------------
1 | export { default as VerifyCodeForm } from './VerifyCodeForm';
2 |
--------------------------------------------------------------------------------
/src/sections/home/index.js:
--------------------------------------------------------------------------------
1 | export { default as HomeHero } from './HomeHero';
2 | export { default as HomeMinimal } from './HomeMinimal';
3 | export { default as HomeDarkMode } from './HomeDarkMode';
4 | export { default as HomeLookingFor } from './HomeLookingFor';
5 | export { default as HomeColorPresets } from './HomeColorPresets';
6 | export { default as HomePricingPlans } from './HomePricingPlans';
7 | export { default as HomeAdvertisement } from './HomeAdvertisement';
8 | export { default as HomeCleanInterfaces } from './HomeCleanInterfaces';
9 | export { default as HomeHugePackElements } from './HomeHugePackElements';
10 |
--------------------------------------------------------------------------------
/src/theme/breakpoints.js:
--------------------------------------------------------------------------------
1 | // ----------------------------------------------------------------------
2 |
3 | const breakpoints = {
4 | values: {
5 | xs: 0,
6 | sm: 600,
7 | md: 900,
8 | lg: 1200,
9 | xl: 1536
10 | }
11 | };
12 |
13 | export default breakpoints;
14 |
--------------------------------------------------------------------------------
/src/theme/index.js:
--------------------------------------------------------------------------------
1 | import PropTypes from 'prop-types';
2 | import { useMemo } from 'react';
3 | // @mui
4 | import { CssBaseline } from '@mui/material';
5 | import { createTheme, ThemeProvider as MUIThemeProvider, StyledEngineProvider } from '@mui/material/styles';
6 | // hooks
7 | import useSettings from '../hooks/useSettings';
8 | //
9 | import palette from './palette';
10 | import typography from './typography';
11 | import breakpoints from './breakpoints';
12 | import componentsOverride from './overrides';
13 | import shadows, { customShadows } from './shadows';
14 |
15 | // ----------------------------------------------------------------------
16 |
17 | ThemeProvider.propTypes = {
18 | children: PropTypes.node,
19 | };
20 |
21 | export default function ThemeProvider({ children }) {
22 | const { themeMode, themeDirection } = useSettings();
23 |
24 | const isLight = themeMode === 'light';
25 |
26 | const themeOptions = useMemo(
27 | () => ({
28 | palette: isLight ? palette.light : palette.dark,
29 | typography,
30 | breakpoints,
31 | shape: { borderRadius: 8 },
32 | direction: themeDirection,
33 | shadows: isLight ? shadows.light : shadows.dark,
34 | customShadows: isLight ? customShadows.light : customShadows.dark,
35 | }),
36 | [isLight, themeDirection]
37 | );
38 |
39 | const theme = createTheme(themeOptions);
40 |
41 | theme.components = componentsOverride(theme);
42 |
43 | return (
44 |
45 |
46 |
47 | {children}
48 |
49 |
50 | );
51 | }
52 |
--------------------------------------------------------------------------------
/src/theme/overrides/Accordion.js:
--------------------------------------------------------------------------------
1 | // ----------------------------------------------------------------------
2 |
3 | export default function Accordion(theme) {
4 | return {
5 | MuiAccordion: {
6 | styleOverrides: {
7 | root: {
8 | '&.Mui-expanded': {
9 | boxShadow: theme.customShadows.z8,
10 | borderRadius: theme.shape.borderRadius,
11 | },
12 | '&.Mui-disabled': {
13 | backgroundColor: 'transparent',
14 | },
15 | },
16 | },
17 | },
18 | MuiAccordionSummary: {
19 | styleOverrides: {
20 | root: {
21 | paddingLeft: theme.spacing(2),
22 | paddingRight: theme.spacing(1),
23 | '&.Mui-disabled': {
24 | opacity: 1,
25 | color: theme.palette.action.disabled,
26 | '& .MuiTypography-root': {
27 | color: 'inherit',
28 | },
29 | },
30 | },
31 | expandIconWrapper: {
32 | color: 'inherit',
33 | },
34 | },
35 | },
36 | };
37 | }
38 |
--------------------------------------------------------------------------------
/src/theme/overrides/Autocomplete.js:
--------------------------------------------------------------------------------
1 | // ----------------------------------------------------------------------
2 |
3 | export default function Autocomplete(theme) {
4 | return {
5 | MuiAutocomplete: {
6 | styleOverrides: {
7 | paper: {
8 | boxShadow: theme.customShadows.dropdown,
9 | },
10 | listbox: {
11 | padding: theme.spacing(0, 1),
12 | '& .MuiAutocomplete-option': {
13 | padding: theme.spacing(1),
14 | margin: theme.spacing(1, 0),
15 | borderRadius: theme.shape.borderRadius,
16 | },
17 | },
18 | },
19 | },
20 | };
21 | }
22 |
--------------------------------------------------------------------------------
/src/theme/overrides/Avatar.js:
--------------------------------------------------------------------------------
1 | // ----------------------------------------------------------------------
2 |
3 | export default function Avatar(theme) {
4 | return {
5 | MuiAvatar: {
6 | styleOverrides: {
7 | colorDefault: {
8 | color: theme.palette.text.secondary,
9 | backgroundColor: theme.palette.grey[400],
10 | },
11 | },
12 | },
13 | MuiAvatarGroup: {
14 | styleOverrides: {
15 | avatar: {
16 | fontSize: 16,
17 | fontWeight: theme.typography.fontWeightMedium,
18 | '&:first-of-type': {
19 | fontSize: 14,
20 | color: theme.palette.primary.main,
21 | backgroundColor: theme.palette.primary.lighter,
22 | },
23 | },
24 | },
25 | },
26 | };
27 | }
28 |
--------------------------------------------------------------------------------
/src/theme/overrides/Backdrop.js:
--------------------------------------------------------------------------------
1 | import { alpha } from '@mui/material/styles';
2 |
3 | // ----------------------------------------------------------------------
4 |
5 | export default function Backdrop(theme) {
6 | const varLow = alpha(theme.palette.grey[900], 0.48);
7 | const varHigh = alpha(theme.palette.grey[900], 1);
8 |
9 | return {
10 | MuiBackdrop: {
11 | styleOverrides: {
12 | root: {
13 | background: [
14 | `rgb(22,28,36)`,
15 | `-moz-linear-gradient(75deg, ${varLow} 0%, ${varHigh} 100%)`,
16 | `-webkit-linear-gradient(75deg, ${varLow} 0%, ${varHigh} 100%)`,
17 | `linear-gradient(75deg, ${varLow} 0%, ${varHigh} 100%)`,
18 | ],
19 | '&.MuiBackdrop-invisible': {
20 | background: 'transparent',
21 | },
22 | },
23 | },
24 | },
25 | };
26 | }
27 |
--------------------------------------------------------------------------------
/src/theme/overrides/Badge.js:
--------------------------------------------------------------------------------
1 | // ----------------------------------------------------------------------
2 |
3 | export default function Badge() {
4 | return {
5 | MuiBadge: {
6 | styleOverrides: {
7 | dot: {
8 | width: 10,
9 | height: 10,
10 | borderRadius: '50%',
11 | },
12 | },
13 | },
14 | };
15 | }
16 |
--------------------------------------------------------------------------------
/src/theme/overrides/Breadcrumbs.js:
--------------------------------------------------------------------------------
1 | // ----------------------------------------------------------------------
2 |
3 | export default function Breadcrumbs(theme) {
4 | return {
5 | MuiBreadcrumbs: {
6 | styleOverrides: {
7 | separator: {
8 | marginLeft: theme.spacing(2),
9 | marginRight: theme.spacing(2),
10 | },
11 | },
12 | },
13 | };
14 | }
15 |
--------------------------------------------------------------------------------
/src/theme/overrides/Button.js:
--------------------------------------------------------------------------------
1 | // ----------------------------------------------------------------------
2 |
3 | export default function Button(theme) {
4 | return {
5 | MuiButton: {
6 | styleOverrides: {
7 | root: {
8 | '&:hover': {
9 | boxShadow: 'none',
10 | },
11 | },
12 | sizeLarge: {
13 | height: 48,
14 | },
15 | // contained
16 | containedInherit: {
17 | color: theme.palette.grey[800],
18 | boxShadow: theme.customShadows.z8,
19 | '&:hover': {
20 | backgroundColor: theme.palette.grey[400],
21 | },
22 | },
23 | containedPrimary: {
24 | boxShadow: theme.customShadows.primary,
25 | },
26 | containedSecondary: {
27 | boxShadow: theme.customShadows.secondary,
28 | },
29 | containedInfo: {
30 | boxShadow: theme.customShadows.info,
31 | },
32 | containedSuccess: {
33 | boxShadow: theme.customShadows.success,
34 | },
35 | containedWarning: {
36 | boxShadow: theme.customShadows.warning,
37 | },
38 | containedError: {
39 | boxShadow: theme.customShadows.error,
40 | },
41 | // outlined
42 | outlinedInherit: {
43 | border: `1px solid ${theme.palette.grey[500_32]}`,
44 | '&:hover': {
45 | backgroundColor: theme.palette.action.hover,
46 | },
47 | },
48 | textInherit: {
49 | '&:hover': {
50 | backgroundColor: theme.palette.action.hover,
51 | },
52 | },
53 | },
54 | },
55 | };
56 | }
57 |
--------------------------------------------------------------------------------
/src/theme/overrides/ButtonGroup.js:
--------------------------------------------------------------------------------
1 | // ----------------------------------------------------------------------
2 |
3 | export default function ButtonGroup(theme) {
4 | const styleContained = (color) => ({
5 | props: { variant: 'contained', color },
6 | style: { boxShadow: theme.customShadows[color] },
7 | });
8 |
9 | return {
10 | MuiButtonGroup: {
11 | variants: [
12 | {
13 | props: { variant: 'contained', color: 'inherit' },
14 | style: { boxShadow: theme.customShadows.z8 },
15 | },
16 | styleContained('primary'),
17 | styleContained('secondary'),
18 | styleContained('info'),
19 | styleContained('success'),
20 | styleContained('warning'),
21 | styleContained('error'),
22 |
23 | {
24 | props: { disabled: true },
25 | style: {
26 | boxShadow: 'none',
27 | '& .MuiButtonGroup-grouped.Mui-disabled': {
28 | color: theme.palette.action.disabled,
29 | borderColor: `${theme.palette.action.disabledBackground} !important`,
30 | '&.MuiButton-contained': {
31 | backgroundColor: theme.palette.action.disabledBackground,
32 | },
33 | },
34 | },
35 | },
36 | ],
37 |
38 | styleOverrides: {
39 | root: {
40 | '&:hover': {
41 | boxShadow: 'none',
42 | },
43 | },
44 | },
45 | },
46 | };
47 | }
48 |
--------------------------------------------------------------------------------
/src/theme/overrides/Card.js:
--------------------------------------------------------------------------------
1 | // ----------------------------------------------------------------------
2 |
3 | export default function Card(theme) {
4 | return {
5 | MuiCard: {
6 | styleOverrides: {
7 | root: {
8 | position: 'relative',
9 | boxShadow: theme.customShadows.card,
10 | borderRadius: Number(theme.shape.borderRadius) * 2,
11 | zIndex: 0, // Fix Safari overflow: hidden with border radius
12 | },
13 | },
14 | },
15 | MuiCardHeader: {
16 | defaultProps: {
17 | titleTypographyProps: { variant: 'h6' },
18 | subheaderTypographyProps: { variant: 'body2', marginTop: theme.spacing(0.5) },
19 | },
20 | styleOverrides: {
21 | root: {
22 | padding: theme.spacing(3, 3, 0),
23 | },
24 | },
25 | },
26 | MuiCardContent: {
27 | styleOverrides: {
28 | root: {
29 | padding: theme.spacing(3),
30 | },
31 | },
32 | },
33 | };
34 | }
35 |
--------------------------------------------------------------------------------
/src/theme/overrides/Checkbox.js:
--------------------------------------------------------------------------------
1 | //
2 | import { CheckboxIcon, CheckboxCheckedIcon, CheckboxIndeterminateIcon } from './CustomIcons';
3 |
4 | // ----------------------------------------------------------------------
5 |
6 | export default function Checkbox(theme) {
7 | return {
8 | MuiCheckbox: {
9 | defaultProps: {
10 | icon: ,
11 | checkedIcon: ,
12 | indeterminateIcon: ,
13 | },
14 |
15 | styleOverrides: {
16 | root: {
17 | padding: theme.spacing(1),
18 | '&.Mui-checked.Mui-disabled, &.Mui-disabled': {
19 | color: theme.palette.action.disabled,
20 | },
21 | '& .MuiSvgIcon-fontSizeMedium': {
22 | width: 24,
23 | height: 24,
24 | },
25 | '& .MuiSvgIcon-fontSizeSmall': {
26 | width: 20,
27 | height: 20,
28 | },
29 | svg: {
30 | fontSize: 24,
31 | '&[font-size=small]': {
32 | fontSize: 20,
33 | },
34 | },
35 | },
36 | },
37 | },
38 | };
39 | }
40 |
--------------------------------------------------------------------------------
/src/theme/overrides/Chip.js:
--------------------------------------------------------------------------------
1 | //
2 | import { CloseIcon } from './CustomIcons';
3 |
4 | // ----------------------------------------------------------------------
5 |
6 | export default function Chip(theme) {
7 | return {
8 | MuiChip: {
9 | defaultProps: {
10 | deleteIcon: ,
11 | },
12 |
13 | styleOverrides: {
14 | colorDefault: {
15 | '& .MuiChip-avatarMedium, .MuiChip-avatarSmall': {
16 | color: theme.palette.text.secondary,
17 | },
18 | },
19 | outlined: {
20 | borderColor: theme.palette.grey[500_32],
21 | '&.MuiChip-colorPrimary': {
22 | borderColor: theme.palette.primary.main,
23 | },
24 | '&.MuiChip-colorSecondary': {
25 | borderColor: theme.palette.secondary.main,
26 | },
27 | },
28 | //
29 | avatarColorInfo: {
30 | color: theme.palette.info.contrastText,
31 | backgroundColor: theme.palette.info.dark,
32 | },
33 | avatarColorSuccess: {
34 | color: theme.palette.success.contrastText,
35 | backgroundColor: theme.palette.success.dark,
36 | },
37 | avatarColorWarning: {
38 | color: theme.palette.warning.contrastText,
39 | backgroundColor: theme.palette.warning.dark,
40 | },
41 | avatarColorError: {
42 | color: theme.palette.error.contrastText,
43 | backgroundColor: theme.palette.error.dark,
44 | },
45 | },
46 | },
47 | };
48 | }
49 |
--------------------------------------------------------------------------------
/src/theme/overrides/ControlLabel.js:
--------------------------------------------------------------------------------
1 | // ----------------------------------------------------------------------
2 |
3 | export default function ControlLabel(theme) {
4 | return {
5 | MuiFormControlLabel: {
6 | styleOverrides: {
7 | label: {
8 | ...theme.typography.body2,
9 | },
10 | },
11 | },
12 | MuiFormHelperText: {
13 | styleOverrides: {
14 | root: {
15 | marginTop: theme.spacing(1),
16 | },
17 | },
18 | },
19 | MuiFormLabel: {
20 | styleOverrides: {
21 | root: {
22 | color: theme.palette.text.disabled,
23 | },
24 | },
25 | },
26 | };
27 | }
28 |
--------------------------------------------------------------------------------
/src/theme/overrides/CssBaseline.js:
--------------------------------------------------------------------------------
1 | // ----------------------------------------------------------------------
2 |
3 | export default function CssBaseline() {
4 | return {
5 | MuiCssBaseline: {
6 | styleOverrides: {
7 | '*': {
8 | margin: 0,
9 | padding: 0,
10 | boxSizing: 'border-box',
11 | },
12 | html: {
13 | width: '100%',
14 | height: '100%',
15 | WebkitOverflowScrolling: 'touch',
16 | },
17 | body: {
18 | width: '100%',
19 | height: '100%',
20 | },
21 | '#root': {
22 | width: '100%',
23 | height: '100%',
24 | },
25 | input: {
26 | '&[type=number]': {
27 | MozAppearance: 'textfield',
28 | '&::-webkit-outer-spin-button': {
29 | margin: 0,
30 | WebkitAppearance: 'none',
31 | },
32 | '&::-webkit-inner-spin-button': {
33 | margin: 0,
34 | WebkitAppearance: 'none',
35 | },
36 | },
37 | },
38 | img: {
39 | display: 'block',
40 | maxWidth: '100%',
41 | },
42 | },
43 | },
44 | };
45 | }
46 |
--------------------------------------------------------------------------------
/src/theme/overrides/Dialog.js:
--------------------------------------------------------------------------------
1 | // ----------------------------------------------------------------------
2 |
3 | export default function Dialog(theme) {
4 | return {
5 | MuiDialog: {
6 | styleOverrides: {
7 | paper: {
8 | boxShadow: theme.customShadows.dialog,
9 | '&.MuiPaper-rounded': {
10 | borderRadius: Number(theme.shape.borderRadius) * 2,
11 | },
12 | '&.MuiDialog-paperFullScreen': {
13 | borderRadius: 0,
14 | },
15 | '&.MuiDialog-paper .MuiDialogActions-root': {
16 | padding: theme.spacing(3),
17 | },
18 | '@media (max-width: 600px)': {
19 | margin: theme.spacing(2),
20 | },
21 | '@media (max-width: 663.95px)': {
22 | '&.MuiDialog-paperWidthSm.MuiDialog-paperScrollBody': {
23 | maxWidth: '100%',
24 | },
25 | },
26 | },
27 | paperFullWidth: {
28 | width: '100%',
29 | },
30 | },
31 | },
32 | MuiDialogTitle: {
33 | styleOverrides: {
34 | root: {
35 | padding: theme.spacing(3, 3, 0),
36 | },
37 | },
38 | },
39 | MuiDialogContent: {
40 | styleOverrides: {
41 | root: {
42 | borderTop: 0,
43 | borderBottom: 0,
44 | padding: theme.spacing(3),
45 | },
46 | },
47 | },
48 | MuiDialogActions: {
49 | styleOverrides: {
50 | root: {
51 | '& > :not(:first-of-type)': {
52 | marginLeft: theme.spacing(1.5),
53 | },
54 | },
55 | },
56 | },
57 | };
58 | }
59 |
--------------------------------------------------------------------------------
/src/theme/overrides/Drawer.js:
--------------------------------------------------------------------------------
1 | import { alpha } from '@mui/material';
2 |
3 | // ----------------------------------------------------------------------
4 |
5 | export default function Drawer(theme) {
6 | const isLight = theme.palette.mode === 'light';
7 |
8 | return {
9 | MuiDrawer: {
10 | styleOverrides: {
11 | modal: {
12 | '&[role="presentation"]': {
13 | '& .MuiDrawer-paperAnchorLeft': {
14 | boxShadow: `8px 24px 24px 12px ${alpha(theme.palette.grey[900], isLight ? 0.16 : 0.48)}`,
15 | },
16 | '& .MuiDrawer-paperAnchorRight': {
17 | boxShadow: `-8px 24px 24px 12px ${alpha(theme.palette.grey[900], isLight ? 0.16 : 0.48)}`,
18 | },
19 | },
20 | },
21 | },
22 | },
23 | };
24 | }
25 |
--------------------------------------------------------------------------------
/src/theme/overrides/Fab.js:
--------------------------------------------------------------------------------
1 | // ----------------------------------------------------------------------
2 |
3 | export default function Fab(theme) {
4 | return {
5 | MuiFab: {
6 | defaultProps: {
7 | color: 'primary',
8 | },
9 |
10 | styleOverrides: {
11 | root: {
12 | boxShadow: theme.customShadows.z8,
13 | '&:hover': {
14 | boxShadow: 'none',
15 | backgroundColor: theme.palette.grey[400],
16 | },
17 | },
18 | primary: {
19 | boxShadow: theme.customShadows.primary,
20 | '&:hover': {
21 | backgroundColor: theme.palette.primary.dark,
22 | },
23 | },
24 | secondary: {
25 | boxShadow: theme.customShadows.secondary,
26 | '&:hover': {
27 | backgroundColor: theme.palette.secondary.dark,
28 | },
29 | },
30 | extended: {
31 | '& svg': {
32 | marginRight: theme.spacing(1),
33 | },
34 | },
35 | },
36 | },
37 | };
38 | }
39 |
--------------------------------------------------------------------------------
/src/theme/overrides/Input.js:
--------------------------------------------------------------------------------
1 | // ----------------------------------------------------------------------
2 |
3 | export default function Input(theme) {
4 | return {
5 | MuiInputBase: {
6 | styleOverrides: {
7 | root: {
8 | '&.Mui-disabled': {
9 | '& svg': { color: theme.palette.text.disabled },
10 | },
11 | },
12 | input: {
13 | '&::placeholder': {
14 | opacity: 1,
15 | color: theme.palette.text.disabled,
16 | },
17 | },
18 | },
19 | },
20 | MuiInput: {
21 | styleOverrides: {
22 | underline: {
23 | '&:before': {
24 | borderBottomColor: theme.palette.grey[500_56],
25 | },
26 | },
27 | },
28 | },
29 | MuiFilledInput: {
30 | styleOverrides: {
31 | root: {
32 | backgroundColor: theme.palette.grey[500_12],
33 | '&:hover': {
34 | backgroundColor: theme.palette.grey[500_16],
35 | },
36 | '&.Mui-focused': {
37 | backgroundColor: theme.palette.action.focus,
38 | },
39 | '&.Mui-disabled': {
40 | backgroundColor: theme.palette.action.disabledBackground,
41 | },
42 | },
43 | underline: {
44 | '&:before': {
45 | borderBottomColor: theme.palette.grey[500_56],
46 | },
47 | },
48 | },
49 | },
50 | MuiOutlinedInput: {
51 | styleOverrides: {
52 | root: {
53 | '& .MuiOutlinedInput-notchedOutline': {
54 | borderColor: theme.palette.grey[500_32],
55 | },
56 | '&.Mui-disabled': {
57 | '& .MuiOutlinedInput-notchedOutline': {
58 | borderColor: theme.palette.action.disabledBackground,
59 | },
60 | },
61 | },
62 | },
63 | },
64 | };
65 | }
66 |
--------------------------------------------------------------------------------
/src/theme/overrides/Link.js:
--------------------------------------------------------------------------------
1 | // ----------------------------------------------------------------------
2 |
3 | export default function Link() {
4 | return {
5 | MuiLink: {
6 | defaultProps: {
7 | underline: 'hover',
8 | },
9 | },
10 | };
11 | }
12 |
--------------------------------------------------------------------------------
/src/theme/overrides/List.js:
--------------------------------------------------------------------------------
1 | // ----------------------------------------------------------------------
2 |
3 | export default function List(theme) {
4 | return {
5 | MuiListItemIcon: {
6 | styleOverrides: {
7 | root: {
8 | color: 'inherit',
9 | minWidth: 'auto',
10 | marginRight: theme.spacing(2),
11 | },
12 | },
13 | },
14 | MuiListItemAvatar: {
15 | styleOverrides: {
16 | root: {
17 | minWidth: 'auto',
18 | marginRight: theme.spacing(2),
19 | },
20 | },
21 | },
22 | MuiListItemText: {
23 | styleOverrides: {
24 | root: {
25 | marginTop: 0,
26 | marginBottom: 0,
27 | },
28 | multiline: {
29 | marginTop: 0,
30 | marginBottom: 0,
31 | },
32 | },
33 | },
34 | };
35 | }
36 |
--------------------------------------------------------------------------------
/src/theme/overrides/LoadingButton.js:
--------------------------------------------------------------------------------
1 | // ----------------------------------------------------------------------
2 |
3 | export default function LoadingButton() {
4 | return {
5 | MuiLoadingButton: {
6 | styleOverrides: {
7 | root: {
8 | '&.MuiButton-text': {
9 | '& .MuiLoadingButton-startIconPendingStart': {
10 | marginLeft: 0,
11 | },
12 | '& .MuiLoadingButton-endIconPendingEnd': {
13 | marginRight: 0,
14 | },
15 | },
16 | },
17 | },
18 | },
19 | };
20 | }
21 |
--------------------------------------------------------------------------------
/src/theme/overrides/Menu.js:
--------------------------------------------------------------------------------
1 | // ----------------------------------------------------------------------
2 |
3 | export default function Menu(theme) {
4 | return {
5 | MuiMenuItem: {
6 | styleOverrides: {
7 | root: {
8 | '&.Mui-selected': {
9 | backgroundColor: theme.palette.action.selected,
10 | '&:hover': {
11 | backgroundColor: theme.palette.action.hover,
12 | },
13 | },
14 | },
15 | },
16 | },
17 | };
18 | }
19 |
--------------------------------------------------------------------------------
/src/theme/overrides/Pagination.js:
--------------------------------------------------------------------------------
1 | import { alpha } from '@mui/material/styles';
2 |
3 | // ----------------------------------------------------------------------
4 |
5 | export default function Pagination(theme) {
6 | return {
7 | MuiPaginationItem: {
8 | styleOverrides: {
9 | root: {
10 | '&.Mui-selected': {
11 | fontWeight: theme.typography.fontWeightBold,
12 | },
13 | },
14 | textPrimary: {
15 | '&.Mui-selected': {
16 | color: theme.palette.primary.main,
17 | backgroundColor: alpha(theme.palette.primary.main, 0.08),
18 | '&:hover, &.Mui-focusVisible': {
19 | backgroundColor: `${alpha(theme.palette.primary.main, 0.24)} !important`,
20 | },
21 | },
22 | },
23 | outlined: {
24 | border: `1px solid ${theme.palette.grey[500_32]}`,
25 | },
26 | outlinedPrimary: {
27 | '&.Mui-selected': {
28 | backgroundColor: alpha(theme.palette.primary.main, 0.08),
29 | border: `1px solid ${alpha(theme.palette.primary.main, 0.24)}`,
30 | },
31 | },
32 | },
33 | },
34 | };
35 | }
36 |
--------------------------------------------------------------------------------
/src/theme/overrides/Paper.js:
--------------------------------------------------------------------------------
1 | // ----------------------------------------------------------------------
2 |
3 | export default function Paper(theme) {
4 | return {
5 | MuiPaper: {
6 | defaultProps: {
7 | elevation: 0,
8 | },
9 |
10 | variants: [
11 | {
12 | props: { variant: 'outlined' },
13 | style: { borderColor: theme.palette.grey[500_12] },
14 | },
15 | ],
16 |
17 | styleOverrides: {
18 | root: {
19 | backgroundImage: 'none',
20 | },
21 | },
22 | },
23 | };
24 | }
25 |
--------------------------------------------------------------------------------
/src/theme/overrides/Popover.js:
--------------------------------------------------------------------------------
1 | // ----------------------------------------------------------------------
2 |
3 | export default function Popover(theme) {
4 | return {
5 | MuiPopover: {
6 | styleOverrides: {
7 | paper: {
8 | boxShadow: theme.customShadows.dropdown,
9 | borderRadius: Number(theme.shape.borderRadius) * 1.5,
10 | },
11 | },
12 | },
13 | };
14 | }
15 |
--------------------------------------------------------------------------------
/src/theme/overrides/Progress.js:
--------------------------------------------------------------------------------
1 | // ----------------------------------------------------------------------
2 |
3 | export default function Progress(theme) {
4 | const isLight = theme.palette.mode === 'light';
5 |
6 | return {
7 | MuiLinearProgress: {
8 | styleOverrides: {
9 | root: {
10 | borderRadius: 4,
11 | overflow: 'hidden',
12 | },
13 | bar: {
14 | borderRadius: 4,
15 | },
16 | colorPrimary: {
17 | backgroundColor: theme.palette.primary[isLight ? 'lighter' : 'darker'],
18 | },
19 | buffer: {
20 | backgroundColor: 'transparent',
21 | },
22 | },
23 | },
24 | };
25 | }
26 |
--------------------------------------------------------------------------------
/src/theme/overrides/Radio.js:
--------------------------------------------------------------------------------
1 | // ----------------------------------------------------------------------
2 |
3 | export default function Radio(theme) {
4 | return {
5 | MuiRadio: {
6 | styleOverrides: {
7 | root: {
8 | padding: theme.spacing(1),
9 | svg: {
10 | fontSize: 24,
11 | '&[font-size=small]': {
12 | fontSize: 20,
13 | },
14 | },
15 | },
16 | },
17 | },
18 | };
19 | }
20 |
--------------------------------------------------------------------------------
/src/theme/overrides/Rating.js:
--------------------------------------------------------------------------------
1 | //
2 | import { StarIcon } from './CustomIcons';
3 |
4 | // ----------------------------------------------------------------------
5 |
6 | const ICON_SMALL = { width: 20, height: 20 };
7 | const ICON_LARGE = { width: 28, height: 28 };
8 |
9 | export default function Rating(theme) {
10 | return {
11 | MuiRating: {
12 | defaultProps: {
13 | emptyIcon: ,
14 | icon: ,
15 | },
16 |
17 | styleOverrides: {
18 | root: {
19 | '&.Mui-disabled': {
20 | opacity: 0.48,
21 | },
22 | },
23 | iconEmpty: { color: theme.palette.grey[500_48] },
24 | sizeSmall: { '& svg': { ...ICON_SMALL } },
25 | sizeLarge: { '& svg': { ...ICON_LARGE } },
26 | },
27 | },
28 | };
29 | }
30 |
--------------------------------------------------------------------------------
/src/theme/overrides/Select.js:
--------------------------------------------------------------------------------
1 | //
2 | import { InputSelectIcon } from './CustomIcons';
3 |
4 | // ----------------------------------------------------------------------
5 |
6 | export default function Select() {
7 | return {
8 | MuiSelect: {
9 | defaultProps: {
10 | IconComponent: InputSelectIcon,
11 | },
12 | },
13 | };
14 | }
15 |
--------------------------------------------------------------------------------
/src/theme/overrides/Skeleton.js:
--------------------------------------------------------------------------------
1 | // ----------------------------------------------------------------------
2 |
3 | export default function Skeleton(theme) {
4 | return {
5 | MuiSkeleton: {
6 | defaultProps: {
7 | animation: 'wave',
8 | },
9 |
10 | styleOverrides: {
11 | root: {
12 | backgroundColor: theme.palette.background.neutral,
13 | },
14 | },
15 | },
16 | };
17 | }
18 |
--------------------------------------------------------------------------------
/src/theme/overrides/Slider.js:
--------------------------------------------------------------------------------
1 | // ----------------------------------------------------------------------
2 |
3 | export default function Slider(theme) {
4 | const isLight = theme.palette.mode === 'light';
5 |
6 | return {
7 | MuiSlider: {
8 | defaultProps: {
9 | size: 'small',
10 | },
11 |
12 | styleOverrides: {
13 | root: {
14 | '&.Mui-disabled': {
15 | color: theme.palette.action.disabled,
16 | },
17 | },
18 | markLabel: {
19 | fontSize: 13,
20 | color: theme.palette.text.disabled,
21 | },
22 | valueLabel: {
23 | borderRadius: 8,
24 | backgroundColor: theme.palette.grey[isLight ? 800 : 700],
25 | },
26 | },
27 | },
28 | };
29 | }
30 |
--------------------------------------------------------------------------------
/src/theme/overrides/Stepper.js:
--------------------------------------------------------------------------------
1 | // ----------------------------------------------------------------------
2 |
3 | export default function Stepper(theme) {
4 | return {
5 | MuiStepConnector: {
6 | styleOverrides: {
7 | line: {
8 | borderColor: theme.palette.divider,
9 | },
10 | },
11 | },
12 | };
13 | }
14 |
--------------------------------------------------------------------------------
/src/theme/overrides/SvgIcon.js:
--------------------------------------------------------------------------------
1 | // ----------------------------------------------------------------------
2 |
3 | export default function SvgIcon() {
4 | return {
5 | MuiSvgIcon: {
6 | styleOverrides: {
7 | fontSizeSmall: {
8 | width: 20,
9 | height: 20,
10 | fontSize: 'inherit',
11 | },
12 | fontSizeLarge: {
13 | width: 32,
14 | height: 32,
15 | fontSize: 'inherit',
16 | },
17 | },
18 | },
19 | };
20 | }
21 |
--------------------------------------------------------------------------------
/src/theme/overrides/Switch.js:
--------------------------------------------------------------------------------
1 | // ----------------------------------------------------------------------
2 |
3 | export default function Switch(theme) {
4 | const isLight = theme.palette.mode === 'light';
5 |
6 | return {
7 | MuiSwitch: {
8 | styleOverrides: {
9 | thumb: {
10 | boxShadow: theme.customShadows.z1,
11 | },
12 | track: {
13 | opacity: 1,
14 | backgroundColor: theme.palette.grey[500],
15 | },
16 | switchBase: {
17 | left: 0,
18 | right: 'auto',
19 | '&:not(:.Mui-checked)': {
20 | color: theme.palette.grey[isLight ? 100 : 300],
21 | },
22 | '&.Mui-checked.Mui-disabled, &.Mui-disabled': {
23 | color: theme.palette.grey[isLight ? 400 : 600],
24 | },
25 | '&.Mui-disabled+.MuiSwitch-track': {
26 | opacity: 1,
27 | backgroundColor: `${theme.palette.action.disabledBackground} !important`,
28 | },
29 | },
30 | },
31 | },
32 | };
33 | }
34 |
--------------------------------------------------------------------------------
/src/theme/overrides/Tabs.js:
--------------------------------------------------------------------------------
1 | // ----------------------------------------------------------------------
2 |
3 | export default function Tabs(theme) {
4 | return {
5 | MuiTab: {
6 | styleOverrides: {
7 | root: {
8 | padding: 0,
9 | fontWeight: theme.typography.fontWeightMedium,
10 | borderTopLeftRadius: theme.shape.borderRadius,
11 | borderTopRightRadius: theme.shape.borderRadius,
12 | '&.Mui-selected': {
13 | color: theme.palette.text.primary,
14 | },
15 | '&:not(:last-of-type)': {
16 | marginRight: theme.spacing(5),
17 | },
18 | '@media (min-width: 600px)': {
19 | minWidth: 48,
20 | },
21 | },
22 | labelIcon: {
23 | minHeight: 48,
24 | flexDirection: 'row',
25 | '& > *:first-of-type': {
26 | marginBottom: 0,
27 | marginRight: theme.spacing(1),
28 | },
29 | },
30 | wrapper: {
31 | flexDirection: 'row',
32 | whiteSpace: 'nowrap',
33 | },
34 | textColorInherit: {
35 | opacity: 1,
36 | color: theme.palette.text.secondary,
37 | },
38 | },
39 | },
40 | MuiTabPanel: {
41 | styleOverrides: {
42 | root: {
43 | padding: 0,
44 | },
45 | },
46 | },
47 | MuiTabScrollButton: {
48 | styleOverrides: {
49 | root: {
50 | width: 48,
51 | borderRadius: '50%',
52 | },
53 | },
54 | },
55 | };
56 | }
57 |
--------------------------------------------------------------------------------
/src/theme/overrides/Timeline.js:
--------------------------------------------------------------------------------
1 | // ----------------------------------------------------------------------
2 |
3 | export default function Timeline(theme) {
4 | return {
5 | MuiTimelineDot: {
6 | styleOverrides: {
7 | root: {
8 | boxShadow: 'none',
9 | },
10 | },
11 | },
12 |
13 | MuiTimelineConnector: {
14 | styleOverrides: {
15 | root: {
16 | backgroundColor: theme.palette.divider,
17 | },
18 | },
19 | },
20 | };
21 | }
22 |
--------------------------------------------------------------------------------
/src/theme/overrides/ToggleButton.js:
--------------------------------------------------------------------------------
1 | import { alpha } from '@mui/material/styles';
2 |
3 | // ----------------------------------------------------------------------
4 |
5 | export default function ToggleButton(theme) {
6 | const style = (color) => ({
7 | props: { color },
8 | style: {
9 | '&:hover': {
10 | borderColor: alpha(theme.palette[color].main, 0.48),
11 | backgroundColor: alpha(theme.palette[color].main, theme.palette.action.hoverOpacity),
12 | },
13 | '&.Mui-selected': {
14 | borderColor: alpha(theme.palette[color].main, 0.48),
15 | },
16 | },
17 | });
18 |
19 | return {
20 | MuiToggleButton: {
21 | variants: [
22 | {
23 | props: { color: 'standard' },
24 | style: {
25 | '&.Mui-selected': {
26 | backgroundColor: theme.palette.action.selected,
27 | },
28 | },
29 | },
30 | style('primary'),
31 | style('secondary'),
32 | style('info'),
33 | style('success'),
34 | style('warning'),
35 | style('error'),
36 | ],
37 | },
38 | MuiToggleButtonGroup: {
39 | styleOverrides: {
40 | root: {
41 | borderRadius: theme.shape.borderRadius,
42 | backgroundColor: theme.palette.background.paper,
43 | border: `solid 1px ${theme.palette.grey[500_12]}`,
44 | '& .MuiToggleButton-root': {
45 | margin: 4,
46 | borderColor: 'transparent !important',
47 | borderRadius: `${theme.shape.borderRadius}px !important`,
48 | },
49 | },
50 | },
51 | },
52 | };
53 | }
54 |
--------------------------------------------------------------------------------
/src/theme/overrides/Tooltip.js:
--------------------------------------------------------------------------------
1 | // ----------------------------------------------------------------------
2 |
3 | export default function Tooltip(theme) {
4 | const isLight = theme.palette.mode === 'light';
5 |
6 | return {
7 | MuiTooltip: {
8 | styleOverrides: {
9 | tooltip: {
10 | backgroundColor: theme.palette.grey[isLight ? 800 : 700],
11 | },
12 | arrow: {
13 | color: theme.palette.grey[isLight ? 800 : 700],
14 | },
15 | },
16 | },
17 | };
18 | }
19 |
--------------------------------------------------------------------------------
/src/theme/overrides/TreeView.js:
--------------------------------------------------------------------------------
1 | import { TreeViewCollapseIcon, TreeViewExpandIcon, TreeViewEndIcon } from './CustomIcons';
2 |
3 | // ----------------------------------------------------------------------
4 |
5 | export default function TreeView(theme) {
6 | return {
7 | MuiTreeView: {
8 | defaultProps: {
9 | defaultCollapseIcon: ,
10 | defaultExpandIcon: ,
11 | defaultEndIcon: ,
12 | },
13 | },
14 | MuiTreeItem: {
15 | styleOverrides: {
16 | label: { ...theme.typography.body2 },
17 | iconContainer: { width: 'auto' },
18 | },
19 | },
20 | };
21 | }
22 |
--------------------------------------------------------------------------------
/src/theme/overrides/Typography.js:
--------------------------------------------------------------------------------
1 | // ----------------------------------------------------------------------
2 |
3 | export default function Typography(theme) {
4 | return {
5 | MuiTypography: {
6 | styleOverrides: {
7 | paragraph: {
8 | marginBottom: theme.spacing(2),
9 | },
10 | gutterBottom: {
11 | marginBottom: theme.spacing(1),
12 | },
13 | },
14 | },
15 | };
16 | }
17 |
--------------------------------------------------------------------------------
/src/utils/axios.js:
--------------------------------------------------------------------------------
1 | import axios from 'axios';
2 | // config
3 | import { HOST_API } from '../config';
4 |
5 | // ----------------------------------------------------------------------
6 |
7 | const axiosInstance = axios.create({
8 | baseURL: HOST_API,
9 | });
10 |
11 | axiosInstance.interceptors.response.use(
12 | (response) => response,
13 | (error) => Promise.reject((error.response && error.response.data) || 'Something went wrong')
14 | );
15 |
16 | export default axiosInstance;
17 |
--------------------------------------------------------------------------------
/src/utils/createAvatar.js:
--------------------------------------------------------------------------------
1 | // ----------------------------------------------------------------------
2 |
3 | const PRIMARY_NAME = ['A', 'N', 'H', 'L', 'Q', '9', '8'];
4 | const INFO_NAME = ['F', 'G', 'T', 'I', 'J', '1', '2', '3'];
5 | const SUCCESS_NAME = ['K', 'D', 'Y', 'B', 'O', '4', '5'];
6 | const WARNING_NAME = ['P', 'E', 'R', 'S', 'C', 'U', '6', '7'];
7 | const ERROR_NAME = ['V', 'W', 'X', 'M', 'Z'];
8 |
9 | function getFirstCharacter(name) {
10 | return name && name.charAt(0).toUpperCase();
11 | }
12 |
13 | function getAvatarColor(name) {
14 | if (PRIMARY_NAME.includes(getFirstCharacter(name))) return 'primary';
15 | if (INFO_NAME.includes(getFirstCharacter(name))) return 'info';
16 | if (SUCCESS_NAME.includes(getFirstCharacter(name))) return 'success';
17 | if (WARNING_NAME.includes(getFirstCharacter(name))) return 'warning';
18 | if (ERROR_NAME.includes(getFirstCharacter(name))) return 'warning';
19 | return 'default';
20 | }
21 |
22 | export default function createAvatar(name) {
23 | return {
24 | name: getFirstCharacter(name),
25 | color: getAvatarColor(name),
26 | };
27 | }
28 |
--------------------------------------------------------------------------------
/src/utils/cssStyles.js:
--------------------------------------------------------------------------------
1 | import { alpha } from '@mui/material/styles';
2 |
3 | // ----------------------------------------------------------------------
4 |
5 | function getDirection(value = 'bottom') {
6 | return {
7 | top: 'to top',
8 | right: 'to right',
9 | bottom: 'to bottom',
10 | left: 'to left',
11 | }[value];
12 | }
13 |
14 | // ----------------------------------------------------------------------
15 |
16 | export default function cssStyles(theme) {
17 | return {
18 | bgBlur: (props) => {
19 | const color = props?.color || theme?.palette.background.default || '#000000';
20 |
21 | const blur = props?.blur || 6;
22 | const opacity = props?.opacity || 0.8;
23 |
24 | return {
25 | backdropFilter: `blur(${blur}px)`,
26 | WebkitBackdropFilter: `blur(${blur}px)`, // Fix on Mobile
27 | backgroundColor: alpha(color, opacity),
28 | };
29 | },
30 | bgGradient: (props) => {
31 | const direction = getDirection(props?.direction);
32 | const startColor = props?.startColor || `${alpha('#000000', 0)} 0%`;
33 | const endColor = props?.endColor || '#000000 75%';
34 |
35 | return {
36 | background: `linear-gradient(${direction}, ${startColor}, ${endColor});`,
37 | };
38 | },
39 | bgImage: (props) => {
40 | const url = props?.url || '/assets/bg_gradient.jpg';
41 | const direction = getDirection(props?.direction);
42 | const startColor = props?.startColor || alpha(theme?.palette.grey[900] || '#000000', 0.88);
43 | const endColor = props?.endColor || alpha(theme?.palette.grey[900] || '#000000', 0.88);
44 |
45 | return {
46 | background: `linear-gradient(${direction}, ${startColor}, ${endColor}), url(${url})`,
47 | backgroundSize: 'cover',
48 | backgroundRepeat: 'no-repeat',
49 | backgroundPosition: 'center center',
50 | };
51 | },
52 | };
53 | }
54 |
--------------------------------------------------------------------------------
/src/utils/formatNumber.js:
--------------------------------------------------------------------------------
1 | import numeral from 'numeral';
2 |
3 | // ----------------------------------------------------------------------
4 |
5 | export function fCurrency(number) {
6 | return numeral(number).format(Number.isInteger(number) ? '$0,0' : '$0,0.00');
7 | }
8 |
9 | export function fPercent(number) {
10 | return numeral(number / 100).format('0.0%');
11 | }
12 |
13 | export function fNumber(number) {
14 | return numeral(number).format();
15 | }
16 |
17 | export function fShortenNumber(number) {
18 | return numeral(number).format('0.00a').replace('.00', '');
19 | }
20 |
21 | export function fData(number) {
22 | return numeral(number).format('0.0 b');
23 | }
24 |
--------------------------------------------------------------------------------
/src/utils/formatTime.js:
--------------------------------------------------------------------------------
1 | import { format, getTime, formatDistanceToNow } from 'date-fns';
2 |
3 | // ----------------------------------------------------------------------
4 |
5 | export function fDate(date) {
6 | return format(new Date(date), 'dd MMMM yyyy');
7 | }
8 |
9 | export function fDateTime(date) {
10 | return format(new Date(date), 'dd MMM yyyy HH:mm');
11 | }
12 |
13 | export function fTimestamp(date) {
14 | return getTime(new Date(date));
15 | }
16 |
17 | export function fDateTimeSuffix(date) {
18 | return format(new Date(date), 'dd/MM/yyyy hh:mm p');
19 | }
20 |
21 | export function fToNow(date) {
22 | return formatDistanceToNow(new Date(date), {
23 | addSuffix: true
24 | });
25 | }
26 |
--------------------------------------------------------------------------------
/src/utils/getColorName.js:
--------------------------------------------------------------------------------
1 | // ----------------------------------------------------------------------
2 |
3 | export default function getColorName(hex) {
4 | let color;
5 |
6 | switch (hex) {
7 | case '#00AB55':
8 | color = 'Green';
9 | break;
10 | case '#000000':
11 | color = 'Black';
12 | break;
13 | case '#FFFFFF':
14 | color = 'White';
15 | break;
16 | case '#FFC0CB':
17 | color = 'Pink';
18 | break;
19 | case '#FF4842':
20 | color = 'Red';
21 | break;
22 | case '#1890FF':
23 | color = 'Blue';
24 | break;
25 | case '#94D82D':
26 | color = 'Greenyellow';
27 | break;
28 | case '#FFC107':
29 | color = 'Orange';
30 | break;
31 | default:
32 | color = hex;
33 | }
34 |
35 | return color;
36 | }
37 |
--------------------------------------------------------------------------------
/src/utils/getFileData.js:
--------------------------------------------------------------------------------
1 | // ----------------------------------------------------------------------
2 |
3 | export default function getFileData(file, index) {
4 | if (typeof file === 'string') {
5 | return {
6 | key: index ? `${file}-${index}` : file,
7 | preview: file,
8 | };
9 | }
10 |
11 | return {
12 | key: index ? `${file.name}-${index}` : file.name,
13 | name: file.name,
14 | size: file.size,
15 | path: file.path,
16 | type: file.type,
17 | preview: file.preview,
18 | lastModified: file.lastModified,
19 | lastModifiedDate: file.lastModifiedDate,
20 | };
21 | }
22 |
--------------------------------------------------------------------------------
/src/utils/highlight.js:
--------------------------------------------------------------------------------
1 | import hljs from 'highlight.js';
2 | import 'highlight.js/styles/atom-one-dark-reasonable.css';
3 |
4 | // ----------------------------------------------------------------------
5 |
6 | hljs.configure({
7 | languages: ['javascript', 'jsx', 'sh', 'bash', 'html', 'scss', 'css', 'json'],
8 | });
9 |
10 | if (typeof window !== 'undefined') {
11 | window.hljs = hljs;
12 | }
13 |
--------------------------------------------------------------------------------
/src/utils/jwt.js:
--------------------------------------------------------------------------------
1 | import jwtDecode from 'jwt-decode';
2 | // routes
3 | import { PATH_AUTH } from '../routes/paths';
4 | //
5 | import axios from './axios';
6 |
7 | // ----------------------------------------------------------------------
8 |
9 | const isValidToken = (accessToken) => {
10 | if (!accessToken) {
11 | return false;
12 | }
13 | const decoded = jwtDecode(accessToken);
14 |
15 | const currentTime = Date.now() / 1000;
16 |
17 | return decoded.exp > currentTime;
18 | };
19 |
20 | const handleTokenExpired = (exp) => {
21 | let expiredTimer;
22 |
23 | const currentTime = Date.now();
24 |
25 | // Test token expires after 10s
26 | // const timeLeft = currentTime + 10000 - currentTime; // ~10s
27 | const timeLeft = exp * 1000 - currentTime;
28 |
29 | clearTimeout(expiredTimer);
30 |
31 | expiredTimer = setTimeout(() => {
32 | // eslint-disable-next-line no-alert
33 | alert('Token expired');
34 |
35 | localStorage.removeItem('accessToken');
36 |
37 | window.location.href = PATH_AUTH.login;
38 | }, timeLeft);
39 | };
40 |
41 | const setSession = (accessToken) => {
42 | if (accessToken) {
43 | localStorage.setItem('accessToken', accessToken);
44 | axios.defaults.headers.common.Authorization = `Bearer ${accessToken}`;
45 |
46 | // This function below will handle when token is expired
47 | const { exp } = jwtDecode(accessToken); // ~5 days by server
48 | handleTokenExpired(exp);
49 | } else {
50 | localStorage.removeItem('accessToken');
51 | delete axios.defaults.headers.common.Authorization;
52 | }
53 | };
54 |
55 | export { isValidToken, setSession };
56 |
--------------------------------------------------------------------------------
/src/utils/mapboxgl.js:
--------------------------------------------------------------------------------
1 | import mapboxgl from 'mapbox-gl';
2 |
3 | // eslint-disable-next-line
4 | mapboxgl.workerClass = require('worker-loader!mapbox-gl/dist/mapbox-gl-csp-worker').default;
5 |
--------------------------------------------------------------------------------
/src/utils/uuidv4.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable */
2 | // ----------------------------------------------------------------------
3 |
4 | export default function uuidv4() {
5 | return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
6 | const r = (Math.random() * 16) | 0,
7 | v = c === 'x' ? r : (r & 0x3) | 0x8;
8 | return v.toString(16);
9 | });
10 | }
11 |
--------------------------------------------------------------------------------