initalizing the mobile apps

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

@@ -0,0 +1,63 @@
+library client_authentication;
+
+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(dataSource: i.get<AuthRepositoryMock>()),
+    );
+
+    // 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/packages/features/client/authentication/lib/src/data/repositories_impl/auth_repository_impl.dart

@@ -0,0 +1,43 @@
+import 'package:krow_data_connect/krow_data_connect.dart';
+import 'package:krow_domain/krow_domain.dart';
+
+import '../../domain/repositories/auth_repository_interface.dart';
+
+/// Production-ready implementation of the [AuthRepositoryInterface].
+///
+/// This implementation integrates with the [krow_data_connect] package to provide
+/// authentication services. It delegates actual data operations to the
+/// [AuthRepositoryMock] (or eventually the real implementation) injected from the app layer.
+class AuthRepositoryImpl implements AuthRepositoryInterface {
+  /// The data source used for authentication operations.
+  final AuthRepositoryMock _dataSource;
+
+  /// Creates an [AuthRepositoryImpl] with the injected [dataSource] dependency.
+  AuthRepositoryImpl({required AuthRepositoryMock dataSource})
+    : _dataSource = dataSource;
+
+  @override
+  Future<User> signInWithEmail({
+    required String email,
+    required String password,
+  }) {
+    return _dataSource.signInWithEmail(email, password);
+  }
+
+  @override
+  Future<User> signUpWithEmail({
+    required String companyName,
+    required String email,
+    required String password,
+  }) {
+    return _dataSource.signUpWithEmail(email, password, companyName);
+  }
+
+  @override
+  Future<User> signInWithSocial({required String provider}) {
+    return _dataSource.signInWithSocial(provider);
+  }
+
+  @override
+  Future<void> signOut() => _dataSource.signOut();
+}

apps/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/packages/features/client/authentication/pubspec.yaml

@@ -0,0 +1,32 @@
+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
+  
+  # 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/packages/features/client/home/lib/client_home.dart

@@ -0,0 +1,35 @@
+library client_home;
+
+import 'package:flutter_modular/flutter_modular.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.
+class ClientHomeModule extends Module {
+  @override
+  void binds(Injector i) {
+    // Repositories
+    i.addLazySingleton<HomeRepositoryInterface>(HomeRepositoryImpl.new);
+
+    // UseCases
+    i.addLazySingleton(GetDashboardDataUseCase.new);
+
+    // BLoCs
+    i.add<ClientHomeBloc>(
+      () => ClientHomeBloc(
+        getDashboardDataUseCase: i.get<GetDashboardDataUseCase>(),
+      ),
+    );
+  }
+
+  @override
+  void routes(r) {
+    r.child('/', child: (_) => const ClientHomePage());
+  }
+}

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

@@ -0,0 +1,19 @@
+import '../../domain/repositories/home_repository_interface.dart';
+
+/// Mock implementation of [HomeRepositoryInterface].
+class HomeRepositoryImpl implements HomeRepositoryInterface {
+  @override
+  Future<Map<String, dynamic>> getDashboardData() async {
+    // Simulate network delay
+    await Future.delayed(const Duration(milliseconds: 500));
+
+    return {
+      'weeklySpending': 4250.0,
+      'next7DaysSpending': 6100.0,
+      'weeklyShifts': 12,
+      'next7DaysScheduled': 18,
+      'totalNeeded': 10,
+      'totalFilled': 8,
+    };
+  }
+}

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

@@ -0,0 +1,5 @@
+/// Interface for the Client Home repository.
+abstract class HomeRepositoryInterface {
+  /// Fetches dashboard data.
+  Future<Map<String, dynamic>> getDashboardData();
+}

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

@@ -0,0 +1,14 @@
+import '../repositories/home_repository_interface.dart';
+
+/// Use case to fetch dashboard data for the client home screen.
+class GetDashboardDataUseCase {
+  final HomeRepositoryInterface _repository;
+
+  /// Creates a [GetDashboardDataUseCase].
+  const GetDashboardDataUseCase(this._repository);
+
+  /// Executes the use case.
+  Future<Map<String, dynamic>> call() {
+    return _repository.getDashboardData();
+  }
+}

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

@@ -0,0 +1,104 @@
+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 to manage Client Home dashboard state.
+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,
+          weeklySpending: data['weeklySpending'] as double?,
+          next7DaysSpending: data['next7DaysSpending'] as double?,
+          weeklyShifts: data['weeklyShifts'] as int?,
+          next7DaysScheduled: data['next7DaysScheduled'] as int?,
+          totalNeeded: data['totalNeeded'] as int?,
+          totalFilled: data['totalFilled'] as int?,
+        ),
+      );
+    } 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/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/packages/features/client/home/lib/src/presentation/blocs/client_home_state.dart

@@ -0,0 +1,88 @@
+import 'package:equatable/equatable.dart';
+
+enum ClientHomeStatus { initial, loading, success, error }
+
+class ClientHomeState extends Equatable {
+  final ClientHomeStatus status;
+  final List<String> widgetOrder;
+  final Map<String, bool> widgetVisibility;
+  final bool isEditMode;
+  final String? errorMessage;
+
+  // Dashboard Data (Mocked for now)
+  final double weeklySpending;
+  final double next7DaysSpending;
+  final int weeklyShifts;
+  final int next7DaysScheduled;
+  final int totalNeeded;
+  final int totalFilled;
+
+  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.weeklySpending = 4250.0,
+    this.next7DaysSpending = 6100.0,
+    this.weeklyShifts = 12,
+    this.next7DaysScheduled = 18,
+    this.totalNeeded = 10,
+    this.totalFilled = 8,
+  });
+
+  ClientHomeState copyWith({
+    ClientHomeStatus? status,
+    List<String>? widgetOrder,
+    Map<String, bool>? widgetVisibility,
+    bool? isEditMode,
+    String? errorMessage,
+    double? weeklySpending,
+    double? next7DaysSpending,
+    int? weeklyShifts,
+    int? next7DaysScheduled,
+    int? totalNeeded,
+    int? totalFilled,
+  }) {
+    return ClientHomeState(
+      status: status ?? this.status,
+      widgetOrder: widgetOrder ?? this.widgetOrder,
+      widgetVisibility: widgetVisibility ?? this.widgetVisibility,
+      isEditMode: isEditMode ?? this.isEditMode,
+      errorMessage: errorMessage ?? this.errorMessage,
+      weeklySpending: weeklySpending ?? this.weeklySpending,
+      next7DaysSpending: next7DaysSpending ?? this.next7DaysSpending,
+      weeklyShifts: weeklyShifts ?? this.weeklyShifts,
+      next7DaysScheduled: next7DaysScheduled ?? this.next7DaysScheduled,
+      totalNeeded: totalNeeded ?? this.totalNeeded,
+      totalFilled: totalFilled ?? this.totalFilled,
+    );
+  }
+
+  @override
+  List<Object?> get props => [
+    status,
+    widgetOrder,
+    widgetVisibility,
+    isEditMode,
+    errorMessage,
+    weeklySpending,
+    next7DaysSpending,
+    weeklyShifts,
+    next7DaysScheduled,
+    totalNeeded,
+    totalFilled,
+  ];
+}

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

