Krow/krow-worker-app
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: enhance UI, branding assets, onboarding flow, and screen layouts

Browse Source
This commit is contained in:
R-Bharathraj
2026-09-18 15:23:30 +05:30
parent cafffd27e0
commit 5122eebc11
68 changed files with 1661 additions and 470 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
lib/core/permissions.dart Normal file
View File

@@ -0,0 +1,62 @@
import 'package:flutter/foundation.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:permission_handler/permission_handler.dart';
/// The three things the app asks for, in the order it asks.
enum AppPermission { location, notifications, camera }
extension AppPermissionX on AppPermission {
Permission get _platform => switch (this) {
// While-in-use only: clock-in needs to know you are at the venue, and
// nothing here justifies background tracking.
AppPermission.location => Permission.locationWhenInUse,
AppPermission.notifications => Permission.notification,
AppPermission.camera => Permission.camera,
};
}
/// Thin wrapper over `permission_handler`.
///
/// Exists so the rest of the app never imports the plugin directly, and so the
/// platforms it has no implementation for — web, desktop — degrade to "granted"
/// instead of throwing. On the web the browser prompts at the point of use
/// anyway, so asking up front is neither possible nor needed.
class PermissionService {
const PermissionService();
bool get _supported =>
!kIsWeb &&
(defaultTargetPlatform == TargetPlatform.android ||
defaultTargetPlatform == TargetPlatform.iOS);
/// Shows the platform dialog. Returns whether the permission ended up
/// granted — which is not the same as whether the user tapped Allow, since
/// it may already have been permanently denied.
Future<bool> request(AppPermission permission) async {
if (!_supported) return true;
final status = await permission._platform.request();
return status.isGranted || status.isLimited;
}
Future<bool> isGranted(AppPermission permission) async {
if (!_supported) return true;
final status = await permission._platform.status;
return status.isGranted || status.isLimited;
}
/// True once the OS will no longer show a dialog, so the only way back is
/// the system settings page.
Future<bool> isPermanentlyDenied(AppPermission permission) async {
if (!_supported) return false;
return permission._platform.status.then((s) => s.isPermanentlyDenied);
}
Future<void> openSettings() async {
if (!_supported) return;
await openAppSettings();
}
}
final permissionServiceProvider = Provider<PermissionService>(
(ref) => const PermissionService(),
);

26
lib/core/router.dart
View File

