feat: add error pages

src/data/sidelinks.tsx

@@ -1,6 +1,9 @@
 import {
+  IconBarrierBlock,
   IconBoxSeam,
   IconChartHistogram,
+  IconError404,
+  IconExclamationCircle,
   IconHexagonNumber1,
   IconHexagonNumber2,
   IconHexagonNumber3,
@@ -8,6 +11,7 @@ import {
   IconLayoutDashboard,
   IconMessages,
   IconRouteAltLeft,
+  IconServerOff,
   IconTruck,
   IconUserShield,
   IconUsers,
@@ -101,4 +105,30 @@ export const sidelinks: SideLink[] = [
     href: '/analysis',
     icon: <IconChartHistogram size={18} />,
   },
+  {
+    title: 'Error Pages',
+    label: '',
+    href: '',
+    icon: <IconExclamationCircle size={18} />,
+    sub: [
+      {
+        title: 'Not Found',
+        label: '',
+        href: '/404',
+        icon: <IconError404 size={18} />,
+      },
+      {
+        title: 'Internal Server Error',
+        label: '',
+        href: '/500',
+        icon: <IconServerOff size={18} />,
+      },
+      {
+        title: 'Maintenance Error',
+        label: '',
+        href: '/503',
+        icon: <IconBarrierBlock size={18} />,
+      },
+    ],
+  },
 ]

src/pages/errors/general-error.tsx

@@ -0,0 +1,23 @@
+import { useNavigate } from 'react-router-dom'
+import { Button } from '@/components/ui/button'
+
+export default function GeneralError() {
+  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'>500</h1>
+        <span className='font-medium'>Oops! Something went wrong {`:')`}</span>
+        <p className='text-center text-muted-foreground'>
+          We apologize for the inconvenience. <br /> Please try again later.
+        </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/pages/errors/maintenance-error.tsx

@@ -0,0 +1,19 @@
+import { Button } from '@/components/ui/button'
+
+export default function MaintenanceError() {
+  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'>503</h1>
+        <span className='font-medium'>Website is under maintenance!</span>
+        <p className='text-center text-muted-foreground'>
+          The site is not available at the moment. <br />
+          We'll be back online shortly.
+        </p>
+        <div className='mt-6 flex gap-4'>
+          <Button variant='outline'>Learn more</Button>
+        </div>
+      </div>
+    </div>
+  )
+}

src/pages/errors/not-found-error.tsx

@@ -0,0 +1,24 @@
+import { useNavigate } from 'react-router-dom'
+import { Button } from '@/components/ui/button'
+
+export default function NotFoundError() {
+  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'>404</h1>
+        <span className='font-medium'>Oops! Page Not Found!</span>
+        <p className='text-center text-muted-foreground'>
+          It seems like the page you're looking for <br />
+          does not exist or might have been removed.
+        </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

@@ -8,15 +8,27 @@ const SignIn2 = lazy(() => import('@/pages/auth/sign-in-2'))
 const SignUp = lazy(() => import('@/pages/auth/sign-up'))
 const ForgotPassword = lazy(() => import('@/pages/auth/forgot-password'))
 
+// Errors
+const GeneralError = lazy(() => import('@/pages/errors/general-error'))
+const NotFoundError = lazy(() => import('@/pages/errors/not-found-error'))
+const MaintenanceError = lazy(() => import('@/pages/errors/maintenance-error'))
+
 export default function Router() {
   return (
     <Suspense fallback={<Loader />}>
       <Routes>
-        <Route path='/' element={<Dashboard />} />
+        {/* Auth routes */}
         <Route path='/sign-in' element={<SignIn />} />
         <Route path='/sign-in-2' element={<SignIn2 />} />
         <Route path='/sign-up' element={<SignUp />} />
         <Route path='/forgot-password' element={<ForgotPassword />} />
+
+        <Route path='/' element={<Dashboard />} />
+
+        {/* Error routes */}
+        <Route path='/500' element={<GeneralError />} />
+        <Route path='/404' element={<NotFoundError />} />
+        <Route path='/503' element={<MaintenanceError />} />
       </Routes>
     </Suspense>
   )