@@ -0,0 +1,10 @@
+import 'package:flutter_modular/flutter_modular.dart';
+
+/// Navigation extension for the Client Home feature.
+extension ClientHomeNavigator on IModularNavigator {
+  /// Navigates to the Client Home page.
+  void navigateClientHome() => navigate('/client-home/');
+
+  /// Pushes the Client Home page.
+  Future<void> pushClientHome() => pushNamed('/client-home/');
+}

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

@@ -0,0 +1,432 @@
+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 '../widgets/actions_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 StatefulWidget {
+  /// Creates a [ClientHomePage].
+  const ClientHomePage({super.key});
+
+  @override
+  State<ClientHomePage> createState() => _ClientHomePageState();
+}
+
+class _ClientHomePageState extends State<ClientHomePage> {
+  late final ClientHomeBloc _homeBloc;
+
+  @override
+  void initState() {
+    super.initState();
+    _homeBloc = Modular.get<ClientHomeBloc>()..add(ClientHomeStarted());
+  }
+
+  @override
+  void dispose() {
+    _homeBloc.close();
+    super.dispose();
+  }
+
+  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.value(
+      value: _homeBloc,
+      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) {
+                          _homeBloc.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 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.withOpacity(0.2),
+                    width: 2,
+                  ),
+                ),
+                child: CircleAvatar(
+                  backgroundColor: UiColors.primary.withOpacity(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: _homeBloc.state.isEditMode,
+                onTap: () => _homeBloc.add(ClientHomeEditModeToggled()),
+              ),
+              const SizedBox(width: UiConstants.space2),
+              _HeaderIconButton(
+                icon: UiIcons.bell,
+                badgeText: '3',
+                onTap: () {},
+              ),
+              const SizedBox(width: UiConstants.space2),
+              _HeaderIconButton(icon: UiIcons.settings, onTap: () {}),
+            ],
+          ),
+        ],
+      ),
+    );
+  }
+
+  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.withOpacity(0.1),
+            border: Border.all(color: UiColors.primary.withOpacity(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: () => _homeBloc.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: () => _homeBloc.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),
+        );
+      case 'reorder':
+        return ReorderWidget(
+          onReorderPressed: (data) => _openOrderFormSheet(context, data),
+        );
+      case 'spending':
+        return SpendingWidget(
+          weeklySpending: state.weeklySpending,
+          next7DaysSpending: state.next7DaysSpending,
+          weeklyShifts: state.weeklyShifts,
+          next7DaysScheduled: state.next7DaysScheduled,
+        );
+      case 'coverage':
+      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.withOpacity(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/packages/features/client/home/lib/src/presentation/widgets/actions_widget.dart

@@ -0,0 +1,127 @@
+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;
+
+  /// Creates an [ActionsWidget].
+  const ActionsWidget({
+    super.key,
+    required this.onRapidPressed,
+    required this.onCreateOrderPressed,
+  });
+
+  @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,
+          ),
+        ),
+      ],
+    );
+  }
+}
+
+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.withOpacity(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/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.withOpacity(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.withOpacity(0.8),
+                  ),
+                  overflow: TextOverflow.ellipsis,
+                ),
+              ),
+            ],
+          ),
+          const SizedBox(height: UiConstants.space1),
+          Text(
+            value,
+            style: UiTypography.headline3m.copyWith(color: textColor),
+          ),
+        ],
+      ),
+    );
+  }
+}

apps/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/packages/features/client/home/lib/src/presentation/widgets/reorder_widget.dart

@@ -0,0 +1,231 @@
+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.withOpacity(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.withOpacity(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/packages/features/client/home/lib/src/presentation/widgets/shift_order_form_sheet.dart

@@ -0,0 +1,436 @@
+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>(
+              value: 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/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.withOpacity(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.withOpacity(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.withOpacity(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.withOpacity(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.withOpacity(0.8),
+                              fontSize: 9,
+                            ),
+                          ),
+                        ],
+                      ),
+                    ),
+                  ],
+                ),
+              ),
+            ],
+          ),
+        ),
+      ],
+    );
+  }
+}

apps/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/packages/features/shared/template_feature/feature_manifest.md

@@ -0,0 +1,29 @@
+# Feature Manifest: Template Feature
+
+## Overview
+**Feature Name:** Template Feature
+**Package Path:** `packages/features/shared/template_feature`
+**Owner:** [Team Name/Agent]
+
+## Responsibilities
+*   Describe what this feature does.
+*   Describe what this feature does NOT do.
+
+## Architecture
+*   **Domain**:
+    *   `TemplateEntity` (imported from `krow_domain`)
+    *   `TemplateRepositoryInterface`
+*   **Data**:
+    *   `TemplateRepositoryImpl` (uses `krow_data_connect`)
+*   **Presentation**:
+    *   `TemplatePage`
+    *   `TemplateBloc`
+
+## Dependencies
+*   `krow_domain`: For entities.
+*   `krow_data_connect`: For backend mocking/access.
+*   `design_system`: For UI components.
+
+## Routes
+*   `/`: Main template page.
+*   `/:id`: Detail page (example).

apps/packages/features/shared/template_feature/lib/src/data/repositories_impl/template_repository_impl.dart

@@ -0,0 +1,20 @@
+import 'package:krow_data_connect/krow_data_connect.dart';
+import 'package:krow_domain/krow_domain.dart';
+import '../../domain/repositories/template_repository_interface.dart';
+
+class TemplateRepositoryImpl implements TemplateRepositoryInterface {
+  // In a real scenario, you might inject a specific DataSource here.
+  // For now, we can use the static/singleton mocks from krow_data_connect or inject them.
+  final AuthRepositoryMock _authMock;
+
+  TemplateRepositoryImpl({AuthRepositoryMock? authMock}) 
+      : _authMock = authMock ?? AuthRepositoryMock();
+
+  @override
+  Future<User?> getData() async {
+    // Mapping from DataConnect models to Domain models happens here if needed.
+    // For the mock stage, we just return the entity.
+    final result = await _authMock.currentUser.first;
+    return result;
+  }
+}

apps/packages/features/shared/template_feature/lib/src/domain/repositories/template_repository_interface.dart

