Krow/Krow-workspace
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: Update AvailabilityPage and ClockInPage to enhance UI consistency and remove unused code

Browse Source
This commit is contained in:
Achintha Isuru
2026-02-10 15:51:50 -05:00
parent 4f94bf6835
commit 8edfc72370
2 changed files with 60 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

156
apps/mobile/packages/features/staff/availability/lib/src/presentation/pages/availability_page.dart
View File

@@ -4,11 +4,11 @@ import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_modular/flutter_modular.dart'
hide ModularWatchExtension;
import 'package:intl/intl.dart';
import 'package:krow_domain/krow_domain.dart';
import '../blocs/availability_bloc.dart';
import '../blocs/availability_event.dart';
import '../blocs/availability_state.dart';
import 'package:krow_domain/krow_domain.dart';
class AvailabilityPage extends StatefulWidget {
const AvailabilityPage({super.key});
@@ -102,7 +102,12 @@ class _AvailabilityPageState extends State<AvailabilityPage> {
],
);
} else if (state is AvailabilityError) {
return Center(child: Text('Error: ${state.message}'));
return Center(
child: Text(
'Error: ${state.message}',
style: UiTypography.body2r.textError,
),
);
}
return const SizedBox.shrink();
},
@@ -124,7 +129,7 @@ class _AvailabilityPageState extends State<AvailabilityPage> {
children: [
Text(
'Quick Set Availability',
style: UiTypography.body4r.copyWith(color: UiColors.textFilter),
style: UiTypography.body2b,
),
const SizedBox(height: 12),
Row(
@@ -172,11 +177,13 @@ class _AvailabilityPageState extends State<AvailabilityPage> {
? UiColors.destructive.withValues(alpha: 0.2)
: UiColors.primary.withValues(alpha: 0.2),
),
backgroundColor: Colors.transparent,
backgroundColor: UiColors.transparent,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12),
),
foregroundColor: isDestructive ? UiColors.destructive : UiColors.primary,
foregroundColor: isDestructive
? UiColors.destructive
: UiColors.primary,
),
child: Text(
label,
@@ -196,16 +203,9 @@ class _AvailabilityPageState extends State<AvailabilityPage> {
return Container(
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: Colors.white,
color: UiColors.cardViewBackground,
borderRadius: BorderRadius.circular(16),
border: Border.all(color: Colors.grey.shade100),
boxShadow: [
BoxShadow(
color: UiColors.black.withValues(alpha: 0.05),
blurRadius: 2,
offset: const Offset(0, 1),
),
],
border: Border.all(color: UiColors.border),
),
child: Column(
children: [
@@ -223,11 +223,7 @@ class _AvailabilityPageState extends State<AvailabilityPage> {
),
Text(
monthYear,
style: const TextStyle(
fontSize: 16,
fontWeight: FontWeight.w600,
color: UiColors.foreground,
),
style: UiTypography.title2b,
),
_buildNavButton(
UiIcons.chevronRight,
@@ -257,10 +253,10 @@ class _AvailabilityPageState extends State<AvailabilityPage> {
width: 32,
height: 32,
decoration: const BoxDecoration(
color: Color(0xFFF1F5F9), // slate-100
color: UiColors.separatorSecondary,
shape: BoxShape.circle,
),
child: Icon(icon, size: 20, color: UiColors.mutedForeground),
child: Icon(icon, size: 20, color: UiColors.iconSecondary),
),
);
}
@@ -283,26 +279,15 @@ class _AvailabilityPageState extends State<AvailabilityPage> {
decoration: BoxDecoration(
color: isSelected
? UiColors.primary
: (isAvailable
? const Color(0xFFECFDF5)
: const Color(0xFFF8FAFC)), // emerald-50 or slate-50
: (isAvailable ? UiColors.tagSuccess : UiColors.bgSecondary),
borderRadius: BorderRadius.circular(16),
border: Border.all(
color: isSelected
? UiColors.primary
: (isAvailable
? const Color(0xFFA7F3D0)
: Colors.transparent), // emerald-200
? UiColors.success.withValues(alpha: 0.3)
: UiColors.transparent),
),
boxShadow: isSelected
? [
BoxShadow(
color: UiColors.primary.withValues(alpha: 0.3),
blurRadius: 8,
offset: const Offset(0, 4),
),
]
: null,
),
child: Stack(
clipBehavior: Clip.none,
@@ -312,26 +297,24 @@ class _AvailabilityPageState extends State<AvailabilityPage> {
children: [
Text(
day.date.day.toString().padLeft(2, '0'),
style: TextStyle(
fontSize: 18,
style: UiTypography.title1m.copyWith(
fontWeight: FontWeight.bold,
color: isSelected
? UiColors.white
: (isAvailable
? const Color(0xFF047857)
: UiColors.mutedForeground), // emerald-700
? UiColors.textSuccess
: UiColors.textSecondary),
),
),
const SizedBox(height: 2),
Text(
DateFormat('EEE').format(day.date),
style: TextStyle(
fontSize: 10,
style: UiTypography.footnote2r.copyWith(
color: isSelected
? UiColors.white.withValues(alpha: 0.8)
: (isAvailable
? const Color(0xFF047857)
: UiColors.mutedForeground),
? UiColors.textSuccess
: UiColors.textSecondary),
),
),
],
@@ -365,16 +348,9 @@ class _AvailabilityPageState extends State<AvailabilityPage> {
return Container(
padding: const EdgeInsets.all(20),
decoration: BoxDecoration(
color: Colors.white,
color: UiColors.cardViewBackground,
borderRadius: BorderRadius.circular(16),
border: Border.all(color: Colors.grey.shade100),
boxShadow: [
BoxShadow(
color: UiColors.black.withValues(alpha: 0.05),
blurRadius: 2,
offset: const Offset(0, 1),
),
],
border: Border.all(color: UiColors.border),
),
child: Column(
children: [
@@ -387,18 +363,11 @@ class _AvailabilityPageState extends State<AvailabilityPage> {
children: [
Text(
dateStr,
style: const TextStyle(
fontSize: 16,
fontWeight: FontWeight.w600,
color: UiColors.foreground,
),
style: UiTypography.title2b,
),
Text(
isAvailable ? 'You are available' : 'Not available',
style: const TextStyle(
fontSize: 14,
color: UiColors.mutedForeground,
),
style: UiTypography.body2r.textSecondary,
),
],
),
@@ -430,26 +399,26 @@ class _AvailabilityPageState extends State<AvailabilityPage> {
case 'morning':
return {
'icon': UiIcons.sunrise,
'bg': const Color(0xFFE6EBF9), // bg-[#0032A0]/10
'iconColor': const Color(0xFF0032A0),
'bg': UiColors.primary.withValues(alpha: 0.1),
'iconColor': UiColors.primary,
};
case 'afternoon':
return {
'icon': UiIcons.sun,
'bg': const Color(0xFFCCD6EC), // bg-[#0032A0]/20
'iconColor': const Color(0xFF0032A0),
'bg': UiColors.primary.withValues(alpha: 0.2),
'iconColor': UiColors.primary,
};
case 'evening':
return {
'icon': UiIcons.moon,
'bg': const Color(0xFFEBEDEE), // bg-[#333F48]/10
'iconColor': const Color(0xFF333F48),
'bg': UiColors.bgSecondary,
'iconColor': UiColors.foreground,
};
default:
return {
'icon': UiIcons.clock,
'bg': Colors.grey.shade100,
'iconColor': Colors.grey,
'bg': UiColors.bgSecondary,
'iconColor': UiColors.iconSecondary,
};
}
}
@@ -469,14 +438,14 @@ class _AvailabilityPageState extends State<AvailabilityPage> {
Color borderColor;
if (!isEnabled) {
bgColor = const Color(0xFFF8FAFC); // slate-50
borderColor = const Color(0xFFF1F5F9); // slate-100
bgColor = UiColors.bgSecondary;
borderColor = UiColors.borderInactive;
} else if (isActive) {
bgColor = UiColors.primary.withValues(alpha: 0.05);
borderColor = UiColors.primary.withValues(alpha: 0.2);
} else {
bgColor = const Color(0xFFF8FAFC); // slate-50
borderColor = const Color(0xFFE2E8F0); // slate-200
bgColor = UiColors.bgSecondary;
borderColor = UiColors.borderPrimary;
}
// Text colors
@@ -485,13 +454,13 @@ class _AvailabilityPageState extends State<AvailabilityPage> {
: UiColors.mutedForeground;
final subtitleColor = (isEnabled && isActive)
? UiColors.mutedForeground
: Colors.grey.shade400;
: UiColors.textInactive;
return GestureDetector(
onTap: isEnabled
? () => context.read<AvailabilityBloc>().add(
ToggleSlotStatus(day, slot.id),
)
ToggleSlotStatus(day, slot.id),
)
: null,
child: AnimatedContainer(
duration: const Duration(milliseconds: 200),
@@ -526,15 +495,11 @@ class _AvailabilityPageState extends State<AvailabilityPage> {
children: [
Text(
slot.label,
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.w500,
color: titleColor,
),
style: UiTypography.body2m.copyWith(color: titleColor),
),
Text(
slot.timeRange,
style: TextStyle(fontSize: 12, color: subtitleColor),
style: UiTypography.body3r.copyWith(color: subtitleColor),
),
],
),
@@ -548,7 +513,11 @@ class _AvailabilityPageState extends State<AvailabilityPage> {
color: UiColors.primary,
shape: BoxShape.circle,
),
child: const Icon(UiIcons.check, size: 16, color: UiColors.white),
child: const Icon(
UiIcons.check,
size: 16,
color: UiColors.white,
),
)
else if (isEnabled && !isActive)
Container(
@@ -557,9 +526,9 @@ class _AvailabilityPageState extends State<AvailabilityPage> {
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(
color: const Color(0xFFCBD5E1),
color: UiColors.borderStill,
width: 2,
), // slate-300
),
),
),
],
@@ -575,27 +544,23 @@ class _AvailabilityPageState extends State<AvailabilityPage> {
color: UiColors.primary.withValues(alpha: 0.05),
borderRadius: BorderRadius.circular(12),
),
child: const Row(
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
spacing: 12,
children: [
Icon(UiIcons.clock, size: 20, color: UiColors.primary),
SizedBox(width: 12),
const Icon(UiIcons.clock, size: 20, color: UiColors.primary),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
spacing: 4,
children: [
Text(
'Auto-Match uses your availability',
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.w500,
color: UiColors.foreground,
),
style: UiTypography.body2m,
),
SizedBox(height: 2),
Text(
"When enabled, you'll only be matched with shifts during your available times.",
style: TextStyle(fontSize: 12, color: UiColors.mutedForeground),
style: UiTypography.body3r.textSecondary,
),
],
),
@@ -605,4 +570,3 @@ class _AvailabilityPageState extends State<AvailabilityPage> {
);
}
}

9
apps/mobile/packages/features/staff/clock_in/lib/src/presentation/pages/clock_in_page.dart
View File

@@ -64,14 +64,6 @@ class _ClockInPageState extends State<ClockInPage> {
final bool isCheckedIn =
state.attendance.isCheckedIn && isActiveSelected;
// Format times for display
final String checkInStr = checkInTime != null
? DateFormat('h:mm a').format(checkInTime)
: '--:-- --';
final String checkOutStr = checkOutTime != null
? DateFormat('h:mm a').format(checkOutTime)
: '--:-- --';
return Scaffold(
appBar: UiAppBar(
titleWidget: Text(
@@ -117,7 +109,6 @@ class _ClockInPageState extends State<ClockInPage> {
),
const SizedBox(height: 20),
// Your Activity Header
const Text(
"Your Activity",