cmc/support-portal-frontend/src/app/component/home/home.component.html

<div class="dashboard-container">
  <!-- Sidebar Menu -->
  <app-menu class="sidebar"></app-menu>

  <!-- Main Dashboard Content -->
  <div class="main-content">
    <!-- Dashboard Header -->
    <div class="dashboard-header">
      <div class="header-content">
        <h1 class="dashboard-title">Dashboard Overview</h1>
        <p class="dashboard-subtitle">Welcome back! Here's what's happening today.</p>
      </div>
      <button class="btn-refresh" (click)="refreshDashboard()" [disabled]="loading">
        <i class="fa fa-sync-alt" [class.spinning]="loading"></i>
        <span>Refresh</span>
      </button>
    </div>

    <!-- Loading Spinner -->
    <div *ngIf="loading" class="loading-container">
      <div class="spinner">
        <div class="bounce1"></div>
        <div class="bounce2"></div>
        <div class="bounce3"></div>
      </div>
      <p class="loading-text">Loading dashboard data...</p>
    </div>

    <!-- Error Message -->
    <div *ngIf="error && !loading" class="alert-error">
      <i class="fa fa-exclamation-circle"></i>
      <span>{{ error }}</span>
      <button class="btn-close-alert" (click)="error = null">
        <i class="fa fa-times"></i>
      </button>
    </div>

    <!-- Dashboard Content -->
    <div *ngIf="!loading && !error" class="dashboard-content">
      
      <!-- Quick Stats Summary Cards -->
      <div class="quick-stats">
        <div class="stat-card-minimal">
          <div class="stat-minimal-icon stat-icon-blue">
            <i class="fa fa-calendar-check"></i>
          </div>
          <div class="stat-minimal-content">
            <h3>{{ stats.events.upcoming }}</h3>
            <p>Upcoming Events</p>
          </div>
        </div>

        <div class="stat-card-minimal">
          <div class="stat-minimal-icon stat-icon-purple">
            <i class="fa fa-clock"></i>
          </div>
          <div class="stat-minimal-content">
            <h3>{{ stats.careers.pendingApplications + stats.education.pendingApplications }}</h3>
            <p>Pending Reviews</p>
          </div>
        </div>

        <div class="stat-card-minimal">
          <div class="stat-minimal-icon stat-icon-green">
            <i class="fa fa-briefcase"></i>
          </div>
          <div class="stat-minimal-content">
            <h3>{{ stats.careers.activeJobs }}</h3>
            <p>Active Jobs</p>
          </div>
        </div>

        <div class="stat-card-minimal">
          <div class="stat-minimal-icon stat-icon-orange">
            <i class="fa fa-graduation-cap"></i>
          </div>
          <div class="stat-minimal-content">
            <h3>{{ stats.education.activeCourses }}</h3>
            <p>Active Courses</p>
          </div>
        </div>
      </div>

      <!-- Main Stats Grid -->
      <div class="stats-grid">
        
        <!-- Events Card -->
        <div class="stats-card">
          <div class="card-header">
            <div class="card-title">
              <i class="fa fa-calendar-alt"></i>
              <span>Events</span>
            </div>
          </div>
          <div class="card-body">
            <div class="stat-row">
              <span class="stat-label">Total Events</span>
              <span class="stat-value">{{ stats.events.total }}</span>
            </div>
            <div class="stat-row">
              <span class="stat-label">Upcoming</span>
              <span class="stat-value stat-value-success">{{ stats.events.upcoming }}</span>
            </div>
            <div class="stat-row">
              <span class="stat-label">Active</span>
              <span class="stat-value stat-value-info">{{ stats.events.active }}</span>
            </div>
          </div>
        </div>

        <!-- Blogs Card -->
        <div class="stats-card">
          <div class="card-header">
            <div class="card-title">
              <i class="fa fa-blog"></i>
              <span>Blogs</span>
            </div>
          </div>
          <div class="card-body">
            <div class="stat-row">
              <span class="stat-label">Total Posts</span>
              <span class="stat-value">{{ stats.blogs.total }}</span>
            </div>
            <div class="stat-row">
              <span class="stat-label">Published</span>
              <span class="stat-value stat-value-success">{{ stats.blogs.published }}</span>
            </div>
            <div class="stat-row">
              <span class="stat-label">Drafts</span>
              <span class="stat-value stat-value-warning">{{ stats.blogs.drafts }}</span>
            </div>
          </div>
        </div>

        <!-- Careers Card -->
        <div class="stats-card">
          <div class="card-header">
            <div class="card-title">
              <i class="fa fa-briefcase"></i>
              <span>Careers</span>
            </div>
          </div>
          <div class="card-body">
            <div class="stat-row">
              <span class="stat-label">Active Jobs</span>
              <span class="stat-value">{{ stats.careers.activeJobs }}</span>
            </div>
            <div class="stat-row">
              <span class="stat-label">Applications</span>
              <span class="stat-value stat-value-info">{{ stats.careers.totalApplications }}</span>
            </div>
            <div class="stat-row">
              <span class="stat-label">Pending</span>
              <span class="stat-value stat-value-warning">{{ stats.careers.pendingApplications }}</span>
            </div>
          </div>
        </div>

        <!-- Education Card -->
        <div class="stats-card">
          <div class="card-header">
            <div class="card-title">
              <i class="fa fa-graduation-cap"></i>
              <span>Education</span>
            </div>
          </div>
          <div class="card-body">
            <div class="stat-row">
              <span class="stat-label">Active Courses</span>
              <span class="stat-value">{{ stats.education.activeCourses }}</span>
            </div>
            <div class="stat-row">
              <span class="stat-label">Enrollments</span>
              <span class="stat-value stat-value-info">{{ stats.education.totalApplications }}</span>
            </div>
            <div class="stat-row">
              <span class="stat-label">Pending</span>
              <span class="stat-value stat-value-warning">{{ stats.education.pendingApplications }}</span>
            </div>
          </div>
        </div>

        <!-- Professors Card -->
        <div class="stats-card">
          <div class="card-header">
            <div class="card-title">
              <i class="fa fa-chalkboard-teacher"></i>
              <span>Professors</span>
            </div>
          </div>
          <div class="card-body">
            <div class="stat-row">
              <span class="stat-label">Total</span>
              <span class="stat-value">{{ stats.professors.total }}</span>
            </div>
            <div class="stat-row">
              <span class="stat-label">Active</span>
              <span class="stat-value stat-value-success">{{ stats.professors.active }}</span>
            </div>
            <div class="stat-row">
              <span class="stat-label">Status</span>
              <span class="stat-badge stat-badge-success">Active</span>
            </div>
          </div>
        </div>

        <!-- Testimonials Card -->
        <div class="stats-card">
          <div class="card-header">
            <div class="card-title">
              <i class="fa fa-quote-left"></i>
              <span>Testimonials</span>
            </div>
          </div>
          <div class="card-body">
            <div class="stat-row">
              <span class="stat-label">Total</span>
              <span class="stat-value">{{ stats.testimonials.total }}</span>
            </div>
            <div class="stat-row">
              <span class="stat-label">Active</span>
              <span class="stat-value stat-value-success">{{ stats.testimonials.active }}</span>
            </div>
            <div class="stat-row">
              <span class="stat-label">Status</span>
              <span class="stat-badge stat-badge-success">Published</span>
            </div>
          </div>
        </div>

        <!-- Milestones Card -->
        <div class="stats-card">
          <div class="card-header">
            <div class="card-title">
              <i class="fa fa-flag-checkered"></i>
              <span>Milestones</span>
            </div>
          </div>
          <div class="card-body">
            <div class="stat-row">
              <span class="stat-label">Total</span>
              <span class="stat-value">{{ stats.milestones.total }}</span>
            </div>
            <div class="stat-row">
              <span class="stat-label">Active</span>
              <span class="stat-value stat-value-success">{{ stats.milestones.active }}</span>
            </div>
            <div class="stat-row">
              <span class="stat-label">Status</span>
              <span class="stat-badge stat-badge-info">Tracking</span>
            </div>
          </div>
        </div>

      </div>

      <!-- Recent Activities Section -->
      <div class="recent-section" *ngIf="recentActivities.length > 0">
        <div class="section-header">
          <h2>
            <i class="fa fa-clock"></i>
            Recent Activities
          </h2>
        </div>
        <div class="activities-list">
          <div class="activity-item" *ngFor="let activity of recentActivities">
            <div class="activity-icon-wrapper" [ngClass]="'activity-' + activity.color">
              <i class="fa fa-{{ activity.icon }}"></i>
            </div>
            <div class="activity-details">
              <h4>{{ activity.type }}</h4>
              <p>{{ activity.description }}</p>
              <span class="activity-time">{{ getTimeAgo(activity.date) }}</span>
            </div>
          </div>
          
          <div class="activity-item empty-state" *ngIf="recentActivities.length === 0">
            <div class="empty-icon">
              <i class="fa fa-inbox"></i>
            </div>
            <p>No recent activities</p>
          </div>
        </div>
      </div>

    </div>
  </div>
</div>