@@ -0,0 +1,7 @@
+import 'package:krow_domain/krow_domain.dart';
+
+/// Abstract interface for data access.
+/// Must be implemented in the Data layer.
+abstract interface class TemplateRepositoryInterface {
+  Future<User?> getData();
+}

apps/packages/features/shared/template_feature/lib/src/domain/usecases/get_template_data_usecase.dart

@@ -0,0 +1,13 @@
+import 'package:krow_core/krow_core.dart'; // Assuming Result/UseCases might be here later
+import 'package:krow_domain/krow_domain.dart';
+import '../repositories/template_repository_interface.dart';
+
+class GetTemplateDataUseCase {
+  final TemplateRepositoryInterface _repository;
+
+  GetTemplateDataUseCase(this._repository);
+
+  Future<User?> call() async {
+    return _repository.getData();
+  }
+}

apps/packages/features/shared/template_feature/lib/src/presentation/blocs/template_bloc.dart

@@ -0,0 +1,60 @@
+import 'package:bloc/bloc.dart';
+import 'package:equatable/equatable.dart';
+import 'package:krow_domain/krow_domain.dart';
+import '../../domain/usecases/get_template_data_usecase.dart';
+
+// Events
+abstract class TemplateEvent extends Equatable {
+  const TemplateEvent();
+  @override
+  List<Object> get props => [];
+}
+
+class TemplateStarted extends TemplateEvent {}
+
+// States
+abstract class TemplateState extends Equatable {
+  const TemplateState();
+  @override
+  List<Object?> get props => [];
+}
+
+class TemplateInitial extends TemplateState {}
+class TemplateLoading extends TemplateState {}
+class TemplateLoaded extends TemplateState {
+  final User user;
+  const TemplateLoaded(this.user);
+  @override
+  List<Object?> get props => [user];
+}
+class TemplateError extends TemplateState {
+  final String message;
+  const TemplateError(this.message);
+  @override
+  List<Object?> get props => [message];
+}
+
+// BLoC
+class TemplateBloc extends Bloc<TemplateEvent, TemplateState> {
+  final GetTemplateDataUseCase _getDataUseCase;
+
+  TemplateBloc({required GetTemplateDataUseCase getDataUseCase})
+      : _getDataUseCase = getDataUseCase,
+        super(TemplateInitial()) {
+    on<TemplateStarted>(_onStarted);
+  }
+
+  Future<void> _onStarted(TemplateStarted event, Emitter<TemplateState> emit) async {
+    emit(TemplateLoading());
+    try {
+      final user = await _getDataUseCase();
+      if (user != null) {
+        emit(TemplateLoaded(user));
+      } else {
+        emit(const TemplateError('No data found'));
+      }
+    } catch (e) {
+      emit(TemplateError(e.toString()));
+    }
+  }
+}

apps/packages/features/shared/template_feature/lib/src/presentation/pages/template_page.dart

