feat:

--Working Dont touch

src/App.tsx

@@ -10,6 +10,16 @@ const navItems = [
 type PageId = (typeof navItems)[number]['id']
 type Theme = 'light' | 'dark'
 type TokenStatus = 'idle' | 'loading' | 'success' | 'error'
+type RegisterStatus = 'idle' | 'loading' | 'success' | 'error'
+
+type RegisterNodePayload = {
+  node_name: string
+  host: string
+  port: number
+  dbname: string
+  user: string
+  password: string
+}
 
 const getSavedTheme = (): Theme => {
   try {
@@ -74,6 +84,29 @@ const getSessionToken = async () => {
   return storedToken
 }
 
+const registerNode = async (payload: RegisterNodePayload) => {
+  const accessToken = localStorage.getItem('access_token')
+  const headers: Record<string, string> = {
+    'Content-Type': 'application/json',
+  }
+
+  if (accessToken) {
+    headers.Authorization = `Bearer ${accessToken}`
+  }
+
+  const response = await fetch('http://127.0.0.1:8000/register-node', {
+    method: 'POST',
+    headers,
+    body: JSON.stringify(payload),
+  })
+
+  if (!response.ok) {
+    throw new Error('Failed to register node')
+  }
+
+  return response.json()
+}
+
 function App() {
   const [isCollapsed, setIsCollapsed] = useState(false)
   const [activePage, setActivePage] = useState<PageId>(getSavedPage)
@@ -81,6 +114,8 @@ function App() {
   const [isRegisterFormOpen, setIsRegisterFormOpen] = useState(false)
   const [tokenStatus, setTokenStatus] = useState<TokenStatus>('idle')
   const [tokenError, setTokenError] = useState('')
+  const [registerStatus, setRegisterStatus] = useState<RegisterStatus>('idle')
+  const [registerError, setRegisterError] = useState('')
   const nextTheme = theme === 'light' ? 'dark' : 'light'
 
   const selectPage = (page: PageId) => {
@@ -113,6 +148,39 @@ function App() {
     }
   }
 
+  const handleRegisterNode = async (
+    event: React.FormEvent<HTMLFormElement>,
+  ) => {
+    event.preventDefault()
+    setRegisterStatus('loading')
+    setRegisterError('')
+
+    const formData = new FormData(event.currentTarget)
+    const payload: RegisterNodePayload = {
+      node_name: String(formData.get('node_name') ?? ''),
+      host: String(formData.get('host') ?? ''),
+      port: Number(formData.get('port')),
+      dbname: String(formData.get('dbname') ?? ''),
+      user: String(formData.get('user') ?? ''),
+      password: String(formData.get('password') ?? ''),
+    }
+
+    try {
+      const registerResponse = await registerNode(payload)
+
+      console.log('Node registration response:', registerResponse)
+
+      setRegisterStatus('success')
+      event.currentTarget.reset()
+      setIsRegisterFormOpen(false)
+    } catch (error) {
+      setRegisterStatus('error')
+      setRegisterError(
+        error instanceof Error ? error.message : 'Failed to register node',
+      )
+    }
+  }
+
   return (
     <div
       className={`app-shell theme-${theme} ${isCollapsed ? 'nav-collapsed' : ''}`}
@@ -186,7 +254,11 @@ function App() {
                 <button
                   type="button"
                   className="primary-button"
-                  onClick={() => setIsRegisterFormOpen(true)}
+                  onClick={() => {
+                    setIsRegisterFormOpen(true)
+                    setRegisterStatus('idle')
+                    setRegisterError('')
+                  }}
                 >
                   Register Nodes
                 </button>
@@ -209,8 +281,16 @@ function App() {
               <p className="status-message error">{tokenError}</p>
             )}
 
+            {registerStatus === 'success' && (
+              <p className="status-message success">Node registered successfully.</p>
+            )}
+
+            {registerStatus === 'error' && (
+              <p className="status-message error">{registerError}</p>
+            )}
+
             {isRegisterFormOpen ? (
-              <form className="register-form">
+              <form className="register-form" onSubmit={handleRegisterNode}>
                 <div className="form-grid">
                   <label className="form-field">
                     <span>Node Name</span>
@@ -258,8 +338,12 @@ function App() {
                   >
                     Cancel
                   </button>
-                  <button type="submit" className="primary-button">
-                    Register
+                  <button
+                    type="submit"
+                    className="primary-button"
+                    disabled={registerStatus === 'loading'}
+                  >
+                    {registerStatus === 'loading' ? 'Registering' : 'Register'}
                   </button>
                 </div>
               </form>