System config parameter view

website/src/components/AdminArea.tsx

@@ -0,0 +1,19 @@
+import { useRouter } from "next/router";
+import { useSession } from "next-auth/react";
+import { ReactNode, useEffect } from "react";
+
+export const AdminArea = ({ children }: { children: ReactNode }) => {
+  const router = useRouter();
+  const { data: session, status } = useSession();
+
+  useEffect(() => {
+    if (status === "loading") {
+      return;
+    }
+    if (session?.user.role === "admin") {
+      return;
+    }
+    router.push("/");
+  }, [router, session, status]);
+  return <main>{status === "loading" ? "loading..." : children}</main>;
+};

website/src/components/Layout.tsx

@@ -1,7 +1,7 @@
 // https://nextjs.org/docs/basic-features/layouts
 
 import { Box, Grid } from "@chakra-ui/react";
-import { Activity, BarChart2, Layout, MessageSquare, Users } from "lucide-react";
+import { Activity, BarChart2, Layout, MessageSquare, Settings, Users } from "lucide-react";
 import type { NextPage } from "next";
 import { Header } from "src/components/Header";
 
@@ -37,19 +37,16 @@ export const getDashboardLayout = (page: React.ReactElement) => (
         {
           label: "Dashboard",
           pathname: "/dashboard",
-          desc: "Dashboard Home",
           icon: Layout,
         },
         {
           label: "Messages",
           pathname: "/messages",
-          desc: "Messages Dashboard",
           icon: MessageSquare,
         },
         {
           label: "Leaderboard",
           pathname: "/leaderboard",
-          desc: "User Leaderboard",
           icon: BarChart2,
         },
       ]}
@@ -72,15 +69,18 @@ export const getAdminLayout = (page: React.ReactElement) => (
         {
           label: "Users",
           pathname: "/admin",
-          desc: "Users Dashboard",
           icon: Users,
         },
         {
           label: "Status",
           pathname: "/admin/status",
-          desc: "Status Dashboard",
           icon: Activity,
         },
+        {
+          label: "Parameters",
+          pathname: "/admin/parameters",
+          icon: Settings,
+        },
       ]}
     >
       {page}

website/src/components/SideMenu.tsx

@@ -6,7 +6,6 @@ import { useRouter } from "next/router";
 export interface MenuButtonOption {
   label: string;
   pathname: string;
-  desc: string;
   icon: LucideIcon;
 }