diff --git a/package-lock.json b/package-lock.json index b4eea9c1..c50f9db9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -26,6 +26,7 @@ "igniteui-angular-charts": "^20.0.0", "igniteui-angular-core": "^20.0.0", "igniteui-angular-maps": "^20.0.0", + "igniteui-grid-lite": "^0.7.1", "igniteui-theming": "^24.0.1", "igniteui-webcomponents": "^6.3.6", "minireset.css": "~0.0.4", @@ -2634,12 +2635,12 @@ } }, "node_modules/@lit/context": { - "version": "1.1.4", - "resolved": "https://registry.npmjs.org/@lit/context/-/context-1.1.4.tgz", - "integrity": "sha512-0b8wOWNUPcXjGHFtVP+odwhrZBZw+PpCjKWn8IGO10iHT95Xd6FcUAxe1aE7PUtOBvHZoxvrfdBzweYnDW7VNQ==", + "version": "1.1.6", + "resolved": "https://registry.npmjs.org/@lit/context/-/context-1.1.6.tgz", + "integrity": "sha512-M26qDE6UkQbZA2mQ3RjJ3Gzd8TxP+/0obMgE5HfkfLhEEyYE3Bui4A5XHiGPjy0MUGAyxB3QgVuw2ciS0kHn6A==", "license": "BSD-3-Clause", "dependencies": { - "@lit/reactive-element": "^1.6.2 || ^2.0.0" + "@lit/reactive-element": "^1.6.2 || ^2.1.0" } }, "node_modules/@lit/reactive-element": { @@ -7206,6 +7207,75 @@ "igniteui-angular-core": "20.0.0" } }, + "node_modules/igniteui-grid-lite": { + "version": "0.7.1", + "resolved": "https://registry.npmjs.org/igniteui-grid-lite/-/igniteui-grid-lite-0.7.1.tgz", + "integrity": "sha512-CUKa9/U5Tn1DDxPMoHPP5RRbTlA/KqiSaHGDaMrrGNRBFbLQAZJnKNR3mlTgHeIk0rWjL6Wyc2bZgjpTWRQxIQ==", + "license": "MIT", + "dependencies": { + "@lit-labs/virtualizer": "~2.1.0", + "@lit/context": "~1.1.5", + "igniteui-webcomponents": "~7.1.0", + "lit": "^3.3.0" + }, + "engines": { + "node": ">=20" + } + }, + "node_modules/igniteui-grid-lite/node_modules/igniteui-webcomponents": { + "version": "7.1.3", + "resolved": "https://registry.npmjs.org/igniteui-webcomponents/-/igniteui-webcomponents-7.1.3.tgz", + "integrity": "sha512-iG4xBzooIOxtnAG8VIg39zKVWoo9jy2iEK3CDLGZYb9hU1LZx+4SAOPFkB9FSp15dgR4ql6kGKYf93T8oK0sdw==", + "license": "MIT", + "dependencies": { + "@floating-ui/dom": "^1.7.0", + "@lit-labs/virtualizer": "^2.1.0", + "@lit/context": "^1.1.0", + "igniteui-i18n-core": "^1.0.1", + "lit": "^3.3.0" + }, + "engines": { + "node": ">=22" + }, + "peerDependencies": { + "dompurify": "^3.3.0", + "igniteui-i18n-resources": "^1.0.1", + "marked": "^17.0.0", + "marked-shiki": "^1.2.0", + "shiki": "^3.20.0" + }, + "peerDependenciesMeta": { + "dompurify": { + "optional": true + }, + "igniteui-i18n-resources": { + "optional": true + }, + "marked": { + "optional": true + }, + "marked-shiki": { + "optional": true + }, + "shiki": { + "optional": true + } + } + }, + "node_modules/igniteui-i18n-core": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/igniteui-i18n-core/-/igniteui-i18n-core-1.0.5.tgz", + "integrity": "sha512-CO5Rqo5uqgyAfIHbFVuBEmo+fYXgLQ7zxRShqAu+ng8kDS5uwWjKeSGWVZjKMBgxmc6ZWMMbdcWIpGZUSOkPsw==", + "license": "MIT", + "peerDependencies": { + "igniteui-i18n-resources": "1.0.5" + }, + "peerDependenciesMeta": { + "igniteui-i18n-resources": { + "optional": true + } + } + }, "node_modules/igniteui-theming": { "version": "24.0.1", "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-24.0.1.tgz", diff --git a/package.json b/package.json index 11fde8dd..8dc34d18 100644 --- a/package.json +++ b/package.json @@ -60,6 +60,7 @@ "igniteui-angular-charts": "^20.0.0", "igniteui-angular-core": "^20.0.0", "igniteui-angular-maps": "^20.0.0", + "igniteui-grid-lite": "^0.7.1", "igniteui-theming": "^24.0.1", "igniteui-webcomponents": "^6.3.6", "minireset.css": "~0.0.4", diff --git a/projects/finance-grid/src/app/app.component.scss b/projects/finance-grid/src/app/app.component.scss index b07b6d03..9e886c47 100644 --- a/projects/finance-grid/src/app/app.component.scss +++ b/projects/finance-grid/src/app/app.component.scss @@ -1,17 +1,5 @@ -@use "igniteui-angular/theming" as *; - -@include core(); -@include typography( - $font-family: $bootstrap-typeface, - $type-scale: $bootstrap-type-scale -); -@include theme( - $palette: $light-bootstrap-palette, - $schema: $light-bootstrap-schema -); - -html { +:host { + display: block; height: 100%; - max-height: 1000px; } diff --git a/projects/finance-grid/src/app/finance-grid/finance-grid.component.html b/projects/finance-grid/src/app/finance-grid/finance-grid.component.html index a6e752cc..a57830e1 100644 --- a/projects/finance-grid/src/app/finance-grid/finance-grid.component.html +++ b/projects/finance-grid/src/app/finance-grid/finance-grid.component.html @@ -1,84 +1,75 @@ - - - Financial Portfolio - - - - - - - - - - - - -
- - {{ val }} +
+
+
+

IG Financial Sample

+

A grid showcasing Ignite UI Grid.

