import { Component } from '@angular/core'; interface DashboardCard { title: string; value: number; icon: string; color: string; } interface RecentActivity { id: number; name: string; date: string; status: string; } @Component({ selector: 'app-dashboard', templateUrl: './dashboard.component.html', styleUrls: ['./dashboard.component.scss'] }) export class DashboardComponent { cards: DashboardCard[] = [ { title: 'Total Users', value: 1245, icon: 'people', color: '#3f51b5' }, { title: 'Revenue', value: 89456, icon: 'attach_money', color: '#4caf50' }, { title: 'New Orders', value: 235, icon: 'shopping_cart', color: '#ff9800' }, { title: 'Pending Tasks', value: 18, icon: 'assignment', color: '#f44336' } ]; activities: RecentActivity[] = [ { id: 1, name: 'New user registration', date: '2023-05-15', status: 'completed' }, { id: 2, name: 'System update', date: '2023-05-14', status: 'pending' }, { id: 3, name: 'Server maintenance', date: '2023-05-13', status: 'completed' }, { id: 4, name: 'Payment processed', date: '2023-05-12', status: 'completed' }, { id: 5, name: 'Database backup', date: '2023-05-11', status: 'failed' } ]; chartData = { labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'], datasets: [ { label: 'Sales', data: [65, 59, 80, 81, 56], backgroundColor: 'rgba(75, 192, 192, 0.2)', borderColor: 'rgba(75, 192, 192, 1)', borderWidth: 1 }, { label: 'Revenue', data: [28, 48, 40, 19, 86], backgroundColor: 'rgba(153, 102, 255, 0.2)', borderColor: 'rgba(153, 102, 255, 1)', borderWidth: 1 } ] }; chartOptions = { responsive: true, maintainAspectRatio: false }; }

Dashboard

Monthly Analytics

Recent Activities

.dashboard-container { padding: 20px; } h1 { margin-bottom: 20px; color: #3f51b5; } .cards-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; margin-bottom: 30px; } .dashboard-card { transition: transform 0.3s ease, box-shadow 0.3s ease; &:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); } } .card-content { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; } .card-value { font-size: 2rem; font-weight: bold; } .card-icon { font-size: 2.5rem; opacity: 0.7; } .dashboard-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; @media (max-width: 768px) { grid-template-columns: 1fr; } } .chart-container, .activity-container { background: white; padding: 20px; border-radius: 4px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } h2 { margin-bottom: 15px; color: #3f51b5; } mat-list-item { border-bottom: 1px solid #eee; } import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { MatCardModule } from '@angular/material/card'; import { MatIconModule } from '@angular/material/icon'; import { MatListModule } from '@angular/material/list'; import { NgChartsModule } from 'ng2-charts'; import { DashboardComponent } from './dashboard.component'; @NgModule({ declarations: [DashboardComponent], imports: [ CommonModule, MatCardModule, MatIconModule, MatListModule, NgChartsModule ], exports: [DashboardComponent] }) export class DashboardModule { } import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { AppComponent } from './app.component'; import { DashboardModule } from './dashboard/dashboard.module'; @NgModule({ declarations: [AppComponent], imports: [ BrowserModule, BrowserAnimationsModule, DashboardModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent { title = 'Dashboard App'; }

body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; background-color: #f5f5f5; } @import '~@angular/material/prebuilt-themes/indigo-pink.css'; html, body { height: 100%; }