From 73d453d78a71772af926a61979e27ee7ea806912 Mon Sep 17 00:00:00 2001
From: Samir Boulahtit <samir.boulahtit@wizard.lu>
Date: Thu, 2 Apr 2026 23:14:47 +0200
Subject: [PATCH] feat(hosting): prospect search dropdown on site creation form

- Replace raw ID inputs with a live search dropdown that queries
  /admin/prospecting/prospects?search= as you type
- Shows matching prospects with business name, domain, and ID
- Clicking a prospect auto-fills business name, email, phone
- Selected prospect shown as badge with clear button
- Optional merchant ID field for existing merchants
- Remove stale "Create from Prospect" link on sites list (was just
  a link to the prospects page)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../templates/hosting/admin/site-new.html     | 99 +++++++++++++++----
 .../templates/hosting/admin/sites.html        |  5 -
 2 files changed, 82 insertions(+), 22 deletions(-)

diff --git a/app/modules/hosting/templates/hosting/admin/site-new.html b/app/modules/hosting/templates/hosting/admin/site-new.html
index affc62c9..7949150e 100644
--- a/app/modules/hosting/templates/hosting/admin/site-new.html
+++ b/app/modules/hosting/templates/hosting/admin/site-new.html
@@ -44,25 +44,48 @@
                           class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray dark:bg-gray-700 dark:text-gray-300"></textarea>
             </div>
 
-            <!-- Prospect or Merchant (at least one required) -->
+            <!-- Prospect Search -->
             <div class="pt-4 border-t border-gray-200 dark:border-gray-700">
