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

apps/mobile/packages/design_system/lib/design_system.dart

@@ -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';

apps/mobile/packages/design_system/lib/src/ui_typography.dart

@@ -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,

apps/mobile/packages/design_system/lib/src/widgets/ui_empty_state.dart

@@ -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,
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}

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

@@ -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>(
+                              PlaceholderBanner(
-                        builder: (context, state) {
-                          if (state.isProfileComplete) return const SizedBox();
-                          return 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),
                         ],
+                      );
+                    },
                   ),
                 ),
               ],

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

@@ -28,10 +28,7 @@ class BankAccountPage extends StatelessWidget {
     final dynamic strings = t.staff.profile.bank_account_page;
 
     return Scaffold(
-      appBar: UiAppBar(
+      appBar: UiAppBar(title: strings.title, showBackButton: true),
-        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(
+                        const UiEmptyState(
-                          child: Padding(
+                          icon: UiIcons.building,
-                            padding: const EdgeInsets.symmetric(
+                          title: 'No accounts yet',
-                              vertical: UiConstants.space10,
+                          description:
-                            ),
-                            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(
                               '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(
+                          (StaffBankAccount account) =>
-                            account: account,
+                              AccountCard(account: account, strings: strings),
-                            strings: strings,
-                          ),
                         ),
                       ],
                       // Add extra padding at bottom