From 802cc6b137e1209b93532a9609cedd3f6b1aa281 Mon Sep 17 00:00:00 2001
From: Samir Boulahtit <samir.boulahtit@wizard.lu>
Date: Fri, 6 Mar 2026 23:11:58 +0100
Subject: [PATCH] refactor(templates): migrate 5 admin pages to shared entity
 selector macros

Remove duplicate Tom Select dark mode CSS (~280 lines) from customers,
orders, store-product-create, marketplace-letzshop, and marketplace-products
pages. Replace inline store select elements and selected badges with
entity_selector() and entity_selected_badge() macros.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../catalog/admin/store-product-create.html   | 46 +------------
 .../templates/customers/admin/customers.html  | 66 +-----------------
 .../admin/marketplace-letzshop.html           | 48 +------------
 .../admin/marketplace-products.html           | 66 +-----------------
 .../orders/templates/orders/admin/orders.html | 69 ++-----------------
 5 files changed, 14 insertions(+), 281 deletions(-)

diff --git a/app/modules/catalog/templates/catalog/admin/store-product-create.html b/app/modules/catalog/templates/catalog/admin/store-product-create.html
index 342ea821..3c0c63bf 100644
--- a/app/modules/catalog/templates/catalog/admin/store-product-create.html
+++ b/app/modules/catalog/templates/catalog/admin/store-product-create.html
@@ -3,6 +3,7 @@
 {% from 'shared/macros/headers.html' import detail_page_header %}
 {% from 'shared/macros/modals.html' import media_picker_modal %}
 {% from 'shared/macros/richtext.html' import quill_css, quill_js, quill_editor %}
+{% from 'shared/macros/inputs.html' import entity_selector %}
 
 {% block title %}Create Store Product{% endblock %}
 
@@ -16,48 +17,6 @@
 {{ quill_js() }}
 {% endblock %}
 
-{% block extra_head %}
-<!-- Tom Select CSS with local fallback -->
-<link
-    rel="stylesheet"
-    href="https://cdn.jsdelivr.net/npm/tom-select@2.4.1/dist/css/tom-select.default.min.css"
-    onerror="this.onerror=null; this.href='{{ url_for('static', path='shared/css/store/tom-select.default.min.css') }}';"
-/>
-<style>
-    /* Tom Select dark mode overrides */
-    .dark .ts-wrapper .ts-control {
-        background-color: rgb(55 65 81);
-        border-color: rgb(75 85 99);
-        color: rgb(209 213 219);
-    }
-    .dark .ts-wrapper .ts-control input {
-        color: rgb(209 213 219);
-    }
-    .dark .ts-wrapper .ts-control input::placeholder {
-        color: rgb(156 163 175);
-    }
-    .dark .ts-dropdown {
-        background-color: rgb(55 65 81);
-        border-color: rgb(75 85 99);
-        color: rgb(209 213 219);
-    }
-    .dark .ts-dropdown .option {
-        color: rgb(209 213 219);
-    }
-    .dark .ts-dropdown .option.active {
-        background-color: rgb(147 51 234);
-        color: white;
-    }
-    .dark .ts-dropdown .option:hover {
-        background-color: rgb(75 85 99);
-    }
-    .dark .ts-wrapper.focus .ts-control {
-        border-color: rgb(147 51 234);
-        box-shadow: 0 0 0 1px rgb(147 51 234);
-    }
-</style>
-{% endblock %}
-
 {% block content %}
 {% call detail_page_header("'Create Store Product'", '/admin/store-products') %}
     <span>Add a new product to a store's catalog</span>
@@ -72,8 +31,7 @@
         </h3>
         <div class="max-w-md">
             <label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-1">Select Store <span class="text-red-500">*</span></label>
-            <select id="store-select" x-ref="storeSelect" placeholder="Search store...">
-            </select>
+            {{ entity_selector(ref_name='storeSelect', id='store-select', placeholder='Search store...', width='w-full') }}
             <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">The store whose catalog this product will be added to</p>
         </div>
     </div>
