UI Phase 2 (L4): ISR status-pill consistency + shared status-kind mapper

The IT Service Requests list tile still used the legacy StatusPill (violet
"DRAFT"); make it semantic like the detail header. Extract the ISR status ->
StatusKind mapping into a shared helper so list and detail stay in sync.

- New isr_status_kind.dart (public isrStatusKind); removed the private duplicate
  from the detail screen.
- _RequestTile now uses StatusPill.kind(isrStatusKind(status), ...).

(The request cards were already content-dense; no layout change needed.)
Verified: flutter analyze lib clean; flutter build web green.

Co-Authored-By: claude-flow <ruv@ruv.net>

lib/screens/it_service_requests/isr_status_kind.dart

@@ -0,0 +1,16 @@
+import '../../models/it_service_request.model.dart';
+import '../../theme/app_status_colors.dart';
+
+/// Maps an IT service request status to a semantic [StatusKind] so its color
+/// carries meaning consistently across the list and detail screens
+/// (amber=pending approval, grey=scheduled, blue=in progress, green=completed,
+/// grey=cancelled).
+StatusKind isrStatusKind(String status) => switch (status) {
+  ItServiceRequestStatus.pendingApproval => StatusKind.warning,
+  ItServiceRequestStatus.scheduled => StatusKind.neutral,
+  ItServiceRequestStatus.inProgress => StatusKind.info,
+  ItServiceRequestStatus.inProgressDryRun => StatusKind.info,
+  ItServiceRequestStatus.completed => StatusKind.success,
+  ItServiceRequestStatus.cancelled => StatusKind.neutral,
+  _ => StatusKind.neutral,
+};

lib/screens/it_service_requests/it_service_request_detail_screen.dart

@@ -31,6 +31,7 @@ import '../../widgets/mono_text.dart';
 import '../../widgets/responsive_body.dart';
 import '../../theme/app_status_colors.dart';
 import '../../widgets/status_pill.dart';
+import 'isr_status_kind.dart';
 import 'it_service_request_pdf.dart';
 
 class ItServiceRequestDetailScreen extends ConsumerStatefulWidget {
@@ -557,7 +558,7 @@ class _ItServiceRequestDetailScreenState
                   MonoText(request.requestNumber!),
                 const SizedBox(width: 12),
                 StatusPill.kind(
-                  _isrStatusKind(request.status),
+                  isrStatusKind(request.status),
                   label: ItServiceRequestStatus.label(request.status),
                 ),
                 const Spacer(),
@@ -2246,15 +2247,3 @@ class _EvidenceSectionState extends ConsumerState<_EvidenceSection> {
   }
 }
 
-/// Maps an IT service request status to a semantic [StatusKind]
-/// (amber=pending approval, blue=scheduled/in-progress, green=completed,
-/// grey=cancelled).
-StatusKind _isrStatusKind(String status) => switch (status) {
-  ItServiceRequestStatus.pendingApproval => StatusKind.warning,
-  ItServiceRequestStatus.scheduled => StatusKind.info,
-  ItServiceRequestStatus.inProgress => StatusKind.info,
-  ItServiceRequestStatus.inProgressDryRun => StatusKind.info,
-  ItServiceRequestStatus.completed => StatusKind.success,
-  ItServiceRequestStatus.cancelled => StatusKind.neutral,
-  _ => StatusKind.neutral,
-};

lib/screens/it_service_requests/it_service_requests_list_screen.dart

@@ -19,6 +19,7 @@ import '../../utils/app_time.dart';
 import '../../utils/snackbar.dart';
 import '../../theme/app_status_colors.dart';
 import '../../widgets/app_status_summary.dart';
+import 'isr_status_kind.dart';
 import '../../widgets/m3_card.dart';
 import '../../widgets/mono_text.dart';
 import '../../widgets/reconnect_overlay.dart';
@@ -669,7 +670,10 @@ class _RequestTile extends StatelessWidget {
                 if (request.requestNumber != null)
                   MonoText(request.requestNumber!),
                 const Spacer(),
-                StatusPill(label: ItServiceRequestStatus.label(request.status)),
+                StatusPill.kind(
+                  isrStatusKind(request.status),
+                  label: ItServiceRequestStatus.label(request.status),
+                ),
               ],
             ),
             const SizedBox(height: 8),

lib/screens/reports/widgets/report_card_wrapper.dart

@@ -1,6 +1,8 @@
 import 'package:flutter/material.dart';
 import 'package:skeletonizer/skeletonizer.dart';
 
+import '../../../theme/app_surfaces.dart';
+
 /// Wraps each report chart widget in a themed Card with a title, loading
 /// skeleton and error state handling. Exposes a [GlobalKey] on the inner
 /// [RepaintBoundary] so the PDF exporter can capture the rendered chart
