refactor: simplify widget structure and improve date selection logic in clock-in features
This commit is contained in:
@@ -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';
|
||||
|
||||
@@ -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,58 +40,55 @@ 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: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: <Widget>[
|
||||
Text(
|
||||
DateFormat('d').format(date),
|
||||
style: UiTypography.title1m.copyWith(
|
||||
fontWeight: FontWeight.bold,
|
||||
color:
|
||||
isSelected ? UiColors.white : UiColors.foreground,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 2),
|
||||
Text(
|
||||
DateFormat('E').format(date),
|
||||
style: UiTypography.footnote2r.copyWith(
|
||||
color: isSelected
|
||||
? UiColors.white.withValues(alpha: 0.8)
|
||||
: UiColors.textInactive,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: UiConstants.space1),
|
||||
if (hasShift)
|
||||
Container(
|
||||
width: 6,
|
||||
height: 6,
|
||||
decoration: BoxDecoration(
|
||||
color: isSelected ? UiColors.white : UiColors.primary,
|
||||
shape: BoxShape.circle,
|
||||
child: Opacity(
|
||||
opacity: isToday ? 1.0 : 0.4,
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: <Widget>[
|
||||
Text(
|
||||
DateFormat('d').format(date),
|
||||
style: UiTypography.title1m.copyWith(
|
||||
fontWeight: FontWeight.bold,
|
||||
color: isSelected
|
||||
? UiColors.white
|
||||
: UiColors.foreground,
|
||||
),
|
||||
)
|
||||
else if (isToday && !isSelected)
|
||||
Container(
|
||||
width: 6,
|
||||
height: 6,
|
||||
decoration: const BoxDecoration(
|
||||
color: UiColors.border,
|
||||
shape: BoxShape.circle,
|
||||
),
|
||||
const SizedBox(height: 2),
|
||||
Text(
|
||||
DateFormat('E').format(date),
|
||||
style: UiTypography.footnote2r.copyWith(
|
||||
color: isSelected
|
||||
? UiColors.white.withValues(alpha: 0.8)
|
||||
: UiColors.textInactive,
|
||||
),
|
||||
)
|
||||
else
|
||||
const SizedBox(height: 6),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: UiConstants.space1),
|
||||
if (hasShift)
|
||||
Container(
|
||||
width: 6,
|
||||
height: 6,
|
||||
decoration: BoxDecoration(
|
||||
color: isSelected
|
||||
? UiColors.white
|
||||
: UiColors.primary,
|
||||
shape: BoxShape.circle,
|
||||
),
|
||||
)
|
||||
else if (isToday && !isSelected)
|
||||
Container(
|
||||
width: 6,
|
||||
height: 6,
|
||||
decoration: const BoxDecoration(
|
||||
color: UiColors.border,
|
||||
shape: BoxShape.circle,
|
||||
),
|
||||
)
|
||||
else
|
||||
const SizedBox(height: UiConstants.space3),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
@@ -101,10 +98,12 @@ class DateSelector extends StatelessWidget {
|
||||
);
|
||||
}
|
||||
|
||||
/// 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);
|
||||
}
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -8,93 +8,67 @@ class ShiftDetailsHeader extends StatelessWidget {
|
||||
final Shift shift;
|
||||
|
||||
/// Creates a [ShiftDetailsHeader].
|
||||
const ShiftDetailsHeader({
|
||||
super.key,
|
||||
required this.shift,
|
||||
});
|
||||
const ShiftDetailsHeader({super.key, required this.shift});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Padding(
|
||||
padding: const EdgeInsets.all(UiConstants.space5),
|
||||
child: IntrinsicHeight(
|
||||
child: Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
spacing: UiConstants.space4,
|
||||
children: [
|
||||
Container(
|
||||
width: 114,
|
||||
decoration: BoxDecoration(
|
||||
color: UiColors.primary.withAlpha(20),
|
||||
borderRadius: BorderRadius.circular(
|
||||
UiConstants.radiusBase,
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
spacing: UiConstants.space4,
|
||||
children: [
|
||||
// Icon + role name + client name
|
||||
Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.center,
|
||||
spacing: UiConstants.space4,
|
||||
children: [
|
||||
Container(
|
||||
width: 68,
|
||||
height: 68,
|
||||
decoration: BoxDecoration(
|
||||
color: UiColors.primary.withAlpha(20),
|
||||
borderRadius: UiConstants.radiusLg,
|
||||
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,
|
||||
child: const Center(
|
||||
child: Icon(
|
||||
UiIcons.briefcase,
|
||||
color: UiColors.primary,
|
||||
size: 20,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
Expanded(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
spacing: UiConstants.space3,
|
||||
children: [
|
||||
Text(
|
||||
shift.title,
|
||||
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)
|
||||
Row(
|
||||
spacing: UiConstants.space1,
|
||||
children: [
|
||||
const Icon(
|
||||
UiIcons.mapPin,
|
||||
size: 16,
|
||||
color: UiColors.textSecondary,
|
||||
),
|
||||
Expanded(
|
||||
child: Text(
|
||||
shift.locationAddress,
|
||||
style: UiTypography.body2r.textSecondary,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
|
||||
],
|
||||
Expanded(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(shift.title, style: UiTypography.headline1b.textPrimary),
|
||||
Text(shift.clientName, style: UiTypography.body1m.textSecondary),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
|
||||
// Location address
|
||||
Row(
|
||||
spacing: UiConstants.space1,
|
||||
children: [
|
||||
const Icon(
|
||||
UiIcons.mapPin,
|
||||
size: 16,
|
||||
color: UiColors.textSecondary,
|
||||
),
|
||||
Expanded(
|
||||
child: Text(
|
||||
shift.locationAddress,
|
||||
style: UiTypography.body2r.textSecondary,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user