feat(geofence): enhance geofence handling with improved messaging and justification for clock-out

apps/mobile/packages/features/staff/clock_in/lib/src/presentation/bloc/clock_in/clock_in_bloc.dart

@@ -291,6 +291,9 @@ class ClockInBloc extends Bloc<ClockInEvent, ClockInState>
               longitude: location?.longitude,
               accuracyMeters: location?.accuracy,
               capturedAt: location?.timestamp,
+              overrideReason: currentGeofence.isGeofenceOverridden
+                  ? currentGeofence.overrideNotes
+                  : null,
             ),
           );
           emit(state.copyWith(

apps/mobile/packages/features/staff/clock_in/lib/src/presentation/widgets/clock_in_action_section.dart

@@ -134,8 +134,9 @@ class ClockInActionSection extends StatelessWidget {
         final bool hasCoordinates =
             selectedShift?.latitude != null && selectedShift?.longitude != null;
 
-        // Geofence only gates clock-in, never clock-out. When already
-        // checked in the swipe must always be enabled for checkout.
+        // Geofence gates both clock-in and clock-out. When outside the
+        // geofence, the slider is locked until the worker provides a
+        // justification via the override modal.
         final bool isGeofenceBlocking =
             hasCoordinates &&
             !geofenceState.isLocationVerified &&

apps/mobile/packages/features/staff/clock_in/lib/src/presentation/widgets/geofence_status_banner/geofence_status_banner.dart

@@ -91,7 +91,9 @@ class GeofenceStatusBanner extends StatelessWidget {
       // instead of the "Clock in anyway" override flow so the clock-out
       // slider remains accessible.
       if (isClockedIn) {
-        return const OutsideWorkAreaBanner();
+        return OutsideWorkAreaBanner(
+          distanceMeters: state.distanceFromTarget!,
+        );
       }
       return TooFarBanner(distanceMeters: state.distanceFromTarget!);
     }

apps/mobile/packages/features/staff/clock_in/lib/src/presentation/widgets/geofence_status_banner/outside_work_area_banner.dart

@@ -1,15 +1,23 @@
 import 'package:core_localization/core_localization.dart';
 import 'package:design_system/design_system.dart';
 import 'package:flutter/material.dart';
+import 'package:krow_core/core.dart';
 
-/// Non-blocking warning banner shown when the worker is already clocked in
-/// but has moved outside the geofence radius.
+import 'banner_action_button.dart';
+import 'geofence_override_modal.dart';
+
+/// Warning banner shown when the worker is clocked in but has moved outside
+/// the geofence radius.
 ///
-/// Unlike [TooFarBanner], this banner does not include a "Clock in anyway"
-/// action button and does not block the clock-out slider.
+/// Mirrors [TooFarBanner] with a "Clock out anyway" action that opens the
+/// [GeofenceOverrideModal] so the worker can provide justification before
+/// the clock-out slider unlocks.
 class OutsideWorkAreaBanner extends StatelessWidget {
   /// Creates an [OutsideWorkAreaBanner].
-  const OutsideWorkAreaBanner({super.key});
+  const OutsideWorkAreaBanner({required this.distanceMeters, super.key});
+
+  /// Distance from the target location in meters.
+  final double distanceMeters;
 
   @override
   Widget build(BuildContext context) {
@@ -21,8 +29,17 @@ class OutsideWorkAreaBanner extends StatelessWidget {
       backgroundColor: UiColors.tagPending,
       icon: UiIcons.warning,
       iconColor: UiColors.textWarning,
-      title: i18n.outside_work_area_warning,
+      title: i18n.outside_work_area_title,
       titleColor: UiColors.textWarning,
+      description: i18n.outside_work_area_desc(
+        distance: formatDistance(distanceMeters),
+      ),
+      descriptionColor: UiColors.textWarning,
+      action: BannerActionButton(
+        label: i18n.clock_out_anyway,
+        color: UiColors.textWarning,
+        onPressed: () => GeofenceOverrideModal.show(context),
+      ),
     );
   }
 }