diff --git a/app/modules/customers/templates/customers/admin/customers.html b/app/modules/customers/templates/customers/admin/customers.html
index 6b643fce..aff73f51 100644
--- a/app/modules/customers/templates/customers/admin/customers.html
+++ b/app/modules/customers/templates/customers/admin/customers.html
@@ -5,84 +5,24 @@
 {% from 'shared/macros/tables.html' import table_wrapper, table_header %}
 {% from 'shared/macros/pagination.html' import pagination %}
 {% from 'shared/macros/modals.html' import confirm_modal_dynamic %}
+{% from 'shared/macros/inputs.html' import entity_selector, entity_selected_badge %}
 
 {% block title %}Customers{% endblock %}
 
 {% block alpine_data %}adminCustomers(){% endblock %}
 
-{% block extra_head %}
-<!-- Tom Select CSS with local fallback -->
-<link
-    rel="stylesheet"
-    href="https://cdn.jsdelivr.net/npm/tom-select@2.4.1/dist/css/tom-select.default.min.css"
-    onerror="this.onerror=null; this.href='{{ url_for('static', path='shared/css/store/tom-select.default.min.css') }}';"
-/>
-<style>
-    /* Tom Select dark mode overrides */
-    .dark .ts-wrapper .ts-control {
-        background-color: rgb(55 65 81);
-        border-color: rgb(75 85 99);
-        color: rgb(209 213 219);
-    }
-    .dark .ts-wrapper .ts-control input {
-        color: rgb(209 213 219);
-    }
-    .dark .ts-wrapper .ts-control input::placeholder {
-        color: rgb(156 163 175);
-    }
-    .dark .ts-dropdown {
-        background-color: rgb(55 65 81);
-        border-color: rgb(75 85 99);
-        color: rgb(209 213 219);
-    }
-    .dark .ts-dropdown .option {
-        color: rgb(209 213 219);
-    }
-    .dark .ts-dropdown .option.active {
-        background-color: rgb(147 51 234);
-        color: white;
-    }
-    .dark .ts-dropdown .option:hover {
-        background-color: rgb(75 85 99);
-    }
-    .dark .ts-wrapper.focus .ts-control {
-        border-color: rgb(147 51 234);
-        box-shadow: 0 0 0 1px rgb(147 51 234);
-    }
-</style>
-{% endblock %}
-
 {% block content %}
 <!-- Page Header with Store Selector -->
 {% call page_header_flex(title='Customer Management', subtitle='Manage customers across all stores') %}
     <div class="flex items-center gap-4">
         <!-- Store Autocomplete (Tom Select) -->
-        <div class="w-80">
-            <select id="store-select" x-ref="storeSelect" placeholder="Filter by store...">
-            </select>
-        </div>
+        {{ entity_selector(ref_name='storeSelect', id='store-select', placeholder='Filter by store...') }}
         {{ refresh_button(loading_var='loading', onclick='resetAndLoad()', variant='secondary') }}
     </div>
 {% endcall %}
 
 <!-- Selected Store Info -->
-<div x-show="selectedStore" x-transition class="mb-6 p-3 bg-purple-50 dark:bg-purple-900/20 rounded-lg border border-purple-200 dark:border-purple-800">
-    <div class="flex items-center justify-between">
-        <div class="flex items-center gap-3">
-            <div class="w-8 h-8 rounded-full bg-purple-100 dark:bg-purple-900 flex items-center justify-center">
-                <span class="text-sm font-semibold text-purple-600 dark:text-purple-300" x-text="selectedStore?.name?.charAt(0).toUpperCase()"></span>
-            </div>
-            <div>
-                <span class="font-medium text-purple-800 dark:text-purple-200" x-text="selectedStore?.name"></span>
-                <span class="ml-2 text-xs text-purple-600 dark:text-purple-400 font-mono" x-text="selectedStore?.store_code"></span>
-            </div>
-        </div>
-        <button @click="clearStoreFilter()" class="text-purple-600 dark:text-purple-400 hover:text-purple-800 dark:hover:text-purple-200 text-sm flex items-center gap-1">
-            <span x-html="$icon('x', 'w-4 h-4')"></span>
-            Clear filter
-        </button>
-    </div>
-</div>
+{{ entity_selected_badge(entity_var='selectedStore', clear_fn='clearStoreFilter()', code_field='store_code', color='purple') }}
 
 {{ loading_state('Loading customers...') }}
 
