Add sorting functionality to staff playtime table and include roles in UI and database mapping

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

@@ -4,13 +4,15 @@ import {MatTableModule} from '@angular/material/table';
 import {MatButtonModule} from '@angular/material/button';
 import {MatIconModule} from '@angular/material/icon';
 import {MatTooltipModule} from '@angular/material/tooltip';
+import {MatSortModule} from '@angular/material/sort';
 import {SiteService, StaffPlaytime} from '@api';
+import {Sort} from '@angular/material/sort';
 import {HeaderComponent} from '@header/header.component';
 
 @Component({
   selector: 'app-staff-pt',
   standalone: true,
-  imports: [CommonModule, MatTableModule, MatButtonModule, MatIconModule, MatTooltipModule, HeaderComponent],
+  imports: [CommonModule, MatTableModule, MatButtonModule, MatIconModule, MatTooltipModule, MatSortModule, HeaderComponent],
   templateUrl: './staff-pt.component.html',
   styleUrl: './staff-pt.component.scss'
 })
@@ -18,13 +20,31 @@ export class StaffPtComponent implements OnInit {
   siteService = inject(SiteService);
 
   staffPt = signal<StaffPlaytime[]>([]);
+  sort = signal<Sort>({active: 'playtime', direction: 'desc'} as Sort);
+  sortedStaffPt = computed<StaffPlaytime[]>(() => {
+    const data = [...this.staffPt()];
+    const {active, direction} = this.sort();
+    if (!direction || !active) return data;
+    const dir = direction === 'asc' ? 1 : -1;
+    return data.sort((a, b) => {
+      switch (active) {
+        case 'staff_member':
+          return a.staff_member.localeCompare(b.staff_member) * dir;
+        case 'role':
+          return a.role.localeCompare(b.role) * dir;
+        case 'playtime':
+        default:
+          return ((a.playtime ?? 0) - (b.playtime ?? 0)) * dir;
+      }
+    });
+  });
 
   weekStart = signal<Date>(this.getStartOfWeek(new Date()));
   weekEnd = computed(() => this.getEndOfWeek(this.weekStart()));
 
   todayStart = signal<Date>(this.startOfDay(new Date()));
 
-  displayedColumns = ['staff_member', 'playtime'];
+  displayedColumns = ['staff_member', 'playtime', 'role'];
 
   ngOnInit(): void {
     this.loadCurrentWeek();