init commit,

03_source/frontend/src/sections/error/403-view.tsx

@@ -0,0 +1,47 @@
+import { m } from 'framer-motion';
+
+import Button from '@mui/material/Button';
+import Container from '@mui/material/Container';
+import Typography from '@mui/material/Typography';
+
+import { RouterLink } from 'src/routes/components';
+
+import { SimpleLayout } from 'src/layouts/simple';
+import { ForbiddenIllustration } from 'src/assets/illustrations';
+
+import { varBounce, MotionContainer } from 'src/components/animate';
+
+// ----------------------------------------------------------------------
+
+export function View403() {
+  return (
+    <SimpleLayout
+      slotProps={{
+        content: { compact: true },
+      }}
+    >
+      <Container component={MotionContainer}>
+        <m.div variants={varBounce('in')}>
+          <Typography variant="h3" sx={{ mb: 2 }}>
+            No permission
+          </Typography>
+        </m.div>
+
+        <m.div variants={varBounce('in')}>
+          <Typography sx={{ color: 'text.secondary' }}>
+            The page you’re trying to access has restricted access. Please refer to your system
+            administrator.
+          </Typography>
+        </m.div>
+
+        <m.div variants={varBounce('in')}>
+          <ForbiddenIllustration sx={{ my: { xs: 5, sm: 10 } }} />
+        </m.div>
+
+        <Button component={RouterLink} href="/" size="large" variant="contained">
+          Go to home
+        </Button>
+      </Container>
+    </SimpleLayout>
+  );
+}

03_source/frontend/src/sections/error/500-view.tsx

@@ -0,0 +1,46 @@
+import { m } from 'framer-motion';
+
+import Button from '@mui/material/Button';
+import Container from '@mui/material/Container';
+import Typography from '@mui/material/Typography';
+
+import { RouterLink } from 'src/routes/components';
+
+import { SimpleLayout } from 'src/layouts/simple';
+import { ServerErrorIllustration } from 'src/assets/illustrations';
+
+import { varBounce, MotionContainer } from 'src/components/animate';
+
+// ----------------------------------------------------------------------
+
+export function View500() {
+  return (
+    <SimpleLayout
+      slotProps={{
+        content: { compact: true },
+      }}
+    >
+      <Container component={MotionContainer}>
+        <m.div variants={varBounce('in')}>
+          <Typography variant="h3" sx={{ mb: 2 }}>
+            500 Internal server error
+          </Typography>
+        </m.div>
+
+        <m.div variants={varBounce('in')}>
+          <Typography sx={{ color: 'text.secondary' }}>
+            There was an error, please try again later.
+          </Typography>
+        </m.div>
+
+        <m.div variants={varBounce('in')}>
+          <ServerErrorIllustration sx={{ my: { xs: 5, sm: 10 } }} />
+        </m.div>
+
+        <Button component={RouterLink} href="/" size="large" variant="contained">
+          Go to home
+        </Button>
+      </Container>
+    </SimpleLayout>
+  );
+}

03_source/frontend/src/sections/error/index.ts

@@ -0,0 +1,5 @@
+export * from './403-view';
+
+export * from './500-view';
+
+export * from './not-found-view';

03_source/frontend/src/sections/error/not-found-view.tsx

@@ -0,0 +1,47 @@
+import { m } from 'framer-motion';
+
+import Button from '@mui/material/Button';
+import Container from '@mui/material/Container';
+import Typography from '@mui/material/Typography';
+
+import { RouterLink } from 'src/routes/components';
+
+import { SimpleLayout } from 'src/layouts/simple';
+import { PageNotFoundIllustration } from 'src/assets/illustrations';
+
+import { varBounce, MotionContainer } from 'src/components/animate';
+
+// ----------------------------------------------------------------------
+
+export function NotFoundView() {
+  return (
+    <SimpleLayout
+      slotProps={{
+        content: { compact: true },
+      }}
+    >
+      <Container component={MotionContainer}>
+        <m.div variants={varBounce('in')}>
+          <Typography variant="h3" sx={{ mb: 2 }}>
+            Sorry, page not found!
+          </Typography>
+        </m.div>
+
+        <m.div variants={varBounce('in')}>
+          <Typography sx={{ color: 'text.secondary' }}>
+            Sorry, we couldn’t find the page you’re looking for. Perhaps you’ve mistyped the URL? Be
+            sure to check your spelling.
+          </Typography>
+        </m.div>
+
+        <m.div variants={varBounce('in')}>
+          <PageNotFoundIllustration sx={{ my: { xs: 5, sm: 10 } }} />
+        </m.div>
+
+        <Button component={RouterLink} href="/" size="large" variant="contained">
+          Go to home
+        </Button>
+      </Container>
+    </SimpleLayout>
+  );
+}