refactor: update billing module routes to use ClientPaths.childRoute and refactor PendingInvoicesPage to use UiAppBar and ListView.builder.

apps/mobile/packages/features/client/billing/lib/src/billing_module.dart

@@ -22,8 +22,6 @@ import 'presentation/pages/pending_invoices_page.dart';
 class BillingModule extends Module {
   @override
   void binds(Injector i) {
-
-
     // Repositories
     i.addSingleton<BillingRepository>(BillingRepositoryImpl.new);
 
@@ -54,9 +52,22 @@ class BillingModule extends Module {
 
   @override
   void routes(RouteManager r) {
-    r.child(ClientPaths.childRoute(ClientPaths.billing, ClientPaths.billing), child: (_) => const BillingPage());
-    r.child('/completion-review', child: (_) => ShiftCompletionReviewPage(invoice: r.args.data as BillingInvoice?));
-    r.child('/invoice-ready', child: (_) => const InvoiceReadyPage());
-    r.child('/awaiting-approval', child: (_) => const PendingInvoicesPage());
+    r.child(
+      ClientPaths.childRoute(ClientPaths.billing, ClientPaths.billing),
+      child: (_) => const BillingPage(),
+    );
+    r.child(
+      ClientPaths.childRoute(ClientPaths.billing, ClientPaths.completionReview),
+      child: (_) =>
+          ShiftCompletionReviewPage(invoice: r.args.data as BillingInvoice?),
+    );
+    r.child(
+      ClientPaths.childRoute(ClientPaths.billing, ClientPaths.invoiceReady),
+      child: (_) => const InvoiceReadyPage(),
+    );
+    r.child(
+      ClientPaths.childRoute(ClientPaths.billing, ClientPaths.awaitingApproval),
+      child: (_) => const PendingInvoicesPage(),
+    );
   }
 }

apps/mobile/packages/features/client/billing/lib/src/presentation/pages/pending_invoices_page.dart

@@ -3,7 +3,7 @@ import 'package:design_system/design_system.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:flutter_modular/flutter_modular.dart';
-import 'package:krow_core/core.dart';
+
 import '../blocs/billing_bloc.dart';
 import '../blocs/billing_state.dart';
 import '../widgets/pending_invoices_section.dart';
@@ -13,112 +13,77 @@ class PendingInvoicesPage extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return Scaffold(
-      backgroundColor: const Color(0xFFF8FAFC),
-      body: BlocBuilder<BillingBloc, BillingState>(
-        bloc: Modular.get<BillingBloc>(),
-        builder: (context, state) {
-          return CustomScrollView(
-            slivers: [
-              _buildHeader(context, state.pendingInvoices.length),
-              if (state.status == BillingStatus.loading)
-                const SliverFillRemaining(
-                  child: Center(child: CircularProgressIndicator()),
-                )
-              else if (state.pendingInvoices.isEmpty)
-                _buildEmptyState()
-              else
-                SliverPadding(
-                  padding: const EdgeInsets.fromLTRB(
-                    UiConstants.space5,
-                    UiConstants.space5,
-                    UiConstants.space5,
-                    100, // Bottom padding for scroll clearance
-                  ),
-                  sliver: SliverList(
-                    delegate: SliverChildBuilderDelegate(
-                      (context, index) {
-                        return Padding(
-                          padding: const EdgeInsets.only(bottom: UiConstants.space4),
-                          child: PendingInvoiceCard(invoice: state.pendingInvoices[index]),
-                        );
-                      },
-                      childCount: state.pendingInvoices.length,
-                    ),
-                  ),
-                ),
-            ],
-          );
-        },
-      ),
+    return BlocBuilder<BillingBloc, BillingState>(
+      bloc: Modular.get<BillingBloc>(),
+      builder: (BuildContext context, BillingState state) {
+        return Scaffold(
+          appBar: UiAppBar(
+            title: t.client_billing.awaiting_approval,
+            showBackButton: true,
+          ),
+          body: _buildBody(context, state),
+        );
+      },
     );
   }
 
-  Widget _buildHeader(BuildContext context, int count) {
-    return SliverAppBar(
-      pinned: true,
-      expandedHeight: 140.0,
-      backgroundColor: UiColors.primary,
-      elevation: 0,
-      leadingWidth: 72,
-      leading: Center(
-        child: UiIconButton(
-          icon: UiIcons.arrowLeft,
-          backgroundColor: UiColors.white.withOpacity(0.15),
-          iconColor: UiColors.white,
-          useBlur: true,
-          size: 40,
-          onTap: () => Navigator.of(context).pop(),
-        ),
-      ),
-      flexibleSpace: FlexibleSpaceBar(
-        centerTitle: true,
-        title: Text(
-          t.client_billing.awaiting_approval,
-          style: UiTypography.headline4b.copyWith(color: UiColors.white),
-        ),
-        background: Center(
-          child: Padding(
-            padding: const EdgeInsets.only(top: 40),
-            child: Opacity(
-              opacity: 0.1,
-              child: Icon(UiIcons.clock, size: 100, color: UiColors.white),
-            ),
-          ),
-        ),
+  Widget _buildBody(BuildContext context, BillingState state) {
+    if (state.status == BillingStatus.loading) {
+      return const Center(child: CircularProgressIndicator());
+    }
+
+    if (state.pendingInvoices.isEmpty) {
+      return _buildEmptyState();
+    }
+
+    return ListView.builder(
+      padding: const EdgeInsets.fromLTRB(
+        UiConstants.space5,
+        UiConstants.space5,
+        UiConstants.space5,
+        100, // Bottom padding for scroll clearance
       ),
+      itemCount: state.pendingInvoices.length,
+      itemBuilder: (BuildContext context, int index) {
+        return Padding(
+          padding: const EdgeInsets.only(bottom: UiConstants.space4),
+          child: PendingInvoiceCard(invoice: state.pendingInvoices[index]),
+        );
+      },
     );
   }
 
   Widget _buildEmptyState() {
-    return SliverFillRemaining(
-      child: Center(
-        child: Column(
-          mainAxisAlignment: MainAxisAlignment.center,
-          children: [
-            Container(
-              padding: const EdgeInsets.all(UiConstants.space6),
-              decoration: BoxDecoration(
-                color: UiColors.bgPopup,
-                shape: BoxShape.circle,
-              ),
-              child: const Icon(UiIcons.checkCircle, size: 48, color: UiColors.success),
+    return Center(
+      child: Column(
+        mainAxisAlignment: MainAxisAlignment.center,
+        children: <Widget>[
+          Container(
+            padding: const EdgeInsets.all(UiConstants.space6),
+            decoration: const BoxDecoration(
+              color: UiColors.bgPopup,
+              shape: BoxShape.circle,
             ),
-            const SizedBox(height: UiConstants.space4),
-            Text(
-              t.client_billing.all_caught_up,
-              style: UiTypography.body1m.textPrimary,
+            child: const Icon(
+              UiIcons.checkCircle,
+              size: 48,
+              color: UiColors.success,
             ),
-            Text(
-              t.client_billing.no_pending_invoices,
-              style: UiTypography.body2r.textSecondary,
-            ),
-          ],
-        ),
+          ),
+          const SizedBox(height: UiConstants.space4),
+          Text(
+            t.client_billing.all_caught_up,
+            style: UiTypography.body1m.textPrimary,
+          ),
+          Text(
+            t.client_billing.no_pending_invoices,
+            style: UiTypography.body2r.textSecondary,
+          ),
+        ],
       ),
     );
   }
 }
 
-// We need to export the card widget from the section file if we want to reuse it, 
+// We need to export the card widget from the section file if we want to reuse it,
 // or move it to its own file. I'll move it to a shared file or just make it public in the section file.

apps/mobile/packages/features/client/billing/lib/src/presentation/widgets/pending_invoices_section.dart

@@ -3,6 +3,7 @@ import 'package:design_system/design_system.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_modular/flutter_modular.dart';
 import 'package:krow_core/core.dart';
+
 import '../models/billing_invoice_model.dart';
 
 /// Section showing a banner for invoices awaiting approval.
@@ -56,7 +57,10 @@ class PendingInvoicesSection extends StatelessWidget {
                       ),
                       const SizedBox(width: UiConstants.space2),
                       Container(
-                        padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 2),
+                        padding: const EdgeInsets.symmetric(
+                          horizontal: 8,
+                          vertical: 2,
+                        ),
                         decoration: const BoxDecoration(
                           color: UiColors.accent,
                           shape: BoxShape.circle,
@@ -104,14 +108,7 @@ class PendingInvoiceCard extends StatelessWidget {
       decoration: BoxDecoration(
         color: UiColors.white,
         borderRadius: UiConstants.radiusLg,
-        border: Border.all(color: UiColors.border.withOpacity(0.5)),
-        boxShadow: <BoxShadow>[
-          BoxShadow(
-            color: UiColors.black.withValues(alpha: 0.04),
-            blurRadius: 12,
-            offset: const Offset(0, 4),
-          ),
-        ],
+        border: Border.all(color: UiColors.border, width: 0.5),
       ),
       child: Padding(
         padding: const EdgeInsets.all(UiConstants.space5),
@@ -187,7 +184,11 @@ class PendingInvoiceCard extends StatelessWidget {
                       t.client_billing.stats.total,
                     ),
                   ),
-                  Container(width: 1, height: 32, color: UiColors.border.withOpacity(0.3)),
+                  Container(
+                    width: 1,
+                    height: 32,
+                    color: UiColors.border.withOpacity(0.3),
+                  ),
                   Expanded(
                     child: _buildStatItem(
                       UiIcons.users,
@@ -195,11 +196,15 @@ class PendingInvoiceCard extends StatelessWidget {
                       t.client_billing.stats.workers,
                     ),
                   ),
-                  Container(width: 1, height: 32, color: UiColors.border.withOpacity(0.3)),
+                  Container(
+                    width: 1,
+                    height: 32,
+                    color: UiColors.border.withOpacity(0.3),
+                  ),
                   Expanded(
                     child: _buildStatItem(
                       UiIcons.clock,
-                      '${invoice.totalHours.toStringAsFixed(1)}',
+                      invoice.totalHours.toStringAsFixed(1),
                       t.client_billing.stats.hrs,
                     ),
                   ),
@@ -210,14 +215,12 @@ class PendingInvoiceCard extends StatelessWidget {
             const SizedBox(height: UiConstants.space5),
             SizedBox(
               width: double.infinity,
-              child: UiButton.primary(
+              child: UiButton.secondary(
                 text: t.client_billing.review_and_approve,
                 leadingIcon: UiIcons.checkCircle,
-                onPressed: () => Modular.to.toCompletionReview(arguments: invoice),
+                onPressed: () =>
+                    Modular.to.toCompletionReview(arguments: invoice),
                 size: UiButtonSize.large,
-                style: ElevatedButton.styleFrom(
-                  textStyle: UiTypography.body1b.copyWith(fontSize: 16),
-                ),
               ),
             ),
           ],