feat(admin): separate platform CRUD from CMS, add entity selector macro
Some checks failed
Some checks failed
- 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>
This commit is contained in:
@@ -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">
|
||||
|
||||
237
app/modules/tenancy/templates/tenancy/admin/platform-create.html
Normal file
237
app/modules/tenancy/templates/tenancy/admin/platform-create.html
Normal file
@@ -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 %}
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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 %}
|
||||
|
||||
@@ -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() %}
|
||||
|
||||
Reference in New Issue
Block a user