market-backOfficce/src/app/pages/projects-dashboard/projects-dashboard.component.html

<div class="dashboard-container">
  <h1>Marketplace Backoffice</h1>
  
  @if (loading()) {
    <div class="loading-container">
      <mat-spinner></mat-spinner>
    </div>
  }
  
  @if (error()) {
    <div class="error-message">
      {{ error() }}
    </div>
  }
  
  @if (!loading() && !error()) {
    <div class="projects-grid">
      @for (project of projects(); track project.id) {
        <mat-card class="project-card" [class.selected]="currentProjectId() === project.id" (click)="openProject(project.id)">
          <mat-card-header>
            @if (project.logoUrl) {
              <img [src]="project.logoUrl" [alt]="project.displayName" class="project-logo">
            }
            <mat-card-title>{{ project.displayName }}</mat-card-title>
          </mat-card-header>
          <mat-card-content>
            <div class="project-status" [class.active]="project.active">
              {{ project.active ? 'Active' : 'Inactive' }}
            </div>
          </mat-card-content>
        </mat-card>
      }
    </div>
  }
</div>