Network & Edit mode

app/api/sites/get/route.ts

@@ -14,6 +14,9 @@ export async function GET(request: NextRequest) {
             where: {
                 id: Number(siteId),
             },
+            include: {
+                networks: true, // Include all network relationships
+            },
         });
         
         return NextResponse.json({ site });

app/api/sites/networks/add/route.ts

@@ -0,0 +1,31 @@
+import { NextRequest, NextResponse } from "next/server";
+import prisma from "@/app/prisma";
+
+interface Body {
+    siteId: number;
+    name: string;
+    ipv4Subnet?: string;
+    ipv6Subnet?: string;
+    gateway?: string;
+}
+
+export async function POST(request: NextRequest) {
+    const body: Body = await request.json();
+
+    try {
+        const network = await prisma.network.create({
+            data: {
+                siteId: body.siteId,
+                name: body.name,
+                ipv4Subnet: body.ipv4Subnet,
+                ipv6Subnet: body.ipv6Subnet,
+                gateway: body.gateway,
+            },
+        });
+
+        return NextResponse.json({ network }, { status: 201 });
+    } catch (error) {
+        console.error("Error creating network:", error);
+        return NextResponse.json({ error: "Failed to create network" }, { status: 500 });
+    }
+}

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

@@ -3,6 +3,8 @@ import Sidebar from "@/components/Sidebar"
 import useSite from "@/hooks/useSite"
 import { useEffect, useState } from "react"
 import { EditModeToggle } from "@/components/EditModeToggle"
+import AddNetwork from "@/components/dialogues/AddNetwork"
+import { Plus } from "lucide-react"
 
 interface SitesPageProps {
   username: string
@@ -37,12 +39,20 @@ export default function SitesPage({ username, name, siteId }: SitesPageProps) {
           </div>
           <div className="flex gap-4 items-center bg-base-200 p-4 rounded-2xl">
             <div className="flex-1">
+            <div className="flex justify-between items-center">
               <h1 className="text-2xl font-bold">Networks</h1>
+              {isEditMode ? (
+                <button className="btn btn-primary btn-sm px-2" onClick={() => document.getElementById('add_network')?.showModal()}>
+                  <Plus className="w-5 h-5" />
+                  </button>
+              ) : null}
+            </div>
               <p className="text-sm opacity-70">
-                {site.networks?.length > 0 ? site.networks.join(", ") : "No networks"}
+                {site.networks?.length > 0 ? site.networks.map((network) => network.name).join(", ") : "No networks"}
               </p>
             </div>
           </div>
+          <AddNetwork siteId={site.id} />
         </div>
       </main>
     </Sidebar>