import { Component, OnInit } from '@angular/core'; import { FormBuilder, FormGroup } from '@angular/forms'; import { DatePipe } from '@angular/common'; interface WarrantyItem { id: number; name: string; warrantyStartDate: Date; warrantyExpiration: Date; location: string; subStatus: string; inStock: boolean; category: string; } @Component({ selector: 'app-dashboard', templateUrl: './dashboard.component.html', styleUrls: ['./dashboard.component.scss'], providers: [DatePipe] }) export class DashboardComponent implements OnInit { warrantyItems: WarrantyItem[] = [ { id: 1, name: 'Laptop', warrantyStartDate: new Date('2022-01-15'), warrantyExpiration: new Date('2024-01-15'), location: 'Office', subStatus: 'Active', inStock: true, category: 'Electronics' }, { id: 2, name: 'Monitor', warrantyStartDate: new Date('2021-11-20'), warrantyExpiration: new Date('2023-11-20'), location: 'Warehouse', subStatus: 'Expired', inStock: false, category: 'Electronics' }, { id: 3, name: 'Printer', warrantyStartDate: new Date('2023-03-10'), warrantyExpiration: new Date('2025-03-10'), location: 'Office', subStatus: 'Active', inStock: true, category: 'Office Equipment' }, { id: 4, name: 'Server', warrantyStartDate: new Date('2020-05-05'), warrantyExpiration: new Date('2023-05-05'), location: 'Data Center', subStatus: 'Expiring Soon', inStock: true, category: 'IT Equipment' } ]; filteredItems: WarrantyItem[] = []; filterForm: FormGroup; locations: string[] = []; subStatuses: string[] = []; constructor(private fb: FormBuilder, private datePipe: DatePipe) { this.filterForm = this.fb.group({ location: [''], subStatus: [''] }); } ngOnInit(): void { this.filteredItems = [...this.warrantyItems]; this.locations = [...new Set(this.warrantyItems.map(item => item.location))]; this.subStatuses = [...new Set(this.warrantyItems.map(item => item.subStatus))]; } applyFilters(): void { const { location, subStatus } = this.filterForm.value; this.filteredItems = this.warrantyItems.filter(item => { const locationMatch = !location || item.location === location; const statusMatch = !subStatus || item.subStatus === subStatus; return locationMatch && statusMatch; }); } resetFilters(): void { this.filterForm.reset(); this.filteredItems = [...this.warrantyItems]; } getRemainingDays(expirationDate: Date): number { const today = new Date(); const diffTime = expirationDate.getTime() - today.getTime(); return Math.ceil(diffTime / (1000 * 60 * 60 * 24)); } getWarrantyStatus(expirationDate: Date): string { const remainingDays = this.getRemainingDays(expirationDate); if (remainingDays < 0) return 'Expired'; if (remainingDays < 30) return 'Expiring Soon'; return 'Active'; } formatDate(date: Date): string { return this.datePipe.transform(date, 'mediumDate') || ''; } }

Warranty Dashboard

Item	Category	Warranty Start	Warranty Expiration	Remaining Days	Status	Location	Sub Status	In Stock
{{ item.name }}	{{ item.category }}	{{ formatDate(item.warrantyStartDate) }}	{{ formatDate(item.warrantyExpiration) }}	{{ getRemainingDays(item.warrantyExpiration) }}	{{ getWarrantyStatus(item.warrantyExpiration) }}	{{ item.location }}	{{ item.subStatus }}	{{ item.inStock ? 'Yes' : 'No' }}

.dashboard-container { padding: 20px; font-family: Arial, sans-serif; max-width: 1200px; margin: 0 auto; h1 { color: #333; margin-bottom: 20px; text-align: center; } } .filters { background-color: #f5f5f5; padding: 15px; border-radius: 8px; margin-bottom: 20px; form { display: flex; flex-wrap: wrap; gap: 15px; align-items: flex-end; } } .filter-group { display: flex; flex-direction: column; label { margin-bottom: 5px; font-weight: bold; } select { padding: 8px; border-radius: 4px; border: 1px solid #ddd; min-width: 150px; } } .filter-actions { display: flex; gap: 10px; button { padding: 8px 16px; background-color: #3f51b5; color: white; border: none; border-radius: 4px; cursor: pointer; transition: background-color 0.3s; &:hover { background-color: #303f9f; } &:last-child { background-color: #f44336; &:hover { background-color: #d32f2f; } } } } .warranty-table { overflow-x: auto; table { width: 100%; border-collapse: collapse; th, td { padding: 12px 15px; text-align: left; border-bottom: 1px solid #ddd; } th { background-color: #3f51b5; color: white; position: sticky; top: 0; } tr:hover { background-color: #f5f5f5; } } } .active { color: #4caf50; font-weight: bold; } .expiring-soon { color: #ff9800; font-weight: bold; } .expired { color: #f44336; font-weight: bold; } .in-stock { color: #4caf50; font-weight: bold; } import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { ReactiveFormsModule } from '@angular/forms'; import { DashboardComponent } from './dashboard.component'; @NgModule({ declarations: [DashboardComponent], imports: [ CommonModule, ReactiveFormsModule ], exports: [DashboardComponent] }) export class DashboardModule { } import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; import { DashboardModule } from './dashboard/dashboard.module'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, 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 = 'Warranty Tracker'; }

.app-container { font-family: Arial, sans-serif; min-height: 100vh; display: flex; flex-direction: column; } header { background-color: #3f51b5; color: white; padding: 20px; text-align: center; } main { flex: 1; padding: 20px; background-color: #f9f9f9; }