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>

components/dialogues/AddNetwork.tsx

@@ -0,0 +1,107 @@
+"use client";
+
+import { useState } from "react";
+import ErrorToast from "@/components/Error";
+import SuccessToast from "@/components/Success";
+import useNetworks from "@/hooks/useNetworks";
+
+interface AddNetworkProps {
+    onNetworkAdded?: () => void;
+    siteId: number;
+}
+
+export default function AddNetwork({ onNetworkAdded, siteId }: AddNetworkProps) {
+    const [name, setName] = useState("");
+    const [ipv4Subnet, setIpv4Subnet] = useState("");
+    const [ipv6Subnet, setIpv6Subnet] = useState("");
+    const [gateway, setGateway] = useState("");
+    const [error, setError] = useState("");
+    const [success, setSuccess] = useState("");
+    const { addNetwork } = useNetworks();
+    
+
+    return (
+        <div>
+            <dialog id="add_network" 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 Network</h3>
+                            <p className="text-sm text-gray-500 mt-1">Provide details for the new network</p>
+                        </header>
+    
+                        <div className="space-y-4">
+                            <div className="form-control">
+                                <label className="label">
+                                    <span className="label-text font-medium text-base">Network Name</span>
+                                </label>
+                                <input 
+                                    type="text" 
+                                    className="input input-bordered w-full focus:ring-2" 
+                                    placeholder="e.g. VLAN 10"
+                                    value={name}
+                                    onChange={(e) => setName(e.target.value)}
+                                />
+                            </div>
+
+                            <div className="form-control">
+                                <label className="label">
+                                    <span className="label-text font-medium text-base">
+                                        IPv4 Subnet
+                                    </span>
+                                    <span className="ml-2 text-sm font-normal text-gray-400">(optional)</span>
+                                </label>
+                                <input 
+                                    type="text" 
+                                    className="input input-bordered w-full focus:ring-2" 
+                                    placeholder="Enter the IPv4 subnet"
+                                    value={ipv4Subnet}
+                                    onChange={(e) => setIpv4Subnet(e.target.value)}
+                                />
+                            </div>
+                            <div className="form-control">
+                                <label className="label">
+                                    <span className="label-text font-medium text-base">
+                                        IPv6 Subnet
+                                    </span>
+                                    <span className="ml-2 text-sm font-normal text-gray-400">(optional)</span>
+                                </label>
+                                <input 
+                                    type="text" 
+                                    className="input input-bordered w-full focus:ring-2" 
+                                    placeholder="Enter the IPv6 subnet"
+                                    value={ipv6Subnet}
+                                    onChange={(e) => setIpv6Subnet(e.target.value)}
+                                />
+                            </div>
+                            <div className="form-control">
+                                <label className="label">
+                                    <span className="label-text font-medium text-base">
+                                        Gateway
+                                    </span>
+                                    <span className="ml-2 text-sm font-normal text-gray-400">(optional)</span>
+                                </label>
+                                <input 
+                                    type="text" 
+                                    className="input input-bordered w-full focus:ring-2" 
+                                    placeholder="Enter the gateway"
+                                    value={gateway}
+                                    onChange={(e) => setGateway(e.target.value)}
+                                />
+                            </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" onClick={() => addNetwork({ siteId, name, ipv4Subnet, ipv6Subnet, gateway })}>Add Network</button>
+                            </form>
+                        </div>
+                    </div>
+                </div>
+            </dialog>
+            <ErrorToast message={error} show={error !== ''} onClose={() => setError('')} />
+            <SuccessToast message={success} show={success !== ''} onClose={() => setSuccess('')} />
+        </div>
+    )
+}

hooks/useNetworks.ts

@@ -0,0 +1,30 @@
+import { useState, useEffect, useCallback } from "react";
+import axios from "axios";
+
+interface AddNetwork {
+    siteId: number;
+    name: string;
+    ipv4Subnet: string;
+    ipv6Subnet: string;
+    gateway: string;
+}
+
+const useNetworks = () => {
+   
+    const addNetwork = (network: AddNetwork) => {
+        axios.post('/api/sites/networks/add', network);
+    };
+
+    const deleteNetwork = (networkId: number) => {
+        axios.delete('/api/sites/networks/delete', {
+            params: { networkId }
+        });
+    };
+
+    return {
+        addNetwork,
+        deleteNetwork,
+    };
+};
+
+export default useNetworks;

hooks/useSite.ts

@@ -1,11 +1,19 @@
 import { useState, useEffect, useCallback } from "react";
 import axios from "axios";
 
+interface Network {
+    id?: number;
+    name: string;
+    ipv4Subnet?: string;
+    ipv6Subnet?: string;
+    gateway?: string;
+}
+
 interface Site {
     id: number;
     name: string;
     description: string;
-    networks: string[];
+    networks: Network[];
 }
 
 const useSite = () => {