@@ -10,6 +10,7 @@ import '../screens/onboarding_screens.dart';
import '../screens/pay_screens.dart';
import '../screens/profile_detail_screens.dart';
import '../screens/profile_screen.dart';
import '../screens/requirements_screen.dart';
import '../screens/settings_screens.dart';
import '../screens/shift_detail_screen.dart';
import '../screens/shifts_screen.dart';
@@ -60,27 +61,30 @@ final router = GoRouter(
_detailRoute('/phone', (_) => const PhoneScreen()),
_detailRoute('/otp', (_) => const OtpScreen()),
// Branch order is the tab order, and it matches the prototype: Today sits
// in the middle, with the two browsing tabs to its left and the two
// personal ones to its right. KrowNavBar's items must stay in step.
StatefulShellRoute.indexedStack(
builder: (_, _, shell) => HomeShell(navigationShell: shell),
branches: [
StatefulShellBranch(
routes: [
GoRoute(path: '/shifts', builder: (_, _) => const ShiftsScreen()),
],
),
StatefulShellBranch(
routes: [GoRoute(path: '/pay', builder: (_, _) => const PayScreen())],
),
StatefulShellBranch(
routes: [
GoRoute(path: '/today', builder: (_, _) => const TodayScreen()),
],
),
StatefulShellBranch(
routes: [
GoRoute(path: '/shifts', builder: (_, _) => const ShiftsScreen()),
],
),
StatefulShellBranch(
routes: [
GoRoute(path: '/clock', builder: (_, _) => const ClockScreen()),
],
),
StatefulShellBranch(
routes: [GoRoute(path: '/pay', builder: (_, _) => const PayScreen())],
),
StatefulShellBranch(
routes: [
GoRoute(path: '/profile', builder: (_, _) => const ProfileScreen()),
@@ -92,6 +96,12 @@ final router = GoRouter(
_detailRoute(
'/shift/:id',
(state) => ShiftDetailScreen(shiftId: state.pathParameters['id']!),
routes: [
_detailRoute(
'requirements',
(state) => RequirementsScreen(shiftId: state.pathParameters['id']!),
),
],
),
_detailRoute('/availability', (_) => const AvailabilityScreen()),
_detailRoute('/timecards', (_) => const TimecardsScreen()),

490
lib/screens/auth_screens.dart
View File

@@ -7,8 +7,11 @@ import 'package:go_router/go_router.dart';
import 'package:lucide_icons_flutter/lucide_icons.dart';
import '../core/theme.dart';
import '../core/permissions.dart';
import '../state/session_controller.dart';
import '../widgets/common.dart';
import 'today_screen.dart';
import '../widgets/krow_nav_bar.dart';
/// Step 1 of 2: the mobile number a shift manager would text.
class PhoneScreen extends ConsumerStatefulWidget {
@@ -456,18 +459,92 @@ class _TodoRow extends StatelessWidget {
}
}
/// One permission ask, as the prototype words it.
class _Permission {
const _Permission(this.icon, this.step, this.title, this.body, this.reasons);
const _Permission({
required this.icon,
required this.step,
required this.title,
required this.body,
required this.reasons,
required this.allow,
required this.defer,
required this.permission,
});
final IconData icon;
final String step;
final String title;
final String body;
final List<String> reasons;
/// Each reason as `(before, emphasis, after)` — the prototype bolds the part
/// that says what you actually get.
final List<(String, String, String)> reasons;
final String allow;
/// The way out. Worded differently each time, per the prototype.
final String defer;
/// What the OS is actually asked for when Allow is tapped.
final AppPermission permission;
}
/// The three-step permission run. Each grant is recorded in the session so the
/// app knows what it is allowed to do later.
const _permissions = [
_Permission(
icon: LucideIcons.mapPin,
step: 'Step 1 of 3',
title: 'Let KROW see where you are',
body:
'Clock-in is locked until you are within 150 m of the venue. Without '
'location you cannot start a shift.',
reasons: [
('Unlocks ', 'clock in', ' when you arrive'),
('Sorts shifts by ', 'distance from you', ''),
('Only read ', 'while a shift is active', ''),
],
allow: 'Allow location',
defer: 'Not now',
permission: AppPermission.location,
),
_Permission(
icon: LucideIcons.bell,
step: 'Step 2 of 3',
title: 'Turn on notifications',
body:
'Shift offers are first-come. If your phone is silent someone else '
'takes the shift.',
reasons: [
('', 'New shift offers', ' matched to you'),
('', 'Clock-in reminders', ' 30 min before'),
('', 'Pay alerts', ' when money lands'),
],
allow: 'Turn on notifications',
defer: 'Maybe later',
permission: AppPermission.notifications,
),
_Permission(
icon: LucideIcons.camera,
step: 'Step 3 of 3',
title: 'Camera and photos',
body:
'Attire and document checks need a photo of the real item. Nothing is '
'uploaded until you tap send.',
reasons: [
('Photograph ', 'your uniform items', ''),
('Capture ', 'ID and certificates', ''),
('Nothing is stored ', 'on our servers unsent', ''),
],
allow: 'Allow camera',
defer: 'Choose from library instead',
permission: AppPermission.camera,
),
];
/// The three permission asks, each a sheet over the home screen.
///
/// Shown this way rather than as full pages because that is what the worker
/// is actually looking at: the app is already there behind the scrim, so the
/// ask reads as a step before using it rather than another sign-up screen.
class PermissionsScreen extends ConsumerStatefulWidget {
const PermissionsScreen({super.key});
@@ -477,58 +554,9 @@ class PermissionsScreen extends ConsumerStatefulWidget {
class _PermissionsScreenState extends ConsumerState<PermissionsScreen> {
int _step = 0;
bool _asking = false;
static const _permissions = [
_Permission(
LucideIcons.mapPin,
'Step 1 of 3',
'Let KROW see where you are',
'Clock-in is locked until you are within 150 m of the venue. Without '
'location you cannot start a shift.',
[
'Unlocks clock in when you arrive',
'Sorts shifts by distance from you',
'Only read while a shift is active',
],
),
_Permission(
LucideIcons.bell,
'Step 2 of 3',
'Turn on notifications',
'Shift offers are first-come. If your phone is silent someone else takes '
'the shift.',
[
'New shift offers matched to you',
'Clock-in reminders 30 min before',
'Pay alerts when money lands',
],
),
_Permission(
LucideIcons.camera,
'Step 3 of 3',
'Camera and photos',
'Attire and document checks need a photo of the real item. Nothing is '
'uploaded until you tap send.',
[
'Photograph your uniform items',
'Capture ID and certificates',
'Nothing is stored on our servers unsent',
],
),
];
void _advance({required bool granted}) {
final notifier = ref.read(sessionProvider.notifier);
if (granted) {
switch (_step) {
case 0:
notifier.grantLocation();
case 1:
notifier.grantNotifications();
case 2:
notifier.grantCamera();
}
}
void _next() {
if (_step == _permissions.length - 1) {
context.go('/today');
} else {
@@ -536,115 +564,267 @@ class _PermissionsScreenState extends ConsumerState<PermissionsScreen> {
}
}
/// Hands off to the operating system's own dialog. Whatever it answers is
/// recorded, and the run continues either way — a refused permission is a
/// smaller problem than a worker stuck on a sign-up step.
Future<void> _allow(_Permission permission) async {
if (_asking) return;
setState(() => _asking = true);
final granted = await ref
.read(sessionProvider.notifier)
.request(permission.permission);
if (!mounted) return;
setState(() => _asking = false);
if (!granted) {
final blocked = await ref
.read(permissionServiceProvider)
.isPermanentlyDenied(permission.permission);
// Once the OS stops showing the dialog, tapping Allow again does
// nothing — the only way back is the system settings page.
if (blocked && mounted) {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: const Text('Turn this on in system settings'),
action: SnackBarAction(
label: 'Open',
textColor: KrowPalette.yellow,
onPressed: ref.read(permissionServiceProvider).openSettings,
),
),
);
}
}
if (mounted) _next();
}
@override
Widget build(BuildContext context) {
final p = _permissions[_step];
final permission = _permissions[_step];
return Scaffold(
body: SafeArea(
child: Padding(
padding: const EdgeInsets.fromLTRB(22, 24, 22, 16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
// The copy scrolls if it has to; the actions stay pinned, so a
// short screen or a large text scale can never push them off.
Expanded(
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
width: 60,
height: 60,
decoration: BoxDecoration(
color: KrowPalette.blue,
borderRadius: BorderRadius.circular(18),
),
child: Icon(p.icon, size: 27, color: Colors.white),
backgroundColor: KrowPalette.sage,
body: Stack(
children: [
// The app itself, already built, sitting behind the ask.
const IgnorePointer(
child: Scaffold(
body: TodayScreen(),
bottomNavigationBar: KrowNavBar(
items: [
KrowNavItem(icon: LucideIcons.briefcase, label: 'Shifts'),
KrowNavItem(icon: LucideIcons.wallet, label: 'Pay'),
KrowNavItem(icon: LucideIcons.house, label: 'Today'),
KrowNavItem(icon: LucideIcons.clock, label: 'Clock'),
KrowNavItem(icon: LucideIcons.user, label: 'Profile'),
],
currentIndex: 2,
onSelect: _ignoreTap,
),
),
),
const ModalBarrier(color: Color(0x8F101A14), dismissible: false),
Align(
alignment: Alignment.bottomCenter,
child: _PermissionSheet(
permission: permission,
busy: _asking,
onAllow: () => _allow(permission),
onDefer: _next,
),
),
],
),
);
}
static void _ignoreTap(int _) {}
}
class _PermissionSheet extends StatelessWidget {
const _PermissionSheet({
required this.permission,
required this.busy,
required this.onAllow,
required this.onDefer,
});
final _Permission permission;
final bool busy;
final VoidCallback onAllow;
final VoidCallback onDefer;
@override
Widget build(BuildContext context) {
return Container(
width: double.infinity,
decoration: const BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
),
child: SafeArea(
top: false,
child: ConstrainedBox(
// Scrolls rather than overflows if the copy outgrows the screen.
constraints: BoxConstraints(
maxHeight: MediaQuery.sizeOf(context).height * 0.86,
),
child: SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.fromLTRB(22, 12, 22, 16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisSize: MainAxisSize.min,
children: [
Center(
child: Container(
width: 40,
height: 4,
decoration: BoxDecoration(
color: const Color(0xFFCFDDD4),
borderRadius: BorderRadius.circular(2),
),
SectionLabel(p.step),
Text(
p.title,
style: const TextStyle(
fontSize: 25,
fontWeight: FontWeight.w700,
height: 1.15,
letterSpacing: -0.9,
),
),
const SizedBox(height: 10),
Text(
p.body,
style: const TextStyle(
fontSize: 14,
height: 1.55,
color: KrowPalette.mute,
),
),
const SizedBox(height: 18),
for (final reason in p.reasons)
Padding(
padding: const EdgeInsets.only(bottom: 12),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
width: 20,
height: 20,
// Nudged to sit on the first line's optical
// centre, so wrapped reasons stay top-aligned.
margin: const EdgeInsets.only(top: 1),
decoration: BoxDecoration(
color: KrowPalette.blueTint,
borderRadius: BorderRadius.circular(7),
),
child: const Icon(
LucideIcons.check,
size: 12,
color: KrowPalette.blue,
),
),
const SizedBox(width: 11),
Expanded(
child: Text(
reason,
style: const TextStyle(
fontSize: 13,
height: 1.45,
color: KrowPalette.mute,
),
),
),
],
),
),
],
),
),
),
const SizedBox(height: 20),
// Aligned rather than stretched: the surrounding column
// stretches its children so the buttons fill the sheet, and
// that would pull this 60px tile across the whole width.
Align(
alignment: Alignment.centerLeft,
child: Container(
width: 60,
height: 60,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(16),
gradient: const LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [Color(0xFF4A69C6), KrowPalette.blue],
),
boxShadow: [
BoxShadow(
color: KrowPalette.blue.withValues(alpha: 0.4),
blurRadius: 24,
offset: const Offset(0, 12),
),
],
),
child: Icon(
permission.icon,
size: 27,
color: Colors.white,
),
),
),
SectionLabel(permission.step),
Text(
permission.title,
style: const TextStyle(
fontSize: 24,
fontWeight: FontWeight.w700,
height: 1.15,
letterSpacing: -0.7,
),
),
const SizedBox(height: 10),
Text(
permission.body,
style: const TextStyle(
fontSize: 14,
height: 1.55,
fontWeight: FontWeight.w500,
color: KrowPalette.mute,
),
),
const SizedBox(height: 14),
for (final (before, emphasis, after) in permission.reasons)
Padding(
padding: const EdgeInsets.only(bottom: 10),
child: _Reason(
before: before,
emphasis: emphasis,
after: after,
),
),
const SizedBox(height: 10),
FilledButton(
onPressed: busy ? null : onAllow,
child: Text(permission.allow),
),
TextButton(
onPressed: onDefer,
style: TextButton.styleFrom(
minimumSize: const Size.fromHeight(44),
foregroundColor: KrowPalette.mute,
),
child: Text(permission.defer),
),
],
),
const SizedBox(height: 16),
FilledButton(
onPressed: () => _advance(granted: true),
child: Text(switch (_step) {
0 => 'Allow location',
1 => 'Turn on notifications',
_ => 'Allow camera',
}),
),
const SizedBox(height: 4),
// Full width so the secondary action shares the primary's edges
// rather than hugging the left.
TextButton(
onPressed: () => _advance(granted: false),
style: TextButton.styleFrom(
minimumSize: const Size.fromHeight(44),
),
child: const Text('Not now'),
),
],
),
),
),
),
);
}
}
class _Reason extends StatelessWidget {
const _Reason({
required this.before,
required this.emphasis,
required this.after,
});
final String before;
final String emphasis;
final String after;
@override
Widget build(BuildContext context) {
return Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
width: 20,
height: 20,
margin: const EdgeInsets.only(top: 1),
decoration: BoxDecoration(
color: KrowPalette.blueTint,
borderRadius: BorderRadius.circular(7),
),
child: const Icon(
LucideIcons.check,
size: 11,
color: KrowPalette.blue,
),
),
const SizedBox(width: 11),
Expanded(
child: Text.rich(
TextSpan(
children: [
TextSpan(text: before),
TextSpan(
text: emphasis,
style: const TextStyle(
fontWeight: FontWeight.w600,
color: KrowPalette.ink,
),
),
TextSpan(text: after),
],
),
style: const TextStyle(
fontSize: 13,
height: 1.45,
fontWeight: FontWeight.w500,
color: KrowPalette.mute,
),
),
),
],
);
}
}

