Enhanced material design 3 implementation

lib/screens/dashboard/dashboard_screen.dart

@@ -38,6 +38,7 @@ import '../../providers/realtime_controller.dart';
 import 'package:skeletonizer/skeletonizer.dart';
 import '../../theme/app_surfaces.dart';
 import '../../widgets/mono_text.dart';
+import '../../widgets/app_page_header.dart';
 import '../../utils/app_time.dart';
 
 class DashboardMetrics {
@@ -732,20 +733,11 @@ class _DashboardScreenState extends State<DashboardScreen> {
 
             final content = Column(
               mainAxisSize: MainAxisSize.min,
-              crossAxisAlignment: CrossAxisAlignment.start,
+              crossAxisAlignment: CrossAxisAlignment.stretch,
               children: [
-                Padding(
-                  padding: const EdgeInsets.only(top: 16, bottom: 8),
-                  child: Align(
-                    alignment: Alignment.center,
-                    child: Text(
-                      'Dashboard',
-                      textAlign: TextAlign.center,
-                      style: Theme.of(context).textTheme.titleLarge?.copyWith(
-                        fontWeight: FontWeight.w700,
-                      ),
-                    ),
-                  ),
+                const AppPageHeader(
+                  title: 'Dashboard',
+                  subtitle: 'Live metrics and team activity',
                 ),
                 const _DashboardStatusBanner(),
                 ...sections,
@@ -864,12 +856,34 @@ class _DashboardStatusBanner extends ConsumerWidget {
 
     if (bannerState.startsWith('error:')) {
       final errorText = bannerState.substring(6);
+      final cs = Theme.of(context).colorScheme;
       return Padding(
         padding: const EdgeInsets.only(bottom: 12),
-        child: Text(
-          'Dashboard data error: $errorText',
-          style: Theme.of(context).textTheme.bodySmall?.copyWith(
-            color: Theme.of(context).colorScheme.error,
+        child: Material(
+          color: cs.errorContainer,
+          borderRadius: BorderRadius.circular(12),
+          child: Padding(
+            padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 10),
+            child: Row(
+              children: [
+                Icon(
+                  Icons.warning_amber_rounded,
+                  size: 18,
+                  color: cs.onErrorContainer,
+                ),
+                const SizedBox(width: 10),
+                Expanded(
+                  child: Text(
+                    errorText,
+                    style: Theme.of(context).textTheme.bodySmall?.copyWith(
+                      color: cs.onErrorContainer,
+                    ),
+                    maxLines: 2,
+                    overflow: TextOverflow.ellipsis,
+                  ),
+                ),
+              ],
+            ),
           ),
         ),
       );