From 0b3727414054a9faa4911734d5a8e69ec1b12405 Mon Sep 17 00:00:00 2001
From: Samir Boulahtit <samir.boulahtit@wizard.lu>
Date: Tue, 10 Feb 2026 19:17:51 +0100
Subject: [PATCH] =?UTF-8?q?fix(subscriptions):=20fix=20subscription=20UI?=
 =?UTF-8?q?=20and=20API=20after=20store=E2=86=92merchant=20migration?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Store detail page now shows all platform subscriptions instead of always
"No Subscription Found". Subscriptions listing page renamed from Store
to Merchant throughout (template, JS, menu, i18n) with Platform column
added. Tiers API supports platform_id filtering.

Merchant detail page no longer hardcodes 'oms' platform — loads all
platforms, shows subscription cards per platform with labels, and the
Create Subscription modal includes a platform selector with
platform-filtered tiers. Create button always accessible in Quick Actions.

Edit modal on /admin/subscriptions loads tiers from API filtered by
platform instead of hardcoded options, sends tier_code (not tier) to
match PATCH schema, and shows platform context.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 app/modules/billing/definition.py             |   2 +-
 app/modules/billing/locales/de.json           |   1 +
 app/modules/billing/locales/en.json           |   1 +
 app/modules/billing/locales/fr.json           |   1 +
 app/modules/billing/locales/lb.json           |   1 +
 app/modules/billing/routes/api/admin.py       | 104 +++++-----
 .../services/admin_subscription_service.py    |  10 +-
 .../billing/services/feature_service.py       |  45 +++--
 .../billing/static/admin/js/subscriptions.js  |  35 +++-
 .../billing/admin/subscriptions.html          |  34 ++--
 .../static/admin/js/merchant-detail.js        | 117 +++++------
 .../tenancy/static/admin/js/store-detail.js   |  32 ++-
 .../tenancy/admin/merchant-detail.html        | 182 ++++++++++--------
 .../templates/tenancy/admin/store-detail.html | 175 +++++++++--------
 14 files changed, 414 insertions(+), 326 deletions(-)

