Enhanced material design 3 implementation

lib/screens/whereabouts/whereabouts_screen.dart

@@ -12,6 +12,7 @@ import '../../providers/profile_provider.dart';
 import '../../providers/whereabouts_provider.dart';
 import '../../providers/workforce_provider.dart';
 import '../../theme/app_surfaces.dart';
+import '../../widgets/app_page_header.dart';
 import '../../widgets/responsive_body.dart';
 import '../../utils/app_time.dart';
 
@@ -19,12 +20,12 @@ import '../../utils/app_time.dart';
 const _trackedRoles = {'admin', 'dispatcher', 'it_staff'};
 
 /// Role color mapping shared between map pins and legend.
-Color _roleColor(String? role) {
+Color _roleColor(String? role, ColorScheme cs) {
   return switch (role) {
-    'admin' => Colors.blue.shade700,
-    'it_staff' => Colors.green.shade700,
-    'dispatcher' => Colors.orange.shade700,
-    _ => Colors.grey,
+    'admin' => cs.primary,
+    'it_staff' => cs.tertiary,
+    'dispatcher' => cs.secondary,
+    _ => cs.outline,
   };
 }
 
@@ -106,16 +107,11 @@ class _WhereaboutsScreenState extends ConsumerState<WhereaboutsScreen> {
     return ResponsiveBody(
       maxWidth: 1200,
       child: Column(
-        crossAxisAlignment: CrossAxisAlignment.start,
+        crossAxisAlignment: CrossAxisAlignment.stretch,
         children: [
-          Padding(
-            padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
-            child: Text(
-              'Whereabouts',
-              style: Theme.of(
-                context,
-              ).textTheme.titleLarge?.copyWith(fontWeight: FontWeight.w700),
-            ),
+          const AppPageHeader(
+            title: 'Whereabouts',
+            subtitle: 'Live staff positions and active check-ins',
           ),
           // Map
           Expanded(
@@ -182,7 +178,8 @@ class _WhereaboutsMap extends StatelessWidget {
       final profile = profileById[pos.userId];
       final name = profile?.fullName ?? 'Unknown';
       final stale = _isStale(pos.updatedAt);
-      final pinColor = stale ? Colors.grey : _roleColor(profile?.role);
+      final cs = Theme.of(context).colorScheme;
+      final pinColor = stale ? cs.outlineVariant : _roleColor(profile?.role, cs);
       return Marker(
         point: LatLng(pos.lat, pos.lng),
         width: 80,
@@ -419,7 +416,7 @@ class _StaffLegendTile extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final cs = Theme.of(context).colorScheme;
-    final roleColor = _roleColor(profile.role);
+    final roleColor = _roleColor(profile.role, cs);
 
     final hasPosition = position != null;
     final isInPremise = position?.inPremise ?? false;
@@ -436,7 +433,7 @@ class _StaffLegendTile extends StatelessWidget {
 
     final effectiveColor = (isActive || inferredInPremise)
         ? roleColor
-        : Colors.grey.shade400;
+        : cs.outlineVariant;
 
     // Build status label
     final String statusText;