Action hub

src/app/app.routes.ts

@@ -3,6 +3,12 @@ import { Routes } from '@angular/router';
 export const routes: Routes = [
   {
     path: '',
+    pathMatch: 'full',
+    loadComponent: () =>
+      import('./hub/hub.component').then((m) => m.HubComponent),
+  },
+  {
+    path: 'animal-profiles',
     loadComponent: () =>
       import('./animal-profiles/list/list.component').then(
         (m) => m.ListComponent,

src/app/hub/hub.component.html

@@ -0,0 +1,15 @@
+<sky-action-hub
+  [needsAttention]="(needsAttention | async) ?? []"
+  [relatedLinks]="relatedLinks"
+  [title]="title">
+  <sky-action-hub-content>
+    <sky-box>
+      <sky-box-header>
+        <h2>Welcome to SKY UX</h2>
+      </sky-box-header>
+      <sky-box-content>
+        <app-welcome-to-skyux />
+      </sky-box-content>
+    </sky-box>
+  </sky-action-hub-content>
+</sky-action-hub>

src/app/hub/hub.component.spec.ts

@@ -0,0 +1,42 @@
+import { provideLocationMocks } from '@angular/common/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { provideRouter } from '@angular/router';
+import { expectAsync } from '@skyux-sdk/testing';
+
+import { HubComponent } from './hub.component';
+import { provideHttpClientTesting } from '@angular/common/http/testing';
+import { provideHttpClient } from '@angular/common/http';
+
+describe('HubComponent', () => {
+  let component: HubComponent;
+  let fixture: ComponentFixture<HubComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [HubComponent],
+      providers: [
+        provideLocationMocks(),
+        provideRouter([]),
+        provideHttpClient(),
+        provideHttpClientTesting(),
+      ],
+    });
+    fixture = TestBed.createComponent(HubComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should be accessible', async () => {
+    fixture = TestBed.createComponent(HubComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+    await fixture.whenStable();
+    expect(component).toBeTruthy();
+    const element = fixture.nativeElement as HTMLElement;
+    await expectAsync(element).toBeAccessible();
+  });
+});

src/app/hub/hub.component.ts

@@ -0,0 +1,71 @@
+import { CommonModule } from '@angular/common';
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { SkyBoxModule } from '@skyux/layout';
+import { SkyActionHubModule } from '@skyux/pages';
+import { SETTINGS } from '../settings';
+import { welcomeToSkyuxLinks } from '../welcome-to-skyux/welcome-to-skyux-links';
+import { WelcomeToSkyuxComponent } from '../welcome-to-skyux/welcome-to-skyux.component';
+import { DataService } from '../services/data/data.service';
+import { PersistenceService } from '../services/data/persistence.service';
+import { map, Observable } from 'rxjs';
+
+interface NeedsAttentionItem {
+  title: string;
+  permalink: {
+    route?: {
+      commands: string[];
+    };
+    url?: string;
+  };
+}
+
+@Component({
+  selector: 'app-hub',
+  standalone: true,
+  imports: [
+    CommonModule,
+    SkyActionHubModule,
+    WelcomeToSkyuxComponent,
+    SkyBoxModule,
+  ],
+  templateUrl: './hub.component.html',
+  styleUrls: ['./hub.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class HubComponent {
+  protected readonly loading: Observable<boolean>;
+  protected needsAttention: Observable<NeedsAttentionItem[]>;
+  protected readonly relatedLinks = welcomeToSkyuxLinks.map((link) => ({
+    label: link.label,
+    permalink: {
+      url: link.url,
+    },
+  }));
+  protected readonly title = SETTINGS.title;
+
+  readonly #dataService = inject(DataService);
+  readonly #persistenceService = inject(PersistenceService);
+
+  constructor() {
+    this.loading = this.#persistenceService.loading;
+    this.needsAttention = this.#dataService.list.pipe(
+      map((profiles) => {
+        const needsAttentionCount = profiles.reduce(
+          (count, profile) => count + (profile.needsAttention ? 1 : 0),
+          0,
+        );
+        const singular = needsAttentionCount === 1;
+        return [
+          {
+            title: `${needsAttentionCount} animal${singular ? '' : 's'} need${singular ? 's' : ''} attention`,
+            permalink: {
+              route: {
+                commands: ['animal-profiles'],
+              },
+            },
+          },
+        ];
+      }),
+    );
+  }
+}

src/app/welcome-to-skyux/welcome-to-skyux-links.ts

@@ -0,0 +1,22 @@
+export const welcomeToSkyuxLinks = [
+  {
+    label: 'SKY UX Documentation',
+    url: 'https://developer.blackbaud.com/skyux',
+  },
+  {
+    label: 'SKY UX GitHub',
+    url: 'https://github.com/blackbaud/skyux',
+  },
+  {
+    label: 'SKY Developer',
+    url: 'https://developer.blackbaud.com/',
+  },
+  {
+    label: 'Learn Angular',
+    url: 'https://angular.dev/tutorials/learn-angular',
+  },
+  {
+    label: 'Get Started with SKY UX',
+    url: 'https://developer.blackbaud.com/skyux/learn/overview',
+  },
+];