[SM-455] add projects and secrets to dashboard page (#4722)

* add projects and secrets to dashboard

* add header title

* add section component

* only show latest projects and secrets

* reorganize view model; all view all link

* fix i18n; update table styles; add bitSortable to secrets table

* apply code reviews

* remove basePath input; add viewProjectEvent output

* fix style and merge issue

* fix route

* use absolute route with org id

bitwarden_license/bit-web/src/app/secrets-manager/overview/overview.component.html

@@ -1,3 +1,41 @@
-<sm-header>
+<sm-header [title]="organizationName">
   <sm-new-menu></sm-new-menu>
 </sm-header>
+<div
+  *ngIf="view$ | async as view; else spinner"
+  class="tw-flex tw-flex-col tw-gap-6 [&_sm-header]:tw-hidden"
+>
+  <sm-section>
+    <h2 slot="summary" class="tw-mb-0 tw-text-2xl tw-font-semibold">{{ "projects" | i18n }}</h2>
+    <sm-projects-list
+      (newProjectEvent)="openNewProjectDialog()"
+      (editProjectEvent)="openEditProject($event)"
+      (deleteProjectEvent)="openDeleteProjectDialog($event)"
+      [projects]="view.latestProjects"
+    ></sm-projects-list>
+    <div *ngIf="view.allProjects.length > 0" class="tw-ml-auto tw-mt-4 tw-max-w-max">
+      {{ "showingPortionOfTotal" | i18n: view.latestProjects.length:view.allProjects.length }}
+      <a bitLink routerLink="projects" class="tw-ml-2">{{ "viewAll" | i18n }}</a>
+    </div>
+  </sm-section>
+  <sm-section>
+    <h2 slot="summary" class="tw-mb-0 tw-text-2xl tw-font-semibold">{{ "secrets" | i18n }}</h2>
+    <sm-secrets-list
+      baseRoute="secrets"
+      (deleteSecretsEvent)="openDeleteSecret($event)"
+      (newSecretEvent)="openNewSecretDialog()"
+      (editSecretEvent)="openEditSecret($event)"
+      [secrets]="view.latestSecrets"
+    ></sm-secrets-list>
+    <div *ngIf="view.allSecrets.length > 0" class="tw-ml-auto tw-mt-4 tw-max-w-max">
+      {{ "showingPortionOfTotal" | i18n: view.latestSecrets.length:view.allSecrets.length }}
+      <a bitLink routerLink="secrets" class="tw-ml-2">{{ "viewAll" | i18n }}</a>
+    </div>
+  </sm-section>
+</div>
+
+<ng-template #spinner>
+  <div class="tw-items-center tw-justify-center tw-pt-64 tw-text-center">
+    <i class="bwi bwi-spinner bwi-spin bwi-3x"></i>
+  </div>
+</ng-template>