feat(ui): subscription details

Author: fiftin

web/src/App.vue

@@ -496,6 +496,29 @@
                 </v-list-item-content>
               </v-list-item>
 
+              <v-list-item
+                key="subscription"
+                v-if="isPro && user.admin"
+                @click="subscriptionDialog = true"
+              >
+                <v-list-item-icon>
+                  <v-icon
+                    color="#f14668"
+                    style="transform: scale(1.4)"
+                  >
+                    mdi-professional-hexagon
+                  </v-icon>
+                </v-list-item-icon>
+
+                <v-list-item-content>
+                  {{
+                    user.has_active_subscription
+                      ? 'Subscription details'
+                      : 'Activate subscription'
+                  }}
+                </v-list-item-content>
+              </v-list-item>
+
               <v-divider/>
 
               <v-list-item
@@ -526,25 +549,6 @@
                 </v-list-item-content>
               </v-list-item>
 
-              <v-list-item
-                key="subscription"
-                v-if="isPro && user.admin"
-                @click="subscriptionDialog = true"
-              >
-                <v-list-item-icon>
-                  <v-icon
-                    color="#f14668"
-                    style="transform: scale(1.4)"
-                  >
-                    mdi-professional-hexagon
-                  </v-icon>
-                </v-list-item-icon>
-
-                <v-list-item-content>
-                  Subscription details
-                </v-list-item-content>
-              </v-list-item>
-
               <v-list-item
                 key="tokens"
                 to="/tokens"
@@ -609,7 +613,7 @@
 
           <v-list-item
             key="premium"
-            v-if="isPro && user.admin && !user.has_active_subscription"
+            v-if="false && isPro && user.admin && !user.has_active_subscription"
             @click="subscriptionDialog = true"
             class="ActivatePremiumSubscriptionButton"
           >

web/src/components/SubscriptionForm.vue

@@ -97,16 +97,26 @@
                   <v-list-item-subtitle>{{ item.expiresAt }}</v-list-item-subtitle>
                 </v-list-item-content>
               </v-list-item>
-            </v-list>
-          </v-col>
-          <v-col class="py-0">
-            <v-list class="py-0" style="background: unset;">
+              <v-list-item class="pa-0" v-if="item.nodes">
+                <v-list-item-content>
+                  <v-list-item-title>Nodes</v-list-item-title>
+                  <v-list-item-subtitle>
+                    {{ item.nodes }}
+                  </v-list-item-subtitle>
+                </v-list-item-content>
+              </v-list-item>
               <v-list-item class="pa-0">
                 <v-list-item-content>
-                  <v-list-item-title>Pro users</v-list-item-title>
-                  <v-list-item-subtitle>{{ item.users }} / {{ item.used }}</v-list-item-subtitle>
+                  <v-list-item-title>Project runners</v-list-item-title>
+                  <v-list-item-subtitle>
+                    {{ item.runners_used }} / {{ item.runners }}
+                  </v-list-item-subtitle>
                 </v-list-item-content>
               </v-list-item>
+            </v-list>
+          </v-col>
+          <v-col class="py-0">
+            <v-list class="py-0" style="background: unset;">
               <v-list-item class="pa-0">
                 <v-list-item-content>
                   <v-list-item-title>Status</v-list-item-title>
@@ -125,6 +135,20 @@
                   </v-list-item-subtitle>
                 </v-list-item-content>
               </v-list-item>
+              <v-list-item class="pa-0">
+                <v-list-item-content>
+                  <v-list-item-title>Pro users</v-list-item-title>
+                  <v-list-item-subtitle>{{ item.used }} / {{ item.users }}</v-list-item-subtitle>
+                </v-list-item-content>
+              </v-list-item>
+              <v-list-item class="pa-0">
+                <v-list-item-content>
+                  <v-list-item-title>Terraform backends</v-list-item-title>
+                  <v-list-item-subtitle>
+                    {{ item.terraform_backends_used }} / {{ item.terraform_backends }}
+                  </v-list-item-subtitle>
+                </v-list-item-content>
+              </v-list-item>
             </v-list>
           </v-col>
         </v-row>