moved client details summary into a separate component

src/angular/hq/src/app/clients/client-details/client-details-summary/client-details-summary.component.html

@@ -0,0 +1,14 @@
+<div>
+  <h1 class="font-rajdhani font-semibold text-3xl">{{client?.name}}</h1>
+
+  <div class="grid grid-flow-col gap-[30px] auto-cols-max pt-3">
+      <div class="text-gray-50">hourly rate: ${{client?.hourlyRate}}</div>
+      <div class="text-gray-50">email: {{client?.billingEmail}}</div>
+      <div class="text-gray-50">official name: {{client?.officialName}}</div>
+  </div>
+  @if(this.apiErrors) {
+    @for (error of this.apiErrors; track $index) {
+    <div class="text-red-700 text-xs leading-normal inline-block">{{ error }}</div>
+    }
+    }
+</div>

src/angular/hq/src/app/clients/client-details/client-details-summary/client-details-summary.component.ts

@@ -0,0 +1,50 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router, RouterLink, RouterLinkActive, RouterModule, RouterOutlet } from '@angular/router';
+import { firstValueFrom, switchMap, of, Observable, catchError, map } from 'rxjs';
+import { HQService } from '../../../services/hq.service';
+import { GetClientRecordV1 } from '../../../models/clients/get-client-v1';
+import { APIError } from '../../../errors/apierror';
+
+@Component({
+  selector: 'hq-client-details-summary',
+  standalone: true,
+  imports: [],
+  templateUrl: './client-details-summary.component.html'
+})
+export class ClientDetailsSummaryComponent implements OnInit {
+    clientId?: string;
+    client?: GetClientRecordV1;
+    apiErrors: string[] = [];
+
+    async ngOnInit(): Promise<void> {
+      this.route.paramMap.pipe(
+        switchMap(params => {
+          this.clientId = params.get('clientId') || undefined;
+          return this.getClient().pipe(
+            catchError(error => {
+              if (error instanceof APIError) {
+                this.apiErrors = error.errors;
+              } else {
+                this.apiErrors = ['An unexpected error has occurred.'];
+              }
+              return of(null);
+            })
+          );
+        })
+      ).subscribe(client => {
+        this.client = client ?? undefined;
+      });
+    }
+    constructor(private hqService: HQService, private router: Router, private route: ActivatedRoute) { }
+
+
+    private getClient(): Observable<GetClientRecordV1> {
+      const request = { "id": this.clientId };
+      return this.hqService.getClientsV1(request).pipe(
+        map(response => response.records[0]),
+        catchError(error => {
+          throw error;
+        })
+      );
+    }
+}

src/angular/hq/src/app/clients/client-details/client-details.component.html

@@ -1,16 +1,5 @@
 <div class="px-5">
-    <h1 class="font-rajdhani font-semibold text-3xl">{{client?.name}}</h1>
-
-    <div class="grid grid-flow-col gap-[30px] auto-cols-max pt-3">
-        <div class="text-gray-50">hourly rate: ${{client?.hourlyRate}}</div>
-        <div class="text-gray-50">email: {{client?.billingEmail}}</div>
-        <div class="text-gray-50">official name: {{client?.officialName}}</div>
-    </div>
-    @if(this.apiErrors) {
-      @for (error of this.apiErrors; track $index) {
-      <div class="text-red-700 text-xs leading-normal inline-block">{{ error }}</div>
-      }
-      }
+<hq-client-details-summary></hq-client-details-summary>
 </div>
 
 <div class="px-5 pt-4">

src/angular/hq/src/app/clients/client-details/client-details.component.ts

@@ -4,11 +4,12 @@ import { firstValueFrom, switchMap, of, Observable, catchError, map } from 'rxjs
 import { HQService } from '../../services/hq.service';
 import { GetClientRecordV1 } from '../../models/clients/get-client-v1';
 import { APIError } from '../../errors/apierror';
+import { ClientDetailsSummaryComponent } from './client-details-summary/client-details-summary.component';
 
 @Component({
   selector: 'hq-client-details',
   standalone: true,
-  imports: [RouterOutlet, RouterLink, RouterLinkActive],
+  imports: [RouterOutlet, RouterLink, RouterLinkActive, ClientDetailsSummaryComponent],
   templateUrl: './client-details.component.html'
 })
 export class ClientDetailsComponent implements OnInit {