oayment plan visuals in the instances page

routes/admin_api.py

@@ -580,7 +580,8 @@ def get_version_info(current_user):
             'git_branch': os.environ.get('GIT_BRANCH', 'unknown'),
             'deployed_at': os.environ.get('DEPLOYED_AT', 'unknown'),
             'ismaster': os.environ.get('ISMASTER', 'false'),
-            'port': os.environ.get('PORT', 'unknown')
+            'port': os.environ.get('PORT', 'unknown'),
+            'pricing_tier_name': os.environ.get('PRICING_TIER_NAME', 'unknown')
         }
         
         return jsonify(version_info)
@@ -591,6 +592,7 @@ def get_version_info(current_user):
             'app_version': 'unknown',
             'git_commit': 'unknown',
             'git_branch': 'unknown',
-            'deployed_at': 'unknown'
+            'deployed_at': 'unknown',
+            'pricing_tier_name': 'unknown'
         }), 500
 

templates/main/instance_detail.html

@@ -130,6 +130,18 @@
                                             <div class="company-value" id="company-description">Loading...</div>
                                         </div>
                                     </div>
+                                    <div class="mb-3">
+                                        <div class="d-flex">
+                                            <div class="text-muted me-2" style="min-width: 120px;">Version:</div>
+                                            <div class="company-value" id="instance-version-value">Loading...</div>
+                                        </div>
+                                    </div>
+                                    <div class="mb-3">
+                                        <div class="d-flex">
+                                            <div class="text-muted me-2" style="min-width: 120px;">Payment Plan:</div>
+                                            <div class="company-value" id="instance-payment-plan-value">Loading...</div>
+                                        </div>
+                                    </div>
                                 </div>
                                 <div class="col-md-6">
                                     <h5 class="mb-3">Contact Information</h5>
@@ -1569,5 +1581,46 @@ document.addEventListener('DOMContentLoaded', function() {
         });
     }
 });
+
+// Function to fetch version and payment plan info
+async function fetchInstanceVersionAndPlan() {
+    const versionEl = document.getElementById('instance-version-value');
+    const planEl = document.getElementById('instance-payment-plan-value');
+    versionEl.textContent = 'Loading...';
+    planEl.textContent = 'Loading...';
+    try {
+        // Get JWT token
+        const tokenResponse = await fetch(`{{ instance.main_url }}/api/admin/management-token`, {
+            method: 'POST',
+            headers: {
+                'X-API-Key': '{{ instance.connection_token }}',
+                'Accept': 'application/json'
+            }
+        });
+        if (!tokenResponse.ok) throw new Error('Failed to get management token');
+        const tokenData = await tokenResponse.json();
+        if (!tokenData.token) throw new Error('No token received');
+        // Fetch version info
+        const response = await fetch(`{{ instance.main_url }}/api/admin/version-info`, {
+            headers: {
+                'Accept': 'application/json',
+                'Authorization': `Bearer ${tokenData.token}`
+            }
+        });
+        if (!response.ok) throw new Error('Failed to fetch version info');
+        const data = await response.json();
+        versionEl.textContent = data.app_version || 'Unknown';
+        planEl.textContent = data.pricing_tier_name || 'Unknown';
+    } catch (error) {
+        versionEl.textContent = 'Error';
+        planEl.textContent = 'Error';
+        console.error('Error fetching version/plan info:', error);
+    }
+}
+
+document.addEventListener('DOMContentLoaded', function() {
+    // ... existing code ...
+    fetchInstanceVersionAndPlan();
+});
 </script>
 {% endblock %} 

templates/main/instances.html

@@ -1077,6 +1077,7 @@ function compareSemanticVersions(currentVersion, latestVersion) {
 async function fetchVersionInfo(instanceUrl, instanceId) {
     const row = document.querySelector(`[data-instance-id="${instanceId}"]`).closest('tr');
     const versionCell = row.querySelector('td:nth-child(9)'); // Version column (adjusted after removing branch)
+    const paymentPlanCell = row.querySelector('td:nth-child(6)'); // Payment Plan column
     
     // Show loading state
     if (versionCell) {
@@ -1112,6 +1113,25 @@ async function fetchVersionInfo(instanceUrl, instanceId) {
         const data = await response.json();
         console.log('Received version data:', data);
 
+        // Update payment plan cell with pricing tier name
+        if (paymentPlanCell) {
+            const pricingTierName = data.pricing_tier_name || 'unknown';
+            if (pricingTierName !== 'unknown') {
+                paymentPlanCell.innerHTML = `
+                    <span class="badge bg-info" data-bs-toggle="tooltip" title="Pricing Tier: ${pricingTierName}">
+                        <i class="fas fa-tag me-1"></i>${pricingTierName}
+                    </span>`;
+                
+                // Add tooltip for payment plan
+                const paymentPlanBadge = paymentPlanCell.querySelector('[data-bs-toggle="tooltip"]');
+                if (paymentPlanBadge) {
+                    new bootstrap.Tooltip(paymentPlanBadge);
+                }
+            } else {
+                paymentPlanCell.innerHTML = '<span class="badge bg-secondary">unknown</span>';
+            }
+        }
+
         // Update version cell
         if (versionCell) {
             const appVersion = data.app_version || 'unknown';
@@ -1209,11 +1229,23 @@ async function fetchVersionInfo(instanceUrl, instanceId) {
                 </span>`;
         }
         
+        if (paymentPlanCell) {
+            paymentPlanCell.innerHTML = `
+                <span class="text-warning" data-bs-toggle="tooltip" title="Error: ${error.message}">
+                    <i class="fas fa-exclamation-triangle"></i> Error
+                </span>`;
+        }
+        
         // Add tooltips for error states
         const errorBadge = versionCell?.querySelector('[data-bs-toggle="tooltip"]');
         if (errorBadge) {
             new bootstrap.Tooltip(errorBadge);
         }
+        
+        const paymentPlanErrorBadge = paymentPlanCell?.querySelector('[data-bs-toggle="tooltip"]');
+        if (paymentPlanErrorBadge) {
+            new bootstrap.Tooltip(paymentPlanErrorBadge);
+        }
     }
 }