@@ -0,0 +1,31 @@
+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 Design System
+import '../blocs/template_bloc.dart';
+
+class TemplatePage extends StatelessWidget {
+  const TemplatePage({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return BlocProvider(
+      create: (_) => Modular.get<TemplateBloc>()..add(TemplateStarted()),
+      child: Scaffold(
+        appBar: AppBar(title: const Text('Template Feature')),
+        body: BlocBuilder<TemplateBloc, TemplateState>(
+          builder: (context, state) {
+            if (state is TemplateLoading) {
+              return const Center(child: CircularProgressIndicator());
+            } else if (state is TemplateLoaded) {
+              return Center(child: Text('User: ${state.user.email}'));
+            } else if (state is TemplateError) {
+              return Center(child: Text('Error: ${state.message}'));
+            }
+            return const Center(child: Text('Welcome'));
+          },
+        ),
+      ),
+    );
+  }
+}

apps/packages/features/shared/template_feature/lib/template_feature.dart

@@ -0,0 +1,29 @@
+library template_feature;
+
+import 'package:flutter_modular/flutter_modular.dart';
+import 'src/data/repositories_impl/template_repository_impl.dart';
+import 'src/domain/repositories/template_repository_interface.dart';
+import 'src/domain/usecases/get_template_data_usecase.dart';
+import 'src/presentation/blocs/template_bloc.dart';
+import 'src/presentation/pages/template_page.dart';
+
+export 'src/presentation/pages/template_page.dart';
+
+class TemplateFeatureModule extends Module {
+  @override
+  void binds(Injector i) {
+    // 1. Repositories
+    i.add<TemplateRepositoryInterface>(TemplateRepositoryImpl.new);
+    
+    // 2. Use Cases
+    i.add(GetTemplateDataUseCase.new);
+    
+    // 3. BLoCs
+    i.add(TemplateBloc.new);
+  }
+
+  @override
+  void routes(r) {
+    r.child('/', child: (_) => const TemplatePage());
+  }
+}

apps/packages/features/shared/template_feature/pubspec.yaml

@@ -0,0 +1,32 @@
+name: template_feature
+description: A template feature package following KROW architecture.
+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
+  
+  # Core Architecture
+  krow_domain:
+    path: ../../../domain
+  krow_data_connect:
+    path: ../../../data_connect
+  krow_core:
+    path: ../../../core
+  design_system:
+    path: ../../../design_system
+
+dev_dependencies:
+  flutter_test:
+    sdk: flutter
+  bloc_test: ^9.1.0
+  mocktail: ^1.0.0

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

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

@@ -0,0 +1,127 @@
+import 'package:design_system/design_system.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import '../../../blocs/auth_event.dart';
+import '../../../blocs/auth_bloc.dart';
+
+/// A widget that displays a 6-digit OTP input field.
+///
+/// This widget handles its own internal [TextEditingController]s and focus nodes.
+/// It dispatches [AuthOtpUpdated] to the [AuthBloc] on every change.
+class OtpInputField extends StatefulWidget {
+  /// Callback for when the OTP code is fully entered (6 digits).
+  final ValueChanged<String> onCompleted;
+
+  /// The error message to display, if any.
+  final String error;
+
+  /// Creates an [OtpInputField].
+  const OtpInputField({
+    super.key,
+    required this.onCompleted,
+    required this.error,
+  });
+
+  @override
+  State<OtpInputField> createState() => _OtpInputFieldState();
+}
+
+class _OtpInputFieldState extends State<OtpInputField> {
+  final List<TextEditingController> _controllers = List.generate(
+    6,
+    (_) => TextEditingController(),
+  );
+  final List<FocusNode> _focusNodes = List.generate(6, (_) => FocusNode());
+
+  @override
+  void dispose() {
+    for (final controller in _controllers) {
+      controller.dispose();
+    }
+    for (final node in _focusNodes) {
+      node.dispose();
+    }
+    super.dispose();
+  }
+
+  /// Helper getter to compute the current OTP code from all controllers.
+  String get _otpCode => _controllers.map((c) => c.text).join();
+
+  /// Handles changes to the OTP input fields.
+  void _onChanged({
+    required BuildContext context,
+    required int index,
+    required String value,
+  }) {
+    if (value.length == 1 && index < 5) {
+      _focusNodes[index + 1].requestFocus();
+    }
+
+    // Notify the Bloc of the change
+    BlocProvider.of<AuthBloc>(context).add(AuthOtpUpdated(_otpCode));
+
+    if (_otpCode.length == 6) {
+      widget.onCompleted(_otpCode);
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      children: [
+        Row(
+          mainAxisAlignment: MainAxisAlignment.spaceBetween,
+          children: List.generate(6, (index) {
+            return SizedBox(
+              width: 56,
+              height: 56,
+              child: TextField(
+                controller: _controllers[index],
+                focusNode: _focusNodes[index],
+                keyboardType: TextInputType.number,
+                inputFormatters: [FilteringTextInputFormatter.digitsOnly],
+                textAlign: TextAlign.center,
+                maxLength: 1,
+                style: UiTypography.headline3m,
+                decoration: InputDecoration(
+                  counterText: '',
+                  border: OutlineInputBorder(
+                    borderSide: BorderSide(
+                      color: widget.error.isNotEmpty
+                          ? UiColors.textError
+                          : (_controllers[index].text.isNotEmpty
+                                ? UiColors.primary
+                                : UiColors.border),
+                      width: 2,
+                    ),
+                  ),
+                  enabledBorder: OutlineInputBorder(
+                    borderRadius: UiConstants.radiusMd,
+                    borderSide: BorderSide(
+                      color: widget.error.isNotEmpty
+                          ? UiColors.textError
+                          : (_controllers[index].text.isNotEmpty
+                                ? UiColors.primary
+                                : UiColors.border),
+                      width: 2,
+                    ),
+                  ),
+                ),
+                onChanged: (value) =>
+                    _onChanged(context: context, index: index, value: value),
+              ),
+            );
+          }),
+        ),
+        if (widget.error.isNotEmpty)
+          Padding(
+            padding: const EdgeInsets.only(top: UiConstants.space4),
+            child: Center(
+              child: Text(widget.error, style: UiTypography.body2r.textError),
+            ),
+          ),
+      ],
+    );
+  }
+}

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

@@ -0,0 +1,75 @@
+import 'package:design_system/design_system.dart';
+import 'package:flutter/material.dart';
+import 'package:staff_authentication/staff_authentication.dart';
+
+/// A widget that handles the OTP resend logic and countdown timer.
+class OtpResendSection extends StatefulWidget {
+  /// Callback for when the resend link is pressed.
+  final VoidCallback onResend;
+
+  /// Whether an error is currently displayed. (Used for layout tweaks in the original code)
+  final bool hasError;
+
+  /// Creates an [OtpResendSection].
+  const OtpResendSection({
+    super.key,
+    required this.onResend,
+    this.hasError = false,
+  });
+
+  @override
+  State<OtpResendSection> createState() => _OtpResendSectionState();
+}
+
+class _OtpResendSectionState extends State<OtpResendSection> {
+  int _countdown = 30;
+
+  @override
+  void initState() {
+    super.initState();
+    _startCountdown();
+  }
+
+  /// Starts the countdown timer.
+  void _startCountdown() {
+    Future.delayed(const Duration(seconds: 1), () {
+      if (mounted && _countdown > 0) {
+        setState(() => _countdown--);
+        _startCountdown();
+      }
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Center(
+      child: Text.rich(
+        TextSpan(
+          children: [
+            TextSpan(
+              text: widget.hasError
+                  ? ''
+                  : '${t.staff_authentication.otp_verification.did_not_get_code}  ',
+              style: UiTypography.body2r.textSecondary,
+            ),
+            WidgetSpan(
+              child: GestureDetector(
+                onTap: _countdown > 0 ? null : widget.onResend,
+                child: Text(
+                  _countdown > 0
+                      ? t.staff_authentication.otp_verification.resend_in(
+                          seconds: _countdown.toString(),
+                        )
+                      : t.staff_authentication.otp_verification.resend_code,
+                  style: (_countdown > 0
+                      ? UiTypography.body2r.textSecondary
+                      : UiTypography.body2b.textPrimary),
+                ),
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

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

@@ -0,0 +1,56 @@
+import 'package:design_system/design_system.dart';
+import 'package:flutter/material.dart';
+import 'package:staff_authentication/staff_authentication.dart';
+import '../../common/auth_trouble_link.dart';
+
+/// A widget that displays the primary action button and trouble link for OTP verification.
+class OtpVerificationActions extends StatelessWidget {
+  /// Whether the verification process is currently loading.
+  final bool isLoading;
+
+  /// Whether the submit button should be enabled.
+  final bool canSubmit;
+
+  /// Callback for when the Continue button is pressed.
+  final VoidCallback? onContinue;
+
+  /// Creates an [OtpVerificationActions].
+  const OtpVerificationActions({
+    super.key,
+    required this.isLoading,
+    required this.canSubmit,
+    this.onContinue,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: const EdgeInsets.all(UiConstants.space6),
+      decoration: const BoxDecoration(
+        border: Border(
+          top: BorderSide(color: UiColors.separatorSecondary, width: 1),
+        ),
+      ),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.stretch,
+        children: [
+          isLoading
+              ? ElevatedButton(
+                  onPressed: null,
+                  child: const SizedBox(
+                    width: 20,
+                    height: 20,
+                    child: CircularProgressIndicator(strokeWidth: 2),
+                  ),
+                )
+              : UiButton.primary(
+                  text: t.common.continue_text,
+                  onPressed: canSubmit ? onContinue : null,
+                ),
+          const SizedBox(height: UiConstants.space4),
+          const AuthTroubleLink(),
+        ],
+      ),
+    );
+  }
+}

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

@@ -0,0 +1,44 @@
+import 'package:design_system/design_system.dart';
+import 'package:flutter/material.dart';
+import 'package:staff_authentication/staff_authentication.dart';
+
+/// A widget that displays the title and subtitle for the OTP Verification page.
+class OtpVerificationHeader extends StatelessWidget {
+  /// The phone number to which the code was sent.
+  final String phoneNumber;
+
+  /// Creates an [OtpVerificationHeader].
+  const OtpVerificationHeader({super.key, required this.phoneNumber});
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Text(
+          t.staff_authentication.phone_verification_page.enter_code_title,
+          style: UiTypography.headline1m,
+        ),
+        const SizedBox(height: UiConstants.space2),
+        Text.rich(
+          TextSpan(
+            text: t
+                .staff_authentication
+                .phone_verification_page
+                .code_sent_message,
+            style: UiTypography.body2r.textSecondary,
+            children: [
+              TextSpan(text: '+1 $phoneNumber', style: UiTypography.body2b),
+              TextSpan(
+                text: t
+                    .staff_authentication
+                    .phone_verification_page
+                    .code_sent_instruction,
+              ),
+            ],
+          ),
+        ),
+      ],
+    );
+  }
+}

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

@@ -0,0 +1,54 @@
+import 'package:design_system/design_system.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:staff_authentication/src/presentation/blocs/auth_bloc.dart';
+import 'package:staff_authentication/src/presentation/blocs/auth_event.dart';
+import 'package:staff_authentication/src/presentation/blocs/auth_state.dart';
+import 'phone_input/phone_input_actions.dart';
+import 'phone_input/phone_input_form_field.dart';
+import 'phone_input/phone_input_header.dart';
+
+/// A widget that displays the phone number entry UI.
+class PhoneInput extends StatelessWidget {
+  /// The current state of the authentication process.
+  final AuthState state;
+
+  /// Callback for when the "Send Code" action is triggered.
+  final VoidCallback onSendCode;
+
+  /// Creates a [PhoneInput].
+  const PhoneInput({super.key, required this.state, required this.onSendCode});
+
+  @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: [
+                const PhoneInputHeader(),
+                const SizedBox(height: UiConstants.space8),
+                PhoneInputFormField(
+                  initialValue: state.phoneNumber,
+                  error: state.errorMessage ?? '',
+                  onChanged: (value) {
+                    BlocProvider.of<AuthBloc>(
+                      context,
+                    ).add(AuthPhoneUpdated(value));
+                  },
+                ),
+              ],
+            ),
+          ),
+        ),
+        PhoneInputActions(isLoading: state.isLoading, onSendCode: onSendCode),
+      ],
+    );
+  }
+}

apps/packages/features/staff/authentication/lib/src/presentation/widgets/phone_verification_page/phone_input/phone_input_actions.dart

@@ -0,0 +1,53 @@
+import 'package:design_system/design_system.dart';
+import 'package:flutter/material.dart';
+import 'package:staff_authentication/src/presentation/widgets/common/auth_trouble_link.dart';
+import 'package:staff_authentication/staff_authentication.dart';
+
+/// A widget that displays the primary action button and trouble link for Phone Input.
+class PhoneInputActions extends StatelessWidget {
+  /// Whether the sign-in process is currently loading.
+  final bool isLoading;
+
+  /// Callback for when the Send Code button is pressed.
+  final VoidCallback? onSendCode;
+
+  /// Creates a [PhoneInputActions].
+  const PhoneInputActions({
+    super.key,
+    required this.isLoading,
+    this.onSendCode,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: const EdgeInsets.all(UiConstants.space6),
+      decoration: const BoxDecoration(
+        border: Border(top: BorderSide(color: UiColors.separatorSecondary)),
+      ),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.stretch,
+        children: [
+          isLoading
+              ? UiButton.secondary(
+                  onPressed: null,
+                  child: const SizedBox(
+                    width: 20,
+                    height: 20,
+                    child: CircularProgressIndicator(strokeWidth: 2),
+                  ),
+                )
+              : UiButton.primary(
+                  text: t
+                      .staff_authentication
+                      .phone_verification_page
+                      .send_code_button,
+                  onPressed: onSendCode,
+                ),
+          const SizedBox(height: UiConstants.space4),
+          const AuthTroubleLink(),
+        ],
+      ),
+    );
+  }
+}

