feat(admin): separate platform CRUD from CMS, add entity selector macro

- Move platforms menu from CMS to Platform Admin section with create/edit
- Add platform create page, API endpoint, and service method
- Remove CMS-specific content from platform list and detail pages
- Create shared entity_selector + entity_selected_badge Jinja macros
- Create entity-selector.js generalizing store-selector.js for any entity
- Add Tom Select merchant filter to stores page with localStorage persistence
- Migrate store-products page to use shared macros (remove 53 lines of duped CSS)
- Fix broken icons: puzzle→puzzle-piece, building-storefront→store, language→translate, server→cube

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

app/modules/tenancy/definition.py

@@ -164,20 +164,12 @@ tenancy_module = ModuleDefinition(
                         order=20,
                         is_mandatory=True,
                     ),
-                ],
-            ),
-            MenuSectionDefinition(
-                id="contentMgmt",
-                label_key="tenancy.menu.content_management",
-                icon="globe-alt",
-                order=70,
-                items=[
                     MenuItemDefinition(
                         id="platforms",
                         label_key="tenancy.menu.platforms",
                         icon="globe-alt",
                         route="/admin/platforms",
-                        order=10,
+                        order=5,
                     ),
                 ],
             ),

app/modules/tenancy/routes/api/admin_platforms.py

@@ -91,6 +91,21 @@ class PlatformUpdateRequest(BaseModel):
     settings: dict[str, Any] | None = None
 
 
+class PlatformCreateRequest(BaseModel):
+    """Request schema for creating a platform."""
+
+    code: str = Field(..., min_length=2, max_length=50, pattern=r"^[a-z][a-z0-9_-]*$")
+    name: str = Field(..., min_length=1, max_length=100)
+    description: str | None = None
+    description_translations: dict[str, str] | None = None
+    domain: str | None = None
+    path_prefix: str | None = None
+    default_language: str = "fr"
+    supported_languages: list[str] = Field(default_factory=lambda: ["fr", "de", "en", "lb"])
+    is_active: bool = True
+    is_public: bool = True
+
+
 class PlatformStatsResponse(BaseModel):
     """Platform statistics response."""
 
