@@ -307,7 +310,7 @@ export default function ProxyHostForm({ host, onSubmit, onCancel }: ProxyHostFor
className="w-4 h-4 text-blue-600 bg-gray-900 border-gray-700 rounded focus:ring-blue-500"
/>
+
diff --git a/frontend/src/hooks/useDomains.ts b/frontend/src/hooks/useDomains.ts
new file mode 100644
index 00000000..9ebadf99
--- /dev/null
+++ b/frontend/src/hooks/useDomains.ts
@@ -0,0 +1,33 @@
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
+import * as api from '../api/domains'
+
+export function useDomains() {
+ const queryClient = useQueryClient()
+
+ const { data: domains = [], isLoading, error } = useQuery({
+ queryKey: ['domains'],
+ queryFn: api.getDomains,
+ })
+
+ const createMutation = useMutation({
+ mutationFn: api.createDomain,
+ onSuccess: () => {
+ queryClient.invalidateQueries({ queryKey: ['domains'] })
+ },
+ })
+
+ const deleteMutation = useMutation({
+ mutationFn: api.deleteDomain,
+ onSuccess: () => {
+ queryClient.invalidateQueries({ queryKey: ['domains'] })
+ },
+ })
+
+ return {
+ domains,
+ isLoading,
+ error,
+ createDomain: createMutation.mutateAsync,
+ deleteDomain: deleteMutation.mutateAsync,
+ }
+}
diff --git a/frontend/src/pages/Domains.tsx b/frontend/src/pages/Domains.tsx
new file mode 100644
index 00000000..aa908218
--- /dev/null
+++ b/frontend/src/pages/Domains.tsx
@@ -0,0 +1,102 @@
+import { useState } from 'react'
+import { useDomains } from '../hooks/useDomains'
+import { Trash2, Plus, Globe } from 'lucide-react'
+
+export default function Domains() {
+ const { domains, isLoading, error, createDomain, deleteDomain } = useDomains()
+ const [newDomain, setNewDomain] = useState('')
+ const [isSubmitting, setIsSubmitting] = useState(false)
+
+ const handleAdd = async (e: React.FormEvent) => {
+ e.preventDefault()
+ if (!newDomain.trim()) return
+
+ setIsSubmitting(true)
+ try {
+ await createDomain(newDomain)
+ setNewDomain('')
+ } catch (err) {
+ alert('Failed to create domain')
+ } finally {
+ setIsSubmitting(false)
+ }
+ }
+
+ const handleDelete = async (uuid: string) => {
+ if (confirm('Are you sure you want to delete this domain?')) {
+ try {
+ await deleteDomain(uuid)
+ } catch (err) {
+ alert('Failed to delete domain')
+ }
+ }
+ }
+
+ if (isLoading) return
Loading...
+ if (error) return
Error loading domains
+
+ return (
+
+
+
Domains
+
+
+
+ {/* Add New Domain Card */}
+
+
+ {/* Domain List */}
+ {domains.map((domain) => (
+
+
+
+
+
+
+
+
{domain.name}
+
+ Added {new Date(domain.created_at).toLocaleDateString()}
+
+
+
+
+
+
+ ))}
+
+
+ )
+}