apps/packages/features/staff/authentication/lib/src/presentation/widgets/phone_verification_page/phone_input/phone_input_form_field.dart

@@ -0,0 +1,96 @@
+import 'package:design_system/design_system.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:staff_authentication/staff_authentication.dart';
+
+/// A widget that displays the phone number input field with country code.
+///
+/// This widget handles its own [TextEditingController] to manage input.
+class PhoneInputFormField extends StatefulWidget {
+  /// The initial value for the phone number.
+  final String initialValue;
+
+  /// The error message to display, if any.
+  final String error;
+
+  /// Callback for when the text field value changes.
+  final ValueChanged<String> onChanged;
+
+  /// Creates a [PhoneInputFormField].
+  const PhoneInputFormField({
+    super.key,
+    this.initialValue = '',
+    required this.error,
+    required this.onChanged,
+  });
+
+  @override
+  State<PhoneInputFormField> createState() => _PhoneInputFormFieldState();
+}
+
+class _PhoneInputFormFieldState extends State<PhoneInputFormField> {
+  late final TextEditingController _controller;
+
+  @override
+  void initState() {
+    super.initState();
+    _controller = TextEditingController(text: widget.initialValue);
+  }
+
+  @override
+  void dispose() {
+    _controller.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Text(
+          t.staff_authentication.phone_input.label,
+          style: UiTypography.footnote1m.textSecondary,
+        ),
+        const SizedBox(height: UiConstants.space2),
+        Row(
+          children: [
+            Container(
+              width: 100,
+              height: 48,
+              alignment: Alignment.center,
+              child: Row(
+                mainAxisAlignment: MainAxisAlignment.center,
+                children: [
+                  Text('🇺🇸', style: UiTypography.headline2m),
+                  const SizedBox(width: UiConstants.space1),
+                  Text('+1', style: UiTypography.body1m),
+                ],
+              ),
+            ),
+            const SizedBox(width: UiConstants.space2),
+            Expanded(
+              child: TextField(
+                controller: _controller,
+                keyboardType: TextInputType.phone,
+                inputFormatters: [
+                  FilteringTextInputFormatter.digitsOnly,
+                  LengthLimitingTextInputFormatter(10),
+                ],
+                decoration: InputDecoration(
+                  hintText: t.staff_authentication.phone_input.hint,
+                ),
+                onChanged: widget.onChanged,
+              ),
+            ),
+          ],
+        ),
+        if (widget.error.isNotEmpty)
+          Padding(
+            padding: const EdgeInsets.only(top: UiConstants.space2),
+            child: Text(widget.error, style: UiTypography.body2r.textError),
+          ),
+      ],
+    );
+  }
+}

apps/packages/features/staff/authentication/lib/src/presentation/widgets/phone_verification_page/phone_input/phone_input_header.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 widget that displays the title and subtitle for the Phone Input page.
+class PhoneInputHeader extends StatelessWidget {
+  /// Creates a [PhoneInputHeader].
+  const PhoneInputHeader({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Text(
+          t.staff_authentication.phone_input.title,
+          style: UiTypography.headline1m,
+        ),
+        const SizedBox(height: UiConstants.space1),
+        Text(
+          t.staff_authentication.phone_input.subtitle,
+          style: UiTypography.body2r.textSecondary,
+        ),
+      ],
+    );
+  }
+}

