Move apps to mobile directory structure

Relocated all app directories (client, design_system_viewer, staff) and their contents under the new 'apps/mobile' path. This change improves project organization and prepares for future platform-specific structuring.

apps/mobile/packages/features/client/authentication/lib/client_authentication.dart

@@ -0,0 +1,67 @@
+library client_authentication;
+
+import 'package:firebase_auth/firebase_auth.dart' as firebase;
+import 'package:flutter_modular/flutter_modular.dart';
+import 'package:krow_data_connect/krow_data_connect.dart';
+import 'src/data/repositories_impl/auth_repository_impl.dart';
+import 'src/domain/repositories/auth_repository_interface.dart';
+import 'src/domain/usecases/sign_in_with_email_use_case.dart';
+import 'src/domain/usecases/sign_in_with_social_use_case.dart';
+import 'src/domain/usecases/sign_out_use_case.dart';
+import 'src/domain/usecases/sign_up_with_email_use_case.dart';
+import 'src/presentation/blocs/client_auth_bloc.dart';
+import 'src/presentation/pages/client_get_started_page.dart';
+import 'src/presentation/pages/client_sign_in_page.dart';
+import 'src/presentation/pages/client_sign_up_page.dart';
+
+export 'src/presentation/pages/client_get_started_page.dart';
+export 'src/presentation/pages/client_sign_in_page.dart';
+export 'src/presentation/pages/client_sign_up_page.dart';
+export 'src/presentation/navigation/client_auth_navigator.dart';
+export 'package:core_localization/core_localization.dart';
+
+/// A [Module] for the client authentication feature.
+class ClientAuthenticationModule extends Module {
+  @override
+  List<Module> get imports => [DataConnectModule()];
+
+  @override
+  void binds(Injector i) {
+    // Repositories
+    i.addLazySingleton<AuthRepositoryInterface>(
+      () => AuthRepositoryImpl(
+        firebaseAuth: firebase.FirebaseAuth.instance,
+        dataConnect: ExampleConnector.instance,
+      ),
+    );
+
+    // UseCases
+    i.addLazySingleton(
+      () => SignInWithEmailUseCase(i.get<AuthRepositoryInterface>()),
+    );
+    i.addLazySingleton(
+      () => SignUpWithEmailUseCase(i.get<AuthRepositoryInterface>()),
+    );
+    i.addLazySingleton(
+      () => SignInWithSocialUseCase(i.get<AuthRepositoryInterface>()),
+    );
+    i.addLazySingleton(() => SignOutUseCase(i.get<AuthRepositoryInterface>()));
+
+    // BLoCs
+    i.addLazySingleton<ClientAuthBloc>(
+      () => ClientAuthBloc(
+        signInWithEmail: i.get<SignInWithEmailUseCase>(),
+        signUpWithEmail: i.get<SignUpWithEmailUseCase>(),
+        signInWithSocial: i.get<SignInWithSocialUseCase>(),
+        signOut: i.get<SignOutUseCase>(),
+      ),
+    );
+  }
+
+  @override
+  void routes(r) {
+    r.child('/', child: (_) => const ClientGetStartedPage());
+    r.child('/client-sign-in', child: (_) => const ClientSignInPage());
+    r.child('/client-sign-up', child: (_) => const ClientSignUpPage());
+  }
+}

apps/mobile/packages/features/client/authentication/lib/src/data/repositories_impl/auth_repository_impl.dart

@@ -0,0 +1,156 @@
+import 'package:firebase_auth/firebase_auth.dart' as firebase;
+import 'package:krow_data_connect/krow_data_connect.dart' as dc;
+import 'package:krow_domain/krow_domain.dart' as domain;
+import '../../domain/repositories/auth_repository_interface.dart';
+
+/// Production-ready implementation of the [AuthRepositoryInterface] for the client app.
+///
+/// This implementation integrates with Firebase Authentication for user
+/// identity management and Krow's Data Connect SDK for storing user profile data.
+class AuthRepositoryImpl implements AuthRepositoryInterface {
+  final firebase.FirebaseAuth _firebaseAuth;
+  final dc.ExampleConnector _dataConnect;
+
+  /// Creates an [AuthRepositoryImpl] with the real dependencies.
+  AuthRepositoryImpl({
+    required firebase.FirebaseAuth firebaseAuth,
+    required dc.ExampleConnector dataConnect,
+  })  : _firebaseAuth = firebaseAuth,
+        _dataConnect = dataConnect;
+
+  @override
+  Future<domain.User> signInWithEmail({
+    required String email,
+    required String password,
+  }) async {
+    try {
+      final credential = await _firebaseAuth.signInWithEmailAndPassword(
+        email: email,
+        password: password,
+      );
+
+      final firebaseUser = credential.user;
+      if (firebaseUser == null) {
+        throw Exception('Sign-in failed, no Firebase user received.');
+      }
+
+      return _getUserProfile(
+        firebaseUserId: firebaseUser.uid,
+        fallbackEmail: firebaseUser.email ?? email,
+      );
+
+      //TO-DO: validate that user is business role and has business account
+
+    } on firebase.FirebaseAuthException catch (e) {
+      if (e.code == 'invalid-credential' || e.code == 'wrong-password') {
+        throw Exception('Incorrect email or password.');
+      } else {
+        throw Exception('Authentication error: ${e.message}');
+      }
+    } catch (e) {
+      throw Exception('Failed to sign in and fetch user data: ${e.toString()}');
+    }
+  }
+
+  @override
+  Future<domain.User> signUpWithEmail({
+    required String companyName,
+    required String email,
+    required String password,
+  }) async {
+    try {
+      final credential = await _firebaseAuth.createUserWithEmailAndPassword(
+        email: email,
+        password: password,
+      );
+
+      final firebaseUser = credential.user;
+      if (firebaseUser == null) {
+        throw Exception('Sign-up failed, Firebase user could not be created.');
+      }
+
+      // Client-specific business logic:
+      // 1. Create a `Business` entity.
+      // 2. Create a `User` entity associated with the business.
+      final createBusinessResponse = await _dataConnect.createBusiness(
+        businessName: companyName,
+        userId: firebaseUser.uid,
+        rateGroup: dc.BusinessRateGroup.STANDARD,
+        status: dc.BusinessStatus.PENDING,
+      ).execute();
+
+      final businessData = createBusinessResponse.data?.business_insert;
+      if (businessData == null) {
+        await firebaseUser.delete(); // Rollback if business creation fails
+        throw Exception('Business creation failed after Firebase user registration.');
+      }
+
+      final createUserResponse = await _dataConnect.createUser(
+        id: firebaseUser.uid,
+        role: dc.UserBaseRole.USER,
+      )
+          .email(email)
+          .userRole('BUSINESS')
+          .execute();
+
+      final newUserData = createUserResponse.data?.user_insert;
+      if (newUserData == null) {
+        await firebaseUser.delete(); // Rollback if user profile creation fails
+        // TO-DO: Also delete the created Business if this fails
+        throw Exception('User profile creation failed after Firebase user registration.');
+      }
+
+      return _getUserProfile(
+        firebaseUserId: firebaseUser.uid,
+        fallbackEmail: firebaseUser.email ?? email,
+      );
+
+    } on firebase.FirebaseAuthException catch (e) {
+      if (e.code == 'weak-password') {
+        throw Exception('The password provided is too weak.');
+      } else if (e.code == 'email-already-in-use') {
+        throw Exception('An account already exists for that email address.');
+      } else {
+        throw Exception('Sign-up error: ${e.message}');
+      }
+    } catch (e) {
+      throw Exception('Failed to sign up and create user data: ${e.toString()}');
+    }
+  }
+
+  @override
+  Future<void> signOut() async {
+    try {
+      await _firebaseAuth.signOut();
+    } catch (e) {
+      throw Exception('Error signing out: ${e.toString()}');
+    }
+  }
+
+  @override
+  Future<domain.User> signInWithSocial({required String provider}) {
+    throw UnimplementedError('Social authentication with $provider is not yet implemented.');
+  }
+
+  Future<domain.User> _getUserProfile({
+    required String firebaseUserId,
+    required String? fallbackEmail,
+  }) async {
+    final response = await _dataConnect.getUserById(id: firebaseUserId).execute();
+    final user = response.data?.user;
+    if (user == null) {
+      throw Exception('Authenticated user profile not found in database.');
+    }
+
+    final email = user.email ?? fallbackEmail;
+    if (email == null || email.isEmpty) {
+      throw Exception('User email is missing in profile data.');
+    }
+
+    return domain.User(
+      id: user.id,
+      email: email,
+      role: user.role.stringValue,
+    );
+  }
+}

apps/mobile/packages/features/client/authentication/lib/src/domain/arguments/sign_in_with_email_arguments.dart

@@ -0,0 +1,15 @@
+import 'package:krow_core/core.dart';
+
+/// Arguments for the [SignInWithEmailUseCase].
+class SignInWithEmailArguments extends UseCaseArgument {
+  /// The user's email address.
+  final String email;
+
+  /// The user's password.
+  final String password;
+
+  const SignInWithEmailArguments({required this.email, required this.password});
+
+  @override
+  List<Object?> get props => [email, password];
+}

apps/mobile/packages/features/client/authentication/lib/src/domain/arguments/sign_in_with_social_arguments.dart

@@ -0,0 +1,12 @@
+import 'package:krow_core/core.dart';
+
+/// Arguments for the [SignInWithSocialUseCase].
+class SignInWithSocialArguments extends UseCaseArgument {
+  /// The social provider name (e.g. 'google' or 'apple').
+  final String provider;
+
+  const SignInWithSocialArguments({required this.provider});
+
+  @override
+  List<Object?> get props => [provider];
+}

apps/mobile/packages/features/client/authentication/lib/src/domain/arguments/sign_up_with_email_arguments.dart

@@ -0,0 +1,22 @@
+import 'package:krow_core/core.dart';
+
+/// Arguments for the [SignUpWithEmailUseCase].
+class SignUpWithEmailArguments extends UseCaseArgument {
+  /// The name of the company.
+  final String companyName;
+
+  /// The user's email address.
+  final String email;
+
+  /// The user's password.
+  final String password;
+
+  const SignUpWithEmailArguments({
+    required this.companyName,
+    required this.email,
+    required this.password,
+  });
+
+  @override
+  List<Object?> get props => [companyName, email, password];
+}

apps/mobile/packages/features/client/authentication/lib/src/domain/repositories/auth_repository_interface.dart

@@ -0,0 +1,37 @@
+import 'package:krow_domain/krow_domain.dart';
+
+/// Interface for the Client Authentication Repository.
+///
+/// This abstraction defines the core authentication operations required for
+/// the client application, allowing the presentation layer to work with
+/// different data sources (e.g., Supabase, Firebase, or Mock) without
+/// depending on specific implementations.
+abstract class AuthRepositoryInterface {
+  /// Signs in an existing client user using their email and password.
+  ///
+  /// Returns a [User] object upon successful authentication.
+  /// Throws an exception if authentication fails.
+  Future<User> signInWithEmail({
+    required String email,
+    required String password,
+  });
+
+  /// Registers a new client user with their business details.
+  ///
+  /// Takes [companyName], [email], and [password] to create a new account.
+  /// Returns the newly created [User].
+  Future<User> signUpWithEmail({
+    required String companyName,
+    required String email,
+    required String password,
+  });
+
+  /// Authenticates using an OAuth provider.
+  ///
+  /// [provider] can be 'google' or 'apple'.
+  /// Returns a [User] upon successful social login.
+  Future<User> signInWithSocial({required String provider});
+
+  /// Terminates the current user session and clears authentication tokens.
+  Future<void> signOut();
+}

apps/mobile/packages/features/client/authentication/lib/src/domain/usecases/sign_in_with_email_use_case.dart

@@ -0,0 +1,24 @@
+import 'package:krow_core/core.dart';
+import 'package:krow_domain/krow_domain.dart';
+import '../arguments/sign_in_with_email_arguments.dart';
+import '../repositories/auth_repository_interface.dart';
+
+/// Use case for signing in a client using email and password.
+///
+/// This use case encapsulates the logic for authenticating an existing user
+/// via email/password credentials.
+class SignInWithEmailUseCase
+    implements UseCase<SignInWithEmailArguments, User> {
+  final AuthRepositoryInterface _repository;
+
+  const SignInWithEmailUseCase(this._repository);
+
+  /// Executes the sign-in operation.
+  @override
+  Future<User> call(SignInWithEmailArguments params) {
+    return _repository.signInWithEmail(
+      email: params.email,
+      password: params.password,
+    );
+  }
+}

apps/mobile/packages/features/client/authentication/lib/src/domain/usecases/sign_in_with_social_use_case.dart

@@ -0,0 +1,18 @@
+import 'package:krow_core/core.dart';
+import 'package:krow_domain/krow_domain.dart';
+import '../arguments/sign_in_with_social_arguments.dart';
+import '../repositories/auth_repository_interface.dart';
+
+/// Use case for signing in a client via social providers (Google/Apple).
+class SignInWithSocialUseCase
+    implements UseCase<SignInWithSocialArguments, User> {
+  final AuthRepositoryInterface _repository;
+
+  const SignInWithSocialUseCase(this._repository);
+
+  /// Executes the social sign-in operation.
+  @override
+  Future<User> call(SignInWithSocialArguments params) {
+    return _repository.signInWithSocial(provider: params.provider);
+  }
+}

apps/mobile/packages/features/client/authentication/lib/src/domain/usecases/sign_out_use_case.dart

@@ -0,0 +1,18 @@
+import 'package:krow_core/core.dart';
+import '../repositories/auth_repository_interface.dart';
+
+/// Use case for signing out the current client user.
+///
+/// This use case handles the termination of the user's session and
+/// clearing of any local authentication tokens.
+class SignOutUseCase implements NoInputUseCase<void> {
+  final AuthRepositoryInterface _repository;
+
+  const SignOutUseCase(this._repository);
+
+  /// Executes the sign-out operation.
+  @override
+  Future<void> call() {
+    return _repository.signOut();
+  }
+}

apps/mobile/packages/features/client/authentication/lib/src/domain/usecases/sign_up_with_email_use_case.dart

@@ -0,0 +1,25 @@
+import 'package:krow_core/core.dart';
+import 'package:krow_domain/krow_domain.dart';
+import '../arguments/sign_up_with_email_arguments.dart';
+import '../repositories/auth_repository_interface.dart';
+
+/// Use case for registering a new client user.
+///
+/// This use case handles the creation of a new client account using
+/// email, password, and company details.
+class SignUpWithEmailUseCase
+    implements UseCase<SignUpWithEmailArguments, User> {
+  final AuthRepositoryInterface _repository;
+
+  const SignUpWithEmailUseCase(this._repository);
+
+  /// Executes the sign-up operation.
+  @override
+  Future<User> call(SignUpWithEmailArguments params) {
+    return _repository.signUpWithEmail(
+      companyName: params.companyName,
+      email: params.email,
+      password: params.password,
+    );
+  }
+}

apps/mobile/packages/features/client/authentication/lib/src/presentation/blocs/client_auth_bloc.dart

@@ -0,0 +1,131 @@
+import 'package:flutter_bloc/flutter_bloc.dart';
+import '../../domain/arguments/sign_in_with_email_arguments.dart';
+import '../../domain/arguments/sign_in_with_social_arguments.dart';
+import '../../domain/arguments/sign_up_with_email_arguments.dart';
+import '../../domain/usecases/sign_in_with_email_use_case.dart';
+import '../../domain/usecases/sign_up_with_email_use_case.dart';
+import '../../domain/usecases/sign_in_with_social_use_case.dart';
+import '../../domain/usecases/sign_out_use_case.dart';
+import 'client_auth_event.dart';
+import 'client_auth_state.dart';
+
+/// Business Logic Component for Client Authentication.
+///
+/// This BLoC manages the state transitions for the authentication flow in
+/// the client application. It handles user inputs (events), interacts with
+/// domain use cases, and emits corresponding [ClientAuthState]s.
+///
+/// Use this BLoC to handle:
+/// * Email/Password Sign In
+/// * Business Account Registration
+/// * Social Authentication
+/// * Session Termination
+class ClientAuthBloc extends Bloc<ClientAuthEvent, ClientAuthState> {
+  final SignInWithEmailUseCase _signInWithEmail;
+  final SignUpWithEmailUseCase _signUpWithEmail;
+  final SignInWithSocialUseCase _signInWithSocial;
+  final SignOutUseCase _signOut;
+
+  /// Initializes the BLoC with the required use cases and initial state.
+  ClientAuthBloc({
+    required SignInWithEmailUseCase signInWithEmail,
+    required SignUpWithEmailUseCase signUpWithEmail,
+    required SignInWithSocialUseCase signInWithSocial,
+    required SignOutUseCase signOut,
+  }) : _signInWithEmail = signInWithEmail,
+       _signUpWithEmail = signUpWithEmail,
+       _signInWithSocial = signInWithSocial,
+       _signOut = signOut,
+       super(const ClientAuthState()) {
+    on<ClientSignInRequested>(_onSignInRequested);
+    on<ClientSignUpRequested>(_onSignUpRequested);
+    on<ClientSocialSignInRequested>(_onSocialSignInRequested);
+    on<ClientSignOutRequested>(_onSignOutRequested);
+  }
+
+  /// Handles the [ClientSignInRequested] event.
+  Future<void> _onSignInRequested(
+    ClientSignInRequested event,
+    Emitter<ClientAuthState> emit,
+  ) async {
+    emit(state.copyWith(status: ClientAuthStatus.loading));
+    try {
+      final user = await _signInWithEmail(
+        SignInWithEmailArguments(email: event.email, password: event.password),
+      );
+      emit(state.copyWith(status: ClientAuthStatus.authenticated, user: user));
+    } catch (e) {
+      emit(
+        state.copyWith(
+          status: ClientAuthStatus.error,
+          errorMessage: e.toString(),
+        ),
+      );
+    }
+  }
+
+  /// Handles the [ClientSignUpRequested] event.
+  Future<void> _onSignUpRequested(
+    ClientSignUpRequested event,
+    Emitter<ClientAuthState> emit,
+  ) async {
+    emit(state.copyWith(status: ClientAuthStatus.loading));
+    try {
+      final user = await _signUpWithEmail(
+        SignUpWithEmailArguments(
+          companyName: event.companyName,
+          email: event.email,
+          password: event.password,
+        ),
+      );
+      emit(state.copyWith(status: ClientAuthStatus.authenticated, user: user));
+    } catch (e) {
+      emit(
+        state.copyWith(
+          status: ClientAuthStatus.error,
+          errorMessage: e.toString(),
+        ),
+      );
+    }
+  }
+
+  /// Handles the [ClientSocialSignInRequested] event.
+  Future<void> _onSocialSignInRequested(
+    ClientSocialSignInRequested event,
+    Emitter<ClientAuthState> emit,
+  ) async {
+    emit(state.copyWith(status: ClientAuthStatus.loading));
+    try {
+      final user = await _signInWithSocial(
+        SignInWithSocialArguments(provider: event.provider),
+      );
+      emit(state.copyWith(status: ClientAuthStatus.authenticated, user: user));
+    } catch (e) {
+      emit(
+        state.copyWith(
+          status: ClientAuthStatus.error,
+          errorMessage: e.toString(),
+        ),
+      );
+    }
+  }
+
+  /// Handles the [ClientSignOutRequested] event.
+  Future<void> _onSignOutRequested(
+    ClientSignOutRequested event,
+    Emitter<ClientAuthState> emit,
+  ) async {
+    emit(state.copyWith(status: ClientAuthStatus.loading));
+    try {
+      await _signOut();
+      emit(state.copyWith(status: ClientAuthStatus.signedOut, user: null));
+    } catch (e) {
+      emit(
+        state.copyWith(
+          status: ClientAuthStatus.error,
+          errorMessage: e.toString(),
+        ),
+      );
+    }
+  }
+}

apps/mobile/packages/features/client/authentication/lib/src/presentation/blocs/client_auth_event.dart

@@ -0,0 +1,51 @@
+import 'package:equatable/equatable.dart';
+
+/// Base class for all authentication events in the client feature.
+abstract class ClientAuthEvent extends Equatable {
+  const ClientAuthEvent();
+
+  @override
+  List<Object?> get props => [];
+}
+
+/// Event dispatched when a user attempts to sign in with email and password.
+class ClientSignInRequested extends ClientAuthEvent {
+  final String email;
+  final String password;
+
+  const ClientSignInRequested({required this.email, required this.password});
+
+  @override
+  List<Object?> get props => [email, password];
+}
+
+/// Event dispatched when a user attempts to create a new business account.
+class ClientSignUpRequested extends ClientAuthEvent {
+  final String companyName;
+  final String email;
+  final String password;
+
+  const ClientSignUpRequested({
+    required this.companyName,
+    required this.email,
+    required this.password,
+  });
+
+  @override
+  List<Object?> get props => [companyName, email, password];
+}
+
+/// Event dispatched for third-party authentication (Google/Apple).
+class ClientSocialSignInRequested extends ClientAuthEvent {
+  final String provider;
+
+  const ClientSocialSignInRequested({required this.provider});
+
+  @override
+  List<Object?> get props => [provider];
+}
+
+/// Event dispatched when the user requests to terminate their session.
+class ClientSignOutRequested extends ClientAuthEvent {
+  const ClientSignOutRequested();
+}

apps/mobile/packages/features/client/authentication/lib/src/presentation/blocs/client_auth_state.dart

@@ -0,0 +1,54 @@
+import 'package:equatable/equatable.dart';
+import 'package:krow_domain/krow_domain.dart';
+
+/// Enum representing the various states of the authentication process.
+enum ClientAuthStatus {
+  /// Initial state before any action is taken.
+  initial,
+
+  /// An authentication operation is in progress.
+  loading,
+
+  /// The user has successfully authenticated.
+  authenticated,
+
+  /// The user has successfully signed out.
+  signedOut,
+
+  /// An error occurred during authentication.
+  error,
+}
+
+/// Represents the state of the client authentication flow.
+class ClientAuthState extends Equatable {
+  /// Current status of the authentication process.
+  final ClientAuthStatus status;
+
+  /// The authenticated user (if status is [ClientAuthStatus.authenticated]).
+  final User? user;
+
+  /// Optional error message when status is [ClientAuthStatus.error].
+  final String? errorMessage;
+
+  const ClientAuthState({
+    this.status = ClientAuthStatus.initial,
+    this.user,
+    this.errorMessage,
+  });
+
+  /// Creates a copy of this state with the given fields replaced by the new values.
+  ClientAuthState copyWith({
+    ClientAuthStatus? status,
+    User? user,
+    String? errorMessage,
+  }) {
+    return ClientAuthState(
+      status: status ?? this.status,
+      user: user ?? this.user,
+      errorMessage: errorMessage ?? this.errorMessage,
+    );
+  }
+
+  @override
+  List<Object?> get props => [status, user, errorMessage];
+}

apps/mobile/packages/features/client/authentication/lib/src/presentation/navigation/client_auth_navigator.dart

@@ -0,0 +1,25 @@
+import 'package:flutter_modular/flutter_modular.dart';
+
+/// Typed navigation for the Client Authentication feature.
+///
+/// This extension on [IModularNavigator] provides named methods for
+/// navigating between authentication pages, reducing magic strings and
+/// improving maintainability.
+extension ClientAuthNavigator on IModularNavigator {
+  /// Navigates to the sign in page using a push named route.
+  void pushClientSignIn() {
+    pushNamed('/client-sign-in');
+  }
+
+  /// Navigates to the sign up page using a push named route.
+  void pushClientSignUp() {
+    pushNamed('/client-sign-up');
+  }
+
+  /// Navigates to the main client home dashboard.
+  ///
+  /// Uses absolute path navigation to reset the navigation stack if necessary.
+  void navigateClientHome() {
+    navigate('/client-home');
+  }
+}

apps/mobile/packages/features/client/authentication/lib/src/presentation/pages/client_get_started_page.dart