@@ -74,15 +76,25 @@ class ReportCardWrapper extends StatelessWidget {
       body = child;
     }
 
+    final radius = AppSurfaces.of(context).cardRadius;
+    final isDark = colors.brightness == Brightness.dark;
+
     final cardContent = Column(
       crossAxisAlignment: CrossAxisAlignment.start,
       mainAxisSize: MainAxisSize.min,
       children: [
         Padding(
-          padding: const EdgeInsets.fromLTRB(16, 14, 16, 4),
+          padding: const EdgeInsets.fromLTRB(16, 12, 16, 10),
-          child: Text(title, style: text.titleSmall),
+          child: Text(
+            title.toUpperCase(),
+            style: text.labelMedium?.copyWith(
+              fontWeight: FontWeight.w700,
+              letterSpacing: 0.6,
+              color: colors.onSurfaceVariant,
+            ),
+          ),
         ),
-        const Divider(height: 1),
+        Divider(height: 1, color: colors.outlineVariant),
         Padding(
           padding: const EdgeInsets.all(16),
           child: height != null ? SizedBox(height: height, child: body) : body,
@@ -93,8 +105,12 @@ class ReportCardWrapper extends StatelessWidget {
     final card = Card(
       elevation: 0,
       shadowColor: Colors.transparent,
-      color: colors.surfaceContainerLow,
+      surfaceTintColor: Colors.transparent,
-      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)),
+      color: isDark ? colors.surfaceContainer : colors.surfaceContainerLowest,
+      shape: RoundedRectangleBorder(
+        borderRadius: BorderRadius.circular(radius),
+        side: BorderSide(color: colors.outlineVariant),
+      ),
       child: cardContent,
     );
 

lib/screens/reports/widgets/request_distribution_charts.dart

@@ -77,10 +77,11 @@ class _RequestTypeChartState extends ConsumerState<RequestTypeChart> {
     return ReportCardWrapper(
       title: 'Request Type Distribution',
       repaintBoundaryKey: widget.repaintKey,
-      height: 220,
+      height: 180,
       child: Row(
         children: [
-          Expanded(
+          SizedBox(
+            width: 150,
             child: PieChart(
               PieChartData(
                 pieTouchData: PieTouchData(
@@ -116,22 +117,24 @@ class _RequestTypeChartState extends ConsumerState<RequestTypeChart> {
               ),
             ),
           ),
-          const SizedBox(width: 12),
+          const SizedBox(width: 16),
-          Column(
+          Expanded(
-            mainAxisAlignment: MainAxisAlignment.center,
+            child: Column(
-            crossAxisAlignment: CrossAxisAlignment.start,
+              mainAxisAlignment: MainAxisAlignment.center,
-            children: data.asMap().entries.map((entry) {
+              crossAxisAlignment: CrossAxisAlignment.start,
-              final i = entry.key;
+              children: data.asMap().entries.map((entry) {
-              final e = entry.value;
+                final i = entry.key;
-              final isTouched = i == _touchedIndex;
+                final e = entry.value;
-              return _HoverLegendItem(
+                final isTouched = i == _touchedIndex;
-                color: colorFor(i, e.name),
+                return _HoverLegendItem(
-                label: e.name,
+                  color: colorFor(i, e.name),
-                value:
+                  label: e.name,
-                    '${e.count} (${(e.count / total * 100).toStringAsFixed(0)}%)',
+                  value:
-                isTouched: isTouched,
+                      '${e.count} (${(e.count / total * 100).toStringAsFixed(0)}%)',
-              );
+                  isTouched: isTouched,
-            }).toList(),
+                );
+              }).toList(),
+            ),
           ),
         ],
       ),
@@ -208,10 +211,11 @@ class _RequestCategoryChartState extends ConsumerState<RequestCategoryChart> {
     return ReportCardWrapper(
       title: 'Request Category Distribution',
       repaintBoundaryKey: widget.repaintKey,
-      height: 220,
+      height: 180,
       child: Row(
         children: [
-          Expanded(
+          SizedBox(
+            width: 150,
             child: PieChart(
               PieChartData(
                 pieTouchData: PieTouchData(
@@ -247,22 +251,24 @@ class _RequestCategoryChartState extends ConsumerState<RequestCategoryChart> {
               ),
             ),
           ),
-          const SizedBox(width: 12),
+          const SizedBox(width: 16),
-          Column(
+          Expanded(
-            mainAxisAlignment: MainAxisAlignment.center,
+            child: Column(
-            crossAxisAlignment: CrossAxisAlignment.start,
+              mainAxisAlignment: MainAxisAlignment.center,
-            children: data.asMap().entries.map((entry) {
+              crossAxisAlignment: CrossAxisAlignment.start,
-              final i = entry.key;
+              children: data.asMap().entries.map((entry) {
-              final e = entry.value;
+                final i = entry.key;
-              final isTouched = i == _touchedIndex;
+                final e = entry.value;
-              return _HoverLegendItem(
+                final isTouched = i == _touchedIndex;
-                color: colorFor(i, e.name),
+                return _HoverLegendItem(
-                label: e.name,
+                  color: colorFor(i, e.name),
-                value:
+                  label: e.name,
-                    '${e.count} (${(e.count / total * 100).toStringAsFixed(0)}%)',
+                  value:
-                isTouched: isTouched,
+                      '${e.count} (${(e.count / total * 100).toStringAsFixed(0)}%)',
-              );
+                  isTouched: isTouched,
-            }).toList(),
+                );
+              }).toList(),
+            ),
           ),
         ],
       ),

lib/screens/reports/widgets/status_charts.dart

@@ -52,10 +52,11 @@ class _TicketsByStatusChartState extends ConsumerState<TicketsByStatusChart> {
         return ReportCardWrapper(
           title: 'Tickets by Status',
           repaintBoundaryKey: widget.repaintKey,
-          height: 220,
+          height: 180,
           child: Row(
             children: [
-              Expanded(
+              SizedBox(
+                width: 150,
                 child: PieChart(
                   PieChartData(
                     pieTouchData: PieTouchData(
@@ -92,22 +93,24 @@ class _TicketsByStatusChartState extends ConsumerState<TicketsByStatusChart> {
                   ),
                 ),
               ),
-              const SizedBox(width: 12),
+              const SizedBox(width: 16),
-              Column(
+              Expanded(
-                mainAxisAlignment: MainAxisAlignment.center,
+                child: Column(
-                crossAxisAlignment: CrossAxisAlignment.start,
+                  mainAxisAlignment: MainAxisAlignment.center,
-                children: data.asMap().entries.map((entry) {
+                  crossAxisAlignment: CrossAxisAlignment.start,
-                  final i = entry.key;
+                  children: data.asMap().entries.map((entry) {
-                  final e = entry.value;
+                    final i = entry.key;
-                  final isTouched = i == _touchedIndex;
+                    final e = entry.value;
-                  return _LegendItem(
+                    final isTouched = i == _touchedIndex;
-                    color: _ticketStatusColor(context, e.status),
+                    return _LegendItem(
-                    label: _capitalize(e.status),
+                      color: _ticketStatusColor(context, e.status),
-                    value:
+                      label: _capitalize(e.status),
-                        '${e.count} (${(e.count / total * 100).toStringAsFixed(0)}%)',
+                      value:
-                    isTouched: isTouched,
+                          '${e.count} (${(e.count / total * 100).toStringAsFixed(0)}%)',
-                  );
+                      isTouched: isTouched,
-                }).toList(),
+                    );
+                  }).toList(),
+                ),
               ),
             ],
           ),
@@ -178,10 +181,11 @@ class _TasksByStatusChartState extends ConsumerState<TasksByStatusChart> {
         return ReportCardWrapper(
           title: 'Tasks by Status',
           repaintBoundaryKey: widget.repaintKey,
-          height: 220,
+          height: 180,
           child: Row(
             children: [
-              Expanded(
+              SizedBox(
+                width: 150,
                 child: PieChart(
                   PieChartData(
                     pieTouchData: PieTouchData(
@@ -218,22 +222,24 @@ class _TasksByStatusChartState extends ConsumerState<TasksByStatusChart> {
                   ),
                 ),
               ),
-              const SizedBox(width: 12),
+              const SizedBox(width: 16),
-              Column(
+              Expanded(
-                mainAxisAlignment: MainAxisAlignment.center,
+                child: Column(
-                crossAxisAlignment: CrossAxisAlignment.start,
+                  mainAxisAlignment: MainAxisAlignment.center,
-                children: data.asMap().entries.map((entry) {
+                  crossAxisAlignment: CrossAxisAlignment.start,
-                  final i = entry.key;
+                  children: data.asMap().entries.map((entry) {
-                  final e = entry.value;
+                    final i = entry.key;
-                  final isTouched = i == _touchedIndex;
+                    final e = entry.value;
-                  return _LegendItem(
+                    final isTouched = i == _touchedIndex;
-                    color: _taskStatusColor(context, e.status),
+                    return _LegendItem(
-                    label: _formatTaskStatus(e.status),
+                      color: _taskStatusColor(context, e.status),
-                    value:
+                      label: _formatTaskStatus(e.status),
-                        '${e.count} (${(e.count / total * 100).toStringAsFixed(0)}%)',
+                      value:
-                    isTouched: isTouched,
+                          '${e.count} (${(e.count / total * 100).toStringAsFixed(0)}%)',
-                  );
+                      isTouched: isTouched,
-                }).toList(),
+                    );
+                  }).toList(),
+                ),
               ),
             ],
           ),