apps/packages/features/staff/authentication/lib/src/presentation/widgets/profile_setup_page/profile_setup_basic_info.dart

@@ -0,0 +1,100 @@
+import 'package:design_system/design_system.dart';
+import 'package:flutter/material.dart';
+import 'package:staff_authentication/src/presentation/widgets/common/section_title_subtitle.dart';
+import 'package:staff_authentication/staff_authentication.dart';
+
+/// A widget for setting up basic profile information (photo, name, bio).
+class ProfileSetupBasicInfo extends StatelessWidget {
+  /// The user's full name.
+  final String fullName;
+
+  /// The user's bio.
+  final String bio;
+
+  /// Callback for when the full name changes.
+  final ValueChanged<String> onFullNameChanged;
+
+  /// Callback for when the bio changes.
+  final ValueChanged<String> onBioChanged;
+
+  /// Creates a [ProfileSetupBasicInfo] widget.
+  const ProfileSetupBasicInfo({
+    super.key,
+    required this.fullName,
+    required this.bio,
+    required this.onFullNameChanged,
+    required this.onBioChanged,
+  });
+
+  @override
+  /// Builds the basic info step UI.
+  Widget build(BuildContext context) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        SectionTitleSubtitle(
+          title: t.staff_authentication.profile_setup_page.basic_info.title,
+          subtitle:
+              t.staff_authentication.profile_setup_page.basic_info.subtitle,
+        ),
+        const SizedBox(height: UiConstants.space8),
+
+        // Photo Upload
+        Center(
+          child: Stack(
+            children: [
+              Container(
+                width: 120,
+                height: 120,
+                decoration: BoxDecoration(
+                  shape: BoxShape.circle,
+                  color: UiColors.secondary,
+                  border: Border.all(
+                    color: UiColors.secondaryForeground.withAlpha(24),
+                    width: 4,
+                  ),
+                ),
+                child: const Icon(
+                  UiIcons.user,
+                  size: 48,
+                  color: UiColors.iconSecondary,
+                ),
+              ),
+              Positioned(
+                bottom: 0,
+                right: 0,
+                child: UiIconButton.secondary(icon: UiIcons.camera),
+              ),
+            ],
+          ),
+        ),
+        const SizedBox(height: UiConstants.space8),
+
+        // Full Name
+        UiTextField(
+          label: t
+              .staff_authentication
+              .profile_setup_page
+              .basic_info
+              .full_name_label,
+          hintText: t
+              .staff_authentication
+              .profile_setup_page
+              .basic_info
+              .full_name_hint,
+          onChanged: onFullNameChanged,
+        ),
+        const SizedBox(height: UiConstants.space6),
+
+        // Bio
+        UiTextField(
+          label: t.staff_authentication.profile_setup_page.basic_info.bio_label,
+          hintText:
+              t.staff_authentication.profile_setup_page.basic_info.bio_hint,
+          maxLines: 3,
+          onChanged: onBioChanged,
+        ),
+      ],
+    );
+  }
+}

apps/packages/features/staff/authentication/lib/src/presentation/widgets/profile_setup_page/profile_setup_experience.dart

@@ -0,0 +1,265 @@
+import 'package:design_system/design_system.dart';
+import 'package:flutter/material.dart';
+import 'package:staff_authentication/src/presentation/widgets/common/section_title_subtitle.dart';
+import 'package:staff_authentication/staff_authentication.dart';
+
+/// A widget for setting up skills and preferred industries.
+class ProfileSetupExperience extends StatelessWidget {
+  /// The list of selected skills.
+  final List<String> skills;
+
+  /// The list of selected industries.
+  final List<String> industries;
+
+  /// Callback for when skills change.
+  final ValueChanged<List<String>> onSkillsChanged;
+
+  /// Callback for when industries change.
+  final ValueChanged<List<String>> onIndustriesChanged;
+
+  static const List<String> _allSkillKeys = [
+    'food_service',
+    'bartending',
+    'warehouse',
+    'retail',
+    'events',
+    'customer_service',
+    'cleaning',
+    'security',
+    'driving',
+    'cooking',
+  ];
+
+  static const List<String> _allIndustryKeys = [
+    'hospitality',
+    'food_service',
+    'warehouse',
+    'events',
+    'retail',
+    'healthcare',
+  ];
+
+  /// Creates a [ProfileSetupExperience] widget.
+  const ProfileSetupExperience({
+    super.key,
+    required this.skills,
+    required this.industries,
+    required this.onSkillsChanged,
+    required this.onIndustriesChanged,
+  });
+
+  /// Toggles a skill.
+  void _toggleSkill({required String skill}) {
+    final updatedList = List<String>.from(skills);
+    if (updatedList.contains(skill)) {
+      updatedList.remove(skill);
+    } else {
+      updatedList.add(skill);
+    }
+    onSkillsChanged(updatedList);
+  }
+
+  /// Toggles an industry.
+  void _toggleIndustry({required String industry}) {
+    final updatedList = List<String>.from(industries);
+    if (updatedList.contains(industry)) {
+      updatedList.remove(industry);
+    } else {
+      updatedList.add(industry);
+    }
+    onIndustriesChanged(updatedList);
+  }
+
+  @override
+  /// Builds the experience setup step UI.
+  Widget build(BuildContext context) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        SectionTitleSubtitle(
+          title: t.staff_authentication.profile_setup_page.experience.title,
+          subtitle:
+              t.staff_authentication.profile_setup_page.experience.subtitle,
+        ),
+        const SizedBox(height: UiConstants.space8),
+
+        // Skills
+        Text(
+          t.staff_authentication.profile_setup_page.experience.skills_label,
+          style: UiTypography.body2m,
+        ),
+        const SizedBox(height: UiConstants.space3),
+        Wrap(
+          spacing: UiConstants.space2,
+          runSpacing: UiConstants.space2,
+          children: _allSkillKeys.map((key) {
+            final isSelected = skills.contains(key);
+            // Dynamic translation access
+            final label = _getSkillLabel(key);
+
+            return UiChip(
+              label: label,
+              isSelected: isSelected,
+              onTap: () => _toggleSkill(skill: key),
+              leadingIcon: isSelected ? UiIcons.check : null,
+              variant: UiChipVariant.primary,
+            );
+          }).toList(),
+        ),
+
+        const SizedBox(height: UiConstants.space8),
+
+        // Industries
+        Text(
+          t.staff_authentication.profile_setup_page.experience.industries_label,
+          style: UiTypography.body2m,
+        ),
+        const SizedBox(height: UiConstants.space3),
+        Wrap(
+          spacing: UiConstants.space2,
+          runSpacing: UiConstants.space2,
+          children: _allIndustryKeys.map((key) {
+            final isSelected = industries.contains(key);
+            final label = _getIndustryLabel(key);
+
+            return UiChip(
+              label: label,
+              isSelected: isSelected,
+              onTap: () => _toggleIndustry(industry: key),
+              leadingIcon: isSelected ? UiIcons.check : null,
+              variant: isSelected
+                  ? UiChipVariant.accent
+                  : UiChipVariant.primary,
+            );
+          }).toList(),
+        ),
+      ],
+    );
+  }
+
+  String _getSkillLabel(String key) {
+    switch (key) {
+      case 'food_service':
+        return t
+            .staff_authentication
+            .profile_setup_page
+            .experience
+            .skills
+            .food_service;
+      case 'bartending':
+        return t
+            .staff_authentication
+            .profile_setup_page
+            .experience
+            .skills
+            .bartending;
+      case 'warehouse':
+        return t
+            .staff_authentication
+            .profile_setup_page
+            .experience
+            .skills
+            .warehouse;
+      case 'retail':
+        return t
+            .staff_authentication
+            .profile_setup_page
+            .experience
+            .skills
+            .retail;
+      case 'events':
+        return t
+            .staff_authentication
+            .profile_setup_page
+            .experience
+            .skills
+            .events;
+      case 'customer_service':
+        return t
+            .staff_authentication
+            .profile_setup_page
+            .experience
+            .skills
+            .customer_service;
+      case 'cleaning':
+        return t
+            .staff_authentication
+            .profile_setup_page
+            .experience
+            .skills
+            .cleaning;
+      case 'security':
+        return t
+            .staff_authentication
+            .profile_setup_page
+            .experience
+            .skills
+            .security;
+      case 'driving':
+        return t
+            .staff_authentication
+            .profile_setup_page
+            .experience
+            .skills
+            .driving;
+      case 'cooking':
+        return t
+            .staff_authentication
+            .profile_setup_page
+            .experience
+            .skills
+            .cooking;
+      default:
+        return key;
+    }
+  }
+
+  String _getIndustryLabel(String key) {
+    switch (key) {
+      case 'hospitality':
+        return t
+            .staff_authentication
+            .profile_setup_page
+            .experience
+            .industries
+            .hospitality;
+      case 'food_service':
+        return t
+            .staff_authentication
+            .profile_setup_page
+            .experience
+            .industries
+            .food_service;
+      case 'warehouse':
+        return t
+            .staff_authentication
+            .profile_setup_page
+            .experience
+            .industries
+            .warehouse;
+      case 'events':
+        return t
+            .staff_authentication
+            .profile_setup_page
+            .experience
+            .industries
+            .events;
+      case 'retail':
+        return t
+            .staff_authentication
+            .profile_setup_page
+            .experience
+            .industries
+            .retail;
+      case 'healthcare':
+        return t
+            .staff_authentication
+            .profile_setup_page
+            .experience
+            .industries
+            .healthcare;
+      default:
+        return key;
+    }
+  }
+}

