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