qarpeo 0.0.0-alpha.10

package/dist/runtime/app/pages/devtools/domains.vue

@@ -0,0 +1,772 @@
+<script setup lang="ts">
+import type { NavigationMenuItem } from "@nuxt/ui"
+import { computed, onMounted, ref } from "vue"
+
+definePageMeta({ layout: false })
+
+const route = useRoute()
+
+interface TenantRecord {
+  id: string
+  slug: string
+  name: string
+  plan: string
+  customDomain?: string
+  logoUrl?: string
+  metadata?: Record<string, any>
+  createdAt?: number
+  updatedAt?: number
+}
+
+interface CustomDomainRecord {
+  id: string
+  tenantId: string
+  domain: string
+  status: "pending_validation" | "active" | "error" | "deleted"
+  sslStatus: "initializing" | "pending_validation" | "active" | "expired" | "error"
+  cnameTarget?: string
+  cloudflareHostnameId?: string
+  createdAt?: number
+  updatedAt?: number
+}
+
+interface DomainsApiResponse {
+  tenants: TenantRecord[]
+  domains: CustomDomainRecord[]
+  config: {
+    rootDomains: string[]
+    cnameTarget: string
+    provider: string
+    customDomainsEnabled: boolean
+  }
+}
+
+const {
+  data: apiData,
+  status: apiStatus,
+  pending: apiPending,
+  execute: executeLoad,
+} = useFetch<DomainsApiResponse>("/_qarpeo/api/tenants/list", {
+  immediate: false,
+  lazy: true,
+  default: () => ({
+    tenants: [],
+    domains: [],
+    config: {
+      rootDomains: ["qarpeo.dev"],
+      cnameTarget: "cname.qarpeo.com",
+      provider: "cloudflare",
+      customDomainsEnabled: true,
+    },
+  }),
+})
+
+const loading = computed(
+  () => apiPending.value || apiStatus.value === "idle" || apiStatus.value === "pending",
+)
+
+const tenants = computed(() => apiData.value?.tenants || [])
+const domains = computed(() => apiData.value?.domains || [])
+const multitenantConfig = computed(() => apiData.value?.config)
+
+const tenantSearch = ref("")
+const domainSearch = ref("")
+const selectedTenantId = computed(
+  () => (route.query.tenant as string) || tenants.value[0]?.id || null,
+)
+
+// Filtered Tenants
+const filteredTenants = computed(() => {
+  if (!tenantSearch.value.trim()) return tenants.value
+  const q = tenantSearch.value.toLowerCase()
+  return tenants.value.filter(
+    (t) => t.name.toLowerCase().includes(q) || t.slug.toLowerCase().includes(q),
+  )
+})
+
+// Current Selected Tenant
+const currentTenant = computed(
+  () => tenants.value.find((t) => t.id === selectedTenantId.value) || tenants.value[0] || null,
+)
+
+// Domains for Selected Tenant
+const tenantDomains = computed(() => {
+  if (!currentTenant.value) return []
+  let list = domains.value.filter((d) => d.tenantId === currentTenant.value.id)
+  if (domainSearch.value.trim()) {
+    const q = domainSearch.value.toLowerCase()
+    list = list.filter((d) => d.domain.toLowerCase().includes(q))
+  }
+  return list
+})
+
+// Nav items for left panel
+const tenantNavItems = computed<NavigationMenuItem[]>(() =>
+  filteredTenants.value.map((t) => {
+    const count = domains.value.filter((d) => d.tenantId === t.id).length
+    return {
+      label: t.name,
+      icon: "i-lucide-building-2",
+      value: t.id,
+      badge: {
+        label: `${count} ${count === 1 ? "domain" : "domains"}`,
+        size: "sm" as const,
+        color: "neutral" as const,
+        variant: "subtle" as const,
+      },
+      class: "text-xs",
+      to: { query: { ...route.query, tenant: t.id } },
+      active: selectedTenantId.value === t.id,
+    }
+  }),
+)
+
+// Counts
+const activeDomainsCount = computed(
+  () => tenantDomains.value.filter((d) => d.sslStatus === "active").length,
+)
+const pendingDomainsCount = computed(
+  () => tenantDomains.value.filter((d) => d.sslStatus !== "active").length,
+)
+
+function getSslBadgeColor(status?: string): "success" | "warning" | "error" | "neutral" {
+  if (status === "active") return "success"
+  if (status === "pending_validation" || status === "initializing") return "warning"
+  if (status === "error" || status === "expired") return "error"
+  return "neutral"
+}
+
+// ─── Actions: Modals & API Calls ──────────────────────────────────────────────
+const showNewTenantModal = ref(false)
+const newTenantForm = ref({ name: "", slug: "", plan: "pro" })
+const creatingTenant = ref(false)
+const tenantError = ref<string | null>(null)
+
+function openNewTenantModal() {
+  newTenantForm.value = { name: "", slug: "", plan: "pro" }
+  tenantError.value = null
+  showNewTenantModal.value = true
+}
+
+async function createTenant() {
+  if (!newTenantForm.value.name.trim() || !newTenantForm.value.slug.trim()) {
+    tenantError.value = "Name and slug are required."
+    return
+  }
+
+  creatingTenant.value = true
+  tenantError.value = null
+  try {
+    const res = await $fetch<any>("/_qarpeo/api/tenants/create", {
+      method: "POST",
+      body: newTenantForm.value,
+    })
+    if (res?.tenant) {
+      showNewTenantModal.value = false
+      await executeLoad()
+      await navigateTo({ query: { ...route.query, tenant: res.tenant.id } })
+    }
+  } catch (err: any) {
+    tenantError.value = err?.data?.message || err?.message || "Failed to create tenant"
+  } finally {
+    creatingTenant.value = false
+  }
+}
+
+const showAddDomainModal = ref(false)
+const newDomainInput = ref("")
+const addingDomain = ref(false)
+const domainError = ref<string | null>(null)
+
+function openAddDomainModal() {
+  newDomainInput.value = ""
+  domainError.value = null
+  showAddDomainModal.value = true
+}
+
+async function addDomain() {
+  if (!currentTenant.value) return
+  const domain = newDomainInput.value.trim().toLowerCase()
+  if (!domain) {
+    domainError.value = "Domain name is required."
+    return
+  }
+
+  addingDomain.value = true
+  domainError.value = null
+  try {
+    await $fetch<any>("/_qarpeo/api/tenants/domain-add", {
+      method: "POST",
+      body: {
+        tenantId: currentTenant.value.id,
+        domain,
+      },
+    })
+    showAddDomainModal.value = false
+    await executeLoad()
+  } catch (err: any) {
+    domainError.value = err?.data?.message || err?.message || "Failed to register domain"
+  } finally {
+    addingDomain.value = false
+  }
+}
+
+const verifyingDomain = ref<string | null>(null)
+async function verifyDomain(domain: string) {
+  verifyingDomain.value = domain
+  try {
+    await $fetch<any>("/_qarpeo/api/tenants/domain-verify", {
+      method: "POST",
+      body: { domain },
+    })
+    await executeLoad()
+  } catch (err: any) {
+    if (typeof window !== "undefined") {
+      window.alert(`Verification check failed: ${err?.data?.message || err?.message}`)
+    }
+  } finally {
+    verifyingDomain.value = null
+  }
+}
+
+const deletingDomain = ref<string | null>(null)
+async function deleteDomain(domain: string) {
+  if (
+    typeof window !== "undefined" &&
+    !window.confirm(`Are you sure you want to delete custom domain "${domain}"?`)
+  ) {
+    return
+  }
+
+  deletingDomain.value = domain
+  try {
+    await $fetch<any>("/_qarpeo/api/tenants/domain-delete", {
+      method: "POST",
+      body: { domain },
+    })
+    await executeLoad()
+  } catch (err: any) {
+    if (typeof window !== "undefined") {
+      window.alert(`Failed to delete domain: ${err?.data?.message || err?.message}`)
+    }
+  } finally {
+    deletingDomain.value = null
+  }
+}
+
+function copyToClipboard(text: string) {
+  if (typeof navigator !== "undefined") {
+    navigator.clipboard?.writeText(text)
+  }
+}
+
+onMounted(() => {
+  executeLoad()
+})
+</script>
+
+<template>
+  <!-- ── Panel 1: Tenants List ─────────────────────────────────────────── -->
+  <UDashboardPanel id="domains-tenants" :default-size="25" :min-size="20" :max-size="40" resizable>
+    <template #header>
+      <UDashboardNavbar>
+        <template #title>
+          <div class="flex items-center gap-2">
+            <UIcon name="i-lucide-building-2" class="w-4 h-4 text-primary" />
+            <span class="font-bold text-sm text-highlighted">Tenants</span>
+            <UBadge size="xs" color="neutral" variant="subtle">
+              {{ filteredTenants.length }}
+            </UBadge>
+          </div>
+        </template>
+        <template #right>
+          <div class="flex items-center gap-1">
+            <UButton
+              icon="i-lucide-plus"
+              size="xs"
+              color="primary"
+              variant="subtle"
+              title="Create new organization"
+              @click="openNewTenantModal"
+            />
+            <UButton
+              icon="i-lucide-refresh-cw"
+              size="xs"
+              color="neutral"
+              variant="ghost"
+              title="Refresh tenants"
+              :loading="loading"
+              @click="() => executeLoad()"
+            />
+          </div>
+        </template>
+      </UDashboardNavbar>
+      <UDashboardToolbar>
+        <UInput
+          v-model="tenantSearch"
+          icon="i-lucide-search"
+          placeholder="Search organizations…"
+          class="w-full"
+        />
+      </UDashboardToolbar>
+    </template>
+
+    <template #body>
+      <!-- Loading Skeleton -->
+      <div v-if="loading" class="p-3 space-y-2">
+        <div
+          v-for="i in 5"
+          :key="i"
+          class="h-9 rounded bg-muted/60 animate-pulse flex items-center justify-between px-3"
+        >
+          <div class="flex items-center gap-2">
+            <div class="h-4 w-4 rounded bg-muted/40"></div>
+            <div class="h-3 w-28 rounded bg-muted/40"></div>
+          </div>
+          <div class="h-4 w-12 rounded bg-muted/40"></div>
+        </div>
+      </div>
+
+      <template v-else>
+        <UNavigationMenu
+          v-model="selectedTenantId"
+          :items="tenantNavItems"
+          orientation="vertical"
+          variant="pill"
+        />
+        <div v-if="!filteredTenants.length" class="text-xs text-muted p-6 text-center">
+          No tenant organizations found
+        </div>
+      </template>
+    </template>
+  </UDashboardPanel>
+
+  <!-- ── Panel 2: Domains & SSL Management ─────────────────────────────── -->
+  <UDashboardPanel id="domains-content" class="hidden lg:flex flex-1">
+    <template #header>
+      <UDashboardNavbar>
+        <template #title>
+          <div v-if="currentTenant" class="flex items-center gap-2.5">
+            <UIcon name="i-lucide-globe" class="w-4 h-4 text-primary" />
+            <span class="font-bold text-sm text-highlighted">{{ currentTenant.name }}</span>
+            <UBadge size="xs" color="neutral" variant="subtle" class="font-mono">
+              {{ currentTenant.slug }}
+            </UBadge>
+            <UBadge size="xs" color="primary" variant="subtle" class="uppercase text-[9px]">
+              {{ currentTenant.plan }}
+            </UBadge>
+          </div>
+          <span v-else class="text-sm font-semibold text-muted">Select an organization</span>
+        </template>
+
+        <template #right>
+          <div v-if="currentTenant" class="flex items-center gap-2">
+            <UButton
+              label="Manage Zone on qarpeo.com"
+              icon="i-lucide-external-link"
+              trailing
+              size="xs"
+              color="neutral"
+              variant="ghost"
+              to="https://qarpeo.com/dashboard/domains"
+              target="_blank"
+              class="hidden sm:inline-flex"
+            />
+            <UButton
+              label="Add Custom Domain"
+              icon="i-lucide-plus"
+              size="xs"
+              color="primary"
+              @click="openAddDomainModal"
+            />
+          </div>
+        </template>
+      </UDashboardNavbar>
+    </template>
+
+    <template #body>
+      <!-- Loading Skeleton for Main Panel -->
+      <div v-if="loading" class="p-6 space-y-6">
+        <div class="grid grid-cols-1 sm:grid-cols-4 gap-4">
+          <UCard v-for="i in 4" :key="`skel-${i}`">
+            <div class="h-3 w-20 rounded bg-muted animate-pulse mb-2"></div>
+            <div class="h-6 w-16 rounded bg-muted animate-pulse"></div>
+          </UCard>
+        </div>
+        <div class="h-48 rounded bg-muted/40 animate-pulse"></div>
+      </div>
+
+      <div v-else-if="currentTenant" class="flex flex-col h-full p-6 space-y-6 overflow-y-auto">
+        <!-- Top Metrics Cards -->
+        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+          <UCard>
+            <div class="flex items-center justify-between text-xs text-muted mb-1">
+              <span>Total Domains</span>
+              <UIcon name="i-lucide-globe" class="w-4 h-4 text-primary" />
+            </div>
+            <div class="text-2xl font-extrabold text-highlighted">
+              {{ tenantDomains.length }}
+            </div>
+            <div class="text-[11px] text-muted mt-1">Configured hostnames</div>
+          </UCard>
+
+          <UCard>
+            <div class="flex items-center justify-between text-xs text-muted mb-1">
+              <span>Active SSL</span>
+              <UIcon name="i-lucide-shield-check" class="w-4 h-4 text-success" />
+            </div>
+            <div class="text-2xl font-extrabold text-success">
+              {{ activeDomainsCount }}
+            </div>
+            <div class="text-[11px] text-muted mt-1">Let's Encrypt / Google Trust</div>
+          </UCard>
+
+          <UCard>
+            <div class="flex items-center justify-between text-xs text-muted mb-1">
+              <span>Pending DNS / SSL</span>
+              <UIcon name="i-lucide-clock" class="w-4 h-4 text-warning" />
+            </div>
+            <div class="text-2xl font-extrabold text-warning">
+              {{ pendingDomainsCount }}
+            </div>
+            <div class="text-[11px] text-muted mt-1">Awaiting DNS propagation</div>
+          </UCard>
+
+          <UCard>
+            <div class="flex items-center justify-between text-xs text-muted mb-1">
+              <span>Primary Subdomain</span>
+              <UIcon name="i-lucide-link" class="w-4 h-4 text-primary" />
+            </div>
+            <div class="text-xs font-mono font-bold text-primary truncate mt-1">
+              {{ currentTenant.slug }}.{{ multitenantConfig?.rootDomains?.[0] || "qarpeo.dev" }}
+            </div>
+            <div class="text-[11px] text-muted mt-2">Zero-config edge routing</div>
+          </UCard>
+        </div>
+
+        <!-- Custom Domains List Card -->
+        <UCard :ui="{ body: 'p-0 overflow-hidden' }">
+          <template #header>
+            <div class="flex items-center justify-between flex-wrap gap-2">
+              <div>
+                <h3 class="font-bold text-sm text-highlighted flex items-center gap-2">
+                  <UIcon name="i-lucide-shield" class="w-4 h-4 text-primary" />
+                  Custom Hostnames (Cloudflare for SaaS)
+                </h3>
+                <p class="text-xs text-muted mt-0.5">
+                  Point your customer's DNS CNAME record to
+                  <code class="font-mono text-primary font-bold">{{
+                    multitenantConfig?.cnameTarget || "cname.qarpeo.com"
+                  }}</code>
+                </p>
+              </div>
+
+              <div class="flex items-center gap-2">
+                <UInput
+                  v-model="domainSearch"
+                  icon="i-lucide-search"
+                  placeholder="Filter domains…"
+                  size="xs"
+                  class="w-48"
+                />
+              </div>
+            </div>
+          </template>
+
+          <div class="overflow-x-auto">
+            <table class="w-full text-left text-xs">
+              <thead>
+                <tr class="border-b border-default bg-muted/40 text-muted font-mono">
+                  <th class="py-2.5 px-4 font-semibold">Hostname</th>
+                  <th class="py-2.5 px-4 font-semibold">SSL Status</th>
+                  <th class="py-2.5 px-4 font-semibold">CNAME Target</th>
+                  <th class="py-2.5 px-4 font-semibold text-right">Actions</th>
+                </tr>
+              </thead>
+              <tbody class="divide-y divide-default font-mono">
+                <tr
+                  v-for="d in tenantDomains"
+                  :key="d.id"
+                  class="hover:bg-elevated/50 transition-colors group"
+                >
+                  <td class="py-3 px-4 font-bold text-highlighted">
+                    <div class="flex items-center gap-2">
+                      <span>{{ d.domain }}</span>
+                      <a
+                        :href="`https://${d.domain}`"
+                        target="_blank"
+                        rel="noopener"
+                        class="text-muted hover:text-primary transition-colors"
+                        title="Open domain"
+                      >
+                        <UIcon name="i-lucide-external-link" class="w-3.5 h-3.5" />
+                      </a>
+                    </div>
+                  </td>
+                  <td class="py-3 px-4">
+                    <UBadge
+                      size="xs"
+                      :color="getSslBadgeColor(d.sslStatus)"
+                      variant="subtle"
+                      class="uppercase text-[9px] font-semibold"
+                    >
+                      <UIcon
+                        :name="
+                          d.sslStatus === 'active'
+                            ? 'i-lucide-check-circle'
+                            : 'i-lucide-alert-circle'
+                        "
+                        class="w-3 h-3 mr-1"
+                      />
+                      {{ d.sslStatus }}
+                    </UBadge>
+                  </td>
+                  <td class="py-3 px-4 text-muted flex items-center gap-2">
+                    <span class="font-mono text-xs text-default">{{
+                      d.cnameTarget || multitenantConfig?.cnameTarget || "cname.qarpeo.com"
+                    }}</span>
+                    <UButton
+                      icon="i-lucide-copy"
+                      color="neutral"
+                      variant="ghost"
+                      size="xs"
+                      title="Copy CNAME target"
+                      @click="
+                        copyToClipboard(
+                          d.cnameTarget || multitenantConfig?.cnameTarget || 'cname.qarpeo.com',
+                        )
+                      "
+                    />
+                  </td>
+                  <td class="py-3 px-4 text-right">
+                    <div class="flex items-center justify-end gap-1.5">
+                      <UButton
+                        label="Verify"
+                        icon="i-lucide-refresh-cw"
+                        size="xs"
+                        color="neutral"
+                        variant="subtle"
+                        title="Check DNS propagation & SSL certificate"
+                        :loading="verifyingDomain === d.domain"
+                        @click="verifyDomain(d.domain)"
+                      />
+                      <UButton
+                        icon="i-lucide-trash"
+                        size="xs"
+                        color="neutral"
+                        variant="ghost"
+                        class="hover:text-error"
+                        title="Remove domain"
+                        :loading="deletingDomain === d.domain"
+                        @click="deleteDomain(d.domain)"
+                      />
+                    </div>
+                  </td>
+                </tr>
+
+                <tr v-if="!tenantDomains.length">
+                  <td colspan="4" class="text-center py-12 text-muted text-xs font-sans">
+                    <UIcon name="i-lucide-globe" class="w-8 h-8 opacity-40 mx-auto mb-2" />
+                    No custom domains registered for {{ currentTenant.name }}.
+                    <div class="mt-2">
+                      <UButton
+                        label="Add Custom Domain"
+                        icon="i-lucide-plus"
+                        size="xs"
+                        color="primary"
+                        variant="subtle"
+                        @click="openAddDomainModal"
+                      />
+                    </div>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </UCard>
+
+        <!-- DNS Configuration Setup Guide Card -->
+        <UCard>
+          <template #header>
+            <div class="flex items-center gap-2">
+              <UIcon name="i-lucide-info" class="w-4 h-4 text-primary" />
+              <span class="font-bold text-sm text-highlighted">DNS Configuration Guide</span>
+            </div>
+          </template>
+
+          <div class="text-xs text-muted space-y-3">
+            <p>
+              To route custom domains to your multi-tenant application, your customers must
+              configure a DNS record with their domain registrar:
+            </p>
+
+            <div
+              class="bg-muted/40 p-3 rounded-lg border border-default font-mono text-xs space-y-2"
+            >
+              <div
+                class="grid grid-cols-3 gap-2 font-bold text-highlighted pb-1 border-b border-default"
+              >
+                <div>Type</div>
+                <div>Name / Host</div>
+                <div>Target / Value</div>
+              </div>
+              <div class="grid grid-cols-3 gap-2 text-default">
+                <div class="text-primary font-bold">CNAME</div>
+                <div>app (or @ for apex)</div>
+                <div class="flex items-center gap-1.5 font-bold">
+                  {{ multitenantConfig?.cnameTarget || "cname.qarpeo.com" }}
+                  <UButton
+                    icon="i-lucide-copy"
+                    color="neutral"
+                    variant="ghost"
+                    size="xs"
+                    title="Copy Target"
+                    @click="copyToClipboard(multitenantConfig?.cnameTarget || 'cname.qarpeo.com')"
+                  />
+                </div>
+              </div>
+            </div>
+
+            <p class="text-[11px] text-muted">
+              Once configured, Cloudflare for SaaS will automatically issue and renew a free TLS/SSL
+              certificate (via Let's Encrypt or Google Trust Services), providing automatic HTTPS at
+              the edge.
+            </p>
+          </div>
+        </UCard>
+      </div>
+
+      <div
+        v-else
+        class="flex-1 flex flex-col items-center justify-center text-muted text-xs p-12 text-center"
+      >
+        <UIcon name="i-lucide-building-2" class="w-8 h-8 mb-2 opacity-50 text-muted" />
+        Select an organization from the list to manage its custom domains.
+      </div>
+    </template>
+  </UDashboardPanel>
+
+  <!-- ── Modal: Create Tenant ──────────────────────────────────────────── -->
+  <UModal
+    v-model:open="showNewTenantModal"
+    title="Create Organization"
+    description="Add a new tenant organization to the multi-tenant system."
+  >
+    <template #body>
+      <div class="space-y-3">
+        <div
+          v-if="tenantError"
+          class="p-2.5 bg-error/10 border border-error/20 rounded text-error text-xs font-mono"
+        >
+          {{ tenantError }}
+        </div>
+
+        <UFormField label="Organization Name" name="name" required>
+          <UInput
+            v-model="newTenantForm.name"
+            placeholder="e.g. Acme Corporation"
+            class="w-full"
+            @update:model-value="
+              (val) => {
+                if (!newTenantForm.slug) {
+                  newTenantForm.slug = val.toLowerCase().replace(/[^a-z0-9]/g, '-')
+                }
+              }
+            "
+          />
+        </UFormField>
+
+        <UFormField
+          label="Subdomain Slug"
+          name="slug"
+          required
+          help="Used for edge subdomain routing (e.g. acme.qarpeo.dev)"
+        >
+          <UInput
+            v-model="newTenantForm.slug"
+            placeholder="e.g. acme"
+            class="w-full font-mono text-xs"
+          />
+        </UFormField>
+
+        <UFormField label="Subscription Plan" name="plan">
+          <USelect
+            v-model="newTenantForm.plan"
+            :items="[
+              { label: 'Pro Plan', value: 'pro' },
+              { label: 'Enterprise Plan', value: 'enterprise' },
+              { label: 'Free Tier', value: 'free' },
+            ]"
+            class="w-full"
+          />
+        </UFormField>
+      </div>
+    </template>
+
+    <template #footer>
+      <div class="flex justify-end gap-2 w-full">
+        <UButton size="xs" color="neutral" variant="ghost" @click="showNewTenantModal = false">
+          Cancel
+        </UButton>
+        <UButton
+          size="xs"
+          color="primary"
+          icon="i-lucide-plus"
+          :loading="creatingTenant"
+          @click="createTenant"
+        >
+          Create Organization
+        </UButton>
+      </div>
+    </template>
+  </UModal>
+
+  <!-- ── Modal: Add Custom Domain ──────────────────────────────────────── -->
+  <UModal
+    v-model:open="showAddDomainModal"
+    :title="`Add Custom Domain for ${currentTenant?.name}`"
+    description="Connect a fully qualified custom domain name."
+  >
+    <template #body>
+      <div class="space-y-3">
+        <div
+          v-if="domainError"
+          class="p-2.5 bg-error/10 border border-error/20 rounded text-error text-xs font-mono"
+        >
+          {{ domainError }}
+        </div>
+
+        <UFormField
+          label="Domain Name (FQDN)"
+          name="domain"
+          required
+          help="Enter your customer's domain, e.g. portal.acme.com or app.custom.org"
+        >
+          <UInput
+            v-model="newDomainInput"
+            placeholder="e.g. portal.acme.com"
+            class="w-full font-mono text-xs"
+            @keydown.enter.prevent="addDomain"
+          />
+        </UFormField>
+      </div>
+    </template>
+
+    <template #footer>
+      <div class="flex justify-end gap-2 w-full">
+        <UButton size="xs" color="neutral" variant="ghost" @click="showAddDomainModal = false">
+          Cancel
+        </UButton>
+        <UButton
+          size="xs"
+          color="primary"
+          icon="i-lucide-plus"
+          :loading="addingDomain"
+          @click="addDomain"
+        >
+          Add Domain
+        </UButton>
+      </div>
+    </template>
+  </UModal>
+</template>