Create Site & Network on setup

app/setup/SetupPage.tsx

@@ -4,8 +4,10 @@ import { useState } from "react"
 import { Mail, User, Lock } from "lucide-react"
 import ErrorToast from "@/components/Error"
 import { useRouter } from "next/navigation"
-
+import useSite from "@/hooks/useSite"
 import axios from "axios"
+import useNetworks from "@/hooks/useNetworks"
+import { Site } from "@/app/types"
 
 export default function SetupPage() {
   const router = useRouter()
@@ -17,14 +19,20 @@ export default function SetupPage() {
   const [password, setPassword] = useState("")
   const [passwordConfirm, setPasswordConfirm] = useState("")
 
+  const [siteName, setSiteName] = useState("")
+  const [networkName, setNetworkName] = useState("")
+
+  const { addSite } = useSite()
+  const { addNetwork } = useNetworks()
+
   const [error, setError] = useState("")
 
   const handleNextStep = () => {
-    setStep(2)
+    setStep(step + 1)
   }
 
   const handlePreviousStep = () => {
-    setStep(1)
+    setStep(step - 1)
   }
 
   const handleComplete = async () => {
@@ -33,17 +41,65 @@ export default function SetupPage() {
       return
     }
     try {
+      // Create user
       const response = await axios.post("/api/user/create", {
         email,
         username,
         name,
         password
       })
-      if (response.status === 201) {
-        router.push("/")
+
+      // Create site using the hook
+      const siteResult = addSite({
+        id: "",
+        name: siteName,
+        description: "",
+        networks: []
+      })
+      
+      // Handle validation errors (returned as strings)
+      if (typeof siteResult === "string") {
+        setError(siteResult)
+        return
       }
+      
+      // If not a string, it's a Promise - await it
+      const site = await siteResult
+      
+      if (!site || !site.id) {
+        setError("Failed to create site")
+        return
+      }
+      
+      // Create network using the hook
+      const networkResult = addNetwork({
+        id: "",
+        name: networkName,
+        siteId: site.id,
+        ipv4Subnet: "",
+        ipv6Subnet: "",
+        gateway: ""
+      })
+      
+      // Handle validation errors
+      if (typeof networkResult === "string") {
+        setError(networkResult)
+        return
+      }
+      
+      // If not a string, it's a Promise - await it
+      const network = await networkResult
+
+      if (!network) {
+        setError("Failed to create network")
+        return
+      }
+
+      // Success - navigate to home
+      router.push("/")
     } catch (error: any) {
-      setError(error.response.data.error)
+      console.error("Error in setup:", error)
+      setError(typeof error === "string" ? error : error.response?.data?.error || error.message || "An unknown error occurred")
     }
   }
     
@@ -55,8 +111,9 @@ export default function SetupPage() {
         <div className="bg-base-200 p-6 rounded-lg shadow-lg w-full max-w-3xl">
           <div className="mb-8">
             <ul className="steps steps-vertical lg:steps-horizontal w-full">
-              <li className="step step-primary">Create account</li>
-              <li className={step === 2 ? "step step-primary" : "step"}>Next Steps</li>
+              <li className={step >= 1 ? "step step-primary" : "step"}>Create account</li>
+              <li className={step >= 2 ? "step step-primary" : "step"}>Create site & network</li>
+              <li className={step >= 3 ? "step step-primary" : "step"}>Next Steps</li>
             </ul>
           </div>
 
@@ -131,6 +188,40 @@ export default function SetupPage() {
             )}
 
             {step === 2 && (
+              <div className="flex flex-col justify-between min-h-[400px]">
+                <div className="space-y-4">
+                  <h1 className="text-2xl font-bold">Create site & network</h1>
+                  <p className="text-gray-600">Please create a site & network to get started. Don't worry, you can always change it later.</p>
+                </div>
+
+                <div className="w-full space-y-4">
+                  <fieldset className="fieldset">
+                    <legend className="fieldset-legend">Site Name</legend>
+                    <label className="input validator w-full">
+                      <input type="text" placeholder="e.g. Homelab" minLength={3} maxLength={100} required value={siteName} onChange={(e) => setSiteName(e.target.value)} />
+                    </label>
+                    <div className="validator-hint hidden">Enter valid site name</div>
+                  </fieldset>
+
+                  <fieldset className="fieldset">
+                    <legend className="fieldset-legend">Network Name</legend>
+                    <label className="input validator w-full">
+                      <input type="text" placeholder="e.g. VLAN 1" minLength={3} maxLength={100} required value={networkName} onChange={(e) => setNetworkName(e.target.value)} />
+                    </label>
+                    <div className="validator-hint hidden">Enter valid network name</div>
+                  </fieldset>
+                </div>
+
+                <div className="pt-4 flex flex-col sm:flex-row gap-2">
+                  <button className="btn btn-outline flex-1" onClick={handlePreviousStep}>
+                    Back
+                  </button>
+                  <button className="btn btn-primary flex-1" onClick={handleComplete}>Next</button>
+                </div>
+              </div>
+            )}
+
+            {step === 3 && (
               <div className="flex flex-col justify-between min-h-[400px]">
                 <div className="space-y-4">
                   <h1 className="text-2xl font-bold">Next Steps</h1>