feat: refactor components to use standalone modules and improve change detection

- Updated CopilotComponent, TableCopilotUsageComponent, and other components to use standalone modules.
- Added NoopAnimationsModule to testing modules for smoother tests.
- Implemented ChangeDetectionStrategy.OnPush for better performance.
- Introduced new pipes: DurationPipe and FormatFileSizePipe for formatting data.
- Enhanced UsageComponent to handle file uploads and data parsing more efficiently.
- Removed unnecessary MaterialModule and directly imported Material components in relevant modules.
- Updated usage of observables and improved error handling in service methods.
- Cleaned up HTML templates by removing unnecessary elements and improving structure.

Author: austenstone

.playwright-mcp/console-2026-03-25T00-51-17-799Z.log

@@ -0,0 +1,2 @@
+[    1404ms] [WARNING] Highcharts warning: Consider including the "accessibility.js" module to make your chart more usable for people with disabilities. Set the "accessibility.enabled" option to false to remove this warning. See https://www.highcharts.com/docs/accessibility/accessibility-module. @ http://localhost:4200/@fs/C:/Users/auste/source/github-actions-usage-report/.angular/cache/19.2.14/github-actions-usage-report/vite/deps/highcharts.js?v=c024a960:64
+[   77652ms] [WARNING] NG0956: The configured tracking expression (track by identity) caused re-creation of the entire collection of size 6. This is an expensive operation requiring destruction and subsequent creation of DOM nodes, directives, components etc. Please review the "track expression" and make sure that it uniquely identifies items in a collection. Find more at https://angular.dev/errors/NG0956 @ http://localhost:4200/@fs/C:/Users/auste/source/github-actions-usage-report/.angular/cache/19.2.14/github-actions-usage-report/vite/deps/chunk-MS4FAMMM.js?v=429c1b72:18749

.playwright-mcp/page-2026-03-25T00-51-22-855Z.png

@@ -1,20 +1,26 @@
-import { TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { AppComponent } from './app.component';
-import { UsageComponent } from './components/usage/usage.component';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { provideHttpClientTesting } from '@angular/common/http/testing';
+import { provideHttpClient } from '@angular/common/http';
+import { provideNativeDateAdapter } from '@angular/material/core';
 
 describe('AppComponent', () => {
+  let component: AppComponent;
+  let fixture: ComponentFixture<AppComponent>;
+
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [
-        AppComponent,
-        UsageComponent
-      ],
+      imports: [AppComponent, NoopAnimationsModule],
+      providers: [provideHttpClient(), provideHttpClientTesting(), provideNativeDateAdapter()]
     }).compileComponents();
+
+    fixture = TestBed.createComponent(AppComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
   });
 
-  it('should create the app', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.componentInstance;
-    expect(app).toBeTruthy();
+  it('should create', () => {
+    expect(component).toBeTruthy();
   });
 });

src/app/app.component.spec.ts

@@ -0,0 +1,13 @@
+import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
+import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
+import { provideNativeDateAdapter } from '@angular/material/core';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideZoneChangeDetection({ eventCoalescing: true }),
+    provideHttpClient(withInterceptorsFromDi()),
+    provideAnimationsAsync(),
+    provideNativeDateAdapter(),
+  ],
+};

src/app/app.component.ts

@@ -1,9 +1,7 @@
 <app-table-workflow-usage [data]="data" [currency]="currency"></app-table-workflow-usage>
 <app-chart-line-usage-daily [data]="data" [currency]="currency"></app-chart-line-usage-daily>
-<!-- <app-chart-line-usage-time [data]="data" [currency]="currency"></app-chart-line-usage-time> -->
-<div style="display: flex; flex: 1 1 0px; flex-wrap: wrap; align-items: center; justify-content: center;">
+<div class="pie-charts-row">
   <app-chart-pie-user [data]="data" [currency]="currency"></app-chart-pie-user>
   <app-chart-pie-sku [data]="data" [currency]="currency"></app-chart-pie-sku>
 </div>
-<app-chart-bar-top-time [data]="data" [currency]="currency"></app-chart-bar-top-time>
-<!-- <app-usage-table [data]="data"></app-usage-table> -->
+<app-chart-bar-top-time [data]="data" [currency]="currency"></app-chart-bar-top-time>

src/app/app.config.ts

@@ -0,0 +1,7 @@
+.pie-charts-row {
+  display: flex;
+  flex: 1 1 0px;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+}

src/app/app.module.ts

@@ -1,19 +1,20 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-
 import { ActionsComponent } from './actions.component';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 
 describe('ActionsComponent', () => {
   let component: ActionsComponent;
   let fixture: ComponentFixture<ActionsComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [ActionsComponent]
-    })
-    .compileComponents();
-    
+      imports: [ActionsComponent, NoopAnimationsModule]
+    }).compileComponents();
+
     fixture = TestBed.createComponent(ActionsComponent);
     component = fixture.componentInstance;
+    component.data = [];
+    component.currency = 'cost';
     fixture.detectChanges();
   });
 

src/app/components/usage/actions/actions.component.html

@@ -1,11 +1,24 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
 import { CustomUsageReportLine, UsageReportService } from 'src/app/usage-report.service';
+import { TableWorkflowUsageComponent } from './table-workflow-usage/table-workflow-usage.component';
+import { ChartLineUsageDailyComponent } from './charts/chart-line-usage-daily/chart-line-usage-daily.component';
+import { ChartPieUserComponent } from './charts/chart-pie-user/chart-pie-user.component';
+import { ChartPieSkuComponent } from './charts/chart-pie-sku/chart-pie-sku.component';
+import { ChartBarTopTimeComponent } from './charts/chart-bar-top-time/chart-bar-top-time.component';
 
 @Component({
     selector: 'app-actions',
     templateUrl: './actions.component.html',
     styleUrl: './actions.component.scss',
-    standalone: false
+    standalone: true,
+    imports: [
+      TableWorkflowUsageComponent,
+      ChartLineUsageDailyComponent,
+      ChartPieUserComponent,
+      ChartPieSkuComponent,
+      ChartBarTopTimeComponent,
+    ],
+    changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ActionsComponent implements OnInit {
   @Input() data!: CustomUsageReportLine[];
@@ -16,7 +29,7 @@ export class ActionsComponent implements OnInit {
   constructor(
     public usageReportService: UsageReportService,
   ) { }
-  
+
   ngOnInit() {
     this.usageReportService.getActionsTotalMinutes().subscribe((totalMinutes) => {
       this.totalMinutes = totalMinutes;
@@ -25,5 +38,4 @@ export class ActionsComponent implements OnInit {
       this.totalCost = totalCost;
     });
   }
-
 }