Add DashboardComponent with layout and styling; update routing to include dashboard

src/angular/frontend/src/app/app.routes.ts

@@ -4,6 +4,7 @@ import {HomeComponent} from './components/home/home.component';
 import {authGuard} from './guards/auth.guard';
 import {ShellComponent} from './components/shell/shell.component';
 import {subjectResolver} from './resolvers/subject.resolver';
+import {DashboardComponent} from './components/dashboard/dashboard.component';
 
 export const routes: Routes = [
   {
@@ -24,7 +25,7 @@ export const routes: Routes = [
       {
         title: 'Dashboard',
         path: 'dashboard',
-        component: HomeComponent,
+        component: DashboardComponent,
         data: { showInNav: true },
         children: [
           {
@@ -62,7 +63,7 @@ export const routes: Routes = [
             ]
           }
         ]
-      },
+      }
     ],
     canActivate: [authGuard],
     resolve: {

src/angular/frontend/src/app/components/dashboard/dashboard.component.html

@@ -0,0 +1,52 @@
+<app-panel class="neutral-80">
+  <div class="panel-header">
+    <span class="count">55</span>
+    <span class="label">Users</span>
+  </div>
+  <span class="description">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+  </span>
+</app-panel>
+<app-panel class="neutral-80">
+  <div class="panel-header">
+    <span class="count">55</span>
+    <span class="label">Tenants</span>
+  </div>
+  <span class="description">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+  </span>
+</app-panel>
+<app-panel class="neutral-80"><div class="panel-header">
+  <span class="count">55</span>
+  <span class="label">Apps</span>
+</div>
+  <span class="description">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+  </span></app-panel>
+<app-panel class="neutral-80">
+  <div class="panel-header">
+    <span class="count">55</span>
+    <span class="label">Groups</span>
+  </div>
+  <span class="description">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+  </span>
+</app-panel>
+<app-panel class="neutral-80">
+  <div class="panel-header">
+    <span class="count">55</span>
+    <span class="label">Roles</span>
+  </div>
+  <span class="description">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+  </span>
+</app-panel>
+<app-panel class="neutral-80">
+  <div class="panel-header">
+    <span class="count">55</span>
+    <span class="label">Authorities</span>
+  </div>
+  <span class="description">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+  </span>
+</app-panel>

src/angular/frontend/src/app/components/dashboard/dashboard.component.scss

@@ -0,0 +1,21 @@
+:host {
+  display: flex;
+  flex-direction: row;
+  gap: 1rem;
+  flex-wrap: wrap;
+
+  app-panel {
+    flex: 1 1 calc(20% - 1rem);
+    flex-direction: column;
+    min-width: 350px;
+
+    .panel-header {
+      display: flex;
+      gap: 1rem;
+      font-size: 2rem;
+    }
+    .description {
+      color: var(--neutral-30);
+    }
+  }
+}

src/angular/frontend/src/app/components/dashboard/dashboard.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DashboardComponent } from './dashboard.component';
+
+describe('DashboardComponent', () => {
+  let component: DashboardComponent;
+  let fixture: ComponentFixture<DashboardComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [DashboardComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(DashboardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/angular/frontend/src/app/components/dashboard/dashboard.component.ts

@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+import {PanelComponent} from '../panel/panel.component';
+
+@Component({
+  selector: 'app-dashboard',
+  imports: [
+    PanelComponent
+  ],
+  templateUrl: './dashboard.component.html',
+  styleUrl: './dashboard.component.scss'
+})
+export class DashboardComponent {
+
+}

src/angular/frontend/src/app/components/panel/panel.component.scss

@@ -4,12 +4,9 @@
   gap: 1rem;
   padding: 1rem;
 
-  align-items: center;
-
   background-color: var(--bg-color);
   color: var(--text-color);
 
   border-radius: 0.5rem;
 
-  margin: 1rem;
 }