94
lib/screens/clock_screen.dart
View File

@@ -11,9 +11,13 @@ import '../core/theme.dart';
import '../models/shift.dart';
import '../state/session_controller.dart';
import '../state/shifts_controller.dart';
import '../state/timecards_controller.dart';
import '../widgets/collapsing_header.dart';
import '../widgets/common.dart';
import '../widgets/glass_segments.dart';
import '../widgets/krow_wordmark.dart';
import '../widgets/shift_card.dart';
import 'timecard_screens.dart';
/// Clock in and out. The button unlocks 30 minutes before the shift starts,
/// and only once the worker is at the venue.
@@ -24,7 +28,11 @@ class ClockScreen extends ConsumerStatefulWidget {
ConsumerState<ClockScreen> createState() => _ClockScreenState();
}
/// The two halves of the Clock tab, as the prototype splits them.
enum _ClockTab { today, timecards }
class _ClockScreenState extends ConsumerState<ClockScreen> {
_ClockTab _tab = _ClockTab.today;
Timer? _ticker;
/// Stands in for the geofence check while there is no GPS plugin wired up.
@@ -66,56 +74,58 @@ class _ClockScreenState extends ConsumerState<ClockScreen> {
return Scaffold(
body: CustomScrollView(
slivers: [
// Already compact, so it pins at one height rather than collapsing.
// Sized with headroom over the 58px of content, so a larger system
// text scale does not push it over.
// Pins at one height: the two segments have to stay reachable, so
// there is nothing worth collapsing away. Sized with headroom for a
// large system text scale, which the eyebrow and title both grow with.
KrowSliverHeader(
expandedHeight: 96,
collapsedHeight: 96,
expandedHeight: 170,
collapsedHeight: 170,
builder: (context, t) => Padding(
padding: const EdgeInsets.fromLTRB(20, 8, 20, 16),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
Fmt.dayFull(DateTime.now()).toUpperCase(),
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: 9.5,
letterSpacing: 1.5,
fontWeight: FontWeight.w600,
color: Colors.white.withValues(alpha: 0.5),
),
),
const SizedBox(height: 4),
const Text(
'Clock in',
style: TextStyle(
fontSize: 27,
fontWeight: FontWeight.w700,
letterSpacing: -0.9,
color: Colors.white,
),
),
],
HeaderBrandLine(
// The caption reports whichever half you are looking at.
trailing: HeaderEyebrow(
_tab == _ClockTab.today
? Fmt.dayFull(DateTime.now())
: '${Fmt.monthYear(DateTime.now())} · '
'${Fmt.duration(ref.watch(hoursLoggedProvider))} logged',
),
),
HeaderIconButton(
icon: LucideIcons.fileText,
tooltip: 'Timecards',
onPressed: () => context.push('/timecards'),
const SizedBox(height: 8),
const Text(
'Clock in',
style: TextStyle(
fontSize: 27,
fontWeight: FontWeight.w700,
letterSpacing: -0.9,
color: Colors.white,
),
),
const SizedBox(height: 14),
GlassSegments<_ClockTab>(
segments: const [
(_ClockTab.today, 'Today'),
(_ClockTab.timecards, 'Timecards'),
],
value: _tab,
onChanged: (v) => setState(() => _tab = v),
),
],
),
),
),
if (shift == null)
if (_tab == _ClockTab.timecards)
SliverPadding(
padding: const EdgeInsets.fromLTRB(20, 18, 20, 28),
sliver: SliverList.list(
children: timecardItems(ref.watch(timecardsProvider)),
),
)
else if (shift == null)
const SliverPadding(
padding: EdgeInsets.fromLTRB(20, 40, 20, 20),
sliver: SliverToBoxAdapter(
@@ -168,12 +178,6 @@ class _ClockScreenState extends ConsumerState<ClockScreen> {
shift: shift,
onTap: () => context.push('/shift/${shift.id}'),
),
const SizedBox(height: 14),
OutlinedButton.icon(
onPressed: () => context.push('/timecards'),
icon: const Icon(LucideIcons.fileText, size: 18),
label: const Text('View timecards'),
),
],
),
),

70
lib/screens/compliance_screens.dart
View File

