[AC-2853] [AC-2854] [AC-2861] Consolidated Billing UI Bugs (#10055)

* Fixed Used column on clients page

* Prevent MSP from scaling client below the number of its members

* Prevent MSP from selecting negative seats when creating client

bitwarden_license/bit-web/src/app/billing/providers/clients/create-client-dialog.component.html

@@ -56,7 +56,7 @@
           <bit-label>
             {{ "seats" | i18n }}
           </bit-label>
-          <input type="text" bitInput formControlName="seats" />
+          <input type="number" bitInput formControlName="seats" min="1" />
           <bit-hint
             class="tw-text-muted tw-grid tw-grid-flow-col tw-gap-1 tw-grid-cols-1 tw-grid-rows-2"
             *ngIf="openSeats > 0"

bitwarden_license/bit-web/src/app/billing/providers/clients/manage-client-subscription-dialog.component.html

@@ -10,7 +10,12 @@
         <bit-label>
           {{ "assignedSeats" | i18n }}
         </bit-label>
-        <input type="number" bitInput formControlName="assignedSeats" />
+        <input
+          type="number"
+          bitInput
+          formControlName="assignedSeats"
+          [min]="dialogParams.organization.occupiedSeats"
+        />
         <bit-hint class="tw-text-muted" *ngIf="openSeats > 0 || isServiceUserWithPurchasedSeats">
           <div
             *ngIf="!this.isServiceUserWithPurchasedSeats"

bitwarden_license/bit-web/src/app/billing/providers/clients/manage-client-subscription-dialog.component.ts

@@ -42,7 +42,7 @@ export class ManageClientSubscriptionDialogComponent implements OnInit {
   protected formGroup = new FormGroup({
     assignedSeats: new FormControl<number>(this.dialogParams.organization.seats, [
       Validators.required,
-      Validators.min(0),
+      Validators.min(this.dialogParams.organization.occupiedSeats),
     ]),
   });
 

bitwarden_license/bit-web/src/app/billing/providers/clients/manage-clients.component.html

@@ -50,7 +50,7 @@
           <span class="tw-text-muted">{{ client.seats }}</span>
         </td>
         <td bitCell class="tw-whitespace-nowrap">
-          <span class="tw-text-muted">{{ client.assignedSeats }}</span>
+          <span class="tw-text-muted">{{ client.occupiedSeats }}</span>
         </td>
         <td bitCell class="tw-whitespace-nowrap">
           <span class="tw-text-muted">{{ client.remainingSeats }}</span>