From 710771f5f72761a42164fda6cdc6ad14180f25d0 Mon Sep 17 00:00:00 2001
From: akastijn <akastijn@alttd.com>
Date: Sun, 2 Nov 2025 22:48:27 +0100
Subject: [PATCH] Integrate `HeaderComponent` into Staff Playtime view, update
 layout with full-height styling, and enhance UI consistency.

---
 .../head-mod/staff-pt/staff-pt.component.html | 72 ++++++++++---------
 .../head-mod/staff-pt/staff-pt.component.ts   |  3 +-
 frontend/src/styles.scss                      |  4 ++
 3 files changed, 46 insertions(+), 33 deletions(-)

diff --git a/frontend/src/app/pages/head-mod/staff-pt/staff-pt.component.html b/frontend/src/app/pages/head-mod/staff-pt/staff-pt.component.html
index c6626fe..bb3ae52 100644
--- a/frontend/src/app/pages/head-mod/staff-pt/staff-pt.component.html
+++ b/frontend/src/app/pages/head-mod/staff-pt/staff-pt.component.html
@@ -1,40 +1,48 @@
-<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>
-    </button>
+<div>
+  <app-header [current_page]="'staff-pt'" height="200px" background_image="/public/img/backgrounds/staff.png"
+              [overlay_gradient]="0.5">
 
-    <div class="week-title">{{ weekLabel() }}</div>
+  </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>
+        </button>
 
-    <button mat-icon-button (click)="nextWeek()" [disabled]="!canGoNextWeek()"
-            matTooltip="Next week" aria-label="Next week">
-      <mat-icon>chevron_right</mat-icon>
-    </button>
-  </div>
+        <div class="week-title">{{ weekLabel() }}</div>
 
-  <table mat-table [dataSource]="staffPt()" class="mat-elevation-z2 full-width">
-    <ng-container matColumnDef="staff_member">
-      <th mat-header-cell *matHeaderCellDef> Staff Member</th>
-      <td mat-cell *matCellDef="let row"> {{ row.staff_member }}</td>
-    </ng-container>
+        <button mat-icon-button (click)="nextWeek()" [disabled]="!canGoNextWeek()"
+                matTooltip="Next week" aria-label="Next week">
+          <mat-icon>chevron_right</mat-icon>
+        </button>
+      </div>
 
-    <ng-container matColumnDef="playtime">
-      <th mat-header-cell *matHeaderCellDef> Playtime (h:mm)</th>
-      <td mat-cell *matCellDef="let row"> {{ minutesToHm(row.playtime) }}</td>
-    </ng-container>
+      <table mat-table [dataSource]="staffPt()" class="mat-elevation-z2 full-width">
+        <ng-container matColumnDef="staff_member">
+          <th mat-header-cell *matHeaderCellDef> Staff Member</th>
+          <td mat-cell *matCellDef="let row"> {{ row.staff_member }}</td>
+        </ng-container>
 
-    <ng-container matColumnDef="last_played">
-      <th mat-header-cell *matHeaderCellDef> Last Played</th>
-      <td mat-cell *matCellDef="let row"> {{ row.last_played | date:'medium' }}</td>
-    </ng-container>
+        <ng-container matColumnDef="playtime">
+          <th mat-header-cell *matHeaderCellDef> Playtime (h:mm)</th>
+          <td mat-cell *matCellDef="let row"> {{ minutesToHm(row.playtime) }}</td>
+        </ng-container>
 
-    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+        <ng-container matColumnDef="last_played">
+          <th mat-header-cell *matHeaderCellDef> Last Played</th>
+          <td mat-cell *matCellDef="let row"> {{ row.last_played | date:'medium' }}</td>
+        </ng-container>
 
-    @if (!staffPt()?.length) {
-      <tr class="no-data">
-        <td colspan="3">No data for this week.</td>
-      </tr>
-    }
-  </table>
+        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+
+        @if (!staffPt()?.length) {
+          <tr class="no-data">
+            <td colspan="3">No data for this week.</td>
+          </tr>
+        }
+      </table>
+    </div>
+  </section>
 </div>
diff --git a/frontend/src/app/pages/head-mod/staff-pt/staff-pt.component.ts b/frontend/src/app/pages/head-mod/staff-pt/staff-pt.component.ts
index 97cb66a..9bbefb8 100644
--- a/frontend/src/app/pages/head-mod/staff-pt/staff-pt.component.ts
+++ b/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'
 })
diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss
index 92f7fb1..3cfd2b9 100644
--- a/frontend/src/styles.scss
+++ b/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;