@@ -162,6 +177,26 @@ async def list_platforms(
     return PlatformListResponse(platforms=result, total=len(result))
 
 
+@admin_platforms_router.post("", response_model=PlatformResponse, status_code=201)
+async def create_platform(
+    create_data: PlatformCreateRequest,
+    db: Session = Depends(get_db),
+    current_user: UserContext = Depends(get_current_admin_from_cookie_or_header),
+):
+    """
+    Create a new platform.
+
+    Creates a new platform with the provided configuration.
+    """
+    data = create_data.model_dump()
+    platform = platform_service.create_platform(db, data)
+    db.commit()
+    db.refresh(platform)
+
+    logger.info(f"[PLATFORMS] Created platform: {platform.code}")
+    return _build_platform_response(db, platform)
+
+
 @admin_platforms_router.get("/{code}", response_model=PlatformResponse)
 async def get_platform(
     code: str = Path(..., description="Platform code (oms, loyalty, etc.)"),

app/modules/tenancy/routes/pages/admin.py

@@ -491,6 +491,24 @@ async def admin_platforms_list(
     )
 
 
+@router.get(
+    "/platforms/create", response_class=HTMLResponse, include_in_schema=False
+)
+async def admin_platform_create(
+    request: Request,
+    current_user: User = Depends(require_menu_access("platforms", FrontendType.ADMIN)),
+    db: Session = Depends(get_db),
+):
+    """
+    Render platform creation form.
+    Allows creating a new platform with basic settings.
+    """
+    return templates.TemplateResponse(
+        "tenancy/admin/platform-create.html",
+        get_admin_context(request, db, current_user),
+    )
+
+
 @router.get(
     "/platforms/{platform_code}", response_class=HTMLResponse, include_in_schema=False
 )

app/modules/tenancy/services/platform_service.py

@@ -500,6 +500,29 @@ class PlatformService:
 
         return None
 
+    @staticmethod
+    def create_platform(db: Session, data: dict) -> Platform:
+        """
+        Create a new platform.
+
+        Note: This method does NOT commit the transaction.
+        The caller (API endpoint) is responsible for committing.
+
+        Args:
+            db: Database session
+            data: Dictionary of fields for the new platform
+
+        Returns:
+            Created Platform object (with pending changes)
+        """
+        platform = Platform()
+        for field, value in data.items():
+            if hasattr(platform, field):
+                setattr(platform, field, value)
+        db.add(platform)
+        logger.info(f"[PLATFORMS] Created platform: {platform.code}")
+        return platform
+
     @staticmethod
     def update_platform(
         db: Session, platform: Platform, update_data: dict

app/modules/tenancy/static/admin/js/platform-create.js

@@ -0,0 +1,134 @@
+/**
+ * Platform Create - Alpine.js Component
+ *
+ * Handles platform creation for multi-platform CMS.
+ */
+
+const platformCreateLog = window.LogConfig.createLogger('PLATFORM_CREATE');
+
+function platformCreate() {
+  return {
+    // Inherit base layout functionality from init-alpine.js
+    ...data(),
+
+    // Page identification
+    currentPage: 'platform-create',
+
+    // State
+    saving: false,
+    error: null,
+
+    // Language editing
+    currentLang: 'fr',
+    languageNames: {
+      fr: 'Fran\u00e7ais',
+      de: 'Deutsch',
+      en: 'English',
+      lb: 'L\u00ebtzebuergesch',
+    },
+
+    // Form data
+    formData: {
+      code: '',
+      name: '',
+      description_translations: { fr: '', de: '', en: '', lb: '' },
+      domain: '',
+      path_prefix: '',
+      default_language: 'fr',
+      supported_languages: ['fr', 'de', 'en', 'lb'],
+      is_active: true,
+      is_public: true,
+    },
+
+    errors: {},
+
+    // Available languages
+    availableLanguages: [
+      { code: 'fr', name: 'French' },
+      { code: 'de', name: 'German' },
+      { code: 'en', name: 'English' },
+      { code: 'lb', name: 'Luxembourgish' },
+    ],
+
+    // Lifecycle
+    async init() {
+      platformCreateLog.info('=== PLATFORM CREATE PAGE INITIALIZING ===');
+
+      // Duplicate initialization guard
+      if (window._platformCreateInitialized) {
+        platformCreateLog.warn('Platform create page already initialized, skipping...');
+        return;
+      }
+      window._platformCreateInitialized = true;
+
+      platformCreateLog.info('=== PLATFORM CREATE PAGE INITIALIZATION COMPLETE ===');
+    },
+
+    async handleSubmit() {
+      this.saving = true;
+      this.error = null;
+      this.errors = {};
+
+      try {
+        // Sync base description from default language translation
+        const defaultLang = this.formData.default_language || 'fr';
+        const baseDesc = this.formData.description_translations[defaultLang] || '';
+
+        const payload = {
+          code: this.formData.code,
+          name: this.formData.name,
+          description: baseDesc || null,
+          description_translations: this.formData.description_translations,
+          domain: this.formData.domain || null,
+          path_prefix: this.formData.path_prefix || null,
+          default_language: this.formData.default_language,
+          supported_languages: this.formData.supported_languages,
+          is_active: this.formData.is_active,
+          is_public: this.formData.is_public,
+        };
+
+        const response = await apiClient.post('/admin/platforms', payload);
+
+        platformCreateLog.info(`Created platform: ${response.code}`);
+
+        // Redirect to the new platform's detail page
+        window.location.href = `/admin/platforms/${response.code}`;
+      } catch (err) {
+        platformCreateLog.error('Error creating platform:', err);
+        this.error = err.message || 'Failed to create platform';
+
+        // Handle validation errors
+        if (err.details) {
+          this.errors = err.details;
+        }
+      } finally {
+        this.saving = false;
+      }
+    },
+
+    // Helper Methods
+    isLanguageSupported(code) {
+      return this.formData.supported_languages.includes(code);
+    },
+
+    toggleLanguage(code) {
+      const index = this.formData.supported_languages.indexOf(code);
+      if (index > -1) {
+        // Don't allow removing the last language
+        if (this.formData.supported_languages.length > 1) {
+          this.formData.supported_languages.splice(index, 1);
+          // Switch tab if the removed language was active
+          if (this.currentLang === code) {
+            this.currentLang = this.formData.supported_languages[0];
+          }
+        }
+      } else {
+        this.formData.supported_languages.push(code);
+        // Initialize empty translation for new language
+        if (!this.formData.description_translations[code]) {
+          this.formData.description_translations[code] = '';
+        }
+      }
+    },
+  };
+}

app/modules/tenancy/static/admin/js/platform-detail.js

@@ -17,7 +17,6 @@ function platformDetail() {
     // State
     platform: null,
     stats: null,
-    recentPages: [],
     loading: true,
     error: null,
     platformCode: null,
@@ -41,10 +40,7 @@ function platformDetail() {
         if (match) {
           this.platformCode = match[1];
           platformDetailLog.info('Viewing platform:', this.platformCode);
-          await Promise.all([
-            this.loadPlatform(),
-            this.loadRecentPages(),
-          ]);
+          await this.loadPlatform();
         } else {
           platformDetailLog.error('No platform code in URL');
           this.error = 'Platform code not found in URL';
@@ -74,19 +70,6 @@ function platformDetail() {
       }
     },
 
-    async loadRecentPages() {
-      try {
-        // Load recent content pages for this platform
-        const response = await apiClient.get(`/admin/content-pages?platform_code=${this.platformCode}&limit=5`);
-        this.recentPages = response.items || response || [];
-        platformDetailLog.info(`Loaded ${this.recentPages.length} recent pages`);
-      } catch (err) {
-        platformDetailLog.error('Error loading recent pages:', err);
-        // Non-fatal - don't throw
-        this.recentPages = [];
-      }
-    },
-
     // Helper Methods
     getPlatformIcon(code) {
       const icons = {
@@ -98,22 +81,6 @@ function platformDetail() {
       return icons[code] || 'globe-alt';
     },
 
-    getPageTypeLabel(page) {
-      if (page.is_platform_page) return 'Marketing';
-      if (page.store_id) return 'Store Override';
-      return 'Store Default';
-    },
-
-    getPageTypeBadgeClass(page) {
-      if (page.is_platform_page) {
-        return 'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200';
-      }
-      if (page.store_id) {
-        return 'bg-teal-100 text-teal-800 dark:bg-teal-900 dark:text-teal-200';
-      }
-      return 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200';
-    },
-
     formatDate(dateString) {
       if (!dateString) return '—';
       const date = new Date(dateString);

app/modules/tenancy/static/admin/js/stores.js

@@ -28,11 +28,16 @@ function adminStores() {
         showDeleteStoreModal: false,
         storeToDelete: null,
 
+        // Merchant filter (Tom Select)
+        selectedMerchant: null,
+        merchantSelectInstance: null,
+
         // Search and filters
         filters: {
             search: '',
             is_active: '',
-            is_verified: ''
+            is_verified: '',
+            merchant_id: ''
         },
 
         // Pagination state (server-side)
@@ -62,9 +67,16 @@ function adminStores() {
                 this.pagination.per_page = await window.PlatformSettings.getRowsPerPage();
             }
 
+            // Initialize merchant selector (Tom Select)
+            this.$nextTick(() => {
+                this.initMerchantSelect();
+            });
+
             storesLog.group('Loading stores data');
-            await this.loadStores();
-            await this.loadStats();
+            await Promise.all([
+                this.loadStores(),
+                this.loadStats(),
+            ]);
             storesLog.groupEnd();
 
             storesLog.info('=== STORES PAGE INITIALIZATION COMPLETE ===');
@@ -163,6 +175,9 @@ function adminStores() {
                 if (this.filters.is_verified !== '') {
                     params.append('is_verified', this.filters.is_verified);
                 }
+                if (this.filters.merchant_id !== '') {
+                    params.append('merchant_id', this.filters.merchant_id);
+                }
 
                 const url = `/admin/stores?${params}`;
                 window.LogConfig.logApiCall('GET', url, null, 'request');
@@ -230,6 +245,64 @@ function adminStores() {
             }
         },
 
+        // Initialize merchant selector (Tom Select autocomplete)
+        initMerchantSelect() {
+            if (!window.initEntitySelector) {
+                storesLog.warn('initEntitySelector not available yet, retrying...');
+                setTimeout(() => this.initMerchantSelect(), 200);
+                return;
+            }
+
+            this.merchantSelectInstance = initEntitySelector(this.$refs.merchantSelect, {
+                apiEndpoint: '/admin/merchants',
+                responseKey: 'merchants',
+                searchFields: ['name'],
+                codeField: null,
+                placeholder: 'Filter by merchant...',
+                noResultsText: 'No merchants found',
+                onSelect: (merchant) => {
+                    storesLog.info('Merchant selected:', merchant);
+                    this.selectedMerchant = merchant;
+                    this.filters.merchant_id = merchant.id;
+                    this.pagination.page = 1;
+                    localStorage.setItem('stores_selected_merchant_id', merchant.id);
+                    localStorage.setItem('stores_selected_merchant_data', JSON.stringify(merchant));
+                    this.loadStores();
+                },
+                onClear: () => {
+                    this.clearMerchantFilter();
+                }
+            });
+
+            // Restore from localStorage
+            const savedMerchantId = localStorage.getItem('stores_selected_merchant_id');
+            if (savedMerchantId) {
+                const savedData = JSON.parse(localStorage.getItem('stores_selected_merchant_data') || 'null');
+                if (savedData) {
+                    this.selectedMerchant = savedData;
+                    this.filters.merchant_id = parseInt(savedMerchantId);
+                    // Wait for Tom Select to init, then set value
+                    setTimeout(() => {
+                        this.merchantSelectInstance?.setValue(parseInt(savedMerchantId), savedData);
+                    }, 500);
+                }
+            }
+        },
+
+        // Clear merchant filter
+        clearMerchantFilter() {
+            storesLog.info('Clearing merchant filter');
+            this.selectedMerchant = null;
+            this.filters.merchant_id = '';
+            this.pagination.page = 1;
+            localStorage.removeItem('stores_selected_merchant_id');
+            localStorage.removeItem('stores_selected_merchant_data');
+            if (this.merchantSelectInstance) {
+                this.merchantSelectInstance.clear();
+            }
+            this.loadStores();
+        },
+
         // Pagination: Go to specific page
         goToPage(pageNum) {
             if (pageNum === '...' || pageNum < 1 || pageNum > this.totalPages) {

app/modules/tenancy/templates/tenancy/admin/module-info.html

@@ -116,7 +116,7 @@
         <!-- Store Menu Items -->
         <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
             <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">
-                <span x-html="$icon('building-storefront', 'w-5 h-5 inline mr-2 text-teal-600 dark:text-teal-400')"></span>
+                <span x-html="$icon('store', 'w-5 h-5 inline mr-2 text-teal-600 dark:text-teal-400')"></span>
                 Store Menu Items
             </h3>
             <div x-show="module?.store_menu_items?.length > 0" class="space-y-2">
@@ -171,7 +171,7 @@
     <!-- Self-Contained Module Info (if applicable) -->
     <div x-show="module?.is_self_contained" class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
         <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">
-            <span x-html="$icon('puzzle', 'w-5 h-5 inline mr-2 text-green-600 dark:text-green-400')"></span>
+            <span x-html="$icon('puzzle-piece', 'w-5 h-5 inline mr-2 text-green-600 dark:text-green-400')"></span>
             Self-Contained Module
         </h3>
         <div class="grid grid-cols-1 md:grid-cols-2 gap-4">

app/modules/tenancy/templates/tenancy/admin/platform-create.html

@@ -0,0 +1,237 @@
+{# app/templates/admin/platform-create.html #}
+{% extends "admin/base.html" %}
+{% from 'shared/macros/alerts.html' import loading_state %}
+{% from 'shared/macros/headers.html' import edit_page_header %}
+
+{% block title %}Create Platform{% endblock %}
+
+{% block alpine_data %}platformCreate(){% endblock %}
+
+{% block content %}
+{% call edit_page_header('Create Platform', '/admin/platforms', back_label='Back to Platforms') %}
+    New Platform
+{% endcall %}
+
+<!-- Error State -->
+<div x-show="error" class="mb-6 p-4 bg-red-100 border border-red-400 text-red-700 rounded-lg dark:bg-red-900/50 dark:border-red-600 dark:text-red-200">
+    <div class="flex items-center">
+        <span x-html="$icon('exclamation-circle', 'w-5 h-5 mr-2')"></span>
+        <span x-text="error"></span>
+    </div>
+</div>
+
+<!-- Create Form -->
+<form @submit.prevent="handleSubmit" class="px-4 py-3 mb-8 bg-white rounded-lg shadow-md dark:bg-gray-800">
+    <div class="grid gap-6 mb-8 md:grid-cols-2">
+        <!-- Left Column: Basic Info -->
+        <div>
+            <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
+                Basic Information
+            </h3>
+
+            <!-- Platform Code -->
+            <label class="block mb-4 text-sm">
+                <span class="text-gray-700 dark:text-gray-400">
+                    Platform Code <span class="text-red-600">*</span>
+                </span>
+                <input
+                    type="text"
+                    x-model="formData.code"
+                    required
+                    maxlength="50"
+                    pattern="^[a-z][a-z0-9_-]*$"
+                    placeholder="e.g., marketplace"
+                    :disabled="saving"
+                    class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray form-input"
+                    :class="{ 'border-red-600 focus:border-red-400 focus:shadow-outline-red': errors.code }"
+                >
+                <span class="text-xs text-gray-600 dark:text-gray-400 mt-1">
+                    Lowercase letters, numbers, hyphens, and underscores. Cannot be changed later.
+                </span>
+                <span x-show="errors.code" class="text-xs text-red-600 dark:text-red-400 mt-1" x-text="errors.code"></span>
+            </label>
+
+            <!-- Name -->
+            <label class="block mb-4 text-sm">
+                <span class="text-gray-700 dark:text-gray-400">
+                    Platform Name <span class="text-red-600">*</span>
+                </span>
+                <input
+                    type="text"
+                    x-model="formData.name"
+                    required
+                    maxlength="100"
+                    placeholder="e.g., Marketplace"
+                    :disabled="saving"
+                    class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray form-input"
+                    :class="{ 'border-red-600 focus:border-red-400 focus:shadow-outline-red': errors.name }"
+                >
+                <span x-show="errors.name" class="text-xs text-red-600 dark:text-red-400 mt-1" x-text="errors.name"></span>
+            </label>
+
+            <!-- Description (multilingual) -->
+            <div class="block mb-4 text-sm">
+                <span class="text-gray-700 dark:text-gray-400">
+                    Description
+                </span>
+
+                <!-- Language Tabs -->
+                <div class="mt-2 border-b border-gray-200 dark:border-gray-700">
+                    <nav class="flex -mb-px space-x-2">
+                        <template x-for="lang in formData.supported_languages" :key="lang">
+                            <button
+                                type="button"
+                                @click="currentLang = lang"
+                                :class="currentLang === lang
+                                    ? 'border-purple-500 text-purple-600 dark:text-purple-400'
+                                    : 'border-transparent text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300'"
+                                class="py-2 px-3 border-b-2 font-medium text-xs transition-colors"
+                            >
+                                <span x-text="languageNames[lang] || lang.toUpperCase()"></span>
+                                <span x-show="lang === formData.default_language" class="ml-1 text-xs text-gray-400">(default)</span>
+                            </button>
+                        </template>
+                    </nav>
+                </div>
+
+                <!-- Per-language textarea -->
+                <textarea
+                    x-model="formData.description_translations[currentLang]"
+                    rows="3"
+                    maxlength="500"
+                    :disabled="saving"
+                    :placeholder="'Description in ' + (languageNames[currentLang] || currentLang)"
+                    class="block w-full mt-2 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray form-textarea"
+                ></textarea>
+            </div>
+
+            <!-- Default Language -->
+            <label class="block mb-4 text-sm">
+                <span class="text-gray-700 dark:text-gray-400">
+                    Default Language
+                </span>
+                <select
+                    x-model="formData.default_language"
+                    :disabled="saving"
+                    class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray form-select"
+                >
+                    <template x-for="lang in availableLanguages" :key="lang.code">
+                        <option :value="lang.code" x-text="lang.name"></option>
+                    </template>
+                </select>
+            </label>
+
+            <!-- Supported Languages -->
+            <label class="block mb-4 text-sm">
+                <span class="text-gray-700 dark:text-gray-400">
+                    Supported Languages
+                </span>
+                <div class="mt-2 flex flex-wrap gap-2">
+                    <template x-for="lang in availableLanguages" :key="lang.code">
+                        <button
+                            type="button"
+                            @click="toggleLanguage(lang.code)"
+                            :disabled="saving"
+                            class="px-3 py-1 text-sm rounded-full transition-colors"
+                            :class="isLanguageSupported(lang.code)
+                                ? 'bg-purple-600 text-white'
+                                : 'bg-gray-200 text-gray-700 dark:bg-gray-700 dark:text-gray-300'"
+                        >
+                            <span x-text="lang.name"></span>
+                        </button>
+                    </template>
+                </div>
+            </label>
+        </div>
+
+        <!-- Right Column: Routing -->
+        <div>
+            <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">
+                Routing
+            </h3>
+
+            <!-- Domain -->
+            <label class="block mb-4 text-sm">
+                <span class="text-gray-700 dark:text-gray-400">
+                    Production Domain
+                </span>
+                <input
+                    type="text"
+                    x-model="formData.domain"
+                    placeholder="e.g., marketplace.lu"
+                    :disabled="saving"
+                    class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray form-input"
+                >
+                <span class="text-xs text-gray-600 dark:text-gray-400 mt-1">
+                    Domain used in production for this platform
+                </span>
+            </label>
+
+            <!-- Path Prefix -->
+            <label class="block mb-4 text-sm">
+                <span class="text-gray-700 dark:text-gray-400">
+                    Development Path Prefix
+                </span>
+                <input
+                    type="text"
+                    x-model="formData.path_prefix"
+                    placeholder="e.g., marketplace"
+                    :disabled="saving"
+                    class="block w-full mt-1 text-sm dark:text-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray form-input"
+                >
+                <span class="text-xs text-gray-600 dark:text-gray-400 mt-1">
+                    Used for /platforms/{prefix}/ routing in development
+                </span>
+            </label>
+
+            <!-- Status Options -->
+            <h3 class="mb-4 mt-8 text-lg font-semibold text-gray-700 dark:text-gray-200">
+                Status
+            </h3>
+
+            <div class="flex flex-wrap gap-4">
+                <label class="flex items-center text-sm">
+                    <input
+                        type="checkbox"
+                        x-model="formData.is_active"
+                        :disabled="saving"
+                        class="text-purple-600 form-checkbox focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray"
+                    >
+                    <span class="ml-2 text-gray-700 dark:text-gray-400">Active</span>
+                </label>
+                <label class="flex items-center text-sm">
+                    <input
+                        type="checkbox"
+                        x-model="formData.is_public"
+                        :disabled="saving"
+                        class="text-purple-600 form-checkbox focus:border-purple-400 focus:outline-none focus:shadow-outline-purple dark:focus:shadow-outline-gray"
+                    >
+                    <span class="ml-2 text-gray-700 dark:text-gray-400">Public</span>
+                </label>
+            </div>
+        </div>
+    </div>
+
+    <!-- Submit Button -->
+    <div class="flex justify-end gap-3">
+        <a
+            href="/admin/platforms"
+            class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-600"
+        >
+            Cancel
+        </a>
+        <button
+            type="submit"
+            :disabled="saving"
+            class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-purple-600 border border-transparent rounded-lg active:bg-purple-600 hover:bg-purple-700 focus:outline-none focus:shadow-outline-purple disabled:opacity-50"
+        >
+            <span x-show="saving" x-html="$icon('refresh', 'w-4 h-4 mr-2 animate-spin')"></span>
+            <span x-text="saving ? 'Creating...' : 'Create Platform'"></span>
+        </button>
+    </div>
+</form>
+{% endblock %}
+
+{% block extra_scripts %}
+<script defer src="{{ url_for('tenancy_static', path='admin/js/platform-create.js') }}"></script>
+{% endblock %}

app/modules/tenancy/templates/tenancy/admin/platform-detail.html

@@ -47,7 +47,7 @@
     <!-- Quick Actions -->
     <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
         <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Quick Actions</h3>
-        <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
             <!-- Edit Settings -->
             <a :href="`/admin/platforms/${platformCode}/edit`"
                class="flex items-center p-4 bg-purple-50 dark:bg-purple-900/20 rounded-lg hover:bg-purple-100 dark:hover:bg-purple-900/40 transition-colors">
@@ -58,26 +58,6 @@
                 </div>
             </a>
 
-            <!-- Edit Homepage -->
-            <a :href="`/admin/content-pages?platform_code=${platformCode}&slug=home`"
-               class="flex items-center p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg hover:bg-blue-100 dark:hover:bg-blue-900/40 transition-colors">
-                <span x-html="$icon('home', 'w-8 h-8 text-blue-600 dark:text-blue-400')"></span>
-                <div class="ml-3">
-                    <p class="font-semibold text-gray-900 dark:text-white">Edit Homepage</p>
-                    <p class="text-sm text-gray-600 dark:text-gray-400">Platform landing page</p>
-                </div>
-            </a>
-
-            <!-- Manage Pages -->
-            <a :href="`/admin/content-pages?platform_code=${platformCode}`"
-               class="flex items-center p-4 bg-teal-50 dark:bg-teal-900/20 rounded-lg hover:bg-teal-100 dark:hover:bg-teal-900/40 transition-colors">
-                <span x-html="$icon('document-text', 'w-8 h-8 text-teal-600 dark:text-teal-400')"></span>
-                <div class="ml-3">
-                    <p class="font-semibold text-gray-900 dark:text-white">Manage Pages</p>
-                    <p class="text-sm text-gray-600 dark:text-gray-400">All content pages</p>
-                </div>
-            </a>
-
             <!-- View Platform -->
             <a :href="getPlatformUrl()" target="_blank"
                class="flex items-center p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors">
@@ -102,7 +82,7 @@
             <!-- Module Configuration -->
             <a :href="`/admin/platforms/${platformCode}/modules`"
                class="flex items-center p-4 bg-green-50 dark:bg-green-900/20 rounded-lg hover:bg-green-100 dark:hover:bg-green-900/40 transition-colors">
-                <span x-html="$icon('puzzle', 'w-8 h-8 text-green-600 dark:text-green-400')"></span>
+                <span x-html="$icon('puzzle-piece', 'w-8 h-8 text-green-600 dark:text-green-400')"></span>
                 <div class="ml-3">
                     <p class="font-semibold text-gray-900 dark:text-white">Module Configuration</p>
                     <p class="text-sm text-gray-600 dark:text-gray-400">Enable/disable features</p>
@@ -131,38 +111,38 @@
                     <p class="text-3xl font-bold text-purple-600 dark:text-purple-400" x-text="platform?.store_count || 0"></p>
                 </div>
                 <div class="p-3 bg-purple-100 dark:bg-purple-900/50 rounded-full">
-                    <span x-html="$icon('building-storefront', 'w-6 h-6 text-purple-600 dark:text-purple-400')"></span>
+                    <span x-html="$icon('store', 'w-6 h-6 text-purple-600 dark:text-purple-400')"></span>
                 </div>
             </div>
         </div>
 
-        <!-- Marketing Pages -->
+        <!-- Languages -->
         <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
             <div class="flex items-center justify-between">
                 <div>
-                    <p class="text-sm text-gray-500 dark:text-gray-400">Marketing Pages</p>
-                    <p class="text-3xl font-bold text-blue-600 dark:text-blue-400" x-text="platform?.platform_pages_count || 0"></p>
+                    <p class="text-sm text-gray-500 dark:text-gray-400">Languages</p>
+                    <p class="text-3xl font-bold text-blue-600 dark:text-blue-400" x-text="(platform?.supported_languages || []).length"></p>
                 </div>
                 <div class="p-3 bg-blue-100 dark:bg-blue-900/50 rounded-full">
-                    <span x-html="$icon('megaphone', 'w-6 h-6 text-blue-600 dark:text-blue-400')"></span>
+                    <span x-html="$icon('translate', 'w-6 h-6 text-blue-600 dark:text-blue-400')"></span>
                 </div>
             </div>
         </div>
 
-        <!-- Store Defaults -->
+        <!-- Active Status -->
         <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
             <div class="flex items-center justify-between">
                 <div>
-                    <p class="text-sm text-gray-500 dark:text-gray-400">Store Defaults</p>
-                    <p class="text-3xl font-bold text-teal-600 dark:text-teal-400" x-text="platform?.store_defaults_count || 0"></p>
+                    <p class="text-sm text-gray-500 dark:text-gray-400">Status</p>
+                    <p class="text-xl font-bold" :class="platform?.is_active ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400'" x-text="platform?.is_active ? 'Active' : 'Inactive'"></p>
                 </div>
-                <div class="p-3 bg-teal-100 dark:bg-teal-900/50 rounded-full">
-                    <span x-html="$icon('document-duplicate', 'w-6 h-6 text-teal-600 dark:text-teal-400')"></span>
+                <div class="p-3 rounded-full" :class="platform?.is_active ? 'bg-green-100 dark:bg-green-900/50' : 'bg-red-100 dark:bg-red-900/50'">
+                    <span x-html="$icon(platform?.is_active ? 'check-circle' : 'x-circle', 'w-6 h-6 ' + (platform?.is_active ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400'))"></span>
                 </div>
             </div>
         </div>
 
-        <!-- Language -->
+        <!-- Default Language -->
         <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
             <div class="flex items-center justify-between">
                 <div>
@@ -170,7 +150,7 @@
                     <p class="text-3xl font-bold text-gray-700 dark:text-gray-300" x-text="platform?.default_language?.toUpperCase() || '—'"></p>
                 </div>
                 <div class="p-3 bg-gray-100 dark:bg-gray-700 rounded-full">
-                    <span x-html="$icon('language', 'w-6 h-6 text-gray-600 dark:text-gray-400')"></span>
+                    <span x-html="$icon('translate', 'w-6 h-6 text-gray-600 dark:text-gray-400')"></span>
                 </div>
             </div>
         </div>
@@ -232,62 +212,6 @@
         </div>
     </div>
 
-    <!-- Recent Pages -->
-    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
-        <div class="p-6 border-b border-gray-200 dark:border-gray-700 flex justify-between items-center">
-            <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Recent Content Pages</h3>
-            <a :href="`/admin/content-pages?platform_code=${platformCode}`"
-               class="text-sm text-purple-600 hover:text-purple-700 dark:text-purple-400 dark:hover:text-purple-300">
-                View All →
-            </a>
-        </div>
-        <div x-show="recentPages.length > 0">
-            <table class="w-full">
-                <thead class="bg-gray-50 dark:bg-gray-700/50">
-                    <tr>
-                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Title</th>
-                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Slug</th>
-                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Type</th>
-                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Status</th>
-                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Updated</th>
-                    </tr>
-                </thead>
-                <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
-                    <template x-for="page in recentPages" :key="page.id">
-                        <tr class="hover:bg-gray-50 dark:hover:bg-gray-700/50">
-                            <td class="px-6 py-4">
-                                <a :href="`/admin/content-pages/${page.id}/edit`"
-                                   class="text-gray-900 dark:text-white hover:text-purple-600 dark:hover:text-purple-400 font-medium"
-                                   x-text="page.title"></a>
-                            </td>
-                            <td class="px-6 py-4">
-                                <code class="text-sm bg-gray-100 dark:bg-gray-700 px-2 py-0.5 rounded" x-text="page.slug"></code>
-                            </td>
-                            <td class="px-6 py-4">
-                                <span class="px-2 py-1 text-xs font-semibold rounded-full"
-                                      :class="getPageTypeBadgeClass(page)"
-                                      x-text="getPageTypeLabel(page)"></span>
-                            </td>
-                            <td class="px-6 py-4">
-                                <span x-show="page.is_published" class="px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">Published</span>
-                                <span x-show="!page.is_published" class="px-2 py-1 text-xs font-semibold rounded-full bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200">Draft</span>
-                            </td>
-                            <td class="px-6 py-4 text-sm text-gray-500 dark:text-gray-400" x-text="formatDate(page.updated_at)"></td>
-                        </tr>
-                    </template>
-                </tbody>
-            </table>
-        </div>
-        <div x-show="recentPages.length === 0" class="p-6 text-center text-gray-500 dark:text-gray-400">
-            <span x-html="$icon('document-text', 'w-12 h-12 mx-auto mb-2 opacity-50')"></span>
-            <p>No content pages yet.</p>
-            <a :href="`/admin/content-pages/create?platform_code=${platformCode}`"
-               class="inline-block mt-2 text-purple-600 hover:text-purple-700 dark:text-purple-400">
-                Create your first page →
-            </a>
-        </div>
-    </div>
-
     <!-- Timestamps -->
     <div class="text-sm text-gray-500 dark:text-gray-400">
         <p>Created: <span x-text="formatDate(platform?.created_at)"></span></p>

app/modules/tenancy/templates/tenancy/admin/platform-modules.html

@@ -31,7 +31,7 @@
 <div class="grid gap-4 mb-6 md:grid-cols-4">
     <div class="flex items-center p-4 bg-white rounded-lg shadow-xs dark:bg-gray-800">
         <div class="p-3 mr-4 text-blue-500 bg-blue-100 rounded-full dark:text-blue-100 dark:bg-blue-500">
-            <span x-html="$icon('puzzle', 'w-5 h-5')"></span>
+            <span x-html="$icon('puzzle-piece', 'w-5 h-5')"></span>
         </div>
         <div>
             <p class="mb-1 text-sm font-medium text-gray-600 dark:text-gray-400">Total Modules</p>
@@ -166,7 +166,7 @@
         <div class="px-4 py-3 bg-gray-50 dark:bg-gray-700/50 border-b border-gray-200 dark:border-gray-700">
             <div class="flex items-center justify-between">
                 <div class="flex items-center">
-                    <span x-html="$icon('puzzle', 'w-5 h-5 text-gray-600 dark:text-gray-400 mr-2')"></span>
+                    <span x-html="$icon('puzzle-piece', 'w-5 h-5 text-gray-600 dark:text-gray-400 mr-2')"></span>
                     <h3 class="text-sm font-semibold text-gray-700 dark:text-gray-200">Optional Modules</h3>
                 </div>
                 <span class="text-xs text-gray-500 dark:text-gray-400" x-text="`${enabledOptionalCount}/${optionalModules.length} enabled`"></span>
@@ -271,7 +271,7 @@
 
     <!-- Empty State -->
     <div x-show="moduleConfig?.modules?.length === 0" class="bg-white rounded-lg shadow-xs dark:bg-gray-800 p-8 text-center">
-        <span x-html="$icon('puzzle', 'w-12 h-12 mx-auto text-gray-400')"></span>
+        <span x-html="$icon('puzzle-piece', 'w-12 h-12 mx-auto text-gray-400')"></span>
         <p class="mt-4 text-gray-500 dark:text-gray-400">No modules available.</p>
     </div>
 </div>

app/modules/tenancy/templates/tenancy/admin/platforms.html

@@ -10,6 +10,15 @@
 {% block content %}
 {{ page_header('Platforms', subtitle='Manage platform configurations for OMS, Loyalty, and other business offerings') }}
 
+<!-- Create Platform Button -->
+<div class="flex justify-end mb-6">
+    <a href="/admin/platforms/create"
+       class="inline-flex items-center px-4 py-2 text-sm font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700 transition-colors">
+        <span x-html="$icon('plus', 'w-5 h-5 mr-2')"></span>
+        Create Platform
+    </a>
+</div>
+
 {{ loading_state('Loading platforms...') }}
 
 {{ error_state('Error loading platforms') }}
@@ -49,12 +58,12 @@
                         <p class="text-xs text-gray-500 dark:text-gray-400">Stores</p>
                     </div>
                     <div>
-                        <p class="text-2xl font-bold text-blue-600 dark:text-blue-400" x-text="platform.platform_pages_count"></p>
-                        <p class="text-xs text-gray-500 dark:text-gray-400">Marketing Pages</p>
+                        <p class="text-2xl font-bold text-blue-600 dark:text-blue-400" x-text="(platform.supported_languages || []).length"></p>
+                        <p class="text-xs text-gray-500 dark:text-gray-400">Languages</p>
                     </div>
                     <div>
-                        <p class="text-2xl font-bold text-teal-600 dark:text-teal-400" x-text="platform.store_defaults_count"></p>
-                        <p class="text-xs text-gray-500 dark:text-gray-400">Store Defaults</p>
+                        <p class="text-2xl font-bold" :class="platform.domain ? 'text-green-600 dark:text-green-400' : 'text-gray-400 dark:text-gray-500'" x-text="platform.domain ? '✓' : '—'"></p>
+                        <p class="text-xs text-gray-500 dark:text-gray-400">Domain</p>
                     </div>
                 </div>
             </div>
@@ -80,37 +89,20 @@
             <!-- Platform Actions -->
             <div class="px-6 py-4 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50">
                 <div class="flex justify-between items-center">
-                    <a
-                        :href="`/admin/platforms/${platform.code}`"
-                        class="inline-flex items-center text-sm font-medium text-purple-600 hover:text-purple-700 dark:text-purple-400 dark:hover:text-purple-300"
-                    >
-                        <span x-html="$icon('eye', 'w-4 h-4 mr-1')"></span>
-                        View Details
-                    </a>
-                    <div class="flex space-x-2">
+                    <div class="flex items-center space-x-3">
                         <a
-                            :href="`/admin/content-pages?platform_code=${platform.code}&slug=home`"
-                            class="inline-flex items-center px-3 py-1.5 text-xs font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-600"
-                            title="Edit platform homepage"
+                            :href="`/admin/platforms/${platform.code}`"
+                            class="inline-flex items-center text-sm font-medium text-purple-600 hover:text-purple-700 dark:text-purple-400 dark:hover:text-purple-300"
                         >
-                            <span x-html="$icon('home', 'w-4 h-4 mr-1')"></span>
-                            Homepage
-                        </a>
-                        <a
-                            :href="`/admin/content-pages?platform_code=${platform.code}`"
-                            class="inline-flex items-center px-3 py-1.5 text-xs font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-600"
-                            title="View all content pages for this platform"
-                        >
-                            <span x-html="$icon('document-text', 'w-4 h-4 mr-1')"></span>
-                            Pages
+                            <span x-html="$icon('eye', 'w-4 h-4 mr-1')"></span>
+                            View Details
                         </a>
                         <a
                             :href="`/admin/platforms/${platform.code}/edit`"
-                            class="inline-flex items-center px-3 py-1.5 text-xs font-medium text-white bg-purple-600 rounded-lg hover:bg-purple-700"
-                            title="Edit platform settings"
+                            class="inline-flex items-center text-sm font-medium text-gray-600 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"
                         >
-                            <span x-html="$icon('cog', 'w-4 h-4 mr-1')"></span>
-                            Settings
+                            <span x-html="$icon('pencil', 'w-4 h-4 mr-1')"></span>
+                            Edit
                         </a>
                     </div>
                 </div>
@@ -128,33 +120,6 @@
     </p>
 </div>
 
-<!-- Page Tier Legend -->
-<div x-show="!loading && platforms.length > 0" class="mt-8 bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
-    <h4 class="text-sm font-semibold text-gray-900 dark:text-white mb-4">Content Page Tiers</h4>
-    <div class="grid md:grid-cols-3 gap-6">
-        <div class="flex items-start">
-            <span class="inline-block w-3 h-3 rounded-full bg-blue-500 mt-1.5 mr-3"></span>
-            <div>
-                <p class="font-medium text-gray-900 dark:text-white">Platform Marketing Pages</p>
-                <p class="text-sm text-gray-500 dark:text-gray-400">Public pages like homepage, pricing, features. Not inherited by stores.</p>
-            </div>
-        </div>
-        <div class="flex items-start">
-            <span class="inline-block w-3 h-3 rounded-full bg-teal-500 mt-1.5 mr-3"></span>
-            <div>
-                <p class="font-medium text-gray-900 dark:text-white">Store Defaults</p>
-                <p class="text-sm text-gray-500 dark:text-gray-400">Default pages inherited by all stores (about, terms, privacy).</p>
-            </div>
-        </div>
-        <div class="flex items-start">
-            <span class="inline-block w-3 h-3 rounded-full bg-purple-500 mt-1.5 mr-3"></span>
-            <div>
-                <p class="font-medium text-gray-900 dark:text-white">Store Overrides</p>
-                <p class="text-sm text-gray-500 dark:text-gray-400">Custom pages created by individual stores.</p>
-            </div>
-        </div>
-    </div>
-</div>
 {% endblock %}
 
 {% block extra_scripts %}

app/modules/tenancy/templates/tenancy/admin/stores.html

@@ -5,6 +5,7 @@
 {% 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 confirm_modal, confirm_modal_dynamic %}
+{% from 'shared/macros/inputs.html' import entity_selector, entity_selected_badge %}
 
 {% block title %}Stores{% endblock %}
 
@@ -123,6 +124,9 @@
                 <option value="false">Pending</option>
             </select>
 
+            <!-- Merchant Filter (Tom Select autocomplete) -->
+            {{ entity_selector(ref_name='merchantSelect', id='merchant-select', placeholder='Filter by merchant...', width='w-64') }}
+
             <!-- Refresh Button -->
             <button
                 @click="refresh()"
@@ -136,6 +140,9 @@
     </div>
 </div>
 
+<!-- Selected Merchant Badge -->
+{{ entity_selected_badge(entity_var='selectedMerchant', clear_fn='clearMerchantFilter()', name_field='name', color='blue') }}
+
 <!-- Stores Table with Pagination -->
 <div x-show="!loading">
     {% call table_wrapper() %}