Bug Fixes

app/api/sites/delete/route.ts

@@ -3,7 +3,7 @@ import prisma from "@/app/prisma";
 import { z } from "zod/v4";
 
 const schema = z.object({
-    siteId: z.string(),
+    siteId: z.number(),
 });
 
 export async function DELETE(request: NextRequest) {
@@ -12,7 +12,7 @@ export async function DELETE(request: NextRequest) {
 
     try {
         const site = await prisma.site.delete({
-            where: { id: Number(siteId.siteId) },
+            where: { id: siteId.siteId },
         });
 
         return NextResponse.json(site);

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

@@ -3,7 +3,7 @@ import prisma from "@/app/prisma";
 import { z } from "zod/v4";
 
 const schema = z.object({
-    networkId: z.string(),
+    networkId: z.number(),
 });
 
 export async function DELETE(request: NextRequest) {
@@ -13,7 +13,7 @@ export async function DELETE(request: NextRequest) {
     try {
         await prisma.network.delete({
             where: {
-                id: Number(network.networkId),
+                id: network.networkId,
             },
         });
         

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

@@ -16,7 +16,7 @@ export async function POST(request: NextRequest) {
     try {
         const network = await prisma.network.update({
             where: {
-                id: Number(body.id),
+                id: body.id,
             },
             data: {
                 name: body.name,

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

@@ -1,7 +1,7 @@
 "use client"
 import Sidebar from "@/components/Sidebar"
 import useSite from "@/hooks/useSites"
-import { useEffect, useState } from "react"
+import { useEffect, useState, useRef } from "react"
 import { Network } from "@/app/types"
 import Loading from "@/components/Loading"
 import { EditModeToggle } from "@/components/EditModeToggle"
@@ -15,15 +15,16 @@ import DeleteSite from "@/components/dialogues/DeleteSite"
 interface SitesPageProps {
   username: string
   name: string
-  siteId: string
+  siteId: number
 }
 
 export default function SitesPage({ username, name, siteId }: SitesPageProps) {
   const { site, loadSite, updateSite, setSiteId, loading } = useSite()
   const [isEditMode, setIsEditMode] = useState(false)
+  const editSiteRef = useRef<{ resetForm: () => void }>(null)
   
   const [selectedNetwork, setSelectedNetwork] = useState<Network | null>(null)
-  const [selectedNetworkId, setSelectedNetworkId] = useState('')
+  const [selectedNetworkId, setSelectedNetworkId] = useState<number | null>(null)
 
   useEffect(() => {
     if (siteId) {
@@ -31,6 +32,11 @@ export default function SitesPage({ username, name, siteId }: SitesPageProps) {
     }
   }, [siteId, setSiteId])
 
+  const handleEditClick = () => {
+    editSiteRef.current?.resetForm()
+    ;(document.getElementById('edit_site') as HTMLDialogElement)?.showModal()
+  }
+
   return (
     <Sidebar username={username} fullName={name} breadcrumbPath={["/", "Dashboard", "Resources", "Sites", site.name]}>
       <main className="w-full">
@@ -49,7 +55,7 @@ export default function SitesPage({ username, name, siteId }: SitesPageProps) {
                     <>
                       <button 
                         className="btn btn-primary btn-sm px-2" 
-                        onClick={() => (document.getElementById('edit_site') as HTMLDialogElement)?.showModal()}
+                        onClick={handleEditClick}
                       >
                         <Pencil className="h-4 w-4" />
                       </button>
@@ -167,7 +173,7 @@ export default function SitesPage({ username, name, siteId }: SitesPageProps) {
         )}
 
         <AddNetwork siteId={site.id} onNetworkAdded={updateSite}/>
-        <EditSite site={site} onSiteEdited={updateSite} />
+        <EditSite ref={editSiteRef} site={site} onSiteEdited={updateSite} />
         <DeleteSite siteId={site.id} />
         {selectedNetwork && (
           <EditNetwork 

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

@@ -22,6 +22,6 @@ export default function Dashboard() {
   if (loading) {
     return <Loading />;
   } else {
-    return <SitePage username={username} name={name} siteId={siteId as string} />;
+    return <SitePage username={username} name={name} siteId={Number(siteId)} />;
   }
 }

components/dialogues/AddSite.tsx

@@ -19,7 +19,7 @@ export default function AddSite({ onSiteAdded }: AddSiteProps) {
     const { addSite } = useSite();
 
     const addSiteHandler = async () => {
-        const response = addSite({ id: "", name, description, networks: [] });
+        const response = addSite({ id: 0, name, description, networks: [] });
         if (typeof response === "string") {
             setError(response)
             return

components/dialogues/DeleteNetwork.tsx

@@ -6,7 +6,7 @@ import ErrorToast from "@/components/Error";
 import SuccessToast from "@/components/Success";
 
 interface DeleteNetworkProps {
-    networkId: string;
+    networkId: number;
     onNetworkDeleted?: () => void;
 }
 

components/dialogues/DeleteSite.tsx

@@ -5,7 +5,7 @@ import { Trash2, AlertTriangle } from "lucide-react";
 import useSite from "@/hooks/useSites";
 
 interface DeleteSiteProps {
-    siteId: string;
+    siteId: number;
 }
 
 export default function DeleteSite({ siteId }: DeleteSiteProps) {
@@ -42,7 +42,7 @@ export default function DeleteSite({ siteId }: DeleteSiteProps) {
                     </div>
                     
                     <div className="modal-action">
-                        <form method="dialog" className="flex gap-2">
+                        <form method="dialog" className="flex gap-3 w-full justify-end">
                             <button className="btn btn-outline">Cancel</button>
                             <button 
                                 className="btn btn-error text-error-content" 

components/dialogues/EditSite.tsx

@@ -1,5 +1,5 @@
 "use client"
-import { useState, useEffect } from "react"
+import { useState, useEffect, forwardRef, useImperativeHandle } from "react"
 import axios from "axios"
 import { Site } from "@/app/types"
 import { PencilLine, Building2, FileText } from "lucide-react"
@@ -12,16 +12,24 @@ interface EditSiteProps {
   onSiteEdited?: () => void
 }
 
-export default function EditSite({ site, onSiteEdited }: EditSiteProps) {
+const EditSite = forwardRef<{ resetForm: () => void }, EditSiteProps>(({ site, onSiteEdited }, ref) => {
   const [name, setName] = useState(site.name)
   const [description, setDescription] = useState(site.description || "")
   const [error, setError] = useState("")
   const [success, setSuccess] = useState("")
   const { editSite } = useSite()
 
-  useEffect(() => {
+  const resetForm = () => {
     setName(site.name)
     setDescription(site.description || "")
+  }
+
+  useImperativeHandle(ref, () => ({
+    resetForm
+  }))
+
+  useEffect(() => {
+    resetForm()
   }, [site])
 
   const handleEditSite = async () => {
@@ -40,9 +48,6 @@ export default function EditSite({ site, onSiteEdited }: EditSiteProps) {
         }
       } catch (apiError) {
         setError(typeof apiError === "string" ? apiError : "Failed to edit site")
-      } finally {
-        setName("")
-        setDescription("")
       }
   }
 
@@ -95,7 +100,7 @@ export default function EditSite({ site, onSiteEdited }: EditSiteProps) {
 
           <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-outline" onClick={resetForm}>Cancel</button>
               <button 
                 className="btn btn-primary" 
                 onClick={handleEditSite}
@@ -111,4 +116,8 @@ export default function EditSite({ site, onSiteEdited }: EditSiteProps) {
       <SuccessToast message={success} show={success !== ''} onClose={() => setSuccess('')} />
     </div>
   )
-}
+})
+
+EditSite.displayName = 'EditSite'
+
+export default EditSite

hooks/useNetworks.ts

@@ -33,7 +33,7 @@ const useNetworks = () => {
         });
     };
 
-    const deleteNetwork = (networkId: string): Promise<string> | string => {
+    const deleteNetwork = (networkId: number): Promise<string> | string => {
         if (!networkId) {
             return 'Network ID is required';
         }

hooks/useSites.ts

@@ -10,7 +10,7 @@ const useSite = () => {
         description: "",
         networks: []
     });
-    const [siteId, setSiteId] = useState("");
+    const [siteId, setSiteId] = useState<number>(0);
     const [loading, setLoading] = useState(false);
     const [currentPage, setCurrentPage] = useState(1);
     const [itemPerPage, setItemPerPage] = useState(() => {
@@ -22,10 +22,11 @@ const useSite = () => {
     const [sites, setSites] = useState([]);
 
     const loadSite = useCallback(() => {
+        console.log(siteId)
         if (!siteId) return;
         setLoading(true);
         axios.get('/api/sites/get', {
-            params: { siteId }
+            params: { siteId: siteId }
         }).then((response) => {
             setSite(response.data.site);
             setLoading(false);
@@ -35,7 +36,7 @@ const useSite = () => {
     const updateSite = useCallback(() => {
         if (!siteId) return;
         axios.get('/api/sites/get', {
-            params: { siteId }
+            params: { siteId: siteId }
         }).then((response) => {
             setSite(response.data.site);
         });
@@ -77,12 +78,12 @@ const useSite = () => {
         });
     };
 
-    const deleteSite = (siteId: string) => {
+    const deleteSite = (siteId: number) => {
         axios.delete('/api/sites/delete', {
-            params: { siteId }
+            params: { siteId: siteId }
         })
         .then(() => {
-            setSiteId('');
+            setSiteId(0);
         })
         .catch(err => {
             console.error(err);