Add Site modal & sites page

app/dashboard/sites/SitesPage.tsx

@@ -0,0 +1,35 @@
+"use client";
+import Sidebar from "@/components/Sidebar";
+import { Plus } from "lucide-react";
+import AddSite from "@/components/dialogues/AddSite";
+
+interface SitesPageProps {
+    username: string;
+    name: string;
+}
+
+
+export default function SitesPage({ username, name }: SitesPageProps) {
+    return (
+        <Sidebar 
+            username={username} 
+            fullName={name} 
+            breadcrumbPath={['/', 'Dashboard', 'Ressources', 'Sites']}
+        >
+            <main>
+                <div className="flex gap-4 items-center">
+                    <div className="flex-1">
+                        <h1 className="text-2xl font-bold">Sites</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>
+                    <button className="btn btn-primary" onClick={() => document.getElementById('add_site')?.showModal()}>
+                        <Plus className="w-5 h-5" />
+                        Add Site
+                    </button>
+                </div>
+
+                <AddSite />
+            </main>
+        </Sidebar>
+    )
+}

app/dashboard/sites/page.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import SitesPage from "./SitesPage";
+import Loading from "@/components/Loading";
+
+import { useState, useEffect } from "react";
+import { useRouter } from "next/navigation";
+import axios from "axios";
+import Cookies from "js-cookie";
+
+export default function Dashboard() {
+  const router = useRouter();
+  const [loading, setLoading] = useState(true);
+  const [username, setUsername] = useState("");
+  const [name, setName] = useState("");
+
+  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 <SitesPage username={username} name={name} />;
+  }
+}

components/dialogues/AddSite.tsx

@@ -0,0 +1,48 @@
+export default function AddSite() {
+    return (
+        <dialog id="add_site" className="modal">
+            <div className="modal-box w-2/3 max-w-2/3">
+                <div className="flex flex-col gap-4">
+                    <header>
+                        <h3 className="text-2xl font-semibold tracking-tight">Add New Site</h3>
+                        <p className="text-sm text-gray-500 mt-1">Provide details for the new site location</p>
+                    </header>
+ 
+                    <div className="space-y-6">
+                        <div className="form-control">
+                            <label className="label">
+                                <span className="label-text font-medium text-base">Site Name</span>
+                            </label>
+                            <input 
+                                type="text" 
+                                className="input input-bordered w-full focus:ring-2" 
+                                placeholder="e.g. Downtown Office"
+                            />
+                        </div>
+
+                        <div className="form-control">
+                            <label className="label">
+                                <span className="label-text font-medium text-base">
+                                    Description
+                                    <span className="ml-2 text-sm font-normal text-gray-400">(optional)</span>
+                                </span>
+                            </label>
+                            <textarea 
+                                className="textarea textarea-bordered w-full focus:ring-2" 
+                                placeholder="Enter a brief description..."
+                                rows={4}
+                            ></textarea>
+                        </div>
+                    </div>
+
+                    <div className="modal-action flex justify-end">
+                        <form method="dialog" className="flex gap-3">
+                            <button className="btn btn-ghost">Cancel</button>
+                            <button className="btn btn-primary px-6">Add Site</button>
+                        </form>
+                    </div>
+                </div>
+            </div>
+        </dialog>
+    )
+}