first commit

src/app/modules/errors/ErrorsLayout.tsx

@@ -0,0 +1,37 @@
+import {useEffect} from 'react'
+import {Outlet} from 'react-router-dom'
+import {useThemeMode} from '../../../_metronic/partials'
+import {toAbsoluteUrl} from '../../../_metronic/helpers'
+
+const BODY_CLASSES = ['bgi-size-cover', 'bgi-position-center', 'bgi-no-repeat']
+const ErrorsLayout = () => {
+  const {mode} = useThemeMode()
+  useEffect(() => {
+    BODY_CLASSES.forEach((c) => document.body.classList.add(c))
+    document.body.style.backgroundImage =
+      mode === 'dark'
+        ? `url(${toAbsoluteUrl('/media/auth/bg7-dark.jpg')})`
+        : `url(${toAbsoluteUrl('/media/auth/bg7.jpg')})`
+
+    return () => {
+      BODY_CLASSES.forEach((c) => document.body.classList.remove(c))
+      document.body.style.backgroundImage = 'none'
+    }
+  }, [mode])
+
+  return (
+    <div className='d-flex flex-column flex-root'>
+      <div className='d-flex flex-column flex-center flex-column-fluid'>
+        <div className='d-flex flex-column flex-center text-center p-10'>
+          <div className='card card-flush  w-lg-650px py-5'>
+            <div className='card-body py-15 py-lg-20'>
+              <Outlet />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export {ErrorsLayout}

src/app/modules/errors/ErrorsPage.tsx

@@ -0,0 +1,17 @@
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import {Route, Routes} from 'react-router-dom'
+import {Error500} from './components/Error500'
+import {Error404} from './components/Error404'
+import {ErrorsLayout} from './ErrorsLayout'
+
+const ErrorsPage = () => (
+  <Routes>
+    <Route element={<ErrorsLayout />}>
+      <Route path='404' element={<Error404 />} />
+      <Route path='500' element={<Error500 />} />
+      <Route index element={<Error404 />} />
+    </Route>
+  </Routes>
+)
+
+export {ErrorsPage}

src/app/modules/errors/components/Error404.tsx

@@ -0,0 +1,42 @@
+import {FC} from 'react'
+import {Link} from 'react-router-dom'
+import {toAbsoluteUrl} from '../../../../_metronic/helpers'
+
+const Error404: FC = () => {
+  return (
+    <>
+      {/* begin::Title */}
+      <h1 className='fw-bolder fs-2hx text-gray-900 mb-4'>Oops!</h1>
+      {/* end::Title */}
+
+      {/* begin::Text */}
+      <div className='fw-semibold fs-6 text-gray-500 mb-7'>We can't find that page.</div>
+      {/* end::Text */}
+
+      {/* begin::Illustration */}
+      <div className='mb-3'>
+        <img
+          src={toAbsoluteUrl('/media/auth/404-error.png')}
+          className='mw-100 mh-300px theme-light-show'
+          alt=''
+        />
+        <img
+          src={toAbsoluteUrl('/media/auth/404-error-dark.png')}
+          className='mw-100 mh-300px theme-dark-show'
+          alt=''
+        />
+      </div>
+      {/* end::Illustration */}
+
+      {/* begin::Link */}
+      <div className='mb-0'>
+        <Link to='/dashboard' className='btn btn-sm btn-primary'>
+          Return Home
+        </Link>
+      </div>
+      {/* end::Link */}
+    </>
+  )
+}
+
+export {Error404}

src/app/modules/errors/components/Error500.tsx

@@ -0,0 +1,44 @@
+import {FC} from 'react'
+import {Link} from 'react-router-dom'
+import {toAbsoluteUrl} from '../../../../_metronic/helpers'
+
+const Error500: FC = () => {
+  return (
+    <>
+      {/* begin::Title */}
+      <h1 className='fw-bolder fs-2qx text-gray-900 mb-4'>System Error</h1>
+      {/* end::Title */}
+
+      {/* begin::Text */}
+      <div className='fw-semibold fs-6 text-gray-500 mb-7'>
+        Something went wrong! Please try again later.
+      </div>
+      {/* end::Text */}
+
+      {/* begin::Illustration */}
+      <div className='mb-11'>
+        <img
+          src={toAbsoluteUrl('/media/auth/500-error.png')}
+          className='mw-100 mh-300px theme-light-show'
+          alt=''
+        />
+        <img
+          src={toAbsoluteUrl('/media/auth/500-error-dark.png')}
+          className='mw-100 mh-300px theme-dark-show'
+          alt=''
+        />
+      </div>
+      {/* end::Illustration */}
+
+      {/* begin::Link */}
+      <div className='mb-0'>
+        <Link to='/dashboard' className='btn btn-sm btn-primary'>
+          Return Home
+        </Link>
+      </div>
+      {/* end::Link */}
+    </>
+  )
+}
+
+export {Error500}