MT-work-fronted/src/app/modules/human-resource/human-resource-details/human-resource-details.component.html

<section class="human-details" fxLayout="column" fxLayoutAlign="start stretch">
  <main>
    <h1 fxLayout="row" fxLayoutAlign="start center" class="gap-10">
      <img src="../../../../assets/images/arrow.svg" alt="" title="" />
      <span>Details</span>
    </h1>
  </main>

  <div
    class="human-details__avatar"
    fxLayout="row"
    fxLayoutAlign="space-between center"
  >
    <div fxLayout="row" fxLayoutAlign="start center" class="gap-10">
      <img src="../../../../assets/images/avatar.png" alt="" title="" />
      <div>
        <p>Mai Ghoneim</p>
        <span>Senior UI/UX Designer</span>
        <span>User@gmail.comx</span>
      </div>
    </div>
    <button>Message</button>
  </div>
  <mat-tab-group>
    <mat-tab label="Contract"> <app-contract></app-contract> </mat-tab>
    <mat-tab label="Salary"> <app-salary></app-salary> </mat-tab>
    <mat-tab label="Invoice Date">
      <app-invoice-date></app-invoice-date>
    </mat-tab>
    <mat-tab label="Teams"> <app-teams></app-teams> </mat-tab>
    <mat-tab label="Vacation Days">
      <app-vacation-days></app-vacation-days>
    </mat-tab>
    <mat-tab label="Medical Insurance">
      <app-medical-insurance></app-medical-insurance>
    </mat-tab>
  </mat-tab-group>
</section>