-                <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
-                    <div>
-                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">
-                            Prospect ID
-                        </label>
-                        <input type="number" x-model.number="form.prospect_id" placeholder="e.g. 2" {# noqa: FE008 #}
-                               class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray dark:bg-gray-700 dark:text-gray-300">
+                <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">
+                    Link to Prospect <span class="text-red-500">*</span>
+                </label>
+                <div class="relative">
+                    <input type="text" x-model="prospectSearch" @input.debounce.300ms="searchProspects()"
+                           @focus="showProspectDropdown = true"
+                           placeholder="Search by domain or business name..."
+                           class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300">
+                    <!-- Selected prospect badge -->
+                    <div x-show="selectedProspect" class="absolute right-2 top-1/2 -translate-y-1/2">
+                        <span class="inline-flex items-center px-2 py-0.5 text-xs font-medium rounded bg-teal-100 text-teal-700 dark:bg-teal-900 dark:text-teal-300">
+                            <span x-text="'#' + form.prospect_id"></span>
+                            <button type="button" @click="clearProspect()" class="ml-1 text-teal-500 hover:text-teal-700">&times;</button>
+                        </span>
                     </div>
-                    <div>
-                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">
-                            Merchant ID
-                        </label>
-                        <input type="number" x-model.number="form.merchant_id" placeholder="e.g. 1" {# noqa: FE008 #}
-                               class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray dark:bg-gray-700 dark:text-gray-300">
+                    <!-- Dropdown -->
+                    <div x-show="showProspectDropdown && prospectResults.length > 0" @click.away="showProspectDropdown = false"
+                         class="absolute z-10 mt-1 w-full bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg shadow-lg max-h-48 overflow-auto">
+                        <template x-for="p in prospectResults" :key="p.id">
+                            <button type="button" @click="selectProspect(p)"
+                                    class="w-full px-3 py-2 text-left text-sm hover:bg-gray-100 dark:hover:bg-gray-600 flex justify-between items-center">
+                                <div>
+                                    <span class="font-medium text-gray-700 dark:text-gray-200" x-text="p.business_name || p.domain_name"></span>
+                                    <span x-show="p.domain_name && p.business_name" class="text-xs text-gray-400 ml-2" x-text="p.domain_name"></span>
+                                </div>
+                                <span class="text-xs text-gray-400" x-text="'#' + p.id"></span>
+                            </button>
+                        </template>
                     </div>
                 </div>
-                <p class="text-xs text-gray-400 mt-1">At least one is required. Prospect ID auto-creates a merchant from prospect data.</p>
+                <p class="text-xs text-gray-400 mt-1">A merchant will be auto-created from the prospect's contact data.</p>
+            </div>
+
+            <!-- Optional: Existing Merchant -->
+            <div>
+                <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">
+                    Or link to existing Merchant ID <span class="text-xs text-gray-400">(optional)</span>
+                </label>
+                <input type="number" x-model.number="form.merchant_id" placeholder="Leave empty to auto-create" {# noqa: FE008 #}
+                       class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:border-purple-400 focus:outline-none dark:bg-gray-700 dark:text-gray-300">
             </div>
         </div>
 
@@ -101,20 +124,62 @@ function hostingSiteNew() {
             contact_phone: '',
             internal_notes: '',
         },
+        // Prospect search
+        prospectSearch: '',
+        prospectResults: [],
+        selectedProspect: null,
+        showProspectDropdown: false,
+
         creating: false,
         errorMsg: '',
+
         get canCreate() {
             return this.form.business_name && (this.form.prospect_id || this.form.merchant_id);
         },
+
+        async searchProspects() {
+            if (this.prospectSearch.length < 2) { this.prospectResults = []; return; }
+            try {
+                var resp = await apiClient.get('/admin/prospecting/prospects?search=' + encodeURIComponent(this.prospectSearch) + '&per_page=10');
+                this.prospectResults = resp.items || [];
+                this.showProspectDropdown = true;
+            } catch (e) {
+                this.prospectResults = [];
+            }
+        },
+
+        selectProspect(prospect) {
+            this.selectedProspect = prospect;
+            this.form.prospect_id = prospect.id;
+            this.prospectSearch = prospect.business_name || prospect.domain_name;
+            this.showProspectDropdown = false;
+            // Auto-fill form from prospect
+            if (!this.form.business_name) {
+                this.form.business_name = prospect.business_name || prospect.domain_name || '';
+            }
+            if (!this.form.contact_email && prospect.primary_email) {
+                this.form.contact_email = prospect.primary_email;
+            }
+            if (!this.form.contact_phone && prospect.primary_phone) {
+                this.form.contact_phone = prospect.primary_phone;
+            }
+        },
+
+        clearProspect() {
+            this.selectedProspect = null;
+            this.form.prospect_id = null;
+            this.prospectSearch = '';
+            this.prospectResults = [];
+        },
+
         async createSite() {
             if (!this.canCreate) {
-                this.errorMsg = 'Business name and at least one of Prospect ID or Merchant ID required';
+                this.errorMsg = 'Business name and a linked prospect or merchant are required';
                 return;
             }
             this.creating = true;
             this.errorMsg = '';
             try {
-                // Clean nulls
                 var payload = {};
                 for (var k in this.form) {
                     if (this.form[k] !== null && this.form[k] !== '') payload[k] = this.form[k];
diff --git a/app/modules/hosting/templates/hosting/admin/sites.html b/app/modules/hosting/templates/hosting/admin/sites.html
index 0606902c..5e14cde3 100644
--- a/app/modules/hosting/templates/hosting/admin/sites.html
+++ b/app/modules/hosting/templates/hosting/admin/sites.html
@@ -40,11 +40,6 @@
                 <option value="cancelled">Cancelled</option>
             </select>
 
-            <a href="/admin/prospecting/prospects"
-               class="inline-flex items-center px-4 py-2 text-sm font-medium leading-5 text-teal-700 dark:text-teal-300 transition-colors duration-150 bg-teal-100 dark:bg-teal-900 border border-transparent rounded-lg hover:bg-teal-200 dark:hover:bg-teal-800 focus:outline-none">
-                <span x-html="$icon('cursor-click', 'w-4 h-4 mr-2')"></span>
-                Create from Prospect
-            </a>
         </div>
     </div>
 </div>