apps/packages/features/staff/authentication/lib/src/presentation/widgets/profile_setup_page/profile_setup_header.dart

@@ -0,0 +1,57 @@
+import 'package:design_system/design_system.dart';
+import 'package:flutter/material.dart';
+import 'package:staff_authentication/staff_authentication.dart';
+
+/// A header widget for the profile setup page showing back button and step count.
+class ProfileSetupHeader extends StatelessWidget {
+  /// The current step index (0-based).
+  final int currentStep;
+
+  /// The total number of steps.
+  final int totalSteps;
+
+  /// Callback when the back button is tapped.
+  final VoidCallback? onBackTap;
+
+  /// Creates a [ProfileSetupHeader].
+  const ProfileSetupHeader({
+    super.key,
+    required this.currentStep,
+    required this.totalSteps,
+    this.onBackTap,
+  });
+
+  @override
+  /// Builds the header UI.
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.symmetric(
+        horizontal: UiConstants.space5,
+        vertical: UiConstants.space4,
+      ),
+      child: Row(
+        mainAxisAlignment: MainAxisAlignment.spaceBetween,
+        children: [
+          if (currentStep > 0 && onBackTap != null)
+            GestureDetector(
+              onTap: onBackTap,
+              child: const Icon(
+                UiIcons.chevronLeft,
+                size: 20,
+                color: UiColors.textSecondary,
+              ),
+            )
+          else
+            const SizedBox(width: UiConstants.space6),
+          Text(
+            t.staff_authentication.profile_setup_page.step_indicator(
+              current: currentStep + 1,
+              total: totalSteps,
+            ),
+            style: UiTypography.footnote1r.textSecondary,
+          ),
+        ],
+      ),
+    );
+  }
+}

apps/packages/features/staff/authentication/lib/src/presentation/widgets/profile_setup_page/profile_setup_location.dart