@@ -1,12 +1,16 @@
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:go_router/go_router.dart';
import 'package:image_picker/image_picker.dart';
import 'package:intl/intl.dart';
import 'package:lucide_icons_flutter/lucide_icons.dart';
import '../core/theme.dart';
import '../core/permissions.dart';
import '../models/compliance.dart';
import '../state/compliance_controller.dart';
import '../state/session_controller.dart';
import '../widgets/common.dart';
IconData _sectionIcon(ComplianceSection s) => switch (s) {
@@ -299,8 +303,12 @@ class ComplianceDetailScreen extends ConsumerWidget {
final ComplianceSection section;
final String itemId;
/// Picks a real file: the camera for a new photo, the gallery for an
/// existing one. Camera access is requested first, because image_picker
/// surfaces a refusal as a plain null and the worker would be left tapping a
/// button that silently does nothing.
Future<void> _upload(BuildContext context, WidgetRef ref) async {
final choice = await showModalBottomSheet<String>(
final source = await showModalBottomSheet<ImageSource>(
context: context,
showDragHandle: true,
builder: (context) => SafeArea(
@@ -311,29 +319,67 @@ class ComplianceDetailScreen extends ConsumerWidget {
leading: const Icon(LucideIcons.camera),
title: const Text('Take a photo'),
subtitle: const Text('It has to be the real item, worn by you'),
onTap: () => Navigator.pop(context, 'camera'),
onTap: () => Navigator.pop(context, ImageSource.camera),
),
ListTile(
leading: const Icon(LucideIcons.image),
title: const Text('Choose from library'),
onTap: () => Navigator.pop(context, 'library'),
),
ListTile(
leading: const Icon(LucideIcons.file),
title: const Text('Pick a PDF'),
onTap: () => Navigator.pop(context, 'file'),
onTap: () => Navigator.pop(context, ImageSource.gallery),
),
],
),
),
);
if (choice == null || !context.mounted) return;
if (source == null || !context.mounted) return;
final ext = choice == 'file' ? 'pdf' : 'jpg';
final slug = itemId.toLowerCase();
if (source == ImageSource.camera) {
final granted = await ref
.read(sessionProvider.notifier)
.request(AppPermission.camera);
if (!context.mounted) return;
if (!granted) {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: const Text('Camera access is off'),
action: SnackBarAction(
label: 'Settings',
onPressed: ref.read(permissionServiceProvider).openSettings,
),
),
);
return;
}
}
final XFile? picked;
try {
picked = await ImagePicker().pickImage(
source: source,
// Documents only need to be legible, and a full-resolution phone
// photo is a slow upload on a venue's wifi.
maxWidth: 2000,
imageQuality: 85,
);
} on PlatformException catch (error) {
if (!context.mounted) return;
ScaffoldMessenger.of(
context,
).showSnackBar(SnackBar(content: Text('Could not open: ${error.code}')));
return;
}
// Null means the picker was dismissed, which is not an error.
if (picked == null || !context.mounted) return;
final size = await picked.length();
if (!context.mounted) return;
ref
.read(complianceProvider.notifier)
.uploadFile(section, itemId, 'krow-$slug.$ext');
.uploadFile(
section,
itemId,
picked.name,
meta: '${(size / 1024 / 1024).toStringAsFixed(1)} MB · just now',
);
ScaffoldMessenger.of(
context,
).showSnackBar(const SnackBar(content: Text('Uploaded - sent for review')));

5
lib/screens/home_shell.dart
View File

@@ -27,15 +27,16 @@ class HomeShell extends ConsumerWidget {
i,
initialLocation: i == navigationShell.currentIndex,
),
// Must stay in the same order as the shell branches in the router.
items: [
const KrowNavItem(icon: LucideIcons.house, label: 'Today'),
const KrowNavItem(icon: LucideIcons.briefcase, label: 'Shifts'),
const KrowNavItem(icon: LucideIcons.wallet, label: 'Pay'),
const KrowNavItem(icon: LucideIcons.house, label: 'Today'),
KrowNavItem(
icon: LucideIcons.clock,
label: 'Clock',
showDot: needsReview,
),
const KrowNavItem(icon: LucideIcons.wallet, label: 'Pay'),
const KrowNavItem(icon: LucideIcons.user, label: 'Profile'),
],
),

254
lib/screens/onboarding_screens.dart
View File

