refactor: simplify widget structure and improve date selection logic in clock-in features

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

@@ -4,7 +4,6 @@ import 'package:krow_domain/krow_domain.dart';
 
 import '../bloc/clock_in_bloc.dart';
 import '../bloc/clock_in_event.dart';
-import '../bloc/clock_in_state.dart';
 import 'clock_in_helpers.dart';
 import 'early_check_in_banner.dart';
 import 'lunch_break_modal.dart';

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

@@ -16,7 +16,7 @@ class DateSelector extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final DateTime today = DateTime.now();
-    final List<DateTime> dates = List.generate(7, (int index) {
+    final List<DateTime> dates = List<DateTime>.generate(7, (int index) {
       return today.add(Duration(days: index - 3));
     });
 
@@ -31,7 +31,7 @@ class DateSelector extends StatelessWidget {
 
           return Expanded(
             child: GestureDetector(
-              onTap: () => onSelect(date),
+              onTap: isToday ? () => onSelect(date) : null,
               child: AnimatedContainer(
                 duration: const Duration(milliseconds: 200),
                 margin: const EdgeInsets.symmetric(
@@ -40,16 +40,9 @@ class DateSelector extends StatelessWidget {
                 decoration: BoxDecoration(
                   color: isSelected ? UiColors.primary : UiColors.white,
                   borderRadius: UiConstants.radiusLg,
-                  boxShadow: isSelected
-                      ? <BoxShadow>[
-                          BoxShadow(
-                            color: UiColors.primary.withValues(alpha: 0.3),
-                            blurRadius: 10,
-                            offset: const Offset(0, 4),
-                          ),
-                        ]
-                      : <BoxShadow>[],
                 ),
+                child: Opacity(
+                  opacity: isToday ? 1.0 : 0.4,
                   child: Column(
                     mainAxisAlignment: MainAxisAlignment.center,
                     children: <Widget>[
@@ -57,8 +50,9 @@ class DateSelector extends StatelessWidget {
                         DateFormat('d').format(date),
                         style: UiTypography.title1m.copyWith(
                           fontWeight: FontWeight.bold,
-                        color:
+                          color: isSelected
-                            isSelected ? UiColors.white : UiColors.foreground,
+                              ? UiColors.white
+                              : UiColors.foreground,
                         ),
                       ),
                       const SizedBox(height: 2),
@@ -76,7 +70,9 @@ class DateSelector extends StatelessWidget {
                           width: 6,
                           height: 6,
                           decoration: BoxDecoration(
-                          color: isSelected ? UiColors.white : UiColors.primary,
+                            color: isSelected
+                                ? UiColors.white
+                                : UiColors.primary,
                             shape: BoxShape.circle,
                           ),
                         )
@@ -90,21 +86,24 @@ class DateSelector extends StatelessWidget {
                           ),
                         )
                       else
-                      const SizedBox(height: 6),
+                        const SizedBox(height: UiConstants.space3),
                     ],
                   ),
                 ),
               ),
+            ),
           );
         }).toList(),
       ),
     );
   }
   
+  /// Helper to check if two dates are on the same calendar day (ignoring time).
   bool _isSameDay(DateTime a, DateTime b) {
     return a.year == b.year && a.month == b.month && a.day == b.day;
   }
 
+  /// Formats a [DateTime] as an ISO date string (yyyy-MM-dd) for comparison with shift dates.
   String _formatDateIso(DateTime date) {
     return DateFormat('yyyy-MM-dd').format(date);
   }

apps/mobile/packages/features/staff/shifts/lib/src/presentation/pages/shift_details_page.dart

@@ -155,7 +155,9 @@ class _ShiftDetailsPageState extends State<ShiftDetailsPage> {
                             ),
                           ),
                         ShiftDetailsHeader(shift: displayShift),
+                        
                         const Divider(height: 1, thickness: 0.5),
+                        
                         ShiftStatsRow(
                           estimatedTotal: estimatedTotal,
                           hourlyRate: displayShift.hourlyRate,
@@ -164,7 +166,9 @@ class _ShiftDetailsPageState extends State<ShiftDetailsPage> {
                           hourlyRateLabel: i18n.hourly_rate,
                           hoursLabel: i18n.hours,
                         ),
+                        
                         const Divider(height: 1, thickness: 0.5),
+                        
                         ShiftDateTimeSection(
                           date: displayShift.date,
                           endDate: displayShift.endDate,

apps/mobile/packages/features/staff/shifts/lib/src/presentation/widgets/shift_details/shift_details_header.dart

@@ -8,69 +8,50 @@ class ShiftDetailsHeader extends StatelessWidget {
   final Shift shift;
 
   /// Creates a [ShiftDetailsHeader].
-  const ShiftDetailsHeader({
+  const ShiftDetailsHeader({super.key, required this.shift});
-    super.key,
-    required this.shift,
-  });
 
   @override
   Widget build(BuildContext context) {
     return Padding(
       padding: const EdgeInsets.all(UiConstants.space5),
-      child: IntrinsicHeight(
+      child: Column(
-        child: Row(
+        crossAxisAlignment: CrossAxisAlignment.start,
-          crossAxisAlignment: CrossAxisAlignment.stretch,
+        spacing: UiConstants.space4,
+        children: [
+          // Icon + role name + client name
+          Row(
+            crossAxisAlignment: CrossAxisAlignment.center,
             spacing: UiConstants.space4,
             children: [
               Container(
-              width: 114,
+                width: 68,
+                height: 68,
                 decoration: BoxDecoration(
                   color: UiColors.primary.withAlpha(20),
-                borderRadius: BorderRadius.circular(
+                  borderRadius: UiConstants.radiusLg,
-                  UiConstants.radiusBase,
+                  border: Border.all(color: UiColors.primary, width: 0.5),
-                ),
-                border: Border.all(color: UiColors.primary),
                 ),
                 child: const Center(
                   child: Icon(
                     UiIcons.briefcase,
                     color: UiColors.primary,
-                  size: 24,
+                    size: 20,
                   ),
                 ),
               ),
               Expanded(
                 child: Column(
                   crossAxisAlignment: CrossAxisAlignment.start,
-                mainAxisAlignment: MainAxisAlignment.center,
-                spacing: UiConstants.space3,
                   children: [
-                  Text(
+                    Text(shift.title, style: UiTypography.headline1b.textPrimary),
-                    shift.title,
+                    Text(shift.clientName, style: UiTypography.body1m.textSecondary),
-                    style: UiTypography.headline1b.textPrimary,
+                  ],
-                  ),
-                  Column(
-                    spacing: UiConstants.space1,
-                    children: [
-                      // Client name
-                      Row(
-                        spacing: UiConstants.space1,
-                        children: [
-                          const Icon(
-                            UiIcons.building,
-                            size: 16,
-                            color: UiColors.textSecondary,
-                          ),
-                          Expanded(
-                            child: Text(
-                              shift.clientName,
-                              style: UiTypography.body1m.textSecondary,
                 ),
               ),
             ],
           ),
           
-                      // Location address (if available)
+          // Location address
           Row(
             spacing: UiConstants.space1,
             children: [
@@ -89,13 +70,6 @@ class ShiftDetailsHeader extends StatelessWidget {
           ),
         ],
       ),
-                
-                ],
-              ),
-            ),
-          ],
-        ),
-      ),
     );
   }
 }