Add Arvan/Cloudflare DNS choice on domain edit and restyle empty add boxes.

Domain save can upsert tenant records on either provider, overflow menus stay opaque, and empty-state add controls use a dashed outline.

Co-authored-by: Cursor <cursoragent@cursor.com>

apps/super-admin/src/pages/BusinessesPage.tsx

@@ -31,6 +31,7 @@ import type {
   PurgeBusinessDataResponse,
   PurgeEntityResult,
 } from '../types/business'
+import type { ParkedDnsProvider } from '../types/domain'
 import type { BusinessCategory } from '../types/category'
 import type { ListBusinessesParams } from '../services/businessService'
 import { ApiError, isAbortError } from '../lib/api'
@@ -58,6 +59,7 @@ import {
 } from '../services/aiPromptService'
 import type { AiPromptTemplate, DomainAiPrompt } from '../types/aiPrompt'
 import { Modal } from '../components/Modal'
+import { DnsProviderSwitch } from '../components/DnsProviderSwitch'
 import { PrimaryColorSwatchControl } from '../components/PrimaryColorSwatchControl'
 import { useToast } from '../context/ToastContext'
 import {
@@ -346,6 +348,7 @@ export function BusinessesPage() {
   const [domainHost, setDomainHost] = useState('')
   const [domainGitRepoUrl, setDomainGitRepoUrl] = useState('')
   const [domainUpdateDns, setDomainUpdateDns] = useState(false)
+  const [domainDnsProvider, setDomainDnsProvider] = useState<ParkedDnsProvider>('arvan')
   const [domainSubmitting, setDomainSubmitting] = useState(false)
   const [domainError, setDomainError] = useState('')
 
@@ -933,6 +936,7 @@ export function BusinessesPage() {
     setDomainHost(b.domain ?? '')
     setDomainGitRepoUrl(b.gitRepoUrl ?? '')
     setDomainUpdateDns(!b.domainId)
+    setDomainDnsProvider('arvan')
     setDomainError('')
     setDomainOpen(true)
   }
@@ -1126,6 +1130,7 @@ export function BusinessesPage() {
     setDomainHost('')
     setDomainGitRepoUrl('')
     setDomainUpdateDns(false)
+    setDomainDnsProvider('arvan')
     setDomainError('')
   }
 
@@ -1144,6 +1149,7 @@ export function BusinessesPage() {
         const updated = (await updateBusinessDomain(businessId, domainId, {
           host,
           updateDns: domainUpdateDns,
+          ...(domainUpdateDns ? { dnsProvider: domainDnsProvider } : {}),
           ...(gitRepoUrl ? { gitRepoUrl } : {}),
         })) as {
           id: number
@@ -1193,6 +1199,7 @@ export function BusinessesPage() {
           host,
           isPrimary: true,
           updateDns: domainUpdateDns,
+          ...(domainUpdateDns ? { dnsProvider: domainDnsProvider } : {}),
           ...(gitRepoUrl ? { gitRepoUrl } : {}),
         })) as {
           id: number
@@ -1248,6 +1255,7 @@ export function BusinessesPage() {
       setDomainHost('')
       setDomainGitRepoUrl('')
       setDomainUpdateDns(false)
+      setDomainDnsProvider('arvan')
       setDomainError('')
     } catch (err) {
       if (submitId !== domainSubmitGenRef.current) return
@@ -1998,7 +2006,7 @@ export function BusinessesPage() {
           <p className={styles.helperText} role="status">
             {domainGitRepoUrl.trim()
               ? 'Saving domain and setting up storefront on the websites server…'
-              : 'Saving domain and updating Arvan DNS…'}
+              : `Saving domain and updating ${domainDnsProvider === 'cloudflare' ? 'Cloudflare' : 'Arvan'} DNS…`}
           </p>
         ) : null}
         <div className={styles.field}>
@@ -2029,19 +2037,27 @@ export function BusinessesPage() {
           </p>
         </div>
         <div style={{ height: 12 }} />
-        <label className={styles.entityCheck} htmlFor="domain-update-dns">
-          <input
-            id="domain-update-dns"
-            type="checkbox"
-            checked={domainUpdateDns}
-            onChange={(e) => setDomainUpdateDns(e.target.checked)}
-            disabled={domainSubmitting}
+        <div className={styles.dnsUpdateRow}>
+          <label className={styles.entityCheck} htmlFor="domain-update-dns">
+            <input
+              id="domain-update-dns"
+              type="checkbox"
+              checked={domainUpdateDns}
+              onChange={(e) => setDomainUpdateDns(e.target.checked)}
+              disabled={domainSubmitting}
+            />
+            <span>Update DNS records</span>
+          </label>
+          <DnsProviderSwitch
+            value={domainDnsProvider}
+            onChange={setDomainDnsProvider}
+            disabled={domainSubmitting || !domainUpdateDns}
           />
-          <span>Update DNS records</span>
-        </label>
+        </div>
         <p className={styles.subText} style={{ marginTop: 6 }}>
-          When checked, upserts Arvan records: @ ANAME → ns.meshkee.com, plus www,
-          business, customer, and api CNAMEs.
+          {domainDnsProvider === 'cloudflare'
+            ? 'When checked, upserts Cloudflare records (DNS-only): @ CNAME → ns.meshkee.com, plus www, business, customer, and api CNAMEs.'
+            : 'When checked, upserts Arvan records: @ ANAME → ns.meshkee.com, plus www, business, customer, and api CNAMEs.'}
         </p>
         <div style={{ height: 12 }} />
         <div className={styles.actionsRow}>