[EC-8] Restructure Tabs (#3109)

* Cherry pick pending PR for tabs component [CL-17] Tabs - Routing

* Update organization tabs from 4 to 6

* Create initial 'Members' tab

* Create initial 'Groups' tab

* Add initial "Reporting" tab

* Use correct report label/layout by product type

* Create initial 'Billing' tab

* Breakup billing payment and billing history pages

* Cleanup org routing and nav permission service

* More org tab permission cleanup

* Refactor organization billing to use a module

* Refactor organization reporting to use module

* Cherry pick finished/merged tabs component [CL-17] Tabs - Router (#2952)

* This partially reverts commit 24bb775 to fix tracking of people.component.html rename.

* Fix people component file rename

* Recover lost member page changes

* Undo members component rename as it was causing difficult merge conflicts

* Fix member and group page container

* Remove unnecessary organization lookup

* [EC-8] Some PR suggestions

* [EC-8] Reuse user billing history for orgs

* [EC-8] Renamed user billing history component

* [EC-8] Repurpose payment method component

Update end user payment method component to be usable for organizations.

* [EC-8] Fix missing verify bank condition

* [EC-8] Remove org payment method component

* [EC-8] Use CL in payment method component

* [EC-8] Extend maxWidth Tailwind theme config

* [EC-8] Add lazy loading to org reports

* [EC-8] Add lazy loading to org billing

* [EC-8] Prettier

* [EC-8] Cleanup org reporting component redundancy

* [EC-8] Use different class for negative margin

* [EC-8] Make billing history component "dumb"

* Revert "[EC-8] Cleanup org reporting component redundancy"

This reverts commit eca337e89b.

* [EC-8] Create and export shared reports module

* [EC-8] Use shared reports module in orgs

* [EC-8] Use takeUntil pattern

* [EC-8] Move org reporting module out of old modules folder

* [EC-8] Move org billing module out of old modules folder

* [EC-8] Fix some remaining merge conflicts

* [EC-8] Move maxWidth into 'extend' key for Tailwind config

* [EC-8] Remove unused module

* [EC-8] Rename org report list component

* Prettier

Co-authored-by: Vincent Salucci <vincesalucci21@gmail.com>

apps/web/src/app/organizations/manage/groups.component.html

@@ -1,77 +1,79 @@
-<div class="page-header d-flex">
-  <h1>{{ "groups" | i18n }}</h1>
-  <div class="ml-auto d-flex">
-    <div>
-      <label class="sr-only" for="search">{{ "search" | i18n }}</label>
-      <input
-        type="search"
-        class="form-control form-control-sm"
-        id="search"
-        placeholder="{{ 'search' | i18n }}"
-        [(ngModel)]="searchText"
-      />
+<div class="container page-content">
+  <div class="page-header d-flex">
+    <h1>{{ "groups" | i18n }}</h1>
+    <div class="ml-auto d-flex">
+      <div>
+        <label class="sr-only" for="search">{{ "search" | i18n }}</label>
+        <input
+          type="search"
+          class="form-control form-control-sm"
+          id="search"
+          placeholder="{{ 'search' | i18n }}"
+          [(ngModel)]="searchText"
+        />
+      </div>
+      <button type="button" class="btn btn-sm btn-outline-primary ml-3" (click)="add()">
+        <i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i>
+        {{ "newGroup" | i18n }}
+      </button>
     </div>
-    <button type="button" class="btn btn-sm btn-outline-primary ml-3" (click)="add()">
-      <i class="bwi bwi-plus bwi-fw" aria-hidden="true"></i>
-      {{ "newGroup" | i18n }}
-    </button>
   </div>
-</div>
-<ng-container *ngIf="loading">
-  <i
-    class="bwi bwi-spinner bwi-spin text-muted"
-    title="{{ 'loading' | i18n }}"
-    aria-hidden="true"
-  ></i>
-  <span class="sr-only">{{ "loading" | i18n }}</span>
-</ng-container>
-<ng-container
-  *ngIf="
-    !loading &&
-    (isPaging() ? pagedGroups : (groups | search: searchText:'name':'id')) as searchedGroups
-  "
->
-  <p *ngIf="!searchedGroups.length">{{ "noGroupsInList" | i18n }}</p>
-  <table
-    class="table table-hover table-list"
-    *ngIf="searchedGroups.length"
-    infiniteScroll
-    [infiniteScrollDistance]="1"
-    [infiniteScrollDisabled]="!isPaging()"
-    (scrolled)="loadMore()"
+  <ng-container *ngIf="loading">
+    <i
+      class="bwi bwi-spinner bwi-spin text-muted"
+      title="{{ 'loading' | i18n }}"
+      aria-hidden="true"
+    ></i>
+    <span class="sr-only">{{ "loading" | i18n }}</span>
+  </ng-container>
+  <ng-container
+    *ngIf="
+      !loading &&
+      (isPaging() ? pagedGroups : (groups | search: searchText:'name':'id')) as searchedGroups
+    "
   >
-    <tbody>
-      <tr *ngFor="let g of searchedGroups">
-        <td>
-          <a href="#" appStopClick (click)="edit(g)">{{ g.name }}</a>
-        </td>
-        <td class="table-list-options">
-          <div class="dropdown" appListDropdown>
-            <button
-              class="btn btn-outline-secondary dropdown-toggle"
-              type="button"
-              data-toggle="dropdown"
-              aria-haspopup="true"
-              aria-expanded="false"
-              appA11yTitle="{{ 'options' | i18n }}"
-            >
-              <i class="bwi bwi-cog bwi-lg" aria-hidden="true"></i>
-            </button>
-            <div class="dropdown-menu dropdown-menu-right">
-              <a class="dropdown-item" href="#" appStopClick (click)="users(g)">
-                <i class="bwi bwi-fw bwi-users" aria-hidden="true"></i>
-                {{ "users" | i18n }}
-              </a>
-              <a class="dropdown-item text-danger" href="#" appStopClick (click)="delete(g)">
-                <i class="bwi bwi-fw bwi-trash" aria-hidden="true"></i>
-                {{ "delete" | i18n }}
-              </a>
+    <p *ngIf="!searchedGroups.length">{{ "noGroupsInList" | i18n }}</p>
+    <table
+      class="table table-hover table-list"
+      *ngIf="searchedGroups.length"
+      infiniteScroll
+      [infiniteScrollDistance]="1"
+      [infiniteScrollDisabled]="!isPaging()"
+      (scrolled)="loadMore()"
+    >
+      <tbody>
+        <tr *ngFor="let g of searchedGroups">
+          <td>
+            <a href="#" appStopClick (click)="edit(g)">{{ g.name }}</a>
+          </td>
+          <td class="table-list-options">
+            <div class="dropdown" appListDropdown>
+              <button
+                class="btn btn-outline-secondary dropdown-toggle"
+                type="button"
+                data-toggle="dropdown"
+                aria-haspopup="true"
+                aria-expanded="false"
+                appA11yTitle="{{ 'options' | i18n }}"
+              >
+                <i class="bwi bwi-cog bwi-lg" aria-hidden="true"></i>
+              </button>
+              <div class="dropdown-menu dropdown-menu-right">
+                <a class="dropdown-item" href="#" appStopClick (click)="users(g)">
+                  <i class="bwi bwi-fw bwi-users" aria-hidden="true"></i>
+                  {{ "users" | i18n }}
+                </a>
+                <a class="dropdown-item text-danger" href="#" appStopClick (click)="delete(g)">
+                  <i class="bwi bwi-fw bwi-trash" aria-hidden="true"></i>
+                  {{ "delete" | i18n }}
+                </a>
+              </div>
             </div>
-          </div>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</ng-container>
-<ng-template #addEdit></ng-template>
-<ng-template #usersTemplate></ng-template>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </ng-container>
+  <ng-template #addEdit></ng-template>
+  <ng-template #usersTemplate></ng-template>
+</div>