@@ -0,0 +1,165 @@
+import 'package:design_system/design_system.dart';
+import 'package:flutter/material.dart';
+import 'package:staff_authentication/src/presentation/widgets/common/section_title_subtitle.dart';
+import 'package:staff_authentication/staff_authentication.dart';
+
+/// A widget for setting up preferred work locations and distance.
+class ProfileSetupLocation extends StatefulWidget {
+  /// The list of preferred locations.
+  final List<String> preferredLocations;
+
+  /// The maximum distance in miles.
+  final double maxDistanceMiles;
+
+  /// Callback for when the preferred locations list changes.
+  final ValueChanged<List<String>> onLocationsChanged;
+
+  /// Callback for when the max distance changes.
+  final ValueChanged<double> onDistanceChanged;
+
+  /// Creates a [ProfileSetupLocation] widget.
+  const ProfileSetupLocation({
+    super.key,
+    required this.preferredLocations,
+    required this.maxDistanceMiles,
+    required this.onLocationsChanged,
+    required this.onDistanceChanged,
+  });
+
+  @override
+  State<ProfileSetupLocation> createState() => _ProfileSetupLocationState();
+}
+
+class _ProfileSetupLocationState extends State<ProfileSetupLocation> {
+  final TextEditingController _locationController = TextEditingController();
+
+  @override
+  void dispose() {
+    _locationController.dispose();
+    super.dispose();
+  }
+
+  /// Adds the current text from the controller as a location.
+  void _addLocation() {
+    final loc = _locationController.text.trim();
+    if (loc.isNotEmpty && !widget.preferredLocations.contains(loc)) {
+      final updatedList = List<String>.from(widget.preferredLocations)
+        ..add(loc);
+      widget.onLocationsChanged(updatedList);
+      _locationController.clear();
+    }
+  }
+
+  @override
+  /// Builds the location setup step UI.
+  Widget build(BuildContext context) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        SectionTitleSubtitle(
+          title: t.staff_authentication.profile_setup_page.location.title,
+          subtitle: t.staff_authentication.profile_setup_page.location.subtitle,
+        ),
+        const SizedBox(height: UiConstants.space8),
+
+        // Add Location input
+        Row(
+          crossAxisAlignment: CrossAxisAlignment.end,
+          spacing: UiConstants.space2,
+          children: [
+            Expanded(
+              child: UiTextField(
+                label: t
+                    .staff_authentication
+                    .profile_setup_page
+                    .location
+                    .add_location_label,
+                controller: _locationController,
+                hintText: t
+                    .staff_authentication
+                    .profile_setup_page
+                    .location
+                    .add_location_hint,
+                onSubmitted: (_) => _addLocation(),
+              ),
+            ),
+            UiButton.secondary(
+              text:
+                  t.staff_authentication.profile_setup_page.location.add_button,
+              onPressed: _addLocation,
+              style: OutlinedButton.styleFrom(
+                minimumSize: const Size(0, 48),
+                maximumSize: const Size(double.infinity, 48),
+              ),
+            ),
+          ],
+        ),
+
+        const SizedBox(height: UiConstants.space4),
+
+        // Location Badges
+        if (widget.preferredLocations.isNotEmpty)
+          Wrap(
+            spacing: UiConstants.space2,
+            runSpacing: UiConstants.space2,
+            children: widget.preferredLocations.map((loc) {
+              return UiChip(
+                label: loc,
+                leadingIcon: UiIcons.mapPin,
+                trailingIcon: UiIcons.close,
+                onTrailingIconTap: () => _removeLocation(location: loc),
+                variant: UiChipVariant.secondary,
+              );
+            }).toList(),
+          ),
+
+        const SizedBox(height: UiConstants.space8),
+        // Slider
+        Text(
+          t.staff_authentication.profile_setup_page.location.max_distance(
+            distance: widget.maxDistanceMiles.round().toString(),
+          ),
+          style: UiTypography.body2m,
+        ),
+        const SizedBox(height: UiConstants.space2),
+        Slider(
+          value: widget.maxDistanceMiles,
+          min: 5,
+          max: 50,
+          onChanged: widget.onDistanceChanged,
+        ),
+        Padding(
+          padding: const EdgeInsets.symmetric(horizontal: UiConstants.space2),
+          child: Row(
+            mainAxisAlignment: MainAxisAlignment.spaceBetween,
+            children: [
+              Text(
+                t
+                    .staff_authentication
+                    .profile_setup_page
+                    .location
+                    .min_dist_label,
+                style: UiTypography.footnote1r.textSecondary,
+              ),
+              Text(
+                t
+                    .staff_authentication
+                    .profile_setup_page
+                    .location
+                    .max_dist_label,
+                style: UiTypography.footnote1r.textSecondary,
+              ),
+            ],
+          ),
+        ),
+      ],
+    );
+  }
+
+  /// Removes the specified [location] from the list.
+  void _removeLocation({required String location}) {
+    final updatedList = List<String>.from(widget.preferredLocations)
+      ..remove(location);
+    widget.onLocationsChanged(updatedList);
+  }
+}

apps/packages/features/staff/authentication/lib/staff_authentication.dart

@@ -0,0 +1,65 @@
+library staff_authentication;
+
+import 'package:flutter_modular/flutter_modular.dart';
+import 'package:krow_data_connect/krow_data_connect.dart';
+import 'package:staff_authentication/src/data/repositories_impl/auth_repository_impl.dart';
+import 'package:staff_authentication/src/domain/repositories/auth_repository_interface.dart';
+import 'package:staff_authentication/src/domain/usecases/sign_in_with_phone_usecase.dart';
+import 'package:staff_authentication/src/domain/usecases/verify_otp_usecase.dart';
+import 'package:staff_authentication/src/presentation/blocs/auth_bloc.dart';
+import 'package:staff_authentication/src/presentation/blocs/profile_setup/profile_setup_bloc.dart';
+import 'package:staff_authentication/src/presentation/pages/get_started_page.dart';
+import 'package:staff_authentication/src/presentation/pages/phone_verification_page.dart';
+import 'package:staff_authentication/src/presentation/pages/profile_setup_page.dart';
+import 'package:staff_authentication/src/domain/ui_entities/auth_mode.dart';
+
+export 'src/domain/ui_entities/auth_mode.dart';
+export 'src/presentation/pages/get_started_page.dart';
+export 'src/presentation/pages/phone_verification_page.dart';
+export 'src/presentation/pages/profile_setup_page.dart';
+export 'package:core_localization/core_localization.dart';
+
+///  A [Module] for the staff authentication feature.
+class StaffAuthenticationModule extends Module {
+  @override
+  List<Module> get imports => [DataConnectModule()];
+
+  @override
+  void binds(Injector i) {
+    // Repositories
+    i.addLazySingleton<AuthRepositoryInterface>(
+      () => AuthRepositoryImpl(mock: i.get<AuthRepositoryMock>()),
+    );
+
+    // UseCases
+    i.addLazySingleton(SignInWithPhoneUseCase.new);
+    i.addLazySingleton(VerifyOtpUseCase.new);
+
+    // BLoCs
+    i.addLazySingleton<AuthBloc>(
+      () => AuthBloc(
+        signInUseCase: i.get<SignInWithPhoneUseCase>(),
+        verifyOtpUseCase: i.get<VerifyOtpUseCase>(),
+      ),
+    );
+    i.add<ProfileSetupBloc>(ProfileSetupBloc.new);
+  }
+
+  @override
+  void routes(r) {
+    r.child('/', child: (_) => const GetStartedPage());
+    r.child(
+      '/phone-verification',
+      child: (context) {
+        final Map<String, dynamic>? data = r.args.data;
+        final String? modeName = data?['mode'];
+        final AuthMode mode = AuthMode.values.firstWhere(
+          (e) => e.name == modeName,
+          orElse: () => AuthMode.login,
+        );
+        return PhoneVerificationPage(mode: mode);
+      },
+    );
+    r.child('/profile-setup', child: (_) => const ProfileSetupPage());
+  }
+}

apps/packages/features/staff/authentication/pubspec.yaml

@@ -0,0 +1,40 @@
+name: staff_authentication
+description: Staff Authentication and Onboarding 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
+  lucide_icons: ^0.257.0
+  
+  # Architecture Packages
+  krow_domain:
+    path: ../../../../domain
+  krow_data_connect:
+    path: ../../../../data_connect
+  krow_core:
+    path: ../../../../core
+  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