diff --git a/app/401.tsx b/app/401.tsx new file mode 100644 index 0000000..eabf2dd --- /dev/null +++ b/app/401.tsx @@ -0,0 +1,64 @@ +// ** React Imports +import { ReactNode } from 'react' + +// ** Next Import +import Link from 'next/link' + +// ** MUI Components +import Button from '@mui/material/Button' +import { styled } from '@mui/material/styles' +import Typography from '@mui/material/Typography' +import Box, { BoxProps } from '@mui/material/Box' + +// ** Layout Import +import BlankLayout from 'src/@core/layouts/BlankLayout' + +// ** Demo Imports +import FooterIllustrations from 'src/views/pages/misc/FooterIllustrations' + +// ** Styled Components +const BoxWrapper = styled(Box)(({ theme }) => ({ + [theme.breakpoints.down('md')]: { + width: '90vw' + } +})) + +const Img = styled('img')(({ theme }) => ({ + [theme.breakpoints.down('lg')]: { + height: 450, + marginTop: theme.spacing(10) + }, + [theme.breakpoints.down('md')]: { + height: 400 + }, + [theme.breakpoints.up('lg')]: { + marginTop: theme.spacing(20) + } +})) + +const Error401 = () => { + return ( + + + + + You are not authorized! + + + You do not have permission to view this page using the credentials that you have provided while login. + + Please contact your site administrator. + + + error-illustration + + + + ) +} + +Error401.getLayout = (page: ReactNode) => {page} + +export default Error401 diff --git a/app/404.tsx b/app/404.tsx new file mode 100644 index 0000000..4230d20 --- /dev/null +++ b/app/404.tsx @@ -0,0 +1,63 @@ +// ** React Imports +import { ReactNode } from 'react' + +// ** Next Import +import Link from 'next/link' + +// ** MUI Components +import Button from '@mui/material/Button' +import { styled } from '@mui/material/styles' +import Typography from '@mui/material/Typography' +import Box, { BoxProps } from '@mui/material/Box' + +// ** Layout Import +import BlankLayout from 'src/@core/layouts/BlankLayout' + +// ** Demo Imports +import FooterIllustrations from 'src/views/pages/misc/FooterIllustrations' + +// ** Styled Components +const BoxWrapper = styled(Box)(({ theme }) => ({ + [theme.breakpoints.down('md')]: { + width: '90vw' + } +})) + +const Img = styled('img')(({ theme }) => ({ + [theme.breakpoints.down('lg')]: { + height: 450, + marginTop: theme.spacing(10) + }, + [theme.breakpoints.down('md')]: { + height: 400 + }, + [theme.breakpoints.up('lg')]: { + marginTop: theme.spacing(20) + } +})) + +const Error404 = () => { + return ( + + + + + Page Not Found :( + + + Oops! 😖 The requested URL was not found on this server. + + + + error-illustration + + + + ) +} + +Error404.getLayout = (page: ReactNode) => {page} + +export default Error404 diff --git a/app/500.tsx b/app/500.tsx new file mode 100644 index 0000000..f9d3382 --- /dev/null +++ b/app/500.tsx @@ -0,0 +1,63 @@ +// ** React Imports +import { ReactNode } from 'react' + +// ** Next Import +import Link from 'next/link' + +// ** MUI Components +import Button from '@mui/material/Button' +import { styled } from '@mui/material/styles' +import Typography from '@mui/material/Typography' +import Box, { BoxProps } from '@mui/material/Box' + +// ** Layout Import +import BlankLayout from 'src/@core/layouts/BlankLayout' + +// ** Demo Imports +import FooterIllustrations from 'src/views/pages/misc/FooterIllustrations' + +// ** Styled Components +const BoxWrapper = styled(Box)(({ theme }) => ({ + [theme.breakpoints.down('md')]: { + width: '90vw' + } +})) + +const Img = styled('img')(({ theme }) => ({ + [theme.breakpoints.down('lg')]: { + height: 450, + marginTop: theme.spacing(10) + }, + [theme.breakpoints.down('md')]: { + height: 400 + }, + [theme.breakpoints.up('lg')]: { + marginTop: theme.spacing(20) + } +})) + +const Error500 = () => { + return ( + + + + + Oops, something went wrong! + + + There was an error with the internal server. Please contact your site administrator. + + + + error-illustration + + + + ) +} + +Error500.getLayout = (page: ReactNode) => {page} + +export default Error500 diff --git a/app/_app.tsx b/app/_app.tsx new file mode 100644 index 0000000..85bd51d --- /dev/null +++ b/app/_app.tsx @@ -0,0 +1,161 @@ +// ** React Imports +import { ReactNode } from 'react' + +// ** Next Imports +import Head from 'next/head' +import { Router } from 'next/router' +import type { NextPage } from 'next' +import type { AppProps } from 'next/app' + + + + + +// ** Loader Import +import NProgress from 'nprogress' + +// ** Emotion Imports +import { CacheProvider } from '@emotion/react' +import type { EmotionCache } from '@emotion/cache' + +// ** Config Imports + +import { defaultACLObj } from 'src/configs/acl' +import themeConfig from 'src/configs/themeConfig' + +// ** Fake-DB Import +import 'src/@fake-db' + +// ** Third Party Import +import { Toaster } from 'react-hot-toast' + +// ** Component Imports +import UserLayout from 'src/layouts/UserLayout' +import AclGuard from 'src/@core/components/auth/AclGuard' +import ThemeComponent from 'src/@core/theme/ThemeComponent' +import AuthGuard from 'src/@core/components/auth/AuthGuard' +import GuestGuard from 'src/@core/components/auth/GuestGuard' +import WindowWrapper from 'src/@core/components/window-wrapper' + +// ** Spinner Import +import Spinner from 'src/@core/components/spinner' + +// ** Contexts +import { AuthProvider } from 'src/context/AuthContext' +import { SettingsConsumer, SettingsProvider } from 'src/@core/context/settingsContext' + +// ** Styled Components +import ReactHotToast from 'src/@core/styles/libs/react-hot-toast' + +// ** Utils Imports +import { createEmotionCache } from 'src/@core/utils/create-emotion-cache' + +// ** Prismjs Styles +import 'prismjs' +import 'prismjs/themes/prism-tomorrow.css' +import 'prismjs/components/prism-jsx' +import 'prismjs/components/prism-tsx' + +// ** React Perfect Scrollbar Style +import 'react-perfect-scrollbar/dist/css/styles.css' + +import 'src/iconify-bundle/icons-bundle-react' + +// ** Global css styles +import '../../styles/globals.css' + +// ** Extend App Props with Emotion +type ExtendedAppProps = AppProps & { + Component: NextPage + emotionCache: EmotionCache +} + +type GuardProps = { + authGuard: boolean + guestGuard: boolean + children: ReactNode +} + +const clientSideEmotionCache = createEmotionCache() + +// ** Pace Loader +if (themeConfig.routingLoader) { + Router.events.on('routeChangeStart', () => { + NProgress.start() + }) + Router.events.on('routeChangeError', () => { + NProgress.done() + }) + Router.events.on('routeChangeComplete', () => { + NProgress.done() + }) +} + +const Guard = ({ children, authGuard, guestGuard }: GuardProps) => { + if (guestGuard) { + return }>{children} + } else if (!guestGuard && !authGuard) { + return <>{children} + } else { + return }>{children} + } +} + +// ** Configure JSS & ClassName +const App = (props: ExtendedAppProps) => { + const { Component, emotionCache = clientSideEmotionCache, pageProps } = props + + // Variables + const contentHeightFixed = Component.contentHeightFixed ?? false + const getLayout = + Component.getLayout ?? (page => {page}) + + const setConfig = Component.setConfig ?? undefined + + const authGuard = Component.authGuard ?? true + + const guestGuard = Component.guestGuard ?? false + + const aclAbilities = Component.acl ?? defaultACLObj + + return ( + + + + {`${themeConfig.templateName} - Material Design React Admin Template`} + + + + + + + + + {({ settings }) => { + return ( + + + + + {getLayout()} + + + + + + + + ) + }} + + + + + + ) +} + +export default App diff --git a/app/_document.tsx b/app/_document.tsx new file mode 100644 index 0000000..905edf0 --- /dev/null +++ b/app/_document.tsx @@ -0,0 +1,70 @@ +// ** React Import +import { Children } from 'react' + +// ** Next Import +import Document, { Html, Head, Main, NextScript } from 'next/document' + +// ** Emotion Imports +import createEmotionServer from '@emotion/server/create-instance' + +// ** Utils Imports +import { createEmotionCache } from 'src/@core/utils/create-emotion-cache' + +class CustomDocument extends Document { + render() { + return ( + + + + + + + + + +
+ + + + ) + } +} + +CustomDocument.getInitialProps = async ctx => { + const originalRenderPage = ctx.renderPage + const cache = createEmotionCache() + const { extractCriticalToChunks } = createEmotionServer(cache) + + ctx.renderPage = () => + originalRenderPage({ + enhanceApp: App => props => + ( + + ) + }) + + const initialProps = await Document.getInitialProps(ctx) + const emotionStyles = extractCriticalToChunks(initialProps.html) + const emotionStyleTags = emotionStyles.styles.map(style => { + return ( +