feat(*): update hr, financial and fleet samples by igdmdimitrov · Pull Request #164 · IgniteUI/angular-grid-examples

igdmdimitrov · 2026-08-08T06:23:35Z

No description provided.

Copilot

Pull request overview

Updates the HR Portal, Finance, and Fleet Management sample apps with refreshed layouts/themes, new datasets/assets, and adoption of Grid Lite/web components where applicable.

Changes:

Apply global Ignite UI theming/typography and update fonts/HTML shell resources.
Refactor HR and Finance samples to use Grid Lite / signals-based view models and updated styling.
Overhaul Fleet Management sample UI/logic, add car image catalogs, and adjust layout constraints for routing/fullscreen.

Reviewed changes

Copilot reviewed 28 out of 29 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
src/styles.scss	Moves Ignite UI theming/typography mixins to global scope.
src/index.html	Removes GTM and adds additional Google Fonts.
src/app/views/home/home.component.scss	Adjusts flex layout sizing constraints (min-height).
src/app/views/home/home.component.html	Adds route-based `compact-header` class toggle.
src/app/views/fleet-management/fleet-management-view.component.ts	Updates Fleet Management view component metadata (standalone/imports).
src/app/views/fleet-management/fleet-management-view.component.scss	Tightens host sizing/overflow to prevent layout issues.
src/app/views/fleet-management/fleet-management-view.component.html	Adds `ngSkipHydration` to fleet app root element.
public/assets/car_images.json	Adds car image catalog at root public assets.
projects/hr-portal/src/styles.scss	Adds Ignite UI theming/typography for HR Portal project.
projects/hr-portal/src/main.ts	Registers Grid Lite + web components prior to bootstrapping.
projects/hr-portal/src/app/hr-portal/hr-portal.component.ts	Replaces TreeGrid-based HR UI with Grid Lite + lit cell templates.
projects/hr-portal/src/app/hr-portal/hr-portal.component.scss	New HR Portal styling using CSS variables and Grid Lite parts.
projects/hr-portal/src/app/hr-portal/hr-portal.component.html	New HR Portal Grid Lite markup and columns.
projects/hr-portal/src/app/app.component.scss	Removes theming mixins (moved to project styles).
projects/fleet-management-grid/src/styles.scss	Adjusts global padding for Fleet Management project.
projects/fleet-management-grid/src/index.html	Adds DM Sans font link for Fleet Management project.
projects/fleet-management-grid/src/assets/car_images.json	Extends car image mapping entries.
projects/fleet-management-grid/src/app/fleet-management-grid/fleet-management-grid.component.ts	Major refactor: signals/computed data model, image catalog loading, new fleet detail/metrics helpers.
projects/fleet-management-grid/src/app/fleet-management-grid/fleet-management-grid.component.scss	New Fleet Management dark theme + component styling.
projects/fleet-management-grid/src/app/fleet-management-grid/fleet-management-grid.component.html	New Fleet Management UI: chips filters, master grid, detail tabs, charts/tables.
projects/fleet-management-grid/src/app/app.component.scss	Removes theming mixins and ensures host fills height.
projects/fleet-management-grid/public/assets/car_images.json	Adds car image catalog to project public assets.
projects/finance-grid/src/styles.scss	Adds Ignite UI theming/typography for Finance project.
projects/finance-grid/src/app/finance-grid/finance-grid.component.ts	Refactors Finance grid to signal-based in-memory dataset + export exclusions + sparkline trends.
projects/finance-grid/src/app/finance-grid/finance-grid.component.scss	New Finance layout/theme styling and toolbar/search UI.
projects/finance-grid/src/app/finance-grid/finance-grid.component.html	New Finance UI layout, combined value cells, sparklines, and allocation visualization.
projects/finance-grid/src/app/app.component.scss	Removes theming mixins and ensures host fills height.
package.json	Adds `igniteui-grid-lite` dependency.
package-lock.json	Locks new dependency tree (including nested webcomponents version).

Suppressed comments (1)

src/app/views/fleet-management/fleet-management-view.component.ts:8

FleetManagementViewComponent uses the imports field in the @Component metadata, which requires a standalone component. With standalone: true removed, Angular compilation will fail (and routing in app.routes.ts relies on this component directly).

@Component({
  selector: 'fleet-management-view',
  imports: [AppComponent],
  templateUrl: './fleet-management-view.component.html',
  styleUrl: './fleet-management-view.component.scss',

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

+    <igx-column field="netProfit" header="Total Revenue" [sortable]="true" [filterable]="false" minWidth="240px" [dataType]="'number'">
+      <ng-template igxCell let-cell="cell">
+        <div class="net-profit-combined-cell">
+          <igx-badge class="finance-value-badge" [type]="vm.badgeType(cell.row.data.netProfit)" [value]="vm.badgeLabel(cell.row.data.netProfit)"></igx-badge>
+          <igx-badge class="finance-delta-badge" [type]="vm.badgeType(cell.row.data.netProfitPct)" [value]="vm.badgeLabel(cell.row.data.netProfitPct)"></igx-badge>
        </div>
+      </ng-template>
+    </igx-column>


+  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);
+  }


