Update organization tabs from 4 to 6

apps/web/src/app/organizations/layouts/organization-layout.component.html

@@ -6,34 +6,27 @@
         class="my-auto pl-1"
         [activeOrganization]="organization"
       ></app-organization-switcher>
-      <ul class="nav nav-tabs">
-        <li class="nav-item">
-          <a class="nav-link" routerLink="vault" routerLinkActive="active">
-            <i class="bwi bwi-lock" aria-hidden="true"></i>
-            {{ "vault" | i18n }}
-          </a>
-        </li>
-        <li class="nav-item" *ngIf="showManageTab">
-          <a class="nav-link" [routerLink]="manageRoute" routerLinkActive="active">
-            <i class="bwi bwi-sliders" aria-hidden="true"></i>
-            {{ "manage" | i18n }}
-          </a>
-        </li>
-        <li class="nav-item" *ngIf="showToolsTab">
-          <a class="nav-link" [routerLink]="toolsRoute" routerLinkActive="active">
-            <i class="bwi bwi-wrench" aria-hidden="true"></i>
-            {{ "tools" | i18n }}
-          </a>
-        </li>
-        <li class="nav-item" *ngIf="showSettingsTab">
-          <a class="nav-link" routerLink="settings" routerLinkActive="active">
-            <i class="bwi bwi-cogs" aria-hidden="true"></i>
-            {{ "settings" | i18n }}
-          </a>
-        </li>
-      </ul>
+      <bit-tab-group class="tw-mb-[-1px]">
+        <bit-tab-item [route]="['vault']">{{ "vault" | i18n }}</bit-tab-item>
+        <bit-tab-item *ngIf="showMembersTab" [route]="['members']">{{
+          "members" | i18n
+        }}</bit-tab-item>
+        <bit-tab-item *ngIf="showGroupsTab" [route]="['groups']">{{
+          "groups" | i18n
+        }}</bit-tab-item>
+        <bit-tab-item *ngIf="showReportsTab" [route]="['reports']">{{
+          "reports" | i18n
+        }}</bit-tab-item>
+        <bit-tab-item *ngIf="showBillingTab" [route]="['billing']">{{
+          "billing" | i18n
+        }}</bit-tab-item>
+        <bit-tab-item *ngIf="showSettingsTab" [route]="['settings']">{{
+          "settings" | i18n
+        }}</bit-tab-item>
+      </bit-tab-group>
     </div>
   </div>
 </div>
+
 <router-outlet></router-outlet>
 <app-footer></app-footer>

apps/web/src/app/organizations/layouts/organization-layout.component.ts

@@ -62,6 +62,22 @@ export class OrganizationLayoutComponent implements OnInit, OnDestroy {
     return NavigationPermissionsService.canAccessSettings(this.organization);
   }
 
+  get showMembersTab(): boolean {
+    return this.organization.canManageUsers;
+  }
+
+  get showGroupsTab(): boolean {
+    return this.organization.canManageGroups;
+  }
+
+  get showReportsTab(): boolean {
+    return this.organization.canAccessReports;
+  }
+
+  get showBillingTab(): boolean {
+    return this.organization.canManageBilling;
+  }
+
   get toolsRoute(): string {
     return this.organization.canAccessImportExport
       ? "tools/import"

apps/web/src/locales/en/messages.json

@@ -5210,5 +5210,8 @@
   },
   "on": {
     "message": "On"
+  },
+  "members": {
+    "message": "Members"
   }
 }