diff --git a/app/modules/marketplace/templates/marketplace/admin/marketplace-letzshop.html b/app/modules/marketplace/templates/marketplace/admin/marketplace-letzshop.html
index ec5b9d16..8fa6451c 100644
--- a/app/modules/marketplace/templates/marketplace/admin/marketplace-letzshop.html
+++ b/app/modules/marketplace/templates/marketplace/admin/marketplace-letzshop.html
@@ -5,61 +5,17 @@
 {% from 'shared/macros/headers.html' import page_header_flex, refresh_button %}
 {# Import modals macro - custom modals below use inline definition for specialized forms #}
 {% from 'shared/macros/modals.html' import modal_simple, confirm_modal %}
+{% from 'shared/macros/inputs.html' import entity_selector %}
 
 {% block title %}Letzshop Management{% endblock %}
 {% block alpine_data %}adminMarketplaceLetzshop(){% endblock %}
 
-{% block extra_head %}
-<!-- Tom Select CSS with local fallback -->
-<link
-    rel="stylesheet"
-    href="https://cdn.jsdelivr.net/npm/tom-select@2.4.1/dist/css/tom-select.default.min.css"
-    onerror="this.onerror=null; this.href='{{ url_for('static', path='shared/css/store/tom-select.default.min.css') }}';"
-/>
-<style>
-    /* Tom Select dark mode overrides */
-    .dark .ts-wrapper .ts-control {
-        background-color: rgb(55 65 81);
-        border-color: rgb(75 85 99);
-        color: rgb(209 213 219);
-    }
-    .dark .ts-wrapper .ts-control input {
-        color: rgb(209 213 219);
-    }
-    .dark .ts-wrapper .ts-control input::placeholder {
-        color: rgb(156 163 175);
-    }
-    .dark .ts-dropdown {
-        background-color: rgb(55 65 81);
-        border-color: rgb(75 85 99);
-        color: rgb(209 213 219);
-    }
-    .dark .ts-dropdown .option {
-        color: rgb(209 213 219);
-    }
-    .dark .ts-dropdown .option.active {
-        background-color: rgb(147 51 234);
-        color: white;
-    }
-    .dark .ts-dropdown .option:hover {
-        background-color: rgb(75 85 99);
-    }
-    .dark .ts-wrapper.focus .ts-control {
-        border-color: rgb(147 51 234);
-        box-shadow: 0 0 0 1px rgb(147 51 234);
-    }
-</style>
-{% endblock %}
-
 {% block content %}
 <!-- Page Header with Store Selector -->
 {% call page_header_flex(title='Letzshop Management', subtitle='Manage Letzshop integration for stores') %}
     <div class="flex items-center gap-4">
         <!-- Store Autocomplete (Tom Select) -->
-        <div class="w-80">
-            <select id="store-select" x-ref="storeSelect" placeholder="Search store...">
-            </select>
-        </div>
+        {{ entity_selector(ref_name='storeSelect', id='store-select', placeholder='Search store...') }}
         {{ refresh_button(loading_var='loading', onclick='refreshData()', variant='secondary') }}
     </div>
 {% endcall %}
diff --git a/app/modules/marketplace/templates/marketplace/admin/marketplace-products.html b/app/modules/marketplace/templates/marketplace/admin/marketplace-products.html
index c6b38687..505056e9 100644
--- a/app/modules/marketplace/templates/marketplace/admin/marketplace-products.html
+++ b/app/modules/marketplace/templates/marketplace/admin/marketplace-products.html
@@ -5,84 +5,24 @@
 {% from 'shared/macros/alerts.html' import loading_state, error_state %}
 {% from 'shared/macros/tables.html' import table_wrapper, table_header %}
 {% from 'shared/macros/modals.html' import modal_simple %}
+{% from 'shared/macros/inputs.html' import entity_selector, entity_selected_badge %}
 
 {% block title %}Marketplace Products{% endblock %}
 
 {% block alpine_data %}adminMarketplaceProducts(){% endblock %}
 
-{% block extra_head %}
-<!-- Tom Select CSS with local fallback -->
-<link
-    rel="stylesheet"
-    href="https://cdn.jsdelivr.net/npm/tom-select@2.4.1/dist/css/tom-select.default.min.css"
-    onerror="this.onerror=null; this.href='{{ url_for('static', path='shared/css/store/tom-select.default.min.css') }}';"
-/>
-<style>
-    /* Tom Select dark mode overrides */
-    .dark .ts-wrapper .ts-control {
-        background-color: rgb(55 65 81);
-        border-color: rgb(75 85 99);
-        color: rgb(209 213 219);
-    }
-    .dark .ts-wrapper .ts-control input {
-        color: rgb(209 213 219);
-    }
-    .dark .ts-wrapper .ts-control input::placeholder {
-        color: rgb(156 163 175);
-    }
-    .dark .ts-dropdown {
-        background-color: rgb(55 65 81);
-        border-color: rgb(75 85 99);
-        color: rgb(209 213 219);
-    }
-    .dark .ts-dropdown .option {
-        color: rgb(209 213 219);
-    }
-    .dark .ts-dropdown .option.active {
-        background-color: rgb(147 51 234);
-        color: white;
-    }
-    .dark .ts-dropdown .option:hover {
-        background-color: rgb(75 85 99);
-    }
-    .dark .ts-wrapper.focus .ts-control {
-        border-color: rgb(147 51 234);
-        box-shadow: 0 0 0 1px rgb(147 51 234);
-    }
-</style>
-{% endblock %}
-
 {% block content %}
 <!-- Page Header with Store Selector -->
 {% call page_header_flex(title='Marketplace Products', subtitle='Master product repository - Browse all imported products from external sources') %}
     <div class="flex items-center gap-4">
         <!-- Store Autocomplete (Tom Select) -->
-        <div class="w-80">
-            <select id="store-select" x-ref="storeSelect" placeholder="Filter by store...">
-            </select>
-        </div>
+        {{ entity_selector(ref_name='storeSelect', id='store-select', placeholder='Filter by store...') }}
         {{ refresh_button(loading_var='loading', onclick='refresh()', variant='secondary') }}
     </div>
 {% endcall %}
 
 <!-- Selected Store Info -->
-<div x-show="selectedStore" x-transition class="mb-6 p-3 bg-purple-50 dark:bg-purple-900/20 rounded-lg border border-purple-200 dark:border-purple-800">
-    <div class="flex items-center justify-between">
-        <div class="flex items-center gap-3">
-            <div class="w-8 h-8 rounded-full bg-purple-100 dark:bg-purple-900 flex items-center justify-center">
-                <span class="text-sm font-semibold text-purple-600 dark:text-purple-300" x-text="selectedStore?.name?.charAt(0).toUpperCase()"></span>
-            </div>
-            <div>
-                <span class="font-medium text-purple-800 dark:text-purple-200" x-text="selectedStore?.name"></span>
-                <span class="ml-2 text-xs text-purple-600 dark:text-purple-400 font-mono" x-text="selectedStore?.store_code"></span>
-            </div>
-        </div>
-        <button @click="clearStoreFilter()" class="text-purple-600 dark:text-purple-400 hover:text-purple-800 dark:hover:text-purple-200 text-sm flex items-center gap-1">
-            <span x-html="$icon('x', 'w-4 h-4')"></span>
-            Clear filter
-        </button>
-    </div>
-</div>
+{{ entity_selected_badge(entity_var='selectedStore', clear_fn='clearStoreFilter()', code_field='store_code', color='purple') }}
 
 {{ loading_state('Loading products...') }}
 
diff --git a/app/modules/orders/templates/orders/admin/orders.html b/app/modules/orders/templates/orders/admin/orders.html
index 854150a7..7816d87a 100644
--- a/app/modules/orders/templates/orders/admin/orders.html
+++ b/app/modules/orders/templates/orders/admin/orders.html
@@ -5,85 +5,24 @@
 {% from 'shared/macros/alerts.html' import loading_state, error_state %}
 {% from 'shared/macros/tables.html' import table_wrapper %}
 {% from 'shared/macros/modals.html' import modal_simple %}
-{% from 'shared/macros/inputs.html' import store_selector %}
+{% from 'shared/macros/inputs.html' import entity_selector, entity_selected_badge %}
 
 {% block title %}Orders{% endblock %}
 
 {% block alpine_data %}adminOrders(){% endblock %}
 
-{% block extra_head %}
-<!-- Tom Select CSS with local fallback -->
-<link
-    rel="stylesheet"
-    href="https://cdn.jsdelivr.net/npm/tom-select@2.4.1/dist/css/tom-select.default.min.css"
-    onerror="this.onerror=null; this.href='{{ url_for('static', path='shared/css/store/tom-select.default.min.css') }}';"
-/>
-<style>
-    /* Tom Select dark mode overrides */
-    .dark .ts-wrapper .ts-control {
-        background-color: rgb(55 65 81);
-        border-color: rgb(75 85 99);
-        color: rgb(209 213 219);
-    }
-    .dark .ts-wrapper .ts-control input {
-        color: rgb(209 213 219);
-    }
-    .dark .ts-wrapper .ts-control input::placeholder {
-        color: rgb(156 163 175);
-    }
-    .dark .ts-dropdown {
-        background-color: rgb(55 65 81);
-        border-color: rgb(75 85 99);
-        color: rgb(209 213 219);
-    }
-    .dark .ts-dropdown .option {
-        color: rgb(209 213 219);
-    }
-    .dark .ts-dropdown .option.active {
-        background-color: rgb(147 51 234);
-        color: white;
-    }
-    .dark .ts-dropdown .option:hover {
-        background-color: rgb(75 85 99);
-    }
-    .dark .ts-wrapper.focus .ts-control {
-        border-color: rgb(147 51 234);
-        box-shadow: 0 0 0 1px rgb(147 51 234);
-    }
-</style>
-{% endblock %}
-
 {% block content %}
 <!-- Page Header with Store Selector -->
 {% call page_header_flex(title='Orders', subtitle='Manage orders across all stores') %}
     <div class="flex items-center gap-4">
         <!-- Store Autocomplete (Tom Select) -->
-        <div class="w-80">
-            <select id="store-select" x-ref="storeSelect" placeholder="Search store...">
-            </select>
-        </div>
+        {{ entity_selector(ref_name='storeSelect', id='store-select', placeholder='Search store...') }}
         {{ refresh_button(loading_var='loading', onclick='refresh()', variant='secondary') }}
     </div>
 {% endcall %}
 
-<!-- Selected Store Info (optional display) -->
-<div x-show="selectedStore" x-transition class="mb-6 p-3 bg-purple-50 dark:bg-purple-900/20 rounded-lg border border-purple-200 dark:border-purple-800">
-    <div class="flex items-center justify-between">
-        <div class="flex items-center gap-3">
-            <div class="w-8 h-8 rounded-full bg-purple-100 dark:bg-purple-900 flex items-center justify-center">
-                <span class="text-sm font-semibold text-purple-600 dark:text-purple-300" x-text="selectedStore?.name?.charAt(0).toUpperCase()"></span>
-            </div>
-            <div>
-                <span class="font-medium text-purple-800 dark:text-purple-200" x-text="selectedStore?.name"></span>
-                <span class="ml-2 text-xs text-purple-600 dark:text-purple-400 font-mono" x-text="selectedStore?.store_code"></span>
-            </div>
-        </div>
-        <button @click="clearStoreFilter()" class="text-purple-600 dark:text-purple-400 hover:text-purple-800 dark:hover:text-purple-200 text-sm flex items-center gap-1">
-            <span x-html="$icon('x', 'w-4 h-4')"></span>
-            Clear filter
-        </button>
-    </div>
-</div>
+<!-- Selected Store Info -->
+{{ entity_selected_badge(entity_var='selectedStore', clear_fn='clearStoreFilter()', code_field='store_code', color='purple') }}
 
 {{ loading_state('Loading orders...') }}