@@ -2,33 +2,13 @@ import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:go_router/go_router.dart';
import 'package:lucide_icons_flutter/lucide_icons.dart';
import '../core/theme.dart';
import '../state/session_controller.dart';
/// Brand wordmark. Drawn rather than shipped as an asset so it tints cleanly
/// on either ground.
class KrowWordmark extends StatelessWidget {
const KrowWordmark({super.key, this.size = 34, this.color});
final double size;
final Color? color;
@override
Widget build(BuildContext context) {
return Text(
'KROW',
style: TextStyle(
fontSize: size,
fontWeight: FontWeight.w800,
letterSpacing: size * 0.06,
color: color ?? KrowPalette.yellow,
),
);
}
}
import '../widgets/common.dart';
import '../widgets/krow_wordmark.dart';
/// Splash. Routes on to onboarding, sign-in or the app depending on how far
/// the worker got last time.
@@ -57,10 +37,11 @@ class _SplashScreenState extends ConsumerState<SplashScreen> {
void _go() {
if (!mounted) return;
final s = ref.read(sessionProvider);
if (!s.onboardingSeen) {
// Onboarding sits between the splash and the welcome screen for anyone
// who is not signed in, rather than only on a first install — the flow is
// splash, onboarding, welcome, mobile number.
if (!s.signedIn) {
context.go('/onboarding');
} else if (!s.signedIn) {
context.go('/welcome');
} else if (!s.permissionsDone) {
context.go('/permissions');
} else {
@@ -76,7 +57,7 @@ class _SplashScreenState extends ConsumerState<SplashScreen> {
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
const KrowWordmark(size: 46),
const KrowWordmark(width: 196),
const SizedBox(height: 22),
Text(
'WORK · HIRE · ELEVATE',
@@ -107,38 +88,177 @@ class _SplashScreenState extends ConsumerState<SplashScreen> {
}
class _Slide {
const _Slide(this.eyebrow, this.title, this.body, this.icon);
const _Slide({
required this.eyebrow,
required this.title,
required this.body,
required this.art,
required this.preview,
});
final String eyebrow;
final String title;
final String body;
final IconData icon;
/// The scene behind the copy, taken from the prototype's own artwork.
final String art;
/// A sample of the thing the slide is describing, floated over the artwork.
/// Each one is a real piece of the app rather than an illustration.
final Widget preview;
}
const _slides = [
_Slide(
'Find work',
'Shifts that fit around your week.',
'Browse open hospitality shifts near you, filtered to the hours you said '
'you can work.',
LucideIcons.search,
eyebrow: 'Find work',
title: 'Shifts that fit around your week.',
body:
'Browse open hospitality shifts near you, filtered to the hours you '
'said you can work.',
art: 'assets/art/onboarding_find_work.svg',
preview: _PreviewCard(
accent: KrowPalette.yellow,
title: r'Barista · $21/hr',
subtitle: 'Zoox · tonight, 5:50 PM',
),
),
_Slide(
'Know your pay',
'See the money before you say yes.',
'Every shift shows the hourly rate and the total. No surprises on the '
eyebrow: 'Know your pay',
title: 'See the money before you say yes.',
body:
'Every shift shows the hourly rate and the total. No surprises on the '
'payslip.',
LucideIcons.banknote,
art: 'assets/art/onboarding_know_your_pay.svg',
preview: _PreviewRow(
label: 'Regular · 5h 48m',
trailing: Text(
r'$121.80',
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.w700,
letterSpacing: -0.5,
color: KrowPalette.ink,
),
),
),
),
_Slide(
'Get paid',
'Clock in on site. Paid on schedule.',
'Tap in when you arrive, tap out when you leave. Timecards submit '
eyebrow: 'Get paid',
title: 'Clock in on site. Paid on schedule.',
body:
'Tap in when you arrive, tap out when you leave. Timecards submit '
'themselves.',
LucideIcons.clock,
art: 'assets/art/onboarding_get_paid.svg',
preview: _PreviewRow(label: 'Paid 26 Aug', trailing: StatusChip('On time')),
),
];
/// A miniature shift card, matching the one used throughout the app: identity
/// rail down the side, role and venue stacked.
class _PreviewCard extends StatelessWidget {
const _PreviewCard({
required this.accent,
required this.title,
required this.subtitle,
});
final Color accent;
final String title;
final String subtitle;
@override
Widget build(BuildContext context) {
return Container(
width: 218,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(14),
boxShadow: [
BoxShadow(
color: KrowPalette.blueDeep.withValues(alpha: 0.35),
blurRadius: 24,
offset: const Offset(0, 10),
),
],
),
clipBehavior: Clip.antiAlias,
child: Row(
children: [
Container(width: 6, height: 62, color: accent),
Expanded(
child: Padding(
padding: const EdgeInsets.fromLTRB(12, 11, 12, 11),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Text(
title,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: const TextStyle(
fontSize: 14,
fontWeight: FontWeight.w700,
letterSpacing: -0.3,
),
),
const SizedBox(height: 2),
Text(
subtitle,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: const TextStyle(
fontSize: 11.5,
color: KrowPalette.mute,
),
),
],
),
),
),
],
),
);
}
}
/// A single floated row: a label and a figure or status.
class _PreviewRow extends StatelessWidget {
const _PreviewRow({required this.label, required this.trailing});
final String label;
final Widget trailing;
@override
Widget build(BuildContext context) {
return Container(
padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 11),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(14),
boxShadow: [
BoxShadow(
color: KrowPalette.blueDeep.withValues(alpha: 0.35),
blurRadius: 24,
offset: const Offset(0, 10),
),
],
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Text(
label,
style: const TextStyle(fontSize: 12.5, fontWeight: FontWeight.w600),
),
const SizedBox(width: 14),
trailing,
],
),
);
}
}
class OnboardingScreen extends ConsumerStatefulWidget {
const OnboardingScreen({super.key});
@@ -156,10 +276,7 @@ class _OnboardingScreenState extends ConsumerState<OnboardingScreen> {
super.dispose();
}
void _finish() {
ref.read(sessionProvider.notifier).completeOnboarding();
context.go('/welcome');
}
void _finish() => context.go('/welcome');
@override
Widget build(BuildContext context) {
@@ -175,7 +292,7 @@ class _OnboardingScreenState extends ConsumerState<OnboardingScreen> {
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
const KrowWordmark(size: 20),
const KrowWordmark(width: 66),
TextButton(
onPressed: _finish,
style: TextButton.styleFrom(
@@ -194,20 +311,37 @@ class _OnboardingScreenState extends ConsumerState<OnboardingScreen> {
onPageChanged: (i) => setState(() => _page = i),
itemBuilder: (context, i) {
final slide = _slides[i];
return Center(
child: Container(
width: 190,
height: 190,
decoration: BoxDecoration(
color: Colors.white.withValues(alpha: 0.10),
shape: BoxShape.circle,
// Artwork behind, with a real piece of the app floated over
// the bottom-right of it — the prototype's hero layout.
return Stack(
fit: StackFit.expand,
children: [
// Cropped rather than letterboxed, so the scene fills the
// hero on any aspect ratio the way the prototype does.
SvgPicture.asset(
slide.art,
fit: BoxFit.cover,
alignment: Alignment.topCenter,
),
child: Icon(
slide.icon,
size: 76,
color: KrowPalette.yellow,
// Veil: darkens the foot of the artwork so the floated
// card and the sheet below it keep their edges.
const Positioned(
left: 0,
right: 0,
bottom: 0,
height: 140,
child: DecoratedBox(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [Color(0x0022366F), Color(0xF022366F)],
),
),
),
),
),
Positioned(right: 20, bottom: 24, child: slide.preview),
],
);
},
),
@@ -322,7 +456,7 @@ class WelcomeScreen extends StatelessWidget {
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const KrowWordmark(size: 40),
const KrowWordmark(width: 150),
const SizedBox(height: 34),
const Text(
'Work the shifts\nyou actually want.',

21
lib/screens/pay_screens.dart
View File

@@ -12,22 +12,25 @@ import '../state/shifts_controller.dart';
import '../widgets/collapsing_header.dart';
import '../widgets/common.dart';
import '../widgets/glass_segments.dart';
import '../widgets/krow_wordmark.dart';
enum PayRange { week, month, year, all }
/// Declared in the order the segments are shown, which is the prototype's:
/// All first, then narrowing.
enum PayRange { all, week, month, year }
extension on PayRange {
String get label => switch (this) {
PayRange.all => 'All',
PayRange.week => 'Week',
PayRange.month => 'Month',
PayRange.year => 'Year',
PayRange.all => 'All',
};
Duration get window => switch (this) {
PayRange.all => const Duration(days: 3650),
PayRange.week => const Duration(days: 7),
PayRange.month => const Duration(days: 30),
PayRange.year => const Duration(days: 365),
PayRange.all => const Duration(days: 3650),
};
}
@@ -86,16 +89,10 @@ class _PayScreenState extends ConsumerState<PayScreen> {
expanded: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'ESTIMATED GROSS PAY · PRE-TAX',
style: TextStyle(
fontSize: 9.5,
letterSpacing: 1.5,
fontWeight: FontWeight.w600,
color: Colors.white.withValues(alpha: 0.5),
),
const HeaderBrandLine(
trailing: HeaderEyebrow('Gross pay · pre-tax'),
),
const SizedBox(height: 5),
const SizedBox(height: 6),
Text(
Fmt.money(paid + pending),
style: const TextStyle(

12
lib/screens/profile_screen.dart
View File

@@ -8,6 +8,7 @@ import '../state/compliance_controller.dart';
import '../state/profile_controller.dart';
import '../widgets/collapsing_header.dart';
import '../widgets/common.dart';
import '../widgets/krow_wordmark.dart';
class ProfileScreen extends ConsumerWidget {
const ProfileScreen({super.key});
@@ -69,11 +70,14 @@ class ProfileScreen extends ConsumerWidget {
// row it added 46px the header could not afford.
Positioned(
top: 0,
left: 0,
right: 0,
child: HeaderIconButton(
icon: LucideIcons.settings,
tooltip: 'Settings',
onPressed: () => context.push('/settings'),
child: HeaderBrandLine(
trailing: HeaderIconButton(
icon: LucideIcons.settings,
tooltip: 'Settings',
onPressed: () => context.push('/settings'),
),
),
),
Column(

173
lib/screens/requirements_screen.dart Normal file
View File

@@ -0,0 +1,173 @@
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:go_router/go_router.dart';
import 'package:lucide_icons_flutter/lucide_icons.dart';
import '../core/theme.dart';
import '../models/compliance.dart';
import '../state/compliance_controller.dart';
import '../state/shifts_controller.dart';
import '../widgets/common.dart';
import 'shift_detail_screen.dart';
/// Everything one business asks for, on its own screen.
///
/// The shift page shows the same check inline; this is the full read, grouped
/// the way the compliance hub groups things, so it is obvious *which* kind of
/// item is missing and where to go and fix it.
class RequirementsScreen extends ConsumerWidget {
const RequirementsScreen({super.key, required this.shiftId});
final String shiftId;
@override
Widget build(BuildContext context, WidgetRef ref) {
final shift = ref.watch(shiftsProvider.notifier).byId(shiftId);
if (shift == null) {
return Scaffold(
appBar: AppBar(),
body: const Center(child: Text('That shift is no longer listed.')),
);
}
final compliance = ref.watch(complianceProvider);
/// The items this shift needs, split by which compliance section they
/// belong to, so each group can be labelled and linked separately.
List<ComplianceItem> group(ComplianceSection section) => compliance
.section(section)
.where((i) => shift.requirements.contains(i.title))
.toList();
final groups = <(ComplianceSection, String, List<ComplianceItem>)>[
(
ComplianceSection.documents,
'Documents',
group(ComplianceSection.documents),
),
(ComplianceSection.wardrobe, 'Attire', group(ComplianceSection.wardrobe)),
(
ComplianceSection.certificates,
'Certificates',
group(ComplianceSection.certificates),
),
];
return Scaffold(
appBar: AppBar(
title: const Text('Requirements'),
actions: [
Padding(
padding: const EdgeInsets.only(right: 16),
child: Center(
child: IconButton(
onPressed: () => context.push('/support'),
icon: const Icon(LucideIcons.messageCircle, size: 20),
tooltip: 'Message the manager',
),
),
),
],
),
body: ListView(
padding: const EdgeInsets.fromLTRB(20, 8, 20, 28),
children: [
Text(
'${shift.role} at ${shift.business}',
style: const TextStyle(
fontSize: 22,
fontWeight: FontWeight.w700,
letterSpacing: -0.7,
),
),
const SizedBox(height: 16),
// The same summary the shift page shows, so the two never disagree.
ShiftRequirements(shift: shift),
for (final (section, label, items) in groups)
if (items.isNotEmpty) ...[
SectionLabel(
label,
trailing: TextButton(
onPressed: () => context.push('/compliance/${section.name}'),
child: const Text('Manage'),
),
),
KrowCard(
padding: const EdgeInsets.symmetric(horizontal: 16),
child: Column(
children: [
for (var i = 0; i < items.length; i++) ...[
if (i > 0) const Divider(height: 1),
_RequirementRow(item: items[i]),
],
],
),
),
],
const SizedBox(height: 16),
const InfoBanner(
'These are shared with the business only while you are booked on '
'one of their shifts.',
),
],
),
);
}
}
class _RequirementRow extends StatelessWidget {
const _RequirementRow({required this.item});
final ComplianceItem item;
@override
Widget build(BuildContext context) {
final ok = item.state == ComplianceState.verified;
return Padding(
padding: const EdgeInsets.symmetric(vertical: 11),
child: Row(
children: [
Container(
width: 22,
height: 22,
decoration: BoxDecoration(
color: ok ? KrowPalette.blueTint : const Color(0xFFF7E4AE),
borderRadius: BorderRadius.circular(7),
),
child: Icon(
ok ? LucideIcons.check : LucideIcons.clock,
size: 12,
color: ok ? KrowPalette.blue : KrowPalette.ink,
),
),
const SizedBox(width: 12),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
item.title,
style: const TextStyle(
fontSize: 14,
fontWeight: FontWeight.w600,
),
),
const SizedBox(height: 1),
Text(
item.subtitle,
style: const TextStyle(
fontSize: 12,
height: 1.4,
color: KrowPalette.mute,
),
),
],
),
),
const SizedBox(width: 8),
StatusChip(item.badge, tone: ok ? ChipTone.neutral : ChipTone.yellow),
],
),
);
}
}

41
lib/screens/settings_screens.dart
View File

@@ -3,6 +3,7 @@ import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:go_router/go_router.dart';
import 'package:lucide_icons_flutter/lucide_icons.dart';
import '../core/permissions.dart';
import '../core/theme.dart';
import '../state/profile_controller.dart';
import '../state/seed.dart';
@@ -11,13 +12,41 @@ import '../state/shifts_controller.dart';
import '../state/timecards_controller.dart';
import '../widgets/common.dart';
class SettingsScreen extends ConsumerWidget {
class SettingsScreen extends ConsumerStatefulWidget {
const SettingsScreen({super.key});
@override
Widget build(BuildContext context, WidgetRef ref) {
final session = ref.watch(sessionProvider);
ConsumerState<SettingsScreen> createState() => _SettingsScreenState();
}
class _SettingsScreenState extends ConsumerState<SettingsScreen> {
@override
void initState() {
super.initState();
// A permission can be revoked in system settings while the app is closed,
// so the switches are re-read from the OS rather than trusted from cache.
WidgetsBinding.instance.addPostFrameCallback((_) {
ref.read(sessionProvider.notifier).refresh();
});
}
/// The OS has no API to revoke a permission, and re-requesting a granted one
/// does nothing — so the switch hands off to the system settings page for
/// anything it cannot do itself.
Future<void> _toggle(AppPermission permission, bool value) async {
final notifier = ref.read(sessionProvider.notifier);
if (!value) {
await ref.read(permissionServiceProvider).openSettings();
return;
}
final granted = await notifier.request(permission);
if (granted || !mounted) return;
await ref.read(permissionServiceProvider).openSettings();
}
@override
Widget build(BuildContext context) {
final session = ref.watch(sessionProvider);
final profile = ref.watch(profileProvider);
final reviewCount = ref.watch(timecardsNeedingReviewProvider).length;
@@ -44,7 +73,7 @@ class SettingsScreen extends ConsumerWidget {
title: 'Location',
subtitle: 'Needed to clock in at the venue',
value: session.locationGranted,
onChanged: (v) => v ? notifier.grantLocation() : null,
onChanged: (v) => _toggle(AppPermission.location, v),
),
const Divider(height: 1),
_SwitchRow(
@@ -52,7 +81,7 @@ class SettingsScreen extends ConsumerWidget {
title: 'Notifications',
subtitle: 'Shift offers, reminders and pay alerts',
value: session.notificationsGranted,
onChanged: (v) => v ? notifier.grantNotifications() : null,
onChanged: (v) => _toggle(AppPermission.notifications, v),
),
const Divider(height: 1),
_SwitchRow(
@@ -60,7 +89,7 @@ class SettingsScreen extends ConsumerWidget {
title: 'Camera',
subtitle: 'Photograph documents and attire',
value: session.cameraGranted,
onChanged: (v) => v ? notifier.grantCamera() : null,
onChanged: (v) => _toggle(AppPermission.camera, v),
),
],
),

16
lib/screens/shift_detail_screen.dart
View File

@@ -152,8 +152,15 @@ class ShiftDetailScreen extends ConsumerWidget {
],
),
),
const SectionLabel('Requirements'),
_Requirements(shift: shift),
SectionLabel(
'Requirements',
trailing: TextButton(
onPressed: () =>
context.push('/shift/${shift.id}/requirements'),
child: const Text('See all'),
),
),
ShiftRequirements(shift: shift),
const SizedBox(height: 18),
_Actions(shift: shift),
],
@@ -166,8 +173,9 @@ class ShiftDetailScreen extends ConsumerWidget {
}
/// What this business asks for, checked against what is already on file.
class _Requirements extends ConsumerWidget {
const _Requirements({required this.shift});
/// Shown inline on the shift, and on its own screen from the link above it.
class ShiftRequirements extends ConsumerWidget {
const ShiftRequirements({super.key, required this.shift});
final Shift shift;

13
lib/screens/shifts_screen.dart
View File

@@ -10,6 +10,7 @@ import '../models/shift.dart';
import '../state/shifts_controller.dart';
import '../widgets/common.dart';
import '../widgets/glass_segments.dart';
import '../widgets/krow_wordmark.dart';
import '../widgets/shift_card.dart';
import '../widgets/week_strip.dart';
@@ -54,16 +55,10 @@ class _ShiftsScreenState extends ConsumerState<ShiftsScreen> {
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
Fmt.monthYear(DateTime.now()).toUpperCase(),
style: TextStyle(
fontSize: 9.5,
letterSpacing: 1.6,
fontWeight: FontWeight.w600,
color: Colors.white.withValues(alpha: 0.5),
),
HeaderBrandLine(
trailing: HeaderEyebrow(Fmt.monthYear(DateTime.now())),
),
const SizedBox(height: 4),
const SizedBox(height: 8),
const Text(
'Shifts',
style: TextStyle(

43
lib/screens/timecard_screens.dart
View File

@@ -33,27 +33,36 @@ class TimecardsScreen extends ConsumerWidget {
),
],
),
body: cards.isEmpty
? const Padding(
padding: EdgeInsets.all(20),
child: EmptyState(
icon: LucideIcons.fileText,
title: 'No timecards yet',
message: 'One is filed automatically every time you clock out.',
),
)
: ListView.separated(
padding: const EdgeInsets.fromLTRB(20, 16, 20, 28),
itemCount: cards.length,
separatorBuilder: (_, _) => const SizedBox(height: 11),
itemBuilder: (context, i) => _TimecardTile(card: cards[i]),
),
body: ListView(
padding: const EdgeInsets.fromLTRB(20, 16, 20, 28),
children: timecardItems(cards),
),
);
}
}
class _TimecardTile extends StatelessWidget {
const _TimecardTile({required this.card});
/// The timecard list as plain children, so the Clock tab can drop them into
/// its sliver list and the pushed screen into a ListView, with one layout.
List<Widget> timecardItems(List<Timecard> cards) {
if (cards.isEmpty) {
return const [
EmptyState(
icon: LucideIcons.fileText,
title: 'No timecards yet',
message: 'One is filed automatically every time you clock out.',
),
];
}
return [
for (var i = 0; i < cards.length; i++) ...[
if (i > 0) const SizedBox(height: 11),
TimecardTile(card: cards[i]),
],
];
}
class TimecardTile extends StatelessWidget {
const TimecardTile({super.key, required this.card});
final Timecard card;

28
lib/screens/today_screen.dart
View File

@@ -13,10 +13,15 @@ import '../state/shifts_controller.dart';
import '../widgets/collapsing_header.dart';
import '../widgets/common.dart';
import '../widgets/shift_card.dart';
import '../widgets/krow_wordmark.dart';
class TodayScreen extends ConsumerWidget {
const TodayScreen({super.key});
/// Brand line (40) + gap + identity row (44) + gap + stats, plus 6/18
/// padding.
static const _expandedHeader = 188.0;
String _greeting() {
final h = DateTime.now().hour;
if (h < 12) return 'Good morning';
@@ -39,16 +44,24 @@ class TodayScreen extends ConsumerWidget {
body: CustomScrollView(
slivers: [
KrowSliverHeader(
expandedHeight: 152,
expandedHeight: _expandedHeader,
collapsedHeight: 60,
builder: (context, t) => HeaderCrossFade(
t: t,
expandedHeight: 152,
expandedHeight: _expandedHeader,
expanded: Padding(
padding: const EdgeInsets.fromLTRB(20, 8, 20, 20),
padding: const EdgeInsets.fromLTRB(20, 6, 20, 18),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
HeaderBrandLine(
trailing: HeaderIconButton(
icon: LucideIcons.messageCircle,
tooltip: 'Support',
onPressed: () => context.push('/support'),
),
),
const SizedBox(height: 14),
Row(
children: [
_Avatar(worker.initials),
@@ -69,6 +82,8 @@ class TodayScreen extends ConsumerWidget {
const SizedBox(height: 2),
Text(
worker.name,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: const TextStyle(
fontSize: 22,
fontWeight: FontWeight.w700,
@@ -79,14 +94,9 @@ class TodayScreen extends ConsumerWidget {
],
),
),
HeaderIconButton(
icon: LucideIcons.messageCircle,
tooltip: 'Support',
onPressed: () => context.push('/support'),
),
],
),
const SizedBox(height: 18),
const SizedBox(height: 16),
Row(
children: [
// Flexible, not free-sized: on a 320px screen the two

9
lib/state/compliance_controller.dart
View File

@@ -104,7 +104,12 @@ class ComplianceController extends Notifier<ComplianceData> {
/// Stand-in for the camera / file picker: attaching a file sends the item
/// back for review.
void uploadFile(ComplianceSection section, String id, String fileName) {
void uploadFile(
ComplianceSection section,
String id,
String fileName, {
String? meta,
}) {
_update(
section,
id,
@@ -112,7 +117,7 @@ class ComplianceController extends Notifier<ComplianceData> {
state: ComplianceState.pending,
statusLabel: 'In review',
fileName: fileName,
fileMeta: 'Uploaded just now',
fileMeta: meta ?? 'Uploaded just now',
),
);
}

52
lib/state/session_controller.dart
View File

@@ -1,6 +1,8 @@
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:shared_preferences/shared_preferences.dart';
import '../core/permissions.dart';
/// Injected in `main()` once SharedPreferences has loaded.
final prefsProvider = Provider<SharedPreferences>(
(ref) => throw UnimplementedError('prefsProvider must be overridden'),
@@ -8,7 +10,6 @@ final prefsProvider = Provider<SharedPreferences>(
class SessionState {
const SessionState({
this.onboardingSeen = false,
this.phone,
this.signedIn = false,
this.locationGranted = false,
@@ -16,7 +17,6 @@ class SessionState {
this.cameraGranted = false,
});
final bool onboardingSeen;
final String? phone;
final bool signedIn;
final bool locationGranted;
@@ -28,14 +28,12 @@ class SessionState {
locationGranted && notificationsGranted && cameraGranted;
SessionState copyWith({
bool? onboardingSeen,
String? phone,
bool? signedIn,
bool? locationGranted,
bool? notificationsGranted,
bool? cameraGranted,
}) => SessionState(
onboardingSeen: onboardingSeen ?? this.onboardingSeen,
phone: phone ?? this.phone,
signedIn: signedIn ?? this.signedIn,
locationGranted: locationGranted ?? this.locationGranted,
@@ -45,7 +43,6 @@ class SessionState {
}
class SessionController extends Notifier<SessionState> {
static const _kOnboarding = 'onboarding_seen';
static const _kPhone = 'phone';
static const _kSignedIn = 'signed_in';
static const _kLocation = 'perm_location';
@@ -58,7 +55,6 @@ class SessionController extends Notifier<SessionState> {
SessionState build() {
final p = _prefs;
return SessionState(
onboardingSeen: p.getBool(_kOnboarding) ?? false,
phone: p.getString(_kPhone),
signedIn: p.getBool(_kSignedIn) ?? false,
locationGranted: p.getBool(_kLocation) ?? false,
@@ -67,11 +63,6 @@ class SessionController extends Notifier<SessionState> {
);
}
void completeOnboarding() {
_prefs.setBool(_kOnboarding, true);
state = state.copyWith(onboardingSeen: true);
}
/// The demo backend accepts any 10-digit number and always sends `123456`.
static const demoCode = '123456';
@@ -88,19 +79,40 @@ class SessionController extends Notifier<SessionState> {
return true;
}
void grantLocation() {
_prefs.setBool(_kLocation, true);
state = state.copyWith(locationGranted: true);
/// Asks the OS, then records what it actually said.
///
/// The stored flag is a cache for the UI, never the source of truth — the
/// user can revoke a permission in system settings without the app running,
/// so [refresh] re-reads the real status whenever a screen needs it.
Future<bool> request(AppPermission permission) async {
final granted = await ref
.read(permissionServiceProvider)
.request(permission);
_record(permission, granted);
return granted;
}
void grantNotifications() {
_prefs.setBool(_kNotifications, true);
state = state.copyWith(notificationsGranted: true);
/// Re-reads all three from the OS. Called when a screen that shows their
/// state appears, so a change made in system settings is picked up.
Future<void> refresh() async {
final service = ref.read(permissionServiceProvider);
for (final permission in AppPermission.values) {
_record(permission, await service.isGranted(permission));
}
}
void grantCamera() {
_prefs.setBool(_kCamera, true);
state = state.copyWith(cameraGranted: true);
void _record(AppPermission permission, bool granted) {
switch (permission) {
case AppPermission.location:
_prefs.setBool(_kLocation, granted);
state = state.copyWith(locationGranted: granted);
case AppPermission.notifications:
_prefs.setBool(_kNotifications, granted);
state = state.copyWith(notificationsGranted: granted);
case AppPermission.camera:
_prefs.setBool(_kCamera, granted);
state = state.copyWith(cameraGranted: granted);
}
}
Future<void> signOut() async {

134
lib/widgets/krow_nav_bar.dart
View File

@@ -43,6 +43,9 @@ class KrowNavBar extends StatelessWidget {
/// of pixels apart.
static const _topPadding = 12.0;
static const _labelSize = 11.0;
static const _dotSlot = 6.0;
/// Lets tests find the travelling indicator unambiguously.
static const indicatorKey = ValueKey('krow-nav-indicator');
@@ -55,74 +58,75 @@ class KrowNavBar extends StatelessWidget {
),
child: SafeArea(
top: false,
child: SizedBox(
height: 76,
child: LayoutBuilder(
builder: (context, constraints) {
final slot = constraints.maxWidth / items.length;
// No fixed height: the Stack below takes the height of the item row,
// and the pill is positioned within it. A hard number here has to be
// retuned every time the label grows — a bigger text scale, a longer
// word, a different font — and overflows the moment it is not.
child: LayoutBuilder(
builder: (context, constraints) {
final slot = constraints.maxWidth / items.length;
// The selected index animated as a double, so the pill's
// position and every icon's colour come from one value.
return TweenAnimationBuilder<double>(
tween: Tween(end: currentIndex.toDouble()),
duration: const Duration(milliseconds: 360),
curve: Curves.easeOutQuint,
builder: (context, position, _) {
final travel = (position - position.roundToDouble()).abs();
final stretch = 20 * (travel * 2);
// The selected index animated as a double, so the pill's
// position and every icon's colour come from one value.
return TweenAnimationBuilder<double>(
tween: Tween(end: currentIndex.toDouble()),
duration: const Duration(milliseconds: 360),
curve: Curves.easeOutQuint,
builder: (context, position, _) {
final travel = (position - position.roundToDouble()).abs();
final stretch = 20 * (travel * 2);
return Stack(
children: [
Positioned(
left:
position * slot +
(slot - _pillWidth) / 2 -
stretch / 2,
top: _topPadding,
width: _pillWidth + stretch,
height: _pillHeight,
child: DecoratedBox(
key: indicatorKey,
decoration: BoxDecoration(
color: KrowPalette.blue,
borderRadius: BorderRadius.circular(10),
boxShadow: [
BoxShadow(
color: KrowPalette.blue.withValues(alpha: 0.28),
blurRadius: 12,
offset: const Offset(0, 4),
),
],
),
return Stack(
children: [
Positioned(
left:
position * slot +
(slot - _pillWidth) / 2 -
stretch / 2,
top: _topPadding,
width: _pillWidth + stretch,
height: _pillHeight,
child: DecoratedBox(
key: indicatorKey,
decoration: BoxDecoration(
color: KrowPalette.blue,
borderRadius: BorderRadius.circular(10),
boxShadow: [
BoxShadow(
color: KrowPalette.blue.withValues(alpha: 0.28),
blurRadius: 12,
offset: const Offset(0, 4),
),
],
),
),
Row(
children: [
for (var i = 0; i < items.length; i++)
Expanded(
child: _NavItem(
item: items[i],
// 1 when the pill is centred on this tab.
proximity: (1 - (position - i).abs()).clamp(
0.0,
1.0,
),
onTap: () {
if (i != currentIndex) {
HapticFeedback.selectionClick();
}
onSelect(i);
},
),
Row(
children: [
for (var i = 0; i < items.length; i++)
Expanded(
child: _NavItem(
item: items[i],
// 1 when the pill is centred on this tab.
proximity: (1 - (position - i).abs()).clamp(
0.0,
1.0,
),
onTap: () {
if (i != currentIndex) {
HapticFeedback.selectionClick();
}
onSelect(i);
},
),
],
),
],
);
},
);
},
),
),
],
),
],
);
},
);
},
),
),
);
@@ -171,6 +175,7 @@ class _NavItem extends StatelessWidget {
// Started from the top rather than centred, so the icon sits exactly
// where the pill is drawn.
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
const SizedBox(height: KrowNavBar._topPadding),
SizedBox(
@@ -181,7 +186,7 @@ class _NavItem extends StatelessWidget {
// The dot's slot is always reserved, so tabs with and without one
// keep their labels on the same line.
SizedBox(
height: 6,
height: KrowNavBar._dotSlot,
child: Center(
child: AnimatedScale(
scale: item.showDot ? 1 : 0,
@@ -202,11 +207,12 @@ class _NavItem extends StatelessWidget {
Text(
item.label,
style: TextStyle(
fontSize: 11,
fontSize: KrowNavBar._labelSize,
fontWeight: proximity > 0.5 ? FontWeight.w600 : FontWeight.w500,
color: labelColor,
),
),
const SizedBox(height: 4),
],
),
),

78
lib/widgets/krow_wordmark.dart Normal file
View File

@@ -0,0 +1,78 @@
import 'package:flutter/material.dart';
import '../core/theme.dart';
/// The brand wordmark.
///
/// The asset is an alpha mask — the shape lives in the alpha channel — so one
/// file tints to any colour. `Image.asset` blends a `color` with `srcIn` by
/// default, which is the same thing the brand sheet did with a CSS mask.
///
/// Sized by width, because the mark is a fixed 3.06:1 and the width is what
/// has to sit within a layout.
class KrowWordmark extends StatelessWidget {
const KrowWordmark({super.key, this.width = 132, this.color});
final double width;
final Color? color;
@override
Widget build(BuildContext context) {
return Image.asset(
'assets/images/krow_logo.png',
width: width,
color: color ?? KrowPalette.yellow,
filterQuality: FilterQuality.medium,
semanticLabel: 'KROW',
);
}
}
/// The line that tops each main tab: the wordmark on the left, and whatever
/// that tab already had up there on the right — an action button, or its
/// caption. Putting the mark on the existing line rather than a new one keeps
/// the brand consistent across tabs without spending header height on it.
class HeaderBrandLine extends StatelessWidget {
const HeaderBrandLine({super.key, this.trailing});
final Widget? trailing;
@override
Widget build(BuildContext context) {
return Row(
children: [
// White rather than yellow: the accent is already carrying the avatar
// and the money figures, and a third yellow element leads nowhere.
const KrowWordmark(width: 62, color: Colors.white),
const SizedBox(width: 12),
if (trailing != null)
Expanded(
child: Align(alignment: Alignment.centerRight, child: trailing),
),
],
);
}
}
/// The small uppercase caption that sits beside the wordmark on a tab header.
class HeaderEyebrow extends StatelessWidget {
const HeaderEyebrow(this.text, {super.key});
final String text;
@override
Widget build(BuildContext context) {
return Text(
text.toUpperCase(),
maxLines: 1,
overflow: TextOverflow.ellipsis,
textAlign: TextAlign.right,
style: TextStyle(
fontSize: 9.5,
letterSpacing: 1.5,
fontWeight: FontWeight.w600,
color: Colors.white.withValues(alpha: 0.5),
),
);
}
}