diff --git a/app/modules/billing/definition.py b/app/modules/billing/definition.py
index 3e716cf0..41d1bd54 100644
--- a/app/modules/billing/definition.py
+++ b/app/modules/billing/definition.py
@@ -171,7 +171,7 @@ billing_module = ModuleDefinition(
                     ),
                     MenuItemDefinition(
                         id="subscriptions",
-                        label_key="billing.menu.store_subscriptions",
+                        label_key="billing.menu.merchant_subscriptions",
                         icon="credit-card",
                         route="/admin/subscriptions",
                         order=20,
diff --git a/app/modules/billing/locales/de.json b/app/modules/billing/locales/de.json
index 8ff05f4a..c0036fb2 100644
--- a/app/modules/billing/locales/de.json
+++ b/app/modules/billing/locales/de.json
@@ -128,6 +128,7 @@
         "billing_subscriptions": "Abrechnung & Abonnements",
         "subscription_tiers": "Abo-Stufen",
         "store_subscriptions": "Shop-Abonnements",
+        "merchant_subscriptions": "Händler-Abonnements",
         "billing_history": "Abrechnungsverlauf",
         "sales_orders": "Verkäufe & Bestellungen",
         "invoices": "Rechnungen",
diff --git a/app/modules/billing/locales/en.json b/app/modules/billing/locales/en.json
index 215ebbdd..c1f7b52b 100644
--- a/app/modules/billing/locales/en.json
+++ b/app/modules/billing/locales/en.json
@@ -128,6 +128,7 @@
         "billing_subscriptions": "Billing & Subscriptions",
         "subscription_tiers": "Subscription Tiers",
         "store_subscriptions": "Store Subscriptions",
+        "merchant_subscriptions": "Merchant Subscriptions",
         "billing_history": "Billing History",
         "sales_orders": "Sales & Orders",
         "invoices": "Invoices",
diff --git a/app/modules/billing/locales/fr.json b/app/modules/billing/locales/fr.json
index d2afd269..da3df541 100644
--- a/app/modules/billing/locales/fr.json
+++ b/app/modules/billing/locales/fr.json
@@ -128,6 +128,7 @@
         "billing_subscriptions": "Facturation et Abonnements",
         "subscription_tiers": "Niveaux d'abonnement",
         "store_subscriptions": "Abonnements des magasins",
+        "merchant_subscriptions": "Abonnements des marchands",
         "billing_history": "Historique de facturation",
         "sales_orders": "Ventes et Commandes",
         "invoices": "Factures",
diff --git a/app/modules/billing/locales/lb.json b/app/modules/billing/locales/lb.json
index a8e86afe..2a7042c0 100644
--- a/app/modules/billing/locales/lb.json
+++ b/app/modules/billing/locales/lb.json
@@ -128,6 +128,7 @@
         "billing_subscriptions": "Ofrechnung & Abonnementer",
         "subscription_tiers": "Abo-Stufen",
         "store_subscriptions": "Buttek-Abonnementer",
+        "merchant_subscriptions": "Händler-Abonnementer",
         "billing_history": "Ofrechnungsverlaf",
         "sales_orders": "Verkaf & Bestellungen",
         "invoices": "Rechnungen",
diff --git a/app/modules/billing/routes/api/admin.py b/app/modules/billing/routes/api/admin.py
index 19f8a5bf..f5735e31 100644
--- a/app/modules/billing/routes/api/admin.py
+++ b/app/modules/billing/routes/api/admin.py
@@ -16,6 +16,7 @@ from sqlalchemy.orm import Session
 
 from app.api.deps import get_current_admin_api, require_module_access
 from app.core.database import get_db
+from app.exceptions import ResourceNotFoundException
 from app.modules.billing.services import admin_subscription_service, subscription_service
 from app.modules.enums import FrontendType
 from app.modules.billing.schemas import (
@@ -51,11 +52,12 @@ admin_router = APIRouter(
 @admin_router.get("/tiers", response_model=SubscriptionTierListResponse)
 def list_subscription_tiers(
     include_inactive: bool = Query(False, description="Include inactive tiers"),
+    platform_id: int | None = Query(None, description="Filter tiers by platform"),
     current_user: UserContext = Depends(get_current_admin_api),
     db: Session = Depends(get_db),
 ):
     """List all subscription tiers."""
-    tiers = admin_subscription_service.get_tiers(db, include_inactive=include_inactive)
+    tiers = admin_subscription_service.get_tiers(db, include_inactive=include_inactive, platform_id=platform_id)
 
     return SubscriptionTierListResponse(
         tiers=[SubscriptionTierResponse.model_validate(t) for t in tiers],
@@ -133,15 +135,18 @@ def list_merchant_subscriptions(
         db, page=page, per_page=per_page, status=status, tier=tier, search=search
     )
 
+    from app.modules.tenancy.models import Platform
+
     subscriptions = []
     for sub, merchant in data["results"]:
         sub_resp = MerchantSubscriptionAdminResponse.model_validate(sub)
         tier_name = sub.tier.name if sub.tier else None
+        platform = db.query(Platform).filter(Platform.id == sub.platform_id).first()
         subscriptions.append(
             MerchantSubscriptionWithMerchant(
                 **sub_resp.model_dump(),
                 merchant_name=merchant.name,
-                platform_name="",  # Platform name can be resolved if needed
+                platform_name=platform.name if platform else "",
                 tier_name=tier_name,
             )
         )
@@ -244,63 +249,64 @@ def get_subscription_for_store(
     db: Session = Depends(get_db),
 ):
     """
-    Get subscription + feature usage for a store (resolves to merchant).
+    Get subscriptions + feature usage for a store (resolves to merchant).
 
     Convenience endpoint for the admin store detail page. Resolves
-    store -> merchant -> subscription internally and returns subscription
-    info with feature usage metrics.
+    store -> merchant -> all platform subscriptions and returns a list
+    of subscription entries with feature usage metrics.
     """
     from app.modules.billing.services.feature_service import feature_service
-    from app.modules.billing.schemas.subscription import FeatureSummaryResponse
+    from app.modules.tenancy.models import Platform
 
-    # Resolve store to merchant
-    merchant_id, platform_id = feature_service._get_merchant_for_store(db, store_id)
-    if merchant_id is None or platform_id is None:
-        raise HTTPException(status_code=404, detail="Store not found or has no merchant association")
+    # Resolve store to merchant + all platform IDs
+    merchant_id, platform_ids = feature_service._get_merchant_and_platforms_for_store(db, store_id)
+    if merchant_id is None or not platform_ids:
+        raise HTTPException(status_code=404, detail="Store not found or has no platform association")
 
-    # Get subscription
-    try:
-        sub, merchant = admin_subscription_service.get_subscription(
-            db, merchant_id, platform_id
-        )
-    except Exception:
-        return {
-            "subscription": None,
-            "tier": None,
-            "features": [],
-        }
+    results = []
+    for pid in platform_ids:
+        try:
+            sub, merchant = admin_subscription_service.get_subscription(db, merchant_id, pid)
+        except ResourceNotFoundException:
+            continue
 
-    # Get feature summary
-    features_summary = feature_service.get_merchant_features_summary(db, merchant_id, platform_id)
+        # Get feature summary
+        features_summary = feature_service.get_merchant_features_summary(db, merchant_id, pid)
 
-    # Build tier info
-    tier_info = None
-    if sub.tier:
-        tier_info = {
-            "code": sub.tier.code,
-            "name": sub.tier.name,
-            "feature_codes": [fl.feature_code for fl in (sub.tier.feature_limits or [])],
-        }
+        # Build tier info
+        tier_info = None
+        if sub.tier:
+            tier_info = {
+                "code": sub.tier.code,
+                "name": sub.tier.name,
+                "feature_codes": [fl.feature_code for fl in (sub.tier.feature_limits or [])],
+            }
 
-    # Build usage metrics (quantitative features only)
-    usage_metrics = []
-    for fs in features_summary:
-        if fs.feature_type == "quantitative" and fs.enabled:
-            usage_metrics.append({
-                "name": fs.name_key.replace("_", " ").title(),
-                "current": fs.current or 0,
-                "limit": fs.limit,
-                "percentage": fs.percent_used or 0,
-                "is_unlimited": fs.limit is None,
-                "is_at_limit": fs.remaining == 0 if fs.remaining is not None else False,
-                "is_approaching_limit": (fs.percent_used or 0) >= 80,
-            })
+        # Build usage metrics (quantitative features only)
+        usage_metrics = []
+        for fs in features_summary:
+            if fs.feature_type == "quantitative" and fs.enabled:
+                usage_metrics.append({
+                    "name": fs.name_key.replace("_", " ").title(),
+                    "current": fs.current or 0,
+                    "limit": fs.limit,
+                    "percentage": fs.percent_used or 0,
+                    "is_unlimited": fs.limit is None,
+                    "is_at_limit": fs.remaining == 0 if fs.remaining is not None else False,
+                    "is_approaching_limit": (fs.percent_used or 0) >= 80,
+                })
 
-    return {
-        "subscription": MerchantSubscriptionAdminResponse.model_validate(sub).model_dump(),
-        "tier": tier_info,
-        "features": usage_metrics,
-    }
+        # Resolve platform name
+        platform = db.query(Platform).filter(Platform.id == pid).first()
+
+        results.append({
+            "subscription": MerchantSubscriptionAdminResponse.model_validate(sub).model_dump(),
+            "tier": tier_info,
+            "features": usage_metrics,
+            "platform_name": platform.name if platform else "",
+        })
+
+    return {"subscriptions": results}
 
 
 # ============================================================================
diff --git a/app/modules/billing/services/admin_subscription_service.py b/app/modules/billing/services/admin_subscription_service.py
index 61a171bd..649b9b25 100644
--- a/app/modules/billing/services/admin_subscription_service.py
+++ b/app/modules/billing/services/admin_subscription_service.py
@@ -40,14 +40,20 @@ class AdminSubscriptionService:
     # =========================================================================
 
     def get_tiers(
-        self, db: Session, include_inactive: bool = False
+        self, db: Session, include_inactive: bool = False, platform_id: int | None = None
     ) -> list[SubscriptionTier]:
-        """Get all subscription tiers."""
+        """Get all subscription tiers, optionally filtered by platform."""
         query = db.query(SubscriptionTier)
 
         if not include_inactive:
             query = query.filter(SubscriptionTier.is_active == True)  # noqa: E712
 
+        if platform_id is not None:
+            query = query.filter(
+                (SubscriptionTier.platform_id == platform_id)
+                | (SubscriptionTier.platform_id.is_(None))
+            )
+
         return query.order_by(SubscriptionTier.display_order).all()
 
     def get_tier_by_code(self, db: Session, tier_code: str) -> SubscriptionTier:
diff --git a/app/modules/billing/services/feature_service.py b/app/modules/billing/services/feature_service.py
index 0ef8f332..85c30a25 100644
--- a/app/modules/billing/services/feature_service.py
+++ b/app/modules/billing/services/feature_service.py
@@ -115,27 +115,48 @@ class FeatureService:
         Returns:
             Tuple of (merchant_id, platform_id), either may be None
         """
-        from app.modules.tenancy.models import Store
+        from app.modules.tenancy.models import Store, StorePlatform
 
         store = db.query(Store).filter(Store.id == store_id).first()
         if not store:
             return None, None
 
         merchant_id = store.merchant_id
-        # Get platform_id from store's platform association
-        platform_id = getattr(store, "platform_id", None)
-        if platform_id is None:
-            # Try StorePlatform junction
-            from app.modules.tenancy.models import StorePlatform
-            sp = (
-                db.query(StorePlatform.platform_id)
-                .filter(StorePlatform.store_id == store_id)
-                .first()
-            )
-            platform_id = sp[0] if sp else None
+        # Get primary platform_id from StorePlatform junction
+        sp = (
+            db.query(StorePlatform.platform_id)
+            .filter(StorePlatform.store_id == store_id, StorePlatform.is_active == True)  # noqa: E712
+            .order_by(StorePlatform.is_primary.desc())
+            .first()
+        )
+        platform_id = sp[0] if sp else None
 
         return merchant_id, platform_id
 
+    def _get_merchant_and_platforms_for_store(
+        self, db: Session, store_id: int
+    ) -> tuple[int | None, list[int]]:
+        """
+        Resolve store_id to (merchant_id, [platform_ids]).
+
+        Returns all active platform IDs for the store's merchant,
+        ordered with the primary platform first.
+        """
+        from app.modules.tenancy.models import Store, StorePlatform
+
+        store = db.query(Store).filter(Store.id == store_id).first()
+        if not store:
+            return None, []
+
+        platform_ids = [
+            sp[0]
+            for sp in db.query(StorePlatform.platform_id)
+            .filter(StorePlatform.store_id == store_id, StorePlatform.is_active == True)  # noqa: E712
+            .order_by(StorePlatform.is_primary.desc())
+            .all()
+        ]
+        return store.merchant_id, platform_ids
+
     def _get_subscription(
         self, db: Session, merchant_id: int, platform_id: int
     ) -> MerchantSubscription | None:
diff --git a/app/modules/billing/static/admin/js/subscriptions.js b/app/modules/billing/static/admin/js/subscriptions.js
index 7346b173..71e2be9d 100644
--- a/app/modules/billing/static/admin/js/subscriptions.js
+++ b/app/modules/billing/static/admin/js/subscriptions.js
@@ -39,17 +39,21 @@ function adminSubscriptions() {
         },
 
         // Sorting
-        sortBy: 'store_name',
+        sortBy: 'merchant_name',
         sortOrder: 'asc',
 
         // Modal state
         showModal: false,
         editingSub: null,
         formData: {
-            tier: '',
+            tier_code: '',
             status: ''
         },
 
+        // Tiers for edit modal
+        editTiers: [],
+        loadingTiers: false,
+
         // Feature overrides
         featureOverrides: [],
         quantitativeFeatures: [],
@@ -208,15 +212,34 @@ function adminSubscriptions() {
         async openEditModal(sub) {
             this.editingSub = sub;
             this.formData = {
-                tier: sub.tier,
+                tier_code: sub.tier,
                 status: sub.status
             };
             this.featureOverrides = [];
             this.quantitativeFeatures = [];
             this.showModal = true;
 
-            // Load feature catalog and merchant overrides
-            await this.loadFeatureOverrides(sub.merchant_id);
+            // Load tiers filtered by platform and feature overrides in parallel
+            await Promise.all([
+                this.loadEditTiers(sub.platform_id),
+                this.loadFeatureOverrides(sub.merchant_id),
+            ]);
+        },
+
+        async loadEditTiers(platformId) {
+            this.loadingTiers = true;
+            try {
+                const url = platformId
+                    ? `/admin/subscriptions/tiers?platform_id=${platformId}`
+                    : '/admin/subscriptions/tiers';
+                const response = await apiClient.get(url);
+                this.editTiers = response.tiers || [];
+                subsLog.info('Loaded tiers for edit modal:', this.editTiers.length);
+            } catch (error) {
+                subsLog.error('Failed to load tiers:', error);
+            } finally {
+                this.loadingTiers = false;
+            }
         },
 
         closeModal() {
@@ -312,7 +335,7 @@ function adminSubscriptions() {
                 // Save feature overrides
                 await this.saveFeatureOverrides(this.editingSub.merchant_id);
 
-                this.successMessage = `Subscription for "${this.editingSub.store_name || this.editingSub.merchant_name}" updated`;
+                this.successMessage = `Subscription for "${this.editingSub.merchant_name}" updated`;
 
                 this.closeModal();
                 await this.loadSubscriptions();
diff --git a/app/modules/billing/templates/billing/admin/subscriptions.html b/app/modules/billing/templates/billing/admin/subscriptions.html
index cda5501a..f8c332f4 100644
--- a/app/modules/billing/templates/billing/admin/subscriptions.html
+++ b/app/modules/billing/templates/billing/admin/subscriptions.html
@@ -5,12 +5,12 @@
 {% from 'shared/macros/tables.html' import table_wrapper, table_header_custom, th_sortable %}
 {% from 'shared/macros/pagination.html' import pagination %}
 
-{% block title %}Store Subscriptions{% endblock %}
+{% block title %}Merchant Subscriptions{% endblock %}
 
 {% block alpine_data %}adminSubscriptions(){% endblock %}
 
 {% block content %}
-{{ page_header_refresh('Store Subscriptions') }}
+{{ page_header_refresh('Merchant Subscriptions') }}
 
 {{ alert_dynamic(type='success', title='Success', message_var='successMessage', show_condition='successMessage') }}
 
@@ -94,7 +94,7 @@
                 type="text"
                 x-model="filters.search"
                 @input.debounce.300ms="loadSubscriptions()"
-                placeholder="Search store name..."
+                placeholder="Search merchant name..."
                 class="w-full px-3 py-2 border border-gray-300 rounded-lg dark:border-gray-600 dark:bg-gray-700 dark:text-white"
             >
         </div>
@@ -140,7 +140,8 @@
 {% call table_wrapper() %}
     <table class="w-full whitespace-nowrap">
         {% call table_header_custom() %}
-            {{ th_sortable('store_name', 'Store', 'sortBy', 'sortOrder') }}
+            {{ th_sortable('merchant_name', 'Merchant', 'sortBy', 'sortOrder') }}
+            <th class="px-4 py-3">Platform</th>
             {{ th_sortable('tier', 'Tier', 'sortBy', 'sortOrder') }}
             {{ th_sortable('status', 'Status', 'sortBy', 'sortOrder') }}
             <th class="px-4 py-3 text-center">Features</th>
@@ -150,7 +151,7 @@
         <tbody class="bg-white divide-y dark:divide-gray-700 dark:bg-gray-800">
             <template x-if="loading">
                 <tr>
-                    <td colspan="6" class="px-4 py-8 text-center text-gray-500 dark:text-gray-400">
+                    <td colspan="7" class="px-4 py-8 text-center text-gray-500 dark:text-gray-400">
                         <span x-html="$icon('refresh', 'inline w-6 h-6 animate-spin mr-2')"></span>
                         Loading subscriptions...
                     </td>
@@ -158,7 +159,7 @@
             </template>
             <template x-if="!loading && subscriptions.length === 0">
                 <tr>
-                    <td colspan="6" class="px-4 py-8 text-center text-gray-500 dark:text-gray-400">
+                    <td colspan="7" class="px-4 py-8 text-center text-gray-500 dark:text-gray-400">
                         No subscriptions found.
                     </td>
                 </tr>
@@ -168,11 +169,13 @@
                     <td class="px-4 py-3">
                         <div class="flex items-center">
                             <div>
-                                <p class="font-semibold text-gray-900 dark:text-gray-100" x-text="sub.store_name"></p>
-                                <p class="text-xs text-gray-500" x-text="sub.store_code"></p>
+                                <p class="font-semibold text-gray-900 dark:text-gray-100" x-text="sub.merchant_name"></p>
                             </div>
                         </div>
                     </td>
+                    <td class="px-4 py-3">
+                        <span class="text-sm text-gray-600 dark:text-gray-400" x-text="sub.platform_name || '-'"></span>
+                    </td>
                     <td class="px-4 py-3">
                         <span class="px-2 py-1 text-xs font-medium rounded-full"
                               :class="{
@@ -204,7 +207,7 @@
                             <button @click="openEditModal(sub)" class="p-2 text-gray-500 hover:text-purple-600 dark:hover:text-purple-400" title="Edit">
                                 <span x-html="$icon('pencil', 'w-4 h-4')"></span>
                             </button>
-                            <a :href="'/admin/stores/' + sub.store_code" class="p-2 text-gray-500 hover:text-blue-600 dark:hover:text-blue-400" title="View Store">
+                            <a :href="'/admin/merchants/' + sub.merchant_id" class="p-2 text-gray-500 hover:text-blue-600 dark:hover:text-blue-400" title="View Merchant">
                                 <span x-html="$icon('external-link', 'w-4 h-4')"></span>
                             </a>
                         </div>
@@ -224,20 +227,21 @@
 <div x-show="showModal" x-cloak class="fixed inset-0 z-50 flex items-center justify-center overflow-auto bg-black bg-opacity-50">
     <div class="relative w-full max-w-lg p-6 mx-4 bg-white rounded-lg shadow-xl dark:bg-gray-800" @click.away="closeModal()">
         <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Edit Subscription</h3>
-        <p class="text-sm text-gray-500 dark:text-gray-400 mb-4" x-text="'Store: ' + (editingSub?.store_name || '')"></p>
+        <p class="text-sm text-gray-500 dark:text-gray-400 mb-1" x-text="'Merchant: ' + (editingSub?.merchant_name || '')"></p>
+        <p class="text-sm text-gray-500 dark:text-gray-400 mb-4" x-show="editingSub?.platform_name" x-text="'Platform: ' + (editingSub?.platform_name || '')"></p>
 
         <div class="space-y-4">
             <!-- Tier -->
             <div>
                 <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Tier</label>
                 <select
-                    x-model="formData.tier"
+                    x-model="formData.tier_code"
                     class="w-full px-3 py-2 border border-gray-300 rounded-lg dark:border-gray-600 dark:bg-gray-700 dark:text-white"
+                    :disabled="loadingTiers"
                 >
-                    <option value="essential">Essential</option>
-                    <option value="professional">Professional</option>
-                    <option value="business">Business</option>
-                    <option value="enterprise">Enterprise</option>
+                    <template x-for="t in editTiers" :key="t.code">
+                        <option :value="t.code" x-text="t.name"></option>
+                    </template>
                 </select>
             </div>
 
diff --git a/app/modules/tenancy/static/admin/js/merchant-detail.js b/app/modules/tenancy/static/admin/js/merchant-detail.js
index 82d40951..538c5886 100644
--- a/app/modules/tenancy/static/admin/js/merchant-detail.js
+++ b/app/modules/tenancy/static/admin/js/merchant-detail.js
@@ -17,13 +17,12 @@ function adminMerchantDetail() {
         merchantId: null,
 
         // Subscription state
-        subscription: null,
-        subscriptionTier: null,
-        usageMetrics: [],
+        platforms: [],
+        subscriptions: [],
         tiers: [],
-        platformId: null,
+        tiersForPlatformId: null,
         showCreateSubscriptionModal: false,
-        createForm: { tier_code: 'essential', status: 'trial', trial_days: 14, is_annual: false },
+        createForm: { platform_id: null, tier_code: 'essential', status: 'trial', trial_days: 14, is_annual: false },
         creatingSubscription: false,
 
         // Initialize
@@ -49,9 +48,7 @@ function adminMerchantDetail() {
                 merchantDetailLog.info('Viewing merchant:', this.merchantId);
                 await this.loadMerchant();
                 await this.loadPlatforms();
-                if (this.platformId) {
-                    await this.loadSubscription();
-                }
+                await this.loadSubscriptions();
             } else {
                 merchantDetailLog.error('No merchant ID in URL');
                 this.error = 'Invalid merchant URL';
@@ -98,64 +95,61 @@ function adminMerchantDetail() {
             }
         },
 
-        // Load platforms and find OMS platform ID
+        // Load all available platforms
         async loadPlatforms() {
             try {
                 const response = await apiClient.get('/admin/platforms');
-                const platforms = response.platforms || [];
-                const oms = platforms.find(p => p.code === 'oms');
-                if (oms) {
-                    this.platformId = oms.id;
-                    merchantDetailLog.info('OMS platform resolved:', this.platformId);
-                } else {
-                    merchantDetailLog.warn('OMS platform not found');
-                }
+                this.platforms = (response.platforms || []).map(p => ({ id: p.id, name: p.name, code: p.code }));
+                merchantDetailLog.info('Platforms loaded:', this.platforms.length);
             } catch (error) {
                 merchantDetailLog.warn('Failed to load platforms:', error.message);
             }
         },
 
-        // Load subscription for this merchant
-        async loadSubscription() {
-            if (!this.merchantId || !this.platformId) return;
+        // Load subscriptions for all platforms
+        async loadSubscriptions() {
+            if (!this.merchantId || this.platforms.length === 0) return;
 
-            merchantDetailLog.info('Loading subscription for merchant:', this.merchantId);
+            merchantDetailLog.info('Loading subscriptions for merchant:', this.merchantId);
+            this.subscriptions = [];
 
-            try {
-                const url = `/admin/subscriptions/merchants/${this.merchantId}/platforms/${this.platformId}`;
-                window.LogConfig.logApiCall('GET', url, null, 'request');
+            for (const platform of this.platforms) {
+                try {
+                    const url = `/admin/subscriptions/merchants/${this.merchantId}/platforms/${platform.id}`;
+                    const response = await apiClient.get(url);
+                    const sub = response.subscription || response;
 
-                const response = await apiClient.get(url);
-                window.LogConfig.logApiCall('GET', url, response, 'response');
-
-                this.subscription = response.subscription || response;
-                this.subscriptionTier = response.tier || null;
-                this.usageMetrics = response.features || [];
-
-                merchantDetailLog.info('Subscription loaded:', {
-                    tier: this.subscription?.tier,
-                    status: this.subscription?.status,
-                    features_count: this.usageMetrics.length
-                });
-
-            } catch (error) {
-                if (error.status === 404) {
-                    merchantDetailLog.info('No subscription found for merchant');
-                    this.subscription = null;
-                    this.usageMetrics = [];
-                } else {
-                    merchantDetailLog.warn('Failed to load subscription:', error.message);
+                    this.subscriptions.push({
+                        subscription: sub,
+                        tier: response.tier || null,
+                        features: response.features || [],
+                        platform_id: platform.id,
+                        platform_name: platform.name,
+                    });
+                } catch (error) {
+                    if (error.status !== 404) {
+                        merchantDetailLog.warn(`Failed to load subscription for platform ${platform.name}:`, error.message);
+                    }
                 }
             }
+
+            merchantDetailLog.info('Subscriptions loaded:', {
+                count: this.subscriptions.length,
+                platforms: this.subscriptions.map(e => e.platform_name)
+            });
         },
 
-        // Load available subscription tiers
-        async loadTiers() {
-            if (this.tiers.length > 0) return;
+        // Load available subscription tiers for a platform
+        async loadTiers(platformId) {
+            if (this.tiers.length > 0 && this.tiersForPlatformId === platformId) return;
 
             try {
-                const response = await apiClient.get('/admin/subscriptions/tiers');
+                const url = platformId
+                    ? `/admin/subscriptions/tiers?platform_id=${platformId}`
+                    : '/admin/subscriptions/tiers';
+                const response = await apiClient.get(url);
                 this.tiers = response.tiers || [];
+                this.tiersForPlatformId = platformId;
                 merchantDetailLog.info('Loaded tiers:', this.tiers.length);
             } catch (error) {
                 merchantDetailLog.warn('Failed to load tiers:', error.message);
@@ -164,23 +158,32 @@ function adminMerchantDetail() {
 
         // Open create subscription modal
         async openCreateSubscriptionModal() {
-            await this.loadTiers();
-            this.createForm = { tier_code: 'essential', status: 'trial', trial_days: 14, is_annual: false };
+            const firstPlatformId = this.platforms.length > 0 ? this.platforms[0].id : null;
+            this.createForm = { platform_id: firstPlatformId, tier_code: 'essential', status: 'trial', trial_days: 14, is_annual: false };
+            await this.loadTiers(firstPlatformId);
             this.showCreateSubscriptionModal = true;
         },
 
+        // Reload tiers when platform changes in create modal
+        async onCreatePlatformChange() {
+            this.tiers = [];
+            this.tiersForPlatformId = null;
+            await this.loadTiers(this.createForm.platform_id);
+        },
+
         // Create subscription for this merchant
         async createSubscription() {
-            if (!this.merchantId || !this.platformId) return;
+            if (!this.merchantId || !this.createForm.platform_id) return;
 
             this.creatingSubscription = true;
-            merchantDetailLog.info('Creating subscription for merchant:', this.merchantId);
+            const platformId = this.createForm.platform_id;
+            merchantDetailLog.info('Creating subscription for merchant:', this.merchantId, 'platform:', platformId);
 
             try {
-                const url = `/admin/subscriptions/merchants/${this.merchantId}/platforms/${this.platformId}`;
+                const url = `/admin/subscriptions/merchants/${this.merchantId}/platforms/${platformId}`;
                 const payload = {
                     merchant_id: parseInt(this.merchantId),
-                    platform_id: this.platformId,
+                    platform_id: platformId,
                     tier_code: this.createForm.tier_code,
                     status: this.createForm.status,
                     trial_days: this.createForm.status === 'trial' ? parseInt(this.createForm.trial_days) : 0,
@@ -195,7 +198,7 @@ function adminMerchantDetail() {
                 Utils.showToast('Subscription created successfully', 'success');
                 merchantDetailLog.info('Subscription created');
 
-                await this.loadSubscription();
+                await this.loadSubscriptions();
 
             } catch (error) {
                 window.LogConfig.logError(error, 'Create Subscription');
@@ -276,9 +279,7 @@ function adminMerchantDetail() {
         async refresh() {
             merchantDetailLog.info('=== MERCHANT REFRESH TRIGGERED ===');
             await this.loadMerchant();
-            if (this.platformId) {
-                await this.loadSubscription();
-            }
+            await this.loadSubscriptions();
             Utils.showToast(I18n.t('tenancy.messages.merchant_details_refreshed'), 'success');
             merchantDetailLog.info('=== MERCHANT REFRESH COMPLETE ===');
         }
diff --git a/app/modules/tenancy/static/admin/js/store-detail.js b/app/modules/tenancy/static/admin/js/store-detail.js
index b8b4bb67..9aad4fa3 100644
--- a/app/modules/tenancy/static/admin/js/store-detail.js
+++ b/app/modules/tenancy/static/admin/js/store-detail.js
@@ -13,9 +13,7 @@ function adminStoreDetail() {
         // Store detail page specific state
         currentPage: 'store-detail',
         store: null,
-        subscription: null,
-        subscriptionTier: null,
-        usageMetrics: [],
+        subscriptions: [],
         loading: false,
         error: null,
         storeCode: null,
@@ -44,7 +42,7 @@ function adminStoreDetail() {
                 await this.loadStore();
                 // Load subscription after store is loaded
                 if (this.store?.id) {
-                    await this.loadSubscription();
+                    await this.loadSubscriptions();
                 }
             } else {
                 detailLog.error('No store code in URL');
@@ -102,14 +100,14 @@ function adminStoreDetail() {
             return formatted;
         },
 
-        // Load subscription data for this store via convenience endpoint
-        async loadSubscription() {
+        // Load subscriptions data for this store via convenience endpoint
+        async loadSubscriptions() {
             if (!this.store?.id) {
-                detailLog.warn('Cannot load subscription: no store ID');
+                detailLog.warn('Cannot load subscriptions: no store ID');
                 return;
             }
 
-            detailLog.info('Loading subscription for store:', this.store.id);
+            detailLog.info('Loading subscriptions for store:', this.store.id);
 
             try {
                 const url = `/admin/subscriptions/store/${this.store.id}`;
@@ -118,24 +116,20 @@ function adminStoreDetail() {
                 const response = await apiClient.get(url);
                 window.LogConfig.logApiCall('GET', url, response, 'response');
 
-                this.subscription = response.subscription;
-                this.subscriptionTier = response.tier;
-                this.usageMetrics = response.features || [];
+                this.subscriptions = response.subscriptions || [];
 
-                detailLog.info('Subscription loaded:', {
-                    tier: this.subscription?.tier,
-                    status: this.subscription?.status,
-                    features_count: this.usageMetrics.length
+                detailLog.info('Subscriptions loaded:', {
+                    count: this.subscriptions.length,
+                    platforms: this.subscriptions.map(e => e.platform_name)
                 });
 
             } catch (error) {
                 // 404 means no subscription exists - that's OK
                 if (error.status === 404) {
-                    detailLog.info('No subscription found for store');
-                    this.subscription = null;
-                    this.usageMetrics = [];
+                    detailLog.info('No subscriptions found for store');
+                    this.subscriptions = [];
                 } else {
-                    detailLog.warn('Failed to load subscription:', error.message);
+                    detailLog.warn('Failed to load subscriptions:', error.message);
                 }
             }
         },
diff --git a/app/modules/tenancy/templates/tenancy/admin/merchant-detail.html b/app/modules/tenancy/templates/tenancy/admin/merchant-detail.html
index 300243c9..406a6bff 100644
--- a/app/modules/tenancy/templates/tenancy/admin/merchant-detail.html
+++ b/app/modules/tenancy/templates/tenancy/admin/merchant-detail.html
@@ -32,6 +32,13 @@
                 <span x-html="$icon('edit', 'w-4 h-4 mr-2')"></span>
                 Edit Merchant
             </a>
+            <button
+                @click="openCreateSubscriptionModal()"
+                x-show="platforms.length > 0"
+                class="flex items-center px-4 py-2 text-sm font-medium leading-5 text-white transition-colors duration-150 bg-green-600 border border-transparent rounded-lg hover:bg-green-700 focus:outline-none focus:shadow-outline-green">
+                <span x-html="$icon('plus', 'w-4 h-4 mr-2')"></span>
+                Create Subscription
+            </button>
             <button
                 @click="deleteMerchant()"
                 :disabled="merchant?.store_count > 0"
@@ -194,94 +201,99 @@
         </div>
     </div>
 
-    <!-- Subscription Card -->
-    <div class="px-4 py-3 mb-6 bg-white rounded-lg shadow-md dark:bg-gray-800" x-show="subscription">
-        <div class="flex items-center justify-between mb-4">
-            <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200">
-                Subscription
-            </h3>
-        </div>
+    <!-- Subscription Cards -->
+    <template x-for="entry in subscriptions" :key="entry.subscription.id">
+        <div class="px-4 py-3 mb-6 bg-white rounded-lg shadow-md dark:bg-gray-800">
+            <div class="flex items-center justify-between mb-4">
+                <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200">
+                    Subscription
+                    <span x-show="entry.platform_name" class="text-sm font-normal text-gray-500 dark:text-gray-400">
+                        — <span x-text="entry.platform_name"></span>
+                    </span>
+                </h3>
+            </div>
 
-        <!-- Tier and Status -->
-        <div class="flex flex-wrap items-center gap-4 mb-4">
-            <div class="flex items-center gap-2">
-                <span class="text-sm text-gray-600 dark:text-gray-400">Tier:</span>
-                <span class="px-2.5 py-0.5 text-sm font-medium rounded-full"
-                      :class="{
-                          'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300': subscription?.tier === 'essential',
-                          'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300': subscription?.tier === 'professional',
-                          'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-300': subscription?.tier === 'business',
-                          'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300': subscription?.tier === 'enterprise'
-                      }"
-                      x-text="subscription?.tier ? subscription.tier.charAt(0).toUpperCase() + subscription.tier.slice(1) : '-'">
-                </span>
-            </div>
-            <div class="flex items-center gap-2">
-                <span class="text-sm text-gray-600 dark:text-gray-400">Status:</span>
-                <span class="px-2.5 py-0.5 text-sm font-medium rounded-full"
-                      :class="{
-                          'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300': subscription?.status === 'active',
-                          'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300': subscription?.status === 'trial',
-                          'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300': subscription?.status === 'past_due',
-                          'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300': subscription?.status === 'cancelled' || subscription?.status === 'expired'
-                      }"
-                      x-text="subscription?.status ? subscription.status.replace('_', ' ').charAt(0).toUpperCase() + subscription.status.slice(1) : '-'">
-                </span>
-            </div>
-            <template x-if="subscription?.is_annual">
-                <span class="px-2.5 py-0.5 text-xs font-medium text-purple-800 bg-purple-100 rounded-full dark:bg-purple-900 dark:text-purple-300">
-                    Annual
-                </span>
-            </template>
-        </div>
-
-        <!-- Period Info -->
-        <div class="flex flex-wrap gap-4 mb-4 text-sm">
-            <div>
-                <span class="text-gray-600 dark:text-gray-400">Period:</span>
-                <span class="ml-1 text-gray-700 dark:text-gray-300" x-text="formatDate(subscription?.period_start)"></span>
-                <span class="text-gray-400">&rarr;</span>
-                <span class="text-gray-700 dark:text-gray-300" x-text="formatDate(subscription?.period_end)"></span>
-            </div>
-            <template x-if="subscription?.trial_ends_at">
-                <div>
-                    <span class="text-gray-600 dark:text-gray-400">Trial ends:</span>
-                    <span class="ml-1 text-gray-700 dark:text-gray-300" x-text="formatDate(subscription?.trial_ends_at)"></span>
+            <!-- Tier and Status -->
+            <div class="flex flex-wrap items-center gap-4 mb-4">
+                <div class="flex items-center gap-2">
+                    <span class="text-sm text-gray-600 dark:text-gray-400">Tier:</span>
+                    <span class="px-2.5 py-0.5 text-sm font-medium rounded-full"
+                          :class="{
+                              'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300': entry.subscription?.tier === 'essential',
+                              'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300': entry.subscription?.tier === 'professional',
+                              'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-300': entry.subscription?.tier === 'business',
+                              'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300': entry.subscription?.tier === 'enterprise'
+                          }"
+                          x-text="entry.subscription?.tier ? entry.subscription.tier.charAt(0).toUpperCase() + entry.subscription.tier.slice(1) : '-'">
+                    </span>
                 </div>
-            </template>
-        </div>
+                <div class="flex items-center gap-2">
+                    <span class="text-sm text-gray-600 dark:text-gray-400">Status:</span>
+                    <span class="px-2.5 py-0.5 text-sm font-medium rounded-full"
+                          :class="{
+                              'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300': entry.subscription?.status === 'active',
+                              'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300': entry.subscription?.status === 'trial',
+                              'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300': entry.subscription?.status === 'past_due',
+                              'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300': entry.subscription?.status === 'cancelled' || entry.subscription?.status === 'expired'
+                          }"
+                          x-text="entry.subscription?.status ? entry.subscription.status.replace('_', ' ').charAt(0).toUpperCase() + entry.subscription.status.slice(1) : '-'">
+                    </span>
+                </div>
+                <template x-if="entry.subscription?.is_annual">
+                    <span class="px-2.5 py-0.5 text-xs font-medium text-purple-800 bg-purple-100 rounded-full dark:bg-purple-900 dark:text-purple-300">
+                        Annual
+                    </span>
+                </template>
+            </div>
 
-        <!-- Usage Meters -->
-        <div class="grid gap-4 md:grid-cols-3">
-            <template x-for="metric in usageMetrics" :key="metric.name">
-                <div class="p-3 bg-gray-50 rounded-lg dark:bg-gray-700">
-                    <div class="flex items-center justify-between mb-2">
-                        <span class="text-xs font-medium text-gray-600 dark:text-gray-400 uppercase" x-text="metric.name"></span>
+            <!-- Period Info -->
+            <div class="flex flex-wrap gap-4 mb-4 text-sm">
+                <div>
+                    <span class="text-gray-600 dark:text-gray-400">Period:</span>
+                    <span class="ml-1 text-gray-700 dark:text-gray-300" x-text="formatDate(entry.subscription?.period_start)"></span>
+                    <span class="text-gray-400">&rarr;</span>
+                    <span class="text-gray-700 dark:text-gray-300" x-text="formatDate(entry.subscription?.period_end)"></span>
+                </div>
+                <template x-if="entry.subscription?.trial_ends_at">
+                    <div>
+                        <span class="text-gray-600 dark:text-gray-400">Trial ends:</span>
+                        <span class="ml-1 text-gray-700 dark:text-gray-300" x-text="formatDate(entry.subscription?.trial_ends_at)"></span>
                     </div>
-                    <div class="flex items-baseline gap-1">
-                        <span class="text-xl font-bold text-gray-700 dark:text-gray-200" x-text="metric.current"></span>
-                        <span class="text-sm text-gray-500 dark:text-gray-400">
-                            / <span x-text="metric.is_unlimited ? '∞' : metric.limit"></span>
-                        </span>
-                    </div>
-                    <div class="mt-2 h-1.5 bg-gray-200 rounded-full dark:bg-gray-600" x-show="!metric.is_unlimited">
-                        <div class="h-1.5 rounded-full transition-all"
-                             :class="getUsageBarColor(metric.current, metric.limit)"
-                             :style="`width: ${Math.min(100, metric.percentage || 0)}%`">
+                </template>
+            </div>
+
+            <!-- Usage Meters -->
+            <div class="grid gap-4 md:grid-cols-3">
+                <template x-for="metric in entry.features" :key="metric.name">
+                    <div class="p-3 bg-gray-50 rounded-lg dark:bg-gray-700">
+                        <div class="flex items-center justify-between mb-2">
+                            <span class="text-xs font-medium text-gray-600 dark:text-gray-400 uppercase" x-text="metric.name"></span>
+                        </div>
+                        <div class="flex items-baseline gap-1">
+                            <span class="text-xl font-bold text-gray-700 dark:text-gray-200" x-text="metric.current"></span>
+                            <span class="text-sm text-gray-500 dark:text-gray-400">
+                                / <span x-text="metric.is_unlimited ? '∞' : metric.limit"></span>
+                            </span>
+                        </div>
+                        <div class="mt-2 h-1.5 bg-gray-200 rounded-full dark:bg-gray-600" x-show="!metric.is_unlimited">
+                            <div class="h-1.5 rounded-full transition-all"
+                                 :class="getUsageBarColor(metric.current, metric.limit)"
+                                 :style="`width: ${Math.min(100, metric.percentage || 0)}%`">
+                            </div>
                         </div>
                     </div>
-                </div>
-            </template>
-            <template x-if="usageMetrics.length === 0">
-                <div class="p-3 bg-gray-50 rounded-lg dark:bg-gray-700 md:col-span-3">
-                    <p class="text-sm text-gray-500 dark:text-gray-400 text-center">No usage data available</p>
-                </div>
-            </template>
+                </template>
+                <template x-if="entry.features.length === 0">
+                    <div class="p-3 bg-gray-50 rounded-lg dark:bg-gray-700 md:col-span-3">
+                        <p class="text-sm text-gray-500 dark:text-gray-400 text-center">No usage data available</p>
+                    </div>
+                </template>
+            </div>
         </div>
-    </div>
+    </template>
 
     <!-- No Subscription Notice -->
-    <div class="px-4 py-3 mb-6 bg-yellow-50 border border-yellow-200 rounded-lg dark:bg-yellow-900/20 dark:border-yellow-800" x-show="!subscription && !loading && platformId">
+    <div class="px-4 py-3 mb-6 bg-yellow-50 border border-yellow-200 rounded-lg dark:bg-yellow-900/20 dark:border-yellow-800" x-show="subscriptions.length === 0 && !loading && platforms.length > 0">
         <div class="flex items-center gap-3">
             <span x-html="$icon('exclamation', 'w-5 h-5 text-yellow-600 dark:text-yellow-400')"></span>
             <div>
@@ -302,6 +314,18 @@
         <div class="relative z-10 w-full max-w-md p-6 bg-white rounded-lg shadow-xl dark:bg-gray-800">
             <h3 class="mb-4 text-lg font-semibold text-gray-700 dark:text-gray-200">Create Subscription</h3>
 
+            <!-- Platform Selector -->
+            <div class="mb-4">
+                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Platform</label>
+                <select x-model="createForm.platform_id"
+                        @change="onCreatePlatformChange()"
+                        class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 focus:outline-none focus:ring-2 focus:ring-purple-500">
+                    <template x-for="p in platforms" :key="p.id">
+                        <option :value="p.id" x-text="p.name"></option>
+                    </template>
+                </select>
+            </div>
+
             <!-- Tier Selector -->
             <div class="mb-4">
                 <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Subscription Tier</label>
diff --git a/app/modules/tenancy/templates/tenancy/admin/store-detail.html b/app/modules/tenancy/templates/tenancy/admin/store-detail.html
index 9ab7dbbe..5a1bb330 100644
--- a/app/modules/tenancy/templates/tenancy/admin/store-detail.html
+++ b/app/modules/tenancy/templates/tenancy/admin/store-detail.html
@@ -106,100 +106,105 @@
         </div>
     </div>
 
-    <!-- Subscription Card -->
-    <div class="px-4 py-3 mb-6 bg-white rounded-lg shadow-md dark:bg-gray-800" x-show="subscription">
-        <div class="flex items-center justify-between mb-4">
-            <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200">
-                Subscription
-            </h3>
-            <a
-                :href="'/admin/merchants/' + store?.merchant_id"
-                class="flex items-center px-3 py-1.5 text-sm font-medium text-purple-600 hover:text-purple-700 dark:text-purple-400 dark:hover:text-purple-300">
-                <span x-html="$icon('external-link', 'w-4 h-4 mr-1')"></span>
-                Manage on Merchant Page
-            </a>
-        </div>
+    <!-- Subscription Cards -->
+    <template x-for="entry in subscriptions" :key="entry.subscription.id">
+        <div class="px-4 py-3 mb-6 bg-white rounded-lg shadow-md dark:bg-gray-800">
+            <div class="flex items-center justify-between mb-4">
+                <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200">
+                    Subscription
+                    <span x-show="entry.platform_name" class="text-sm font-normal text-gray-500 dark:text-gray-400">
+                        — <span x-text="entry.platform_name"></span>
+                    </span>
+                </h3>
+                <a
+                    :href="'/admin/merchants/' + store?.merchant_id"
+                    class="flex items-center px-3 py-1.5 text-sm font-medium text-purple-600 hover:text-purple-700 dark:text-purple-400 dark:hover:text-purple-300">
+                    <span x-html="$icon('external-link', 'w-4 h-4 mr-1')"></span>
+                    Manage on Merchant Page
+                </a>
+            </div>
 
-        <!-- Tier and Status -->
-        <div class="flex flex-wrap items-center gap-4 mb-4">
-            <div class="flex items-center gap-2">
-                <span class="text-sm text-gray-600 dark:text-gray-400">Tier:</span>
-                <span class="px-2.5 py-0.5 text-sm font-medium rounded-full"
-                      :class="{
-                          'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300': subscription?.tier === 'essential',
-                          'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300': subscription?.tier === 'professional',
-                          'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-300': subscription?.tier === 'business',
-                          'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300': subscription?.tier === 'enterprise'
-                      }"
-                      x-text="subscription?.tier ? subscription.tier.charAt(0).toUpperCase() + subscription.tier.slice(1) : '-'">
-                </span>
-            </div>
-            <div class="flex items-center gap-2">
-                <span class="text-sm text-gray-600 dark:text-gray-400">Status:</span>
-                <span class="px-2.5 py-0.5 text-sm font-medium rounded-full"
-                      :class="{
-                          'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300': subscription?.status === 'active',
-                          'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300': subscription?.status === 'trial',
-                          'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300': subscription?.status === 'past_due',
-                          'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300': subscription?.status === 'cancelled' || subscription?.status === 'expired'
-                      }"
-                      x-text="subscription?.status ? subscription.status.replace('_', ' ').charAt(0).toUpperCase() + subscription.status.slice(1) : '-'">
-                </span>
-            </div>
-            <template x-if="subscription?.is_annual">
-                <span class="px-2.5 py-0.5 text-xs font-medium text-purple-800 bg-purple-100 rounded-full dark:bg-purple-900 dark:text-purple-300">
-                    Annual
-                </span>
-            </template>
-        </div>
-
-        <!-- Period Info -->
-        <div class="flex flex-wrap gap-4 mb-4 text-sm">
-            <div>
-                <span class="text-gray-600 dark:text-gray-400">Period:</span>
-                <span class="ml-1 text-gray-700 dark:text-gray-300" x-text="formatDate(subscription?.period_start)"></span>
-                <span class="text-gray-400">→</span>
-                <span class="text-gray-700 dark:text-gray-300" x-text="formatDate(subscription?.period_end)"></span>
-            </div>
-            <template x-if="subscription?.trial_ends_at">
-                <div>
-                    <span class="text-gray-600 dark:text-gray-400">Trial ends:</span>
-                    <span class="ml-1 text-gray-700 dark:text-gray-300" x-text="formatDate(subscription?.trial_ends_at)"></span>
+            <!-- Tier and Status -->
+            <div class="flex flex-wrap items-center gap-4 mb-4">
+                <div class="flex items-center gap-2">
+                    <span class="text-sm text-gray-600 dark:text-gray-400">Tier:</span>
+                    <span class="px-2.5 py-0.5 text-sm font-medium rounded-full"
+                          :class="{
+                              'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300': entry.subscription?.tier === 'essential',
+                              'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300': entry.subscription?.tier === 'professional',
+                              'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-300': entry.subscription?.tier === 'business',
+                              'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300': entry.subscription?.tier === 'enterprise'
+                          }"
+                          x-text="entry.subscription?.tier ? entry.subscription.tier.charAt(0).toUpperCase() + entry.subscription.tier.slice(1) : '-'">
+                    </span>
                 </div>
-            </template>
-        </div>
+                <div class="flex items-center gap-2">
+                    <span class="text-sm text-gray-600 dark:text-gray-400">Status:</span>
+                    <span class="px-2.5 py-0.5 text-sm font-medium rounded-full"
+                          :class="{
+                              'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300': entry.subscription?.status === 'active',
+                              'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300': entry.subscription?.status === 'trial',
+                              'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300': entry.subscription?.status === 'past_due',
+                              'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300': entry.subscription?.status === 'cancelled' || entry.subscription?.status === 'expired'
+                          }"
+                          x-text="entry.subscription?.status ? entry.subscription.status.replace('_', ' ').charAt(0).toUpperCase() + entry.subscription.status.slice(1) : '-'">
+                    </span>
+                </div>
+                <template x-if="entry.subscription?.is_annual">
+                    <span class="px-2.5 py-0.5 text-xs font-medium text-purple-800 bg-purple-100 rounded-full dark:bg-purple-900 dark:text-purple-300">
+                        Annual
+                    </span>
+                </template>
+            </div>
 
-        <!-- Usage Meters -->
-        <div class="grid gap-4 md:grid-cols-3">
-            <template x-for="metric in usageMetrics" :key="metric.name">
-                <div class="p-3 bg-gray-50 rounded-lg dark:bg-gray-700">
-                    <div class="flex items-center justify-between mb-2">
-                        <span class="text-xs font-medium text-gray-600 dark:text-gray-400 uppercase" x-text="metric.name"></span>
+            <!-- Period Info -->
+            <div class="flex flex-wrap gap-4 mb-4 text-sm">
+                <div>
+                    <span class="text-gray-600 dark:text-gray-400">Period:</span>
+                    <span class="ml-1 text-gray-700 dark:text-gray-300" x-text="formatDate(entry.subscription?.period_start)"></span>
+                    <span class="text-gray-400">&rarr;</span>
+                    <span class="text-gray-700 dark:text-gray-300" x-text="formatDate(entry.subscription?.period_end)"></span>
+                </div>
+                <template x-if="entry.subscription?.trial_ends_at">
+                    <div>
+                        <span class="text-gray-600 dark:text-gray-400">Trial ends:</span>
+                        <span class="ml-1 text-gray-700 dark:text-gray-300" x-text="formatDate(entry.subscription?.trial_ends_at)"></span>
                     </div>
-                    <div class="flex items-baseline gap-1">
-                        <span class="text-xl font-bold text-gray-700 dark:text-gray-200" x-text="metric.current"></span>
-                        <span class="text-sm text-gray-500 dark:text-gray-400">
-                            / <span x-text="metric.is_unlimited ? '∞' : metric.limit"></span>
-                        </span>
-                    </div>
-                    <div class="mt-2 h-1.5 bg-gray-200 rounded-full dark:bg-gray-600" x-show="!metric.is_unlimited">
-                        <div class="h-1.5 rounded-full transition-all"
-                             :class="getUsageBarColor(metric.current, metric.limit)"
-                             :style="`width: ${Math.min(100, metric.percentage || 0)}%`">
+                </template>
+            </div>
+
+            <!-- Usage Meters -->
+            <div class="grid gap-4 md:grid-cols-3">
+                <template x-for="metric in entry.features" :key="metric.name">
+                    <div class="p-3 bg-gray-50 rounded-lg dark:bg-gray-700">
+                        <div class="flex items-center justify-between mb-2">
+                            <span class="text-xs font-medium text-gray-600 dark:text-gray-400 uppercase" x-text="metric.name"></span>
+                        </div>
+                        <div class="flex items-baseline gap-1">
+                            <span class="text-xl font-bold text-gray-700 dark:text-gray-200" x-text="metric.current"></span>
+                            <span class="text-sm text-gray-500 dark:text-gray-400">
+                                / <span x-text="metric.is_unlimited ? '∞' : metric.limit"></span>
+                            </span>
+                        </div>
+                        <div class="mt-2 h-1.5 bg-gray-200 rounded-full dark:bg-gray-600" x-show="!metric.is_unlimited">
+                            <div class="h-1.5 rounded-full transition-all"
+                                 :class="getUsageBarColor(metric.current, metric.limit)"
+                                 :style="`width: ${Math.min(100, metric.percentage || 0)}%`">
+                            </div>
                         </div>
                     </div>
-                </div>
-            </template>
-            <template x-if="usageMetrics.length === 0">
-                <div class="p-3 bg-gray-50 rounded-lg dark:bg-gray-700 md:col-span-3">
-                    <p class="text-sm text-gray-500 dark:text-gray-400 text-center">No usage data available</p>
-                </div>
-            </template>
+                </template>
+                <template x-if="entry.features.length === 0">
+                    <div class="p-3 bg-gray-50 rounded-lg dark:bg-gray-700 md:col-span-3">
+                        <p class="text-sm text-gray-500 dark:text-gray-400 text-center">No usage data available</p>
+                    </div>
+                </template>
+            </div>
         </div>
-    </div>
+    </template>
 
     <!-- No Subscription Notice -->
-    <div class="px-4 py-3 mb-6 bg-yellow-50 border border-yellow-200 rounded-lg dark:bg-yellow-900/20 dark:border-yellow-800" x-show="!subscription && !loading">
+    <div class="px-4 py-3 mb-6 bg-yellow-50 border border-yellow-200 rounded-lg dark:bg-yellow-900/20 dark:border-yellow-800" x-show="subscriptions.length === 0 && !loading">
         <div class="flex items-center gap-3">
             <span x-html="$icon('exclamation', 'w-5 h-5 text-yellow-600 dark:text-yellow-400')"></span>
             <div>