dashboard cleanup

apps/dashboard/src/app/components/breadcrumb/breadcrumb.component.ts

@@ -0,0 +1,93 @@
+import { CommonModule } from '@angular/common';
+import { Component, OnInit } from '@angular/core';
+import { MatIconModule } from '@angular/material/icon';
+import { Router } from '@angular/router';
+import { Observable } from 'rxjs';
+import { BreadcrumbItem, BreadcrumbService } from '../../services/breadcrumb.service';
+
+@Component({
+  selector: 'app-breadcrumb',
+  standalone: true,
+  imports: [CommonModule, MatIconModule],
+  template: `
+    <nav class="breadcrumb-nav" *ngIf="breadcrumbs$ | async as breadcrumbs">
+      <ol class="breadcrumb-list">
+        <li 
+          *ngFor="let item of breadcrumbs; let last = last" 
+          class="breadcrumb-item"
+          [class.active]="item.isActive"
+        >
+          <a 
+            *ngIf="!item.isActive; else activeItem" 
+            [routerLink]="item.url"
+            class="breadcrumb-link"
+          >
+            {{ item.label }}
+          </a>
+          <ng-template #activeItem>
+            <span class="breadcrumb-active">{{ item.label }}</span>
+          </ng-template>
+          <mat-icon *ngIf="!last" class="breadcrumb-separator">chevron_right</mat-icon>
+        </li>
+      </ol>
+    </nav>
+  `,
+  styles: [`
+    .breadcrumb-nav {
+      padding: 0.5rem 0;
+    }
+
+    .breadcrumb-list {
+      display: flex;
+      align-items: center;
+      list-style: none;
+      margin: 0;
+      padding: 0;
+      gap: 0.5rem;
+    }
+
+    .breadcrumb-item {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+    }
+
+    .breadcrumb-link {
+      color: #6b7280;
+      text-decoration: none;
+      font-size: 0.875rem;
+      font-weight: 500;
+      transition: color 0.2s ease;
+    }
+
+    .breadcrumb-link:hover {
+      color: #374151;
+    }
+
+    .breadcrumb-active {
+      color: #111827;
+      font-size: 0.875rem;
+      font-weight: 600;
+    }
+
+    .breadcrumb-separator {
+      color: #9ca3af;
+      font-size: 1rem;
+    }
+  `]
+})
+export class BreadcrumbComponent implements OnInit {
+  breadcrumbs$: Observable<BreadcrumbItem[]>;
+
+  constructor(
+    private breadcrumbService: BreadcrumbService,
+    private router: Router
+  ) {
+    this.breadcrumbs$ = this.breadcrumbService.breadcrumbs$;
+  }
+
+  ngOnInit() {
+    // Initialize breadcrumbs for current route
+    this.breadcrumbService.breadcrumbs$.subscribe();
+  }
+}