Edit network

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>