Integrate HeaderComponent into Staff Playtime view, update layout with full-height styling, and enhance UI consistency.

frontend/src/app/pages/head-mod/staff-pt/staff-pt.component.html

@@ -1,4 +1,10 @@
-<div class="staff-pt-container">
+<div>
+  <app-header [current_page]="'staff-pt'" height="200px" background_image="/public/img/backgrounds/staff.png"
+              [overlay_gradient]="0.5">
+
+  </app-header>
+  <section class="darkmodeSection full-height">
+    <div class="staff-pt-container">
       <div class="week-header">
         <button mat-icon-button (click)="prevWeek()" matTooltip="Previous week" aria-label="Previous week">
           <mat-icon>chevron_left</mat-icon>
@@ -37,4 +43,6 @@
           </tr>
         }
       </table>
+    </div>
+  </section>
 </div>

frontend/src/app/pages/head-mod/staff-pt/staff-pt.component.ts

@@ -5,11 +5,12 @@ import {MatButtonModule} from '@angular/material/button';
 import {MatIconModule} from '@angular/material/icon';
 import {MatTooltipModule} from '@angular/material/tooltip';
 import {SiteService, StaffPlaytime} from '@api';
+import {HeaderComponent} from '@header/header.component';
 
 @Component({
   selector: 'app-staff-pt',
   standalone: true,
-  imports: [CommonModule, MatTableModule, MatButtonModule, MatIconModule, MatTooltipModule, DatePipe],
+  imports: [CommonModule, MatTableModule, MatButtonModule, MatIconModule, MatTooltipModule, DatePipe, HeaderComponent],
   templateUrl: './staff-pt.component.html',
   styleUrl: './staff-pt.component.scss'
 })

frontend/src/styles.scss

@@ -159,6 +159,10 @@ time, mark, audio, video {
   width: 100%;
 }
 
+.full-height {
+  height: 100%;
+}
+
 .centered {
   margin-left: auto;
   margin-right: auto;