oayment plan visuals in the instances page

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);
+        }
     }
 }
 
@@ -2448,4 +2480,4 @@ function validateStep6() {
     return true;
 }
 </script>
-{% endblock %} 
+{% endblock %}