pine-asset-management/src/app/dashboard/dashboard.component.html

<div class="dashboard-container">
  <!-- Page Header -->
  <div class="page-header">
    <div class="header-content">
      <div class="header-title">
        <mat-icon class="header-icon" aria-hidden="false">dashboard</mat-icon>
        <h1>Dashboard</h1>
      </div>
      <p class="header-subtitle">Welcome back! Here's an overview of your asset management system.</p>
    </div>
  </div>

  <!-- Statistics Cards -->
  <div class="stats-grid">
    <mat-card class="stat-card total-assets border-stat-card">
      <mat-card-content>
        <div class="stat-content">
          <div class="stat-icon">
            <mat-icon aria-hidden="false">inventory_2</mat-icon>
          </div>
          <div class="stat-info">
            <h3>{{ stats.totalAssets }}</h3>
            <p>Total Assets</p>
            <span class="stat-change positive">+12% from last month</span>
          </div>
        </div>
      </mat-card-content>
    </mat-card>

    <mat-card class="stat-card total-value border-stat-card">
      <mat-card-content>
        <div class="stat-content">
          <div class="stat-icon">
            <mat-icon aria-hidden="false">attach_money</mat-icon>
          </div>
          <div class="stat-info">
            <h3>{{ formatCurrency(stats.totalValue) }}</h3>
            <p>Total Value</p>
            <span class="stat-change positive">+8% from last month</span>
          </div>
        </div>
      </mat-card-content>
    </mat-card>

    <mat-card class="stat-card active-users border-stat-card">
      <mat-card-content>
        <div class="stat-content">
          <div class="stat-icon">
            <mat-icon aria-hidden="false">people</mat-icon>
          </div>
          <div class="stat-info">
            <h3>{{ stats.activeUsers }}</h3>
            <p>Active Users</p>
            <span class="stat-change positive">+5% from last month</span>
          </div>
        </div>
      </mat-card-content>
    </mat-card>

    <mat-card class="stat-card pending-tasks border-stat-card">
      <mat-card-content>
        <div class="stat-content">
          <div class="stat-icon">
            <mat-icon aria-hidden="false">pending_actions</mat-icon>
          </div>
          <div class="stat-info">
            <h3>{{ stats.pendingTasks }}</h3>
            <p>Pending Tasks</p>
            <span class="stat-change negative">-3% from last month</span>
          </div>
        </div>
      </mat-card-content>
    </mat-card>
  </div>

  <!-- Content Grid -->
  <div class="content-grid">
    <!-- Recent Activities -->
    <mat-card class="content-card activities-card border-card">
      <mat-card-header>
        <mat-card-title>
          <mat-icon class="card-icon" aria-hidden="false">timeline</mat-icon>
          Recent Activities
        </mat-card-title>
        <mat-card-subtitle>Latest asset management activities</mat-card-subtitle>
      </mat-card-header>
      <mat-card-content>
        <div class="activity-list mt-10">
          <div class="activity-item" *ngFor="let activity of recentActivities">
            <div class="activity-icon" [ngClass]="'activity-' + activity.type">
              <mat-icon aria-hidden="false">{{ activity.icon }}</mat-icon>
            </div>
            <div class="activity-content">
              <div class="activity-header">
                <h4>{{ activity.title }}</h4>
                <span class="activity-time">{{ activity.time }}</span>
              </div>
              <p class="activity-description">{{ activity.description }}</p>
            </div>
          </div>
        </div>
      </mat-card-content>
    </mat-card>

    <!-- Asset Categories -->
    <mat-card class="content-card categories-card border-card">
      <mat-card-header>
        <mat-card-title>
          <mat-icon class="card-icon" aria-hidden="false">pie_chart</mat-icon>
          Asset Categories
        </mat-card-title>
        <mat-card-subtitle>Distribution by category</mat-card-subtitle>
      </mat-card-header>
      <mat-card-content>
        <div class="category-list mt-10">
          <div class="category-item mt-10" *ngFor="let category of assetCategories">
            <div class="category-info">
              <div class="category-header">
                <div class="category-color" [ngClass]="'color-' + category.color"></div>
                <h4>{{ category.name }}</h4>
              </div>
              <p>{{ category.count }} assets</p>
            </div>
            <div class="category-progress">
              <mat-progress-bar 
                mode="determinate" 
                [value]="category.percentage"
                [ngClass]="'progress-' + (category.percentage > 30 ? 'high' : category.percentage > 15 ? 'medium' : 'low')">
              </mat-progress-bar>
              <span class="percentage">{{ category.percentage }}%</span>
            </div>
          </div>
        </div>
      </mat-card-content>
    </mat-card>

    <!-- Maintenance Alerts -->
    <mat-card class="content-card alerts-card border-card">
      <mat-card-header>
        <mat-card-title>
          <mat-icon class="card-icon" aria-hidden="false">warning</mat-icon>
          Maintenance Alerts
        </mat-card-title>
        <mat-card-subtitle>Upcoming maintenance schedules</mat-card-subtitle>
      </mat-card-header>
      <mat-card-content>
        <div class="alert-list mt-10">
          <div class="alert-item" *ngFor="let alert of maintenanceAlerts">
            <div class="alert-priority" [ngClass]="'priority-' + alert.priority.toLowerCase()"></div>
            <div class="alert-content">
              <div class="alert-header">
                <h4>{{ alert.assetName }}</h4>
                <mat-chip [ngClass]="'priority-' + alert.priority.toLowerCase()">{{ alert.priority }}</mat-chip>
              </div>
              <!-- <p class="alert-description">{{ alert.description }}</p> -->
              <p class="alert-date">Due: {{ alert.dueDate }}</p>
            </div>
          </div>
        </div>
      </mat-card-content>
    </mat-card>
  </div>
</div>