This UI Kit is designed to give developers a clear and consistent structure for building Angular dashboards that handle:
It uses Angular Material for consistency, responsiveness, and performance.
1. Folder Structure
src/app/
│
├── core/ # Services, interceptors, guards
│ ├── services/
│ └── guards/
│
├── shared/ # Shared components, directives, pipes
│ ├── components/
│ │ ├── card/
│ │ ├── table/
│ │ ├── chart/
│ │ └── alert/
│ └── pipes/
│
├── modules/
│ ├── dashboard/
│ │ ├── components/
│ │ │ ├── stock-overview/
│ │ │ ├── forecast-chart/
│ │ │ ├── reorder-suggestions/
│ │ │ ├── alerts-panel/
│ │ │ └── supplier-performance/
│ │ └── dashboard.module.ts
│ ├── inventory/
│ ├── sales/
│ └── settings/
│
├── app-routing.module.ts
└── app.module.ts
2. Color Palette and Typography
Colors:
Typography (Angular Material defaults):
Headings: Roboto, 400–700
Body text: Roboto, 300–400
Dashboard numbers: Bold for metrics
3. Core UI Components
3.1 Card Component
Reusable Card wrapper for metrics, charts, or tables.
@Component({
selector: 'app-dashboard-card',
template: `
<mat-card class="dashboard-card">
<mat-card-header>
<mat-card-title>{{ title }}</mat-card-title>
<mat-card-subtitle *ngIf="subtitle">{{ subtitle }}</mat-card-subtitle>
</mat-card-header>
<mat-card-content>
<ng-content></ng-content>
</mat-card-content>
</mat-card>
`,
styleUrls: ['./dashboard-card.component.scss']
})
export class DashboardCardComponent {
@Input() title: string;
@Input() subtitle?: string;
}
Usage:
<app-dashboard-card title="Total Stock" subtitle="All warehouses">
<h2>{{ totalStock }}</h2>
</app-dashboard-card>
3.2 Table Component
Reusable Material Table with sorting, pagination, and filtering.
@Component({
selector: 'app-data-table',
template: `
<table mat-table [dataSource]="dataSource" matSort>
<ng-container *ngFor="let col of columns" [matColumnDef]="col.key">
<th mat-header-cell *matHeaderCellDef mat-sort-header>{{ col.label }}</th>
<td mat-cell *matCellDef="let row">{{ row[col.key] }}</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="columns.map(c => c.key)"></tr>
<tr mat-row *matRowDef="let row; columns: columns.map(c => c.key)"></tr>
</table>
<mat-paginator [length]="dataSource.data.length" [pageSize]="10"></mat-paginator>
`
})
export class DataTableComponent {
@Input() columns: { key: string; label: string }[];
@Input() dataSource: MatTableDataSource<any>;
}
Example usage:
<app-data-table [columns]="stockColumns" [dataSource]="stockDataSource"></app-data-table>
3.3 Chart Component
Line and Bar Charts using ngx-charts or Chart.js.
@Component({
selector: 'app-line-chart',
template: `<canvas baseChart [datasets]="datasets" [labels]="labels" chartType="line"></canvas>`
})
export class LineChartComponent {
@Input() datasets: ChartDataset[] = [];
@Input() labels: string[] = [];
}
Usage:
<app-line-chart [datasets]="forecastData" [labels]="forecastLabels"></app-line-chart>
3.4 Alert Panel
Shows stock alerts, low inventory, or anomalies.
@Component({
selector: 'app-alerts-panel',
template: `
<mat-list>
<mat-list-item *ngFor="let alert of alerts">
<mat-icon matListIcon color="warn">warning</mat-icon>
<p>{{ alert.message }}</p>
<span class="timestamp">{{ alert.date | date:'short' }}</span>
</mat-list-item>
</mat-list>
`,
styleUrls: ['./alerts-panel.component.scss']
})
export class AlertsPanelComponent {
@Input() alerts: { message: string; date: Date }[] = [];
}
4. Dashboard Layout
4.1 Top Metrics Section
Total Stock
Total Suppliers
Low Stock Items
Pending Orders
Layout: mat-grid-list for responsive card layout.
<mat-grid-list cols="4" rowHeight="1:1" gutterSize="16px">
<mat-grid-tile>
<app-dashboard-card title="Total Stock" [subtitle]="'Units'">
<h2>{{ totalStock }}</h2>
</app-dashboard-card>
</mat-grid-tile>
<mat-grid-tile>
<app-dashboard-card title="Low Stock Items">
<h2>{{ lowStockCount }}</h2>
</app-dashboard-card>
</mat-grid-tile>
<mat-grid-tile>
<app-dashboard-card title="Pending Orders">
<h2>{{ pendingOrders }}</h2>
</app-dashboard-card>
</mat-grid-tile>
<mat-grid-tile>
<app-dashboard-card title="Suppliers">
<h2>{{ totalSuppliers }}</h2>
</app-dashboard-card>
</mat-grid-tile>
</mat-grid-list>
4.2 Main Content Section
Left Column: Forecast chart, stock history chart
Right Column: Alerts panel, reorder suggestions table
<mat-grid-list cols="3" rowHeight="400px" gutterSize="16px">
<mat-grid-tile colspan="2">
<app-dashboard-card title="Forecasted Demand">
<app-line-chart [datasets]="forecastData" [labels]="forecastLabels"></app-line-chart>
</app-dashboard-card>
</mat-grid-tile>
<mat-grid-tile>
<app-dashboard-card title="Alerts">
<app-alerts-panel [alerts]="alerts"></app-alerts-panel>
</app-dashboard-card>
</mat-grid-tile>
<mat-grid-tile colspan="3">
<app-dashboard-card title="Reorder Suggestions">
<app-data-table [columns]="reorderColumns" [dataSource]="reorderDataSource"></app-data-table>
</app-dashboard-card>
</mat-grid-tile>
</mat-grid-list>
5. Angular Material Components Used
MatCard
MatTable + MatPaginator + MatSort
MatGridList
MatIcon
MatToolbar
MatButton
MatSnackBar (for notifications)
MatFormField + MatInput (filters/search)
6. Responsive Design
Use fxLayout (Angular Flex Layout) or CSS Grid for responsiveness.
Ensure cards scale on tablets/mobile.
Collapse tables into vertical lists on small screens.
Charts adapt dynamically using responsive: true in Chart.js.
7. Theming and Consistency
Define a primary palette in styles.scss.
Use consistent spacing (16px grid).
Typography hierarchy:
Consistent icons for actions:
Warning: warning
Info: info
Stock: inventory
8. Reusable Patterns
Card + Content → For all metrics and charts
Table Component → For inventory, suppliers, and reorder lists
Chart Component → Line, Bar, Pie charts
Alert Panel → Low stock, anomalies, notifications
This ensures a consistent experience and avoids duplicate code.
9. Optional Advanced Components
Stock Heatmap: Shows fast/slow-moving items by color intensity
Supplier Rating Card: Performance metrics of suppliers
Interactive Forecast Chart: Clickable months to drill down into daily predictions
Reorder Modal: Inline ordering directly from dashboard
10. Best Practices
Use OnPush change detection for performance.
Keep services lean; avoid business logic in components.
Cache API responses to reduce server calls.
Lazy load modules: dashboard, inventory, sales.
Use MatSnackBar for low-stock notifications.
Use ng-template for dynamic content in cards.
This UI Kit provides a foundation for a fully functional, modern, and responsive smart inventory dashboard. It’s production-ready, reusable, and ready to integrate with SQL Server analytics and ASP.NET Core APIs.