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

feat: Add UiEmptyState widget and integrate it into BankAccountPage and WorkerHomePage for improved empty state handling

Browse Source
This commit is contained in:
Achintha Isuru
2026-03-01 03:22:48 -05:00
parent 015f1fbc1b
commit 2c61baaaa9
5 changed files with 240 additions and 183 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
apps/mobile/packages/design_system/lib/design_system.dart
View File

@@ -13,3 +13,4 @@ export 'src/widgets/ui_chip.dart';
export 'src/widgets/ui_loading_page.dart';
export 'src/widgets/ui_snackbar.dart';
export 'src/widgets/ui_notice_banner.dart';
export 'src/widgets/ui_empty_state.dart';

9
apps/mobile/packages/design_system/lib/src/ui_typography.dart
View File

@@ -131,6 +131,15 @@ class UiTypography {
color: UiColors.textPrimary,
);
/// Title 1 Bold - Font: Instrument Sans, Size: 16, Height: 1.5 (#121826)
/// Used for section headers and important labels.
static final TextStyle title1b = _primaryBase.copyWith(
fontWeight: FontWeight.w600,
fontSize: 18,
height: 1.5,
color: UiColors.textPrimary,
);
/// Title 2 Bold - Font: Instrument Sans, Size: 20, Height: 1.1 (#121826)
static final TextStyle title2b = _primaryBase.copyWith(
fontWeight: FontWeight.w600,

44
apps/mobile/packages/design_system/lib/src/widgets/ui_empty_state.dart Normal file
View File

@@ -0,0 +1,44 @@
import 'package:design_system/design_system.dart';
import 'package:flutter/material.dart';
class UiEmptyState extends StatelessWidget {
const UiEmptyState({
super.key,
required this.icon,
required this.title,
required this.description,
this.iconColor,
});
final IconData icon;
final String title;
final String description;
final Color? iconColor;
@override
Widget build(BuildContext context) {
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(icon, size: 64, color: iconColor ?? UiColors.iconDisabled),
const SizedBox(height: UiConstants.space5),
Text(
title,
style: UiTypography.title1b.textDescription,
textAlign: TextAlign.center,
),
const SizedBox(height: UiConstants.space1),
Padding(
padding: const EdgeInsets.symmetric(horizontal: UiConstants.space4),
child: Text(
description,
style: UiTypography.body2m.textDescription,
textAlign: TextAlign.center,
),
),
],
),
);
}
}

37
apps/mobile/packages/features/staff/home/lib/src/presentation/pages/worker_home_page.dart
View File

@@ -61,12 +61,17 @@ class WorkerHomePage extends StatelessWidget {
horizontal: UiConstants.space4,
vertical: UiConstants.space4,
),
child: BlocBuilder<HomeCubit, HomeState>(
buildWhen: (previous, current) =>
previous.isProfileComplete != current.isProfileComplete,
builder: (context, state) {
if (!state.isProfileComplete) {
return SizedBox(
height: MediaQuery.of(context).size.height -
300,
child: Column(
children: [
BlocBuilder<HomeCubit, HomeState>(
builder: (context, state) {
if (state.isProfileComplete) return const SizedBox();
return PlaceholderBanner(
PlaceholderBanner(
title: bannersI18n.complete_profile_title,
subtitle: bannersI18n.complete_profile_subtitle,
bg: UiColors.primaryInverse,
@@ -74,7 +79,29 @@ class WorkerHomePage extends StatelessWidget {
onTap: () {
Modular.to.toProfile();
},
),
const SizedBox(height: UiConstants.space10),
Expanded(
child: UiEmptyState(
icon: UiIcons.users,
title: 'Complete Your Profile',
description: 'Finish setting up your profile to unlock shifts, view earnings, and start earning today.',
),
),
],
),
);
}
return Column(
children: [
PlaceholderBanner(
title: bannersI18n.complete_profile_title,
subtitle: bannersI18n.complete_profile_subtitle,
bg: UiColors.primaryInverse,
accent: UiColors.primary,
onTap: () {
Modular.to.toProfile();
},
),
@@ -224,6 +251,8 @@ class WorkerHomePage extends StatelessWidget {
),
const SizedBox(height: UiConstants.space6),
],
);
},
),
),
],

42
apps/mobile/packages/features/staff/profile_sections/finances/staff_bank_account/lib/src/presentation/pages/bank_account_page.dart
View File

@@ -28,10 +28,7 @@ class BankAccountPage extends StatelessWidget {
final dynamic strings = t.staff.profile.bank_account_page;
return Scaffold(
appBar: UiAppBar(
title: strings.title,
showBackButton: true,
),
appBar: UiAppBar(title: strings.title, showBackButton: true),
body: BlocConsumer<BankAccountCubit, BankAccountState>(
bloc: cubit,
listener: (BuildContext context, BankAccountState state) {
@@ -81,34 +78,13 @@ class BankAccountPage extends StatelessWidget {
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SecurityNotice(strings: strings),
const SizedBox(height: UiConstants.space6),
const SizedBox(height: UiConstants.space32),
if (state.accounts.isEmpty)
Center(
child: Padding(
padding: const EdgeInsets.symmetric(
vertical: UiConstants.space10,
),
child: Column(
children: <Widget>[
const Icon(
UiIcons.building,
size: 48,
color: UiColors.iconSecondary,
),
const SizedBox(height: UiConstants.space4),
Text(
'No accounts yet',
style: UiTypography.headline4m,
textAlign: TextAlign.center,
),
Text(
const UiEmptyState(
icon: UiIcons.building,
title: 'No accounts yet',
description:
'Add your first bank account to get started',
style: UiTypography.body2m.textSecondary,
textAlign: TextAlign.center,
),
],
),
),
)
else ...<Widget>[
Text(
@@ -119,10 +95,8 @@ class BankAccountPage extends StatelessWidget {
),
const SizedBox(height: UiConstants.space3),
...state.accounts.map<Widget>(
(StaffBankAccount account) => AccountCard(
account: account,
strings: strings,
),
(StaffBankAccount account) =>
AccountCard(account: account, strings: strings),
),
],
// Add extra padding at bottom