feat: complete multi-platform CMS phases 2-5

Phase 2 - OMS Migration & Integration:
- Fix platform_pages.py to use get_platform_page for marketing pages
- Fix shop_pages.py to pass platform_id to content page service calls

Phase 3 - Admin Interface:
- Add platform management API (app/api/v1/admin/platforms.py)
- Add platforms admin page with stats cards
- Add Platforms menu item to admin sidebar
- Update content pages admin with platform filter and four-tab tier system

Phase 4 - Documentation:
- Add comprehensive architecture docs (docs/architecture/multi-platform-cms.md)
- Update implementation plan with completion status

Phase 5 - Vendor Dashboard:
- Add CMS usage API endpoint with tier limits
- Add usage progress bar to vendor content pages
- Add platform-default/{slug} API for preview
- Add View Default button and modal in page editor

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

static/admin/js/content-pages.js

@@ -17,12 +17,14 @@ function contentPagesManager() {
 
         // Content pages specific state
         allPages: [],
+        platforms: [],
         loading: false,
         error: null,
 
         // Tabs and filters
-        activeTab: 'all',  // all, platform, vendor
+        activeTab: 'all',  // all, platform_marketing, vendor_defaults, vendor_overrides
         searchQuery: '',
+        selectedPlatform: '',  // Platform code filter
 
         // Initialize
         async init() {
@@ -35,43 +37,77 @@ function contentPagesManager() {
             }
             window._contentPagesInitialized = true;
 
-            contentPagesLog.group('Loading content pages');
-            await this.loadPages();
+            contentPagesLog.group('Loading data');
+            await Promise.all([
+                this.loadPages(),
+                this.loadPlatforms()
+            ]);
             contentPagesLog.groupEnd();
 
+            // Check for platform filter in URL
+            const urlParams = new URLSearchParams(window.location.search);
+            const platformParam = urlParams.get('platform');
+            if (platformParam) {
+                this.selectedPlatform = platformParam;
+            }
+
             contentPagesLog.info('=== CONTENT PAGES MANAGER INITIALIZATION COMPLETE ===');
         },
 
-        // Computed: Platform pages
+        // Computed: Platform Marketing pages (is_platform_page=true, vendor_id=null)
+        get platformMarketingPages() {
+            return this.allPages.filter(page => page.is_platform_page && !page.vendor_id);
+        },
+
+        // Computed: Vendor Default pages (is_platform_page=false, vendor_id=null)
+        get vendorDefaultPages() {
+            return this.allPages.filter(page => !page.is_platform_page && !page.vendor_id);
+        },
+
+        // Computed: Vendor Override pages (vendor_id is set)
+        get vendorOverridePages() {
+            return this.allPages.filter(page => page.vendor_id);
+        },
+
+        // Legacy computed (for backward compatibility)
         get platformPages() {
-            return this.allPages.filter(page => page.is_platform_default);
+            return [...this.platformMarketingPages, ...this.vendorDefaultPages];
         },
 
-        // Computed: Vendor pages
         get vendorPages() {
-            return this.allPages.filter(page => page.is_vendor_override);
+            return this.vendorOverridePages;
         },
 
-        // Computed: Filtered pages based on active tab and search
+        // Computed: Filtered pages based on active tab, platform, and search
         get filteredPages() {
             let pages = [];
 
-            // Filter by tab
-            if (this.activeTab === 'platform') {
-                pages = this.platformPages;
-            } else if (this.activeTab === 'vendor') {
-                pages = this.vendorPages;
+            // Filter by tab (three-tier system)
+            if (this.activeTab === 'platform_marketing') {
+                pages = this.platformMarketingPages;
+            } else if (this.activeTab === 'vendor_defaults') {
+                pages = this.vendorDefaultPages;
+            } else if (this.activeTab === 'vendor_overrides') {
+                pages = this.vendorOverridePages;
             } else {
                 pages = this.allPages;
             }
 
+            // Filter by selected platform
+            if (this.selectedPlatform) {
+                pages = pages.filter(page =>
+                    page.platform_code === this.selectedPlatform
+                );
+            }
+
             // Filter by search query
             if (this.searchQuery) {
                 const query = this.searchQuery.toLowerCase();
                 pages = pages.filter(page =>
                     page.title.toLowerCase().includes(query) ||
                     page.slug.toLowerCase().includes(query) ||
-                    (page.vendor_name && page.vendor_name.toLowerCase().includes(query))
+                    (page.vendor_name && page.vendor_name.toLowerCase().includes(query)) ||
+                    (page.platform_name && page.platform_name.toLowerCase().includes(query))
                 );
             }
 
@@ -113,6 +149,44 @@ function contentPagesManager() {
             }
         },
 
+        // Load platforms for filter dropdown
+        async loadPlatforms() {
+            try {
+                contentPagesLog.info('Fetching platforms...');
+                const response = await apiClient.get('/admin/platforms');
+                this.platforms = response.platforms || [];
+                contentPagesLog.info(`Loaded ${this.platforms.length} platforms`);
+            } catch (err) {
+                contentPagesLog.error('Error loading platforms:', err);
+                // Non-critical - don't set error state
+            }
+        },
+
+        // Get page tier label (three-tier system)
+        getPageTierLabel(page) {
+            if (page.vendor_id) {
+                return 'Vendor Override';
+            } else if (page.is_platform_page) {
+                return 'Platform Marketing';
+            } else {
+                return 'Vendor Default';
+            }
+        },
+
+        // Get page tier CSS class (three-tier system)
+        getPageTierClass(page) {
+            if (page.vendor_id) {
+                // Vendor Override - purple
+                return 'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200';
+            } else if (page.is_platform_page) {
+                // Platform Marketing - blue
+                return 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200';
+            } else {
+                // Vendor Default - teal
+                return 'bg-teal-100 text-teal-800 dark:bg-teal-900 dark:text-teal-200';
+            }
+        },
+
         // Delete a page
         async deletePage(page) {
             if (!confirm(`Are you sure you want to delete "${page.title}"?`)) {

static/admin/js/platforms.js

@@ -0,0 +1,58 @@
+/**
+ * Platforms Manager - Alpine.js Component
+ *
+ * Handles platform listing and management for multi-platform CMS.
+ */
+
+function platformsManager() {
+  return {
+    // State
+    platforms: [],
+    loading: true,
+    error: null,
+
+    // Lifecycle
+    async init() {
+      this.currentPage = "platforms";
+      await this.loadPlatforms();
+    },
+
+    // API Methods
+    async loadPlatforms() {
+      this.loading = true;
+      this.error = null;
+
+      try {
+        const response = await apiClient.get("/admin/platforms");
+        this.platforms = response.platforms || [];
+        console.log(`[PLATFORMS] Loaded ${this.platforms.length} platforms`);
+      } catch (err) {
+        console.error("[PLATFORMS] Error loading platforms:", err);
+        this.error = err.message || "Failed to load platforms";
+      } finally {
+        this.loading = false;
+      }
+    },
+
+    // Helper Methods
+    getPlatformIcon(code) {
+      const icons = {
+        oms: "clipboard-list",
+        loyalty: "star",
+        sitebuilder: "template",
+        default: "globe-alt",
+      };
+      return icons[code] || icons.default;
+    },
+
+    formatDate(dateString) {
+      if (!dateString) return "—";
+      const date = new Date(dateString);
+      return date.toLocaleDateString("fr-LU", {
+        year: "numeric",
+        month: "short",
+        day: "numeric",
+      });
+    },
+  };
+}