Bug Fixes

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