+    { 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' } },


    "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",


  <link
      href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet"
  />
+  <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Titillium+Web:300,400,600,700" rel="stylesheet">


dobromirts · 2026-08-10T08:32:16Z

@@ -0,0 +1,257 @@
+{


This file appears to be no longer in use. Before this PR it was consumed via import CAR_IMAGES from '../../assets/car_images.json' (compile-time import), but the new FleetManagementGridComponent fetches car images at runtime via fetch('/assets/car_images.json') instead and angular.json's asset glob for this project only ever pulled from projects/fleet-management-grid/public, not src/assets. So the 75 new entries added here won't reach the running app. Can we delete this file and keep projects/fleet-management-grid/public/assets/car_images.json as the single source?

dobromirts · 2026-08-10T08:32:47Z

@@ -0,0 +1,257 @@
+{


Is this needed? angular.json's root project already merges projects/fleet-management-grid/public/** into the shell's build output (same target path /assets/car_images.json), so this looks like a duplicate of projects/fleet-management-grid/public/assets/car_images.json rather than something new.

dobromirts · 2026-08-10T08:34:13Z

 <html lang="en">
 <head>
-  <!-- Google Tag Manager -->
-  <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':


is there a reason to remove the GTM?

dobromirts · 2026-08-10T08:52:54Z

The samples toolbar is shrinekd based on the prod one -

and different from the one Andy has , not sure what type of toolbar and styling we should have -

dobromirts · 2026-08-10T09:05:15Z

Sample styles are different trough the apps -

dobromirts · 2026-08-10T09:10:55Z

Running npm run start was causing - SRR vite error -

Suggestion -

Or event better these registration to be part only in main.ts

dobromirts · 2026-08-10T09:13:03Z

column names in show/hide grid are not visible -

the same applies for

and

dobromirts · 2026-08-10T09:16:21Z

Financial sample issue - grid hight is increasing after reload

dobromirts · 2026-08-10T09:17:40Z

Financial sample: Different styles and lower data record compared to the poc sample from here - https://github.com/andiesm813/igniteui-marketing-samples

Current version:

dobromirts · 2026-08-10T09:20:15Z

Should we update the Sales Dashboard sample too?

dobromirts · 2026-08-10T09:22:15Z

Different styles and lower data record on HR sample - (Org chart) -

feat(*): update hr, financial and fleet samples

c881947

dobromirts requested a lite review from Copilot August 10, 2026 07:35

Copilot started reviewing on behalf of dobromirts August 10, 2026 07:36 View session

Copilot AI reviewed Aug 10, 2026

View reviewed changes

dobromirts reviewed Aug 10, 2026

View reviewed changes

radomirchev assigned radomirchev and ChronosSF and unassigned radomirchev Aug 10, 2026

Navigation Menu

Uh oh!

feat(*): update hr, financial and fleet samples - #164

feat(*): update hr, financial and fleet samples#164
igdmdimitrov wants to merge 1 commit into
vnextfrom
dmdimitrov/update-hr-financial-fleet-samples

igdmdimitrov commented Aug 8, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

dobromirts Aug 10, 2026

Uh oh!

dobromirts Aug 10, 2026

Uh oh!

dobromirts Aug 10, 2026

Uh oh!

dobromirts commented Aug 10, 2026 •

edited

Loading

Uh oh!

dobromirts commented Aug 10, 2026

Uh oh!

dobromirts commented Aug 10, 2026 •

edited

Loading

Uh oh!

dobromirts commented Aug 10, 2026

Uh oh!

dobromirts commented Aug 10, 2026

Uh oh!

dobromirts commented Aug 10, 2026

Uh oh!

dobromirts commented Aug 10, 2026

Uh oh!

dobromirts commented Aug 10, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Uh oh!

Conversation

igdmdimitrov commented Aug 8, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

dobromirts Aug 10, 2026

Choose a reason for hiding this comment

Uh oh!

dobromirts Aug 10, 2026

Choose a reason for hiding this comment

Uh oh!

dobromirts Aug 10, 2026

Choose a reason for hiding this comment

Uh oh!

dobromirts commented Aug 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

dobromirts commented Aug 10, 2026

Uh oh!

dobromirts commented Aug 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

dobromirts commented Aug 10, 2026

Uh oh!

dobromirts commented Aug 10, 2026

Uh oh!

dobromirts commented Aug 10, 2026

Uh oh!

dobromirts commented Aug 10, 2026

Uh oh!

dobromirts commented Aug 10, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

dobromirts commented Aug 10, 2026 •

edited

Loading

dobromirts commented Aug 10, 2026 •

edited

Loading