Edit network

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

@@ -0,0 +1,33 @@
+import { NextRequest, NextResponse } from "next/server";
+import prisma from "@/app/prisma";
+
+interface Body {
+    id: string;
+    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.update({
+            where: {
+                id: Number(body.id),
+            },
+            data: {
+                name: body.name,
+                ipv4Subnet: body.ipv4Subnet,
+                ipv6Subnet: body.ipv6Subnet,
+                gateway: body.gateway,
+            },
+        });
+
+        return NextResponse.json({ network }, { status: 201 });
+    } catch (error) {
+        console.error("Error editing network:", error);
+        return NextResponse.json({ error: "Failed to edit network" }, { status: 500 });
+    }
+}

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

@@ -4,7 +4,8 @@ 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"
+import { Plus, Pencil } from "lucide-react"
+import EditNetwork from "@/components/dialogues/EditNetwork"
 
 interface SitesPageProps {
   username: string
@@ -57,6 +58,7 @@ export default function SitesPage({ username, name, siteId }: SitesPageProps) {
                             <th>IPv4 Subnet</th>
                             <th>IPv6 Subnet</th>
                             <th>Gateway</th>
+                            <th></th>
                         </tr>
                         </thead>
                         <tbody>
@@ -67,6 +69,12 @@ export default function SitesPage({ username, name, siteId }: SitesPageProps) {
                                 <td>{network.ipv4Subnet}</td>
                                 <td>{network.ipv6Subnet}</td>
                                 <td>{network.gateway}</td>
+                                <td>
+                                    <button className="btn btn-primary btn-sm" onClick={() => document.getElementById('edit_network')?.showModal()}>
+                                        <Pencil className="w-5 h-5" />
+                                    </button>
+                                    <EditNetwork siteId={site.id} network={network} />
+                                </td>
                             </tr>
                         ))}
                         </tbody>

components/dialogues/EditNetwork.tsx

@@ -0,0 +1,109 @@
+"use client";
+
+import { useState } from "react";
+import ErrorToast from "@/components/Error";
+import SuccessToast from "@/components/Success";
+import useNetworks from "@/hooks/useNetworks";
+import { Network } from "@/app/types";
+
+interface EditNetworkProps {
+    onNetworkAdded?: () => void;
+    siteId: string;
+    network: Network;
+}
+
+export default function EditNetwork({ onNetworkAdded, siteId, network }: EditNetworkProps) {
+    const [editName, setEditName] = useState(network.name);
+    const [editIpv4Subnet, setEditIpv4Subnet] = useState(network.ipv4Subnet);
+    const [editIpv6Subnet, setEditIpv6Subnet] = useState(network.ipv6Subnet);
+    const [editGateway, setEditGateway] = useState(network.gateway);
+    const [error, setError] = useState("");
+    const [success, setSuccess] = useState("");
+    const { editNetwork } = useNetworks();
+    
+
+    return (
+        <div>
+            <dialog id="edit_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">Edit Network</h3>
+                            <p className="text-sm text-gray-500 mt-1">Provide details for the 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={editName}
+                                    onChange={(e) => setEditName(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={editIpv4Subnet}
+                                    onChange={(e) => setEditIpv4Subnet(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={editIpv6Subnet}
+                                    onChange={(e) => setEditIpv6Subnet(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={ editGateway}
+                                    onChange={(e) => setEditGateway(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={() => editNetwork({ id: network.id, siteId, name: editName, ipv4Subnet: editIpv4Subnet, ipv6Subnet: editIpv6Subnet, gateway: editGateway })}>Edit 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

@@ -8,6 +8,10 @@ const useNetworks = () => {
         axios.post('/api/sites/networks/add', network);
     };
 
+    const editNetwork = (network: Network) => {
+        axios.post('/api/sites/networks/edit', network);
+    };
+
     const deleteNetwork = (networkId: string) => {
         axios.delete('/api/sites/networks/delete', {
             params: { networkId }
@@ -16,6 +20,7 @@ const useNetworks = () => {
 
     return {
         addNetwork,
+        editNetwork,
         deleteNetwork,
     };
 };