Add placeholder admin dashboard

web/app/routes/logbook.admin/route.tsx

@@ -0,0 +1,13 @@
+import { Container, Group, Title } from "@mantine/core";
+
+export default function Admin() {
+  return (
+    <>
+      <Container>
+        <Group justify="space-between" align="center" grow my="lg">
+          <Title order={2}>Admin</Title>
+        </Group>
+      </Container>
+    </>
+  );
+}

web/app/ui/nav/navbar.tsx

@@ -2,6 +2,7 @@ import { useAuth } from "@/util/auth";
 import { Stack, NavLink } from "@mantine/core";
 import { Link, useLocation } from "@remix-run/react";
 import {
+  IconAdjustments,
   IconBook2,
   IconDashboard,
   IconLogout,
@@ -19,7 +20,7 @@ export default function Navbar({
   const location = useLocation();
   const page = location.pathname.split("/")[2];
 
-  const { user, signout } = useAuth();
+  const { user, authLevel, signout } = useAuth();
 
   return (
     <Stack justify="space-between" h="100%">
@@ -51,6 +52,19 @@ export default function Navbar({
           active={page === "aircraft"}
           onClick={() => (opened ? toggle() : null)}
         />
+        {authLevel ? (
+          authLevel === 2 ? (
+            <NavLink
+              p="md"
+              component={Link}
+              to="/logbook/admin"
+              label="Admin"
+              leftSection={<IconAdjustments />}
+              active={page === "admin"}
+              onClick={() => (opened ? toggle() : null)}
+            />
+          ) : null
+        ) : null}
       </Stack>
       <Stack gap="0">
         <NavLink

web/app/util/auth.tsx

@@ -5,6 +5,7 @@ import { createContext, useContext, useEffect, useState } from "react";
 
 interface AuthContextValues {
   user: string | null;
+  authLevel: number | null;
   loading: boolean;
   signin: ({
     username,
@@ -34,6 +35,7 @@ export function useAuth(): AuthContextValues {
 
 function useProvideAuth() {
   const [user, setUser] = useState<string | null>(null);
+  const [authLevel, setAuthLevel] = useState<number | null>(null);
   const [loading, setLoading] = useState<boolean>(true);
 
   const navigate = useNavigate();
@@ -83,7 +85,10 @@ function useProvideAuth() {
     setLoading(false);
     await client
       .get("/users/me")
-      .then((response) => handleUser(response.data.username))
+      .then((response) => {
+        handleUser(response.data.username);
+        setAuthLevel(response.data.level);
+      })
       .catch(() => handleUser(null));
     navigate("/logbook");
   };
@@ -99,13 +104,17 @@ function useProvideAuth() {
   useEffect(() => {
     client
       .get("/users/me")
-      .then((response) => handleUser(response.data.username))
+      .then((response) => {
+        handleUser(response.data.username);
+        setAuthLevel(response.data.level);
+      })
       .catch(() => handleUser(null));
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   return {
     user,
+    authLevel,
     loading,
     signin,
     signout,