Edit & Delete Site

app/api/sites/delete/route.ts

@@ -1,13 +1,10 @@
 import { NextRequest, NextResponse } from "next/server";
 import prisma from "@/app/prisma";
 
-interface Body {
-    siteId: string;
-}
 
 export async function DELETE(request: NextRequest) {
-    const body: Body = await request.json();
-    const { siteId } = body;
+    const searchParams = request.nextUrl.searchParams;
+    const siteId = searchParams.get("siteId");
 
     try {
         const site = await prisma.site.delete({

app/api/sites/edit/route.ts

@@ -1,19 +1,21 @@
 import { NextRequest, NextResponse } from "next/server";
 import prisma from "@/app/prisma";
+import { Network } from "@/app/types";
 
 interface Body {
-    siteId: string;
+    id: string;
     name: string;
     description: string;
+    networks: Network[];
 }
 
 export async function POST(request: NextRequest) {
     const body: Body = await request.json();
-    const { siteId, name, description } = body;
+    const { id, name, description, networks } = body;
 
     try {
         const site = await prisma.site.update({
-            where: { id: Number(siteId) },
+            where: { id: Number(id) },
             data: { name, description },
         });
 

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

@@ -7,6 +7,8 @@ import AddNetwork from "@/components/dialogues/AddNetwork"
 import { Plus, Pencil, Trash, Info, Building2, Network as NetworkIcon, Globe, Cpu } from "lucide-react"
 import EditNetwork from "@/components/dialogues/EditNetwork"
 import DeleteNetwork from "@/components/dialogues/DeleteNetwork"
+import EditSite from "@/components/dialogues/EditSite"
+import DeleteSite from "@/components/dialogues/DeleteSite"
 
 interface SitesPageProps {
   username: string
@@ -31,8 +33,24 @@ export default function SitesPage({ username, name, siteId }: SitesPageProps) {
           <div className="card bg-base-100 shadow-xl rounded-xl overflow-hidden border border-base-200 w-full">
             <div className="card-body p-6">
               <div className="w-full flex justify-between items-center mb-4">
-                <h1 className="text-2xl font-bold w-1/2">Site - {site.name}</h1>
-                <div className="w-1/2 flex justify-end">
+                <h1 className="text-2xl font-bold">Site - {site.name}</h1>
+                <div className="flex items-center gap-2">
+                  {isEditMode && (
+                    <>
+                      <button 
+                        className="btn btn-primary btn-sm px-2" 
+                        onClick={() => (document.getElementById('edit_site') as HTMLDialogElement)?.showModal()}
+                      >
+                        <Pencil className="h-4 w-4" />
+                      </button>
+                      <button 
+                        className="btn btn-error btn-sm px-2" 
+                        onClick={() => (document.getElementById('delete_site') as HTMLDialogElement)?.showModal()}
+                      >
+                        <Trash className="h-4 w-4" />
+                      </button>
+                    </>
+                  )}
                   <EditModeToggle onToggle={setIsEditMode} />
                 </div>
               </div>
@@ -132,6 +150,8 @@ export default function SitesPage({ username, name, siteId }: SitesPageProps) {
           </div>
           
           <AddNetwork siteId={site.id} />
+          <EditSite site={site} />
+          <DeleteSite siteId={site.id} />
         </div>
       </main>
     </Sidebar>

components/dialogues/DeleteSite.tsx

@@ -0,0 +1,54 @@
+"use client";
+import axios from "axios"
+import { useRouter } from "next/navigation"
+import { Trash2, AlertTriangle } from "lucide-react";
+import useSite from "@/hooks/useSite";
+
+interface DeleteSiteProps {
+    siteId: string;
+}
+
+export default function DeleteSite({ siteId }: DeleteSiteProps) {
+    const router = useRouter()
+    const { deleteSite } = useSite()
+    
+    return (
+        <div>
+            <dialog id="delete_site" className="modal">
+                <div className="modal-box w-11/12 max-w-md border-l-4 border-error">
+                    <div className="flex items-center gap-3 mb-3">
+                        <div className="bg-error text-error-content rounded-full p-2 flex items-center justify-center">
+                            <Trash2 className="h-6 w-6" />
+                        </div>
+                        <h3 className="font-bold text-xl">Delete Site</h3>
+                    </div>
+                    
+                    <div className="bg-base-200 p-4 rounded-lg mb-4">
+                        <p className="text-sm">
+                            <span className="font-medium">Are you sure you want to delete this site?</span>
+                        </p>
+                        <p className="text-sm mt-2">
+                            This will also delete all networks associated with this site.
+                        </p>
+                        <div className="mt-2 flex items-center gap-2 text-error">
+                            <AlertTriangle className="h-5 w-5" />
+                            <span className="font-bold">This action cannot be undone.</span>
+                        </div>
+                    </div>
+                    
+                    <div className="modal-action">
+                        <form method="dialog" className="flex gap-2">
+                            <button className="btn btn-outline">Cancel</button>
+                            <button 
+                                className="btn btn-error text-error-content" 
+                                onClick={() => deleteSite(siteId)}
+                            >
+                                Delete Site
+                            </button>
+                        </form>
+                    </div>
+                </div>
+            </dialog>
+        </div>
+    );
+}

components/dialogues/EditSite.tsx

@@ -0,0 +1,91 @@
+"use client"
+import { useState, useEffect } from "react"
+import axios from "axios"
+import { Site } from "@/app/types"
+import { PencilLine, Building2, FileText } from "lucide-react"
+import ErrorToast from "@/components/Error"
+import SuccessToast from "@/components/Success"
+import useSite from "@/hooks/useSite"
+
+interface EditSiteProps {
+  site: Site
+}
+
+export default function EditSite({ site }: EditSiteProps) {
+  const [name, setName] = useState(site.name)
+  const [description, setDescription] = useState(site.description || "")
+  const [error, setError] = useState("")
+  const [success, setSuccess] = useState("")
+  const { editSite } = useSite()
+
+  useEffect(() => {
+    setName(site.name)
+    setDescription(site.description || "")
+  }, [site])
+
+  return (
+    <div>
+      <dialog id="edit_site" className="modal">
+        <div className="modal-box w-11/12 max-w-3xl border-l-4 border-primary">
+          <div className="flex items-center gap-3 mb-3">
+            <div className="bg-primary text-primary-content rounded-full p-2 flex items-center justify-center">
+              <PencilLine className="h-6 w-6" />
+            </div>
+            <h3 className="font-bold text-xl">Edit Site</h3>
+          </div>
+          
+          <div className="bg-base-200 p-4 rounded-lg mb-4">
+            <div className="space-y-4">
+              <div className="form-control">
+                <label className="label">
+                  <div className="flex items-center gap-2">
+                    <Building2 className="h-4 w-4 opacity-70" />
+                    <span className="label-text font-medium">Site Name</span>
+                  </div>
+                </label>
+                <input 
+                  type="text" 
+                  placeholder="Enter site name" 
+                  className="input input-bordered w-full" 
+                  value={name} 
+                  onChange={(e) => setName(e.target.value)}
+                />
+              </div>
+
+              <div className="form-control">
+                <label className="label">
+                  <div className="flex items-center gap-2">
+                    <FileText className="h-4 w-4 opacity-70" />
+                    <span className="label-text font-medium">Description</span>
+                    <span className="ml-1 text-xs opacity-60">(optional)</span>
+                  </div>
+                </label>
+                <textarea 
+                  placeholder="Enter site description" 
+                  className="textarea textarea-bordered w-full h-24" 
+                  value={description} 
+                  onChange={(e) => setDescription(e.target.value)}
+                />
+              </div>
+            </div>
+          </div>
+
+          <div className="modal-action">
+            <form method="dialog" className="flex gap-3 w-full justify-end">
+              <button className="btn btn-outline">Cancel</button>
+              <button 
+                className="btn btn-primary" 
+                onClick={() => editSite({ id: site.id, name, description, networks: site.networks })}
+                disabled={!name}
+              >
+                Save Changes
+              </button>
+            </form>
+          </div>
+        </div>
+      </dialog>
+      <ErrorToast message={error} show={error !== ''} onClose={() => setError('')} />
+      <SuccessToast message={success} show={success !== ''} onClose={() => setSuccess('')} />
+    </div>
+  )
+}

hooks/useSite.ts

@@ -24,10 +24,33 @@ const useSite = () => {
         loadSite();
     }, [loadSite]);
 
+    const editSite = (site: Site) => {
+        axios.post('/api/sites/edit', site)
+        .then(() => {
+            setSite(site);
+        })
+        .catch(err => {
+            console.error(err);
+        })
+    };
+
+    const deleteSite = (siteId: string) => {
+        axios.delete('/api/sites/delete', {
+            params: { siteId }
+        })
+        .then(() => {
+            setSiteId('');
+        })
+        .catch(err => {
+            console.error(err);
+        })
+    };
     return {
         site,
         loadSite,
         setSiteId,
+        editSite,
+        deleteSite,
     };
 };