+
+
+ + + + Financial Portfolio +
+
- - - - - -
-
- {{ val | percent : "1.2-2" }} + + + + + + + + + +
+ +
+ {{ cell.row.data.ticker }} + {{ cell.row.data.company }} +
+ + - @if (val >= 0) { - trending_up - } @else { - trending_down - } -
- - - - - -
-
- {{ val | currency : 'USD' : 'symbol' : '1.2-2' }} + + + + + + + + +
+ {{ vm.formatCurrency(cell.row.data.lastPrice) }} +
+ + - @if (val >= 0) { - trending_up - } @else { - trending_down - } -
- - - - -
-
- {{ val | percent : "1.2-2" }} + + + {{ vm.formatCurrency(cell.value) }} + + + + + +
+ +
+ + - @if (val >= 0) { - trending_up - } @else { - trending_down - } -
- - - - -
-
- {{ val | percent : "1.2-2" }} + + +
+ {{ vm.formatPercent(cell.value) }} + + +
- -
- - - - - - {{ val }} days - - + + + +
diff --git a/projects/finance-grid/src/app/finance-grid/finance-grid.component.scss b/projects/finance-grid/src/app/finance-grid/finance-grid.component.scss index 0ac1593c..bbf0803b 100644 --- a/projects/finance-grid/src/app/finance-grid/finance-grid.component.scss +++ b/projects/finance-grid/src/app/finance-grid/finance-grid.component.scss @@ -1,39 +1,322 @@ -:host { +app-finance-grid { + --white: #ffffff; + --line: #d8dde6; + --line-soft: #c8cfda; + --text: #263446; + --text-dark: #1d1f20; + --subtle-muted: #5a5d61; + --font-family-condensed: 'Barlow Condensed', 'Arial Narrow', sans-serif; + --font-family-base: 'Barlow', 'Segoe UI', sans-serif; + --font-size-xs: 0.75rem; + --font-size-sm: 0.875rem; + --font-size-base: 1rem; + --font-size-3xl: 2rem; + --top-link-active: #5f46cf; + --pill-positive-text: #136045; + --pill-positive-bg: #d6f2e7; + --pill-negative-text: #9e3f74; + --pill-negative-bg: #f8d8e9; + --pill-negotiation-text: #5238be; + --pill-negotiation-bg: #e6ddfb; + display: block; height: 100%; width: 100%; + min-height: 0; min-width: 1100px; + color: var(--text); + font-family: var(--font-family-base); +} + +app-finance-grid .finance-shell { + padding: 1.5rem; + display: grid; + grid-template-rows: auto minmax(0, 1fr); + flex: 1 1 auto; + min-height: 0; + gap: 1.5rem; + overflow-x: auto; + background: #f0f3f7; +} + +app-finance-grid .finance-header { + display: flex; + align-items: center; + justify-content: space-between; } -::ng-deep { - :root { - font-family: var(--ig-font-family); - } - .profitCondition { - color: var(--ig-success-500); - } +app-finance-grid .finance-header h1 { + margin: 0; + font-family: var(--font-family-condensed); + font-weight: 600; + font-size: var(--font-size-3xl); + line-height: 1.1; + color: #1d1f20; +} - .lossCondition { - color: var(--ig-error-500); - } +app-finance-grid .subtle { + margin: 0.2rem 0 0; + color: var(--subtle-muted); + font-size: var(--font-size-base); } -.grid-sizing { - --ig-size: var(--ig-size-small); +app-finance-grid .finance-shell .finance-grid { + --ig-size: 1; + width: 100%; + height: 100%; + min-height: 0; + font-family: var(--font-family-base); + font-size: var(--font-size-sm); + border: 1px solid #d8dde6; + border-radius: 0.3rem; + overflow: hidden; + background: #ffffff; + + --background: #ffffff; + --header-background: #ffffff; + --header-text-color: #516073; + --header-border-color: #dde3ec; + --content-background: #ffffff; + --content-text-color: #223247; + --row-odd-background: #ffffff; + --row-even-background: #ffffff; + --row-hover-background: #eef3f8; + --row-border-color: #e5e9f0; + --filtering-row-background: #f9fbfd; + --filtering-row-text-color: #506176; + --cell-active-border-color: #ff4d92; } -.assets-container { +app-finance-grid .finance-grid .igx-grid__th, +app-finance-grid .finance-grid .igx-grid__td, +app-finance-grid .finance-grid .igx-grid__td-inner, +app-finance-grid .finance-grid .igx-grid__drop-area, +app-finance-grid .finance-grid .numeric-cell, +app-finance-grid .finance-grid .text-cell { + font-size: var(--font-size-base) !important; +} + +app-finance-grid .finance-grid .igx-grid__th { + height: 50px; + border-bottom: 1px solid #cfd8e6; + border-right: 1px solid #d7dfea; +} + +app-finance-grid .finance-grid .igx-grid-th__title { + font-size: var(--font-size-sm) !important; + font-weight: 600; +} + +app-finance-grid .finance-grid .igx-grid__td { + height: 50px; + border-bottom: 1px solid #d7dfea; +} + +app-finance-grid .finance-grid igx-grid-toolbar { + border-top: 1px solid #eef1f4; + border-bottom: 1px solid #dde3ec; + background: #ffffff; + min-height: 56px; + padding: 0 16px; + gap: 12px; +} + +app-finance-grid .finance-grid igx-grid-toolbar-title { + color: var(--text-dark); + font-family: var(--font-family-condensed); + font-size: 1.125rem; + font-weight: 600; + flex: 0 0 auto !important; + margin-right: 8px; +} + +/* Override Bootstrap theme pink primary on toolbar buttons */ +app-finance-grid igx-grid-toolbar .igx-button--outlined { + border: 1px solid var(--line-soft) !important; + color: var(--text-dark) !important; + background: var(--white) !important; + box-shadow: none !important; + height: 36px !important; + padding: 0 14px !important; + font-size: var(--font-size-sm) !important; + font-family: var(--font-family-base) !important; +} + +app-finance-grid igx-grid-toolbar .igx-button--outlined:hover { + background: #f0f3f7 !important; + border-color: #99a4b4 !important; +} + +app-finance-grid igx-grid-toolbar .igx-button--outlined igx-icon { + color: var(--text-dark) !important; + font-size: 1.1rem !important; +} + +app-finance-grid .finance-toolbar-search { display: flex; align-items: center; - gap: 0.5rem; - & igx-avatar { - --igx-avatar-size: 24px; - } + flex: 1; + max-width: 280px; } -.progress-container { - display: grid; - grid-template-columns: 0.5fr 1fr; +app-finance-grid .finance-search-input { + width: 100%; + padding: 0.375rem 0.75rem; + border: 1px solid var(--line); + border-radius: 4px; + font-family: var(--font-family-base); + font-size: var(--font-size-sm); + color: var(--text); + background: var(--white); + outline: none; + transition: border-color 0.15s; + height: 38px; +} + +app-finance-grid .finance-search-input::placeholder { + color: var(--subtle-muted); +} + +app-finance-grid .finance-search-input:focus { + border-color: var(--top-link-active, #7b62e8); +} + +app-finance-grid .ticker-cell, +app-finance-grid .price-combined-cell, +app-finance-grid .net-profit-combined-cell, +app-finance-grid .allocation-cell { + display: flex; + align-items: center; width: 100%; +} + +app-finance-grid .ticker-cell { + gap: 0.6rem; +} + +app-finance-grid .ticker-logo { + flex: 0 0 auto; +} + +/* Force avatar background — Bootstrap theme doesn't resolve --ig-avatar-background on .igx-avatar--circle */ +app-finance-grid .ticker-logo.igx-avatar--circle { + background: var(--ig-avatar-background) !important; +} + +app-finance-grid .ticker-logo.igx-avatar--circle span { + color: var(--ig-avatar-color, #fff) !important; + font-size: 0.82rem !important; + font-weight: 700 !important; + letter-spacing: 0.01em; +} + +app-finance-grid .ticker-meta { + display: grid; + gap: 0.15rem; + min-width: 0; +} + +app-finance-grid .ticker-symbol { + font-weight: 700; + color: var(--text); +} + +app-finance-grid .ticker-name { + color: var(--subtle-muted); + font-size: 0.94rem; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +app-finance-grid .price-trend-spark { + display: block; +} + +app-finance-grid .price-combined-cell, +app-finance-grid .net-profit-combined-cell { + gap: 0.6rem; + flex-wrap: wrap; +} + +app-finance-grid .price-combined-price { + font-weight: 600; +} + +app-finance-grid .finance-delta-badge, +app-finance-grid .finance-value-badge { + --ig-size: 1; + background: transparent !important; + border-radius: 999px !important; + padding: 0 !important; +} + +app-finance-grid .finance-delta-badge .igx-badge__value, +app-finance-grid .finance-value-badge .igx-badge__value { + display: inline-flex; + align-items: center; + min-height: 1.35rem; + padding: 0.08rem 0.52rem; + border-radius: 999px; + font-size: var(--font-size-xs); + font-weight: 600; + letter-spacing: 0; + border: none; + box-shadow: none; +} + +app-finance-grid .finance-delta-badge.igx-badge--success .igx-badge__value, +app-finance-grid .finance-value-badge.igx-badge--success .igx-badge__value { + color: var(--pill-positive-text); + background: var(--pill-positive-bg); +} + +app-finance-grid .finance-delta-badge.igx-badge--error .igx-badge__value, +app-finance-grid .finance-value-badge.igx-badge--error .igx-badge__value { + color: var(--pill-negative-text); + background: var(--pill-negative-bg); +} + +app-finance-grid .finance-delta-badge.igx-badge--info .igx-badge__value, +app-finance-grid .finance-value-badge.igx-badge--info .igx-badge__value { + color: var(--pill-negotiation-text); + background: var(--pill-negotiation-bg); +} + +app-finance-grid .allocation-cell { gap: 0.5rem; } + +app-finance-grid .allocation-value { + min-width: 3.5rem; + font-variant-numeric: tabular-nums; +} + +app-finance-grid .allocation-track { + position: relative; + display: flex; + flex: 1 1 0; + min-width: 50px; + height: 0.5rem; + border-radius: 999px; + background: #dde3ec; + overflow: hidden; +} + +app-finance-grid .allocation-fill { + display: block; + height: 100%; + border-radius: inherit; + background: linear-gradient(90deg, #7f4cf6 0%, #5f46cf 100%); +} + +app-finance-grid .finance-grid .numeric-cell, +app-finance-grid .allocation-value, +app-finance-grid .ticker-symbol, +app-finance-grid .price-combined-price { + font-variant-numeric: tabular-nums; +} + +app-finance-grid .finance-col-sep { + border-left: 1px solid #eef1f4; +} diff --git a/projects/finance-grid/src/app/finance-grid/finance-grid.component.ts b/projects/finance-grid/src/app/finance-grid/finance-grid.component.ts index 227d9bd4..98fcabac 100644 --- a/projects/finance-grid/src/app/finance-grid/finance-grid.component.ts +++ b/projects/finance-grid/src/app/finance-grid/finance-grid.component.ts @@ -1,130 +1,218 @@ -import { - afterNextRender, - Component, - OnDestroy, - OnInit, - ViewChild -} from '@angular/core'; -import { FilteringExpressionsTree, FilteringLogic, IColumnPipeArgs, IgxStringFilteringOperand, THEME_TOKEN, ThemeToken } from 'igniteui-angular/core'; -import { IgxAvatarComponent } from 'igniteui-angular/avatar'; +import { ChangeDetectionStrategy, Component, OnDestroy, OnInit, ViewEncapsulation, computed, inject, signal } from '@angular/core'; +import { isPlatformBrowser } from '@angular/common'; +import { PLATFORM_ID } from '@angular/core'; +import { IgxAvatarModule } from 'igniteui-angular/avatar'; +import { IgxBadgeModule } from 'igniteui-angular/badge'; import { IgxCellTemplateDirective, IgxColumnComponent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarExporterComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarTitleComponent } from 'igniteui-angular/grids/core'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; -import { IgxIconComponent } from 'igniteui-angular/icon'; -import { IgxInputDirective, IgxInputGroupComponent } from 'igniteui-angular/input-group'; -import { IgxLinearProgressBarComponent } from 'igniteui-angular/progressbar'; -import { CurrencyPipe, PercentPipe, AsyncPipe } from '@angular/common'; -import { FinancialService } from '../services/financial.service'; -import { BehaviorSubject } from 'rxjs'; -import { FormsModule } from '@angular/forms'; +import { IgxSparklineModule } from 'igniteui-angular-charts'; +import { IgxCsvExporterService, IgxExcelExporterService, IgxPdfExporterService, type IColumnExportingEventArgs } from 'igniteui-angular/grids/core'; + +type FinanceTone = 'blue' | 'orange' | 'green' | 'slate' | 'gold' | 'red'; + +interface PriceTrendPoint { + value: number; +} + +interface FinanceSeedRow { + ticker: string; + company: string; + lastPrice: number; + changePct: number; + marketValue: number; + netProfit: number; + netProfitPct: number; + allocationPct: number; + averageCost: number; + position: number; + holdingPeriodDays: number; + tone: FinanceTone; +} + +interface FinanceRow extends FinanceSeedRow { + priceTrend: PriceTrendPoint[]; +} @Component({ standalone: true, selector: 'app-finance-grid', - providers: [ - { - provide: THEME_TOKEN, - useFactory: () => { - return new ThemeToken('bootstrap'); - }, - }, - ], + changeDetection: ChangeDetectionStrategy.OnPush, + encapsulation: ViewEncapsulation.None, imports: [ - FormsModule, - CurrencyPipe, - PercentPipe, - AsyncPipe, - IgxLinearProgressBarComponent, - IgxAvatarComponent, + IgxAvatarModule, + IgxBadgeModule, + IgxSparklineModule, IgxGridComponent, IgxColumnComponent, IgxCellTemplateDirective, - IgxInputGroupComponent, - IgxInputDirective, - IgxIconComponent, - IgxIconComponent, IgxGridToolbarComponent, IgxGridToolbarTitleComponent, IgxGridToolbarActionsComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarExporterComponent -], + ], templateUrl: './finance-grid.component.html', styleUrl: './finance-grid.component.scss', }) export class FinanceGridComponent implements OnInit, OnDestroy { - @ViewChild(IgxGridComponent, { static: true }) public grid!: IgxGridComponent; - public data$: BehaviorSubject = new BehaviorSubject([]); - public isLoading = true; - public currencyDigitsFormat: IColumnPipeArgs = { - digitsInfo: '1.2-2' - }; - - public profitLossValueClasses = { - profitCondition: this.profitConditionHandler, - lossCondition: this.lossConditionHandler, - }; - private _timer!: ReturnType; - private readonly updateTimerInMs = 3000; - constructor(private financialService: FinancialService) { - afterNextRender({ - write: () => { - this._timer = setInterval(() => { - this.financialService.updateAllPrices(this.grid.data); - this.grid.markForCheck(); - }, this.updateTimerInMs); - }, - }); - } + protected readonly vm = this; + + private readonly excelExporter = inject(IgxExcelExporterService); + private readonly csvExporter = inject(IgxCsvExporterService); + private readonly pdfExporter = inject(IgxPdfExporterService); + private readonly platformId = inject(PLATFORM_ID); + private readonly currencyFormatter = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', minimumFractionDigits: 2, maximumFractionDigits: 2 }); + private readonly percentFormatter = new Intl.NumberFormat('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 }); + private readonly financeNonExportableFields = new Set(['priceTrend']); + private readonly viewportWidth = signal(isPlatformBrowser(this.platformId) ? window.innerWidth : 1280); + private readonly resizeHandler = (): void => this.viewportWidth.set(window.innerWidth); + + private readonly financeSeedRows: FinanceSeedRow[] = [ + { ticker: 'AMD', company: 'Advanced Micro Devices Inc.', lastPrice: 130.36, changePct: 0, marketValue: 3128.64, netProfit: 1315.68, netProfitPct: 72.57, allocationPct: 4.38, averageCost: 75.54, position: 24, holdingPeriodDays: 157, tone: 'blue' }, + { ticker: 'ETH', company: 'Ethereum', lastPrice: 3567.93, changePct: -0.2, marketValue: 10073.79, netProfit: 3074.79, netProfitPct: 40.3, allocationPct: 18.43, averageCost: 2543, position: 3, holdingPeriodDays: 120, tone: 'slate' }, + { ticker: 'ABNB', company: 'Airbnb Inc.', lastPrice: 130.65, changePct: -0.77, marketValue: 3004.95, netProfit: 1709.59, netProfitPct: 131.98, allocationPct: 3.13, averageCost: 56.32, position: 23, holdingPeriodDays: 540, tone: 'red' }, + { ticker: 'BABA', company: 'Alibaba Group Holding Limited', lastPrice: 81.81, changePct: 1.22, marketValue: 981.72, netProfit: -310.92, netProfitPct: -24.05, allocationPct: 3.12, averageCost: 107.72, position: 12, holdingPeriodDays: 91, tone: 'orange' }, + { ticker: 'BTC', company: 'Bitcoin', lastPrice: 95300.86, changePct: 0.72, marketValue: 19060.17, netProfit: 7013.97, netProfitPct: 58.23, allocationPct: 29.1, averageCost: 60231, position: 0.2, holdingPeriodDays: 323, tone: 'gold' }, + { ticker: 'AAPL', company: 'Apple Inc.', lastPrice: 223.36, changePct: 0.45, marketValue: 245.7, netProfit: 76.07, netProfitPct: 44.84, allocationPct: 0.41, averageCost: 154.21, position: 1.1, holdingPeriodDays: 632, tone: 'slate' }, + { ticker: 'MSFT', company: 'Microsoft Corp.', lastPrice: 401.22, changePct: 0.5, marketValue: 280.85, netProfit: -20.15, netProfitPct: -6.69, allocationPct: 0.73, averageCost: 430, position: 0.7, holdingPeriodDays: 342, tone: 'blue' }, + { ticker: 'GOOGL', company: 'Alphabet Inc.', lastPrice: 160.02, changePct: 1.25, marketValue: 208.03, netProfit: -18.17, netProfitPct: -8.03, allocationPct: 0.55, averageCost: 174, position: 1.3, holdingPeriodDays: 376, tone: 'green' }, + { ticker: 'AMZN', company: 'Amazon.com Inc.', lastPrice: 205.87, changePct: 0.49, marketValue: 885.24, netProfit: -285.82, netProfitPct: -24.41, allocationPct: 2.83, averageCost: 272.34, position: 4.3, holdingPeriodDays: 352, tone: 'gold' }, + { ticker: 'TSLA', company: 'Tesla Inc.', lastPrice: 332.92, changePct: 0.9, marketValue: 1598.02, netProfit: 157.01, netProfitPct: 10.9, allocationPct: 3.48, averageCost: 300.21, position: 4.8, holdingPeriodDays: 452, tone: 'red' } + ]; + + protected readonly hideMostColumns = computed(() => this.viewportWidth() < 700); + protected readonly financeRows: FinanceRow[] = this.financeSeedRows.map((row) => ({ ...row, priceTrend: this.buildPriceTrend(row.ticker, row.changePct) })); + protected readonly maxAllocationPct = Math.max(...this.financeRows.map((row) => Math.abs(row.allocationPct)), 0); + protected readonly financeAssetFilter = signal(''); + protected readonly filteredFinanceRows = computed(() => { + const query = this.financeAssetFilter().trim().toLowerCase(); + if (!query) { + return this.financeRows; + } + + return this.financeRows.filter((row) => row.ticker.toLowerCase().includes(query) || row.company.toLowerCase().includes(query)); + }); public ngOnInit(): void { - this.financialService.getData(); - this.data$ = this.financialService.records; - this.data$.subscribe((data) => { - if (data.length !== 0) { - this.isLoading = false; - } - }); + this.configureExportExclusions(); + if (isPlatformBrowser(this.platformId)) { + window.addEventListener('resize', this.resizeHandler); + } } public ngOnDestroy(): void { - if (this._timer) { - clearInterval(this._timer); + if (isPlatformBrowser(this.platformId)) { + window.removeEventListener('resize', this.resizeHandler); } } - protected filter(event: Event) { - const value = (event.target as HTMLInputElement).value; - const expressionTree = new FilteringExpressionsTree(FilteringLogic.Or); - const tickerExpression = { - condition: IgxStringFilteringOperand.instance().condition('contains'), - fieldName: 'id', - searchVal: value, - ignoreCase: true - }; - const assetExpression = { - condition: IgxStringFilteringOperand.instance().condition('contains'), - fieldName: 'holdingName', - searchVal: value, - ignoreCase: true + protected onFinanceAssetSearch(event: Event): void { + const target = event.target; + if (!(target instanceof HTMLInputElement)) { + return; + } + + this.financeAssetFilter.set(target.value); + } + + protected financeAvatarInitials(ticker: string): string { + const normalized = ticker.replace(/[^A-Z0-9]/gi, '').toUpperCase(); + return normalized.slice(0, 3) || 'EQ'; + } + + protected financeAvatarColor(tone: FinanceTone): string { + const colors: Record = { + blue: '#2f74c0', + orange: '#d97b23', + green: '#3ea35b', + slate: '#5c7399', + gold: '#c7a43b', + red: '#bf4a4a' }; - expressionTree.filteringOperands.push(tickerExpression,assetExpression); - if (value) { - this.grid.filteringExpressionsTree = expressionTree; - } else { - this.grid.clearFilter(); + + return colors[tone]; + } + + protected formatCurrency(value: number): string { + return this.currencyFormatter.format(value); + } + + protected formatPercent(value: number): string { + return `${this.percentFormatter.format(Math.abs(value))}%`; + } + + protected badgeType(value: number): string { + if (value > 0) return 'success'; + if (value < 0) return 'error'; + return 'info'; + } + + protected badgeLabel(value: number): string { + const arrow = value > 0 ? '↑ ' : value < 0 ? '↓ ' : ''; + return `${arrow}${this.formatPercent(value)}`; + } + + protected allocationWidth(value: number): string { + const magnitude = Math.abs(value); + if (magnitude === 0 || this.maxAllocationPct <= 0) { + return '0%'; } + + const scaled = (magnitude / this.maxAllocationPct) * 100; + return `${Math.min(100, Math.max(6, scaled))}%`; } - protected getPathToImage(companyName: string) { - return `companies/${companyName.split(' ')[0]}.png`; + protected sparklineBrush(changePct: number): string { + return changePct < 0 ? '#e34b4b' : '#1dbf63'; } - private profitConditionHandler(rowData: any, columnKey: string) { - return rowData[columnKey] >= 0; + protected sparklineNegativeBrush(changePct: number): string { + return changePct < 0 ? '#ff7a7a' : '#e34b4b'; } - private lossConditionHandler(rowData: any, columnKey: string) { - return rowData[columnKey] < 0; + private configureExportExclusions(): void { + const skipChartColumns = (args: IColumnExportingEventArgs): void => { + if (this.financeNonExportableFields.has(args.field)) { + args.cancel = true; + } + }; + + this.excelExporter.columnExporting.subscribe(skipChartColumns); + this.csvExporter.columnExporting.subscribe(skipChartColumns); + this.pdfExporter.columnExporting.subscribe(skipChartColumns); + } + + private buildPriceTrend(ticker: string, changePct: number): PriceTrendPoint[] { + const points = 30; + const target = Number(changePct.toFixed(2)); + const volatility = Math.max(0.2, Math.min(1.15, Math.abs(changePct) * 0.55 + 0.25)); + const hashSeed = ticker.split('').reduce((acc, ch) => ((acc * 31) + ch.charCodeAt(0)) >>> 0, 2166136261); + let seed = hashSeed; + let value = 0; + const series: PriceTrendPoint[] = []; + + const nextRandom = (): number => { + seed ^= seed << 13; + seed ^= seed >>> 17; + seed ^= seed << 5; + return (seed >>> 0) / 4294967296; + }; + + for (let index = 0; index < points; index++) { + const t = index / (points - 1); + const directionalTarget = target * t; + const randomStep = (nextRandom() - 0.5) * volatility; + const pull = (directionalTarget - value) * 0.22; + const microWave = Math.sin((t * Math.PI * 9) + (hashSeed % 11)) * 0.06; + value += randomStep + pull + microWave; + series.push({ value: Number(value.toFixed(2)) }); + } + + if (series.length > 0) { + series[series.length - 1] = { value: target }; + } + + return series; } } diff --git a/projects/finance-grid/src/styles.scss b/projects/finance-grid/src/styles.scss index 9e6ad246..4a9b818e 100644 --- a/projects/finance-grid/src/styles.scss +++ b/projects/finance-grid/src/styles.scss @@ -1,8 +1,21 @@ +@use "igniteui-angular/theming" as *; + +@include core(); +@include typography( + $font-family: $bootstrap-typeface, + $type-scale: $bootstrap-type-scale +); +@include theme( + $palette: $light-bootstrap-palette, + $schema: $light-bootstrap-schema +); + html { margin: 0; padding: 0; height: 100%; } + body { margin: 0; padding: 8px; diff --git a/projects/fleet-management-grid/public/assets/car_images.json b/projects/fleet-management-grid/public/assets/car_images.json new file mode 100644 index 00000000..14dc46fc --- /dev/null +++ b/projects/fleet-management-grid/public/assets/car_images.json @@ -0,0 +1,257 @@ +{ + "Ford F-150 blue": [ + "Ford-F150-caleb-white-XGJBSkoqX_I-unsplash.jpg", + "Ford-F150-caleb-white-XGJBSkoqX_I-unsplash1.jpg", + "Ford-F150-caleb-white-XGJBSkoqX_I-unsplash2.jpg" + ], + "Ford F-150 red": [ + "Ford-f150-7572360_1920.jpg", + "Ford-f150-7572360_19201.jpg", + "Ford-f150-7572360_19202.jpg" + ], + "Ford Focus blue": [ + "ford-focus-5167838_1280.jpg", + "ford-focus-5167838_12801.jpg", + "ford-focus-5167838_12802.jpg" + ], + "Ford Focus dark gray": [ + "1-1-Ford-Focus-car-3300587_1280.jpg", + "1-2-Ford-Focus-car-3300588_1280.jpg", + "1-3-Ford-Focus-car-3300587_1280.jpg" + ], + "Ford Mustang blue": [ + "Ford-Mustang-automobile-1450573_1920.jpg", + "Ford-Mustang-automobile-1450573_19201.jpg", + "Ford-Mustang-automobile-1450573_19202.jpg" + ], + "Ford Mustang red": [ + "Ford-Mustang-convertible-1630448_1920.jpg", + "Ford-Mustang-convertible-1630448_19201.jpg", + "Ford-Mustang-convertible-1630448_19202.jpg" + ], + "Honda Civic": [ + "honda-civic-4967605_1920.jpg", + "honda-civic-4967605_19201.jpg", + "honda-civic-4967605_19202.jpg" + ], + "Hyundai ix35": [ + "Hyundai-ix35-5505817_1920.jpg", + "Hyundai-ix35-5505817_19201.jpg", + "Hyundai-ix35-5505817_19202.jpg" + ], + "Hyundai Kona": [ + "Hyundai-Kona-electric-4964667_1920.jpg", + "Hyundai-Kona-electric-4964667_19201.jpg", + "Hyundai-Kona-electric-4964667_19202.jpg" + ], + "Kia Ceed red": [ + "Kia-Ceed-car-3305685_1280.jpg", + "Kia-ceed-car-3305686_1920.jpg", + "Kia-Ceed-car-3305699_1280.jpg" + ], + "Kia Ceed white": [ + "Kia-Ceed-car-6097887_1920.jpg", + "Kia-Ceed-car-6097887_19201.jpg", + "Kia-Ceed-car-6097887_19202.jpg" + ], + "Kia EV6 gray": [ + "KIA-EV6-hyundai-motor-group-gKODwMitO-c-unsplash.jpg", + "KIA-EV6-hyundai-motor-group-gKODwMitO-c-unsplash1.jpg", + "KIA-EV6-hyundai-motor-group-gKODwMitO-c-unsplash2.jpg" + ], + "Kia EV6 red": [ + "KIA-EV6-hyundai-motor-group-jdjzmbw4GPg-unsplash.jpg", + "KIA-EV6-hyundai-motor-group-jdjzmbw4GPg-unsplash1.jpg", + "KIA-EV6-hyundai-motor-group-jdjzmbw4GPg-unsplash2.jpg" + ], + "Kia EV6 GT": [ + "KIA-EV6-GT-line edited hyundai-motor-group-ErBFxMkJpKk-unsplash-detail1.jpg", + "KIA-EV6-GT-line edited hyundai-motor-group-ErBFxMkJpKk-unsplash.jpg", + "KIA-EV6-GT-line edited hyundai-motor-group-ErBFxMkJpKk-unsplash2.jpg" + ], + "Kia Soul": [ + "Kia-Soul-car-2441815_1920.jpg", + "Kia-Soul-car-2441815_19201.jpg", + "Kia-Soul-car-2441815_19202.jpg" + ], + "Kia Sportage": [ + "Kia-Sportage-2382086_1920.jpg", + "Kia-Sportage-2382086_19201.jpg", + "Kia-Sportage-2382086_19202.jpg" + ], + "Mazda 3": [ + "mazda-3-7498005_1920.jpg", + "mazda-3-7498005_19201.jpg", + "mazda-3-7498005_19202.jpg" + ], + "Mazda 6": [ + "3-1-Mazda-6-car-6122178_1920.jpg", + "3-2-Mazda-6-car-6122177_1920.jpg", + "3-3-Mazda-6-car-6122177_1920.jpg" + ], + "Mazda MX-5": [ + "2-1-Mazda-MX-5-cabriolet-3627312_1920.jpg", + "2-2-Mazda-MX-5-cabriolet-3708152_1920.jpg", + "2-3-Mazda-MX-5-cabriolet-3708152_1920.jpg" + ], + "Tesla 3 red": [ + "Tesla-3-car-8607713_1920.jpg", + "Tesla-3-car-8607713_19201.jpg", + "Tesla-3-car-8607713_19202.jpg" + ], + "Tesla 3 white 1": [ + "tesla-3-5937063_1920.jpg", + "tesla-3-5937063_19201.jpg", + "tesla-3-5937063_19202.jpg" + ], + "Tesla 3 white 2": [ + "Tesla-3-charlie-deets-AkgALppFIwo-unsplash.jpg", + "Tesla-3-charlie-deets-AkgALppFIwo-unsplash1.jpg", + "Tesla-3-charlie-deets-AkgALppFIwo-unsplash2.jpg" + ], + "Tesla 3 white 3": [ + "Tesla-3-i-m-zion-A-JEMot0hWs-unsplash.jpg", + "Tesla-3-i-m-zion-A-JEMot0hWs-unsplash1.jpg", + "Tesla-3-i-m-zion-A-JEMot0hWs-unsplash2.jpg" + ], + "Toyota Corolla": [ + "toyota-corolla-347288_1920.jpg", + "toyota-corolla-347288_19201.jpg", + "toyota-corolla-347288_19202.jpg" + ], + "Toyota RAV4 1": [ + "Toyota-RAV4-gino-marcelo-hernandez-sanchez-MN0-x2hDNrc-unsplash.jpg", + "Toyota-RAV4-gino-marcelo-hernandez-sanchez-MN0-x2hDNrc-unsplash1.jpg", + "Toyota-RAV4-gino-marcelo-hernandez-sanchez-MN0-x2hDNrc-unsplash2.jpg" + ], + "Toyota RAV4 2": [ + "Toyota-RAV4-krish-parmar-PmSwFm4Lw1c-unsplash.jpg", + "Toyota-RAV4-krish-parmar-PmSwFm4Lw1c-unsplash1.jpg", + "Toyota-RAV4-krish-parmar-PmSwFm4Lw1c-unsplash2.jpg" + ], + "Toyota RAV4 3": [ + "Toyota-RAV4-stephen-andrews-28Lmg9YaTFY-unsplash.jpg", + "Toyota-RAV4-stephen-andrews-28Lmg9YaTFY-unsplash1.jpg", + "Toyota-RAV4-stephen-andrews-28Lmg9YaTFY-unsplash2.jpg" + ], + "Toyota Tundra": [ + "toyota-tundra-1241658_1920.jpg", + "toyota-tundra-1241658_19201.jpg", + "toyota-tundra-1241658_19202.jpg" + ], + "VW Caddy 1": [ + "VW_Caddy-ollie-walls-jDo2IZm-uFc-unsplash.jpg", + "VW_Caddy-ollie-walls-jDo2IZm-uFc-unsplash1.jpg", + "VW_Caddy-ollie-walls-jDo2IZm-uFc-unsplash2.jpg" + ], + "VW Caddy 2": [ + "VW-Caddy-daniil-lyusov-fesux3IvcVo-unsplash-2.jpg", + "VW-Caddy-daniil-lyusov-fesux3IvcVo-unsplash-21.jpg", + "VW-Caddy-daniil-lyusov-fesux3IvcVo-unsplash-22.jpg" + ], + "VW Golf": [ + "vw-Golf-4332807_1280.jpg", + "vw-Golf-4332807_12801.jpg", + "VW-Golf-car-5671331_1280.jpg" + ], + "VW Passat black": [ + "VW-passat-768159_1280.jpg", + "VW-passat-768159_12801.jpg", + "VW-passat-768159_12802.jpg" + ], + "VW Passat gray": [ + "VW-Passat-car-866764_1280.jpg", + "VW-Passat-car-866769_1280.jpg", + "VW-Passat-car-866769_12801.jpg" + ], + "VW Polo": [ + "VW-Polo-pexels-hellojoshwithers-16625624.jpg", + "VW-Polo-pexels-hellojoshwithers-166256241.jpg", + "VW-Polo-pexels-hellojoshwithers-166256242.jpg" + ], + "VW Touareg 1": [ + "4-1-VW-Touareg-automobile-4061855_1920.jpg", + "4-2-VW-Touareg-338895_1920.jpg", + "4-3-VW-Touareg-automobile-4061855_1920.jpg" + ], + "VW Touareg 2": [ + "5-1-VW-Touareg-pexels-ardit-mbrati-216809103-16646414.jpg", + "5-2-VW-Touareg-pexels-ardit-mbrati-216809103-16646416.jpg", + "5-3-VW-Touareg-pexels-ardit-mbrati-216809103-16646412.jpg" + ], + "Ford Focus silver": [ + "1-1-Ford-Focus-car-3300587_1280.jpg", + "1-2-Ford-Focus-car-3300588_1280.jpg", + "1-3-Ford-Focus-car-3300587_1280.jpg" + ], + "Hyundai Elantra graphite": [ + "mazda-3-7498005_1920.jpg", + "mazda-3-7498005_19201.jpg", + "mazda-3-7498005_19202.jpg" + ], + "Subaru Outback autumn green": [ + "Toyota-RAV4-stephen-andrews-28Lmg9YaTFY-unsplash.jpg", + "Toyota-RAV4-stephen-andrews-28Lmg9YaTFY-unsplash1.jpg", + "Toyota-RAV4-stephen-andrews-28Lmg9YaTFY-unsplash2.jpg" + ], + "Mazda CX-5 machine gray": [ + "Toyota-RAV4-krish-parmar-PmSwFm4Lw1c-unsplash.jpg", + "Toyota-RAV4-krish-parmar-PmSwFm4Lw1c-unsplash1.jpg", + "Toyota-RAV4-krish-parmar-PmSwFm4Lw1c-unsplash2.jpg" + ], + "Chevrolet Malibu summit white": [ + "tesla-3-5937063_1920.jpg", + "tesla-3-5937063_19201.jpg", + "tesla-3-5937063_19202.jpg" + ], + "Nissan Altima gun metallic": [ + "VW-Passat-car-866764_1280.jpg", + "VW-Passat-car-866769_1280.jpg", + "VW-Passat-car-866769_12801.jpg" + ], + "Honda CR-V urban gray": [ + "Toyota-RAV4-gino-marcelo-hernandez-sanchez-MN0-x2hDNrc-unsplash.jpg", + "Toyota-RAV4-gino-marcelo-hernandez-sanchez-MN0-x2hDNrc-unsplash1.jpg", + "Toyota-RAV4-gino-marcelo-hernandez-sanchez-MN0-x2hDNrc-unsplash2.jpg" + ], + "Ford Escape carbonized gray": [ + "Hyundai-ix35-5505817_1920.jpg", + "Hyundai-ix35-5505817_19201.jpg", + "Hyundai-ix35-5505817_19202.jpg" + ], + "Volkswagen Tiguan atlantic blue": [ + "5-1-VW-Touareg-pexels-ardit-mbrati-216809103-16646414.jpg", + "5-2-VW-Touareg-pexels-ardit-mbrati-216809103-16646416.jpg", + "5-3-VW-Touareg-pexels-ardit-mbrati-216809103-16646412.jpg" + ], + "Jeep Cherokee granite crystal": [ + "toyota-tundra-1241658_1920.jpg", + "toyota-tundra-1241658_19201.jpg", + "toyota-tundra-1241658_19202.jpg" + ], + "Chevrolet Equinox mosaic black": [ + "KIA-EV6-GT-line edited hyundai-motor-group-ErBFxMkJpKk-unsplash-detail1.jpg", + "KIA-EV6-GT-line edited hyundai-motor-group-ErBFxMkJpKk-unsplash.jpg", + "KIA-EV6-GT-line edited hyundai-motor-group-ErBFxMkJpKk-unsplash2.jpg" + ], + "Hyundai Tucson amazon gray": [ + "Hyundai-Kona-electric-4964667_1920.jpg", + "Hyundai-Kona-electric-4964667_19201.jpg", + "Hyundai-Kona-electric-4964667_19202.jpg" + ], + "Nissan Rogue caspian blue": [ + "Kia-Sportage-2382086_1920.jpg", + "Kia-Sportage-2382086_19201.jpg", + "Kia-Sportage-2382086_19202.jpg" + ], + "Ford Transit Connect frozen white": [ + "VW_Caddy-ollie-walls-jDo2IZm-uFc-unsplash.jpg", + "VW_Caddy-ollie-walls-jDo2IZm-uFc-unsplash1.jpg", + "VW_Caddy-ollie-walls-jDo2IZm-uFc-unsplash2.jpg" + ], + "Ram ProMaster City bright white": [ + "VW-Caddy-daniil-lyusov-fesux3IvcVo-unsplash-2.jpg", + "VW-Caddy-daniil-lyusov-fesux3IvcVo-unsplash-21.jpg", + "VW-Caddy-daniil-lyusov-fesux3IvcVo-unsplash-22.jpg" + ] +} diff --git a/projects/fleet-management-grid/src/app/app.component.scss b/projects/fleet-management-grid/src/app/app.component.scss index 0853dbd0..478abc91 100644 --- a/projects/fleet-management-grid/src/app/app.component.scss +++ b/projects/fleet-management-grid/src/app/app.component.scss @@ -1,14 +1,4 @@ -@use "igniteui-angular/theming" as *; - -@include core(); -@include typography(); -@include theme( - $palette: $dark-material-palette, - $schema: $dark-material-schema -); - -.overlay igx-card { - border: 0px; - border-radius: 4px; - box-shadow: var(--ig-elevation-24); +:host { + display: block; + height: 100%; } diff --git a/projects/fleet-management-grid/src/app/fleet-management-grid/fleet-management-grid.component.html b/projects/fleet-management-grid/src/app/fleet-management-grid/fleet-management-grid.component.html index 91584b7f..f8255457 100644 --- a/projects/fleet-management-grid/src/app/fleet-management-grid/fleet-management-grid.component.html +++ b/projects/fleet-management-grid/src/app/fleet-management-grid/fleet-management-grid.component.html @@ -1,332 +1,192 @@ - - - Fleet Management - - @if (grid.sortingExpressions.length > 0) { - - } - - - - - - - - - - - - {{ value }} - - - - - - - - - - - {{ value }} - - - - - - {{ cell.value }} - - - - - - - - - Details - - - -
-
- - @for (slide of getPathToCarImage(dataItem.vehicleId); track slide) { - -
- +
+
+
+ directions_car +

Fleet Management

+
+
+ +
+ + All vehicles {{ vm.fleetMetrics()[0].value }} + + + Active {{ vm.fleetMetrics()[1].value }} + + + Available {{ vm.fleetMetrics()[2].value }} + + + In Maintenance {{ vm.fleetMetrics()[3].value }} + +
+ + + + + + + + + + + + + + + + + + + + + + {{ cell.value }} + + + + + + @if (vm.isBrowser) { + +
+ + + Details + +
+ + +
+
- - } - -
- -
- @for (categorySet of [VEHICLE_DETAILS.detailsCategories, VEHICLE_DETAILS.engineCategories]; track categorySet) { -
-
- @for (category of categorySet; track category) { -
- {{ category.label }}: - -
- } -
-
- @for (category of categorySet; track category) { -
- {{ getValueByPath(dataItem, category.key) }} - -
- } -
+ + + +
+
Make{{ dataItem.make }}
+
Engine{{ dataItem.specs.engine }}
+
Generation{{ dataItem.specs.generation }}
+
Year{{ dataItem.specs.year }}
+
Fuel Type{{ dataItem.specs.fuelType }}
+
Power{{ dataItem.specs.power }}
+
Mileage{{ dataItem.specs.mileage }}
+
Doors{{ dataItem.specs.doorsSeats.split(' / ')[0] }}
+
Seats{{ dataItem.specs.doorsSeats.split(' / ')[1] }}
+
Cubature{{ dataItem.specs.cubature }}
+
Color{{ dataItem.specs.color }}
+
Transmission{{ dataItem.specs.transmission }}
+
MSRP{{ dataItem.specs.msrp }}
+
Toll Pass ID{{ dataItem.specs.tollPassId }}
- } -
-
- - - - - - Trip History - - - -
- -
- - - - - - Maintenance - - - -
- -
- - - - - - Cost - - - -
-
-
- Costs per Type - - - YTD - Last 3 Months - Last 6 Months - Last 12 Months - -
-
- - -
-
- -
-
- Costs per Meter, per Quarter - - - YTD - 2023 - 2022 - 2021 - 2020 -
-
- - -
-
+ + + + Trip History + +
+
+
Trips (30d){{ vm.fleetTripSummary(dataItem).trips }}
+
Total distance{{ vm.fleetTripSummary(dataItem).totalDistance }}
+
Avg trip{{ vm.fleetTripSummary(dataItem).avgTrip }}
+
-
-
- Fuel Costs per Month - - - YTD - Last 3 Months - Last 6 Months - Last 12 Months - + + + + + + @for (trip of vm.fleetTripHistory(dataItem); track trip.date + trip.from + trip.to) { + + + + + } + +
DateFromToStart MeterEnd MeterDistanceDurationDriver
{{ trip.date }}{{ trip.from }}{{ trip.to }}{{ trip.startMeter }}{{ trip.endMeter }}{{ trip.distance }}{{ trip.duration }}{{ trip.driver }}
-
- - + + + + Maintenance + +
+
build{{ vm.fleetMaintenanceNotice(dataItem) }}
+ + + + + + + @for (entry of vm.fleetMaintenanceRows(dataItem); track entry.date + entry.service) { + + + + + } + +
DateServiceOdometerCostStatus
{{ entry.date }}{{ entry.service }}{{ entry.odometer }}{{ entry.cost }}{{ entry.status }}
-
- -
- - - - - - Utilization - - - -
-
-
Utilization per Month
- - - - -
-
- - - - - - - - - - - - - {{ cell.value }} - @if (cell.row.index === 0 && cell.row.data.end === 'N/A') { - - Current - - } - - - - - - - - - - - - + + + + Cost + +
+
+
Cost Distribution Breakdown
+
+
+ @for (item of vm.fleetCostDistribution(dataItem); track item.label) { +
+ + + {{ item.label }} + + {{ item.percentage }} +
+ } +
- - - - - - - - - @if (value === 'Regular') { - - - - } - @if (value === 'Incident') { - - - - } - {{ value }} - - - - - + + + +
+
-
- - - -
{{ vehicleDetails.make }} {{ vehicleDetails.model }}
- Mileage: {{ vehicleDetails.mileage }} - - - @if (isBrowserOnly) { - - - } - - - - - -
+
+
Monthly Fuel & Operating Spend ($)
+ +
+
+ + + + Utilization + +
+
+
Utilization rate{{ vm.fleetUtilizationSummary(dataItem).rate }}
+
Active hours{{ vm.fleetUtilizationSummary(dataItem).activeHours }}
+
Idle hours{{ vm.fleetUtilizationSummary(dataItem).idleHours }}
+
Trips this month{{ vm.fleetUtilizationSummary(dataItem).trips }}
+
-
- - - -
{{ driverDetails.name }}
- - -
-
- @for (category of DRIVER_CATEGORIES.driverCategories; track category) { -
- {{ category.label }}: - -
- } -
-
- @for (category of DRIVER_CATEGORIES.driverCategories; track category) { -
- {{ driverDetails[category.key] }} - -
- } -
+
+
Utilization per month — 2025 vs 2024
+
+ 2025 + 2024 +
+ +
+
+ + +
- - - - - -
\ No newline at end of file + + } + +
diff --git a/projects/fleet-management-grid/src/app/fleet-management-grid/fleet-management-grid.component.scss b/projects/fleet-management-grid/src/app/fleet-management-grid/fleet-management-grid.component.scss index a2c52070..a5a082c2 100644 --- a/projects/fleet-management-grid/src/app/fleet-management-grid/fleet-management-grid.component.scss +++ b/projects/fleet-management-grid/src/app/fleet-management-grid/fleet-management-grid.component.scss @@ -1,305 +1,666 @@ -@use "igniteui-angular/theming" as *; +app-fleet-management-grid, +app-fleet-management { + --white: #ffffff; + --font-family-base: 'Barlow', 'Segoe UI', sans-serif; + --font-family-condensed: 'Barlow Condensed', 'Arial Narrow', sans-serif; + --font-size-sm: 0.875rem; + --font-size-base: 1rem; + --fleet-bg: #15171c; + --fleet-fg: #d4d7dd; + --fleet-accent: #ed3c79; + --fleet-border: #252830; + --fleet-header-bg: #1a1d24; + --fleet-header-text: #979da9; + --fleet-hover-bg: #1b1e25; + --fleet-selected-bg: #261a23; -/* --------------------------------------------- */ -/* GLOBAL STYLES */ -/* --------------------------------------------- */ - -:root { - --primary-text-color: #f5f5f5; + display: block; + height: 100%; + min-height: 0; } -:host { - display: block; +.fleet-shell { + padding: 1.25rem; + display: grid; + grid-template-rows: auto auto minmax(0, 1fr); height: 100%; - width: 100%; - min-width: 1100px; + flex: 1 1 auto; + min-height: 0; + gap: 1rem; + background: #171a21; + font-family: var(--font-family-base); } -igx-tabs { - flex: 1; - width: 100%; +.fleet-topbar { + display: flex; + align-items: center; + justify-content: space-between; } -igx-divider { - color: var(--ig-gray-200); - opacity: 24%; +.fleet-title-wrap { + display: flex; + align-items: center; + gap: 0.55rem; } -igx-card { - border: 0px; - border-radius: 4px; +.fleet-title-wrap h1 { + color: #eceff8; + font-size: 1.5rem; + font-family: var(--font-family-condensed); + font-weight: 600; + line-height: 1.1; + margin: 0; } -/* Global Grid Styles */ -.main-grid { - --ig-size: var(--ig-size-small) +.fleet-title-icon { + color: #ff3b87; + font-size: 1.3rem; } -//I.M. temporary fix, waiting for this issue to be resolved: https://github.com/IgniteUI/igniteui-angular/issues/15362 -::ng-deep { - .child-grid igx-grid-header { - border-inline-end-color: rgba(97, 97, 97, 0.24) !important; - } +.fleet-chip-row { + display: flex; + align-items: center; + gap: 0.55rem; + flex-wrap: wrap; +} + +.fleet-chip { + --ig-size: 3; + font-family: var(--font-family-base); + font-size: var(--font-size-sm); + --background: #1a1d24; + --border-color: #3b3d42; + --text-color: #d0d2d8; + --hover-background: #2a2e38; + --hover-border-color: #52555c; + --hover-text-color: #fff; + --focus-background: #391e29; + --focus-border-color: #ff4d92; + --focus-text-color: #fff; +} + +.fleet-chip-default { + --focus-background: #2a2e38; + --focus-border-color: #52555c; + --focus-text-color: #fff; +} + +.fleet-chip-active { + --focus-background: #1d2839; + --focus-border-color: #5099f9; + --focus-text-color: #fff; +} + +.fleet-chip-available { + --focus-background: #1b2d24; + --focus-border-color: #47b85b; + --focus-text-color: #fff; +} + +.fleet-chip-maintenance { + --focus-background: #391e29; + --focus-border-color: #ff4d92; + --focus-text-color: #fff; +} + +.fleet-master-grid { + border: 1px solid var(--fleet-border); + font-family: var(--font-family-base); + font-size: var(--font-size-sm); + --background: var(--fleet-bg); + --foreground: var(--fleet-fg); + --accent-color: var(--fleet-accent); + --grid-border-color: var(--fleet-border); + --content-background: var(--fleet-bg); + --content-text-color: var(--fleet-fg); + --header-background: var(--fleet-header-bg); + --header-border-color: var(--fleet-border); + --header-text-color: var(--fleet-header-text); + --header-selected-text-color: var(--white); + --row-odd-background: var(--fleet-bg); + --row-even-background: var(--fleet-bg); + --row-odd-text-color: var(--fleet-fg); + --row-even-text-color: var(--fleet-fg); + --row-hover-background: var(--fleet-hover-bg); + --row-hover-text-color: var(--white); + --row-border-color: var(--fleet-border); + --row-selected-background: var(--fleet-selected-bg); + --row-selected-hover-background: var(--fleet-selected-bg); + --row-selected-text-color: var(--white); + --row-selected-hover-text-color: var(--white); + --cell-selected-background: var(--fleet-selected-bg); + --cell-selected-text-color: var(--white); + --cell-selected-within-background: var(--fleet-selected-bg); + --cell-selected-within-text-color: var(--white); + --cell-active-border-color: var(--fleet-accent); + --filtering-row-background: var(--fleet-bg); + --filtering-row-text-color: var(--fleet-fg); + --toolbar-background: var(--fleet-header-bg); + --toolbar-text-color: var(--fleet-fg); + --ig-surface-500: var(--fleet-header-bg); + --ig-surface-500-contrast: var(--fleet-fg); + --ig-secondary-500: #ff4d92; + --ig-secondary-500-contrast: #ffffff; + --ig-secondary-600: #ff4d92; + --ig-secondary-600-contrast: #ffffff; + --ig-info-500: #ff4d92; + --ig-info-500-contrast: #ffffff; + --ig-info-600: #ff4d92; + --ig-info-600-contrast: #ffffff; + --sorted-header-icon-color: var(--fleet-fg); + --sortable-header-icon-hover-color: var(--white); + --drop-indicator-color: var(--fleet-fg); + --resize-line-color: var(--fleet-accent); + --expand-icon-color: var(--fleet-fg); + --expand-icon-hover-color: var(--white); + height: 100%; + min-height: 0; } +.fleet-master-grid ::ng-deep .igx-grid__th, +.fleet-master-grid ::ng-deep .igx-grid-th__title, +.fleet-master-grid ::ng-deep .igx-grid__td, +.fleet-master-grid ::ng-deep .igx-grid__td-inner, +.fleet-master-grid ::ng-deep .igx-grid__drop-area, +.fleet-master-grid .numeric-cell, +.fleet-master-grid .text-cell, +.fleet-master-grid .allocation-value { + font-size: var(--font-size-sm) !important; +} -/* --------------------------------------------- */ -/* COMMON ELEMENT STYLES */ -/* --------------------------------------------- */ +.fleet-master-grid ::ng-deep .igx-grid__hierarchical-indent { + margin: 1rem 1.5rem !important; +} -.icon-style { - color: #000000; +.fleet-master-grid igx-grid-toolbar { + background: var(--fleet-header-bg) !important; + border-bottom: 1px solid var(--fleet-border) !important; } -.link-style { - color: var(--primary-text-color); +.fleet-master-grid ::ng-deep .igx-grid-toolbar__hiding, +.fleet-master-grid ::ng-deep .igx-grid-toolbar__pinning, +.fleet-master-grid ::ng-deep .igx-grid-toolbar__advanced-filtering, +.fleet-master-grid ::ng-deep .igx-grid-toolbar__hiding > button, +.fleet-master-grid ::ng-deep .igx-grid-toolbar__pinning > button, +.fleet-master-grid ::ng-deep .igx-grid-toolbar__advanced-filtering > button { + background: transparent !important; + color: var(--fleet-accent) !important; + border-color: var(--fleet-accent) !important; } -.grid-container { - padding: 16px; +.fleet-master-grid ::ng-deep .igx-grid-toolbar button, +.fleet-master-grid ::ng-deep .igx-grid-toolbar .igx-button, +.fleet-master-grid ::ng-deep .igx-grid-toolbar__adv-filter, +.fleet-master-grid ::ng-deep .igx-grid-toolbar__hiding > button, +.fleet-master-grid ::ng-deep .igx-grid-toolbar__pinning > button, +.fleet-master-grid ::ng-deep .igx-grid-toolbar__advanced-filtering > button { + color: #ff4d92 !important; } -.chart-canvas { - width: 100%; - height: 100%; +.fleet-master-grid ::ng-deep .igx-grid-toolbar .igx-button--outlined, +.fleet-master-grid ::ng-deep .igx-grid-toolbar__adv-filter { + border-color: rgba(255, 77, 146, 0.8) !important; +} + +.fleet-master-grid ::ng-deep .igx-grid-toolbar .igx-button--outlined:hover, +.fleet-master-grid ::ng-deep .igx-grid-toolbar .igx-button--outlined:focus-visible, +.fleet-master-grid ::ng-deep .igx-grid-toolbar__adv-filter:hover, +.fleet-master-grid ::ng-deep .igx-grid-toolbar__adv-filter:focus-visible { + background: rgba(255, 77, 146, 0.08) !important; + border-color: #ff4d92 !important; + color: #ff4d92 !important; +} + +.fleet-master-grid ::ng-deep .igx-drop-down__item--selected, +.fleet-master-grid ::ng-deep .igx-drop-down__item:hover { + color: #ff4d92; } -/* --------------------------------------------- */ -/* CHART STYLES */ -/* --------------------------------------------- */ +.fleet-detail-wrap { + background: var(--fleet-bg); + border: none; + padding: 0; + width: 100%; + box-sizing: border-box; +} + +.fleet-detail-tabs { + --indicator-color: #ff4d92; + --border-color: transparent; + --border-color--hover: transparent; + --item-color: #8f98ac; + --item-background: transparent; + --item-hover-background: #232833; + --item-hover-color: #dce3f7; + --item-active-color: #ff4d92; + --item-active-border-color: transparent; + --item-active-background: transparent; + --item-active-hover-background: transparent; + --item-active-border-hover-color: transparent; + --item-active-hover-color: #ff4d92; + --button-color: #8f98ac; + --button-hover-color: #dce3f7; + --button-background: #1a1d24; + --button-hover-background: #232833; + --item-text-color: white; + width: 100%; +} -.dashboard { +.fleet-detail-content { display: grid; - grid-template-columns: 1fr 2.5fr; - grid-template-rows: 1fr 1fr; - padding: 16px; - height: 100%; + grid-template-columns: minmax(240px, 280px) minmax(0, 1fr); + gap: 2rem; + padding: 1.5rem 0; + align-items: start; +} + +.fleet-vehicle-card { + margin: 0; + background: none; + border: 0; } -.chart-container { +.fleet-vehicle-card .igx-card-content { + padding: 0; +} + +.fleet-vehicle-photo { + width: 100%; + height: 180px; + object-fit: cover; + border-radius: 0.4rem; + border: 1px solid #31384a; + background: #1a1d24; + display: block; +} + +.fleet-spec-grid { display: grid; - grid-template-rows: 40px auto; - height: 100%; - padding: 10px; - padding-top: 20px; + grid-template-columns: repeat(5, minmax(0, 1fr)); + gap: 1rem; } -.chart-header { - display: flex; - justify-content: space-between; - align-items: center; - padding-bottom: 20px; +.fleet-spec-item { + border-bottom: 1px solid #2a3040; + padding-bottom: 0.35rem; + display: grid; + gap: 0.2rem; } -.chart-select { - width: 40%; +.fleet-spec-item span { + text-transform: uppercase; + font-size: var(--font-size-sm); + letter-spacing: 0.03em; + color: #8791aa; } -.chart-content { - display: flex; - justify-content: center; - align-items: center; - height: 100%; - padding: 15px; - border-radius: 6px; - border: 1px solid #8A8A8A; +.fleet-spec-item strong { + font-size: var(--font-size-sm); + color: #dce2f4; + font-weight: 500; } -.content-wrapper { - padding: 16px; +.fleet-tab-panel { + display: grid; + gap: 1.5rem; + padding: 1.5rem 0; + color: var(--fleet-fg); } -/*Specfic Chart Types*/ -.pie-chart-container { - grid-column: 1; - grid-row: 1; +.fleet-tab-kpis { + display: grid; + gap: 1.25rem; } -.area-chart-container { - grid-column: 1; - grid-row: 2; +.fleet-tab-kpis-3up { + grid-template-columns: repeat(3, minmax(0, 1fr)); } -.column-chart-container { - grid-column: 2; - grid-row: 1 / span 2; +.fleet-tab-kpis-4up { + grid-template-columns: repeat(4, minmax(0, 1fr)); } -.column-chart { - width: 95%; - height: 420px; +.fleet-tab-kpi { + display: grid; + gap: 0.25rem; } -.column-chart-two-series { - align-self: center; - width: 95%; - height: 390px; +.fleet-tab-kpi span, +.fleet-utilization-title, +.fleet-detail-table th { + color: #6f7687; + font-size: var(--font-size-sm); + font-weight: 600; + letter-spacing: 0.04em; + text-transform: uppercase; } -.utilization-chart-container { - flex-direction: column; - align-items: start; +.fleet-tab-kpi strong { + color: #edf1f8; + font-size: var(--font-size-base); + font-weight: 700; } -/* --------------------------------------------- */ -/* DETAILS & TABLE STYLES */ -/* --------------------------------------------- */ +.fleet-accent-value { + color: #ff4d92; +} -.details-container { - display: flex; - align-items: flex-start; - padding: 16px; +.fleet-detail-table { width: 100%; + border-collapse: collapse; } -.details-table { - display: flex; - flex-direction: row; - width: calc(100% * (2 / 3)); - height: auto; - justify-content: space-around; +.fleet-detail-table th, +.fleet-detail-table td { + padding: 0.7rem 0; + text-align: left; + border-bottom: 1px solid rgba(61, 67, 82, 0.45); } -.detail-block-container { +.fleet-detail-table td { + color: #d0d4dc; + font-size: var(--font-size-sm); +} + +.fleet-maintenance-alert { display: flex; - flex-direction: row; - justify-content: space-around; align-items: center; - width: 50%; + gap: 0.7rem; + padding: 0.8rem 1rem; + border: 1px solid rgba(196, 149, 59, 0.45); + border-radius: 0.55rem; + background: rgba(73, 57, 28, 0.34); + color: #f0b24f; } -.detail-category-container, -.detail-content-container { - width: 50%; +.fleet-detail-pill { + display: inline-flex; + align-items: center; + border-radius: 999px; + padding: 0.2rem 0.7rem; + font-size: 0.75rem; + font-weight: 600; } -.detail-category-container { - padding-left: 25px; +.fleet-detail-pill-success { + color: #47c266; + background: rgba(48, 110, 60, 0.35); } -.detail-item { - padding: 5px 0; - font-size: 0.8125rem; +.fleet-detail-pill-warn { + color: #e4b34f; + background: rgba(103, 79, 31, 0.35); } -.detail-category { - font-weight: bold; +.fleet-cost-dot { + width: 0.72rem; + height: 0.72rem; + border-radius: 999px; + flex: 0 0 auto; } -/* --------------------------------------------- */ -/* OVERLAYS & CARDS */ -/* --------------------------------------------- */ +.fleet-cost-tone-fuel { + background: #4c8be7; +} -.overlay { - display: flex; - flex-direction: column; +.fleet-cost-tone-maintenance { + background: #ef3f81; +} + +.fleet-cost-tone-insurance { + background: #48bc5e; +} + +.fleet-cost-tone-tolls { + background: #e2b04f; +} + +.fleet-cost-charts { + display: grid; + grid-template-columns: minmax(320px, 0.9fr) minmax(0, 1.35fr); + gap: 1rem; + align-items: stretch; +} + +.fleet-cost-panel { + padding: 1.5rem 0; + display: grid; + gap: 2rem; +} + +.fleet-cost-panel-title { + color: #dce3f7; + font-size: var(--font-size-sm); + font-weight: 700; + letter-spacing: 0.03em; + text-transform: uppercase; +} + +.fleet-cost-donut-layout { + display: grid; + grid-template-columns: minmax(160px, 200px) minmax(0, 1fr); + gap: 1rem; align-items: center; - justify-content: center; - justify-items: center; - align-content: center; - width: 360px; - height: 396px; - box-shadow: var(--ig-elevation-24); } -.overlay-driver { - width: 327px; - height: 360px; - padding: 0px; - margin: 0px; +.fleet-cost-donut-legend { + display: grid; + gap: 0.85rem; } -.igx-card { +.fleet-cost-donut-legend-item { display: flex; - flex-direction: column; align-items: center; - justify-content: center; - justify-items: center; - align-content: center; - width: 100%; - height: 396px; + justify-content: space-between; + gap: 1rem; + color: #d0d4dc; + font-size: var(--font-size-sm); } -/*Overlay Sections*/ -.overlay-text { - font-size: 14px; +.fleet-cost-donut-legend-main { + display: inline-flex; + align-items: center; + gap: 0.6rem; +} + +.fleet-cost-donut-legend-item strong { + color: #edf1f8; + font-weight: 700; } -.overlay-location-header, -.overlay-driver-header { - height: 38%; +.fleet-cost-donut, +.fleet-cost-column-chart { + display: block; width: 100%; - flex-direction: column; - justify-content: space-around; - align-items: center; - align-content: space-around; + min-height: 280px; + background: transparent; + border: 0; +} + +.fleet-utilization-wrap { + display: grid; + gap: 0.9rem; } -.overlay-location-content, -.overlay-driver-content { +.fleet-utilization-legend { display: flex; - height: 48%; - width: 100%; - padding: 0px; - justify-content: center; + align-items: center; + gap: 1rem; + color: #d0d4dc; + font-size: var(--font-size-sm); +} + +.fleet-utilization-legend-item { + display: inline-flex; + align-items: center; + gap: 0.45rem; +} + +.fleet-utilization-legend-swatch { + width: 0.75rem; + height: 0.75rem; + border-radius: 0.15rem; + display: inline-block; +} + +.fleet-utilization-legend-swatch-2025 { + background: #ef3f81; +} + +.fleet-utilization-legend-swatch-2024 { + background: #48bc5e; } -.overlay-location-actions, -.overlay-driver-actions { - height: 13%; +.fleet-utilization-comparison-chart { + display: block; width: 100%; - justify-content: end; - margin: 8px; + min-height: 320px; + background: transparent; } -.overlay-location-actions { - margin: 0px; +.status-display { + display: inline-flex; + align-items: center; + gap: 0.6rem; + white-space: nowrap; } -/* --------------------------------------------- */ -/* DRIVER STYLES */ -/* --------------------------------------------- */ +.badge-text { + color: var(--fleet-fg); +} -.driver-block-container { - display: flex; - width: 85%; +.status-dot { + --ig-size: 2; + color: inherit !important; + background: currentColor !important; + outline: 4px solid color-mix(in srgb, currentColor 25%, transparent); } -.driver-category-container, -.driver-detail-container { - width: 50%; +.status-active { + color: #5099f9; } -.driver-avatar { - --size: 22px +.status-available { + color: #47b85b; } -.logo-avatar { - --size: 22px; - border-radius: 0.25rem; +.status-maintenance { + color: #ed546f; +} +app-fleet-management-grid ::ng-deep igx-advanced-filtering-dialog, +app-fleet-management ::ng-deep igx-advanced-filtering-dialog { + background: var(--fleet-header-bg); + border: 1px solid #3b3d42; + border-radius: 0.5rem; } -.driver-badge { - margin-left: 10px; - padding: 0 8px; +app-fleet-management-grid ::ng-deep igx-advanced-filtering-dialog .igx-advanced-filter, +app-fleet-management ::ng-deep igx-advanced-filtering-dialog .igx-advanced-filter { + background: #1a1d24; + border-radius: inherit; + overflow: hidden; } -/* --------------------------------------------- */ -/* MISC STYLES */ -/* --------------------------------------------- */ +app-fleet-management-grid ::ng-deep igx-advanced-filtering-dialog igx-query-builder, +app-fleet-management ::ng-deep igx-advanced-filtering-dialog igx-query-builder { + --background: #1a1d24; + --header-background: #1a1d24; + --header-foreground: white; + color: #d4d7dd; + --color-expression-group-and: #c55fd4; + --color-expression-group-or: #28a380; +} -.image-container { - width: 100%; - height: 100%; +.fleet-master-grid .igx-filter-tree__inputs, +.fleet-master-grid .igx-filter-tree__subquery, +.fleet-master-grid .igx-filter-tree__expression-section { + background: #1a1d24 !important; +} + +.fleet-master-grid .igx-filter-tree__inputs .igx-input-group { + --ig-gray-300: #2a2e38; + --ig-gray-600: #8f98ac; + --ig-gray-700: #b0b8c8; + --ig-gray-900: #d4d7dd; + color: #d4d7dd; +} + +.fleet-master-grid .igx-filter-tree__inputs igx-select, +.fleet-master-grid .igx-filter-tree__inputs igx-input-group { + --ig-gray-100: #1f222a; + --ig-gray-300: #2a2e38; + --ig-gray-400: #333844; + --ig-gray-500: #7f8798; + --ig-gray-700: #b0b8c8; + --ig-gray-900: #d4d7dd; +} + +.fleet-master-grid .igx-filter-tree__inputs .igx-input-group__wrapper, +.fleet-master-grid .igx-filter-tree__inputs .igx-input-group__bundle, +.fleet-master-grid .igx-filter-tree__inputs .igx-input-group__bundle-main, +.fleet-master-grid .igx-filter-tree__inputs .igx-input-group__filler, +.fleet-master-grid .igx-filter-tree__inputs .igx-input-group__bundle-end, +.fleet-master-grid .igx-filter-tree__inputs .igx-select__toggle-button { + background: #1f222a !important; +} + +.fleet-master-grid .igx-filter-tree__inputs .igx-input-group, +.fleet-master-grid .igx-filter-tree__inputs .igx-input-group__input, +.fleet-master-grid .igx-filter-tree__inputs .igx-input-group__input::placeholder, +.fleet-master-grid .igx-filter-tree__inputs .igx-select__toggle-button, +.fleet-master-grid .igx-filter-tree__inputs .igx-select__toggle-button .igx-icon { + color: #d4d7dd !important; } -.status-value { - padding-left: 8px; - color: var(--primary-text-color); +.fleet-master-grid .igx-filter-tree__inputs .igx-input-group--disabled .igx-input-group__input, +.fleet-master-grid .igx-filter-tree__inputs .igx-input-group--disabled .igx-select__toggle-button, +.fleet-master-grid .igx-filter-tree__inputs .igx-input-group--disabled .igx-select__toggle-button .igx-icon { + color: #8f98ac !important; } -.carousel-container { - width: 420px; - height: 240px; +.fleet-master-grid .igx-filter-tree__inputs .igx-input-group__line { + border-color: #2a2e38 !important; +} + +/* Keep dropdown list in the same dark palette as the dialog */ +igx-advanced-filtering-dialog .igx-drop-down__list, +igx-advanced-filtering-dialog .igx-drop-down__list-scroll { + background: #1a1d24; +} + +igx-advanced-filtering-dialog .igx-drop-down__item, +igx-advanced-filtering-dialog .igx-drop-down__item--selected, +igx-advanced-filtering-dialog .igx-drop-down__item:hover { + background: #1a1d24; + color: #d4d7dd; +} + +app-fleet-management-grid ::ng-deep .igx-excel-filter, +app-fleet-management-grid ::ng-deep .igx-excel-filter__secondary, +app-fleet-management-grid ::ng-deep .igx-excel-filter__secondary-footer, +app-fleet-management ::ng-deep .igx-excel-filter, +app-fleet-management ::ng-deep .igx-excel-filter__secondary, +app-fleet-management ::ng-deep .igx-excel-filter__secondary-footer { + background: #1a1d24; + border-radius: 0; +} + +@media (max-width: 1000px) { + .fleet-topbar { + flex-direction: column; + align-items: flex-start; + } + + .fleet-detail-content { + grid-template-columns: 1fr; + } + + .fleet-cost-charts { + grid-template-columns: 1fr; + } + + .fleet-cost-donut-layout { + grid-template-columns: 1fr; + } } diff --git a/projects/fleet-management-grid/src/app/fleet-management-grid/fleet-management-grid.component.ts b/projects/fleet-management-grid/src/app/fleet-management-grid/fleet-management-grid.component.ts index 9d1bfeeb..a1b413fd 100644 --- a/projects/fleet-management-grid/src/app/fleet-management-grid/fleet-management-grid.component.ts +++ b/projects/fleet-management-grid/src/app/fleet-management-grid/fleet-management-grid.component.ts @@ -1,48 +1,100 @@ -import { CommonModule, isPlatformBrowser } from '@angular/common'; -import { AfterViewInit, ChangeDetectorRef, Component, ElementRef, Inject, OnInit, PLATFORM_ID, ViewChild } from '@angular/core'; -import { check, delivery, gitIssue, wrench } from '@igniteui/material-icons-extended'; -import { CloseScrollStrategy, DefaultSortingStrategy, IgxOverlayService, RelativePosition, RelativePositionStrategy, SortingDirection, THEME_TOKEN, ThemeToken } from 'igniteui-angular/core'; -import { IgxAvatarComponent } from 'igniteui-angular/avatar'; +import { isPlatformBrowser } from '@angular/common'; +import { ChangeDetectionStrategy, Component, Inject, OnInit, PLATFORM_ID, ViewEncapsulation, computed, signal } from '@angular/core'; import { IgxBadgeComponent } from 'igniteui-angular/badge'; -import { IgxButtonDirective, IgxButtonModule, IgxDividerDirective } from 'igniteui-angular/directives'; -import { IgxCardActionsComponent, IgxCardComponent, IgxCardContentDirective, IgxCardHeaderComponent } from 'igniteui-angular/card'; -import { IgxCarouselComponent, IgxSlideComponent } from 'igniteui-angular/carousel'; -import { IgxCellTemplateDirective, IgxColumnComponent, IgxGridDetailTemplateDirective, IgxGridToolbarActionsComponent, IgxGridToolbarAdvancedFilteringComponent, IgxGridToolbarComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarTitleComponent } from 'igniteui-angular/grids/core'; +import { IgxCardComponent, IgxCardContentDirective } from 'igniteui-angular/card'; +import { IgxChipComponent } from 'igniteui-angular/chips'; +import { + IgxCellTemplateDirective, + IgxColumnComponent, + IgxGridDetailTemplateDirective, + IgxGridToolbarActionsComponent, + IgxGridToolbarAdvancedFilteringComponent, + IgxGridToolbarComponent, + IgxGridToolbarHidingComponent, + IgxGridToolbarPinningComponent, + IgxGridToolbarTitleComponent +} from 'igniteui-angular/grids/core'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; -import { IgxIconComponent, IgxIconService } from 'igniteui-angular/icon'; -import { IgxLabelDirective } from 'igniteui-angular/input-group'; -import { IgxSelectComponent, IgxSelectItemComponent } from 'igniteui-angular/select'; +import { IgxIconComponent } from 'igniteui-angular/icon'; import { IgxTabContentComponent, IgxTabHeaderComponent, IgxTabItemComponent, IgxTabsComponent } from 'igniteui-angular/tabs'; -import { IgxCategoryChartModule, IgxDataChartInteractivityModule, IgxLegendDynamicModule, IgxPieChartModule } from 'igniteui-angular-charts'; -import CAR_PHOTO_MANIFEST from '../../assets/car_photo_manifest.json'; -import CAR_IMAGES from '../../assets/car_images.json'; -import VEHICLE_DETAILS from '../../assets/vehicle_details.json'; -import DRIVER_CATEGORIES from '../../assets/driver_categories.json'; -import { IgDataTemplate, IgxShapeDataSourceModule } from 'igniteui-angular-core'; -import { IgxGeographicMapComponent, IgxGeographicMapModule, IgxGeographicSymbolSeriesComponent } from 'igniteui-angular-maps'; -import { useAnimation } from '@angular/animations'; -import { fadeIn, fadeOut } from 'igniteui-angular/animations'; -import { DataService } from '../services/data.service'; -import { Period } from '../models/period.enum'; -import { DriverDetails } from '../models/driver-details.interface'; -import { ChartType } from '../models/chart-type.enum'; -import { VehicleDetails } from '../models/vehicle-details.interface'; -import { BehaviorSubject } from 'rxjs'; +import { IgxCategoryChartModule, IgxDoughnutChartModule, IgxRingSeriesModule } from 'igniteui-angular-charts'; + +type FleetStatus = 'Active' | 'Available' | 'In Maintenance'; +type FleetStatusFilter = 'all' | FleetStatus; + +interface FleetVehicleSpecs { + engine: string; + generation: string; + year: number; + fuelType: string; + power: string; + mileage: string; + doorsSeats: string; + cubature: string; + color: string; + transmission: string; + msrp: string; + tollPassId: string; +} + +interface FleetVehicle { + id: string; + licensePlate: string; + make: string; + model: string; + type: string; + vin: string; + status: FleetStatus; + locationCity: string; + locationGps: string; + specs: FleetVehicleSpecs; +} + +interface FleetTripRow { + date: string; + from: string; + to: string; + startMeter: string; + endMeter: string; + distance: string; + duration: string; + driver: string; +} + +interface FleetMaintenanceRow { + date: string; + service: string; + odometer: string; + cost: string; + status: 'Completed' | 'Scheduled'; +} + +interface FleetCostItem { + label: string; + value: number; + tone: 'fuel' | 'maintenance' | 'insurance' | 'tolls'; +} + +interface FleetCostDistributionPoint { + label: string; + displayLabel: string; + percentage: string; + value: number; + tone: FleetCostItem['tone']; +} + +interface FleetMonthlySpendPoint { month: string; spend: number; } +interface FleetUtilizationComparisonPoint { month: string; utilization2024: number; utilization2025: number; } +type FleetCarImageCatalog = Record; +interface FleetCarImageMatch { key: string; files: readonly string[]; score: number; } @Component({ selector: 'app-fleet-management-grid', - providers: [ - { - provide: THEME_TOKEN, - useFactory: () => { - return new ThemeToken('material'); - }, - }, - ], + changeDetection: ChangeDetectionStrategy.OnPush, + encapsulation: ViewEncapsulation.None, imports: [ - CommonModule, - IgxPieChartModule, - IgxCategoryChartModule, + IgxIconComponent, + IgxChipComponent, IgxGridComponent, IgxColumnComponent, IgxGridToolbarComponent, @@ -51,348 +103,358 @@ import { BehaviorSubject } from 'rxjs'; IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarAdvancedFilteringComponent, + IgxGridDetailTemplateDirective, + IgxCellTemplateDirective, + IgxBadgeComponent, IgxTabsComponent, IgxTabItemComponent, IgxTabHeaderComponent, IgxTabContentComponent, - IgxGridDetailTemplateDirective, - IgxCarouselComponent, - IgxSlideComponent, - IgxBadgeComponent, - IgxCellTemplateDirective, - IgxDividerDirective, - IgxIconComponent, - IgxButtonDirective, - IgxButtonModule, - IgxAvatarComponent, IgxCardComponent, - IgxCardHeaderComponent, IgxCardContentDirective, - IgxGeographicMapModule, - IgxDataChartInteractivityModule, - IgxShapeDataSourceModule, - IgxCardActionsComponent, - IgxLegendDynamicModule, - IgxSelectComponent, - IgxSelectItemComponent, - IgxLabelDirective + IgxDoughnutChartModule, + IgxRingSeriesModule, + IgxCategoryChartModule ], templateUrl: './fleet-management-grid.component.html', styleUrl: './fleet-management-grid.component.scss' }) export class FleetManagementGridComponent implements OnInit { - - //view children - @ViewChild('grid', { static: true }) protected grid!: IgxGridComponent; - @ViewChild(`locationOverlay`) private locationOverlay!: ElementRef; - @ViewChild(`driverOverlay`) private driverOverlay!: ElementRef; - @ViewChild("map", { static: false }) protected map!: IgxGeographicMapComponent; - - //overlay IDs - private locationOverlayId: string | null = null; - private driverOverlayId: string | null = null; - - //overlay toggle flags - protected isLocationOverlayActive: boolean = false; - protected isDriverOverlayActive: boolean = false; - - //car details for location overlay - protected vehicleDetails: VehicleDetails = { - vehiclePhoto: '', - make: '', - model: '', - mileage: '', - markerLocations: [] - } - - //chart periods - protected Period = Period; - /* protected periods = { - costPerTypePeriod: Period.YTD, - costPerMeterPeriod: Period.YTD, - fuelCostPeriod: Period.YTD - } */ - protected periods: { [vehicleId: string]: { costPerTypePeriod: Period, costPerMeterPeriod: Period, fuelCostPeriod: Period } | null } = {}; - - //driver details for detail overlay - protected driverDetails: DriverDetails = { - name: "", - license: "", - address: "", - city: "", - phone: "", - email: "", - photo: "" - } - - protected VEHICLE_DETAILS = VEHICLE_DETAILS; - protected DRIVER_CATEGORIES = DRIVER_CATEGORIES; - - protected isLoading = true; - protected vehicleData$ = new BehaviorSubject([]); - - constructor( - @Inject(IgxIconService) private iconService: IgxIconService, - @Inject(IgxOverlayService) private overlayService: IgxOverlayService, - protected dataService: DataService, - @Inject(ElementRef) private hostRef: ElementRef, - @Inject(PLATFORM_ID) private platformId: string) { } - - public ngOnInit(): void { - this.iconService.addSvgIconFromText(check.name, check.value, 'imx-icons'); - this.iconService.addSvgIconFromText(wrench.name, wrench.value, 'imx-icons'); - this.iconService.addSvgIconFromText(delivery.name, delivery.value, 'imx-icons'); - this.iconService.addSvgIconFromText(gitIssue.name, gitIssue.value, 'imx-icons'); - - this.dataService.getVehiclesData(); - this.vehicleData$ = this.dataService.vehiclesRecords; - this.vehicleData$.subscribe((data: any) => { - if (data.length > 0) { - this.isLoading = false; - } + protected readonly vm = this; + protected readonly isBrowser: boolean; + + private readonly fleetVehiclePhotoBaseUrl = 'https://www.infragistics.com/angular-grid-examples/cars/photos/'; + private readonly fleetVehicleFallbackPhotoUrl = 'https://www.infragistics.com/angular-grid-examples/cars/photos/Ford%20Focus%20blue/ford-focus-5167838_1280.jpg'; + private readonly fleetVehicleImageCatalog = signal({}); + + protected readonly fleetUtilizationComparisonBrushes = ['#ef3f81', '#48bc5e']; + protected readonly fleetCostChartBrushes = ['#4c8be7', '#ef3f81', '#48bc5e', '#e2b04f']; + protected readonly fleetChartLabelColor = '#aeb7c8'; + protected readonly fleetChartGridlineColor = 'rgba(255, 255, 255, 0.18)'; + + protected readonly fleetVehicles: FleetVehicle[] = [ + { id: 'A00101', licensePlate: 'KVG 8850', make: 'Ford', model: 'Focus', type: 'Hatchback', vin: '1FADP3F24HL312717', status: 'Active', locationCity: 'New York, NY', locationGps: '40.743828, -74.037982', specs: { engine: '1.5 TSI', generation: 'Focus Mk4', year: 2020, fuelType: 'Gasoline', power: '150 Hp', mileage: '28,140 mi', doorsSeats: '5 / 5', cubature: '1498 cm3', color: 'Blue', transmission: 'Automatic', msrp: '$24,700', tollPassId: 'EZ-193482' } }, + { id: 'A00102', licensePlate: '5VLZ 91', make: 'Ford', model: 'Focus', type: 'Hatchback', vin: 'WF0KXXGCKCY565571', status: 'Active', locationCity: 'Boston, MA', locationGps: '42.352104, -71.075238', specs: { engine: '1.0 EcoBoost', generation: 'Focus Mk3', year: 2019, fuelType: 'Gasoline', power: '125 Hp', mileage: '32,905 mi', doorsSeats: '5 / 5', cubature: '999 cm3', color: 'Silver', transmission: 'Manual', msrp: '$20,900', tollPassId: 'EZ-402112' } }, + { id: 'A00103', licensePlate: 'C10 EFF', make: 'VW', model: 'Passat', type: 'Station Wagon', vin: '1VWZYZ33DER623111', status: 'Available', locationCity: 'Camden, NJ', locationGps: '39.926602, -75.105908', specs: { engine: '1.6 GDI', generation: 'Passat B8', year: 2021, fuelType: 'Gasoline', power: '128 Hp', mileage: '18,200 mi', doorsSeats: '4 / 5', cubature: '1591 cm3', color: 'White', transmission: 'Automatic', msrp: '$21,900', tollPassId: 'EZ-000000' } }, + { id: 'A00104', licensePlate: 'KUM 0269', make: 'VW', model: 'Passat', type: 'Station Wagon', vin: '1VWZYZ33ZWE623426', status: 'Active', locationCity: 'Philadelphia, PA', locationGps: '39.992220, -75.141041', specs: { engine: '2.0 TDI', generation: 'Passat B8', year: 2019, fuelType: 'Diesel', power: '150 Hp', mileage: '35,900 mi', doorsSeats: '4 / 5', cubature: '1968 cm3', color: 'Black', transmission: 'Automatic', msrp: '$23,500', tollPassId: 'EZ-733492' } }, + { id: 'A00105', licensePlate: 'NJ XR2188', make: 'VW', model: 'Golf', type: 'Hatchback', vin: 'WVWZZZAUZLW042105', status: 'Active', locationCity: 'Newark, NJ', locationGps: '40.735657, -74.172363', specs: { engine: '1.5 TSI', generation: 'Golf Mk8', year: 2022, fuelType: 'Gasoline', power: '148 Hp', mileage: '16,720 mi', doorsSeats: '5 / 5', cubature: '1498 cm3', color: 'Blue', transmission: 'Automatic', msrp: '$26,400', tollPassId: 'EZ-220511' } }, + { id: 'A00106', licensePlate: 'PA QN4731', make: 'VW', model: 'Polo', type: 'Hatchback', vin: 'WVWZZZAWZMU018406', status: 'Available', locationCity: 'Allentown, PA', locationGps: '40.608430, -75.490183', specs: { engine: '1.0 TSI', generation: 'Polo AW', year: 2021, fuelType: 'Gasoline', power: '95 Hp', mileage: '22,410 mi', doorsSeats: '5 / 5', cubature: '999 cm3', color: 'Blue', transmission: 'Manual', msrp: '$19,800', tollPassId: 'EZ-194774' } }, + { id: 'A00107', licensePlate: 'CT LB9912', make: 'Mazda', model: '3', type: 'Sedan', vin: 'JM1BPAML1N1527107', status: 'Active', locationCity: 'Hartford, CT', locationGps: '41.765274, -72.678776', specs: { engine: '2.5 Skyactiv-G', generation: 'BP', year: 2022, fuelType: 'Gasoline', power: '186 Hp', mileage: '14,980 mi', doorsSeats: '4 / 5', cubature: '2488 cm3', color: 'Graphite', transmission: 'Automatic', msrp: '$25,650', tollPassId: 'EZ-871306' } }, + { id: 'A00108', licensePlate: 'NY UJ6409', make: 'Mazda', model: '6', type: 'Sedan', vin: 'JM1GL1VM9L1524108', status: 'Available', locationCity: 'Buffalo, NY', locationGps: '42.885440, -78.878372', specs: { engine: '2.5 Skyactiv-G', generation: 'GL', year: 2020, fuelType: 'Gasoline', power: '187 Hp', mileage: '31,260 mi', doorsSeats: '4 / 5', cubature: '2488 cm3', color: 'Gray', transmission: 'Automatic', msrp: '$27,300', tollPassId: 'EZ-774650' } }, + { id: 'A00109', licensePlate: 'MA BK7315', make: 'Kia', model: 'Soul', type: 'Compact SUV', vin: 'KNDJ23AU7N7189109', status: 'Active', locationCity: 'Lowell, MA', locationGps: '42.633425, -71.316170', specs: { engine: '2.0 MPI', generation: 'SK3', year: 2022, fuelType: 'Gasoline', power: '147 Hp', mileage: '13,940 mi', doorsSeats: '5 / 5', cubature: '1999 cm3', color: 'Red', transmission: 'CVT', msrp: '$23,100', tollPassId: 'EZ-539102' } }, + { id: 'A00110', licensePlate: 'RI FV8820', make: 'Hyundai', model: 'Kona', type: 'SUV', vin: 'KM8K53A36NU891110', status: 'In Maintenance', locationCity: 'Warwick, RI', locationGps: '41.700101, -71.416168', specs: { engine: '2.0 MPI', generation: 'OS', year: 2021, fuelType: 'Gasoline', power: '147 Hp', mileage: '27,130 mi', doorsSeats: '5 / 5', cubature: '1999 cm3', color: 'Gray', transmission: 'Automatic', msrp: '$24,450', tollPassId: 'EZ-608992' } }, + { id: 'A00111', licensePlate: 'CT YE5513', make: 'Hyundai', model: 'ix35', type: 'SUV', vin: 'TMAJU81U8DJ271111', status: 'Available', locationCity: 'New Haven, CT', locationGps: '41.308273, -72.927879', specs: { engine: '2.0 CRDi', generation: 'LM', year: 2018, fuelType: 'Diesel', power: '136 Hp', mileage: '41,380 mi', doorsSeats: '5 / 5', cubature: '1995 cm3', color: 'Silver', transmission: 'Automatic', msrp: '$22,700', tollPassId: 'EZ-331750' } }, + { id: 'A00112', licensePlate: 'NY PK2044', make: 'Honda', model: 'Civic', type: 'Sedan', vin: '2HGFE2F54NH341112', status: 'Active', locationCity: 'Albany, NY', locationGps: '42.652580, -73.756233', specs: { engine: '2.0 i-VTEC', generation: 'FE', year: 2022, fuelType: 'Gasoline', power: '158 Hp', mileage: '18,860 mi', doorsSeats: '4 / 5', cubature: '1996 cm3', color: 'White', transmission: 'CVT', msrp: '$24,280', tollPassId: 'EZ-284512' } }, + { id: 'A00113', licensePlate: 'NJ TW6921', make: 'Toyota', model: 'Corolla', type: 'Sedan', vin: 'JTDB4MEE7NJ121113', status: 'Available', locationCity: 'Jersey City, NJ', locationGps: '40.717754, -74.043143', specs: { engine: '2.0 Dynamic Force', generation: 'E210', year: 2022, fuelType: 'Gasoline', power: '169 Hp', mileage: '15,540 mi', doorsSeats: '4 / 5', cubature: '1987 cm3', color: 'White', transmission: 'CVT', msrp: '$23,950', tollPassId: 'EZ-746104' } }, + { id: 'A00114', licensePlate: 'NY PU6172', make: 'Kia', model: 'Sportage', type: 'SUV', vin: 'KNDPU3AF2P7014114', status: 'Available', locationCity: 'Yonkers, NY', locationGps: '40.931210, -73.898747', specs: { engine: '2.5 GDI', generation: 'Sportage NQ5', year: 2023, fuelType: 'Gasoline', power: '187 Hp', mileage: '9,420 mi', doorsSeats: '5 / 5', cubature: '2497 cm3', color: 'Sapphire Blue', transmission: 'Automatic', msrp: '$29,300', tollPassId: 'EZ-163590' } }, + { id: 'A00115', licensePlate: 'PA HG3370', make: 'Toyota', model: 'RAV4', type: 'SUV', vin: '2T3P1RFV3NW181115', status: 'Active', locationCity: 'Reading, PA', locationGps: '40.335648, -75.926872', specs: { engine: '2.5 Dynamic Force', generation: 'RAV4 XA50', year: 2022, fuelType: 'Gasoline', power: '203 Hp', mileage: '17,940 mi', doorsSeats: '5 / 5', cubature: '2487 cm3', color: 'White', transmission: 'Automatic', msrp: '$32,400', tollPassId: 'EZ-921143' } }, + { id: 'A00116', licensePlate: 'MA CF7201', make: 'Toyota', model: 'RAV4', type: 'SUV', vin: '2T3P1RFV1NW181116', status: 'In Maintenance', locationCity: 'Cambridge, MA', locationGps: '42.366978, -71.105615', specs: { engine: '2.5 Dynamic Force', generation: 'RAV4 XA50', year: 2021, fuelType: 'Gasoline', power: '203 Hp', mileage: '29,540 mi', doorsSeats: '5 / 5', cubature: '2487 cm3', color: 'Lunar Rock', transmission: 'Automatic', msrp: '$31,850', tollPassId: 'EZ-903374' } }, + { id: 'A00117', licensePlate: 'NJ JM4258', make: 'Tesla', model: '3', type: 'Sedan', vin: '5YJ3E1EA4NF391117', status: 'Active', locationCity: 'Hoboken, NJ', locationGps: '40.743991, -74.032364', specs: { engine: 'Dual Motor EV', generation: 'Model 3 Highland', year: 2024, fuelType: 'Electric', power: '283 kW', mileage: '8,120 mi', doorsSeats: '4 / 5', cubature: 'N/A', color: 'White', transmission: 'Single-speed', msrp: '$39,990', tollPassId: 'EZ-112709' } }, + { id: 'A00118', licensePlate: 'RI DS4307', make: 'VW', model: 'Touareg', type: 'SUV', vin: '3VV2B7AX4NM091118', status: 'Available', locationCity: 'Providence, RI', locationGps: '41.824577, -71.412118', specs: { engine: '3.0 V6', generation: 'Touareg CR', year: 2022, fuelType: 'Gasoline', power: '340 Hp', mileage: '14,250 mi', doorsSeats: '5 / 7', cubature: '2995 cm3', color: 'Atlantic Blue', transmission: 'Automatic', msrp: '$30,900', tollPassId: 'EZ-640125' } }, + { id: 'A00119', licensePlate: 'CT DR1542', make: 'VW', model: 'Touareg', type: 'SUV', vin: 'WVGZZZCRZND091119', status: 'Active', locationCity: 'Bridgeport, CT', locationGps: '41.179226, -73.189438', specs: { engine: '3.0 V6 TDI', generation: 'Touareg CR', year: 2021, fuelType: 'Diesel', power: '286 Hp', mileage: '23,500 mi', doorsSeats: '5 / 7', cubature: '2967 cm3', color: 'Black', transmission: 'Automatic', msrp: '$47,900', tollPassId: 'EZ-518620' } }, + { id: 'A00120', licensePlate: 'PA MX2803', make: 'Ford', model: 'Focus', type: 'Hatchback', vin: 'WF0NXXGCHNML29120', status: 'Available', locationCity: 'Scranton, PA', locationGps: '41.408969, -75.662412', specs: { engine: '1.5 EcoBoost', generation: 'Focus Mk4', year: 2021, fuelType: 'Gasoline', power: '150 Hp', mileage: '20,640 mi', doorsSeats: '5 / 5', cubature: '1498 cm3', color: 'Dark Gray', transmission: 'Automatic', msrp: '$24,900', tollPassId: 'EZ-457201' } }, + { id: 'A00121', licensePlate: 'MA QL7740', make: 'Kia', model: 'EV6', type: 'Crossover', vin: 'KNDC34LA3N5121121', status: 'Active', locationCity: 'Springfield, MA', locationGps: '42.101483, -72.589811', specs: { engine: 'RWD EV', generation: 'EV6', year: 2023, fuelType: 'Electric', power: '168 kW', mileage: '11,390 mi', doorsSeats: '5 / 5', cubature: 'N/A', color: 'Gray', transmission: 'Single-speed', msrp: '$42,600', tollPassId: 'EZ-690144' } }, + { id: 'A00122', licensePlate: 'NY BP3006', make: 'Ford', model: 'Mustang', type: 'Coupe', vin: '1FA6P8TH1N5101122', status: 'In Maintenance', locationCity: 'Rochester, NY', locationGps: '43.156578, -77.608849', specs: { engine: '2.3 EcoBoost', generation: 'S650', year: 2024, fuelType: 'Gasoline', power: '315 Hp', mileage: '6,950 mi', doorsSeats: '2 / 4', cubature: '2261 cm3', color: 'Red', transmission: 'Automatic', msrp: '$41,200', tollPassId: 'EZ-305609' } }, + { id: 'A00123', licensePlate: 'MA GX6243', make: 'VW', model: 'Caddy', type: 'Van', vin: 'NM0LS7E21N1561123', status: 'Active', locationCity: 'Worcester, MA', locationGps: '42.262593, -71.802293', specs: { engine: '2.0 TDI', generation: 'Caddy V', year: 2022, fuelType: 'Diesel', power: '122 Hp', mileage: '19,770 mi', doorsSeats: '4 / 2', cubature: '1968 cm3', color: 'Frozen White', transmission: 'Automatic', msrp: '$31,250', tollPassId: 'EZ-150763' } } + ,{ id: 'A00124', licensePlate: 'RI NT4184', make: 'VW', model: 'Caddy', type: 'Van', vin: 'WV1ZZZ2KZPX081124', status: 'Available', locationCity: 'Pawtucket, RI', locationGps: '41.878711, -71.382555', specs: { engine: '2.0 TDI', generation: 'Caddy V', year: 2023, fuelType: 'Diesel', power: '122 Hp', mileage: '10,260 mi', doorsSeats: '4 / 2', cubature: '1968 cm3', color: 'White', transmission: 'Automatic', msrp: '$32,300', tollPassId: 'EZ-722430' } }, + { id: 'A00125', licensePlate: 'CT XM6102', make: 'Toyota', model: 'Tundra', type: 'Pickup', vin: '5TFMA5DB4NX011125', status: 'Active', locationCity: 'Stamford, CT', locationGps: '41.053430, -73.538734', specs: { engine: '3.5 Twin-Turbo V6', generation: 'XK70', year: 2022, fuelType: 'Gasoline', power: '389 Hp', mileage: '24,880 mi', doorsSeats: '4 / 5', cubature: '3445 cm3', color: 'White', transmission: 'Automatic', msrp: '$49,500', tollPassId: 'EZ-248901' } }, + { id: 'A00126', licensePlate: 'PA CP7618', make: 'Ford', model: 'F-150', type: 'Pickup', vin: '1FTFW1E83NFA11226', status: 'Available', locationCity: 'Erie, PA', locationGps: '42.129224, -80.085060', specs: { engine: '3.5 EcoBoost', generation: 'P702', year: 2023, fuelType: 'Gasoline', power: '400 Hp', mileage: '13,500 mi', doorsSeats: '4 / 5', cubature: '3496 cm3', color: 'Blue', transmission: 'Automatic', msrp: '$52,900', tollPassId: 'EZ-640318' } } + ]; + + protected readonly fleetStatusFilter = signal('all'); + protected readonly fleetSearchQuery = signal(''); + + protected readonly filteredFleetVehicles = computed(() => { + const query = this.fleetSearchQuery().trim().toLowerCase(); + const status = this.fleetStatusFilter(); + return this.fleetVehicles.filter((vehicle) => { + if (status !== 'all' && vehicle.status !== status) return false; + if (!query) return true; + const searchTarget = [vehicle.id, vehicle.licensePlate, vehicle.vin, vehicle.make, vehicle.model, vehicle.locationCity].join(' ').toLowerCase(); + return searchTarget.includes(query); }); - this.dataService.loadOptionalData(); - - this.grid.sortingExpressions = [ - { - dir: SortingDirection.Asc, fieldName: 'vehicleId', - ignoreCase: true, strategy: DefaultSortingStrategy.instance() - } + }); + + protected readonly fleetMetrics = computed(() => { + const active = this.fleetVehicles.filter((v) => v.status === 'Active').length; + const available = this.fleetVehicles.filter((v) => v.status === 'Available').length; + const maintenance = this.fleetVehicles.filter((v) => v.status === 'In Maintenance').length; + return [ + { label: 'All vehicles', value: this.fleetVehicles.length }, + { label: 'Active', value: active }, + { label: 'Available', value: available }, + { label: 'In Maintenance', value: maintenance } ]; + }); + + constructor(@Inject(PLATFORM_ID) private readonly platformId: object) { + this.isBrowser = isPlatformBrowser(platformId); } - public ngOnDestroy(): void { - if (this.locationOverlayId) { - this.overlayService.detach(this.locationOverlayId); - this.locationOverlayId = null; - } - if (this.driverOverlayId) { - this.overlayService.detach(this.driverOverlayId); - this.driverOverlayId = null; + ngOnInit(): void { + if (this.isBrowser) { + void this.loadFleetVehicleImageCatalog(); } } - protected get isBrowserOnly(): boolean { - return isPlatformBrowser(this.platformId); + protected fleetStatusClass(status: FleetStatus): string { + if (status === 'Active') return 'status-active'; + if (status === 'Available') return 'status-available'; + return 'status-maintenance'; } - //handling for chart periods - protected onPeriodChange(event: any, chart: string, vehicleId: string): void { - if (!this.periods[vehicleId]) { - this.periods[vehicleId] = { - costPerTypePeriod: Period.YTD, - costPerMeterPeriod: Period.YTD, - fuelCostPeriod: Period.YTD - }; - } - - if (chart === ChartType.CostPerType) { - this.periods[vehicleId].costPerTypePeriod = event.newSelection.value; - } else if (chart === ChartType.CostPerMeter) { - this.periods[vehicleId].costPerMeterPeriod = event.newSelection.value; - } else if (chart === ChartType.FuelCosts) { - this.periods[vehicleId].fuelCostPeriod = event.newSelection.value; - } - + protected isFleetFilterActive(filter: FleetStatusFilter): boolean { + return this.fleetStatusFilter() === filter; } - //getters for image paths - protected getPathToLogoImage(value: string): string { - return `cars/logos/${value}.png`; + protected setFleetFilter(filter: FleetStatusFilter): void { + this.fleetStatusFilter.set(filter); } - protected getPathToCarImage(vehicleId: string): string[] { - const carEntry = CAR_PHOTO_MANIFEST.find(car => car.id === vehicleId); + protected fleetTripSummary(vehicle: FleetVehicle): { trips: number; totalDistance: string; avgTrip: string } { + const seed = this.fleetSeed(vehicle); + const trips = 18 + (seed % 8); + const totalMiles = 248 + (seed % 9) * 16; + return { trips, totalDistance: `${this.formatWholeNumber(totalMiles)} mi`, avgTrip: `${(totalMiles / trips).toFixed(1)} mi` }; + } - if (!carEntry) { - console.warn(`No vehicle found with ID: ${vehicleId}`); - return []; - } + protected fleetTripHistory(vehicle: FleetVehicle): FleetTripRow[] { + const seed = this.fleetSeed(vehicle); + const city = this.fleetCity(vehicle); + const baseDistance = 8.4 + (seed % 5) * 1.3; + const currentMileage = this.fleetMileageValue(vehicle); + const tripDistances = [baseDistance + 4.5, baseDistance + 0.1, baseDistance + 8.8, baseDistance + 8.1, baseDistance + 5.2, baseDistance + 6.6].map((v) => Number(v.toFixed(1))); + + let runningMeter = currentMileage + tripDistances.reduce((sum, value) => sum + value, 0); + const buildMeters = (distance: number): { startMeter: string; endMeter: string } => { + const endMeterValue = runningMeter; + const startMeterValue = Math.max(0, endMeterValue - distance); + runningMeter = startMeterValue; + return { startMeter: `${this.formatOneDecimal(startMeterValue)} mi`, endMeter: `${this.formatOneDecimal(endMeterValue)} mi` }; + }; - const folderName = carEntry.folder; + return [ + { date: 'Jul 22', from: `Depot - ${city}`, to: `Client Site - ${city}`, ...buildMeters(tripDistances[0]), distance: `${tripDistances[0].toFixed(1)} mi`, duration: `${24 + (seed % 9)} min`, driver: this.fleetDriverName(vehicle, 0) }, + { date: 'Jul 21', from: `Client Site - ${city}`, to: `Depot - ${city}`, ...buildMeters(tripDistances[1]), distance: `${tripDistances[1].toFixed(1)} mi`, duration: `${19 + (seed % 6)} min`, driver: this.fleetDriverName(vehicle, 0) }, + { date: 'Jul 19', from: `Depot - ${city}`, to: `Warehouse - ${city}`, ...buildMeters(tripDistances[2]), distance: `${tripDistances[2].toFixed(1)} mi`, duration: `${32 + (seed % 10)} min`, driver: this.fleetDriverName(vehicle, 1) }, + { date: 'Jul 17', from: `Warehouse - ${city}`, to: `Depot - ${city}`, ...buildMeters(tripDistances[3]), distance: `${tripDistances[3].toFixed(1)} mi`, duration: `${30 + (seed % 9)} min`, driver: this.fleetDriverName(vehicle, 1) }, + { date: 'Jul 15', from: `Depot - ${city}`, to: `Regional Office - ${city}`, ...buildMeters(tripDistances[4]), distance: `${tripDistances[4].toFixed(1)} mi`, duration: `${26 + (seed % 8)} min`, driver: this.fleetDriverName(vehicle, 2) }, + { date: 'Jul 13', from: `Regional Office - ${city}`, to: `Service Hub - ${city}`, ...buildMeters(tripDistances[5]), distance: `${tripDistances[5].toFixed(1)} mi`, duration: `${28 + (seed % 7)} min`, driver: this.fleetDriverName(vehicle, 3) } + ]; + } - const carPhotoNames = (CAR_IMAGES as Record)[folderName]; + protected fleetMaintenanceNotice(vehicle: FleetVehicle): string { + const seed = this.fleetSeed(vehicle); + const services = ['Tire rotation & balance', 'Brake fluid inspection', 'Air filter replacement', 'Multi-point inspection']; + const service = services[seed % services.length]; + const dueMileage = this.nextServiceMileage(vehicle); + return `Next service due: ${service} · est. ${this.formatWholeNumber(dueMileage)} mi`; + } - const carPathsToPhotos = carPhotoNames.map(photo => `cars/photos/${folderName}/${photo}`); + protected fleetMaintenanceRows(vehicle: FleetVehicle): FleetMaintenanceRow[] { + const mileage = this.fleetMileageValue(vehicle); + const dueMileage = this.nextServiceMileage(vehicle); + return [ + { date: 'Jun 28, 2026', service: 'Oil & filter change', odometer: `${this.formatWholeNumber(Math.max(0, mileage - 2700))} mi`, cost: '$85', status: 'Completed' }, + { date: 'Mar 14, 2026', service: 'Brake pad replacement (front)', odometer: `${this.formatWholeNumber(Math.max(0, mileage - 6050))} mi`, cost: '$340', status: 'Completed' }, + { date: 'Dec 02, 2025', service: 'Annual inspection', odometer: `${this.formatWholeNumber(Math.max(0, mileage - 11500))} mi`, cost: '$120', status: 'Completed' }, + { date: 'Aug 30, 2026', service: this.fleetMaintenanceNotice(vehicle).split(': ')[1].split(' · ')[0], odometer: `est. ${this.formatWholeNumber(dueMileage)} mi`, cost: '—', status: 'Scheduled' } + ]; + } - return carPathsToPhotos; + protected fleetMaintenanceStatusClass(status: FleetMaintenanceRow['status']): string { + return status === 'Completed' ? 'fleet-detail-pill-success' : 'fleet-detail-pill-warn'; } - protected getPathToDriverPhoto(cell: any) { - return `people/${this.dataService.getDriverPhoto(cell.row.data.driverName)}.jpg`; + protected fleetCostDistribution(vehicle: FleetVehicle): FleetCostDistributionPoint[] { + const items = this.fleetCostItems(vehicle); + const total = items.reduce((sum, item) => sum + item.value, 0); + return items.map((item) => ({ + label: item.label, + displayLabel: `${Math.round((item.value / total) * 100)}%`, + percentage: `${Math.round((item.value / total) * 100)}%`, + value: item.value, + tone: item.tone + })); } - //overlay logic - protected showLocationOverlay(event: MouseEvent, cell: any) { + protected fleetMonthlyOperatingSpend(vehicle: FleetVehicle): FleetMonthlySpendPoint[] { + const seed = this.fleetSeed(vehicle); + const seasonalBase = [118, 148, 208, 238, 218, 258, 278, 208, 188, 228, 208, 178]; + return ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'].map((month, index) => { + const variability = ((seed + index * 7) % 5) * 10; + const maintenanceAdjustment = vehicle.status === 'In Maintenance' && (index === 6 || index === 7) ? 22 : 0; + const utilizationAdjustment = vehicle.status === 'Available' && index >= 8 ? -12 : 0; + return { month, spend: seasonalBase[index] + variability + maintenanceAdjustment + utilizationAdjustment }; + }); + } - const vehicleId = cell.row?.cells?.find((c: any) => c.column.field === 'vehicleId')?.value; + protected fleetCostToneClass(tone: FleetCostItem['tone']): string { + return `fleet-cost-tone-${tone}`; + } - if (!vehicleId) { - console.error('Vehicle ID not found in data'); - return; - } - const vehicle = this.vehicleData$.value?.find((v: any) => v.vehicleId === vehicleId); + protected fleetUtilizationSummary(vehicle: FleetVehicle): { rate: string; activeHours: string; idleHours: string; trips: number } { + const seed = this.fleetSeed(vehicle); + const rateValue = Math.max(52, 76 - (vehicle.status === 'In Maintenance' ? 9 : 0) - (vehicle.status === 'Available' ? 4 : 0) + (seed % 5)); + const activeHours = 92 + (seed % 16) * 2; + const idleHours = Math.max(18, 44 - (seed % 7) * 2 + (vehicle.status === 'Available' ? 8 : 0)); + return { rate: `${rateValue}%`, activeHours: `${activeHours}h`, idleHours: `${idleHours}h`, trips: 18 + (seed % 8) }; + } - if (!vehicle) { - console.error(`No vehicle found for ID: ${vehicleId}`); - return; - } - this.vehicleDetails.vehiclePhoto = this.getPathToCarImage(vehicleId)[0]; - this.vehicleDetails.make = vehicle.make; - this.vehicleDetails.model = vehicle.model; - this.vehicleDetails.mileage = vehicle.details.mileage; - this.vehicleDetails.markerLocations = [ - { latitude: parseFloat(vehicle.locationGps.split(',')[0]), longitude: parseFloat(vehicle.locationGps.split(',')[1]) }, + protected fleetUtilizationSeries(vehicle: FleetVehicle): FleetUtilizationComparisonPoint[] { + const seed = this.fleetSeed(vehicle); + const base2024 = 160 + (seed % 5) * 14; + const uplift2025 = 18 + (seed % 4) * 9; + + return [ + { month: 'Jan', utilization2024: base2024, utilization2025: base2024 + 42 }, + { month: 'Feb', utilization2024: base2024 + 22, utilization2025: base2024 + 4 }, + { month: 'Mar', utilization2024: base2024 + 140, utilization2025: base2024 + 118 }, + { month: 'Apr', utilization2024: base2024 + 316, utilization2025: base2024 + 278 }, + { month: 'May', utilization2024: base2024 + 418, utilization2025: base2024 + 472 }, + { month: 'Jun', utilization2024: base2024 + 502, utilization2025: base2024 + 564 }, + { month: 'Jul', utilization2024: base2024 + 560, utilization2025: base2024 + 586 + (vehicle.status === 'In Maintenance' ? -24 : uplift2025) }, + { month: 'Aug', utilization2024: base2024 + 594, utilization2025: base2024 + 650 + (vehicle.status === 'Available' ? -22 : uplift2025) }, + { month: 'Sep', utilization2024: base2024 + 506, utilization2025: base2024 + 480 + (vehicle.status === 'Available' ? -38 : 0) }, + { month: 'Oct', utilization2024: base2024 + 442, utilization2025: base2024 + 646 }, + { month: 'Nov', utilization2024: base2024 + 154, utilization2025: base2024 + 354 }, + { month: 'Dec', utilization2024: base2024 + 52, utilization2025: base2024 + 198 } ]; + } - this.map.series.clear(); - this.addSeriesWith(this.vehicleDetails.markerLocations, "Red"); - const centerPoint = { - left: this.vehicleDetails.markerLocations[0].longitude - 0.01, - top: this.vehicleDetails.markerLocations[0].latitude - 0.01, - width: 0.01, - height: 0.01 - }; - this.map.zoomToGeographic(centerPoint); - - const overlaySettings = IgxOverlayService.createRelativeOverlaySettings( - event.target as HTMLElement, - RelativePosition.Before, - RelativePositionStrategy.Auto, - ); - - overlaySettings.outlet = this.hostRef; - - overlaySettings.positionStrategy!.settings.openAnimation = useAnimation(fadeIn, { params: { duration: '500ms', fromOpacity: 0, toOpacity: 1 } }); - overlaySettings.positionStrategy!.settings.closeAnimation = useAnimation(fadeOut, { params: { duration: '500ms', fromOpacity: 1, toOpacity: 0 } }); + protected fleetVehiclePhotoUrl(vehicle: FleetVehicle): string { + const photoUrls = this.fleetVehiclePhotoCandidates(vehicle); + return photoUrls[0] ?? this.fleetVehicleFallbackPhotoUrl; + } - overlaySettings.scrollStrategy = new CloseScrollStrategy(); + protected onFleetVehicleImageError(event: Event, vehicle: FleetVehicle): void { + const target = event.target; + if (!(target instanceof HTMLImageElement)) return; - if (this.locationOverlayId) { - this.overlayService.detach(this.locationOverlayId); - } + const photoUrls = this.fleetVehiclePhotoCandidates(vehicle); + const currentOffset = Number(target.dataset['fallbackIndex'] ?? '0'); + const nextOffset = currentOffset + 1; - this.isLocationOverlayActive = true; - this.locationOverlayId = this.overlayService.attach(this.locationOverlay, overlaySettings); - this.overlayService.show(this.locationOverlayId); + if (nextOffset >= photoUrls.length) return; + target.dataset['fallbackIndex'] = String(nextOffset); + target.src = photoUrls[nextOffset]; } - protected closeLocationOverlay() { - this.isLocationOverlayActive = false; - if (this.locationOverlayId) { - this.overlayService.hide(this.locationOverlayId); + private async loadFleetVehicleImageCatalog(): Promise { + try { + const response = await fetch('/assets/car_images.json'); + if (!response.ok) return; + const payload: unknown = await response.json(); + if (!payload || typeof payload !== 'object') return; + + const catalog: FleetCarImageCatalog = {}; + for (const [key, files] of Object.entries(payload as Record)) { + if (!Array.isArray(files)) continue; + const validFiles = files.filter((item): item is string => typeof item === 'string' && item.trim().length > 0); + if (validFiles.length > 0) catalog[key] = validFiles; + } + + this.fleetVehicleImageCatalog.set(catalog); + } catch { + // Use fallback image when asset load fails. } } - protected showDriverOverlay(event: MouseEvent, cell: any) { + private fleetVehiclePhotoCandidates(vehicle: FleetVehicle): string[] { + const catalog = this.fleetVehicleImageCatalog(); + const matches = this.fleetVehicleImageMatches(vehicle, catalog); + if (matches.length === 0) return [this.fleetVehicleFallbackPhotoUrl]; - const driverName = cell.row?.cells?.find((c: any) => c.column.field === 'driverName')?.value; - - if (!driverName) { - console.error('Driver not found in data'); - return; - } - - const driverDetails = this.dataService.findDriverByName(driverName); + return matches + .flatMap((match) => match.files.map((fileName) => `${this.fleetVehiclePhotoFolderUrl(match.key)}/${encodeURIComponent(fileName)}`)) + .filter((url, index, urls) => urls.indexOf(url) === index); + } - if (!driverDetails) { - console.error(`No data found for driver: ${driverName}`); - return; - } + private fleetVehicleImageMatches(vehicle: FleetVehicle, catalog: FleetCarImageCatalog): FleetCarImageMatch[] { + const makeTokens = this.fleetVehicleMakeTokens(vehicle.make); + const modelToken = this.normalizePhotoToken(vehicle.model); + const colorTokens = this.fleetVehicleColorTokens(vehicle.specs.color); + + return Object.entries(catalog) + .map(([key, files]) => { + const keyToken = this.normalizePhotoToken(key); + let score = 0; + if (!makeTokens.some((token) => keyToken.includes(token))) return null; + + score += 6; + if (keyToken.includes(modelToken)) score += 10; + if (keyToken.startsWith(`${makeTokens[0]} ${modelToken}`)) score += 5; + for (const token of colorTokens) { + if (token.length > 0 && keyToken.includes(token)) score += 3; + } + + return { key, files, score }; + }) + .filter((match): match is FleetCarImageMatch => !!match && match.score > 0) + .sort((left, right) => right.score - left.score); + } - this.driverDetails.name = driverDetails.name; - this.driverDetails.license = driverDetails.license; - this.driverDetails.address = driverDetails.address; - this.driverDetails.city = driverDetails.city; - this.driverDetails.phone = driverDetails.phone; - this.driverDetails.email = driverDetails.email; - this.driverDetails.photo = `people/${driverDetails.photo}.jpg`; + private fleetVehiclePhotoFolderUrl(folderName: string): string { + return `${this.fleetVehiclePhotoBaseUrl}${encodeURIComponent(folderName)}`; + } - const overlaySettings = IgxOverlayService.createRelativeOverlaySettings( - event.target as HTMLElement, - RelativePosition.After, - RelativePositionStrategy.Auto, - ); + private fleetVehicleMakeTokens(make: string): string[] { + const normalized = this.normalizePhotoToken(make); + if (normalized === 'vw' || normalized === 'volkswagen') return ['vw', 'volkswagen']; + return [normalized]; + } - overlaySettings.outlet = this.hostRef; + private fleetVehicleColorTokens(color: string): string[] { + const normalized = this.normalizePhotoToken(color); + const tokens = normalized.split(' ').filter((token) => token.length > 0); + if (normalized.length > 0) return [normalized, ...tokens]; + return tokens; + } - overlaySettings.positionStrategy!.settings.openAnimation = useAnimation(fadeIn, { params: { duration: '500ms', fromOpacity: 0, toOpacity: 1 } }); - overlaySettings.positionStrategy!.settings.closeAnimation = useAnimation(fadeOut, { params: { duration: '500ms', fromOpacity: 1, toOpacity: 0 } }); + private normalizePhotoToken(value: string): string { + return value.toLowerCase().replace(/[^a-z0-9]+/g, ' ').trim(); + } - overlaySettings.scrollStrategy = new CloseScrollStrategy(); + private fleetCostItems(vehicle: FleetVehicle): FleetCostItem[] { + const seed = this.fleetSeed(vehicle); + const maintenanceBase = vehicle.status === 'In Maintenance' ? 520 : 280; - if (this.driverOverlayId) { - this.overlayService.detach(this.driverOverlayId); - } + return [ + { label: 'Fuel / charging', value: 360 + (seed % 5) * 26, tone: 'fuel' }, + { label: 'Maintenance', value: maintenanceBase + (seed % 4) * 25, tone: 'maintenance' }, + { label: 'Insurance', value: 180 + (seed % 3) * 30, tone: 'insurance' }, + { label: 'Tolls & fees', value: 54 + (seed % 6) * 7, tone: 'tolls' } + ]; + } - this.isDriverOverlayActive = true; - this.driverOverlayId = this.overlayService.attach(this.driverOverlay, overlaySettings); - this.overlayService.show(this.driverOverlayId); + private fleetSeed(vehicle: FleetVehicle): number { + return Number(vehicle.id.replace(/\D/g, '')) || 1; } - protected closeDriverOverlay() { - this.isDriverOverlayActive = false; - if (this.driverOverlayId) { - this.overlayService.hide(this.driverOverlayId); - } + private fleetCity(vehicle: FleetVehicle): string { + return vehicle.locationCity.split(',')[0]; } - protected getValueByPath(obj: any, path: string) { - return path.split('.').reduce((o, key) => (o && o[key] !== undefined) ? o[key] : 'N/A', obj); + private fleetMileageValue(vehicle: FleetVehicle): number { + return Number(vehicle.specs.mileage.replace(/[^\d]/g, '')) || 0; } - protected getStatusType(status: string): string { - const types: Record = { - "Available": "success", - "In Maintenance": "error", - "Active": "info", - }; - return types[status] || "default"; + private nextServiceMileage(vehicle: FleetVehicle): number { + const mileage = this.fleetMileageValue(vehicle); + return Math.ceil((mileage + 3200) / 5000) * 5000; } - protected getStatusIcon(status: string): string { - const icons: Record = { - "Available": "check", - "In Maintenance": "wrench", - "Active": "delivery" - }; - return icons[status] || "info"; - } - - //util function for adding map series - private addSeriesWith(locations: any[], brush: string) { - const symbolSeries = new IgxGeographicSymbolSeriesComponent(); - symbolSeries.dataSource = locations; - symbolSeries.latitudeMemberPath = "latitude"; - symbolSeries.longitudeMemberPath = "longitude"; - symbolSeries.markerBrush = "White"; - symbolSeries.markerOutline = brush; - symbolSeries.markerTemplate = { - measure: (measureInfo) => { - measureInfo.width = 24; - measureInfo.height = 24; - }, - render: (renderInfo) => { - const ctx = renderInfo.context; - const x = renderInfo.xPosition; - const y = renderInfo.yPosition; - - const img = new Image(); - img.src = 'location_pin.svg'; - img.onload = () => { - ctx.drawImage(img, x - 12, y - 12, 32, 32); - }; - } - } as IgDataTemplate; - this.map!.series.add(symbolSeries); + private fleetDriverName(vehicle: FleetVehicle, offset: number): string { + const drivers = ['M. Alvarez', 'R. Chen', 'S. Patel', 'J. Walker', 'A. Brooks', 'T. Nguyen']; + return drivers[(this.fleetSeed(vehicle) + offset) % drivers.length]; } - protected rightAlignedCellStyles = { - 'justify-content': 'flex-end', - 'display': 'flex' - }; + private formatWholeNumber(value: number): string { + return Math.round(value).toLocaleString('en-US'); + } - protected rightAlignedHeaderStyles = { - 'text-align': 'right' - }; + private formatOneDecimal(value: number): string { + return value.toLocaleString('en-US', { minimumFractionDigits: 1, maximumFractionDigits: 1 }); + } } + diff --git a/projects/fleet-management-grid/src/assets/car_images.json b/projects/fleet-management-grid/src/assets/car_images.json index 74f11903..14dc46fc 100644 --- a/projects/fleet-management-grid/src/assets/car_images.json +++ b/projects/fleet-management-grid/src/assets/car_images.json @@ -178,5 +178,80 @@ "5-1-VW-Touareg-pexels-ardit-mbrati-216809103-16646414.jpg", "5-2-VW-Touareg-pexels-ardit-mbrati-216809103-16646416.jpg", "5-3-VW-Touareg-pexels-ardit-mbrati-216809103-16646412.jpg" + ], + "Ford Focus silver": [ + "1-1-Ford-Focus-car-3300587_1280.jpg", + "1-2-Ford-Focus-car-3300588_1280.jpg", + "1-3-Ford-Focus-car-3300587_1280.jpg" + ], + "Hyundai Elantra graphite": [ + "mazda-3-7498005_1920.jpg", + "mazda-3-7498005_19201.jpg", + "mazda-3-7498005_19202.jpg" + ], + "Subaru Outback autumn green": [ + "Toyota-RAV4-stephen-andrews-28Lmg9YaTFY-unsplash.jpg", + "Toyota-RAV4-stephen-andrews-28Lmg9YaTFY-unsplash1.jpg", + "Toyota-RAV4-stephen-andrews-28Lmg9YaTFY-unsplash2.jpg" + ], + "Mazda CX-5 machine gray": [ + "Toyota-RAV4-krish-parmar-PmSwFm4Lw1c-unsplash.jpg", + "Toyota-RAV4-krish-parmar-PmSwFm4Lw1c-unsplash1.jpg", + "Toyota-RAV4-krish-parmar-PmSwFm4Lw1c-unsplash2.jpg" + ], + "Chevrolet Malibu summit white": [ + "tesla-3-5937063_1920.jpg", + "tesla-3-5937063_19201.jpg", + "tesla-3-5937063_19202.jpg" + ], + "Nissan Altima gun metallic": [ + "VW-Passat-car-866764_1280.jpg", + "VW-Passat-car-866769_1280.jpg", + "VW-Passat-car-866769_12801.jpg" + ], + "Honda CR-V urban gray": [ + "Toyota-RAV4-gino-marcelo-hernandez-sanchez-MN0-x2hDNrc-unsplash.jpg", + "Toyota-RAV4-gino-marcelo-hernandez-sanchez-MN0-x2hDNrc-unsplash1.jpg", + "Toyota-RAV4-gino-marcelo-hernandez-sanchez-MN0-x2hDNrc-unsplash2.jpg" + ], + "Ford Escape carbonized gray": [ + "Hyundai-ix35-5505817_1920.jpg", + "Hyundai-ix35-5505817_19201.jpg", + "Hyundai-ix35-5505817_19202.jpg" + ], + "Volkswagen Tiguan atlantic blue": [ + "5-1-VW-Touareg-pexels-ardit-mbrati-216809103-16646414.jpg", + "5-2-VW-Touareg-pexels-ardit-mbrati-216809103-16646416.jpg", + "5-3-VW-Touareg-pexels-ardit-mbrati-216809103-16646412.jpg" + ], + "Jeep Cherokee granite crystal": [ + "toyota-tundra-1241658_1920.jpg", + "toyota-tundra-1241658_19201.jpg", + "toyota-tundra-1241658_19202.jpg" + ], + "Chevrolet Equinox mosaic black": [ + "KIA-EV6-GT-line edited hyundai-motor-group-ErBFxMkJpKk-unsplash-detail1.jpg", + "KIA-EV6-GT-line edited hyundai-motor-group-ErBFxMkJpKk-unsplash.jpg", + "KIA-EV6-GT-line edited hyundai-motor-group-ErBFxMkJpKk-unsplash2.jpg" + ], + "Hyundai Tucson amazon gray": [ + "Hyundai-Kona-electric-4964667_1920.jpg", + "Hyundai-Kona-electric-4964667_19201.jpg", + "Hyundai-Kona-electric-4964667_19202.jpg" + ], + "Nissan Rogue caspian blue": [ + "Kia-Sportage-2382086_1920.jpg", + "Kia-Sportage-2382086_19201.jpg", + "Kia-Sportage-2382086_19202.jpg" + ], + "Ford Transit Connect frozen white": [ + "VW_Caddy-ollie-walls-jDo2IZm-uFc-unsplash.jpg", + "VW_Caddy-ollie-walls-jDo2IZm-uFc-unsplash1.jpg", + "VW_Caddy-ollie-walls-jDo2IZm-uFc-unsplash2.jpg" + ], + "Ram ProMaster City bright white": [ + "VW-Caddy-daniil-lyusov-fesux3IvcVo-unsplash-2.jpg", + "VW-Caddy-daniil-lyusov-fesux3IvcVo-unsplash-21.jpg", + "VW-Caddy-daniil-lyusov-fesux3IvcVo-unsplash-22.jpg" ] } diff --git a/projects/fleet-management-grid/src/index.html b/projects/fleet-management-grid/src/index.html index f5c98195..19155ef2 100644 --- a/projects/fleet-management-grid/src/index.html +++ b/projects/fleet-management-grid/src/index.html @@ -10,6 +10,7 @@ href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" /> + diff --git a/projects/fleet-management-grid/src/styles.scss b/projects/fleet-management-grid/src/styles.scss index d573e0c9..8b122296 100644 --- a/projects/fleet-management-grid/src/styles.scss +++ b/projects/fleet-management-grid/src/styles.scss @@ -6,6 +6,6 @@ html { body { margin: 0; - padding: 8px; + padding: 0; height: 100%; } \ No newline at end of file diff --git a/projects/hr-portal/src/app/app.component.scss b/projects/hr-portal/src/app/app.component.scss index 3be708d1..f41490de 100644 --- a/projects/hr-portal/src/app/app.component.scss +++ b/projects/hr-portal/src/app/app.component.scss @@ -1,15 +1,3 @@ -@use "igniteui-angular/theming" as *; - -@include core(); -@include typography( - $font-family: $fluent-typeface, - $type-scale: $fluent-type-scale -); -@include theme( - $palette: $light-fluent-palette, - $schema: $light-fluent-schema -); - .outer-wrapper { display: flex; justify-content: center; diff --git a/projects/hr-portal/src/app/hr-portal/hr-portal.component.html b/projects/hr-portal/src/app/hr-portal/hr-portal.component.html index 1736f1bd..3fdae535 100644 --- a/projects/hr-portal/src/app/hr-portal/hr-portal.component.html +++ b/projects/hr-portal/src/app/hr-portal/hr-portal.component.html @@ -1,111 +1,19 @@ - - - - HR Portal - - @if (treeGrid.sortingExpressions.length > 0) { - - } - - - - Export to Excel - Export to CSV - - - - - - -
- - {{ cell.row.data.Name }} -
- - - - - - -
- - {{ cell.row.data.Location }}, {{ cell.row.data.Country }} -
- - - - -
- - - - - - - - - -
- - - - - {{ cell.value | date : "yyyy-MM-dd" }} - - - - - +
+
+
+

Employee Directory

+

Filter by employee profile, rating, and department with Grid Lite.

+
+
+ + + + + + + + + + + +
diff --git a/projects/hr-portal/src/app/hr-portal/hr-portal.component.scss b/projects/hr-portal/src/app/hr-portal/hr-portal.component.scss index f87a85b9..db9a1b18 100644 --- a/projects/hr-portal/src/app/hr-portal/hr-portal.component.scss +++ b/projects/hr-portal/src/app/hr-portal/hr-portal.component.scss @@ -1,50 +1,87 @@ -:host { +app-hr-portal { + --white: #ffffff; + --line: #d8dde6; + --text: #263446; + --subtle-muted: #5a5d61; + --font-family-condensed: 'Barlow Condensed', 'Arial Narrow', sans-serif; + --font-size-base: 1rem; + --font-size-3xl: 2rem; + --pill-positive-text: #136045; + --pill-positive-bg: #d6f2e7; + --pill-negative-text: #9e3f74; + --pill-negative-bg: #f8d8e9; + --pill-proposal-bg: #fae7ce; + --pill-proposal-text: #9b4712; + --pill-negotiation-bg: #e6ddfb; + --pill-negotiation-text: #5238be; + display: block; height: 100%; width: 100%; + min-height: 0; min-width: 1100px; } -.flex-container { - display: block; - margin: 0 auto; +app-hr-portal .operations-shell { + padding: 1.5rem; + display: grid; + grid-template-rows: auto minmax(0, 1fr); + flex: 1 1 auto; + min-height: 0; + gap: 1.5rem; +} + +app-hr-portal .finance-header { + display: flex; align-items: center; - text-align: center; - justify-content: center; - gap: 8px; + justify-content: space-between; } -igx-tree-grid { - --ig-size: var(--ig-size-medium); - --row-even-background: #ffffff; +app-hr-portal .finance-header h1 { + margin: 0; + font-family: var(--font-family-condensed); + font-weight: 600; + font-size: var(--font-size-3xl); + line-height: 1.1; + color: #1d1f20; } -.center-content { - display: flex; - justify-content: center; - align-items: center; - text-align: center; - height: 100%; +app-hr-portal .subtle { + margin: 0.2rem 0 0; + color: var(--subtle-muted); + font-size: var(--font-size-base); +} + +app-hr-portal .employee-lite-grid { width: 100%; + min-width: 100%; + height: 420px; + min-height: 320px; + border: 1px solid #d7dce5; + border-radius: 0.55rem; + overflow: hidden; + + --header-background: #fff; + --header-text-color: #516073; + --header-border-color: #dde3ec; + --content-background: #ffffff; + --content-text-color: #223247; + --row-odd-background: #ffffff; + --row-even-background: #ffffff; + --row-hover-background: #eef3f8; + --row-border-color: #e5e9f0; + --filtering-row-background: #f9fbfd; + --filtering-row-text-color: #506176; + --cell-active-border-color: #ff4d92; } -.employeeDiv { - display: flex; - align-items: center; - --igx-avatar-size: 28px; - gap: 8px; +app-hr-portal .employee-lite-grid::part(header-cell), +app-hr-portal .employee-lite-grid::part(header), +app-hr-portal .employee-lite-grid::part(th) { + font-size: var(--font-size-base); } -.flagDiv { - gap: 8px; - align-items: center; - display: flex; - & igx-icon { - height: 14px; - width: 18px; - border-radius: 1px; - box-shadow: var(--ig-elevation-1); - display: block; - overflow: hidden; - } +app-hr-portal .employee-lite-grid::part(td), +app-hr-portal .employee-lite-grid::part(cell) { + font-size: 0.92rem; } diff --git a/projects/hr-portal/src/app/hr-portal/hr-portal.component.ts b/projects/hr-portal/src/app/hr-portal/hr-portal.component.ts index 156d180e..77c12e1e 100644 --- a/projects/hr-portal/src/app/hr-portal/hr-portal.component.ts +++ b/projects/hr-portal/src/app/hr-portal/hr-portal.component.ts @@ -1,126 +1,129 @@ -import { Component, inject, OnInit, PLATFORM_ID, ViewChild } from '@angular/core'; -import { IgxTreeGridComponent } from 'igniteui-angular/grids/tree-grid'; -import { IgxCellTemplateDirective, IgxColumnComponent, IgxGridToolbarActionsComponent, IgxGridToolbarAdvancedFilteringComponent, IgxGridToolbarComponent, IgxGridToolbarExporterComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarTitleComponent } from 'igniteui-angular/grids/core'; -import { IgxAvatarComponent } from 'igniteui-angular/avatar'; -import { IgxPaginatorComponent } from 'igniteui-angular/paginator'; -import { IgxIconComponent, IgxIconModule, IgxIconService } from 'igniteui-angular/icon'; -import { IgxButtonModule, IgxIconButtonDirective } from 'igniteui-angular/directives'; -import { THEME_TOKEN, ThemeToken } from 'igniteui-angular/core'; -import { CommonModule, isPlatformBrowser } from '@angular/common'; -import { BehaviorSubject } from 'rxjs'; -import { DataService } from '../services/data.service'; +import { CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core'; +import { IgcGridLite } from 'igniteui-grid-lite'; +import type { IgcCellContext } from 'igniteui-grid-lite'; +import { IgcAvatarComponent, IgcRatingComponent } from 'igniteui-webcomponents'; +import { html, type TemplateResult } from 'lit'; + +IgcGridLite.register(); +IgcAvatarComponent.register(); +IgcRatingComponent.register(); + +interface EmployeeRecord { + avatarUrl: string; + firstName: string; + lastName: string; + satisfactionRating: number; + employmentType: 'Full-Time' | 'Part-Time' | 'Contract'; + emailAddress: string; + department: 'Finance' | 'Engineering' | 'Marketing' | 'Sales'; + registeredOn: string; +} + @Component({ selector: 'app-hr-portal', - templateUrl: './hr-portal.component.html', - styleUrls: ['./hr-portal.component.scss'], standalone: true, - providers: [ - { - provide: THEME_TOKEN, - useFactory: () => { - return new ThemeToken('fluent'); - }, - }, - ], - imports: [ - IgxTreeGridComponent, - IgxColumnComponent, - IgxAvatarComponent, - IgxPaginatorComponent, - IgxGridToolbarComponent, - IgxGridToolbarActionsComponent, - IgxGridToolbarAdvancedFilteringComponent, - IgxGridToolbarPinningComponent, - IgxGridToolbarTitleComponent, - IgxGridToolbarExporterComponent, - IgxCellTemplateDirective, - IgxIconModule, - IgxIconComponent, - IgxIconButtonDirective, - IgxGridToolbarHidingComponent, - IgxButtonModule, - CommonModule, - ], + changeDetection: ChangeDetectionStrategy.OnPush, + encapsulation: ViewEncapsulation.None, + schemas: [CUSTOM_ELEMENTS_SCHEMA], + templateUrl: './hr-portal.component.html', + styleUrl: './hr-portal.component.scss' }) -export class HrPortalComponent implements OnInit { - public data$: BehaviorSubject = new BehaviorSubject([]); - public isLoading = true; - @ViewChild('treeGrid', { read: IgxTreeGridComponent, static: true }) - public treeGrid!: IgxTreeGridComponent; - private platformId = inject(PLATFORM_ID); - - constructor(private iconService: IgxIconService, private dataService: DataService) {} - - ngOnInit() { - this.dataService.getData(); - this.data$ = this.dataService.records; - this.data$.subscribe((data) => { - if (data.length !== 0) { - this.isLoading = false; - } - }); - const icons = [ - { - name: 'linkedIn', - path: 'images/others/linkedin.svg', - category: 'hr-icons', - }, - { - name: 'USA', - path: 'images/countries/United States.svg', - category: 'country-icons', - }, - { - name: 'CAN', - path: 'images/countries/Canada.svg', - category: 'country-icons', - }, - { - name: 'GBR', - path: 'images/countries/United Kingdom.svg', - category: 'country-icons', - }, - { - name: 'DEU', - path: 'images/countries/Germany.svg', - category: 'country-icons', - }, - { - name: 'FRA', - path: 'images/countries/France.svg', - category: 'country-icons', - }, - { - name: 'ESP', - path: 'images/countries/Spain.svg', - category: 'country-icons', - }, - { - name: 'ITA', - path: 'images/countries/Italy.svg', - category: 'country-icons', - }, - { - name: 'AUS', - path: 'images/countries/Australia.svg', - category: 'country-icons', - }, - { - name: 'JPN', - path: 'images/countries/Japan.svg', - category: 'country-icons', - }, - { - name: 'ARE', - path: 'images/countries/uae.svg', - category: 'country-icons', - }, - ]; - - if (isPlatformBrowser(this.platformId)) { - icons.forEach((icon) => { - this.iconService.addSvgIcon(icon.name, icon.path, icon.category); - }); +export class HrPortalComponent { + protected readonly vm = this; + + protected readonly employees: EmployeeRecord[] = [ + { avatarUrl: 'https://i.pravatar.cc/48?img=5', firstName: 'Grace', lastName: 'Moore', satisfactionRating: 4, employmentType: 'Contract', emailAddress: 'grace.moore@example.com', department: 'Finance', registeredOn: 'Aug 19, 2025, 11:58:46 PM' }, + { avatarUrl: 'https://i.pravatar.cc/48?img=11', firstName: 'Charlie', lastName: 'Jones', satisfactionRating: 3, employmentType: 'Part-Time', emailAddress: 'charlie.jones@example.com', department: 'Finance', registeredOn: 'Apr 3, 2026, 7:13:25 AM' }, + { avatarUrl: 'https://i.pravatar.cc/48?img=36', firstName: 'Jane', lastName: 'Davis', satisfactionRating: 5, employmentType: 'Full-Time', emailAddress: 'jane.davis@example.com', department: 'Marketing', registeredOn: 'Sep 21, 2025, 11:13:08 AM' }, + { avatarUrl: 'https://i.pravatar.cc/48?img=42', firstName: 'Kate', lastName: 'Jackson', satisfactionRating: 4, employmentType: 'Full-Time', emailAddress: 'kate.jackson@example.com', department: 'Engineering', registeredOn: 'Dec 19, 2025, 11:53:02 PM' }, + { avatarUrl: 'https://i.pravatar.cc/48?img=72', firstName: 'John', lastName: 'Brown', satisfactionRating: 5, employmentType: 'Full-Time', emailAddress: 'john.brown@example.com', department: 'Finance', registeredOn: 'Nov 19, 2025, 1:07:22 AM' } + ]; + + protected readonly employeeAvatarCellTemplate = (context: IgcCellContext): TemplateResult => { + const employee = context.row.data; + if (!employee) { + return html``; + } + + const initials = this.employeeInitials(employee); + const background = this.employeeAvatarColor(employee); + + return html` +
+ +
+ `; + }; + + protected readonly employeeRegisteredOnCellTemplate = (context: IgcCellContext): TemplateResult => { + const employee = context.row.data; + if (!employee) { + return html``; + } + + return html`${employee.registeredOn}`; + }; + + protected readonly employeeRatingCellTemplate = (context: IgcCellContext): TemplateResult => { + const employee = context.row.data; + if (!employee) { + return html``; + } + + return html``; + }; + + protected readonly employeeEmploymentCellTemplate = (context: IgcCellContext): TemplateResult => { + const employee = context.row.data; + if (!employee) { + return html``; } + + const type = employee.employmentType; + return html`${type}`; + }; + + protected readonly employeeDepartmentCellTemplate = (context: IgcCellContext): TemplateResult => { + const employee = context.row.data; + if (!employee) { + return html``; + } + + const department = employee.department; + return html`${department}`; + }; + + protected employeeEmploymentPillStyle(type: EmployeeRecord['employmentType']): string { + if (type === 'Full-Time') return this.pillStyle('var(--pill-positive-bg)', 'var(--pill-positive-text)'); + if (type === 'Part-Time') return this.pillStyle('var(--pill-proposal-bg)', 'var(--pill-proposal-text)'); + return this.pillStyle('var(--pill-negotiation-bg)', 'var(--pill-negotiation-text)'); + } + + protected employeeDepartmentPillStyle(department: EmployeeRecord['department']): string { + if (department === 'Finance') return this.pillStyle('var(--pill-positive-bg)', 'var(--pill-positive-text)'); + if (department === 'Engineering') return this.pillStyle('var(--pill-negotiation-bg)', 'var(--pill-negotiation-text)'); + if (department === 'Marketing') return this.pillStyle('var(--pill-proposal-bg)', 'var(--pill-proposal-text)'); + return this.pillStyle('var(--pill-negative-bg)', 'var(--pill-negative-text)'); + } + + private pillStyle(background: string, color: string): string { + return `display:inline-flex; align-items:center; border-radius:999px; padding:0.15rem 0.48rem; font-size:0.75rem; font-weight:600; background:${background}; color:${color};`; + } + + private employeeAvatarColor(employee: EmployeeRecord): string { + const palette = ['#4f6bed', '#2ab184', '#f0a12c', '#d84b98', '#5b6678', '#3f8cff']; + const seed = `${employee.firstName}${employee.lastName}`; + let hash = 0; + + for (const char of seed) { + hash = (hash << 5) - hash + char.charCodeAt(0); + hash |= 0; + } + + return palette[Math.abs(hash) % palette.length]; + } + + private employeeInitials(employee: EmployeeRecord): string { + return `${employee.firstName.charAt(0)}${employee.lastName.charAt(0)}`.toUpperCase(); } } diff --git a/projects/hr-portal/src/main.ts b/projects/hr-portal/src/main.ts index 05308a0d..73c5b27b 100644 --- a/projects/hr-portal/src/main.ts +++ b/projects/hr-portal/src/main.ts @@ -1,5 +1,7 @@ import { enableProdMode, provideZoneChangeDetection } from '@angular/core'; import { bootstrapApplication } from '@angular/platform-browser'; +import { IgcGridLite } from 'igniteui-grid-lite'; +import { IgcAvatarComponent, IgcRatingComponent } from 'igniteui-webcomponents'; import { appConfig } from './app/app.config'; @@ -10,5 +12,9 @@ if (environment.production) { enableProdMode(); } +IgcGridLite.register(); +IgcAvatarComponent.register(); +IgcRatingComponent.register(); + bootstrapApplication(AppComponent, {...appConfig, providers: [provideZoneChangeDetection(), ...appConfig.providers]}) .catch((err) => console.error(err)); diff --git a/projects/hr-portal/src/styles.scss b/projects/hr-portal/src/styles.scss index d573e0c9..71b7de13 100644 --- a/projects/hr-portal/src/styles.scss +++ b/projects/hr-portal/src/styles.scss @@ -1,3 +1,15 @@ +@use "igniteui-angular/theming" as *; + +@include core(); +@include typography( + $font-family: $fluent-typeface, + $type-scale: $fluent-type-scale +); +@include theme( + $palette: $light-fluent-palette, + $schema: $light-fluent-schema +); + html { margin: 0; padding: 0; diff --git a/public/assets/car_images.json b/public/assets/car_images.json new file mode 100644 index 00000000..14dc46fc --- /dev/null +++ b/public/assets/car_images.json @@ -0,0 +1,257 @@ +{ + "Ford F-150 blue": [ + "Ford-F150-caleb-white-XGJBSkoqX_I-unsplash.jpg", + "Ford-F150-caleb-white-XGJBSkoqX_I-unsplash1.jpg", + "Ford-F150-caleb-white-XGJBSkoqX_I-unsplash2.jpg" + ], + "Ford F-150 red": [ + "Ford-f150-7572360_1920.jpg", + "Ford-f150-7572360_19201.jpg", + "Ford-f150-7572360_19202.jpg" + ], + "Ford Focus blue": [ + "ford-focus-5167838_1280.jpg", + "ford-focus-5167838_12801.jpg", + "ford-focus-5167838_12802.jpg" + ], + "Ford Focus dark gray": [ + "1-1-Ford-Focus-car-3300587_1280.jpg", + "1-2-Ford-Focus-car-3300588_1280.jpg", + "1-3-Ford-Focus-car-3300587_1280.jpg" + ], + "Ford Mustang blue": [ + "Ford-Mustang-automobile-1450573_1920.jpg", + "Ford-Mustang-automobile-1450573_19201.jpg", + "Ford-Mustang-automobile-1450573_19202.jpg" + ], + "Ford Mustang red": [ + "Ford-Mustang-convertible-1630448_1920.jpg", + "Ford-Mustang-convertible-1630448_19201.jpg", + "Ford-Mustang-convertible-1630448_19202.jpg" + ], + "Honda Civic": [ + "honda-civic-4967605_1920.jpg", + "honda-civic-4967605_19201.jpg", + "honda-civic-4967605_19202.jpg" + ], + "Hyundai ix35": [ + "Hyundai-ix35-5505817_1920.jpg", + "Hyundai-ix35-5505817_19201.jpg", + "Hyundai-ix35-5505817_19202.jpg" + ], + "Hyundai Kona": [ + "Hyundai-Kona-electric-4964667_1920.jpg", + "Hyundai-Kona-electric-4964667_19201.jpg", + "Hyundai-Kona-electric-4964667_19202.jpg" + ], + "Kia Ceed red": [ + "Kia-Ceed-car-3305685_1280.jpg", + "Kia-ceed-car-3305686_1920.jpg", + "Kia-Ceed-car-3305699_1280.jpg" + ], + "Kia Ceed white": [ + "Kia-Ceed-car-6097887_1920.jpg", + "Kia-Ceed-car-6097887_19201.jpg", + "Kia-Ceed-car-6097887_19202.jpg" + ], + "Kia EV6 gray": [ + "KIA-EV6-hyundai-motor-group-gKODwMitO-c-unsplash.jpg", + "KIA-EV6-hyundai-motor-group-gKODwMitO-c-unsplash1.jpg", + "KIA-EV6-hyundai-motor-group-gKODwMitO-c-unsplash2.jpg" + ], + "Kia EV6 red": [ + "KIA-EV6-hyundai-motor-group-jdjzmbw4GPg-unsplash.jpg", + "KIA-EV6-hyundai-motor-group-jdjzmbw4GPg-unsplash1.jpg", + "KIA-EV6-hyundai-motor-group-jdjzmbw4GPg-unsplash2.jpg" + ], + "Kia EV6 GT": [ + "KIA-EV6-GT-line edited hyundai-motor-group-ErBFxMkJpKk-unsplash-detail1.jpg", + "KIA-EV6-GT-line edited hyundai-motor-group-ErBFxMkJpKk-unsplash.jpg", + "KIA-EV6-GT-line edited hyundai-motor-group-ErBFxMkJpKk-unsplash2.jpg" + ], + "Kia Soul": [ + "Kia-Soul-car-2441815_1920.jpg", + "Kia-Soul-car-2441815_19201.jpg", + "Kia-Soul-car-2441815_19202.jpg" + ], + "Kia Sportage": [ + "Kia-Sportage-2382086_1920.jpg", + "Kia-Sportage-2382086_19201.jpg", + "Kia-Sportage-2382086_19202.jpg" + ], + "Mazda 3": [ + "mazda-3-7498005_1920.jpg", + "mazda-3-7498005_19201.jpg", + "mazda-3-7498005_19202.jpg" + ], + "Mazda 6": [ + "3-1-Mazda-6-car-6122178_1920.jpg", + "3-2-Mazda-6-car-6122177_1920.jpg", + "3-3-Mazda-6-car-6122177_1920.jpg" + ], + "Mazda MX-5": [ + "2-1-Mazda-MX-5-cabriolet-3627312_1920.jpg", + "2-2-Mazda-MX-5-cabriolet-3708152_1920.jpg", + "2-3-Mazda-MX-5-cabriolet-3708152_1920.jpg" + ], + "Tesla 3 red": [ + "Tesla-3-car-8607713_1920.jpg", + "Tesla-3-car-8607713_19201.jpg", + "Tesla-3-car-8607713_19202.jpg" + ], + "Tesla 3 white 1": [ + "tesla-3-5937063_1920.jpg", + "tesla-3-5937063_19201.jpg", + "tesla-3-5937063_19202.jpg" + ], + "Tesla 3 white 2": [ + "Tesla-3-charlie-deets-AkgALppFIwo-unsplash.jpg", + "Tesla-3-charlie-deets-AkgALppFIwo-unsplash1.jpg", + "Tesla-3-charlie-deets-AkgALppFIwo-unsplash2.jpg" + ], + "Tesla 3 white 3": [ + "Tesla-3-i-m-zion-A-JEMot0hWs-unsplash.jpg", + "Tesla-3-i-m-zion-A-JEMot0hWs-unsplash1.jpg", + "Tesla-3-i-m-zion-A-JEMot0hWs-unsplash2.jpg" + ], + "Toyota Corolla": [ + "toyota-corolla-347288_1920.jpg", + "toyota-corolla-347288_19201.jpg", + "toyota-corolla-347288_19202.jpg" + ], + "Toyota RAV4 1": [ + "Toyota-RAV4-gino-marcelo-hernandez-sanchez-MN0-x2hDNrc-unsplash.jpg", + "Toyota-RAV4-gino-marcelo-hernandez-sanchez-MN0-x2hDNrc-unsplash1.jpg", + "Toyota-RAV4-gino-marcelo-hernandez-sanchez-MN0-x2hDNrc-unsplash2.jpg" + ], + "Toyota RAV4 2": [ + "Toyota-RAV4-krish-parmar-PmSwFm4Lw1c-unsplash.jpg", + "Toyota-RAV4-krish-parmar-PmSwFm4Lw1c-unsplash1.jpg", + "Toyota-RAV4-krish-parmar-PmSwFm4Lw1c-unsplash2.jpg" + ], + "Toyota RAV4 3": [ + "Toyota-RAV4-stephen-andrews-28Lmg9YaTFY-unsplash.jpg", + "Toyota-RAV4-stephen-andrews-28Lmg9YaTFY-unsplash1.jpg", + "Toyota-RAV4-stephen-andrews-28Lmg9YaTFY-unsplash2.jpg" + ], + "Toyota Tundra": [ + "toyota-tundra-1241658_1920.jpg", + "toyota-tundra-1241658_19201.jpg", + "toyota-tundra-1241658_19202.jpg" + ], + "VW Caddy 1": [ + "VW_Caddy-ollie-walls-jDo2IZm-uFc-unsplash.jpg", + "VW_Caddy-ollie-walls-jDo2IZm-uFc-unsplash1.jpg", + "VW_Caddy-ollie-walls-jDo2IZm-uFc-unsplash2.jpg" + ], + "VW Caddy 2": [ + "VW-Caddy-daniil-lyusov-fesux3IvcVo-unsplash-2.jpg", + "VW-Caddy-daniil-lyusov-fesux3IvcVo-unsplash-21.jpg", + "VW-Caddy-daniil-lyusov-fesux3IvcVo-unsplash-22.jpg" + ], + "VW Golf": [ + "vw-Golf-4332807_1280.jpg", + "vw-Golf-4332807_12801.jpg", + "VW-Golf-car-5671331_1280.jpg" + ], + "VW Passat black": [ + "VW-passat-768159_1280.jpg", + "VW-passat-768159_12801.jpg", + "VW-passat-768159_12802.jpg" + ], + "VW Passat gray": [ + "VW-Passat-car-866764_1280.jpg", + "VW-Passat-car-866769_1280.jpg", + "VW-Passat-car-866769_12801.jpg" + ], + "VW Polo": [ + "VW-Polo-pexels-hellojoshwithers-16625624.jpg", + "VW-Polo-pexels-hellojoshwithers-166256241.jpg", + "VW-Polo-pexels-hellojoshwithers-166256242.jpg" + ], + "VW Touareg 1": [ + "4-1-VW-Touareg-automobile-4061855_1920.jpg", + "4-2-VW-Touareg-338895_1920.jpg", + "4-3-VW-Touareg-automobile-4061855_1920.jpg" + ], + "VW Touareg 2": [ + "5-1-VW-Touareg-pexels-ardit-mbrati-216809103-16646414.jpg", + "5-2-VW-Touareg-pexels-ardit-mbrati-216809103-16646416.jpg", + "5-3-VW-Touareg-pexels-ardit-mbrati-216809103-16646412.jpg" + ], + "Ford Focus silver": [ + "1-1-Ford-Focus-car-3300587_1280.jpg", + "1-2-Ford-Focus-car-3300588_1280.jpg", + "1-3-Ford-Focus-car-3300587_1280.jpg" + ], + "Hyundai Elantra graphite": [ + "mazda-3-7498005_1920.jpg", + "mazda-3-7498005_19201.jpg", + "mazda-3-7498005_19202.jpg" + ], + "Subaru Outback autumn green": [ + "Toyota-RAV4-stephen-andrews-28Lmg9YaTFY-unsplash.jpg", + "Toyota-RAV4-stephen-andrews-28Lmg9YaTFY-unsplash1.jpg", + "Toyota-RAV4-stephen-andrews-28Lmg9YaTFY-unsplash2.jpg" + ], + "Mazda CX-5 machine gray": [ + "Toyota-RAV4-krish-parmar-PmSwFm4Lw1c-unsplash.jpg", + "Toyota-RAV4-krish-parmar-PmSwFm4Lw1c-unsplash1.jpg", + "Toyota-RAV4-krish-parmar-PmSwFm4Lw1c-unsplash2.jpg" + ], + "Chevrolet Malibu summit white": [ + "tesla-3-5937063_1920.jpg", + "tesla-3-5937063_19201.jpg", + "tesla-3-5937063_19202.jpg" + ], + "Nissan Altima gun metallic": [ + "VW-Passat-car-866764_1280.jpg", + "VW-Passat-car-866769_1280.jpg", + "VW-Passat-car-866769_12801.jpg" + ], + "Honda CR-V urban gray": [ + "Toyota-RAV4-gino-marcelo-hernandez-sanchez-MN0-x2hDNrc-unsplash.jpg", + "Toyota-RAV4-gino-marcelo-hernandez-sanchez-MN0-x2hDNrc-unsplash1.jpg", + "Toyota-RAV4-gino-marcelo-hernandez-sanchez-MN0-x2hDNrc-unsplash2.jpg" + ], + "Ford Escape carbonized gray": [ + "Hyundai-ix35-5505817_1920.jpg", + "Hyundai-ix35-5505817_19201.jpg", + "Hyundai-ix35-5505817_19202.jpg" + ], + "Volkswagen Tiguan atlantic blue": [ + "5-1-VW-Touareg-pexels-ardit-mbrati-216809103-16646414.jpg", + "5-2-VW-Touareg-pexels-ardit-mbrati-216809103-16646416.jpg", + "5-3-VW-Touareg-pexels-ardit-mbrati-216809103-16646412.jpg" + ], + "Jeep Cherokee granite crystal": [ + "toyota-tundra-1241658_1920.jpg", + "toyota-tundra-1241658_19201.jpg", + "toyota-tundra-1241658_19202.jpg" + ], + "Chevrolet Equinox mosaic black": [ + "KIA-EV6-GT-line edited hyundai-motor-group-ErBFxMkJpKk-unsplash-detail1.jpg", + "KIA-EV6-GT-line edited hyundai-motor-group-ErBFxMkJpKk-unsplash.jpg", + "KIA-EV6-GT-line edited hyundai-motor-group-ErBFxMkJpKk-unsplash2.jpg" + ], + "Hyundai Tucson amazon gray": [ + "Hyundai-Kona-electric-4964667_1920.jpg", + "Hyundai-Kona-electric-4964667_19201.jpg", + "Hyundai-Kona-electric-4964667_19202.jpg" + ], + "Nissan Rogue caspian blue": [ + "Kia-Sportage-2382086_1920.jpg", + "Kia-Sportage-2382086_19201.jpg", + "Kia-Sportage-2382086_19202.jpg" + ], + "Ford Transit Connect frozen white": [ + "VW_Caddy-ollie-walls-jDo2IZm-uFc-unsplash.jpg", + "VW_Caddy-ollie-walls-jDo2IZm-uFc-unsplash1.jpg", + "VW_Caddy-ollie-walls-jDo2IZm-uFc-unsplash2.jpg" + ], + "Ram ProMaster City bright white": [ + "VW-Caddy-daniil-lyusov-fesux3IvcVo-unsplash-2.jpg", + "VW-Caddy-daniil-lyusov-fesux3IvcVo-unsplash-21.jpg", + "VW-Caddy-daniil-lyusov-fesux3IvcVo-unsplash-22.jpg" + ] +} diff --git a/src/app/views/fleet-management/fleet-management-view.component.html b/src/app/views/fleet-management/fleet-management-view.component.html index f80413d2..bd4ddc3f 100644 --- a/src/app/views/fleet-management/fleet-management-view.component.html +++ b/src/app/views/fleet-management/fleet-management-view.component.html @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/app/views/fleet-management/fleet-management-view.component.scss b/src/app/views/fleet-management/fleet-management-view.component.scss index 2ae63e20..188b07b3 100644 --- a/src/app/views/fleet-management/fleet-management-view.component.scss +++ b/src/app/views/fleet-management/fleet-management-view.component.scss @@ -1,12 +1,16 @@ :host { display: block; height: 100%; + min-height: 0; width: 100%; + overflow: hidden; // Needed because of routing animations keeping both views in DOM even after OnDestroy (https://github.com/angular/angular/issues/19742) // This is a fix for a bug with horizontal flickering due display: flex of the container positions each view next to each other // causing their height or width be incorrect (https://github.com/IgniteUI/angular-grid-examples/issues/60) position: absolute; top: 0; + right: 0; + bottom: 0; left: 0; } diff --git a/src/app/views/fleet-management/fleet-management-view.component.ts b/src/app/views/fleet-management/fleet-management-view.component.ts index 77f2c06f..a422c47c 100644 --- a/src/app/views/fleet-management/fleet-management-view.component.ts +++ b/src/app/views/fleet-management/fleet-management-view.component.ts @@ -2,7 +2,6 @@ import { Component } from '@angular/core'; import { AppComponent } from 'projects/fleet-management-grid/src/app/app.component'; @Component({ - standalone: true, selector: 'fleet-management-view', imports: [AppComponent], templateUrl: './fleet-management-view.component.html', diff --git a/src/app/views/home/home.component.html b/src/app/views/home/home.component.html index 16ce1fee..222f7509 100644 --- a/src/app/views/home/home.component.html +++ b/src/app/views/home/home.component.html @@ -1,4 +1,4 @@ -
+
@for (tab of activeTabs; track tab) { diff --git a/src/app/views/home/home.component.scss b/src/app/views/home/home.component.scss index db6475e0..3addd9a4 100644 --- a/src/app/views/home/home.component.scss +++ b/src/app/views/home/home.component.scss @@ -16,6 +16,7 @@ $custom-icon-button-theme: icon-button-theme( .demo-container { width: 100%; height: 100vh; + min-height: 0; display: flex; flex-direction: column; align-items: center; @@ -32,6 +33,7 @@ $custom-icon-button-theme: icon-button-theme( display: flex; position: relative; flex: 1; + min-height: 0; } .tab-container { @@ -218,6 +220,60 @@ $custom-icon-button-theme: icon-button-theme( } } +.demo-container.compact-header .tab-item-container { + height: 48px; +} + +.demo-container.compact-header .tab-item { + padding: 6px 10px; +} + +.demo-container.compact-header .tab-header { + font-size: 13px; + line-height: 16px; +} + +.demo-container.compact-header .current-tab-info { + height: 64px; + padding: 10px 14px; + gap: 1rem; +} + +.demo-container.compact-header .current-tab-info .sample-info { + height: auto; + row-gap: 4px; +} + +.demo-container.compact-header .current-tab-info .tab-header { + font-size: 20px; + line-height: 20px; +} + +.demo-container.compact-header .current-tab-info .tab-description { + font-size: 10px; + line-height: 1.2; +} + +.demo-container.compact-header .current-tab-info .sample-actions { + gap: 12px; + font-size: 13px; +} + +.demo-container.compact-header .current-tab-info .sample-actions .theme-info { + height: 32px; + padding-right: 12px; +} + +.demo-container.compact-header .current-tab-info .sample-actions .action-buttons { + gap: 10px; +} + +.demo-container.compact-header .current-tab-info .sample-actions .action-buttons .custom-button { + min-height: 32px; + padding-block: 4px; + padding-inline: 10px; +} + :fullscreen { width: 100vw; height: 100vh; diff --git a/src/index.html b/src/index.html index 2a0a4525..c1133136 100644 --- a/src/index.html +++ b/src/index.html @@ -1,13 +1,6 @@ - - - GridDemos @@ -17,15 +10,13 @@ + + - - - diff --git a/src/styles.scss b/src/styles.scss index 635ce7bc..1233c2ce 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -1,14 +1,11 @@ @use "igniteui-angular/theming" as *; -.tabs-info-wrapper-element { - width: 100%; - @include core(); - @include typography( - $font-family: $material-typeface, - $type-scale: $material-type-scale - ); - @include theme($default-palette); -} +@include core(); +@include typography( + $font-family: $material-typeface, + $type-scale: $material-type-scale +); +@include theme($default-palette); html { height: 100%;