add not implemented

src/app/app/page.tsx

@@ -1,6 +1,6 @@
 'use client'
 import {auth} from "@/server/auth";
-import {redirect, useParams, useSearchParams} from "next/navigation";
+import {useRouter, redirect, useParams, useSearchParams} from "next/navigation";
 import {useState} from "react";
 import {useEffect} from "react";
 import {api} from "@/trpc/react";
@@ -13,7 +13,6 @@ import {
     HardDrive, Network,
     Package,
     RefreshCcw,
-    Settings,
     SettingsIcon,
     Users,
     Zap
@@ -27,6 +26,11 @@ export default function App(){
     const cacheID = params.get("cacheID");
     const [size, setSize] = useState<number>(0)
 
+    const router = useRouter()
+    const handler = async (path: string) => {
+      router.push(path + "?" + params.toString())
+    }
+
     // Fetch the selected cache
     const cache = api.cache.getOverview.useQuery({
         cacheID: parseInt(cacheID!) // This should be replaced with the actual cache ID you want to fetch
@@ -128,7 +132,7 @@ export default function App(){
                     </CardTitle>
                 </CardHeader>
                 <CardContent className="grid grid-cols-2 gap-2">
-                    <Button variant="outline" className="flex flex-row items-center gap-1 justify-start h-20">
+                    <Button onClick={() => handler("/app/settings")} variant="outline" className="flex flex-row items-center gap-1 justify-start h-20">
                         <div className="flex flex-col gap-2">
                             <div className="flex flex-row gap-2 items-center">
                                 <SettingsIcon size={18} />
@@ -139,7 +143,7 @@ export default function App(){
                             </div>
                         </div>
                     </Button>
-                    <Button variant="outline" className="flex flex-row items-center gap-1 justify-start h-20">
+                    <Button onClick={() => handler("/app/admin")} variant="outline" className="flex flex-row items-center gap-1 justify-start h-20">
                         <div className="flex flex-col gap-2">
                             <div className="flex flex-row gap-2 items-center">
                                 <Users size={18} />
@@ -150,7 +154,7 @@ export default function App(){
                             </div>
                         </div>
                     </Button>
-                    <Button variant="outline" className="flex flex-row items-center gap-1 justify-start h-20">
+                    <Button onClick={() => handler("/app/storage")} variant="outline" className="flex flex-row items-center gap-1 justify-start h-20">
                         <div className="flex flex-col gap-2">
                             <div className="flex flex-row gap-2 items-center">
                                 <Database />
@@ -161,7 +165,7 @@ export default function App(){
                             </div>
                         </div>
                     </Button>
-                    <Button variant="outline" className="flex flex-row items-center gap-1 justify-start h-20">
+                    <Button onClick={() => handler("/app/builders")} variant="outline" className="flex flex-row items-center gap-1 justify-start h-20">
                         <div className="flex flex-col gap-2">
                             <div className="flex flex-row gap-2 items-center">
                                 <Hammer />

src/app/app/performance/page.tsx

@@ -0,0 +1,19 @@
+import { NotImplemented } from "@/components/custom/NotImplemented";
+
+export default function Performance(){
+  return(
+    <>
+      <div className="flex flex-row justify-betweeni items-center w-full">
+        <div className="flex flex-col">
+          <h1 className="text-3xl font-bold">
+            Performance
+          </h1>
+          <p className="mt-2 text-sm text-muted-foreground">
+            Some performance information
+          </p>
+        </div>
+      </div>
+      <NotImplemented/>
+    </>
+  )
+}

src/app/app/settings/page.tsx

@@ -0,0 +1,19 @@
+import { NotImplemented } from "@/components/custom/NotImplemented";
+
+export default function Performance(){
+  return(
+    <>
+      <div className="flex flex-row justify-betweeni items-center w-full">
+        <div className="flex flex-col">
+          <h1 className="text-3xl font-bold">
+            Settings
+          </h1>
+          <p className="mt-2 text-sm text-muted-foreground">
+            Settings of the cache
+          </p>
+        </div>
+      </div>
+      <NotImplemented/>
+    </>
+  )
+}

src/app/app/storage/page.tsx

@@ -0,0 +1,19 @@
+import { NotImplemented } from "@/components/custom/NotImplemented";
+
+export default function Performance(){
+  return(
+    <>
+      <div className="flex flex-row justify-betweeni items-center w-full">
+        <div className="flex flex-col">
+          <h1 className="text-3xl font-bold">
+            Storage
+          </h1>
+          <p className="mt-2 text-sm text-muted-foreground">
+            Some storage information
+          </p>
+        </div>
+      </div>
+      <NotImplemented/>
+    </>
+  )
+}

src/components/custom/NotImplemented.tsx

@@ -0,0 +1,22 @@
+import { Card, CardTitle, CardHeader, CardContent } from "@/components/ui/card"
+import Link from "next/link"
+
+export function NotImplemented(){
+  return(
+    <div className="w-full flex items-center justify-center h-screen">
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-center text-xl font-bold">
+            NOT IMPLEMENTED YET! 
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          This page is currently not implemented!<br/>
+          Feel free to open an issue (if not already present) on our <Link className="font-bold text-primary" href="https://github.com/iglu-sh/controller/issues">GitHub</Link> Page
+          <br/>
+          If an issue already exists please upvote (👍) it. We will priorise the issue with the most "👍".
+        </CardContent>
+      </Card>
+    </div>
+  )
+}