Site Page

app/dashboard/sites/[siteId]/SitePage.tsx

@@ -0,0 +1,30 @@
+"use client"
+import Sidebar from "@/components/Sidebar";
+
+interface SitesPageProps {
+    username: string;
+    name: string;
+    siteId: string;
+}
+
+export default function SitesPage({ username, name, siteId }: SitesPageProps) {
+    return (
+        <Sidebar 
+            username={username} 
+            fullName={name} 
+            breadcrumbPath={['/', 'Dashboard', 'Ressources', 'Sites', siteId]}
+        >
+            <main>
+                <div className="flex gap-4 items-center">
+                    <div className="flex-1">
+                        <h1 className="text-2xl font-bold">Site</h1>
+                        <p className="text-sm opacity-70">
+                            Manage your sites. Sites are real-world locations where you can 
+                            monitor your assets & add networks.
+                        </p>
+                    </div>
+                </div>
+            </main>
+        </Sidebar>
+    )
+}

app/dashboard/sites/[siteId]/page.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import SitePage from "./SitePage";
+import Loading from "@/components/Loading";
+
+import { useState, useEffect } from "react";
+import { useRouter } from "next/navigation";
+import axios from "axios";
+import Cookies from "js-cookie";
+import { useParams } from "next/navigation";
+
+export default function Dashboard() {
+  const router = useRouter();
+  const [loading, setLoading] = useState(true);
+  const [username, setUsername] = useState("");
+  const [name, setName] = useState("")
+  const { siteId } = useParams();
+
+  useEffect(() => {
+    const init = async () => {
+      const token = Cookies.get("token");
+      if (!token) {
+        router.push("/");
+      }
+      const response = await axios.post("/api/user/validate", { token });
+      if (response.data.message !== "Valid") {
+        Cookies.remove("token");
+        router.push("/");
+      } else {
+        setUsername(response.data.username);
+        setName(response.data.name);
+        setLoading(false);
+      }
+    };
+    init();
+  }, []);
+
+  if (loading) {
+    return <Loading />;
+  } else {
+    return <SitePage username={username} name={name} siteId={siteId} />;
+  }
+}

components/cards/Sites.tsx

@@ -1,3 +1,6 @@
+"use client"
+import { useRouter } from "next/navigation";
+
 interface SitesProps {
     id: string;
     name: string;
@@ -6,6 +9,7 @@ interface SitesProps {
 }
 
 export default function Sites({ id, name, description, networks }: SitesProps) {
+    const router = useRouter();
     return (
         <div className="card bg-base-200 shadow-xl">
             <div className="card-body">
@@ -15,7 +19,7 @@ export default function Sites({ id, name, description, networks }: SitesProps) {
                     <p>Networks: {networks.join(', ')}</p>
                 )}
                 <div className="card-actions justify-end">
-                    <button className="btn btn-secondary btn-sm btn-outline">View</button>
+                    <button className="btn btn-secondary btn-sm btn-outline" onClick={() => router.push(`/dashboard/sites/${id}`)}>View</button>
                 </div>
             </div>
         </div>