fix: add explicit 403/500 routes and improve error page handling

Author: Flatlogic Bot

README.md

@@ -60,6 +60,17 @@ Looking for a perfect codebase generator for your Startup? Try [Flatlogic AI Web
 
 ---
 
+## 📌 Current Stack Snapshot
+
+- React `19.2.4`
+- MUI `7.x` + Emotion
+- React Router `5.x` (Browser History, no hash routing)
+- Redux + Context (transitional architecture before consolidation)
+- CRA (`react-scripts`) + `react-app-rewired` (Vite migration is planned)
+- Frontend-only users/auth fallback is available when backend is disabled
+
+---
+
 ## 🧩 Features
 
 - Three Color Themes

src/components/App.js

@@ -38,12 +38,13 @@ export default function App() {
               render={() => <Redirect to='/app/dashboard' />}
             />
 
+            <Route exact path='/403' render={() => <Error code={403} />} />
+            <Route exact path='/500' render={() => <Error code={500} />} />
             <Route path='/documentation' component={Documentation} />
             <PrivateRoute path='/app' component={Layout} />
             <PublicRoute path='/login' component={Login} />
             <PublicRoute path='/verify-email' exact component={Verify} />
             <PublicRoute path='/password-reset' exact component={Reset} />
-            <Redirect from='*' to='/app/dashboard' />
             <Route component={Error} />
           </Switch>
         </Router>

src/pages/error/Error.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Grid, Paper } from '@mui/material';
-import { Link } from 'react-router-dom';
+import { Link, useLocation } from 'react-router-dom';
 import classnames from 'classnames';
 
 // styles
@@ -12,8 +12,28 @@ import { Button, Typography } from '../../components/Wrappers';
 // logo
 import logo from './logo.svg';
 
-export default function Error() {
+const ERROR_CONTENT = {
+  403: {
+    title: 'Access denied',
+    description: "You don't have permissions to view this page",
+  },
+  404: {
+    title: "Page doesn't exist",
+    description: "Looks like the page you're looking for no longer exists",
+  },
+  500: {
+    title: 'Server error',
+    description: 'Something went wrong while processing your request',
+  },
+};
+
+export default function Error({ code }) {
   let classes = useStyles();
+  const location = useLocation();
+  const queryParams = new URLSearchParams(location.search);
+  const queryCode = Number(queryParams.get('code'));
+  const errorCode = Number(code) || queryCode || 404;
+  const content = ERROR_CONTENT[errorCode] || ERROR_CONTENT[404];
 
   return (
     <Grid container className={classes.container}>
@@ -29,18 +49,18 @@ export default function Error() {
           color='primary'
           className={classnames(classes.textRow, classes.errorCode)}
         >
-          404
+          {errorCode}
         </Typography>
         <Typography variant='h5' color='primary' className={classes.textRow}>
-          Oops. Looks like the page you're looking for no longer exists
+          {content.title}
         </Typography>
         <Typography
           variant='h6'
           color='text'
           colorBrightness='hint'
           className={classnames(classes.textRow, classes.safetyText)}
         >
-          But we're here to bring you back to safety
+          {content.description}
         </Typography>
         <Button
           variant='contained'