@@ -0,0 +1,252 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_modular/flutter_modular.dart';
+import 'package:core_localization/core_localization.dart';
+import 'package:design_system/design_system.dart';
+import '../navigation/client_auth_navigator.dart';
+
+class ClientGetStartedPage extends StatelessWidget {
+  const ClientGetStartedPage({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      body: Stack(
+        children: [
+          // Background Illustration/Visuals from prototype
+          Positioned(
+            top: -100,
+            right: -100,
+            child: Container(
+              width: 400,
+              height: 400,
+              decoration: BoxDecoration(
+                color: UiColors.secondary.withAlpha(50),
+                shape: BoxShape.circle,
+              ),
+            ),
+          ),
+
+          SafeArea(
+            child: Column(
+              children: [
+                const SizedBox(height: UiConstants.space10),
+                // Logo
+                Center(
+                  child: Image.asset(
+                    UiImageAssets.logoBlue,
+                    height: 40,
+                    fit: BoxFit.contain,
+                  ),
+                ),
+
+                const Spacer(),
+
+                // Content Cards Area (Keeping prototype layout)
+                Container(
+                  height: 300,
+                  padding: const EdgeInsets.symmetric(
+                    horizontal: UiConstants.space6,
+                  ),
+                  child: Stack(
+                    children: [
+                      // Representative cards from prototype
+                      Positioned(
+                        top: 20,
+                        left: 0,
+                        right: 20,
+                        child: _ShiftOrderCard(),
+                      ),
+                      Positioned(
+                        bottom: 40,
+                        right: 0,
+                        left: 40,
+                        child: _WorkerProfileCard(),
+                      ),
+                      Positioned(top: 60, right: 10, child: _CalendarCard()),
+                    ],
+                  ),
+                ),
+
+                const Spacer(),
+
+                // Bottom Content
+                Padding(
+                  padding: const EdgeInsets.symmetric(
+                    horizontal: UiConstants.space6,
+                    vertical: UiConstants.space10,
+                  ),
+                  child: Column(
+                    children: [
+                      Text(
+                        t.client_authentication.get_started_page.title,
+                        textAlign: TextAlign.center,
+                        style: UiTypography.displayM,
+                      ),
+                      const SizedBox(height: UiConstants.space3),
+                      Text(
+                        t.client_authentication.get_started_page.subtitle,
+                        textAlign: TextAlign.center,
+                        style: UiTypography.body2r.textSecondary,
+                      ),
+                      const SizedBox(height: UiConstants.space8),
+
+                      // Sign In Button
+                      UiButton.primary(
+                        text: t
+                            .client_authentication
+                            .get_started_page
+                            .sign_in_button,
+                        onPressed: () => Modular.to.pushClientSignIn(),
+                      ),
+
+                      const SizedBox(height: UiConstants.space3),
+
+                      // Create Account Button
+                      UiButton.secondary(
+                        text: t
+                            .client_authentication
+                            .get_started_page
+                            .create_account_button,
+                        onPressed: () => Modular.to.pushClientSignUp(),
+                      ),
+                    ],
+                  ),
+                ),
+              ],
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+// Internal Prototype Widgets Updated with Design System Primitives
+class _ShiftOrderCard extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: const EdgeInsets.all(UiConstants.space3),
+      decoration: BoxDecoration(
+        color: UiColors.white,
+        borderRadius: UiConstants.radiusLg,
+        boxShadow: [
+          BoxShadow(
+            color: UiColors.black.withOpacity(0.1),
+            blurRadius: 10,
+            offset: const Offset(0, 4),
+          ),
+        ],
+      ),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          Row(
+            children: [
+              Container(
+                padding: const EdgeInsets.all(UiConstants.space1),
+                decoration: BoxDecoration(
+                  color: UiColors.primary.withOpacity(0.1),
+                  shape: BoxShape.circle,
+                ),
+                child: const Icon(
+                  UiIcons.briefcase,
+                  size: 14,
+                  color: UiColors.primary,
+                ),
+              ),
+              const SizedBox(width: UiConstants.space2),
+              Text('Shift Order #824', style: UiTypography.footnote1b),
+              const Spacer(),
+              Container(
+                padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 2),
+                decoration: BoxDecoration(
+                  color: UiColors.tagPending,
+                  borderRadius: UiConstants.radiusFull,
+                ),
+                child: Text(
+                  'Pending',
+                  style: UiTypography.footnote2m.copyWith(
+                    color: UiColors.textWarning,
+                  ),
+                ),
+              ),
+            ],
+          ),
+          const SizedBox(height: UiConstants.space2),
+          Text(
+            'Event Staffing - Hilton Hotel',
+            style: UiTypography.footnote2r.textSecondary,
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+class _WorkerProfileCard extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: const EdgeInsets.all(UiConstants.space3),
+      decoration: BoxDecoration(
+        color: UiColors.white,
+        borderRadius: UiConstants.radiusLg,
+        boxShadow: [
+          BoxShadow(
+            color: UiColors.black.withOpacity(0.1),
+            blurRadius: 10,
+            offset: const Offset(0, 4),
+          ),
+        ],
+      ),
+      child: Row(
+        children: [
+          CircleAvatar(
+            radius: 16,
+            backgroundColor: UiColors.primary.withOpacity(0.1),
+            child: const Icon(UiIcons.user, size: 16, color: UiColors.primary),
+          ),
+          const SizedBox(width: UiConstants.space2),
+          Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              Text('Alex Thompson', style: UiTypography.footnote1b),
+              Text(
+                'Professional Waiter • 4.9★',
+                style: UiTypography.footnote2r.textSecondary,
+              ),
+            ],
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+class _CalendarCard extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: const EdgeInsets.all(UiConstants.space2),
+      decoration: BoxDecoration(
+        color: UiColors.accent,
+        borderRadius: UiConstants.radiusMd,
+        boxShadow: [
+          BoxShadow(
+            color: UiColors.black.withOpacity(0.1),
+            blurRadius: 10,
+            offset: const Offset(4, 4),
+          ),
+        ],
+      ),
+      child: const Icon(
+        UiIcons.calendar,
+        size: 20,
+        color: UiColors.accentForeground,
+      ),
+    );
+  }
+}

apps/mobile/packages/features/client/authentication/lib/src/presentation/pages/client_sign_in_page.dart

@@ -0,0 +1,147 @@
+import 'package:client_authentication/src/presentation/widgets/common/section_titles.dart';
+import 'package:core_localization/core_localization.dart';
+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 '../blocs/client_auth_bloc.dart';
+import '../blocs/client_auth_event.dart';
+import '../blocs/client_auth_state.dart';
+import '../navigation/client_auth_navigator.dart';
+import '../widgets/client_sign_in_page/client_sign_in_form.dart';
+import '../widgets/common/auth_divider.dart';
+import '../widgets/common/auth_social_button.dart';
+
+/// Page for client users to sign in to their account.
+///
+/// This page provides email/password authentication as well as social sign-in
+/// options via Apple and Google. It matches the design system standards
+/// for client-facing authentication flows.
+class ClientSignInPage extends StatelessWidget {
+  /// Creates a [ClientSignInPage].
+  const ClientSignInPage({super.key});
+
+  /// Dispatches the sign in event to the BLoC.
+  void _handleSignIn(
+    BuildContext context, {
+    required String email,
+    required String password,
+  }) {
+    BlocProvider.of<ClientAuthBloc>(
+      context,
+    ).add(ClientSignInRequested(email: email, password: password));
+  }
+
+  /// Dispatches the social sign in event to the BLoC.
+  void _handleSocialSignIn(BuildContext context, {required String provider}) {
+    BlocProvider.of<ClientAuthBloc>(
+      context,
+    ).add(ClientSocialSignInRequested(provider: provider));
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final i18n = t.client_authentication.sign_in_page;
+    final authBloc = Modular.get<ClientAuthBloc>();
+
+    return BlocProvider.value(
+      value: authBloc,
+      child: BlocConsumer<ClientAuthBloc, ClientAuthState>(
+        listener: (context, state) {
+          if (state.status == ClientAuthStatus.authenticated) {
+            Modular.to.navigateClientHome();
+          } else if (state.status == ClientAuthStatus.error) {
+            ScaffoldMessenger.of(context).showSnackBar(
+              SnackBar(
+                content: Text(state.errorMessage ?? 'Authentication Error'),
+              ),
+            );
+          }
+        },
+        builder: (context, state) {
+          final isLoading = state.status == ClientAuthStatus.loading;
+
+          return Scaffold(
+            appBar: const UiAppBar(showBackButton: true),
+            body: SafeArea(
+              bottom: false,
+              child: Padding(
+                padding: const EdgeInsets.fromLTRB(
+                  UiConstants.space6,
+                  UiConstants.space8,
+                  UiConstants.space6,
+                  0,
+                ),
+                child: SingleChildScrollView(
+                  child: Column(
+                    crossAxisAlignment: CrossAxisAlignment.stretch,
+                    children: [
+                      SectionTitle(title: i18n.title, subtitle: i18n.subtitle),
+                      const SizedBox(height: UiConstants.space8),
+
+                      // Sign In Form
+                      ClientSignInForm(
+                        isLoading: isLoading,
+                        onSignIn: ({required email, required password}) =>
+                            _handleSignIn(
+                              context,
+                              email: email,
+                              password: password,
+                            ),
+                      ),
+
+                      const SizedBox(height: UiConstants.space6),
+
+                      // Divider
+                      AuthDivider(text: i18n.or_divider),
+
+                      const SizedBox(height: UiConstants.space6),
+
+                      // Social Buttons
+                      AuthSocialButton(
+                        text: i18n.social_apple,
+                        icon: UiIcons.apple,
+                        onPressed: () =>
+                            _handleSocialSignIn(context, provider: 'apple'),
+                      ),
+                      const SizedBox(height: UiConstants.space3),
+                      AuthSocialButton(
+                        text: i18n.social_google,
+                        icon: UiIcons.google,
+                        onPressed: () =>
+                            _handleSocialSignIn(context, provider: 'google'),
+                      ),
+
+                      const SizedBox(height: UiConstants.space8),
+
+                      // Sign Up Link
+                      Row(
+                        mainAxisAlignment: MainAxisAlignment.center,
+                        children: [
+                          Text(
+                            i18n.no_account,
+                            style: UiTypography.body2r.textSecondary,
+                          ),
+                          const SizedBox(width: UiConstants.space1),
+                          GestureDetector(
+                            onTap: () => Modular.to.pushClientSignUp(),
+                            child: Text(
+                              i18n.sign_up_link,
+                              style: UiTypography.body2m.textLink,
+                            ),
+                          ),
+                        ],
+                      ),
+                      const SizedBox(height: UiConstants.space10),
+                    ],
+                  ),
+                ),
+              ),
+            ),
+          );
+        },
+      ),
+    );
+  }
+}

apps/mobile/packages/features/client/authentication/lib/src/presentation/pages/client_sign_up_page.dart

@@ -0,0 +1,158 @@
+import 'package:client_authentication/src/presentation/widgets/common/section_titles.dart';
+import 'package:core_localization/core_localization.dart';
+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 '../blocs/client_auth_bloc.dart';
+import '../blocs/client_auth_event.dart';
+import '../blocs/client_auth_state.dart';
+import '../navigation/client_auth_navigator.dart';
+import '../widgets/client_sign_up_page/client_sign_up_form.dart';
+import '../widgets/common/auth_divider.dart';
+import '../widgets/common/auth_social_button.dart';
+
+/// Page for client users to sign up for a new account.
+///
+/// This page collects company details, email, and password, and offers
+/// social sign-up options. It adheres to the design system standards.
+class ClientSignUpPage extends StatelessWidget {
+  /// Creates a [ClientSignUpPage].
+  const ClientSignUpPage({super.key});
+
+  /// Validates inputs and dispatches the sign up event.
+  void _handleSignUp(
+    BuildContext context, {
+    required String companyName,
+    required String email,
+    required String password,
+  }) {
+    BlocProvider.of<ClientAuthBloc>(context).add(
+      ClientSignUpRequested(
+        companyName: companyName,
+        email: email,
+        password: password,
+      ),
+    );
+  }
+
+  /// Dispatches the social sign up event.
+  void _handleSocialSignUp(BuildContext context, {required String provider}) {
+    BlocProvider.of<ClientAuthBloc>(
+      context,
+    ).add(ClientSocialSignInRequested(provider: provider));
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final i18n = t.client_authentication.sign_up_page;
+    final authBloc = Modular.get<ClientAuthBloc>();
+
+    return BlocProvider.value(
+      value: authBloc,
+      child: BlocConsumer<ClientAuthBloc, ClientAuthState>(
+        listener: (context, state) {
+          if (state.status == ClientAuthStatus.authenticated) {
+            Modular.to.navigateClientHome();
+          } else if (state.status == ClientAuthStatus.error) {
+            ScaffoldMessenger.of(context).showSnackBar(
+              SnackBar(
+                content: Text(state.errorMessage ?? 'Authentication Error'),
+              ),
+            );
+          }
+        },
+        builder: (context, state) {
+          final isLoading = state.status == ClientAuthStatus.loading;
+
+          return Scaffold(
+            appBar: const UiAppBar(showBackButton: true),
+            body: SafeArea(
+              bottom: false,
+              child: Padding(
+                padding: const EdgeInsets.fromLTRB(
+                  UiConstants.space6,
+                  UiConstants.space8,
+                  UiConstants.space6,
+                  0,
+                ),
+                child: SingleChildScrollView(
+                  child: Column(
+                    crossAxisAlignment: CrossAxisAlignment.stretch,
+                    children: [
+                      SectionTitle(title: i18n.title, subtitle: i18n.subtitle),
+                      const SizedBox(height: UiConstants.space8),
+
+                      // Sign Up Form
+                      ClientSignUpForm(
+                        isLoading: isLoading,
+                        onSignUp:
+                            ({
+                              required companyName,
+                              required email,
+                              required password,
+                            }) => _handleSignUp(
+                              context,
+                              companyName: companyName,
+                              email: email,
+                              password: password,
+                            ),
+                      ),
+
+                      const SizedBox(height: UiConstants.space6),
+
+                      // Divider
+                      // Divider
+                      AuthDivider(text: i18n.or_divider),
+
+                      const SizedBox(height: UiConstants.space6),
+
+                      // Social Buttons
+                      // Social Buttons
+                      AuthSocialButton(
+                        text: i18n.social_apple,
+                        icon: UiIcons.apple,
+                        onPressed: () =>
+                            _handleSocialSignUp(context, provider: 'apple'),
+                      ),
+                      const SizedBox(height: UiConstants.space3),
+                      AuthSocialButton(
+                        text: i18n.social_google,
+                        icon: UiIcons.google,
+                        onPressed: () =>
+                            _handleSocialSignUp(context, provider: 'google'),
+                      ),
+
+                      const SizedBox(height: UiConstants.space8),
+
+                      // Sign In Link
+                      Row(
+                        mainAxisAlignment: MainAxisAlignment.center,
+                        children: [
+                          Text(
+                            i18n.has_account,
+                            style: UiTypography.body2r.textSecondary,
+                          ),
+                          const SizedBox(width: UiConstants.space1),
+                          GestureDetector(
+                            onTap: () => Modular.to.pushClientSignIn(),
+                            child: Text(
+                              i18n.sign_in_link,
+                              style: UiTypography.body2m.textLink,
+                            ),
+                          ),
+                        ],
+                      ),
+                      const SizedBox(height: UiConstants.space10),
+                    ],
+                  ),
+                ),
+              ),
+            ),
+          );
+        },
+      ),
+    );
+  }
+}

apps/mobile/packages/features/client/authentication/lib/src/presentation/widgets/client_sign_in_page/client_sign_in_form.dart

@@ -0,0 +1,113 @@
+import 'package:core_localization/core_localization.dart';
+import 'package:design_system/design_system.dart';
+import 'package:flutter/material.dart';
+
+/// A form widget for client sign-in.
+///
+/// This widget handles user input for email and password and delegates
+/// authentication events to the parent via callbacks.
+class ClientSignInForm extends StatefulWidget {
+  /// Callback when the sign-in button is pressed.
+  final void Function({required String email, required String password})
+  onSignIn;
+
+  /// Whether the authentication is currently loading.
+  final bool isLoading;
+
+  /// Creates a [ClientSignInForm].
+  const ClientSignInForm({
+    super.key,
+    required this.onSignIn,
+    this.isLoading = false,
+  });
+
+  @override
+  State<ClientSignInForm> createState() => _ClientSignInFormState();
+}
+
+class _ClientSignInFormState extends State<ClientSignInForm> {
+  final _emailController = TextEditingController();
+  final _passwordController = TextEditingController();
+  bool _obscurePassword = true;
+
+  @override
+  void dispose() {
+    _emailController.dispose();
+    _passwordController.dispose();
+    super.dispose();
+  }
+
+  void _handleSubmit() {
+    widget.onSignIn(
+      email: _emailController.text,
+      password: _passwordController.text,
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final i18n = t.client_authentication.sign_in_page;
+
+    return Column(
+      children: [
+        // Email Field
+        UiTextField(
+          label: i18n.email_label,
+          hintText: i18n.email_hint,
+          controller: _emailController,
+          keyboardType: TextInputType.emailAddress,
+        ),
+        const SizedBox(height: UiConstants.space5),
+
+        // Password Field
+        UiTextField(
+          label: i18n.password_label,
+          hintText: i18n.password_hint,
+          controller: _passwordController,
+          obscureText: _obscurePassword,
+          suffix: IconButton(
+            icon: Icon(
+              _obscurePassword ? UiIcons.eyeOff : UiIcons.eye,
+              color: UiColors.iconSecondary,
+              size: 20,
+            ),
+            onPressed: () =>
+                setState(() => _obscurePassword = !_obscurePassword),
+          ),
+        ),
+
+        const SizedBox(height: UiConstants.space2),
+
+        // Forgot Password
+        Align(
+          alignment: Alignment.centerLeft,
+          child: GestureDetector(
+            onTap: () {},
+            child: Text(
+              i18n.forgot_password,
+              style: UiTypography.body2r.textLink,
+            ),
+          ),
+        ),
+
+        const SizedBox(height: UiConstants.space8),
+
+        // Sign In Button
+        UiButton.primary(
+          text: widget.isLoading ? null : i18n.sign_in_button,
+          onPressed: widget.isLoading ? null : _handleSubmit,
+          child: widget.isLoading
+              ? const SizedBox(
+                  height: 24,
+                  width: 24,
+                  child: CircularProgressIndicator(
+                    color: UiColors.white,
+                    strokeWidth: 2,
+                  ),
+                )
+              : null,
+        ),
+      ],
+    );
+  }
+}

apps/mobile/packages/features/client/authentication/lib/src/presentation/widgets/client_sign_up_page/client_sign_up_form.dart

@@ -0,0 +1,137 @@
+import 'package:core_localization/core_localization.dart';
+import 'package:design_system/design_system.dart';
+import 'package:flutter/material.dart';
+
+/// A form widget for client sign-up.
+///
+/// This widget handles user input for company name, email, and password,
+/// and delegates registration events to the parent via callbacks.
+class ClientSignUpForm extends StatefulWidget {
+  /// Callback when the sign-up button is pressed.
+  final void Function({
+    required String companyName,
+    required String email,
+    required String password,
+  })
+  onSignUp;
+
+  /// Whether the authentication is currently loading.
+  final bool isLoading;
+
+  /// Creates a [ClientSignUpForm].
+  const ClientSignUpForm({
+    super.key,
+    required this.onSignUp,
+    this.isLoading = false,
+  });
+
+  @override
+  State<ClientSignUpForm> createState() => _ClientSignUpFormState();
+}
+
+class _ClientSignUpFormState extends State<ClientSignUpForm> {
+  final _companyController = TextEditingController();
+  final _emailController = TextEditingController();
+  final _passwordController = TextEditingController();
+  final _confirmPasswordController = TextEditingController();
+  bool _obscurePassword = true;
+
+  @override
+  void dispose() {
+    _companyController.dispose();
+    _emailController.dispose();
+    _passwordController.dispose();
+    _confirmPasswordController.dispose();
+    super.dispose();
+  }
+
+  void _handleSubmit() {
+    if (_passwordController.text != _confirmPasswordController.text) {
+      ScaffoldMessenger.of(
+        context,
+      ).showSnackBar(const SnackBar(content: Text('Passwords do not match')));
+      return;
+    }
+
+    widget.onSignUp(
+      companyName: _companyController.text,
+      email: _emailController.text,
+      password: _passwordController.text,
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final i18n = t.client_authentication.sign_up_page;
+
+    return Column(
+      children: [
+        // Company Name Field
+        UiTextField(
+          label: i18n.company_label,
+          hintText: i18n.company_hint,
+          controller: _companyController,
+          textInputAction: TextInputAction.next,
+        ),
+        const SizedBox(height: UiConstants.space4),
+
+        // Email Field
+        UiTextField(
+          label: i18n.email_label,
+          hintText: i18n.email_hint,
+          controller: _emailController,
+          keyboardType: TextInputType.emailAddress,
+          textInputAction: TextInputAction.next,
+        ),
+        const SizedBox(height: UiConstants.space4),
+
+        // Password Field
+        UiTextField(
+          label: i18n.password_label,
+          hintText: i18n.password_hint,
+          controller: _passwordController,
+          obscureText: _obscurePassword,
+          textInputAction: TextInputAction.next,
+          suffix: IconButton(
+            icon: Icon(
+              _obscurePassword ? UiIcons.eyeOff : UiIcons.eye,
+              color: UiColors.iconSecondary,
+              size: 20,
+            ),
+            onPressed: () =>
+                setState(() => _obscurePassword = !_obscurePassword),
+          ),
+        ),
+        const SizedBox(height: UiConstants.space4),
+
+        // Confirm Password Field
+        UiTextField(
+          label: i18n.confirm_password_label,
+          hintText: i18n.confirm_password_hint,
+          controller: _confirmPasswordController,
+          obscureText: _obscurePassword,
+          textInputAction: TextInputAction.done,
+          onSubmitted: (_) => _handleSubmit(),
+        ),
+
+        const SizedBox(height: UiConstants.space8),
+
+        // Create Account Button
+        UiButton.primary(
+          text: widget.isLoading ? null : i18n.create_account_button,
+          onPressed: widget.isLoading ? null : _handleSubmit,
+          child: widget.isLoading
+              ? const SizedBox(
+                  height: 24,
+                  width: 24,
+                  child: CircularProgressIndicator(
+                    color: UiColors.white,
+                    strokeWidth: 2,
+                  ),
+                )
+              : null,
+        ),
+      ],
+    );
+  }
+}

apps/mobile/packages/features/client/authentication/lib/src/presentation/widgets/common/auth_divider.dart

@@ -0,0 +1,28 @@
+import 'package:design_system/design_system.dart';
+import 'package:flutter/material.dart';
+
+/// A divider widget with centered text, typically used to separate
+/// email/password auth from social auth headers.
+///
+/// Displays a horizontal line with text in the middle (e.g., "Or continue with").
+class AuthDivider extends StatelessWidget {
+  /// The text to display in the center of the divider.
+  final String text;
+
+  /// Creates an [AuthDivider].
+  const AuthDivider({super.key, required this.text});
+
+  @override
+  Widget build(BuildContext context) {
+    return Row(
+      children: [
+        const Expanded(child: Divider()),
+        Padding(
+          padding: const EdgeInsets.symmetric(horizontal: UiConstants.space4),
+          child: Text(text, style: UiTypography.footnote1r.textSecondary),
+        ),
+        const Expanded(child: Divider()),
+      ],
+    );
+  }
+}

apps/mobile/packages/features/client/authentication/lib/src/presentation/widgets/common/auth_social_button.dart

@@ -0,0 +1,38 @@
+import 'package:design_system/design_system.dart';
+import 'package:flutter/material.dart';
+
+/// A specialized button for social authentication integration.
+///
+/// This widget wraps [UiButton.secondary] to provide a consistent look and feel
+/// for social sign-in/sign-up buttons (e.g., Google, Apple).
+class AuthSocialButton extends StatelessWidget {
+  /// The localizable text to display on the button (e.g., "Continue with Google").
+  final String text;
+
+  /// The icon representing the social provider.
+  final IconData icon;
+
+  /// Callback to execute when the button is tapped.
+  final VoidCallback onPressed;
+
+  /// Creates an [AuthSocialButton].
+  ///
+  /// The [text], [icon], and [onPressed] arguments must not be null.
+  const AuthSocialButton({
+    super.key,
+    required this.text,
+    required this.icon,
+    required this.onPressed,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return UiButton.secondary(
+      onPressed: onPressed,
+      leadingIcon: icon,
+      text: text,
+      // Ensure the button spans the full width available
+      size: UiButtonSize.large,
+    );
+  }
+}

apps/mobile/packages/features/client/authentication/lib/src/presentation/widgets/common/section_titles.dart

@@ -0,0 +1,24 @@
+import 'package:design_system/design_system.dart';
+import 'package:flutter/material.dart';
+
+/// A widget that displays a section title with a leading icon.
+class SectionTitle extends StatelessWidget {
+  /// The title of the section.
+  final String title;
+
+  /// The subtitle of the section.
+  final String subtitle;
+
+  const SectionTitle({super.key, required this.title, required this.subtitle});
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Text(title, style: UiTypography.headline1m),
+        Text(subtitle, style: UiTypography.body2r.textSecondary),
+      ],
+    );
+  }
+}

apps/mobile/packages/features/client/authentication/pubspec.yaml

@@ -0,0 +1,35 @@
+name: client_authentication
+description: Client Authentication and Registration feature.
+version: 0.0.1
+publish_to: none
+resolution: workspace
+
+environment:
+  sdk: '>=3.10.0 <4.0.0'
+  flutter: ">=3.0.0"
+
+dependencies:
+  flutter:
+    sdk: flutter
+  flutter_bloc: ^8.1.0
+  flutter_modular: ^6.3.0
+  equatable: ^2.0.5
+  firebase_core: ^4.2.1
+  firebase_auth: ^6.1.2 # Updated for compatibility
+  firebase_data_connect: ^0.2.2+1
+  
+  # Architecture Packages
+  design_system:
+    path: ../../../../design_system
+  core_localization:
+    path: ../../../core_localization
+
+dev_dependencies:
+  flutter_test:
+    sdk: flutter
+  bloc_test: ^9.1.0
+  mocktail: ^1.0.0
+  build_runner: ^2.4.15
+
+flutter:
+  uses-material-design: true

apps/mobile/packages/features/client/home/REFACTOR_SUMMARY.md

@@ -0,0 +1,133 @@
+# Client Home Feature - Architecture Refactor Summary
+
+## ✅ Completed Refactor
+
+The `packages/features/client/home` feature has been successfully refactored to fully comply with KROW Clean Architecture principles.
+
+## 📋 Changes Made
+
+### 1. Domain Layer Improvements
+
+**Created:**
+- `lib/src/domain/entities/home_dashboard_data.dart`
+  - Proper domain entity to replace raw `Map<String, dynamic>`
+  - Immutable, equatable data class
+  - Clear field definitions with documentation
+
+**Updated:**
+- `lib/src/domain/repositories/home_repository_interface.dart`
+  - Changed from `abstract class` to `abstract interface class`
+  - Return type changed from `Map<String, dynamic>` to `HomeDashboardData`
+  
+- `lib/src/domain/usecases/get_dashboard_data_usecase.dart`
+  - Return type updated to `HomeDashboardData`
+
+### 2. Data Layer Improvements
+
+**Updated:**
+- `lib/src/data/repositories_impl/home_repository_impl.dart`
+  - Returns `HomeDashboardData` entity instead of raw map
+  - Properly typed mock data
+
+### 3. Presentation Layer Refactor
+
+**Major Changes to `client_home_page.dart`:**
+- ✅ Converted from `StatefulWidget` to `StatelessWidget`
+- ✅ Removed local state management (moved to BLoC)
+- ✅ BLoC lifecycle managed by `BlocProvider.create`
+- ✅ All event dispatching uses `BlocProvider.of<ClientHomeBloc>(context)`
+- ✅ Removed direct BLoC instance storage
+- ✅ Fixed deprecated `withOpacity` → `withValues(alpha:)`
+
+**Updated `client_home_state.dart`:**
+- Replaced individual primitive fields with `HomeDashboardData` entity
+- Simplified state structure
+- Cleaner `copyWith` implementation
+
+**Updated `client_home_bloc.dart`:**
+- Simplified event handler to use entity directly
+- No more manual field extraction from maps
+
+**Widget Updates:**
+- `coverage_widget.dart`: Now accepts typed parameters
+- All widgets: Fixed deprecated `withOpacity` calls
+- `shift_order_form_sheet.dart`: Fixed deprecated `value` → `initialValue`
+
+## 🎯 Architecture Compliance
+
+### ✅ Clean Architecture Rules
+- [x] Domain layer is pure Dart (entities only)
+- [x] Repository interfaces in domain, implementations in data
+- [x] Use cases properly delegate to repositories
+- [x] Presentation layer depends on domain abstractions
+- [x] No feature-to-feature imports
+
+### ✅ Presentation Rules
+- [x] Page is `StatelessWidget`
+- [x] State managed by BLoC
+- [x] No business logic in page
+- [x] BLoC lifecycle properly managed
+- [x] Named parameters used throughout
+
+### ✅ Code Quality
+- [x] No deprecation warnings
+- [x] All files have doc comments
+- [x] Consistent naming conventions
+- [x] `flutter analyze` passes with 0 issues
+
+## 📊 Before vs After
+
+### Before:
+```dart
+// StatefulWidget with local state
+class ClientHomePage extends StatefulWidget {
+  late final ClientHomeBloc _homeBloc;
+  
+  @override
+  void initState() {
+    _homeBloc = Modular.get<ClientHomeBloc>();
+  }
+}
+
+// Raw maps in domain
+Future<Map<String, dynamic>> getDashboardData();
+
+// Manual field extraction
+weeklySpending: data['weeklySpending'] as double?,
+```
+
+### After:
+```dart
+// StatelessWidget, BLoC-managed
+class ClientHomePage extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return BlocProvider<ClientHomeBloc>(
+      create: (context) => Modular.get<ClientHomeBloc>()..add(ClientHomeStarted()),
+      // ...
+    );
+  }
+}
+
+// Typed entities
+Future<HomeDashboardData> getDashboardData();
+
+// Direct entity usage
+dashboardData: data,
+```
+
+## 🔍 Reference Alignment
+
+The refactored code now matches the structure of `packages/features/staff/authentication`:
+- StatelessWidget pages
+- BLoC-managed state
+- Typed domain entities
+- Clean separation of concerns
+
+## 🚀 Next Steps
+
+The feature is now production-ready and follows all architectural guidelines. Future enhancements should:
+1. Add unit tests for use cases
+2. Add widget tests for pages
+3. Add integration tests for complete flows
+4. Consider extracting reusable widgets to design_system if used across features

apps/mobile/packages/features/client/home/lib/client_home.dart

@@ -0,0 +1,44 @@
+library client_home;
+
+import 'package:flutter_modular/flutter_modular.dart';
+import 'package:krow_data_connect/krow_data_connect.dart';
+import 'src/data/repositories_impl/home_repository_impl.dart';
+import 'src/domain/repositories/home_repository_interface.dart';
+import 'src/domain/usecases/get_dashboard_data_usecase.dart';
+import 'src/presentation/blocs/client_home_bloc.dart';
+import 'src/presentation/pages/client_home_page.dart';
+
+export 'src/presentation/pages/client_home_page.dart';
+export 'src/presentation/navigation/client_home_navigator.dart';
+
+/// A [Module] for the client home feature.
+///
+/// This module configures the dependencies for the client home feature,
+/// including repositories, use cases, and BLoCs.
+class ClientHomeModule extends Module {
+  @override
+  List<Module> get imports => [DataConnectModule()];
+
+  @override
+  void binds(Injector i) {
+    // Repositories
+    i.addLazySingleton<HomeRepositoryInterface>(
+      () => HomeRepositoryImpl(i.get<HomeRepositoryMock>()),
+    );
+
+    // UseCases
+    i.addLazySingleton(GetDashboardDataUseCase.new);
+
+    // BLoCs
+    i.add<ClientHomeBloc>(
+      () => ClientHomeBloc(
+        getDashboardDataUseCase: i.get<GetDashboardDataUseCase>(),
+      ),
+    );
+  }
+
+  @override
+  void routes(r) {
+    r.child('/', child: (_) => const ClientHomePage());
+  }
+}

apps/mobile/packages/features/client/home/lib/src/data/repositories_impl/home_repository_impl.dart

@@ -0,0 +1,21 @@
+import 'package:krow_data_connect/krow_data_connect.dart';
+import 'package:krow_domain/krow_domain.dart';
+import '../../domain/repositories/home_repository_interface.dart';
+
+/// Implementation of [HomeRepositoryInterface] that delegates to [HomeRepositoryMock].
+///
+/// This implementation resides in the data layer and acts as a bridge between the
+/// domain layer and the data source (in this case, a mock from data_connect).
+class HomeRepositoryImpl implements HomeRepositoryInterface {
+  final HomeRepositoryMock _mock;
+
+  /// Creates a [HomeRepositoryImpl].
+  ///
+  /// Requires a [HomeRepositoryMock] to perform data operations.
+  HomeRepositoryImpl(this._mock);
+
+  @override
+  Future<HomeDashboardData> getDashboardData() {
+    return _mock.getDashboardData();
+  }
+}

apps/mobile/packages/features/client/home/lib/src/domain/repositories/home_repository_interface.dart

@@ -0,0 +1,10 @@
+import 'package:krow_domain/krow_domain.dart';
+
+/// Interface for the Client Home repository.
+///
+/// This repository is responsible for providing data required for the
+/// client home screen dashboard.
+abstract interface class HomeRepositoryInterface {
+  /// Fetches the [HomeDashboardData] containing aggregated dashboard metrics.
+  Future<HomeDashboardData> getDashboardData();
+}

apps/mobile/packages/features/client/home/lib/src/domain/usecases/get_dashboard_data_usecase.dart

@@ -0,0 +1,19 @@
+import 'package:krow_core/core.dart';
+import 'package:krow_domain/krow_domain.dart';
+import '../repositories/home_repository_interface.dart';
+
+/// Use case to fetch dashboard data for the client home screen.
+///
+/// This use case coordinates with the [HomeRepositoryInterface] to retrieve
+/// the [HomeDashboardData] required for the dashboard display.
+class GetDashboardDataUseCase implements NoInputUseCase<HomeDashboardData> {
+  final HomeRepositoryInterface _repository;
+
+  /// Creates a [GetDashboardDataUseCase].
+  GetDashboardDataUseCase(this._repository);
+
+  @override
+  Future<HomeDashboardData> call() {
+    return _repository.getDashboardData();
+  }
+}

apps/mobile/packages/features/client/home/lib/src/presentation/blocs/client_home_bloc.dart

@@ -0,0 +1,96 @@
+import 'package:flutter_bloc/flutter_bloc.dart';
+import '../../domain/usecases/get_dashboard_data_usecase.dart';
+import 'client_home_event.dart';
+import 'client_home_state.dart';
+
+/// BLoC responsible for managing the state and business logic of the client home dashboard.
+class ClientHomeBloc extends Bloc<ClientHomeEvent, ClientHomeState> {
+  final GetDashboardDataUseCase _getDashboardDataUseCase;
+
+  ClientHomeBloc({required GetDashboardDataUseCase getDashboardDataUseCase})
+    : _getDashboardDataUseCase = getDashboardDataUseCase,
+      super(const ClientHomeState()) {
+    on<ClientHomeStarted>(_onStarted);
+    on<ClientHomeEditModeToggled>(_onEditModeToggled);
+    on<ClientHomeWidgetVisibilityToggled>(_onWidgetVisibilityToggled);
+    on<ClientHomeWidgetReordered>(_onWidgetReordered);
+    on<ClientHomeLayoutReset>(_onLayoutReset);
+  }
+
+  Future<void> _onStarted(
+    ClientHomeStarted event,
+    Emitter<ClientHomeState> emit,
+  ) async {
+    emit(state.copyWith(status: ClientHomeStatus.loading));
+    try {
+      final data = await _getDashboardDataUseCase();
+      emit(
+        state.copyWith(status: ClientHomeStatus.success, dashboardData: data),
+      );
+    } catch (e) {
+      emit(
+        state.copyWith(
+          status: ClientHomeStatus.error,
+          errorMessage: e.toString(),
+        ),
+      );
+    }
+  }
+
+  void _onEditModeToggled(
+    ClientHomeEditModeToggled event,
+    Emitter<ClientHomeState> emit,
+  ) {
+    emit(state.copyWith(isEditMode: !state.isEditMode));
+  }
+
+  void _onWidgetVisibilityToggled(
+    ClientHomeWidgetVisibilityToggled event,
+    Emitter<ClientHomeState> emit,
+  ) {
+    final newVisibility = Map<String, bool>.from(state.widgetVisibility);
+    newVisibility[event.widgetId] = !(newVisibility[event.widgetId] ?? true);
+    emit(state.copyWith(widgetVisibility: newVisibility));
+  }
+
+  void _onWidgetReordered(
+    ClientHomeWidgetReordered event,
+    Emitter<ClientHomeState> emit,
+  ) {
+    final newList = List<String>.from(state.widgetOrder);
+    int oldIndex = event.oldIndex;
+    int newIndex = event.newIndex;
+
+    if (oldIndex < newIndex) {
+      newIndex -= 1;
+    }
+    final item = newList.removeAt(oldIndex);
+    newList.insert(newIndex, item);
+
+    emit(state.copyWith(widgetOrder: newList));
+  }
+
+  void _onLayoutReset(
+    ClientHomeLayoutReset event,
+    Emitter<ClientHomeState> emit,
+  ) {
+    emit(
+      state.copyWith(
+        widgetOrder: const [
+          'actions',
+          'reorder',
+          'coverage',
+          'spending',
+          'liveActivity',
+        ],
+        widgetVisibility: const {
+          'actions': true,
+          'reorder': true,
+          'coverage': true,
+          'spending': true,
+          'liveActivity': true,
+        },
+      ),
+    );
+  }
+}

apps/mobile/packages/features/client/home/lib/src/presentation/blocs/client_home_event.dart

@@ -0,0 +1,31 @@
+import 'package:equatable/equatable.dart';
+
+abstract class ClientHomeEvent extends Equatable {
+  const ClientHomeEvent();
+
+  @override
+  List<Object?> get props => [];
+}
+
+class ClientHomeStarted extends ClientHomeEvent {}
+
+class ClientHomeEditModeToggled extends ClientHomeEvent {}
+
+class ClientHomeWidgetVisibilityToggled extends ClientHomeEvent {
+  final String widgetId;
+  const ClientHomeWidgetVisibilityToggled(this.widgetId);
+
+  @override
+  List<Object?> get props => [widgetId];
+}
+
+class ClientHomeWidgetReordered extends ClientHomeEvent {
+  final int oldIndex;
+  final int newIndex;
+  const ClientHomeWidgetReordered(this.oldIndex, this.newIndex);
+
+  @override
+  List<Object?> get props => [oldIndex, newIndex];
+}
+
+class ClientHomeLayoutReset extends ClientHomeEvent {}

apps/mobile/packages/features/client/home/lib/src/presentation/blocs/client_home_state.dart

@@ -0,0 +1,71 @@
+import 'package:equatable/equatable.dart';
+import 'package:krow_domain/krow_domain.dart';
+
+/// Status of the client home dashboard.
+enum ClientHomeStatus { initial, loading, success, error }
+
+/// Represents the state of the client home dashboard.
+class ClientHomeState extends Equatable {
+  final ClientHomeStatus status;
+  final List<String> widgetOrder;
+  final Map<String, bool> widgetVisibility;
+  final bool isEditMode;
+  final String? errorMessage;
+  final HomeDashboardData dashboardData;
+
+  const ClientHomeState({
+    this.status = ClientHomeStatus.initial,
+    this.widgetOrder = const [
+      'actions',
+      'reorder',
+      'coverage',
+      'spending',
+      'liveActivity',
+    ],
+    this.widgetVisibility = const {
+      'actions': true,
+      'reorder': true,
+      'coverage': true,
+      'spending': true,
+      'liveActivity': true,
+    },
+    this.isEditMode = false,
+    this.errorMessage,
+    this.dashboardData = const HomeDashboardData(
+      weeklySpending: 4250.0,
+      next7DaysSpending: 6100.0,
+      weeklyShifts: 12,
+      next7DaysScheduled: 18,
+      totalNeeded: 10,
+      totalFilled: 8,
+    ),
+  });
+
+  ClientHomeState copyWith({
+    ClientHomeStatus? status,
+    List<String>? widgetOrder,
+    Map<String, bool>? widgetVisibility,
+    bool? isEditMode,
+    String? errorMessage,
+    HomeDashboardData? dashboardData,
+  }) {
+    return ClientHomeState(
+      status: status ?? this.status,
+      widgetOrder: widgetOrder ?? this.widgetOrder,
+      widgetVisibility: widgetVisibility ?? this.widgetVisibility,
+      isEditMode: isEditMode ?? this.isEditMode,
+      errorMessage: errorMessage ?? this.errorMessage,
+      dashboardData: dashboardData ?? this.dashboardData,
+    );
+  }
+
+  @override
+  List<Object?> get props => [
+    status,
+    widgetOrder,
+    widgetVisibility,
+    isEditMode,
+    errorMessage,
+    dashboardData,
+  ];
+}

apps/mobile/packages/features/client/home/lib/src/presentation/navigation/client_home_navigator.dart

@@ -0,0 +1,20 @@
+import 'package:flutter_modular/flutter_modular.dart';
+
+/// Extension on [IModularNavigator] to provide strongly-typed navigation
+/// for the client home feature.
+extension ClientHomeNavigator on IModularNavigator {
+  /// Navigates to the client home page.
+  void pushClientHome() {
+    pushNamed('/client/home/');
+  }
+
+  /// Navigates to the settings page.
+  void pushSettings() {
+    pushNamed('/client-settings/');
+  }
+
+  /// Navigates to the hubs page.
+  void pushHubs() {
+    pushNamed('/client/hubs');
+  }
+}

apps/mobile/packages/features/client/home/lib/src/presentation/pages/client_home_page.dart

@@ -0,0 +1,442 @@
+import 'package:core_localization/core_localization.dart';
+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 '../blocs/client_home_bloc.dart';
+import '../blocs/client_home_event.dart';
+import '../blocs/client_home_state.dart';
+import '../navigation/client_home_navigator.dart';
+import '../widgets/actions_widget.dart';
+import '../widgets/coverage_widget.dart';
+import '../widgets/live_activity_widget.dart';
+import '../widgets/reorder_widget.dart';
+import '../widgets/shift_order_form_sheet.dart';
+import '../widgets/spending_widget.dart';
+
+/// The main Home page for client users.
+class ClientHomePage extends StatelessWidget {
+  /// Creates a [ClientHomePage].
+  const ClientHomePage({super.key});
+
+  void _openOrderFormSheet(
+    BuildContext context,
+    Map<String, dynamic>? shiftData,
+  ) {
+    showModalBottomSheet(
+      context: context,
+      isScrollControlled: true,
+      backgroundColor: Colors.transparent,
+      builder: (context) {
+        return ShiftOrderFormSheet(
+          initialData: shiftData,
+          onSubmit: (data) {
+            Navigator.pop(context);
+          },
+        );
+      },
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final i18n = t.client_home;
+
+    return BlocProvider<ClientHomeBloc>(
+      create: (context) =>
+          Modular.get<ClientHomeBloc>()..add(ClientHomeStarted()),
+      child: Scaffold(
+        body: SafeArea(
+          child: Column(
+            children: [
+              _buildHeader(context, i18n),
+              _buildEditModeBanner(i18n),
+              Flexible(
+                child: BlocBuilder<ClientHomeBloc, ClientHomeState>(
+                  builder: (context, state) {
+                    if (state.isEditMode) {
+                      return ReorderableListView(
+                        padding: const EdgeInsets.fromLTRB(
+                          UiConstants.space4,
+                          0,
+                          UiConstants.space4,
+                          100,
+                        ),
+                        onReorder: (oldIndex, newIndex) {
+                          BlocProvider.of<ClientHomeBloc>(
+                            context,
+                          ).add(ClientHomeWidgetReordered(oldIndex, newIndex));
+                        },
+                        children: state.widgetOrder.map((id) {
+                          return Container(
+                            key: ValueKey(id),
+                            margin: const EdgeInsets.only(
+                              bottom: UiConstants.space4,
+                            ),
+                            child: _buildDraggableWidgetWrapper(
+                              context,
+                              id,
+                              state,
+                            ),
+                          );
+                        }).toList(),
+                      );
+                    }
+
+                    return ListView(
+                      padding: const EdgeInsets.fromLTRB(
+                        UiConstants.space4,
+                        0,
+                        UiConstants.space4,
+                        100,
+                      ),
+                      children: state.widgetOrder.map((id) {
+                        if (!(state.widgetVisibility[id] ?? true)) {
+                          return const SizedBox.shrink();
+                        }
+                        return Padding(
+                          padding: const EdgeInsets.only(
+                            bottom: UiConstants.space4,
+                          ),
+                          child: _buildWidgetContent(context, id, state),
+                        );
+                      }).toList(),
+                    );
+                  },
+                ),
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+
+  Widget _buildHeader(BuildContext context, dynamic i18n) {
+    return BlocBuilder<ClientHomeBloc, ClientHomeState>(
+      builder: (context, state) {
+        return Padding(
+          padding: const EdgeInsets.fromLTRB(
+            UiConstants.space4,
+            UiConstants.space4,
+            UiConstants.space4,
+            UiConstants.space3,
+          ),
+          child: Row(
+            mainAxisAlignment: MainAxisAlignment.spaceBetween,
+            children: [
+              Row(
+                children: [
+                  Container(
+                    width: 40,
+                    height: 40,
+                    decoration: BoxDecoration(
+                      shape: BoxShape.circle,
+                      border: Border.all(
+                        color: UiColors.primary.withValues(alpha: 0.2),
+                        width: 2,
+                      ),
+                    ),
+                    child: CircleAvatar(
+                      backgroundColor: UiColors.primary.withValues(alpha: 0.1),
+                      child: Text(
+                        'C',
+                        style: UiTypography.body2b.copyWith(
+                          color: UiColors.primary,
+                        ),
+                      ),
+                    ),
+                  ),
+                  const SizedBox(width: UiConstants.space3),
+                  Column(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    children: [
+                      Text(
+                        i18n.dashboard.welcome_back,
+                        style: UiTypography.footnote2r.textSecondary,
+                      ),
+                      Text('Your Company', style: UiTypography.body1b),
+                    ],
+                  ),
+                ],
+              ),
+              Row(
+                children: [
+                  _HeaderIconButton(
+                    icon: UiIcons.edit,
+                    isActive: state.isEditMode,
+                    onTap: () => BlocProvider.of<ClientHomeBloc>(
+                      context,
+                    ).add(ClientHomeEditModeToggled()),
+                  ),
+                  const SizedBox(width: UiConstants.space2),
+                  _HeaderIconButton(
+                    icon: UiIcons.bell,
+                    badgeText: '3',
+                    onTap: () {},
+                  ),
+                  const SizedBox(width: UiConstants.space2),
+                  _HeaderIconButton(
+                    icon: UiIcons.settings,
+                    onTap: () => Modular.to.pushSettings(),
+                  ),
+                ],
+              ),
+            ],
+          ),
+        );
+      },
+    );
+  }
+
+  Widget _buildEditModeBanner(dynamic i18n) {
+    return BlocBuilder<ClientHomeBloc, ClientHomeState>(
+      buildWhen: (prev, curr) => prev.isEditMode != curr.isEditMode,
+      builder: (context, state) {
+        return AnimatedContainer(
+          duration: const Duration(milliseconds: 300),
+          height: state.isEditMode ? 76 : 0,
+          clipBehavior: Clip.antiAlias,
+          margin: const EdgeInsets.symmetric(
+            horizontal: UiConstants.space4,
+            vertical: UiConstants.space2,
+          ),
+          padding: const EdgeInsets.all(UiConstants.space3),
+          decoration: BoxDecoration(
+            color: UiColors.primary.withValues(alpha: 0.1),
+            border: Border.all(color: UiColors.primary.withValues(alpha: 0.3)),
+            borderRadius: UiConstants.radiusLg,
+          ),
+          child: Row(
+            mainAxisAlignment: MainAxisAlignment.spaceBetween,
+            children: [
+              const Icon(UiIcons.edit, size: 16, color: UiColors.primary),
+              const SizedBox(width: UiConstants.space2),
+              Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                mainAxisAlignment: MainAxisAlignment.center,
+                children: [
+                  Text(
+                    i18n.dashboard.edit_mode_active,
+                    style: UiTypography.footnote1b.copyWith(
+                      color: UiColors.primary,
+                    ),
+                  ),
+                  Text(
+                    i18n.dashboard.drag_instruction,
+                    style: UiTypography.footnote2r.textSecondary,
+                  ),
+                ],
+              ),
+              UiButton.secondary(
+                text: i18n.dashboard.reset,
+                onPressed: () => BlocProvider.of<ClientHomeBloc>(
+                  context,
+                ).add(ClientHomeLayoutReset()),
+                size: UiButtonSize.small,
+                style: OutlinedButton.styleFrom(
+                  minimumSize: const Size(0, 48),
+                  maximumSize: const Size(double.infinity, 48),
+                ),
+              ),
+            ],
+          ),
+        );
+      },
+    );
+  }
+
+  Widget _buildDraggableWidgetWrapper(
+    BuildContext context,
+    String id,
+    ClientHomeState state,
+  ) {
+    final isVisible = state.widgetVisibility[id] ?? true;
+    final title = _getWidgetTitle(id);
+
+    return Column(
+      children: [
+        Row(
+          children: [
+            Container(
+              padding: const EdgeInsets.symmetric(
+                horizontal: UiConstants.space2,
+                vertical: UiConstants.space1,
+              ),
+              decoration: BoxDecoration(
+                color: UiColors.white,
+                borderRadius: UiConstants.radiusMd,
+                border: Border.all(color: UiColors.border),
+              ),
+              child: Row(
+                children: [
+                  const Icon(
+                    UiIcons.gripVertical,
+                    size: 14,
+                    color: UiColors.iconSecondary,
+                  ),
+                  const SizedBox(width: UiConstants.space2),
+                  Text(title, style: UiTypography.footnote1m),
+                ],
+              ),
+            ),
+            const SizedBox(width: UiConstants.space2),
+            GestureDetector(
+              onTap: () => BlocProvider.of<ClientHomeBloc>(
+                context,
+              ).add(ClientHomeWidgetVisibilityToggled(id)),
+              child: Container(
+                padding: const EdgeInsets.all(UiConstants.space1),
+                decoration: BoxDecoration(
+                  color: UiColors.white,
+                  borderRadius: UiConstants.radiusMd,
+                  border: Border.all(color: UiColors.border),
+                ),
+                child: Icon(
+                  isVisible ? UiIcons.success : UiIcons.error,
+                  size: 14,
+                  color: isVisible ? UiColors.primary : UiColors.iconSecondary,
+                ),
+              ),
+            ),
+          ],
+        ),
+        const SizedBox(height: UiConstants.space2),
+        Opacity(
+          opacity: isVisible ? 1.0 : 0.4,
+          child: IgnorePointer(
+            ignoring: !isVisible,
+            child: _buildWidgetContent(context, id, state),
+          ),
+        ),
+      ],
+    );
+  }
+
+  Widget _buildWidgetContent(
+    BuildContext context,
+    String id,
+    ClientHomeState state,
+  ) {
+    switch (id) {
+      case 'actions':
+        return ActionsWidget(
+          onRapidPressed: () {},
+          onCreateOrderPressed: () => _openOrderFormSheet(context, null),
+          onHubsPressed: () => Modular.to.pushHubs(),
+        );
+      case 'reorder':
+        return ReorderWidget(
+          onReorderPressed: (data) => _openOrderFormSheet(context, data),
+        );
+      case 'spending':
+        return SpendingWidget(
+          weeklySpending: state.dashboardData.weeklySpending,
+          next7DaysSpending: state.dashboardData.next7DaysSpending,
+          weeklyShifts: state.dashboardData.weeklyShifts,
+          next7DaysScheduled: state.dashboardData.next7DaysScheduled,
+        );
+      case 'coverage':
+        return CoverageWidget(
+          totalNeeded: state.dashboardData.totalNeeded,
+          totalConfirmed: state.dashboardData.totalFilled,
+          coveragePercent: state.dashboardData.totalNeeded > 0
+              ? ((state.dashboardData.totalFilled /
+                            state.dashboardData.totalNeeded) *
+                        100)
+                    .toInt()
+              : 0,
+        );
+      case 'liveActivity':
+        return LiveActivityWidget(onViewAllPressed: () {});
+      default:
+        return const SizedBox.shrink();
+    }
+  }
+
+  String _getWidgetTitle(String id) {
+    final i18n = t.client_home.widgets;
+    switch (id) {
+      case 'actions':
+        return i18n.actions;
+      case 'reorder':
+        return i18n.reorder;
+      case 'coverage':
+        return i18n.coverage;
+      case 'spending':
+        return i18n.spending;
+      case 'liveActivity':
+        return i18n.live_activity;
+      default:
+        return '';
+    }
+  }
+}
+
+class _HeaderIconButton extends StatelessWidget {
+  final IconData icon;
+  final String? badgeText;
+  final bool isActive;
+  final VoidCallback onTap;
+
+  const _HeaderIconButton({
+    required this.icon,
+    this.badgeText,
+    this.isActive = false,
+    required this.onTap,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return GestureDetector(
+      onTap: onTap,
+      child: Stack(
+        clipBehavior: Clip.none,
+        children: [
+          Container(
+            width: 32,
+            height: 32,
+            decoration: BoxDecoration(
+              color: isActive ? UiColors.primary : UiColors.white,
+              borderRadius: UiConstants.radiusMd,
+              boxShadow: [
+                BoxShadow(
+                  color: Colors.black.withValues(alpha: 0.05),
+                  blurRadius: 2,
+                ),
+              ],
+            ),
+            child: Icon(
+              icon,
+              color: isActive ? UiColors.white : UiColors.iconSecondary,
+              size: 16,
+            ),
+          ),
+          if (badgeText != null)
+            Positioned(
+              top: -4,
+              right: -4,
+              child: Container(
+                padding: const EdgeInsets.all(4),
+                decoration: const BoxDecoration(
+                  color: UiColors.iconError,
+                  shape: BoxShape.circle,
+                ),
+                constraints: const BoxConstraints(minWidth: 16, minHeight: 16),
+                child: Center(
+                  child: Text(
+                    badgeText!,
+                    style: UiTypography.footnote2b.copyWith(
+                      color: UiColors.white,
+                      fontSize: 8,
+                    ),
+                  ),
+                ),
+              ),
+            ),
+        ],
+      ),
+    );
+  }
+}

apps/mobile/packages/features/client/home/lib/src/presentation/widgets/actions_widget.dart

@@ -0,0 +1,149 @@
+import 'package:core_localization/core_localization.dart';
+import 'package:design_system/design_system.dart';
+import 'package:flutter/material.dart';
+
+/// A widget that displays quick actions for the client.
+class ActionsWidget extends StatelessWidget {
+  /// Callback when RAPID is pressed.
+  final VoidCallback onRapidPressed;
+
+  /// Callback when Create Order is pressed.
+  final VoidCallback onCreateOrderPressed;
+
+  /// Callback when Hubs is pressed.
+  final VoidCallback onHubsPressed;
+
+  /// Creates an [ActionsWidget].
+  const ActionsWidget({
+    super.key,
+    required this.onRapidPressed,
+    required this.onCreateOrderPressed,
+    required this.onHubsPressed,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    // Check if client_home exists in t
+    final i18n = t.client_home.actions;
+
+    return Row(
+      children: [
+        Expanded(
+          child: _ActionCard(
+            title: i18n.rapid,
+            subtitle: i18n.rapid_subtitle,
+            icon: UiIcons.zap,
+            color: const Color(0xFFFEF2F2),
+            borderColor: const Color(0xFFFECACA),
+            iconBgColor: const Color(0xFFFEE2E2),
+            iconColor: const Color(0xFFDC2626),
+            textColor: const Color(0xFF7F1D1D),
+            subtitleColor: const Color(0xFFB91C1C),
+            onTap: onRapidPressed,
+          ),
+        ),
+        const SizedBox(width: UiConstants.space2),
+        Expanded(
+          child: _ActionCard(
+            title: i18n.create_order,
+            subtitle: i18n.create_order_subtitle,
+            icon: UiIcons.add,
+            color: UiColors.white,
+            borderColor: UiColors.border,
+            iconBgColor: const Color(0xFFEFF6FF),
+            iconColor: const Color(0xFF2563EB),
+            textColor: UiColors.textPrimary,
+            subtitleColor: UiColors.textSecondary,
+            onTap: onCreateOrderPressed,
+          ),
+        ),
+        const SizedBox(width: UiConstants.space2),
+        Expanded(
+          child: _ActionCard(
+            title: i18n.hubs,
+            subtitle: i18n.hubs_subtitle,
+            icon: UiIcons.nfc,
+            color: const Color(0xFFF0FDF4),
+            borderColor: const Color(0xFFBBF7D0),
+            iconBgColor: const Color(0xFFDCFCE7),
+            iconColor: const Color(0xFF16A34A),
+            textColor: const Color(0xFF064E3B),
+            subtitleColor: const Color(0xFF15803D),
+            onTap: onHubsPressed,
+          ),
+        ),
+      ],
+    );
+  }
+}
+
+class _ActionCard extends StatelessWidget {
+  final String title;
+  final String subtitle;
+  final IconData icon;
+  final Color color;
+  final Color borderColor;
+  final Color iconBgColor;
+  final Color iconColor;
+  final Color textColor;
+  final Color subtitleColor;
+  final VoidCallback onTap;
+
+  const _ActionCard({
+    required this.title,
+    required this.subtitle,
+    required this.icon,
+    required this.color,
+    required this.borderColor,
+    required this.iconBgColor,
+    required this.iconColor,
+    required this.textColor,
+    required this.subtitleColor,
+    required this.onTap,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return GestureDetector(
+      onTap: onTap,
+      child: Container(
+        height: 100,
+        padding: const EdgeInsets.all(UiConstants.space3),
+        decoration: BoxDecoration(
+          color: color,
+          borderRadius: UiConstants.radiusLg,
+          border: Border.all(color: borderColor),
+          boxShadow: [
+            BoxShadow(
+              color: UiColors.black.withValues(alpha: 0.02),
+              blurRadius: 4,
+            ),
+          ],
+        ),
+        child: Column(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            Container(
+              width: 36,
+              height: 36,
+              decoration: BoxDecoration(
+                color: iconBgColor,
+                borderRadius: UiConstants.radiusLg,
+              ),
+              child: Icon(icon, color: iconColor, size: 16),
+            ),
+            const SizedBox(height: UiConstants.space2),
+            Text(
+              title,
+              style: UiTypography.footnote1b.copyWith(color: textColor),
+            ),
+            Text(
+              subtitle,
+              style: UiTypography.footnote2r.copyWith(color: subtitleColor),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

apps/mobile/packages/features/client/home/lib/src/presentation/widgets/coverage_dashboard.dart

@@ -0,0 +1,222 @@
+import 'package:design_system/design_system.dart';
+import 'package:flutter/material.dart';
+
+/// A dashboard widget that displays today's coverage status.
+class CoverageDashboard extends StatelessWidget {
+  /// The list of shifts for today.
+  final List<dynamic> shifts;
+
+  /// The list of applications for today's shifts.
+  final List<dynamic> applications;
+
+  /// Creates a [CoverageDashboard].
+  const CoverageDashboard({
+    super.key,
+    required this.shifts,
+    required this.applications,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    int totalNeeded = 0;
+    int totalConfirmed = 0;
+    double todayCost = 0;
+
+    for (final s in shifts) {
+      final needed = s['workersNeeded'] as int? ?? 0;
+      final confirmed = s['filled'] as int? ?? 0;
+      final rate = s['hourlyRate'] as double? ?? 20.0;
+
+      totalNeeded += needed;
+      totalConfirmed += confirmed;
+      todayCost += rate * 8 * confirmed;
+    }
+
+    final coveragePercent = totalNeeded > 0
+        ? ((totalConfirmed / totalNeeded) * 100).round()
+        : 100;
+    final unfilledPositions = totalNeeded - totalConfirmed;
+
+    final checkedInCount = applications
+        .where((a) => (a as Map)['checkInTime'] != null)
+        .length;
+    final lateWorkersCount = applications
+        .where((a) => (a as Map)['status'] == 'LATE')
+        .length;
+
+    final isCoverageGood = coveragePercent >= 90;
+    final coverageBadgeColor = isCoverageGood
+        ? const Color(0xFFD1FAE5) // TODO: Use design system color if available
+        : const Color(0xFFFEF3C7);
+    final coverageTextColor = isCoverageGood
+        ? const Color(0xFF047857)
+        : const Color(0xFFB45309);
+
+    return Container(
+      padding: const EdgeInsets.all(UiConstants.space4),
+      decoration: BoxDecoration(
+        color: UiColors.white,
+        borderRadius: UiConstants.radiusLg,
+        border: Border.all(color: UiColors.border),
+        boxShadow: [
+          BoxShadow(
+            color: UiColors.black.withValues(alpha: 0.02),
+            blurRadius: 4,
+            offset: const Offset(0, 1),
+          ),
+        ],
+      ),
+      child: Column(
+        children: [
+          Row(
+            mainAxisAlignment: MainAxisAlignment.spaceBetween,
+            children: [
+              Text("Today's Status", style: UiTypography.body1m.textSecondary),
+              Container(
+                padding: const EdgeInsets.symmetric(
+                  horizontal: UiConstants.space2,
+                  vertical: 2.0,
+                ),
+                decoration: BoxDecoration(
+                  color: coverageBadgeColor,
+                  borderRadius: UiConstants.radiusMd,
+                ),
+                child: Text(
+                  '$coveragePercent% Covered',
+                  style: UiTypography.footnote1b.copyWith(
+                    color: coverageTextColor,
+                  ),
+                ),
+              ),
+            ],
+          ),
+          const SizedBox(height: UiConstants.space4),
+
+          Row(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              Expanded(
+                child: Column(
+                  children: [
+                    _StatusCard(
+                      label: 'Unfilled Today',
+                      value: '$unfilledPositions',
+                      icon: UiIcons.warning,
+                      isWarning: unfilledPositions > 0,
+                    ),
+                    if (lateWorkersCount > 0) ...[
+                      const SizedBox(height: UiConstants.space2),
+                      _StatusCard(
+                        label: 'Running Late',
+                        value: '$lateWorkersCount',
+                        icon: UiIcons.error,
+                        isError: true,
+                      ),
+                    ],
+                  ],
+                ),
+              ),
+              const SizedBox(width: UiConstants.space2),
+              Expanded(
+                child: Column(
+                  children: [
+                    _StatusCard(
+                      label: 'Checked In',
+                      value: '$checkedInCount/$totalConfirmed',
+                      icon: UiIcons.success,
+                      isInfo: true,
+                    ),
+                    const SizedBox(height: UiConstants.space2),
+                    _StatusCard(
+                      label: "Today's Cost",
+                      value: '\$${todayCost.round()}',
+                      icon: UiIcons.dollar,
+                      isInfo: true,
+                    ),
+                  ],
+                ),
+              ),
+            ],
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+class _StatusCard extends StatelessWidget {
+  final String label;
+  final String value;
+  final IconData icon;
+  final bool isWarning;
+  final bool isError;
+  final bool isInfo;
+
+  const _StatusCard({
+    required this.label,
+    required this.value,
+    required this.icon,
+    this.isWarning = false,
+    this.isError = false,
+    this.isInfo = false,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    Color bg = const Color(0xFFF1F5F9);
+    Color border = const Color(0xFFE2E8F0);
+    Color iconColor = UiColors.iconSecondary;
+    Color textColor = UiColors.textPrimary;
+
+    if (isWarning) {
+      bg = const Color(0xFFFFFBEB);
+      border = const Color(0xFFFDE68A);
+      iconColor = const Color(0xFFD97706);
+      textColor = const Color(0xFFB45309);
+    } else if (isError) {
+      bg = const Color(0xFFFEF2F2);
+      border = const Color(0xFFFECACA);
+      iconColor = const Color(0xFFDC2626);
+      textColor = const Color(0xFFB91C1C);
+    } else if (isInfo) {
+      bg = const Color(0xFFEFF6FF);
+      border = const Color(0xFFBFDBFE);
+      iconColor = const Color(0xFF2563EB);
+      textColor = const Color(0xFF1D4ED8);
+    }
+
+    return Container(
+      padding: const EdgeInsets.all(UiConstants.space3),
+      decoration: BoxDecoration(
+        color: bg,
+        border: Border.all(color: border),
+        borderRadius: UiConstants.radiusMd,
+      ),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Row(
+            children: [
+              Icon(icon, size: 16, color: iconColor),
+              const SizedBox(width: UiConstants.space2),
+              Expanded(
+                child: Text(
+                  label,
+                  style: UiTypography.footnote1m.copyWith(
+                    color: textColor.withValues(alpha: 0.8),
+                  ),
+                  overflow: TextOverflow.ellipsis,
+                ),
+              ),
+            ],
+          ),
+          const SizedBox(height: UiConstants.space1),
+          Text(
+            value,
+            style: UiTypography.headline3m.copyWith(color: textColor),
+          ),
+        ],
+      ),
+    );
+  }
+}

apps/mobile/packages/features/client/home/lib/src/presentation/widgets/coverage_widget.dart

@@ -0,0 +1,152 @@
+import 'package:design_system/design_system.dart';
+import 'package:flutter/material.dart';
+
+/// A widget that displays the daily coverage metrics.
+class CoverageWidget extends StatelessWidget {
+  /// The total number of shifts needed.
+  final int totalNeeded;
+
+  /// The number of confirmed shifts.
+  final int totalConfirmed;
+
+  /// The percentage of coverage (0-100).
+  final int coveragePercent;
+
+  /// Creates a [CoverageWidget].
+  const CoverageWidget({
+    super.key,
+    this.totalNeeded = 10,
+    this.totalConfirmed = 8,
+    this.coveragePercent = 80,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      children: [
+        Row(
+          mainAxisAlignment: MainAxisAlignment.spaceBetween,
+          children: [
+            Text(
+              "TODAY'S COVERAGE",
+              style: UiTypography.footnote1b.copyWith(
+                color: UiColors.textPrimary,
+                letterSpacing: 0.5,
+              ),
+            ),
+            Container(
+              padding: const EdgeInsets.symmetric(
+                horizontal: UiConstants.space2,
+                vertical:
+                    2, // 2px is not in metrics, using hardcoded for small tweaks or space0/space1
+              ),
+              decoration: BoxDecoration(
+                color: UiColors.tagActive,
+                borderRadius: UiConstants.radiusLg,
+              ),
+              child: Text(
+                '$coveragePercent% Covered',
+                style: UiTypography.footnote2b.copyWith(
+                  color: UiColors.textSuccess,
+                ),
+              ),
+            ),
+          ],
+        ),
+        const SizedBox(height: UiConstants.space2),
+        Row(
+          children: [
+            Expanded(
+              child: _MetricCard(
+                icon: UiIcons.target,
+                iconColor: UiColors.primary,
+                label: 'Needed',
+                value: '$totalNeeded',
+              ),
+            ),
+            const SizedBox(width: UiConstants.space2),
+            Expanded(
+              child: _MetricCard(
+                icon: UiIcons.success,
+                iconColor: UiColors.iconSuccess,
+                label: 'Filled',
+                value: '$totalConfirmed',
+                valueColor: UiColors.textSuccess,
+              ),
+            ),
+            const SizedBox(width: UiConstants.space2),
+            Expanded(
+              child: _MetricCard(
+                icon: UiIcons.error,
+                iconColor: UiColors.iconError,
+                label: 'Open',
+                value: '${totalNeeded - totalConfirmed}',
+                valueColor: UiColors.textError,
+              ),
+            ),
+          ],
+        ),
+      ],
+    );
+  }
+}
+
+class _MetricCard extends StatelessWidget {
+  final IconData icon;
+  final Color iconColor;
+  final String label;
+  final String value;
+  final Color? valueColor;
+
+  const _MetricCard({
+    required this.icon,
+    required this.iconColor,
+    required this.label,
+    required this.value,
+    this.valueColor,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: const EdgeInsets.all(UiConstants.space2 + 2), // 10px
+      decoration: BoxDecoration(
+        color: UiColors.cardViewBackground,
+        borderRadius: UiConstants.radiusLg,
+        border: Border.all(color: UiColors.border),
+        boxShadow: [
+          BoxShadow(
+            color: UiColors.black.withValues(alpha: 0.02),
+            blurRadius: 2,
+          ),
+        ],
+      ),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Row(
+            children: [
+              Icon(icon, size: 14, color: iconColor),
+              const SizedBox(width: 6), // 6px
+              Text(
+                label,
+                style: UiTypography.footnote2m.copyWith(
+                  color: UiColors.textSecondary,
+                ),
+              ),
+            ],
+          ),
+          const SizedBox(width: 6), // 6px
+          Text(
+            value,
+            style: UiTypography.headline3m.copyWith(
+              color: valueColor ?? UiColors.textPrimary,
+              fontWeight:
+                  FontWeight.bold, // header3 is usually bold, but ensuring
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}

apps/mobile/packages/features/client/home/lib/src/presentation/widgets/live_activity_widget.dart

@@ -0,0 +1,69 @@
+import 'package:core_localization/core_localization.dart';
+import 'package:design_system/design_system.dart';
+import 'package:flutter/material.dart';
+import 'coverage_dashboard.dart';
+
+/// A widget that displays live activity information.
+class LiveActivityWidget extends StatelessWidget {
+  /// Callback when "View all" is pressed.
+  final VoidCallback onViewAllPressed;
+
+  /// Creates a [LiveActivityWidget].
+  const LiveActivityWidget({super.key, required this.onViewAllPressed});
+
+  @override
+  Widget build(BuildContext context) {
+    final i18n = t.client_home;
+
+    // Mock data
+    final shifts = [
+      {
+        'workersNeeded': 5,
+        'filled': 4,
+        'hourlyRate': 20.0,
+        'status': 'OPEN',
+        'date': DateTime.now().toIso8601String().split('T')[0],
+      },
+      {
+        'workersNeeded': 5,
+        'filled': 5,
+        'hourlyRate': 22.0,
+        'status': 'FILLED',
+        'date': DateTime.now().toIso8601String().split('T')[0],
+      },
+    ];
+    final applications = [
+      {'status': 'CONFIRMED', 'checkInTime': '09:00'},
+      {'status': 'CONFIRMED', 'checkInTime': '09:05'},
+      {'status': 'CONFIRMED'},
+      {'status': 'LATE'},
+    ];
+
+    return Column(
+      children: [
+        Row(
+          mainAxisAlignment: MainAxisAlignment.spaceBetween,
+          children: [
+            Text(
+              i18n.widgets.live_activity.toUpperCase(),
+              style: UiTypography.footnote1b.textSecondary.copyWith(
+                letterSpacing: 0.5,
+              ),
+            ),
+            GestureDetector(
+              onTap: onViewAllPressed,
+              child: Text(
+                i18n.dashboard.view_all,
+                style: UiTypography.footnote1m.copyWith(
+                  color: UiColors.primary,
+                ),
+              ),
+            ),
+          ],
+        ),
+        const SizedBox(height: UiConstants.space2),
+        CoverageDashboard(shifts: shifts, applications: applications),
+      ],
+    );
+  }
+}

apps/mobile/packages/features/client/home/lib/src/presentation/widgets/reorder_widget.dart

@@ -0,0 +1,233 @@
+import 'package:core_localization/core_localization.dart';
+import 'package:design_system/design_system.dart';
+import 'package:flutter/material.dart';
+
+/// A widget that allows clients to reorder recent shifts.
+class ReorderWidget extends StatelessWidget {
+  /// Callback when a reorder button is pressed.
+  final Function(Map<String, dynamic> shiftData) onReorderPressed;
+
+  /// Creates a [ReorderWidget].
+  const ReorderWidget({super.key, required this.onReorderPressed});
+
+  @override
+  Widget build(BuildContext context) {
+    final i18n = t.client_home.reorder;
+
+    // Mock recent orders
+    final recentOrders = [
+      {
+        'title': 'Server',
+        'location': 'Downtown Restaurant',
+        'hourlyRate': 18.0,
+        'hours': 6,
+        'workers': 3,
+        'type': 'One Day',
+      },
+      {
+        'title': 'Bartender',
+        'location': 'Rooftop Bar',
+        'hourlyRate': 22.0,
+        'hours': 7,
+        'workers': 2,
+        'type': 'One Day',
+      },
+      {
+        'title': 'Event Staff',
+        'location': 'Convention Center',
+        'hourlyRate': 20.0,
+        'hours': 10,
+        'workers': 5,
+        'type': 'Multi-Day',
+      },
+    ];
+
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Text(
+          i18n.title,
+          style: UiTypography.footnote1b.textSecondary.copyWith(
+            letterSpacing: 0.5,
+          ),
+        ),
+        const SizedBox(height: UiConstants.space2),
+        SizedBox(
+          height: 140,
+          child: ListView.separated(
+            scrollDirection: Axis.horizontal,
+            itemCount: recentOrders.length,
+            separatorBuilder: (context, index) =>
+                const SizedBox(width: UiConstants.space3),
+            itemBuilder: (context, index) {
+              final order = recentOrders[index];
+              final totalCost =
+                  (order['hourlyRate'] as double) *
+                  (order['hours'] as int) *
+                  (order['workers'] as int);
+
+              return Container(
+                width: 260,
+                padding: const EdgeInsets.all(UiConstants.space3),
+                decoration: BoxDecoration(
+                  color: UiColors.white,
+                  borderRadius: UiConstants.radiusLg,
+                  border: Border.all(color: UiColors.border),
+                  boxShadow: [
+                    BoxShadow(
+                      color: UiColors.black.withValues(alpha: 0.02),
+                      blurRadius: 4,
+                    ),
+                  ],
+                ),
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    Row(
+                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                      children: [
+                        Expanded(
+                          child: Row(
+                            children: [
+                              Container(
+                                width: 36,
+                                height: 36,
+                                decoration: BoxDecoration(
+                                  color: UiColors.primary.withValues(
+                                    alpha: 0.1,
+                                  ),
+                                  borderRadius: UiConstants.radiusLg,
+                                ),
+                                child: const Icon(
+                                  UiIcons.building,
+                                  size: 16,
+                                  color: UiColors.primary,
+                                ),
+                              ),
+                              const SizedBox(width: UiConstants.space2),
+                              Expanded(
+                                child: Column(
+                                  crossAxisAlignment: CrossAxisAlignment.start,
+                                  children: [
+                                    Text(
+                                      order['title'] as String,
+                                      style: UiTypography.body2b,
+                                      overflow: TextOverflow.ellipsis,
+                                    ),
+                                    Text(
+                                      order['location'] as String,
+                                      style:
+                                          UiTypography.footnote1r.textSecondary,
+                                      overflow: TextOverflow.ellipsis,
+                                    ),
+                                  ],
+                                ),
+                              ),
+                            ],
+                          ),
+                        ),
+                        Column(
+                          crossAxisAlignment: CrossAxisAlignment.end,
+                          children: [
+                            Text(
+                              '\$${totalCost.toStringAsFixed(0)}',
+                              style: UiTypography.body1b,
+                            ),
+                            Text(
+                              i18n.per_hr(
+                                    amount: order['hourlyRate'].toString(),
+                                  ) +
+                                  ' · ${order['hours']}h',
+                              style: UiTypography.footnote2r.textSecondary,
+                            ),
+                          ],
+                        ),
+                      ],
+                    ),
+                    const SizedBox(height: UiConstants.space3),
+                    Row(
+                      children: [
+                        _Badge(
+                          icon: UiIcons.success,
+                          text: order['type'] as String,
+                          color: const Color(0xFF2563EB),
+                          bg: const Color(0xFF2563EB),
+                          textColor: UiColors.white,
+                        ),
+                        const SizedBox(width: UiConstants.space2),
+                        _Badge(
+                          icon: UiIcons.building,
+                          text: '${order['workers']}',
+                          color: const Color(0xFF334155),
+                          bg: const Color(0xFFF1F5F9),
+                          textColor: const Color(0xFF334155),
+                        ),
+                      ],
+                    ),
+                    const Spacer(),
+                    SizedBox(
+                      height: 28,
+                      width: double.infinity,
+                      child: ElevatedButton.icon(
+                        onPressed: () => onReorderPressed(order),
+                        style: ElevatedButton.styleFrom(
+                          backgroundColor: UiColors.primary,
+                          foregroundColor: UiColors.white,
+                          padding: EdgeInsets.zero,
+                          shape: RoundedRectangleBorder(
+                            borderRadius: UiConstants.radiusMd,
+                          ),
+                          elevation: 0,
+                        ),
+                        icon: const Icon(UiIcons.zap, size: 12),
+                        label: Text(
+                          i18n.reorder_button,
+                          style: UiTypography.footnote1m,
+                        ),
+                      ),
+                    ),
+                  ],
+                ),
+              );
+            },
+          ),
+        ),
+      ],
+    );
+  }
+}
+
+class _Badge extends StatelessWidget {
+  final IconData icon;
+  final String text;
+  final Color color;
+  final Color bg;
+  final Color textColor;
+
+  const _Badge({
+    required this.icon,
+    required this.text,
+    required this.color,
+    required this.bg,
+    required this.textColor,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: const EdgeInsets.symmetric(
+        horizontal: UiConstants.space2,
+        vertical: UiConstants.space1,
+      ),
+      decoration: BoxDecoration(color: bg, borderRadius: UiConstants.radiusSm),
+      child: Row(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          Icon(icon, size: 10, color: bg == textColor ? UiColors.white : color),
+          const SizedBox(width: UiConstants.space1),
+          Text(text, style: UiTypography.footnote2b.copyWith(color: textColor)),
+        ],
+      ),
+    );
+  }
+}

apps/mobile/packages/features/client/home/lib/src/presentation/widgets/shift_order_form_sheet.dart

@@ -0,0 +1,438 @@
+import 'package:core_localization/core_localization.dart';
+import 'package:design_system/design_system.dart';
+import 'package:flutter/material.dart';
+
+/// A bottom sheet form for creating or reordering shifts.
+class ShiftOrderFormSheet extends StatefulWidget {
+  /// Initial data for the form (e.g. from a reorder action).
+  final Map<String, dynamic>? initialData;
+
+  /// Callback when the form is submitted.
+  final Function(Map<String, dynamic> data) onSubmit;
+
+  /// Whether the submission is loading.
+  final bool isLoading;
+
+  /// Creates a [ShiftOrderFormSheet].
+  const ShiftOrderFormSheet({
+    super.key,
+    this.initialData,
+    required this.onSubmit,
+    this.isLoading = false,
+  });
+
+  @override
+  State<ShiftOrderFormSheet> createState() => _ShiftOrderFormSheetState();
+}
+
+class _ShiftOrderFormSheetState extends State<ShiftOrderFormSheet> {
+  late Map<String, dynamic> _formData;
+  final List<String> _roles = [
+    'Server',
+    'Bartender',
+    'Busser',
+    'Cook',
+    'Dishwasher',
+    'Event Staff',
+    'Warehouse Worker',
+    'Retail Associate',
+    'Host/Hostess',
+  ];
+
+  @override
+  void initState() {
+    super.initState();
+    final defaultPosition = {
+      'title': '',
+      'start_time': '',
+      'end_time': '',
+      'workers_needed': 1,
+      'hourly_rate': 18.0,
+    };
+
+    final defaults = {
+      'date': '',
+      'location': '',
+      'recurring': false,
+      'duration_days': null,
+      'permanent': false,
+      'duration_months': null,
+      'positions': [Map<String, dynamic>.from(defaultPosition)],
+    };
+
+    if (widget.initialData != null) {
+      final input = widget.initialData!;
+      final firstPosition = {
+        ...defaultPosition,
+        'title': input['title'] ?? input['role'] ?? '',
+        'start_time': input['startTime'] ?? input['start_time'] ?? '',
+        'end_time': input['endTime'] ?? input['end_time'] ?? '',
+        'hourly_rate': (input['hourlyRate'] ?? input['hourly_rate'] ?? 18.0)
+            .toDouble(),
+        'workers_needed': (input['workers'] ?? input['workers_needed'] ?? 1)
+            .toInt(),
+      };
+
+      _formData = {
+        ...defaults,
+        ...input,
+        'positions': [firstPosition],
+      };
+    } else {
+      _formData = Map.from(defaults);
+    }
+
+    if (_formData['date'] == null || _formData['date'] == '') {
+      final tomorrow = DateTime.now().add(const Duration(days: 1));
+      _formData['date'] = tomorrow.toIso8601String().split('T')[0];
+    }
+  }
+
+  void _updateField(String field, dynamic value) {
+    setState(() {
+      _formData[field] = value;
+    });
+  }
+
+  void _updatePositionField(int index, String field, dynamic value) {
+    setState(() {
+      _formData['positions'][index][field] = value;
+    });
+  }
+
+  void _addPosition() {
+    setState(() {
+      _formData['positions'].add({
+        'title': '',
+        'start_time': '',
+        'end_time': '',
+        'workers_needed': 1,
+        'hourly_rate': 18.0,
+      });
+    });
+  }
+
+  void _removePosition(int index) {
+    if (_formData['positions'].length > 1) {
+      setState(() {
+        _formData['positions'].removeAt(index);
+      });
+    }
+  }
+
+  String _getShiftType() {
+    if (_formData['permanent'] == true ||
+        _formData['duration_months'] != null) {
+      return 'Long Term';
+    }
+    if (_formData['recurring'] == true || _formData['duration_days'] != null) {
+      return 'Multi-Day';
+    }
+    return 'One Day';
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final i18n = t.client_home.form;
+
+    return Container(
+      height: MediaQuery.of(context).size.height * 0.9,
+      decoration: const BoxDecoration(
+        color: UiColors.white,
+        borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
+      ),
+      child: Column(
+        children: [
+          Container(
+            padding: const EdgeInsets.all(UiConstants.space5),
+            decoration: BoxDecoration(
+              border: Border(bottom: BorderSide(color: UiColors.border)),
+            ),
+            child: Row(
+              mainAxisAlignment: MainAxisAlignment.spaceBetween,
+              children: [
+                Text(
+                  widget.initialData != null
+                      ? i18n.edit_reorder
+                      : i18n.post_new,
+                  style: UiTypography.headline3m.copyWith(
+                    fontWeight: FontWeight.bold,
+                  ),
+                ),
+                IconButton(
+                  icon: const Icon(
+                    UiIcons.close,
+                    color: UiColors.iconSecondary,
+                  ),
+                  onPressed: () => Navigator.pop(context),
+                ),
+              ],
+            ),
+          ),
+          if (widget.initialData != null)
+            Padding(
+              padding: const EdgeInsets.only(
+                left: UiConstants.space5,
+                right: UiConstants.space5,
+                bottom: UiConstants.space5,
+              ),
+              child: Text(
+                i18n.review_subtitle,
+                style: UiTypography.body2r.textSecondary,
+              ),
+            ),
+          Expanded(
+            child: SingleChildScrollView(
+              padding: const EdgeInsets.symmetric(
+                horizontal: UiConstants.space5,
+              ),
+              child: Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  // Shift Type Badge
+                  Container(
+                    margin: const EdgeInsets.only(bottom: UiConstants.space5),
+                    padding: const EdgeInsets.symmetric(
+                      horizontal: UiConstants.space3,
+                      vertical: UiConstants.space2,
+                    ),
+                    decoration: BoxDecoration(
+                      color: const Color(0xFFEFF6FF),
+                      borderRadius: UiConstants.radiusFull,
+                      border: Border.all(color: const Color(0xFFBFDBFE)),
+                    ),
+                    child: Row(
+                      mainAxisSize: MainAxisSize.min,
+                      children: [
+                        Container(
+                          width: 8,
+                          height: 8,
+                          decoration: const BoxDecoration(
+                            shape: BoxShape.circle,
+                            color: Color(0xFF3B82F6),
+                          ),
+                        ),
+                        const SizedBox(width: UiConstants.space2),
+                        Text(
+                          _getShiftType(),
+                          style: UiTypography.footnote1b.copyWith(
+                            color: const Color(0xFF1D4ED8),
+                          ),
+                        ),
+                      ],
+                    ),
+                  ),
+
+                  _buildLabel(i18n.date_label),
+                  UiTextField(
+                    hintText: i18n.date_hint,
+                    controller: TextEditingController(text: _formData['date']),
+                    readOnly: true,
+                    onTap: () async {
+                      final selectedDate = await showDatePicker(
+                        context: context,
+                        initialDate:
+                            _formData['date'] != null &&
+                                _formData['date'].isNotEmpty
+                            ? DateTime.parse(_formData['date'])
+                            : DateTime.now(),
+                        firstDate: DateTime.now(),
+                        lastDate: DateTime.now().add(
+                          const Duration(days: 365 * 5),
+                        ),
+                      );
+                      if (selectedDate != null) {
+                        _updateField(
+                          'date',
+                          selectedDate.toIso8601String().split('T')[0],
+                        );
+                      }
+                    },
+                  ),
+                  const SizedBox(height: UiConstants.space5),
+
+                  _buildLabel(i18n.location_label),
+                  UiTextField(
+                    hintText: i18n.location_hint,
+                    controller: TextEditingController(
+                      text: _formData['location'],
+                    ),
+                    onChanged: (value) => _updateField('location', value),
+                  ),
+                  const SizedBox(height: UiConstants.space5),
+
+                  Row(
+                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                    children: [
+                      Text(i18n.positions_title, style: UiTypography.body1b),
+                      UiButton.text(
+                        onPressed: _addPosition,
+                        text: i18n.add_position,
+                        leadingIcon: UiIcons.add,
+                        size: UiButtonSize.small,
+                        style: TextButton.styleFrom(
+                          minimumSize: const Size(0, 48),
+                          maximumSize: const Size(double.infinity, 48),
+                        ),
+                      ),
+                    ],
+                  ),
+                  const SizedBox(height: UiConstants.space4),
+
+                  ...(_formData['positions'] as List).asMap().entries.map((
+                    entry,
+                  ) {
+                    final index = entry.key;
+                    final position = entry.value;
+                    return _PositionCard(
+                      index: index,
+                      position: position,
+                      showDelete: _formData['positions'].length > 1,
+                      onDelete: () => _removePosition(index),
+                      roles: _roles,
+                      onUpdate: (field, value) =>
+                          _updatePositionField(index, field, value),
+                      labels: i18n,
+                    );
+                  }),
+                  const SizedBox(height: UiConstants.space10),
+                ],
+              ),
+            ),
+          ),
+          Padding(
+            padding: const EdgeInsets.all(UiConstants.space5),
+            child: UiButton.primary(
+              text: i18n.post_shift,
+              onPressed: () => widget.onSubmit(_formData),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+
+  Widget _buildLabel(String text) {
+    return Padding(
+      padding: const EdgeInsets.only(bottom: UiConstants.space2),
+      child: Text(text, style: UiTypography.body2b),
+    );
+  }
+}
+
+class _PositionCard extends StatelessWidget {
+  final int index;
+  final Map<String, dynamic> position;
+  final bool showDelete;
+  final VoidCallback onDelete;
+  final List<String> roles;
+  final Function(String field, dynamic value) onUpdate;
+  final dynamic labels;
+
+  const _PositionCard({
+    required this.index,
+    required this.position,
+    required this.showDelete,
+    required this.onDelete,
+    required this.roles,
+    required this.onUpdate,
+    required this.labels,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Card(
+      elevation: 0,
+      margin: const EdgeInsets.only(bottom: UiConstants.space5),
+      shape: RoundedRectangleBorder(borderRadius: UiConstants.radiusLg),
+      color: const Color(0xFFF8FAFC),
+      child: Padding(
+        padding: const EdgeInsets.all(UiConstants.space4),
+        child: Column(
+          children: [
+            Row(
+              mainAxisAlignment: MainAxisAlignment.spaceBetween,
+              children: [
+                Row(
+                  children: [
+                    Container(
+                      width: 32,
+                      height: 32,
+                      decoration: const BoxDecoration(
+                        shape: BoxShape.circle,
+                        color: UiColors.primary,
+                      ),
+                      child: Center(
+                        child: Text(
+                          '${index + 1}',
+                          style: UiTypography.footnote1b.copyWith(
+                            color: UiColors.white,
+                          ),
+                        ),
+                      ),
+                    ),
+                    const SizedBox(width: UiConstants.space2),
+                    Text('Position ${index + 1}', style: UiTypography.body2b),
+                  ],
+                ),
+                if (showDelete)
+                  IconButton(
+                    icon: const Icon(
+                      UiIcons.close,
+                      size: 18,
+                      color: UiColors.iconError,
+                    ),
+                    onPressed: onDelete,
+                  ),
+              ],
+            ),
+            const SizedBox(height: UiConstants.space4),
+
+            // Simplified for brevity in prototype-to-feature move
+            DropdownButtonFormField<String>(
+              initialValue: position['title'].isEmpty
+                  ? null
+                  : position['title'],
+              hint: Text(labels.role_hint),
+              items: roles
+                  .map(
+                    (role) => DropdownMenuItem(value: role, child: Text(role)),
+                  )
+                  .toList(),
+              onChanged: (value) => onUpdate('title', value),
+              decoration: InputDecoration(
+                labelText: labels.role_label,
+                border: const OutlineInputBorder(),
+              ),
+            ),
+
+            const SizedBox(height: UiConstants.space4),
+            Row(
+              children: [
+                Expanded(
+                  child: UiTextField(
+                    label: labels.start_time,
+                    controller: TextEditingController(
+                      text: position['start_time'],
+                    ),
+                    onChanged: (v) => onUpdate('start_time', v),
+                  ),
+                ),
+                const SizedBox(width: UiConstants.space2),
+                Expanded(
+                  child: UiTextField(
+                    label: labels.end_time,
+                    controller: TextEditingController(
+                      text: position['end_time'],
+                    ),
+                    onChanged: (v) => onUpdate('end_time', v),
+                  ),
+                ),
+              ],
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

apps/mobile/packages/features/client/home/lib/src/presentation/widgets/spending_widget.dart

@@ -0,0 +1,175 @@
+import 'package:core_localization/core_localization.dart';
+import 'package:design_system/design_system.dart';
+import 'package:flutter/material.dart';
+
+/// A widget that displays spending insights for the client.
+class SpendingWidget extends StatelessWidget {
+  /// The spending this week.
+  final double weeklySpending;
+
+  /// The spending for the next 7 days.
+  final double next7DaysSpending;
+
+  /// The number of shifts this week.
+  final int weeklyShifts;
+
+  /// The number of scheduled shifts for next 7 days.
+  final int next7DaysScheduled;
+
+  /// Creates a [SpendingWidget].
+  const SpendingWidget({
+    super.key,
+    required this.weeklySpending,
+    required this.next7DaysSpending,
+    required this.weeklyShifts,
+    required this.next7DaysScheduled,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final i18n = t.client_home;
+
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Text(
+          i18n.widgets.spending.toUpperCase(),
+          style: UiTypography.footnote1b.textSecondary.copyWith(
+            letterSpacing: 0.5,
+          ),
+        ),
+        const SizedBox(height: UiConstants.space2),
+        Container(
+          padding: const EdgeInsets.all(UiConstants.space3),
+          decoration: BoxDecoration(
+            gradient: const LinearGradient(
+              colors: [UiColors.primary, Color(0xFF0830B8)],
+              begin: Alignment.topLeft,
+              end: Alignment.bottomRight,
+            ),
+            borderRadius: UiConstants.radiusLg,
+            boxShadow: [
+              BoxShadow(
+                color: UiColors.primary.withValues(alpha: 0.3),
+                blurRadius: 4,
+                offset: const Offset(0, 4),
+              ),
+            ],
+          ),
+          child: Column(
+            children: [
+              Row(
+                children: [
+                  Expanded(
+                    child: Column(
+                      crossAxisAlignment: CrossAxisAlignment.start,
+                      children: [
+                        const Text(
+                          'This Week',
+                          style: TextStyle(color: Colors.white70, fontSize: 9),
+                        ),
+                        const SizedBox(height: UiConstants.space1),
+                        Text(
+                          '\$${weeklySpending.toStringAsFixed(0)}',
+                          style: UiTypography.headline3m.copyWith(
+                            color: UiColors.white,
+                            fontWeight: FontWeight.bold,
+                          ),
+                        ),
+                        Text(
+                          '$weeklyShifts shifts',
+                          style: TextStyle(
+                            color: Colors.white.withValues(alpha: 0.6),
+                            fontSize: 9,
+                          ),
+                        ),
+                      ],
+                    ),
+                  ),
+                  Expanded(
+                    child: Column(
+                      crossAxisAlignment: CrossAxisAlignment.end,
+                      children: [
+                        const Text(
+                          'Next 7 Days',
+                          style: TextStyle(color: Colors.white70, fontSize: 9),
+                        ),
+                        const SizedBox(height: UiConstants.space1),
+                        Text(
+                          '\$${next7DaysSpending.toStringAsFixed(0)}',
+                          style: UiTypography.headline4m.copyWith(
+                            color: UiColors.white,
+                            fontWeight: FontWeight.bold,
+                          ),
+                        ),
+                        Text(
+                          '$next7DaysScheduled scheduled',
+                          style: TextStyle(
+                            color: Colors.white.withValues(alpha: 0.6),
+                            fontSize: 9,
+                          ),
+                        ),
+                      ],
+                    ),
+                  ),
+                ],
+              ),
+              const SizedBox(height: UiConstants.space3),
+              Container(
+                padding: const EdgeInsets.only(top: UiConstants.space3),
+                decoration: const BoxDecoration(
+                  border: Border(top: BorderSide(color: Colors.white24)),
+                ),
+                child: Row(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    Container(
+                      width: 24,
+                      height: 24,
+                      decoration: BoxDecoration(
+                        color: Colors.white.withValues(alpha: 0.2),
+                        shape: BoxShape.circle,
+                      ),
+                      child: const Center(
+                        child: Icon(
+                          UiIcons.sparkles,
+                          color: UiColors.white,
+                          size: 14,
+                        ),
+                      ),
+                    ),
+                    const SizedBox(width: UiConstants.space2),
+                    Expanded(
+                      child: Column(
+                        crossAxisAlignment: CrossAxisAlignment.start,
+                        children: [
+                          Text(
+                            '💡 ' +
+                                i18n.dashboard.insight_lightbulb(amount: '180'),
+                            style: const TextStyle(
+                              color: Colors.white,
+                              fontSize: 10,
+                              fontWeight: FontWeight.w600,
+                            ),
+                          ),
+                          const SizedBox(height: 1),
+                          Text(
+                            i18n.dashboard.insight_tip,
+                            style: TextStyle(
+                              color: Colors.white.withValues(alpha: 0.8),
+                              fontSize: 9,
+                            ),
+                          ),
+                        ],
+                      ),
+                    ),
+                  ],
+                ),
+              ),
+            ],
+          ),
+        ),
+      ],
+    );
+  }
+}

apps/mobile/packages/features/client/home/pubspec.yaml

@@ -0,0 +1,31 @@
+name: client_home
+description: Home screen and dashboard for the client application.
+version: 0.0.1
+publish_to: none
+resolution: workspace
+
+environment:
+  sdk: '>=3.10.0 <4.0.0'
+  flutter: ">=3.0.0"
+
+dependencies:
+  flutter:
+    sdk: flutter
+  flutter_bloc: ^8.1.0
+  flutter_modular: ^6.3.0
+  equatable: ^2.0.5
+  lucide_icons: ^0.257.0
+  
+  design_system:
+    path: ../../../design_system
+  core_localization:
+    path: ../../../core_localization
+
+dev_dependencies:
+  flutter_test:
+    sdk: flutter
+  bloc_test: ^9.1.0
+  mocktail: ^1.0.0
+
+flutter:
+  uses-material-design: true

apps/mobile/packages/features/client/hubs/lib/client_hubs.dart

@@ -0,0 +1,49 @@
+library client_hubs;
+
+import 'package:flutter_modular/flutter_modular.dart';
+import 'package:krow_data_connect/krow_data_connect.dart';
+import 'src/data/repositories_impl/hub_repository_impl.dart';
+import 'src/domain/repositories/hub_repository_interface.dart';
+import 'src/domain/usecases/assign_nfc_tag_usecase.dart';
+import 'src/domain/usecases/create_hub_usecase.dart';
+import 'src/domain/usecases/delete_hub_usecase.dart';
+import 'src/domain/usecases/get_hubs_usecase.dart';
+import 'src/presentation/blocs/client_hubs_bloc.dart';
+import 'src/presentation/pages/client_hubs_page.dart';
+
+export 'src/presentation/pages/client_hubs_page.dart';
+
+/// A [Module] for the client hubs feature.
+class ClientHubsModule extends Module {
+  @override
+  List<Module> get imports => [DataConnectModule()];
+
+  @override
+  void binds(Injector i) {
+    // Repositories
+    i.addLazySingleton<HubRepositoryInterface>(
+      () => HubRepositoryImpl(mock: i.get<BusinessRepositoryMock>()),
+    );
+
+    // UseCases
+    i.addLazySingleton(GetHubsUseCase.new);
+    i.addLazySingleton(CreateHubUseCase.new);
+    i.addLazySingleton(DeleteHubUseCase.new);
+    i.addLazySingleton(AssignNfcTagUseCase.new);
+
+    // BLoCs
+    i.add<ClientHubsBloc>(
+      () => ClientHubsBloc(
+        getHubsUseCase: i.get<GetHubsUseCase>(),
+        createHubUseCase: i.get<CreateHubUseCase>(),
+        deleteHubUseCase: i.get<DeleteHubUseCase>(),
+        assignNfcTagUseCase: i.get<AssignNfcTagUseCase>(),
+      ),
+    );
+  }
+
+  @override
+  void routes(RouteManager r) {
+    r.child('/', child: (_) => const ClientHubsPage());
+  }
+}

apps/mobile/packages/features/client/hubs/lib/src/data/repositories_impl/hub_repository_impl.dart

@@ -0,0 +1,45 @@
+import 'package:krow_data_connect/krow_data_connect.dart';
+import 'package:krow_domain/krow_domain.dart';
+import '../../domain/repositories/hub_repository_interface.dart';
+
+/// Implementation of [HubRepositoryInterface] that uses [BusinessRepositoryMock].
+///
+/// This class serves as a data adapter that bridges the domain repository interface
+/// with the backend data source provided by the `data_connect` package. It strictly
+/// delegates all operations to the [BusinessRepositoryMock], ensuring no business
+/// logic resides in the data layer.
+class HubRepositoryImpl implements HubRepositoryInterface {
+  /// The business repository mock from data connect.
+  final BusinessRepositoryMock mock;
+
+  /// Creates a [HubRepositoryImpl] instance.
+  ///
+  /// Takes a [BusinessRepositoryMock] as a dependency to perform data operations.
+  HubRepositoryImpl({required this.mock});
+
+  @override
+  Future<List<Hub>> getHubs() {
+    // In a production environment, the business ID would be retrieved from
+    // a session manager or authentication state. For the current mock strategy,
+    // we use a hardcoded value 'biz_1' to represent the active client.
+    return mock.getHubs('biz_1');
+  }
+
+  @override
+  Future<Hub> createHub({required String name, required String address}) {
+    // Delegates hub creation to the mock repository.
+    return mock.createHub(businessId: 'biz_1', name: name, address: address);
+  }
+
+  @override
+  Future<void> deleteHub(String id) {
+    // Delegates hub deletion to the mock repository.
+    return mock.deleteHub(id);
+  }
+
+  @override
+  Future<void> assignNfcTag({required String hubId, required String nfcTagId}) {
+    // Delegates NFC tag assignment to the mock repository.
+    return mock.assignNfcTag(hubId: hubId, nfcTagId: nfcTagId);
+  }
+}

apps/mobile/packages/features/client/hubs/lib/src/domain/arguments/assign_nfc_tag_arguments.dart

@@ -0,0 +1,20 @@
+import 'package:krow_core/core.dart';
+
+/// Represents the arguments required for the AssignNfcTagUseCase.
+///
+/// Encapsulates the hub ID and the NFC tag ID to be assigned.
+class AssignNfcTagArguments extends UseCaseArgument {
+  /// The unique identifier of the hub.
+  final String hubId;
+
+  /// The unique identifier of the NFC tag.
+  final String nfcTagId;
+
+  /// Creates an [AssignNfcTagArguments] instance.
+  ///
+  /// Both [hubId] and [nfcTagId] are required.
+  const AssignNfcTagArguments({required this.hubId, required this.nfcTagId});
+
+  @override
+  List<Object?> get props => [hubId, nfcTagId];
+}

apps/mobile/packages/features/client/hubs/lib/src/domain/arguments/create_hub_arguments.dart

@@ -0,0 +1,20 @@
+import 'package:krow_core/core.dart';
+
+/// Represents the arguments required for the CreateHubUseCase.
+///
+/// Encapsulates the name and address of the hub to be created.
+class CreateHubArguments extends UseCaseArgument {
+  /// The name of the hub.
+  final String name;
+
+  /// The physical address of the hub.
+  final String address;
+
+  /// Creates a [CreateHubArguments] instance.
+  ///
+  /// Both [name] and [address] are required.
+  const CreateHubArguments({required this.name, required this.address});
+
+  @override
+  List<Object?> get props => [name, address];
+}

apps/mobile/packages/features/client/hubs/lib/src/domain/arguments/delete_hub_arguments.dart

@@ -0,0 +1,17 @@
+import 'package:krow_core/core.dart';
+
+/// Represents the arguments required for the DeleteHubUseCase.
+///
+/// Encapsulates the hub ID of the hub to be deleted.
+class DeleteHubArguments extends UseCaseArgument {
+  /// The unique identifier of the hub to delete.
+  final String hubId;
+
+  /// Creates a [DeleteHubArguments] instance.
+  ///
+  /// The [hubId] is required.
+  const DeleteHubArguments({required this.hubId});
+
+  @override
+  List<Object?> get props => [hubId];
+}

apps/mobile/packages/features/client/hubs/lib/src/domain/repositories/hub_repository_interface.dart

@@ -0,0 +1,27 @@
+import 'package:krow_domain/krow_domain.dart';
+
+/// Interface for the Hub repository.
+///
+/// This repository defines the contract for hub-related operations in the
+/// domain layer. It handles fetching, creating, deleting hubs and assigning
+/// NFC tags. The implementation will be provided in the data layer.
+abstract interface class HubRepositoryInterface {
+  /// Fetches the list of hubs for the current client.
+  ///
+  /// Returns a list of [Hub] entities.
+  Future<List<Hub>> getHubs();
+
+  /// Creates a new hub.
+  ///
+  /// Takes the [name] and [address] of the new hub.
+  /// Returns the created [Hub] entity.
+  Future<Hub> createHub({required String name, required String address});
+
+  /// Deletes a hub by its [id].
+  Future<void> deleteHub(String id);
+
+  /// Assigns an NFC tag to a hub.
+  ///
+  /// Takes the [hubId] and the [nfcTagId] to be associated.
+  Future<void> assignNfcTag({required String hubId, required String nfcTagId});
+}

apps/mobile/packages/features/client/hubs/lib/src/domain/usecases/assign_nfc_tag_usecase.dart

@@ -0,0 +1,24 @@
+import 'package:krow_core/core.dart';
+import '../arguments/assign_nfc_tag_arguments.dart';
+import '../repositories/hub_repository_interface.dart';
+
+/// Use case for assigning an NFC tag to a hub.
+///
+/// This use case handles the association of a physical NFC tag with a specific
+/// hub by calling the [HubRepositoryInterface].
+class AssignNfcTagUseCase implements UseCase<AssignNfcTagArguments, void> {
+  final HubRepositoryInterface _repository;
+
+  /// Creates an [AssignNfcTagUseCase].
+  ///
+  /// Requires a [HubRepositoryInterface] to interact with the backend.
+  AssignNfcTagUseCase(this._repository);
+
+  @override
+  Future<void> call(AssignNfcTagArguments arguments) {
+    return _repository.assignNfcTag(
+      hubId: arguments.hubId,
+      nfcTagId: arguments.nfcTagId,
+    );
+  }
+}

apps/mobile/packages/features/client/hubs/lib/src/domain/usecases/create_hub_usecase.dart

@@ -0,0 +1,26 @@
+import 'package:krow_core/core.dart';
+import 'package:krow_domain/krow_domain.dart';
+import '../arguments/create_hub_arguments.dart';
+import '../repositories/hub_repository_interface.dart';
+
+/// Use case for creating a new hub.
+///
+/// This use case orchestrates the creation of a hub by interacting with the
+/// [HubRepositoryInterface]. It requires [CreateHubArguments] which includes
+/// the name and address of the hub.
+class CreateHubUseCase implements UseCase<CreateHubArguments, Hub> {
+  final HubRepositoryInterface _repository;
+
+  /// Creates a [CreateHubUseCase].
+  ///
+  /// Requires a [HubRepositoryInterface] to perform the actual creation.
+  CreateHubUseCase(this._repository);
+
+  @override
+  Future<Hub> call(CreateHubArguments arguments) {
+    return _repository.createHub(
+      name: arguments.name,
+      address: arguments.address,
+    );
+  }
+}

apps/mobile/packages/features/client/hubs/lib/src/domain/usecases/delete_hub_usecase.dart

@@ -0,0 +1,20 @@
+import 'package:krow_core/core.dart';
+import '../arguments/delete_hub_arguments.dart';
+import '../repositories/hub_repository_interface.dart';
+
+/// Use case for deleting a hub.
+///
+/// This use case removes a hub from the system via the [HubRepositoryInterface].
+class DeleteHubUseCase implements UseCase<DeleteHubArguments, void> {
+  final HubRepositoryInterface _repository;
+
+  /// Creates a [DeleteHubUseCase].
+  ///
+  /// Requires a [HubRepositoryInterface] to perform the deletion.
+  DeleteHubUseCase(this._repository);
+
+  @override
+  Future<void> call(DeleteHubArguments arguments) {
+    return _repository.deleteHub(arguments.hubId);
+  }
+}

apps/mobile/packages/features/client/hubs/lib/src/domain/usecases/get_hubs_usecase.dart

@@ -0,0 +1,21 @@
+import 'package:krow_core/core.dart';
+import 'package:krow_domain/krow_domain.dart';
+import '../repositories/hub_repository_interface.dart';
+
+/// Use case for fetching the list of hubs.
+///
+/// This use case retrieves all hubs associated with the current client
+/// by interacting with the [HubRepositoryInterface].
+class GetHubsUseCase implements NoInputUseCase<List<Hub>> {
+  final HubRepositoryInterface _repository;
+
+  /// Creates a [GetHubsUseCase].
+  ///
+  /// Requires a [HubRepositoryInterface] to fetch the data.
+  GetHubsUseCase(this._repository);
+
+  @override
+  Future<List<Hub>> call() {
+    return _repository.getHubs();
+  }
+}

apps/mobile/packages/features/client/hubs/lib/src/presentation/blocs/client_hubs_bloc.dart

@@ -0,0 +1,181 @@
+import 'package:bloc/bloc.dart';
+import 'package:flutter_modular/flutter_modular.dart';
+import '../../domain/arguments/assign_nfc_tag_arguments.dart';
+import '../../domain/arguments/create_hub_arguments.dart';
+import '../../domain/arguments/delete_hub_arguments.dart';
+import '../../domain/usecases/assign_nfc_tag_usecase.dart';
+import '../../domain/usecases/create_hub_usecase.dart';
+import '../../domain/usecases/delete_hub_usecase.dart';
+import '../../domain/usecases/get_hubs_usecase.dart';
+import 'client_hubs_event.dart';
+import 'client_hubs_state.dart';
+
+/// BLoC responsible for managing the state of the Client Hubs feature.
+///
+/// It orchestrates the flow between the UI and the domain layer by invoking
+/// specific use cases for fetching, creating, deleting, and assigning tags to hubs.
+class ClientHubsBloc extends Bloc<ClientHubsEvent, ClientHubsState>
+    implements Disposable {
+  final GetHubsUseCase _getHubsUseCase;
+  final CreateHubUseCase _createHubUseCase;
+  final DeleteHubUseCase _deleteHubUseCase;
+  final AssignNfcTagUseCase _assignNfcTagUseCase;
+
+  ClientHubsBloc({
+    required GetHubsUseCase getHubsUseCase,
+    required CreateHubUseCase createHubUseCase,
+    required DeleteHubUseCase deleteHubUseCase,
+    required AssignNfcTagUseCase assignNfcTagUseCase,
+  }) : _getHubsUseCase = getHubsUseCase,
+       _createHubUseCase = createHubUseCase,
+       _deleteHubUseCase = deleteHubUseCase,
+       _assignNfcTagUseCase = assignNfcTagUseCase,
+       super(const ClientHubsState()) {
+    on<ClientHubsFetched>(_onFetched);
+    on<ClientHubsAddRequested>(_onAddRequested);
+    on<ClientHubsDeleteRequested>(_onDeleteRequested);
+    on<ClientHubsNfcTagAssignRequested>(_onNfcTagAssignRequested);
+    on<ClientHubsMessageCleared>(_onMessageCleared);
+    on<ClientHubsAddDialogToggled>(_onAddDialogToggled);
+    on<ClientHubsIdentifyDialogToggled>(_onIdentifyDialogToggled);
+  }
+
+  void _onAddDialogToggled(
+    ClientHubsAddDialogToggled event,
+    Emitter<ClientHubsState> emit,
+  ) {
+    emit(state.copyWith(showAddHubDialog: event.visible));
+  }
+
+  void _onIdentifyDialogToggled(
+    ClientHubsIdentifyDialogToggled event,
+    Emitter<ClientHubsState> emit,
+  ) {
+    if (event.hub == null) {
+      emit(state.copyWith(clearHubToIdentify: true));
+    } else {
+      emit(state.copyWith(hubToIdentify: event.hub));
+    }
+  }
+
+  Future<void> _onFetched(
+    ClientHubsFetched event,
+    Emitter<ClientHubsState> emit,
+  ) async {
+    emit(state.copyWith(status: ClientHubsStatus.loading));
+    try {
+      final hubs = await _getHubsUseCase();
+      emit(state.copyWith(status: ClientHubsStatus.success, hubs: hubs));
+    } catch (e) {
+      emit(
+        state.copyWith(
+          status: ClientHubsStatus.failure,
+          errorMessage: e.toString(),
+        ),
+      );
+    }
+  }
+
+  Future<void> _onAddRequested(
+    ClientHubsAddRequested event,
+    Emitter<ClientHubsState> emit,
+  ) async {
+    emit(state.copyWith(status: ClientHubsStatus.actionInProgress));
+    try {
+      await _createHubUseCase(
+        CreateHubArguments(name: event.name, address: event.address),
+      );
+      final hubs = await _getHubsUseCase();
+      emit(
+        state.copyWith(
+          status: ClientHubsStatus.actionSuccess,
+          hubs: hubs,
+          successMessage: 'Hub created successfully',
+          showAddHubDialog: false,
+        ),
+      );
+    } catch (e) {
+      emit(
+        state.copyWith(
+          status: ClientHubsStatus.actionFailure,
+          errorMessage: e.toString(),
+        ),
+      );
+    }
+  }
+
+  Future<void> _onDeleteRequested(
+    ClientHubsDeleteRequested event,
+    Emitter<ClientHubsState> emit,
+  ) async {
+    emit(state.copyWith(status: ClientHubsStatus.actionInProgress));
+    try {
+      await _deleteHubUseCase(DeleteHubArguments(hubId: event.hubId));
+      final hubs = await _getHubsUseCase();
+      emit(
+        state.copyWith(
+          status: ClientHubsStatus.actionSuccess,
+          hubs: hubs,
+          successMessage: 'Hub deleted successfully',
+        ),
+      );
+    } catch (e) {
+      emit(
+        state.copyWith(
+          status: ClientHubsStatus.actionFailure,
+          errorMessage: e.toString(),
+        ),
+      );
+    }
+  }
+
+  Future<void> _onNfcTagAssignRequested(
+    ClientHubsNfcTagAssignRequested event,
+    Emitter<ClientHubsState> emit,
+  ) async {
+    emit(state.copyWith(status: ClientHubsStatus.actionInProgress));
+    try {
+      await _assignNfcTagUseCase(
+        AssignNfcTagArguments(hubId: event.hubId, nfcTagId: event.nfcTagId),
+      );
+      final hubs = await _getHubsUseCase();
+      emit(
+        state.copyWith(
+          status: ClientHubsStatus.actionSuccess,
+          hubs: hubs,
+          successMessage: 'NFC tag assigned successfully',
+          clearHubToIdentify: true,
+        ),
+      );
+    } catch (e) {
+      emit(
+        state.copyWith(
+          status: ClientHubsStatus.actionFailure,
+          errorMessage: e.toString(),
+        ),
+      );
+    }
+  }
+
+  void _onMessageCleared(
+    ClientHubsMessageCleared event,
+    Emitter<ClientHubsState> emit,
+  ) {
+    emit(
+      state.copyWith(
+        errorMessage: null,
+        successMessage: null,
+        status:
+            state.status == ClientHubsStatus.actionSuccess ||
+                state.status == ClientHubsStatus.actionFailure
+            ? ClientHubsStatus.success
+            : state.status,
+      ),
+    );
+  }
+
+  @override
+  void dispose() {
+    close();
+  }
+}

apps/mobile/packages/features/client/hubs/lib/src/presentation/blocs/client_hubs_event.dart

@@ -0,0 +1,75 @@
+import 'package:equatable/equatable.dart';
+import 'package:krow_domain/krow_domain.dart';
+
+/// Base class for all client hubs events.
+abstract class ClientHubsEvent extends Equatable {
+  const ClientHubsEvent();
+
+  @override
+  List<Object?> get props => [];
+}
+
+/// Event triggered to fetch the list of hubs.
+class ClientHubsFetched extends ClientHubsEvent {
+  const ClientHubsFetched();
+}
+
+/// Event triggered to add a new hub.
+class ClientHubsAddRequested extends ClientHubsEvent {
+  final String name;
+  final String address;
+
+  const ClientHubsAddRequested({required this.name, required this.address});
+
+  @override
+  List<Object?> get props => [name, address];
+}
+
+/// Event triggered to delete a hub.
+class ClientHubsDeleteRequested extends ClientHubsEvent {
+  final String hubId;
+
+  const ClientHubsDeleteRequested(this.hubId);
+
+  @override
+  List<Object?> get props => [hubId];
+}
+
+/// Event triggered to assign an NFC tag to a hub.
+class ClientHubsNfcTagAssignRequested extends ClientHubsEvent {
+  final String hubId;
+  final String nfcTagId;
+
+  const ClientHubsNfcTagAssignRequested({
+    required this.hubId,
+    required this.nfcTagId,
+  });
+
+  @override
+  List<Object?> get props => [hubId, nfcTagId];
+}
+
+/// Event triggered to clear any error or success messages.
+class ClientHubsMessageCleared extends ClientHubsEvent {
+  const ClientHubsMessageCleared();
+}
+
+/// Event triggered to toggle the visibility of the "Add Hub" dialog.
+class ClientHubsAddDialogToggled extends ClientHubsEvent {
+  final bool visible;
+
+  const ClientHubsAddDialogToggled({required this.visible});
+
+  @override
+  List<Object?> get props => [visible];
+}
+
+/// Event triggered to toggle the visibility of the "Identify NFC" dialog.
+class ClientHubsIdentifyDialogToggled extends ClientHubsEvent {
+  final Hub? hub;
+
+  const ClientHubsIdentifyDialogToggled({this.hub});
+
+  @override
+  List<Object?> get props => [hub];
+}

apps/mobile/packages/features/client/hubs/lib/src/presentation/blocs/client_hubs_state.dart

@@ -0,0 +1,68 @@
+import 'package:equatable/equatable.dart';
+import 'package:krow_domain/krow_domain.dart';
+
+/// Enum representing the status of the client hubs state.
+enum ClientHubsStatus {
+  initial,
+  loading,
+  success,
+  failure,
+  actionInProgress,
+  actionSuccess,
+  actionFailure,
+}
+
+/// State class for the ClientHubs BLoC.
+class ClientHubsState extends Equatable {
+  final ClientHubsStatus status;
+  final List<Hub> hubs;
+  final String? errorMessage;
+  final String? successMessage;
+
+  /// Whether the "Add Hub" dialog should be visible.
+  final bool showAddHubDialog;
+
+  /// The hub currently being identified/assigned an NFC tag.
+  /// If null, the identification dialog is closed.
+  final Hub? hubToIdentify;
+
+  const ClientHubsState({
+    this.status = ClientHubsStatus.initial,
+    this.hubs = const [],
+    this.errorMessage,
+    this.successMessage,
+    this.showAddHubDialog = false,
+    this.hubToIdentify,
+  });
+
+  ClientHubsState copyWith({
+    ClientHubsStatus? status,
+    List<Hub>? hubs,
+    String? errorMessage,
+    String? successMessage,
+    bool? showAddHubDialog,
+    Hub? hubToIdentify,
+    bool clearHubToIdentify = false,
+  }) {
+    return ClientHubsState(
+      status: status ?? this.status,
+      hubs: hubs ?? this.hubs,
+      errorMessage: errorMessage ?? this.errorMessage,
+      successMessage: successMessage ?? this.successMessage,
+      showAddHubDialog: showAddHubDialog ?? this.showAddHubDialog,
+      hubToIdentify: clearHubToIdentify
+          ? null
+          : (hubToIdentify ?? this.hubToIdentify),
+    );
+  }
+
+  @override
+  List<Object?> get props => [
+    status,
+    hubs,
+    errorMessage,
+    successMessage,
+    showAddHubDialog,
+    hubToIdentify,
+  ];
+}

apps/mobile/packages/features/client/hubs/lib/src/presentation/navigation/client_hubs_navigator.dart

@@ -0,0 +1,9 @@
+import 'package:flutter_modular/flutter_modular.dart';
+
+/// Extension on [IModularNavigator] to provide typed navigation for client hubs.
+extension ClientHubsNavigator on IModularNavigator {
+  /// Navigates to the client hubs page.
+  Future<void> pushClientHubs() async {
+    await pushNamed('/client/hubs');
+  }
+}

apps/mobile/packages/features/client/hubs/lib/src/presentation/pages/client_hubs_page.dart

@@ -0,0 +1,212 @@
+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:lucide_icons/lucide_icons.dart';
+import 'package:core_localization/core_localization.dart';
+import '../blocs/client_hubs_bloc.dart';
+import '../blocs/client_hubs_event.dart';
+import '../blocs/client_hubs_state.dart';
+import '../widgets/add_hub_dialog.dart';
+import '../widgets/hub_card.dart';
+import '../widgets/hub_empty_state.dart';
+import '../widgets/hub_info_card.dart';
+import '../widgets/identify_nfc_dialog.dart';
+
+/// The main page for the client hubs feature.
+///
+/// This page follows the KROW Clean Architecture by being a [StatelessWidget]
+/// and delegating all state management to the [ClientHubsBloc].
+class ClientHubsPage extends StatelessWidget {
+  /// Creates a [ClientHubsPage].
+  const ClientHubsPage({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return BlocProvider<ClientHubsBloc>(
+      create: (context) =>
+          Modular.get<ClientHubsBloc>()..add(const ClientHubsFetched()),
+      child: BlocConsumer<ClientHubsBloc, ClientHubsState>(
+        listener: (context, state) {
+          if (state.errorMessage != null) {
+            ScaffoldMessenger.of(
+              context,
+            ).showSnackBar(SnackBar(content: Text(state.errorMessage!)));
+            BlocProvider.of<ClientHubsBloc>(
+              context,
+            ).add(const ClientHubsMessageCleared());
+          }
+          if (state.successMessage != null) {
+            ScaffoldMessenger.of(
+              context,
+            ).showSnackBar(SnackBar(content: Text(state.successMessage!)));
+            BlocProvider.of<ClientHubsBloc>(
+              context,
+            ).add(const ClientHubsMessageCleared());
+          }
+        },
+        builder: (context, state) {
+          return Scaffold(
+            backgroundColor: const Color(0xFFF8FAFC), // slate-50
+            body: Stack(
+              children: [
+                CustomScrollView(
+                  slivers: [
+                    _buildAppBar(context),
+                    SliverPadding(
+                      padding: const EdgeInsets.fromLTRB(20, 20, 20, 100),
+                      sliver: SliverList(
+                        delegate: SliverChildListDelegate([
+                          if (state.status == ClientHubsStatus.loading)
+                            const Center(child: CircularProgressIndicator())
+                          else if (state.hubs.isEmpty)
+                            HubEmptyState(
+                              onAddPressed: () =>
+                                  BlocProvider.of<ClientHubsBloc>(context).add(
+                                    const ClientHubsAddDialogToggled(
+                                      visible: true,
+                                    ),
+                                  ),
+                            )
+                          else ...[
+                            ...state.hubs.map(
+                              (hub) => HubCard(
+                                hub: hub,
+                                onNfcPressed: () =>
+                                    BlocProvider.of<ClientHubsBloc>(
+                                      context,
+                                    ).add(
+                                      ClientHubsIdentifyDialogToggled(hub: hub),
+                                    ),
+                                onDeletePressed: () =>
+                                    BlocProvider.of<ClientHubsBloc>(
+                                      context,
+                                    ).add(ClientHubsDeleteRequested(hub.id)),
+                              ),
+                            ),
+                          ],
+                          const SizedBox(height: 20),
+                          const HubInfoCard(),
+                        ]),
+                      ),
+                    ),
+                  ],
+                ),
+                if (state.showAddHubDialog)
+                  AddHubDialog(
+                    onCreate: (name, address) {
+                      BlocProvider.of<ClientHubsBloc>(context).add(
+                        ClientHubsAddRequested(name: name, address: address),
+                      );
+                    },
+                    onCancel: () => BlocProvider.of<ClientHubsBloc>(
+                      context,
+                    ).add(const ClientHubsAddDialogToggled(visible: false)),
+                  ),
+                if (state.hubToIdentify != null)
+                  IdentifyNfcDialog(
+                    hub: state.hubToIdentify!,
+                    onAssign: (tagId) {
+                      BlocProvider.of<ClientHubsBloc>(context).add(
+                        ClientHubsNfcTagAssignRequested(
+                          hubId: state.hubToIdentify!.id,
+                          nfcTagId: tagId,
+                        ),
+                      );
+                    },
+                    onCancel: () => BlocProvider.of<ClientHubsBloc>(
+                      context,
+                    ).add(const ClientHubsIdentifyDialogToggled()),
+                  ),
+                if (state.status == ClientHubsStatus.actionInProgress)
+                  Container(
+                    color: Colors.black.withValues(alpha: 0.1),
+                    child: const Center(child: CircularProgressIndicator()),
+                  ),
+              ],
+            ),
+          );
+        },
+      ),
+    );
+  }
+
+  Widget _buildAppBar(BuildContext context) {
+    return SliverAppBar(
+      backgroundColor: const Color(0xFF121826),
+      automaticallyImplyLeading: false,
+      expandedHeight: 140,
+      pinned: true,
+      flexibleSpace: FlexibleSpaceBar(
+        background: Container(
+          decoration: const BoxDecoration(
+            gradient: LinearGradient(
+              colors: [Color(0xFF121826), Color(0xFF1E293B)],
+              begin: Alignment.topLeft,
+              end: Alignment.bottomRight,
+            ),
+          ),
+          padding: const EdgeInsets.fromLTRB(20, 48, 20, 0),
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              GestureDetector(
+                onTap: () => Modular.to.pop(),
+                child: Container(
+                  width: 40,
+                  height: 40,
+                  decoration: BoxDecoration(
+                    color: Colors.white.withValues(alpha: 0.2),
+                    shape: BoxShape.circle,
+                  ),
+                  child: const Icon(
+                    LucideIcons.arrowLeft,
+                    color: Colors.white,
+                    size: 20,
+                  ),
+                ),
+              ),
+              const SizedBox(height: 16),
+              Row(
+                mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                children: [
+                  Column(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    children: [
+                      Text(
+                        t.client_hubs.title,
+                        style: const TextStyle(
+                          color: Colors.white,
+                          fontWeight: FontWeight.bold,
+                          fontSize: 24,
+                        ),
+                      ),
+                      Text(
+                        t.client_hubs.subtitle,
+                        style: const TextStyle(
+                          color: Color(0xFFCBD5E1), // slate-300
+                          fontSize: 14,
+                        ),
+                      ),
+                    ],
+                  ),
+                  UiButton.primary(
+                    onPressed: () => BlocProvider.of<ClientHubsBloc>(
+                      context,
+                    ).add(const ClientHubsAddDialogToggled(visible: true)),
+                    text: t.client_hubs.add_hub,
+                    leadingIcon: LucideIcons.plus,
+                    style: ElevatedButton.styleFrom(
+                      minimumSize: Size(0, 40),
+                      maximumSize: Size.fromHeight(40),
+                    ),
+                  ),
+                ],
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}

apps/mobile/packages/features/client/hubs/lib/src/presentation/widgets/add_hub_dialog.dart

@@ -0,0 +1,157 @@
+import 'package:design_system/design_system.dart';
+import 'package:flutter/material.dart';
+import 'package:core_localization/core_localization.dart';
+
+/// A dialog for adding a new hub.
+class AddHubDialog extends StatefulWidget {
+  /// Callback when the "Create Hub" button is pressed.
+  final Function(String name, String address) onCreate;
+
+  /// Callback when the dialog is cancelled.
+  final VoidCallback onCancel;
+
+  /// Creates an [AddHubDialog].
+  const AddHubDialog({
+    required this.onCreate,
+    required this.onCancel,
+    super.key,
+  });
+
+  @override
+  State<AddHubDialog> createState() => _AddHubDialogState();
+}
+
+class _AddHubDialogState extends State<AddHubDialog> {
+  late final TextEditingController _nameController;
+  late final TextEditingController _addressController;
+
+  @override
+  void initState() {
+    super.initState();
+    _nameController = TextEditingController();
+    _addressController = TextEditingController();
+  }
+
+  @override
+  void dispose() {
+    _nameController.dispose();
+    _addressController.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      color: Colors.black.withValues(alpha: 0.5),
+      child: Center(
+        child: SingleChildScrollView(
+          child: Container(
+            width: MediaQuery.of(context).size.width * 0.9,
+            padding: const EdgeInsets.all(24),
+            decoration: BoxDecoration(
+              color: Colors.white,
+              borderRadius: BorderRadius.circular(24),
+              boxShadow: [
+                BoxShadow(
+                  color: Colors.black.withValues(alpha: 0.1),
+                  blurRadius: 20,
+                ),
+              ],
+            ),
+            child: Column(
+              mainAxisSize: MainAxisSize.min,
+              crossAxisAlignment: CrossAxisAlignment.stretch,
+              children: [
+                Text(
+                  t.client_hubs.add_hub_dialog.title,
+                  style: const TextStyle(
+                    fontSize: 20,
+                    fontWeight: FontWeight.bold,
+                    color: Color(0xFF0F172A),
+                  ),
+                ),
+                const SizedBox(height: 24),
+                _buildFieldLabel(t.client_hubs.add_hub_dialog.name_label),
+                TextField(
+                  controller: _nameController,
+                  decoration: _buildInputDecoration(
+                    t.client_hubs.add_hub_dialog.name_hint,
+                  ),
+                ),
+                const SizedBox(height: 16),
+                _buildFieldLabel(t.client_hubs.add_hub_dialog.address_label),
+                TextField(
+                  controller: _addressController,
+                  decoration: _buildInputDecoration(
+                    t.client_hubs.add_hub_dialog.address_hint,
+                  ),
+                ),
+                const SizedBox(height: 32),
+                Row(
+                  children: [
+                    Expanded(
+                      child: UiButton.secondary(
+                        onPressed: widget.onCancel,
+                        text: t.common.cancel,
+                      ),
+                    ),
+                    const SizedBox(width: 12),
+                    Expanded(
+                      child: UiButton.primary(
+                        onPressed: () {
+                          if (_nameController.text.isNotEmpty) {
+                            widget.onCreate(
+                              _nameController.text,
+                              _addressController.text,
+                            );
+                          }
+                        },
+                        text: t.client_hubs.add_hub_dialog.create_button,
+                      ),
+                    ),
+                  ],
+                ),
+              ],
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+
+  Widget _buildFieldLabel(String label) {
+    return Padding(
+      padding: const EdgeInsets.only(bottom: 6),
+      child: Text(
+        label,
+        style: const TextStyle(
+          fontSize: 14,
+          fontWeight: FontWeight.w500,
+          color: Color(0xFF0F172A),
+        ),
+      ),
+    );
+  }
+
+  InputDecoration _buildInputDecoration(String hint) {
+    return InputDecoration(
+      hintText: hint,
+      hintStyle: const TextStyle(color: Color(0xFF94A3B8), fontSize: 14),
+      filled: true,
+      fillColor: const Color(0xFFF8FAFC),
+      contentPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 14),
+      border: OutlineInputBorder(
+        borderRadius: BorderRadius.circular(12),
+        borderSide: const BorderSide(color: Color(0xFFE2E8F0)),
+      ),
+      enabledBorder: OutlineInputBorder(
+        borderRadius: BorderRadius.circular(12),
+        borderSide: const BorderSide(color: Color(0xFFE2E8F0)),
+      ),
+      focusedBorder: OutlineInputBorder(
+        borderRadius: BorderRadius.circular(12),
+        borderSide: const BorderSide(color: Color(0xFF2563EB), width: 2),
+      ),
+    );
+  }
+}

apps/mobile/packages/features/client/hubs/lib/src/presentation/widgets/hub_card.dart

@@ -0,0 +1,147 @@
+import 'package:flutter/material.dart';
+import 'package:krow_domain/krow_domain.dart';
+import 'package:lucide_icons/lucide_icons.dart';
+import 'package:core_localization/core_localization.dart';
+
+/// A card displaying information about a single hub.
+class HubCard extends StatelessWidget {
+  /// The hub to display.
+  final Hub hub;
+
+  /// Callback when the NFC button is pressed.
+  final VoidCallback onNfcPressed;
+
+  /// Callback when the delete button is pressed.
+  final VoidCallback onDeletePressed;
+
+  /// Creates a [HubCard].
+  const HubCard({
+    required this.hub,
+    required this.onNfcPressed,
+    required this.onDeletePressed,
+    super.key,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final bool hasNfc = hub.nfcTagId != null;
+
+    return Container(
+      margin: const EdgeInsets.only(bottom: 12),
+      decoration: BoxDecoration(
+        color: Colors.white,
+        borderRadius: BorderRadius.circular(16),
+        boxShadow: [
+          BoxShadow(
+            color: Colors.black.withValues(alpha: 0.04),
+            blurRadius: 10,
+            offset: const Offset(0, 4),
+          ),
+        ],
+      ),
+      child: Padding(
+        padding: const EdgeInsets.all(16),
+        child: Row(
+          children: [
+            Container(
+              width: 52,
+              height: 52,
+              decoration: BoxDecoration(
+                color: const Color(0xFFEFF6FF), // blue-50
+                borderRadius: BorderRadius.circular(16),
+              ),
+              child: Icon(
+                hasNfc ? LucideIcons.checkCircle : LucideIcons.nfc,
+                color: hasNfc
+                    ? const Color(0xFF16A34A)
+                    : const Color(0xFF94A3B8), // green-600 or slate-400
+                size: 24,
+              ),
+            ),
+            const SizedBox(width: 16),
+            Expanded(
+              child: Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  Text(
+                    hub.name,
+                    style: const TextStyle(
+                      fontWeight: FontWeight.bold,
+                      fontSize: 16,
+                      color: Color(0xFF0F172A),
+                    ),
+                  ),
+                  if (hub.address.isNotEmpty)
+                    Padding(
+                      padding: const EdgeInsets.only(top: 4),
+                      child: Row(
+                        children: [
+                          const Icon(
+                            LucideIcons.mapPin,
+                            size: 12,
+                            color: Color(0xFF94A3B8),
+                          ),
+                          const SizedBox(width: 4),
+                          Expanded(
+                            child: Text(
+                              hub.address,
+                              style: const TextStyle(
+                                color: Color(0xFF64748B),
+                                fontSize: 12,
+                              ),
+                              maxLines: 1,
+                              overflow: TextOverflow.ellipsis,
+                            ),
+                          ),
+                        ],
+                      ),
+                    ),
+                  if (hasNfc)
+                    Padding(
+                      padding: const EdgeInsets.only(top: 4),
+                      child: Text(
+                        t.client_hubs.hub_card.tag_label(id: hub.nfcTagId!),
+                        style: const TextStyle(
+                          color: Color(0xFF16A34A),
+                          fontSize: 12,
+                          fontFamily: 'monospace',
+                          fontWeight: FontWeight.bold,
+                        ),
+                      ),
+                    ),
+                ],
+              ),
+            ),
+            Row(
+              children: [
+                IconButton(
+                  onPressed: onNfcPressed,
+                  icon: const Icon(
+                    LucideIcons.nfc,
+                    color: Color(0xFF2563EB),
+                    size: 20,
+                  ),
+                  padding: EdgeInsets.zero,
+                  constraints: const BoxConstraints(),
+                  splashRadius: 20,
+                ),
+                const SizedBox(width: 8),
+                IconButton(
+                  onPressed: onDeletePressed,
+                  icon: const Icon(
+                    LucideIcons.trash2,
+                    color: Color(0xFFDC2626),
+                    size: 20,
+                  ),
+                  padding: EdgeInsets.zero,
+                  constraints: const BoxConstraints(),
+                  splashRadius: 20,
+                ),
+              ],
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

apps/mobile/packages/features/client/hubs/lib/src/presentation/widgets/hub_empty_state.dart

@@ -0,0 +1,69 @@
+import 'package:design_system/design_system.dart';
+import 'package:flutter/material.dart';
+import 'package:lucide_icons/lucide_icons.dart';
+import 'package:core_localization/core_localization.dart';
+
+/// Widget displayed when there are no hubs.
+class HubEmptyState extends StatelessWidget {
+  /// Callback when the add button is pressed.
+  final VoidCallback onAddPressed;
+
+  /// Creates a [HubEmptyState].
+  const HubEmptyState({required this.onAddPressed, super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: const EdgeInsets.all(32),
+      decoration: BoxDecoration(
+        color: Colors.white,
+        borderRadius: BorderRadius.circular(16),
+        boxShadow: [
+          BoxShadow(
+            color: Colors.black.withValues(alpha: 0.04),
+            blurRadius: 10,
+            offset: const Offset(0, 4),
+          ),
+        ],
+      ),
+      child: Column(
+        children: [
+          Container(
+            width: 64,
+            height: 64,
+            decoration: const BoxDecoration(
+              color: Color(0xFFF1F5F9), // slate-100
+              shape: BoxShape.circle,
+            ),
+            child: const Icon(
+              LucideIcons.nfc,
+              size: 32,
+              color: Color(0xFF94A3B8),
+            ),
+          ),
+          const SizedBox(height: 16),
+          Text(
+            t.client_hubs.empty_state.title,
+            style: const TextStyle(
+              fontSize: 18,
+              fontWeight: FontWeight.bold,
+              color: Color(0xFF0F172A),
+            ),
+          ),
+          const SizedBox(height: 8),
+          Text(
+            t.client_hubs.empty_state.description,
+            textAlign: TextAlign.center,
+            style: const TextStyle(color: Color(0xFF64748B), fontSize: 14),
+          ),
+          const SizedBox(height: 24),
+          UiButton.primary(
+            onPressed: onAddPressed,
+            text: t.client_hubs.empty_state.button,
+            leadingIcon: LucideIcons.plus,
+          ),
+        ],
+      ),
+    );
+  }
+}

apps/mobile/packages/features/client/hubs/lib/src/presentation/widgets/hub_info_card.dart

@@ -0,0 +1,51 @@
+import 'package:flutter/material.dart';
+import 'package:lucide_icons/lucide_icons.dart';
+import 'package:core_localization/core_localization.dart';
+
+/// A card with information about how hubs work.
+class HubInfoCard extends StatelessWidget {
+  /// Creates a [HubInfoCard].
+  const HubInfoCard({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: const EdgeInsets.all(16),
+      decoration: BoxDecoration(
+        color: const Color(0xFFEFF6FF), // blue-50
+        borderRadius: BorderRadius.circular(16),
+      ),
+      child: Row(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          const Icon(LucideIcons.nfc, size: 20, color: Color(0xFF2563EB)),
+          const SizedBox(width: 12),
+          Expanded(
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                Text(
+                  t.client_hubs.about_hubs.title,
+                  style: const TextStyle(
+                    fontWeight: FontWeight.bold,
+                    fontSize: 14,
+                    color: Color(0xFF0F172A),
+                  ),
+                ),
+                const SizedBox(height: 4),
+                Text(
+                  t.client_hubs.about_hubs.description,
+                  style: const TextStyle(
+                    color: Color(0xFF334155),
+                    fontSize: 12,
+                    height: 1.4,
+                  ),
+                ),
+              ],
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}

apps/mobile/packages/features/client/hubs/lib/src/presentation/widgets/identify_nfc_dialog.dart

@@ -0,0 +1,189 @@
+import 'package:design_system/design_system.dart';
+import 'package:flutter/material.dart';
+import 'package:lucide_icons/lucide_icons.dart';
+import 'package:krow_domain/krow_domain.dart';
+import 'package:core_localization/core_localization.dart';
+
+/// A dialog for identifying and assigning an NFC tag to a hub.
+class IdentifyNfcDialog extends StatefulWidget {
+  /// The hub to assign the tag to.
+  final Hub hub;
+
+  /// Callback when a tag is assigned.
+  final Function(String nfcTagId) onAssign;
+
+  /// Callback when the dialog is cancelled.
+  final VoidCallback onCancel;
+
+  /// Creates an [IdentifyNfcDialog].
+  const IdentifyNfcDialog({
+    required this.hub,
+    required this.onAssign,
+    required this.onCancel,
+    super.key,
+  });
+
+  @override
+  State<IdentifyNfcDialog> createState() => _IdentifyNfcDialogState();
+}
+
+class _IdentifyNfcDialogState extends State<IdentifyNfcDialog> {
+  String? _nfcTagId;
+
+  void _simulateNFCScan() {
+    setState(() {
+      _nfcTagId =
+          'NFC-${DateTime.now().millisecondsSinceEpoch.toString().substring(8).toUpperCase()}';
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      color: Colors.black.withValues(alpha: 0.5),
+      child: Center(
+        child: SingleChildScrollView(
+          child: Container(
+            width: MediaQuery.of(context).size.width * 0.9,
+            padding: const EdgeInsets.all(24),
+            decoration: BoxDecoration(
+              color: Colors.white,
+              borderRadius: BorderRadius.circular(24),
+              boxShadow: [
+                BoxShadow(
+                  color: Colors.black.withValues(alpha: 0.1),
+                  blurRadius: 20,
+                ),
+              ],
+            ),
+            child: Column(
+              mainAxisSize: MainAxisSize.min,
+              children: [
+                Text(
+                  t.client_hubs.nfc_dialog.title,
+                  style: const TextStyle(
+                    fontSize: 20,
+                    fontWeight: FontWeight.bold,
+                    color: Color(0xFF0F172A),
+                  ),
+                ),
+                const SizedBox(height: 32),
+                Container(
+                  width: 80,
+                  height: 80,
+                  decoration: const BoxDecoration(
+                    color: Color(0xFFEFF6FF), // blue-50
+                    shape: BoxShape.circle,
+                  ),
+                  child: const Icon(
+                    LucideIcons.nfc,
+                    size: 40,
+                    color: Color(0xFF2563EB),
+                  ),
+                ),
+                const SizedBox(height: 16),
+                Text(
+                  widget.hub.name,
+                  style: const TextStyle(
+                    fontWeight: FontWeight.bold,
+                    fontSize: 16,
+                    color: Color(0xFF0F172A),
+                  ),
+                ),
+                const SizedBox(height: 8),
+                Text(
+                  t.client_hubs.nfc_dialog.instruction,
+                  textAlign: TextAlign.center,
+                  style: const TextStyle(
+                    color: Color(0xFF64748B),
+                    fontSize: 14,
+                  ),
+                ),
+                const SizedBox(height: 24),
+                UiButton.secondary(
+                  onPressed: _simulateNFCScan,
+                  text: t.client_hubs.nfc_dialog.scan_button,
+                  leadingIcon: LucideIcons.nfc,
+                ),
+                if (_nfcTagId != null) ...[
+                  const SizedBox(height: 24),
+                  Container(
+                    padding: const EdgeInsets.all(16),
+                    decoration: BoxDecoration(
+                      color: const Color(0xFFF0FDF4), // green-50
+                      borderRadius: BorderRadius.circular(16),
+                    ),
+                    child: Column(
+                      children: [
+                        Row(
+                          mainAxisSize: MainAxisSize.min,
+                          children: [
+                            const Icon(
+                              LucideIcons.checkCircle,
+                              size: 20,
+                              color: Color(0xFF16A34A),
+                            ),
+                            const SizedBox(width: 8),
+                            Text(
+                              t.client_hubs.nfc_dialog.tag_identified,
+                              style: const TextStyle(
+                                fontWeight: FontWeight.bold,
+                                fontSize: 14,
+                                color: Color(0xFF0F172A),
+                              ),
+                            ),
+                          ],
+                        ),
+                        const SizedBox(height: 8),
+                        Container(
+                          padding: const EdgeInsets.symmetric(
+                            horizontal: 12,
+                            vertical: 8,
+                          ),
+                          decoration: BoxDecoration(
+                            color: Colors.white,
+                            borderRadius: BorderRadius.circular(8),
+                            border: Border.all(color: const Color(0xFFDCE8E0)),
+                          ),
+                          child: Text(
+                            _nfcTagId!,
+                            style: const TextStyle(
+                              fontFamily: 'monospace',
+                              fontWeight: FontWeight.bold,
+                              fontSize: 12,
+                              color: Color(0xFF334155),
+                            ),
+                          ),
+                        ),
+                      ],
+                    ),
+                  ),
+                ],
+                const SizedBox(height: 32),
+                Row(
+                  children: [
+                    Expanded(
+                      child: UiButton.secondary(
+                        onPressed: widget.onCancel,
+                        text: t.common.cancel,
+                      ),
+                    ),
+                    const SizedBox(width: 12),
+                    Expanded(
+                      child: UiButton.primary(
+                        onPressed: _nfcTagId != null
+                            ? () => widget.onAssign(_nfcTagId!)
+                            : null,
+                        text: t.client_hubs.nfc_dialog.assign_button,
+                      ),
+                    ),
+                  ],
+                ),
+              ],
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}

apps/mobile/packages/features/client/hubs/pubspec.yaml

@@ -0,0 +1,37 @@
+name: client_hubs
+description: "Client hubs management feature for the KROW platform."
+version: 0.0.1
+publish_to: none
+resolution: workspace
+
+environment:
+  sdk: '>=3.10.0 <4.0.0'
+  flutter: ">=3.0.0"
+
+dependencies:
+  flutter:
+    sdk: flutter
+  flutter_bloc: ^8.1.0
+  flutter_modular: ^6.3.2
+  equatable: ^2.0.5
+  lucide_icons: ^0.257.0
+  
+  # KROW Packages
+  krow_core:
+    path: ../../../core
+  krow_domain:
+    path: ../../../domain
+  krow_data_connect:
+    path: ../../../data_connect
+  design_system:
+    path: ../../../design_system
+  core_localization:
+    path: ../../../core_localization
+
+dev_dependencies:
+  flutter_test:
+    sdk: flutter
+  flutter_lints: ^6.0.0
+
+flutter:
+  uses-material-design: true

apps/mobile/packages/features/client/settings/lib/client_settings.dart

@@ -0,0 +1,34 @@
+import 'package:flutter_modular/flutter_modular.dart';
+import 'package:krow_data_connect/krow_data_connect.dart';
+import 'src/data/repositories_impl/settings_repository_impl.dart';
+import 'src/domain/repositories/settings_repository_interface.dart';
+import 'src/domain/usecases/sign_out_usecase.dart';
+import 'src/presentation/blocs/client_settings_bloc.dart';
+import 'src/presentation/pages/client_settings_page.dart';
+
+/// A [Module] for the client settings feature.
+class ClientSettingsModule extends Module {
+  @override
+  List<Module> get imports => [DataConnectModule()];
+
+  @override
+  void binds(Injector i) {
+    // Repositories
+    i.addLazySingleton<SettingsRepositoryInterface>(
+      () => SettingsRepositoryImpl(mock: i.get<AuthRepositoryMock>()),
+    );
+
+    // UseCases
+    i.addLazySingleton(SignOutUseCase.new);
+
+    // BLoCs
+    i.add<ClientSettingsBloc>(
+      () => ClientSettingsBloc(signOutUseCase: i.get<SignOutUseCase>()),
+    );
+  }
+
+  @override
+  void routes(r) {
+    r.child('/', child: (_) => const ClientSettingsPage());
+  }
+}

apps/mobile/packages/features/client/settings/lib/src/data/repositories_impl/settings_repository_impl.dart

@@ -0,0 +1,19 @@
+import 'package:krow_data_connect/krow_data_connect.dart';
+import '../../domain/repositories/settings_repository_interface.dart';
+
+/// Implementation of [SettingsRepositoryInterface].
+///
+/// This implementation delegates data access to the [AuthRepositoryMock]
+/// from the `data_connect` package.
+class SettingsRepositoryImpl implements SettingsRepositoryInterface {
+  /// The auth mock from data connect.
+  final AuthRepositoryMock mock;
+
+  /// Creates a [SettingsRepositoryImpl] with the required [mock].
+  SettingsRepositoryImpl({required this.mock});
+
+  @override
+  Future<void> signOut() {
+    return mock.signOut();
+  }
+}

apps/mobile/packages/features/client/settings/lib/src/domain/repositories/settings_repository_interface.dart

@@ -0,0 +1,7 @@
+/// Interface for the Client Settings repository.
+///
+/// This repository handles settings-related operations such as user sign out.
+abstract interface class SettingsRepositoryInterface {
+  /// Signs out the current user from the application.
+  Future<void> signOut();
+}

apps/mobile/packages/features/client/settings/lib/src/domain/usecases/sign_out_usecase.dart

@@ -0,0 +1,19 @@
+import 'package:krow_core/core.dart';
+import '../repositories/settings_repository_interface.dart';
+
+/// Use case handles the user sign out process.
+///
+/// This use case delegates the sign out logic to the [SettingsRepositoryInterface].
+class SignOutUseCase implements NoInputUseCase<void> {
+  final SettingsRepositoryInterface _repository;
+
+  /// Creates a [SignOutUseCase].
+  ///
+  /// Requires a [SettingsRepositoryInterface] to perform the sign out operation.
+  SignOutUseCase(this._repository);
+
+  @override
+  Future<void> call() {
+    return _repository.signOut();
+  }
+}

apps/mobile/packages/features/client/settings/lib/src/presentation/blocs/client_settings_bloc.dart

@@ -0,0 +1,31 @@
+import 'package:equatable/equatable.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import '../../domain/usecases/sign_out_usecase.dart';
+
+part 'client_settings_event.dart';
+part 'client_settings_state.dart';
+
+/// BLoC to manage client settings and profile state.
+class ClientSettingsBloc
+    extends Bloc<ClientSettingsEvent, ClientSettingsState> {
+  final SignOutUseCase _signOutUseCase;
+
+  ClientSettingsBloc({required SignOutUseCase signOutUseCase})
+    : _signOutUseCase = signOutUseCase,
+      super(const ClientSettingsInitial()) {
+    on<ClientSettingsSignOutRequested>(_onSignOutRequested);
+  }
+
+  Future<void> _onSignOutRequested(
+    ClientSettingsSignOutRequested event,
+    Emitter<ClientSettingsState> emit,
+  ) async {
+    emit(const ClientSettingsLoading());
+    try {
+      await _signOutUseCase();
+      emit(const ClientSettingsSignOutSuccess());
+    } catch (e) {
+      emit(ClientSettingsError(e.toString()));
+    }
+  }
+}

apps/mobile/packages/features/client/settings/lib/src/presentation/blocs/client_settings_event.dart

@@ -0,0 +1,12 @@
+part of 'client_settings_bloc.dart';
+
+abstract class ClientSettingsEvent extends Equatable {
+  const ClientSettingsEvent();
+
+  @override
+  List<Object?> get props => [];
+}
+
+class ClientSettingsSignOutRequested extends ClientSettingsEvent {
+  const ClientSettingsSignOutRequested();
+}

apps/mobile/packages/features/client/settings/lib/src/presentation/blocs/client_settings_state.dart

@@ -0,0 +1,29 @@
+part of 'client_settings_bloc.dart';
+
+abstract class ClientSettingsState extends Equatable {
+  const ClientSettingsState();
+
+  @override
+  List<Object?> get props => [];
+}
+
+class ClientSettingsInitial extends ClientSettingsState {
+  const ClientSettingsInitial();
+}
+
+class ClientSettingsLoading extends ClientSettingsState {
+  const ClientSettingsLoading();
+}
+
+class ClientSettingsSignOutSuccess extends ClientSettingsState {
+  const ClientSettingsSignOutSuccess();
+}
+
+class ClientSettingsError extends ClientSettingsState {
+  final String message;
+
+  const ClientSettingsError(this.message);
+
+  @override
+  List<Object?> get props => [message];
+}

apps/mobile/packages/features/client/settings/lib/src/presentation/navigation/client_settings_navigator.dart

@@ -0,0 +1,15 @@
+import 'package:flutter_modular/flutter_modular.dart';
+
+/// Extension on [IModularNavigator] to provide strongly-typed navigation
+/// for the client settings feature.
+extension ClientSettingsNavigator on IModularNavigator {
+  /// Navigates to the client settings page.
+  void pushClientSettings() {
+    pushNamed('/client/settings/');
+  }
+
+  /// Navigates to the hubs page.
+  void pushHubs() {
+    pushNamed('/client/hubs');
+  }
+}

apps/mobile/packages/features/client/settings/lib/src/presentation/pages/client_settings_page.dart

@@ -0,0 +1,47 @@
+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 '../blocs/client_settings_bloc.dart';
+import '../widgets/client_settings_page/settings_actions.dart';
+import '../widgets/client_settings_page/settings_profile_header.dart';
+import '../widgets/client_settings_page/settings_quick_links.dart';
+
+/// Page for client settings and profile management.
+///
+/// This page follows the KROW architecture by being a [StatelessWidget]
+/// and delegating its state management to [ClientSettingsBloc] and its
+/// UI sections to specialized sub-widgets.
+class ClientSettingsPage extends StatelessWidget {
+  /// Creates a [ClientSettingsPage].
+  const ClientSettingsPage({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return BlocProvider<ClientSettingsBloc>(
+      create: (context) => Modular.get<ClientSettingsBloc>(),
+      child: BlocListener<ClientSettingsBloc, ClientSettingsState>(
+        listener: (context, state) {
+          if (state is ClientSettingsSignOutSuccess) {
+            Modular.to.navigate('/');
+          }
+          if (state is ClientSettingsError) {
+            ScaffoldMessenger.of(
+              context,
+            ).showSnackBar(SnackBar(content: Text(state.message)));
+          }
+        },
+        child: const Scaffold(
+          backgroundColor: UiColors.background,
+          body: CustomScrollView(
+            slivers: [
+              SettingsProfileHeader(),
+              SettingsActions(),
+              SettingsQuickLinks(),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}

apps/mobile/packages/features/client/settings/lib/src/presentation/widgets/client_settings_page/settings_actions.dart

@@ -0,0 +1,41 @@
+import 'package:core_localization/core_localization.dart';
+import 'package:design_system/design_system.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import '../../blocs/client_settings_bloc.dart';
+
+/// A widget that displays the primary actions for the settings page.
+class SettingsActions extends StatelessWidget {
+  /// Creates a [SettingsActions].
+  const SettingsActions({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    final labels = t.client_settings.profile;
+
+    return SliverPadding(
+      padding: const EdgeInsets.symmetric(horizontal: UiConstants.space5),
+      sliver: SliverList(
+        delegate: SliverChildListDelegate([
+          const SizedBox(height: UiConstants.space5),
+          UiButton.primary(text: labels.edit_profile, onPressed: () {}),
+          const SizedBox(height: UiConstants.space4),
+          UiButton.primary(text: labels.hubs, onPressed: () {}),
+          const SizedBox(height: UiConstants.space4),
+          BlocBuilder<ClientSettingsBloc, ClientSettingsState>(
+            builder: (context, state) {
+              return UiButton.secondary(
+                text: labels.log_out,
+                onPressed: state is ClientSettingsLoading
+                    ? null
+                    : () => BlocProvider.of<ClientSettingsBloc>(
+                        context,
+                      ).add(const ClientSettingsSignOutRequested()),
+              );
+            },
+          ),
+        ]),
+      ),
+    );
+  }
+}

apps/mobile/packages/features/client/settings/lib/src/presentation/widgets/client_settings_page/settings_profile_header.dart

@@ -0,0 +1,91 @@
+import 'package:core_localization/core_localization.dart';
+import 'package:design_system/design_system.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_modular/flutter_modular.dart';
+
+/// A widget that displays the profile header with avatar and company info.
+class SettingsProfileHeader extends StatelessWidget {
+  /// Creates a [SettingsProfileHeader].
+  const SettingsProfileHeader({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    final labels = t.client_settings.profile;
+
+    return SliverAppBar(
+      backgroundColor: UiColors.primary,
+      expandedHeight: 200,
+      pinned: true,
+      flexibleSpace: FlexibleSpaceBar(
+        background: Container(
+          decoration: const BoxDecoration(
+            gradient: LinearGradient(
+              colors: [UiColors.primary, Color(0xFF0047FF)],
+              begin: Alignment.topLeft,
+              end: Alignment.bottomRight,
+            ),
+          ),
+          child: Column(
+            mainAxisAlignment: MainAxisAlignment.center,
+            children: [
+              const SizedBox(height: UiConstants.space5 * 2),
+              Container(
+                width: 80,
+                height: 80,
+                decoration: BoxDecoration(
+                  shape: BoxShape.circle,
+                  border: Border.all(
+                    color: UiColors.white.withValues(alpha: 0.24),
+                    width: 4,
+                  ),
+                  color: UiColors.white,
+                ),
+                child: const Center(
+                  child: Text(
+                    'C',
+                    style: TextStyle(
+                      fontSize: 32,
+                      fontWeight: FontWeight.bold,
+                      color: UiColors.primary,
+                    ),
+                  ),
+                ),
+              ),
+              const SizedBox(height: UiConstants.space3),
+              Text(
+                'Your Company',
+                style: UiTypography.body1b.copyWith(color: UiColors.white),
+              ),
+              const SizedBox(height: UiConstants.space1),
+              Row(
+                mainAxisAlignment: MainAxisAlignment.center,
+                children: [
+                  Icon(
+                    UiIcons.mail,
+                    size: 14,
+                    color: UiColors.white.withValues(alpha: 0.7),
+                  ),
+                  const SizedBox(width: UiConstants.space2),
+                  Text(
+                    'client@example.com',
+                    style: UiTypography.footnote1r.copyWith(
+                      color: UiColors.white.withValues(alpha: 0.7),
+                    ),
+                  ),
+                ],
+              ),
+            ],
+          ),
+        ),
+      ),
+      leading: IconButton(
+        icon: const Icon(UiIcons.arrowLeft, color: UiColors.white),
+        onPressed: () => Modular.to.pop(),
+      ),
+      title: Text(
+        labels.title,
+        style: UiTypography.body1b.copyWith(color: UiColors.white),
+      ),
+    );
+  }
+}

apps/mobile/packages/features/client/settings/lib/src/presentation/widgets/client_settings_page/settings_quick_links.dart

@@ -0,0 +1,97 @@
+import 'package:core_localization/core_localization.dart';
+import 'package:design_system/design_system.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_modular/flutter_modular.dart';
+import '../../navigation/client_settings_navigator.dart';
+
+/// A widget that displays a list of quick links in a card.
+class SettingsQuickLinks extends StatelessWidget {
+  /// Creates a [SettingsQuickLinks].
+  const SettingsQuickLinks({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    final labels = t.client_settings.profile;
+
+    return SliverPadding(
+      padding: const EdgeInsets.all(UiConstants.space5),
+      sliver: SliverToBoxAdapter(
+        child: Card(
+          elevation: 0,
+          shape: RoundedRectangleBorder(
+            borderRadius: UiConstants.radiusLg,
+            side: const BorderSide(color: UiColors.border),
+          ),
+          color: UiColors.white,
+          child: Padding(
+            padding: const EdgeInsets.all(UiConstants.space4),
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                Text(
+                  labels.quick_links,
+                  style: UiTypography.footnote1b.textPrimary,
+                ),
+                const SizedBox(height: UiConstants.space3),
+                _QuickLinkItem(
+                  icon: UiIcons.nfc,
+                  title: labels.clock_in_hubs,
+                  onTap: () => Modular.to.pushHubs(),
+                ),
+                _QuickLinkItem(
+                  icon: UiIcons.building,
+                  title: labels.billing_payments,
+                  onTap: () {},
+                ),
+              ],
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+/// Internal widget for a single quick link item.
+class _QuickLinkItem extends StatelessWidget {
+  final IconData icon;
+  final String title;
+  final VoidCallback onTap;
+
+  const _QuickLinkItem({
+    required this.icon,
+    required this.title,
+    required this.onTap,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return InkWell(
+      onTap: onTap,
+      borderRadius: UiConstants.radiusMd,
+      child: Padding(
+        padding: const EdgeInsets.symmetric(
+          vertical: UiConstants.space3,
+          horizontal: UiConstants.space2,
+        ),
+        child: Row(
+          mainAxisAlignment: MainAxisAlignment.spaceBetween,
+          children: [
+            Row(
+              children: [
+                Icon(icon, size: 20, color: UiColors.iconSecondary),
+                const SizedBox(width: UiConstants.space3),
+                Text(title, style: UiTypography.footnote1m.textPrimary),
+              ],
+            ),
+            const Icon(
+              UiIcons.chevronRight,
+              size: 20,
+              color: UiColors.iconThird,
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

apps/mobile/packages/features/client/settings/pubspec.yaml

@@ -0,0 +1,37 @@
+name: client_settings
+description: Settings and profile screen for the client application.
+version: 0.0.1
+publish_to: none
+resolution: workspace
+
+environment:
+  sdk: '>=3.10.0 <4.0.0'
+  flutter: ">=3.0.0"
+
+dependencies:
+  flutter:
+    sdk: flutter
+  flutter_bloc: ^8.1.0
+  flutter_modular: ^6.3.0
+  equatable: ^2.0.5
+  lucide_icons: ^0.257.0
+  
+  design_system:
+    path: ../../../design_system
+  core_localization:
+    path: ../../../core_localization
+  krow_core:
+    path: ../../../core
+  krow_domain:
+    path: ../../../domain
+  krow_data_connect:
+    path: ../../../data_connect
+
+dev_dependencies:
+  flutter_test:
+    sdk: flutter
+  bloc_test: ^9.1.0
+  mocktail: ^1.0.0
+
+flutter:
+  uses-material-design: true

apps/mobile/packages/features/staff/authentication/feature_manifest.md

@@ -0,0 +1,33 @@
+# Feature Manifest: Staff Authentication
+
+## Overview
+**Feature Name:** Staff Authentication & Onboarding
+**Package Path:** `packages/features/staff/authentication`
+
+## Responsibilities
+*   Handle user sign-up and log-in via Phone Auth.
+*   Verify OTP codes.
+*   Manage the Onboarding Wizard for new staff.
+*   Persist onboarding progress.
+
+## Architecture
+*   **Domain**:
+    *   `AuthRepositoryInterface`
+    *   `SignInWithPhoneUseCase`
+    *   `VerifyOtpUseCase`
+*   **Data**:
+    *   `AuthRepositoryImpl` (uses `AuthRepositoryMock` from `krow_data_connect`)
+*   **Presentation**:
+    *   `AuthBloc`: Manages auth state (phone, otp, user status).
+    *   `OnboardingBloc`: Manages wizard steps.
+    *   Pages: `GetStartedPage`, `PhoneVerificationPage`, `ProfileSetupPage`.
+
+## Dependencies
+*   `krow_domain`: User entities.
+*   `krow_data_connect`: Auth mocks.
+*   `design_system`: UI components.
+
+## Routes
+*   `/`: Get Started (Welcome)
+*   `/phone-verification`: OTP Entry
+*   `/profile-setup`: Onboarding Wizard

apps/mobile/packages/features/staff/authentication/lib/src/data/repositories_impl/auth_repository_impl.dart

@@ -0,0 +1,34 @@
+import 'package:krow_data_connect/krow_data_connect.dart';
+import 'package:krow_domain/krow_domain.dart';
+import '../../domain/repositories/auth_repository_interface.dart';
+
+/// Implementation of [AuthRepositoryInterface].
+class AuthRepositoryImpl implements AuthRepositoryInterface {
+  final AuthRepositoryMock mock;
+
+  AuthRepositoryImpl({required this.mock});
+
+  @override
+  Stream<User?> get currentUser => mock.currentUser;
+
+  /// Signs in with a phone number and returns a verification ID.
+  @override
+  Future<String?> signInWithPhone({required String phoneNumber}) {
+    return mock.signInWithPhone(phoneNumber);
+  }
+
+  /// Signs out the current user.
+  @override
+  Future<void> signOut() {
+    return mock.signOut();
+  }
+
+  /// Verifies an OTP code and returns the authenticated user.
+  @override
+  Future<User?> verifyOtp({
+    required String verificationId,
+    required String smsCode,
+  }) {
+    return mock.verifyOtp(verificationId, smsCode);
+  }
+}

apps/mobile/packages/features/staff/authentication/lib/src/domain/arguments/sign_in_with_phone_arguments.dart

@@ -0,0 +1,17 @@
+import 'package:krow_core/core.dart';
+
+/// Represents the arguments required for the [SignInWithPhoneUseCase].
+///
+/// Encapsulates the phone number needed to initiate the sign-in process.
+class SignInWithPhoneArguments extends UseCaseArgument {
+  /// The phone number to be used for sign-in or sign-up.
+  final String phoneNumber;
+
+  /// Creates a [SignInWithPhoneArguments] instance.
+  ///
+  /// The [phoneNumber] is required.
+  const SignInWithPhoneArguments({required this.phoneNumber});
+
+  @override
+  List<Object> get props => [phoneNumber];
+}

apps/mobile/packages/features/staff/authentication/lib/src/domain/arguments/verify_otp_arguments.dart

@@ -0,0 +1,24 @@
+import 'package:krow_core/core.dart';
+
+/// Represents the arguments required for the [VerifyOtpUseCase].
+///
+/// Encapsulates the verification ID and the SMS code needed to verify
+/// a phone number during the authentication process.
+class VerifyOtpArguments extends UseCaseArgument {
+  /// The unique identifier received after requesting an OTP.
+  final String verificationId;
+
+  /// The one-time password (OTP) sent to the user's phone.
+  final String smsCode;
+
+  /// Creates a [VerifyOtpArguments] instance.
+  ///
+  /// Both [verificationId] and [smsCode] are required.
+  const VerifyOtpArguments({
+    required this.verificationId,
+    required this.smsCode,
+  });
+
+  @override
+  List<Object> get props => [verificationId, smsCode];
+}

apps/mobile/packages/features/staff/authentication/lib/src/domain/repositories/auth_repository_interface.dart

@@ -0,0 +1,19 @@
+import 'package:krow_domain/krow_domain.dart';
+
+/// Interface for authentication repository.
+abstract interface class AuthRepositoryInterface {
+  Stream<User?> get currentUser;
+
+  /// Signs in with a phone number and returns a verification ID.
+  Future<String?> signInWithPhone({required String phoneNumber});
+
+  /// Verifies the OTP code and returns the authenticated user.
+  Future<User?> verifyOtp({
+    required String verificationId,
+    required String smsCode,
+  });
+
+  /// Signs out the current user.
+  Future<void> signOut();
+  // Future<Staff?> getStaffProfile(String userId); // Could be moved to a separate repository if needed, but useful here for routing logic.
+}

apps/mobile/packages/features/staff/authentication/lib/src/domain/ui_entities/auth_mode.dart

@@ -0,0 +1,8 @@
+/// Represents the authentication mode: either signing up or logging in.
+enum AuthMode {
+  /// User is creating a new account.
+  signup,
+
+  /// User is logging into an existing account.
+  login,
+}

apps/mobile/packages/features/staff/authentication/lib/src/domain/usecases/sign_in_with_phone_usecase.dart

@@ -0,0 +1,21 @@
+import 'package:krow_core/core.dart';
+import '../arguments/sign_in_with_phone_arguments.dart';
+import '../repositories/auth_repository_interface.dart';
+
+/// Use case for signing in with a phone number.
+///
+/// This use case delegates the sign-in logic to the [AuthRepositoryInterface].
+class SignInWithPhoneUseCase
+    implements UseCase<SignInWithPhoneArguments, String?> {
+  final AuthRepositoryInterface _repository;
+
+  /// Creates a [SignInWithPhoneUseCase].
+  ///
+  /// Requires an [AuthRepositoryInterface] to interact with the authentication data source.
+  SignInWithPhoneUseCase(this._repository);
+
+  @override
+  Future<String?> call(SignInWithPhoneArguments arguments) {
+    return _repository.signInWithPhone(phoneNumber: arguments.phoneNumber);
+  }
+}

apps/mobile/packages/features/staff/authentication/lib/src/domain/usecases/verify_otp_usecase.dart

@@ -0,0 +1,24 @@
+import 'package:krow_core/core.dart';
+import 'package:krow_domain/krow_domain.dart';
+import '../arguments/verify_otp_arguments.dart';
+import '../repositories/auth_repository_interface.dart';
+
+/// Use case for verifying an OTP code.
+///
+/// This use case delegates the OTP verification logic to the [AuthRepositoryInterface].
+class VerifyOtpUseCase implements UseCase<VerifyOtpArguments, User?> {
+  final AuthRepositoryInterface _repository;
+
+  /// Creates a [VerifyOtpUseCase].
+  ///
+  /// Requires an [AuthRepositoryInterface] to interact with the authentication data source.
+  VerifyOtpUseCase(this._repository);
+
+  @override
+  Future<User?> call(VerifyOtpArguments arguments) {
+    return _repository.verifyOtp(
+      verificationId: arguments.verificationId,
+      smsCode: arguments.smsCode,
+    );
+  }
+}

apps/mobile/packages/features/staff/authentication/lib/src/presentation/blocs/auth_bloc.dart

@@ -0,0 +1,111 @@
+import 'package:flutter_modular/flutter_modular.dart';
+import 'package:bloc/bloc.dart';
+import 'package:krow_domain/krow_domain.dart';
+import '../../domain/arguments/sign_in_with_phone_arguments.dart';
+import '../../domain/arguments/verify_otp_arguments.dart';
+import '../../domain/usecases/sign_in_with_phone_usecase.dart';
+import '../../domain/usecases/verify_otp_usecase.dart';
+import 'auth_event.dart';
+import 'auth_state.dart';
+
+/// BLoC responsible for handling authentication logic.
+class AuthBloc extends Bloc<AuthEvent, AuthState> implements Disposable {
+  /// The use case for signing in with a phone number.
+  final SignInWithPhoneUseCase _signInUseCase;
+
+  /// The use case for verifying an OTP.
+  final VerifyOtpUseCase _verifyOtpUseCase;
+
+  /// Creates an [AuthBloc].
+  AuthBloc({
+    required SignInWithPhoneUseCase signInUseCase,
+    required VerifyOtpUseCase verifyOtpUseCase,
+  }) : _signInUseCase = signInUseCase,
+       _verifyOtpUseCase = verifyOtpUseCase,
+       super(const AuthState()) {
+    on<AuthSignInRequested>(_onSignInRequested);
+    on<AuthOtpSubmitted>(_onOtpSubmitted);
+    on<AuthErrorCleared>(_onErrorCleared);
+    on<AuthOtpUpdated>(_onOtpUpdated);
+    on<AuthPhoneUpdated>(_onPhoneUpdated);
+  }
+
+  /// Clears any authentication error from the state.
+  void _onErrorCleared(AuthErrorCleared event, Emitter<AuthState> emit) {
+    emit(state.copyWith(status: AuthStatus.codeSent, errorMessage: null));
+  }
+
+  /// Updates the internal OTP state without triggering a submission.
+  void _onOtpUpdated(AuthOtpUpdated event, Emitter<AuthState> emit) {
+    emit(
+      state.copyWith(
+        otp: event.otp,
+        status: AuthStatus.codeSent,
+        errorMessage: null,
+      ),
+    );
+  }
+
+  /// Updates the internal phone number state without triggering a submission.
+  void _onPhoneUpdated(AuthPhoneUpdated event, Emitter<AuthState> emit) {
+    emit(state.copyWith(phoneNumber: event.phoneNumber, errorMessage: null));
+  }
+
+  /// Handles the sign-in request, initiating the phone authentication process.
+  Future<void> _onSignInRequested(
+    AuthSignInRequested event,
+    Emitter<AuthState> emit,
+  ) async {
+    emit(
+      state.copyWith(
+        status: AuthStatus.loading,
+        mode: event.mode,
+        phoneNumber: event.phoneNumber,
+      ),
+    );
+    try {
+      final String? verificationId = await _signInUseCase(
+        SignInWithPhoneArguments(
+          phoneNumber: event.phoneNumber ?? state.phoneNumber,
+        ),
+      );
+      emit(
+        state.copyWith(
+          status: AuthStatus.codeSent,
+          verificationId: verificationId,
+        ),
+      );
+    } catch (e) {
+      emit(
+        state.copyWith(status: AuthStatus.error, errorMessage: e.toString()),
+      );
+    }
+  }
+
+  /// Handles OTP submission and verification.
+  Future<void> _onOtpSubmitted(
+    AuthOtpSubmitted event,
+    Emitter<AuthState> emit,
+  ) async {
+    emit(state.copyWith(status: AuthStatus.loading));
+    try {
+      final User? user = await _verifyOtpUseCase(
+        VerifyOtpArguments(
+          verificationId: event.verificationId,
+          smsCode: event.smsCode,
+        ),
+      );
+      emit(state.copyWith(status: AuthStatus.authenticated, user: user));
+    } catch (e) {
+      emit(
+        state.copyWith(status: AuthStatus.error, errorMessage: e.toString()),
+      );
+    }
+  }
+
+  /// Disposes the BLoC resources.
+  @override
+  void dispose() {
+    close();
+  }
+}

apps/mobile/packages/features/staff/authentication/lib/src/presentation/blocs/auth_event.dart

@@ -0,0 +1,65 @@
+import 'package:equatable/equatable.dart';
+import 'package:staff_authentication/src/domain/ui_entities/auth_mode.dart';
+
+/// Abstract base class for all authentication events.
+abstract class AuthEvent extends Equatable {
+  const AuthEvent();
+  @override
+  List<Object> get props => [];
+}
+
+/// Event for requesting a sign-in with a phone number.
+class AuthSignInRequested extends AuthEvent {
+  /// The phone number provided by the user.
+  final String? phoneNumber;
+
+  /// The authentication mode (login or signup).
+  final AuthMode mode;
+
+  const AuthSignInRequested({this.phoneNumber, required this.mode});
+
+  @override
+  List<Object> get props => [mode];
+}
+
+/// Event for submitting an OTP (One-Time Password) for verification.
+///
+/// This event is dispatched after the user has received an OTP and
+/// submits it for verification.
+class AuthOtpSubmitted extends AuthEvent {
+  /// The verification ID received after the phone number submission.
+  final String verificationId;
+
+  /// The SMS code (OTP) entered by the user.
+  final String smsCode;
+
+  const AuthOtpSubmitted({required this.verificationId, required this.smsCode});
+
+  @override
+  List<Object> get props => [verificationId, smsCode];
+}
+
+/// Event for clearing any authentication error in the state.
+class AuthErrorCleared extends AuthEvent {}
+
+/// Event for updating the current draft OTP in the state.
+class AuthOtpUpdated extends AuthEvent {
+  /// The current draft OTP.
+  final String otp;
+
+  const AuthOtpUpdated(this.otp);
+
+  @override
+  List<Object> get props => [otp];
+}
+
+/// Event for updating the current draft phone number in the state.
+class AuthPhoneUpdated extends AuthEvent {
+  /// The current draft phone number.
+  final String phoneNumber;
+
+  const AuthPhoneUpdated(this.phoneNumber);
+
+  @override
+  List<Object> get props => [phoneNumber];
+}

apps/mobile/packages/features/staff/authentication/lib/src/presentation/blocs/auth_state.dart

@@ -0,0 +1,93 @@
+import 'package:equatable/equatable.dart';
+import 'package:krow_domain/krow_domain.dart';
+import 'package:staff_authentication/src/domain/ui_entities/auth_mode.dart';
+
+/// Enum representing the current status of the authentication process.
+enum AuthStatus {
+  /// Initial state, awaiting phone number entry.
+  initial,
+
+  /// Authentication operation in progress.
+  loading,
+
+  /// OTP has been sent, awaiting code verification.
+  codeSent,
+
+  /// User has been successfully authenticated.
+  authenticated,
+
+  /// An error occurred during the process.
+  error,
+}
+
+/// A unified state class for the authentication process.
+class AuthState extends Equatable {
+  /// The current status of the authentication flow.
+  final AuthStatus status;
+
+  /// The ID received from the authentication service, used to verify the OTP.
+  final String? verificationId;
+
+  /// The authentication mode (login or signup).
+  final AuthMode mode;
+
+  /// The current draft OTP entered by the user.
+  final String otp;
+
+  /// The phone number entered by the user.
+  final String phoneNumber;
+
+  /// A descriptive message for any error that occurred.
+  final String? errorMessage;
+
+  /// The authenticated user's data (available when status is [AuthStatus.authenticated]).
+  final User? user;
+
+  const AuthState({
+    this.status = AuthStatus.initial,
+    this.verificationId,
+    this.mode = AuthMode.login,
+    this.otp = '',
+    this.phoneNumber = '',
+    this.errorMessage,
+    this.user,
+  });
+
+  @override
+  List<Object?> get props => [
+    status,
+    verificationId,
+    mode,
+    otp,
+    phoneNumber,
+    errorMessage,
+    user,
+  ];
+
+  /// Convenient helper to check if the status is [AuthStatus.loading].
+  bool get isLoading => status == AuthStatus.loading;
+
+  /// Convenient helper to check if the status is [AuthStatus.error].
+  bool get hasError => status == AuthStatus.error;
+
+  /// Copies the state with optional new values.
+  AuthState copyWith({
+    AuthStatus? status,
+    String? verificationId,
+    AuthMode? mode,
+    String? otp,
+    String? phoneNumber,
+    String? errorMessage,
+    User? user,
+  }) {
+    return AuthState(
+      status: status ?? this.status,
+      verificationId: verificationId ?? this.verificationId,
+      mode: mode ?? this.mode,
+      otp: otp ?? this.otp,
+      phoneNumber: phoneNumber ?? this.phoneNumber,
+      errorMessage: errorMessage ?? this.errorMessage,
+      user: user ?? this.user,
+    );
+  }
+}

apps/mobile/packages/features/staff/authentication/lib/src/presentation/blocs/profile_setup/profile_setup_bloc.dart

@@ -0,0 +1,100 @@
+import 'package:flutter/foundation.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'profile_setup_event.dart';
+import 'profile_setup_state.dart';
+
+export 'profile_setup_event.dart';
+export 'profile_setup_state.dart';
+
+/// BLoC responsible for managing the profile setup state and logic.
+class ProfileSetupBloc extends Bloc<ProfileSetupEvent, ProfileSetupState> {
+  /// Creates a [ProfileSetupBloc] with an initial state.
+  ProfileSetupBloc() : super(const ProfileSetupState()) {
+    on<ProfileSetupFullNameChanged>(_onFullNameChanged);
+    on<ProfileSetupBioChanged>(_onBioChanged);
+    on<ProfileSetupLocationsChanged>(_onLocationsChanged);
+    on<ProfileSetupDistanceChanged>(_onDistanceChanged);
+    on<ProfileSetupSkillsChanged>(_onSkillsChanged);
+    on<ProfileSetupIndustriesChanged>(_onIndustriesChanged);
+    on<ProfileSetupSubmitted>(_onSubmitted);
+  }
+
+  /// Handles the [ProfileSetupFullNameChanged] event.
+  void _onFullNameChanged(
+    ProfileSetupFullNameChanged event,
+    Emitter<ProfileSetupState> emit,
+  ) {
+    emit(state.copyWith(fullName: event.fullName));
+  }
+
+  /// Handles the [ProfileSetupBioChanged] event.
+  void _onBioChanged(
+    ProfileSetupBioChanged event,
+    Emitter<ProfileSetupState> emit,
+  ) {
+    emit(state.copyWith(bio: event.bio));
+  }
+
+  /// Handles the [ProfileSetupLocationsChanged] event.
+  void _onLocationsChanged(
+    ProfileSetupLocationsChanged event,
+    Emitter<ProfileSetupState> emit,
+  ) {
+    emit(state.copyWith(preferredLocations: event.locations));
+  }
+
+  /// Handles the [ProfileSetupDistanceChanged] event.
+  void _onDistanceChanged(
+    ProfileSetupDistanceChanged event,
+    Emitter<ProfileSetupState> emit,
+  ) {
+    emit(state.copyWith(maxDistanceMiles: event.distance));
+  }
+
+  /// Handles the [ProfileSetupSkillsChanged] event.
+  void _onSkillsChanged(
+    ProfileSetupSkillsChanged event,
+    Emitter<ProfileSetupState> emit,
+  ) {
+    emit(state.copyWith(skills: event.skills));
+  }
+
+  /// Handles the [ProfileSetupIndustriesChanged] event.
+  void _onIndustriesChanged(
+    ProfileSetupIndustriesChanged event,
+    Emitter<ProfileSetupState> emit,
+  ) {
+    emit(state.copyWith(industries: event.industries));
+  }
+
+  /// Handles the [ProfileSetupSubmitted] event.
+  Future<void> _onSubmitted(
+    ProfileSetupSubmitted event,
+    Emitter<ProfileSetupState> emit,
+  ) async {
+    emit(state.copyWith(status: ProfileSetupStatus.loading));
+
+    try {
+      // In a real app, we would send this data to a UseCase
+      debugPrint('Submitting Profile:');
+      debugPrint('Name: ${state.fullName}');
+      debugPrint('Bio: ${state.bio}');
+      debugPrint('Locations: ${state.preferredLocations}');
+      debugPrint('Distance: ${state.maxDistanceMiles}');
+      debugPrint('Skills: ${state.skills}');
+      debugPrint('Industries: ${state.industries}');
+
+      // Mocking profile creation delay
+      await Future.delayed(const Duration(milliseconds: 1500));
+
+      emit(state.copyWith(status: ProfileSetupStatus.success));
+    } catch (e) {
+      emit(
+        state.copyWith(
+          status: ProfileSetupStatus.failure,
+          errorMessage: e.toString(),
+        ),
+      );
+    }
+  }
+}

apps/mobile/packages/features/staff/authentication/lib/src/presentation/blocs/profile_setup/profile_setup_event.dart

@@ -0,0 +1,87 @@
+import 'package:equatable/equatable.dart';
+
+/// Base class for all profile setup events.
+abstract class ProfileSetupEvent extends Equatable {
+  const ProfileSetupEvent();
+
+  @override
+  List<Object?> get props => [];
+}
+
+/// Event triggered when the full name changes.
+class ProfileSetupFullNameChanged extends ProfileSetupEvent {
+  /// The new full name value.
+  final String fullName;
+
+  /// Creates a [ProfileSetupFullNameChanged] event.
+  const ProfileSetupFullNameChanged(this.fullName);
+
+  @override
+  List<Object?> get props => [fullName];
+}
+
+/// Event triggered when the bio changes.
+class ProfileSetupBioChanged extends ProfileSetupEvent {
+  /// The new bio value.
+  final String bio;
+
+  /// Creates a [ProfileSetupBioChanged] event.
+  const ProfileSetupBioChanged(this.bio);
+
+  @override
+  List<Object?> get props => [bio];
+}
+
+/// Event triggered when the preferred locations change.
+class ProfileSetupLocationsChanged extends ProfileSetupEvent {
+  /// The new list of locations.
+  final List<String> locations;
+
+  /// Creates a [ProfileSetupLocationsChanged] event.
+  const ProfileSetupLocationsChanged(this.locations);
+
+  @override
+  List<Object?> get props => [locations];
+}
+
+/// Event triggered when the max distance changes.
+class ProfileSetupDistanceChanged extends ProfileSetupEvent {
+  /// The new max distance value in miles.
+  final double distance;
+
+  /// Creates a [ProfileSetupDistanceChanged] event.
+  const ProfileSetupDistanceChanged(this.distance);
+
+  @override
+  List<Object?> get props => [distance];
+}
+
+/// Event triggered when the skills change.
+class ProfileSetupSkillsChanged extends ProfileSetupEvent {
+  /// The new list of selected skills.
+  final List<String> skills;
+
+  /// Creates a [ProfileSetupSkillsChanged] event.
+  const ProfileSetupSkillsChanged(this.skills);
+
+  @override
+  List<Object?> get props => [skills];
+}
+
+/// Event triggered when the industries change.
+class ProfileSetupIndustriesChanged extends ProfileSetupEvent {
+  /// The new list of selected industries.
+  final List<String> industries;
+
+  /// Creates a [ProfileSetupIndustriesChanged] event.
+  const ProfileSetupIndustriesChanged(this.industries);
+
+  @override
+  List<Object?> get props => [industries];
+}
+
+/// Event triggered when the profile submission is requested.
+class ProfileSetupSubmitted extends ProfileSetupEvent {
+  /// Creates a [ProfileSetupSubmitted] event.
+  const ProfileSetupSubmitted();
+}

apps/mobile/packages/features/staff/authentication/lib/src/presentation/blocs/profile_setup/profile_setup_state.dart

@@ -0,0 +1,78 @@
+import 'package:equatable/equatable.dart';
+
+/// Enum defining the status of the profile setup process.
+enum ProfileSetupStatus { initial, loading, success, failure }
+
+/// State for the ProfileSetupBloc.
+class ProfileSetupState extends Equatable {
+  /// The user's full name.
+  final String fullName;
+
+  /// The user's bio or short description.
+  final String bio;
+
+  /// List of preferred work locations (e.g., cities, zip codes).
+  final List<String> preferredLocations;
+
+  /// Maximum distance in miles the user is willing to travel.
+  final double maxDistanceMiles;
+
+  /// List of skills selected by the user.
+  final List<String> skills;
+
+  /// List of industries selected by the user.
+  final List<String> industries;
+
+  /// The current status of the profile setup process.
+  final ProfileSetupStatus status;
+
+  /// Error message if the status is [ProfileSetupStatus.failure].
+  final String? errorMessage;
+
+  /// Creates a [ProfileSetupState] instance.
+  const ProfileSetupState({
+    this.fullName = '',
+    this.bio = '',
+    this.preferredLocations = const [],
+    this.maxDistanceMiles = 25,
+    this.skills = const [],
+    this.industries = const [],
+    this.status = ProfileSetupStatus.initial,
+    this.errorMessage,
+  });
+
+  /// Creates a copy of the current state with updated values.
+  ProfileSetupState copyWith({
+    String? fullName,
+    String? bio,
+    List<String>? preferredLocations,
+    double? maxDistanceMiles,
+    List<String>? skills,
+    List<String>? industries,
+    ProfileSetupStatus? status,
+    String? errorMessage,
+  }) {
+    return ProfileSetupState(
+      fullName: fullName ?? this.fullName,
+      bio: bio ?? this.bio,
+      preferredLocations: preferredLocations ?? this.preferredLocations,
+      maxDistanceMiles: maxDistanceMiles ?? this.maxDistanceMiles,
+      skills: skills ?? this.skills,
+      industries: industries ?? this.industries,
+      status: status ?? this.status,
+      errorMessage: errorMessage,
+    );
+  }
+
+  @override
+  List<Object?> get props => [
+    fullName,
+    bio,
+    preferredLocations,
+    maxDistanceMiles,
+    skills,
+    industries,
+    status,
+    errorMessage,
+  ];
+}

apps/mobile/packages/features/staff/authentication/lib/src/presentation/navigation/auth_navigator.dart

@@ -0,0 +1,21 @@
+import 'package:flutter_modular/flutter_modular.dart';
+import '../../domain/ui_entities/auth_mode.dart';
+
+/// Extension on [IModularNavigator] to provide strongly-typed navigation
+/// for the staff authentication feature.
+extension AuthNavigator on IModularNavigator {
+  /// Navigates to the phone verification page.
+  void pushPhoneVerification(AuthMode mode) {
+    pushNamed('./phone-verification', arguments: {'mode': mode.name});
+  }
+
+  /// Navigates to the profile setup page, replacing the current route.
+  void pushReplacementProfileSetup() {
+    pushReplacementNamed('./profile-setup');
+  }
+
+  /// Navigates to the worker home (external to this module).
+  void pushWorkerHome() {
+    pushNamed('/worker-home');
+  }
+}

apps/mobile/packages/features/staff/authentication/lib/src/presentation/pages/get_started_page.dart

@@ -0,0 +1,64 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_modular/flutter_modular.dart';
+import 'package:staff_authentication/src/domain/ui_entities/auth_mode.dart';
+import '../navigation/auth_navigator.dart'; // Import the extension
+import '../widgets/get_started_page/get_started_actions.dart';
+import '../widgets/get_started_page/get_started_background.dart';
+import '../widgets/get_started_page/get_started_header.dart';
+
+/// The entry point page for staff authentication.
+///
+/// This page provides the user with the initial options to either sign up
+/// for a new account or log in to an existing one. It uses a series of
+/// sub-widgets to maintain a clean and modular structure.
+class GetStartedPage extends StatelessWidget {
+  /// Creates a [GetStartedPage].
+  const GetStartedPage({super.key});
+
+  /// On sign up pressed callback.
+  void onSignUpPressed() {
+    Modular.to.pushPhoneVerification(AuthMode.signup);
+  }
+
+  /// On login pressed callback.
+  void onLoginPressed() {
+    Modular.to.pushPhoneVerification(AuthMode.login);
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      body: SafeArea(
+        child: Column(
+          children: [
+            // Background
+            const Expanded(child: GetStartedBackground()),
+
+            // Content Overlay
+            Padding(
+              padding: const EdgeInsets.all(24.0),
+              child: Column(
+                mainAxisAlignment: MainAxisAlignment.end,
+                crossAxisAlignment: CrossAxisAlignment.stretch,
+                children: [
+                  // Main text and actions
+                  const GetStartedHeader(),
+
+                  const SizedBox(height: 48),
+
+                  // Actions
+                  GetStartedActions(
+                    onSignUpPressed: onSignUpPressed,
+                    onLoginPressed: onLoginPressed,
+                  ),
+
+                  const SizedBox(height: 32),
+                ],
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

apps/mobile/packages/features/staff/authentication/lib/src/presentation/pages/phone_verification_page.dart

@@ -0,0 +1,124 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:flutter_modular/flutter_modular.dart';
+import 'package:design_system/design_system.dart';
+import 'package:staff_authentication/src/domain/ui_entities/auth_mode.dart';
+import 'package:staff_authentication/src/presentation/blocs/auth_event.dart';
+import 'package:staff_authentication/src/presentation/blocs/auth_state.dart';
+import 'package:staff_authentication/src/presentation/blocs/auth_bloc.dart';
+import '../widgets/phone_verification_page/phone_input.dart';
+import '../widgets/phone_verification_page/otp_verification.dart';
+import 'package:staff_authentication/staff_authentication.dart';
+import '../navigation/auth_navigator.dart'; // Import the extension
+
+/// A combined page for phone number entry and OTP verification.
+///
+/// This page coordinates the authentication flow by switching between
+/// [PhoneInput] and [OtpVerification] based on the current [AuthState].
+class PhoneVerificationPage extends StatelessWidget {
+  /// The authentication mode (login or signup).
+  final AuthMode mode;
+
+  /// Creates a [PhoneVerificationPage].
+  const PhoneVerificationPage({super.key, required this.mode});
+
+  /// Handles the request to send a verification code to the provided phone number.
+  void _onSendCode({
+    required BuildContext context,
+    required String phoneNumber,
+  }) {
+    if (phoneNumber.length == 10) {
+      BlocProvider.of<AuthBloc>(
+        context,
+      ).add(AuthSignInRequested(phoneNumber: '+1$phoneNumber', mode: mode));
+    } else {
+      ScaffoldMessenger.of(context).showSnackBar(
+        SnackBar(
+          content: Text(
+            t.staff_authentication.phone_verification_page.validation_error,
+          ),
+        ),
+      );
+    }
+  }
+
+  /// Handles the submission of the OTP code.
+  void _onOtpSubmitted({
+    required BuildContext context,
+    required String otp,
+    required String verificationId,
+  }) {
+    BlocProvider.of<AuthBloc>(
+      context,
+    ).add(AuthOtpSubmitted(verificationId: verificationId, smsCode: otp));
+  }
+
+  /// Handles the request to resend the verification code using the phone number in the state.
+  void _onResend({required BuildContext context}) {
+    BlocProvider.of<AuthBloc>(context).add(AuthSignInRequested(mode: mode));
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return BlocProvider<AuthBloc>(
+      create: (context) => Modular.get<AuthBloc>(),
+      child: Builder(
+        builder: (context) {
+          return BlocListener<AuthBloc, AuthState>(
+            listener: (context, state) {
+              if (state.status == AuthStatus.authenticated) {
+                if (state.mode == AuthMode.signup) {
+                  Modular.to.pushReplacementProfileSetup();
+                } else {
+                  Modular.to.pushWorkerHome();
+                }
+              }
+            },
+            child: BlocBuilder<AuthBloc, AuthState>(
+              builder: (context, state) {
+                // Check if we are in the OTP step
+                final bool isOtpStep =
+                    state.status == AuthStatus.codeSent ||
+                    (state.status == AuthStatus.error &&
+                        state.verificationId != null) ||
+                    (state.status == AuthStatus.loading &&
+                        state.verificationId != null);
+
+                return Scaffold(
+                  appBar: const UiAppBar(
+                    centerTitle: true,
+                    showBackButton: true,
+                  ),
+                  body: SafeArea(
+                    child: isOtpStep
+                        ? OtpVerification(
+                            state: state,
+                            onOtpSubmitted: (otp) => _onOtpSubmitted(
+                              context: context,
+                              otp: otp,
+                              verificationId: state.verificationId ?? '',
+                            ),
+                            onResend: () => _onResend(context: context),
+                            onContinue: () => _onOtpSubmitted(
+                              context: context,
+                              otp: state.otp,
+                              verificationId: state.verificationId ?? '',
+                            ),
+                          )
+                        : PhoneInput(
+                            state: state,
+                            onSendCode: () => _onSendCode(
+                              context: context,
+                              phoneNumber: state.phoneNumber,
+                            ),
+                          ),
+                  ),
+                );
+              },
+            ),
+          );
+        },
+      ),
+    );
+  }
+}

apps/mobile/packages/features/staff/authentication/lib/src/presentation/pages/profile_setup_page.dart

@@ -0,0 +1,236 @@
+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'
+    hide ModularWatchExtension;
+import '../blocs/profile_setup/profile_setup_bloc.dart';
+import '../widgets/profile_setup_page/profile_setup_basic_info.dart';
+import '../widgets/profile_setup_page/profile_setup_location.dart';
+import '../widgets/profile_setup_page/profile_setup_experience.dart';
+import '../widgets/profile_setup_page/profile_setup_header.dart';
+import 'package:staff_authentication/staff_authentication.dart';
+import '../navigation/auth_navigator.dart'; // Import the extension
+
+/// Page for setting up the user profile after authentication.
+class ProfileSetupPage extends StatefulWidget {
+  const ProfileSetupPage({super.key});
+
+  @override
+  State<ProfileSetupPage> createState() => _ProfileSetupPageState();
+}
+
+class _ProfileSetupPageState extends State<ProfileSetupPage> {
+  /// Current step index.
+  int _currentStep = 0;
+
+  /// List of steps in the profile setup process.
+  List<Map<String, dynamic>> get _steps => [
+    {
+      'id': 'basic',
+      'title': t.staff_authentication.profile_setup_page.steps.basic,
+      'icon': UiIcons.user,
+    },
+    {
+      'id': 'location',
+      'title': t.staff_authentication.profile_setup_page.steps.location,
+      'icon': UiIcons.mapPin,
+    },
+    {
+      'id': 'experience',
+      'title': t.staff_authentication.profile_setup_page.steps.experience,
+      'icon': UiIcons.briefcase,
+    },
+  ];
+
+  /// Handles the "Next" button tap logic.
+  void _handleNext({
+    required BuildContext context,
+    required ProfileSetupState state,
+    required int stepsCount,
+  }) {
+    if (_currStepValid(state: state)) {
+      if (_currentStep < stepsCount - 1) {
+        setState(() => _currentStep++);
+      } else {
+        BlocProvider.of<ProfileSetupBloc>(
+          context,
+        ).add(const ProfileSetupSubmitted());
+      }
+    }
+  }
+
+  /// Handles the "Back" button tap logic.
+  void _handleBack() {
+    if (_currentStep > 0) {
+      setState(() => _currentStep--);
+    }
+  }
+
+  /// Checks if the current step is valid.
+  bool _currStepValid({required ProfileSetupState state}) {
+    switch (_currentStep) {
+      case 0:
+        return state.fullName.trim().length >= 2;
+      case 1:
+        return state.preferredLocations.isNotEmpty;
+      case 2:
+        return state.skills.isNotEmpty;
+      default:
+        return true;
+    }
+  }
+
+  @override
+  /// Builds the profile setup page UI.
+  Widget build(BuildContext context) {
+    final steps = _steps;
+
+    // Calculate progress
+    final double progress = (_currentStep + 1) / steps.length;
+
+    return BlocProvider<ProfileSetupBloc>(
+      create: (context) => Modular.get<ProfileSetupBloc>(),
+      child: BlocConsumer<ProfileSetupBloc, ProfileSetupState>(
+        listener: (context, state) {
+          if (state.status == ProfileSetupStatus.success) {
+            Modular.to.pushWorkerHome();
+          } else if (state.status == ProfileSetupStatus.failure) {
+            ScaffoldMessenger.of(context).showSnackBar(
+              SnackBar(
+                content: Text(
+                  state.errorMessage ??
+                      t.staff_authentication.profile_setup_page.error_occurred,
+                ),
+              ),
+            );
+          }
+        },
+        builder: (context, state) {
+          final isCreatingProfile = state.status == ProfileSetupStatus.loading;
+
+          return Scaffold(
+            body: SafeArea(
+              child: Column(
+                children: [
+                  // Progress Bar
+                  LinearProgressIndicator(value: progress),
+
+                  // Header (Back + Step Count)
+                  ProfileSetupHeader(
+                    currentStep: _currentStep,
+                    totalSteps: steps.length,
+                    onBackTap: _handleBack,
+                  ),
+
+                  // Step Indicators
+                  UiStepIndicator(
+                    stepIcons: steps
+                        .map((step) => step['icon'] as IconData)
+                        .toList(),
+                    currentStep: _currentStep,
+                  ),
+
+                  // Content Area
+                  Expanded(
+                    child: AnimatedSwitcher(
+                      duration: const Duration(milliseconds: 300),
+                      child: SingleChildScrollView(
+                        key: ValueKey<int>(_currentStep),
+                        padding: const EdgeInsets.all(UiConstants.space6),
+                        child: _buildStepContent(
+                          context: context,
+                          state: state,
+                        ),
+                      ),
+                    ),
+                  ),
+
+                  // Footer
+                  Container(
+                    padding: const EdgeInsets.all(UiConstants.space6),
+                    decoration: const BoxDecoration(
+                      border: Border(
+                        top: BorderSide(color: UiColors.separatorSecondary),
+                      ),
+                    ),
+                    child: isCreatingProfile
+                        ? ElevatedButton(
+                            onPressed: null,
+                            child: const SizedBox(
+                              width: 24,
+                              height: 24,
+                              child: CircularProgressIndicator(strokeWidth: 2),
+                            ),
+                          )
+                        : UiButton.primary(
+                            text: _currentStep == steps.length - 1
+                                ? t
+                                      .staff_authentication
+                                      .profile_setup_page
+                                      .complete_setup_button
+                                : t.common.continue_text,
+                            trailingIcon: _currentStep < steps.length - 1
+                                ? UiIcons.arrowRight
+                                : null,
+                            onPressed: _currStepValid(state: state)
+                                ? () => _handleNext(
+                                    context: context,
+                                    state: state,
+                                    stepsCount: steps.length,
+                                  )
+                                : null,
+                          ),
+                  ),
+                ],
+              ),
+            ),
+          );
+        },
+      ),
+    );
+  }
+
+  /// Builds the content for the current step.
+  Widget _buildStepContent({
+    required BuildContext context,
+    required ProfileSetupState state,
+  }) {
+    switch (_currentStep) {
+      case 0:
+        return ProfileSetupBasicInfo(
+          fullName: state.fullName,
+          bio: state.bio,
+          onFullNameChanged: (val) => BlocProvider.of<ProfileSetupBloc>(
+            context,
+          ).add(ProfileSetupFullNameChanged(val)),
+          onBioChanged: (val) => BlocProvider.of<ProfileSetupBloc>(
+            context,
+          ).add(ProfileSetupBioChanged(val)),
+        );
+      case 1:
+        return ProfileSetupLocation(
+          preferredLocations: state.preferredLocations,
+          maxDistanceMiles: state.maxDistanceMiles,
+          onLocationsChanged: (val) => BlocProvider.of<ProfileSetupBloc>(
+            context,
+          ).add(ProfileSetupLocationsChanged(val)),
+          onDistanceChanged: (val) => BlocProvider.of<ProfileSetupBloc>(
+            context,
+          ).add(ProfileSetupDistanceChanged(val)),
+        );
+      case 2:
+        return ProfileSetupExperience(
+          skills: state.skills,
+          industries: state.industries,
+          onSkillsChanged: (val) => BlocProvider.of<ProfileSetupBloc>(
+            context,
+          ).add(ProfileSetupSkillsChanged(val)),
+          onIndustriesChanged: (val) => BlocProvider.of<ProfileSetupBloc>(
+            context,
+          ).add(ProfileSetupIndustriesChanged(val)),
+        );
+      default:
+        return const SizedBox.shrink();
+    }
+  }
+}

apps/mobile/packages/features/staff/authentication/lib/src/presentation/widgets/common/auth_trouble_link.dart

@@ -0,0 +1,27 @@
+import 'package:design_system/design_system.dart';
+import 'package:flutter/material.dart';
+import 'package:staff_authentication/staff_authentication.dart';
+
+/// A common widget that displays a "Having trouble? Contact Support" link.
+class AuthTroubleLink extends StatelessWidget {
+  /// Creates an [AuthTroubleLink].
+  const AuthTroubleLink({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Row(
+      mainAxisAlignment: MainAxisAlignment.center,
+      spacing: UiConstants.space1,
+      children: [
+        Text(
+          t.staff_authentication.common.trouble_question,
+          style: UiTypography.body2r.textSecondary,
+        ),
+        Text(
+          t.staff_authentication.common.contact_support,
+          style: UiTypography.body2b.textLink,
+        ),
+      ],
+    );
+  }
+}

apps/mobile/packages/features/staff/authentication/lib/src/presentation/widgets/common/section_title_subtitle.dart

@@ -0,0 +1,32 @@
+import 'package:design_system/design_system.dart';
+import 'package:flutter/material.dart';
+
+/// A widget for displaying a section title and subtitle
+class SectionTitleSubtitle extends StatelessWidget {
+  /// The title of the section
+  final String title;
+
+  /// The subtitle of the section
+  final String subtitle;
+
+  const SectionTitleSubtitle({
+    super.key,
+    required this.title,
+    required this.subtitle,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      spacing: UiConstants.space1,
+      children: [
+        // Title
+        Text(title, style: UiTypography.headline1m),
+
+        // Subtitle
+        Text(subtitle, style: UiTypography.body2r.textSecondary),
+      ],
+    );
+  }
+}

apps/mobile/packages/features/staff/authentication/lib/src/presentation/widgets/get_started_page/get_started_actions.dart

@@ -0,0 +1,42 @@
+import 'package:design_system/design_system.dart';
+import 'package:flutter/material.dart';
+import 'package:staff_authentication/staff_authentication.dart';
+
+/// A widget that displays the primary action buttons (Sign Up and Log In)
+/// for the Get Started page.
+class GetStartedActions extends StatelessWidget {
+  /// Void callback for when the Sign Up button is pressed.
+  final VoidCallback onSignUpPressed;
+
+  /// Void callback for when the Log In button is pressed.
+  final VoidCallback onLoginPressed;
+
+  /// Creates a [GetStartedActions].
+  const GetStartedActions({
+    super.key,
+    required this.onSignUpPressed,
+    required this.onLoginPressed,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.stretch,
+      children: [
+        // Sign Up Button
+        UiButton.primary(
+          text: t.staff_authentication.get_started_page.sign_up_button,
+          onPressed: onSignUpPressed,
+        ),
+
+        const SizedBox(height: 12),
+
+        // Log In Button
+        UiButton.secondary(
+          text: t.staff_authentication.get_started_page.log_in_button,
+          onPressed: onLoginPressed,
+        ),
+      ],
+    );
+  }
+}

apps/mobile/packages/features/staff/authentication/lib/src/presentation/widgets/get_started_page/get_started_background.dart

@@ -0,0 +1,51 @@
+import 'package:design_system/design_system.dart';
+import 'package:flutter/material.dart';
+
+/// A widget that displays the background for the Get Started page.
+class GetStartedBackground extends StatelessWidget {
+  /// Creates a [GetStartedBackground].
+  const GetStartedBackground({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.only(top: 24.0),
+      child: Column(
+        children: [
+          // Logo
+          Image.asset(UiImageAssets.logoBlue, height: 40),
+
+          Expanded(
+            child: Column(
+              mainAxisAlignment: MainAxisAlignment.center,
+              children: [
+                // Hero Image
+                Container(
+                  width: 288,
+                  height: 288,
+                  margin: const EdgeInsets.only(bottom: 32),
+                  decoration: BoxDecoration(
+                    shape: BoxShape.circle,
+                    color: UiColors.secondaryForeground.withAlpha(
+                      64,
+                    ), // 0.5 opacity
+                  ),
+                  child: Padding(
+                    padding: const EdgeInsets.all(8.0),
+                    child: ClipOval(
+                      child: Image.network(
+                        'https://images.unsplash.com/photo-1577219491135-ce391730fb2c?w=400&h=400&fit=crop&crop=faces',
+                        fit: BoxFit.cover,
+                      ),
+                    ),
+                  ),
+                ),
+                const SizedBox(height: 32),
+              ],
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}

apps/mobile/packages/features/staff/authentication/lib/src/presentation/widgets/get_started_page/get_started_header.dart

@@ -0,0 +1,39 @@
+import 'package:flutter/material.dart';
+import 'package:design_system/design_system.dart';
+import 'package:staff_authentication/staff_authentication.dart';
+
+/// A widget that displays the welcome text and description on the Get Started page.
+class GetStartedHeader extends StatelessWidget {
+  /// Creates a [GetStartedHeader].
+  const GetStartedHeader({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.stretch,
+      children: [
+        RichText(
+          textAlign: TextAlign.center,
+          text: TextSpan(
+            style: UiTypography.displayM,
+            children: [
+              TextSpan(
+                text: t.staff_authentication.get_started_page.title_part1,
+              ),
+              TextSpan(
+                text: t.staff_authentication.get_started_page.title_part2,
+                style: UiTypography.displayMb.textLink,
+              ),
+            ],
+          ),
+        ),
+        const SizedBox(height: 16),
+        Text(
+          t.staff_authentication.get_started_page.subtitle,
+          textAlign: TextAlign.center,
+          style: UiTypography.body1r.textSecondary,
+        ),
+      ],
+    );
+  }
+}

apps/mobile/packages/features/staff/authentication/lib/src/presentation/widgets/phone_verification_page/otp_verification.dart

@@ -0,0 +1,65 @@
+import 'package:design_system/design_system.dart';
+import 'package:flutter/material.dart';
+import 'package:staff_authentication/src/presentation/blocs/auth_state.dart';
+import 'otp_verification/otp_input_field.dart';
+import 'otp_verification/otp_resend_section.dart';
+import 'otp_verification/otp_verification_actions.dart';
+import 'otp_verification/otp_verification_header.dart';
+
+/// A widget that displays the OTP verification UI.
+class OtpVerification extends StatelessWidget {
+  /// The current state of the authentication process.
+  final AuthState state;
+
+  /// Callback for when the OTP is submitted.
+  final ValueChanged<String> onOtpSubmitted;
+
+  /// Callback for when a new code is requested.
+  final VoidCallback onResend;
+
+  /// Callback for the "Continue" action.
+  final VoidCallback onContinue;
+
+  /// Creates an [OtpVerification].
+  const OtpVerification({
+    super.key,
+    required this.state,
+    required this.onOtpSubmitted,
+    required this.onResend,
+    required this.onContinue,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      children: [
+        Expanded(
+          child: SingleChildScrollView(
+            padding: const EdgeInsets.symmetric(
+              horizontal: UiConstants.space6,
+              vertical: UiConstants.space8,
+            ),
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                OtpVerificationHeader(phoneNumber: state.phoneNumber),
+                const SizedBox(height: UiConstants.space8),
+                OtpInputField(
+                  error: state.errorMessage ?? '',
+                  onCompleted: onOtpSubmitted,
+                ),
+                const SizedBox(height: UiConstants.space6),
+                OtpResendSection(onResend: onResend, hasError: state.hasError),
+              ],
+            ),
+          ),
+        ),
+        OtpVerificationActions(
+          isLoading: state.isLoading,
+          canSubmit: state.otp.length == 6,
+          onContinue: onContinue,
+        ),
+      ],
+    );
+  }
+}