feat: add 401 error page (#12)

src/data/sidelinks.tsx

@@ -20,6 +20,7 @@ import {
   IconTruck,
   IconUserShield,
   IconUsers,
+  IconLock,
 } from '@tabler/icons-react'
 
 export interface NavLink {
@@ -158,6 +159,12 @@ export const sidelinks: SideLink[] = [
         href: '/503',
         icon: <IconBarrierBlock size={18} />,
       },
+      {
+        title: 'Unauthorised Error',
+        label: '',
+        href: '/401',
+        icon: <IconLock size={18} />,
+      },
     ],
   },
   {

src/pages/errors/unauthorised-error.tsx

@@ -0,0 +1,27 @@
+import { useNavigate } from 'react-router-dom'
+import { Button } from '@/components/custom/button'
+
+export default function UnauthorisedError() {
+  const navigate = useNavigate()
+  return (
+    <div className='h-svh'>
+      <div className='m-auto flex h-full w-full flex-col items-center justify-center gap-2'>
+        <h1 className='text-[7rem] font-bold leading-tight'>401</h1>
+        <span className='font-medium'>
+          Oops! You don't have permission to access this page.
+        </span>
+        <p className='text-center text-muted-foreground'>
+          It looks like you tried to access a resource that requires proper
+          authentication. <br />
+          Please log in with the appropriate credentials.
+        </p>
+        <div className='mt-6 flex gap-4'>
+          <Button variant='outline' onClick={() => navigate(-1)}>
+            Go Back
+          </Button>
+          <Button onClick={() => navigate('/')}>Back to Home</Button>
+        </div>
+      </div>
+    </div>
+  )
+}

src/router.tsx

@@ -2,6 +2,7 @@ import { createBrowserRouter } from 'react-router-dom'
 import GeneralError from './pages/errors/general-error'
 import NotFoundError from './pages/errors/not-found-error'
 import MaintenanceError from './pages/errors/maintenance-error'
+import UnauthorisedError from './pages/errors/unauthorised-error.tsx'
 
 const router = createBrowserRouter([
   // Auth routes
@@ -142,6 +143,7 @@ const router = createBrowserRouter([
   { path: '/500', Component: GeneralError },
   { path: '/404', Component: NotFoundError },
   { path: '/503', Component: MaintenanceError },
+  { path: '/401', Component: UnauthorisedError },
 
   // Fallback 404 route
   { path: '*', Component: NotFoundError },