Error pages and handling

client/src/components/ErrorPage/ErrorPage.scss

+.error-page {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+
+.error-page-card {
+  display: flex;
+  align-items: center;
+  font-size: 2rem;
+  text-align: center;
+  width: 20vw;
+  min-width: 350px;
+}

client/src/components/ErrorPage/ErrorPage.tsx

+import './ErrorPage.scss';
+
+function ErrorPage() {
+  return (
+    <>
+      <div className='error-page'>
+        <div className='card error-page-card'>
+          Invalid Operation
+        </div>
+      </div>
+    </>
+  )
+}
+
+export default ErrorPage;

client/src/components/ErrorPage/ErrorPage404.tsx

+import './ErrorPage.scss';
+
+function ErrorPage404() {
+  return (
+    <>
+      <div className='error-page'>
+        <div className='card error-page-card'>
+          404 page not found
+        </div>
+      </div>
+    </>
+  )
+}
+
+export default ErrorPage404;

client/src/components/ProtectedRoute/AirlineProtectedRoute.tsx

+import { Navigate, Outlet } from 'react-router-dom';
+import { useAuth } from '../../hooks/useAuth';
+
+function AirlineProtectedRoute() {
+  const { user } = useAuth();
+
+  if (user?.type === 1) {
+    return <Outlet></Outlet>
+  }
+
+  return <Navigate to={'/error'}></Navigate>
+}
+
+export default AirlineProtectedRoute;

client/src/components/ProtectedRoute/CustomerProtectedRoute.tsx

+import { Navigate, Outlet } from 'react-router-dom';
+import { useAuth } from '../../hooks/useAuth';
+
+function CustomerProtectedRoute() {
+  const { user } = useAuth();
+
+  if (user?.type === 0) {
+    return <Outlet></Outlet>
+  }
+
+  return <Navigate to={'/error'}></Navigate>
+}
+
+export default CustomerProtectedRoute;

client/src/main.tsx

@@ -25,12 +25,17 @@ import { GetBookingInformation } from "./services/BookingView/BookingView.ts";
 import { GetAllBookings } from "./services/CustomerBookings/CustomerBookings.ts";
 import CustomerBookings from "./components/CustomerBookings/CustomerBookings.tsx";
 import BookingView from "./components/BookingView/BookingView.tsx";
+import CustomerProtectedRoute from "./components/ProtectedRoute/CustomerProtectedRoute.tsx";
+import AirlineProtectedRoute from "./components/ProtectedRoute/AirlineProtectedRoute.tsx";
+import ErrorPage404 from "./components/ErrorPage/ErrorPage404.tsx";
+import ErrorPage from "./components/ErrorPage/ErrorPage.tsx";
 
 const router = createBrowserRouter([
   {
     path: "/",
     loader: AuthoriseUser,
     element: <App></App>,
+    errorElement: <ErrorPage></ErrorPage>,
     children: [
       {
         element: <InverseProtectedRoute></InverseProtectedRoute>,
@@ -54,14 +59,47 @@ const router = createBrowserRouter([
             element: <Logout></Logout>,
           },
           {
-            path: "customer-dashboard",
-            loader: GetCustomerDashboardData,
-            element: <Dashboard></Dashboard>,
+            element: <CustomerProtectedRoute></CustomerProtectedRoute>,
+            children: [
+              {
+                path: "customer-dashboard",
+                loader: GetCustomerDashboardData,
+                element: <Dashboard></Dashboard>,
+              },
+              {
+                path: "booking/query",
+                element: <BookingQuery></BookingQuery>,
+              },
+              {
+                path: "booking/list",
+                loader: GetBookingList,
+                element: <BookingList></BookingList>,
+              },
+              {
+                path: "customer/bookings",
+                loader: GetAllBookings,
+                element: <CustomerBookings></CustomerBookings>,
+              },
+              {
+                path: "booking/:id",
+                loader: GetBookingInformation,
+                element: <BookingView></BookingView>,
+              }
+            ]
           },
           {
-            path: "airline-dashboard",
-            loader: GetAirlineDashboardData,
-            element: <Dashboard></Dashboard>,
+            element: <AirlineProtectedRoute></AirlineProtectedRoute>,
+            children: [
+              {
+                path: "airline-dashboard",
+                loader: GetAirlineDashboardData,
+                element: <Dashboard></Dashboard>,
+              },
+              {
+                path: "register-flight",
+                element: <FlightCreationForm></FlightCreationForm>,
+              }
+            ]
           },
           {
             path: "flight/:id",
@@ -73,31 +111,16 @@ const router = createBrowserRouter([
             loader: GetFlightList,
             element: <FlightList></FlightList>,
           },
-          {
-            path: "booking/query",
-            element: <BookingQuery></BookingQuery>,
-          },
-          {
-            path: "booking/list",
-            loader: GetBookingList,
-            element: <BookingList></BookingList>,
-          },
-          {
-            path: "register-flight",
-            element: <FlightCreationForm></FlightCreationForm>,
-          },
-          {
-            path: "booking/:id",
-            loader: GetBookingInformation,
-            element: <BookingView></BookingView>,
-          },
-          {
-            path: "customer/bookings",
-            loader: GetAllBookings,
-            element: <CustomerBookings></CustomerBookings>,
-          },
         ],
       },
+      {
+        path: "error",
+        element: <ErrorPage></ErrorPage>
+      },
+      {
+        path: "*",
+        element: <ErrorPage404></ErrorPage404>
+      }
     ],
   },
 ]);