fix: add validation submit sign in

Reviewed-on: #14

android/app/build.gradle

@@ -12,6 +12,12 @@ if (localPropertiesFile.exists()) {
     }
 }
 
+def keystoreProperties = new Properties()
+def keystorePropertiesFile = rootProject.file('key.properties')
+if (keystorePropertiesFile.exists()) {
+    keystoreProperties.load(new FileInputStream(keystorePropertiesFile))
+}
+
 def flutterVersionCode = localProperties.getProperty('flutter.versionCode')
 if (flutterVersionCode == null) {
     flutterVersionCode = '1'
@@ -45,17 +51,27 @@ android {
         applicationId "com.example.cims_apps"
         // You can update the following values to match your application needs.
         // For more information, see: https://docs.flutter.dev/deployment/android#reviewing-the-gradle-build-configuration.
-        minSdkVersion flutter.minSdkVersion
+        minSdkVersion 21
         targetSdkVersion flutter.targetSdkVersion
         versionCode flutterVersionCode.toInteger()
         versionName flutterVersionName
     }
 
+    signingConfigs {
+        release {
+            keyAlias keystoreProperties['keyAlias']
+            keyPassword keystoreProperties['keyPassword']
+            storeFile keystoreProperties['storeFile'] ? file(keystoreProperties['storeFile']) : null
+            storePassword keystoreProperties['storePassword']
+        }
+    }
+
     buildTypes {
         release {
             // TODO: Add your own signing config for the release build.
             // Signing with the debug keys for now, so `flutter run --release` works.
-            signingConfig signingConfigs.debug
+            // signingConfig signingConfigs.debug
+            signingConfig signingConfigs.release
         }
     }
 }

android/app/src/main/AndroidManifest.xml

@@ -1,6 +1,7 @@
 <manifest xmlns:android="http://schemas.android.com/apk/res/android">
+    <uses-permission android:name="android.permission.INTERNET"/>
     <application
-        android:label="cims_apps"
+        android:label="cims investment"
         android:name="${applicationName}"
         android:icon="@mipmap/ic_launcher"
         android:enableOnBackInvokedCallback="true"

lib/application/assets/path_assets.dart

@@ -1,7 +1,7 @@
 class PathAssets {
   PathAssets._();
 
-  /// LOGO
+  /// ICON
   static const String iconSplashRight = 'assets/icons/splash-right.png';
   static const String iconSplashLeft = 'assets/icons/splash-left.png';
   static const String iconReksadana = 'assets/icons/icon-reksadana.png';
@@ -10,6 +10,45 @@ class PathAssets {
   static const String iconGoogle = 'assets/icons/icon-google.png';
   static const String icon1 = 'assets/icons/icon-1.png';
   static const String iconConnect = 'assets/icons/icon-connect.png';
+  static const String iconPortofolioBonds =
+      'assets/icons/icon-portofolio-bonds.png';
+  static const String iconPortofolioShares =
+      'assets/icons/icon-portofolio-shares.png';
+  static const String iconPortofolioSharia =
+      'assets/icons/icon-portofolio-sharia.png';
+  static const String iconPortofolioMoneyMarket =
+      'assets/icons/icon-portofolio-moneymarket.png';
+  static const String iconShield = 'assets/icons/icon-shield.png';
+  static const String iconFlag = 'assets/icons/icon-flag.png';
+  static const String iconKtp1 = 'assets/icons/icon-ktp1.png';
+  static const String iconKtp2 = 'assets/icons/icon-ktp2.png';
+  static const String iconKtp3 = 'assets/icons/icon-ktp3.png';
+  static const String iconKtp4 = 'assets/icons/icon-ktp4.png';
+  static const String iconSelfie1 = 'assets/icons/icon-selfie1.png';
+  static const String iconSelfie2 = 'assets/icons/icon-selfie2.png';
+  static const String iconSelfie3 = 'assets/icons/icon-selfie3.png';
+  static const String iconSelfie4 = 'assets/icons/icon-selfie4.png';
+  static const String iconStrongBox = 'assets/icons/icon-strongbox.png';
+  static const String iconBalance = 'assets/icons/icon-balance.png';
+  static const String iconMoneyReceive = 'assets/icons/icon-money-receive.png';
+  static const String iconCoins = 'assets/icons/icon-coins.png';
+  static const String iconQuestion = 'assets/icons/icon-question.png';
+  static const String iconCake = 'assets/icons/icon-cake.png';
+  static const String iconHouse = 'assets/icons/icon-house.png';
+  static const String iconToga = 'assets/icons/icon-toga.png';
+  static const String iconCreatePlan = 'assets/icons/icon-create-plan.png';
+  static const String iconChecklistOutlined =
+      'assets/icons/icon-ceklis-outline.png';
+  static const String iconLock = 'assets/icons/icon-lock.png';
+  static const String iconThumb = 'assets/icons/icon-thumb.png';
+  static const String iconPortofolio = 'assets/icons/icon-portofolio.png';
+  static const String iconPlane = 'assets/icons/icon-plane.png';
+  static const String iconCart = 'assets/icons/icon-cart.png';
+  static const String iconBag = 'assets/icons/icon-bag.png';
+  static const String iconMarket = 'assets/icons/icon-market.png';
+  static const String iconTicket = 'assets/icons/icon-ticket.png';
+  static const String iconGadget = 'assets/icons/icon-gadget.png';
+  static const String iconCar = 'assets/icons/icon-car.png';
 
   /// IMAGE
   static const String imgSplashLogo = 'assets/images/splash-logo.png';
@@ -22,4 +61,29 @@ class PathAssets {
   static const String imgKtpCropped = 'assets/images/img-ktp-cropped.png';
   static const String imgKtpClear = 'assets/images/img-ktp-clear.png';
   static const String imgKtpBlur = 'assets/images/img-ktp-blur.png';
+  static const String imgDashboardAccount =
+      'assets/images/img-dashboard-account.png';
+  static const String imgCarousel = 'assets/images/img-carousel.png';
+  static const String imgArticles = 'assets/images/img-articles.png';
+  static const String imgProduct = 'assets/images/img-product.png';
+  static const String imgSuccessSignup = 'assets/images/img-success-signup.png';
+  static const String imgBgKtp = 'assets/images/img-bg-photo-ktp.png';
+  static const String imgBgSelfie = 'assets/images/img-bg-photo-selfie.png';
+  static const String imgDataReport = 'assets/images/img-data-report.png';
+  static const String imgDataAnalysis = 'assets/images/img-data-analysis.png';
+  static const String imgBusinessFailure =
+      'assets/images/img-business-failure.png';
+  static const String imgLeader = 'assets/images/img-leader.png';
+  static const String imgMoneyIncome = 'assets/images/img-money-income.png';
+  static const String imgGrowing = 'assets/images/img-growing.png';
+  static const String imgCat = 'assets/images/img-cat.png';
+  static const String imgDeer = 'assets/images/img-deer.png';
+  static const String imgLion = 'assets/images/img-lion.png';
+  static const String imgGuideBank = 'assets/images/img-guide-bank.png';
+  static const String imgGuide1 = 'assets/images/img-guide1.png';
+  static const String imgGuide2 = 'assets/images/img-guide2.png';
+  static const String imgOpenShopping = 'assets/images/img-open-shopping.png';
+  static const String imgPaymentSuccess = 'assets/images/img-payment-success.png';
+  static const String frameSignature = 'assets/images/frame-signature.png';
+  static const String imgFinish = 'assets/images/img-finish.png';
 }

lib/application/component/button/back_button_view.dart

@@ -0,0 +1,27 @@
+import 'package:cims_apps/application/theme/color_palette.dart';
+import 'package:cims_apps/core/utils/size_config.dart';
+import 'package:flutter/material.dart';
+
+class BackButtonView extends StatelessWidget {
+  final EdgeInsets? margin;
+  final void Function()? onPress;
+  const BackButtonView({super.key, this.margin, this.onPress});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      margin: margin ?? EdgeInsets.all(0),
+      width: SizeConfig.width * 0.1,
+      child: IconButton(
+          style: IconButton.styleFrom(
+              backgroundColor: Colors.white,
+              shape: const CircleBorder(
+                  side: BorderSide(color: ColorPalette.slate200)
+              )
+          ),
+          onPressed: onPress ?? () => Navigator.pop(context),
+          icon: const Icon(Icons.arrow_back)
+      ),
+    );
+  }
+}

lib/application/component/button/button_view.dart

@@ -9,13 +9,14 @@ class ButtonView extends StatelessWidget {
   final double? height, width, widthSuffix, widthPrefix, marginVertical;
   final EdgeInsetsGeometry? contentPadding;
   final bool isSecondaryColor, isOutlined, heightWrapContent, disabled;
-  final Color? backgroundColor, textColor;
+  final Color? backgroundColor, textColor, borderColor, disabledBgColor;
   final MainAxisAlignment? mainAxisAlignmentContent;
   // final _widthBtn = SizeConfig.screenWidth / 1.5;
   final _widthBtn = SizeConfig.width * .9;
   // final _heightBtn = SizeConfig.screenHeight / 12;
   final _heightBtn = SizeConfig.height * .07;
   final FontWeight textWeight;
+  final TextAlign textAlign;
   final double? textSize, sizeBorderRadius;
   final int? maxLines;
 
@@ -31,9 +32,12 @@ class ButtonView extends StatelessWidget {
       this.width,
       this.contentPadding,
       this.backgroundColor,
+      this.borderColor,
       this.textColor,
+      this.disabledBgColor,
       this.textWeight = FontWeight.bold,
       this.textSize,
+      this.textAlign = TextAlign.center,
       this.mainAxisAlignmentContent,
       this.disabled = false,
       this.heightWrapContent = false,
@@ -55,13 +59,14 @@ class ButtonView extends StatelessWidget {
     final widthPrefix =
         this.widthPrefix ?? (heightWrapContent ? width! / 4.7 : _widthBtn / 16);
 
-    return Container(
-      margin: EdgeInsets.symmetric(vertical: marginVertical ?? 32.0),
+    return Center(
+      child: Container(
+        margin: EdgeInsets.symmetric(vertical: marginVertical ?? 24.0),
         width: width ?? _widthBtn,
         height: heightWrapContent ? null : height ?? _heightBtn,
         child: ElevatedButton(
           style: ElevatedButton.styleFrom(
-          disabledBackgroundColor: isOutlined ? Colors.white : color.surface,
+            disabledBackgroundColor: disabledBgColor ?? (isOutlined ? Colors.white : color.surface),
             padding: contentPadding,
             backgroundColor: backgroundColor ??
                 (isOutlined
@@ -74,11 +79,11 @@ class ButtonView extends StatelessWidget {
               borderRadius: BorderRadius.circular(sizeBorderRadius ?? 48),
               side: isOutlined
                   ? BorderSide(
-                    color: disabled
+                      color: borderColor ?? (disabled
                           ? color.surface
                           : isSecondaryColor
                           ? ColorPalette.greyBorder
-                            : ColorPalette.primary,
+                          : ColorPalette.primary),
                     )
                   : BorderSide.none,
             ),
@@ -100,7 +105,7 @@ class ButtonView extends StatelessWidget {
               Flexible(
                 child: Text(
                   name,
-                textAlign: TextAlign.center,
+                  textAlign: textAlign,
                   maxLines: maxLines,
                   overflow: TextOverflow.ellipsis,
                   style: TextStyle(
@@ -129,6 +134,7 @@ class ButtonView extends StatelessWidget {
             ],
           ),
         ),
+      ),
     );
   }
 }

lib/application/component/custom_app_bar/custom_app_bar.dart

@@ -0,0 +1,42 @@
+import 'package:cims_apps/application/component/button/back_button_view.dart';
+import 'package:cims_apps/application/theme/color_palette.dart';
+import 'package:flutter/material.dart';
+
+class CustomAppBar extends StatelessWidget implements PreferredSizeWidget {
+  final Widget? leading;
+  final String title;
+  final List<Widget>? trailing;
+  final double height;
+
+  const CustomAppBar({
+    Key? key,
+    required this.height,
+    this.leading,
+    required this.title,
+    this.trailing,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: EdgeInsets.symmetric(horizontal: 24),
+      decoration: BoxDecoration(
+          border: Border(bottom: BorderSide(color: ColorPalette.slate200))
+      ),
+      child: AppBar(
+        toolbarHeight: 70,
+        backgroundColor: Colors.white,
+        surfaceTintColor: Colors.white,
+        automaticallyImplyLeading: false,
+        leadingWidth: 40,
+        leading: leading ?? BackButtonView(),
+        title: Text(title),
+        centerTitle: true,
+        actions: trailing ?? [],
+      ),
+    );
+  }
+
+  @override
+  Size get preferredSize => Size.fromHeight(height);
+}

lib/application/component/date_picker/date_picker_view.dart

@@ -0,0 +1,144 @@
+import 'package:calendar_date_picker2/calendar_date_picker2.dart';
+import 'package:cims_apps/application/component/button/button_view.dart';
+import 'package:cims_apps/application/component/text_form/text_form_view.dart';
+import 'package:cims_apps/application/theme/color_palette.dart';
+import 'package:cims_apps/core/utils/size_config.dart';
+import 'package:flutter/material.dart';
+import 'package:intl/intl.dart';
+
+class DatePickerView extends StatelessWidget {
+  final String name;
+  final TextEditingController ctrl;
+  final DateTime? minDate, maxDate;
+  final String? hintText, buttonName;
+  final bool isMultipleSelection, enabled;
+  final List<DateTime>? initialValue;
+  final ValueChanged<OnChangedDatePickerModel>? onChanged;
+  final ValueChanged<List<DateTime?>>? onFinish;
+  final FormFieldValidator<String>? validatorDate;
+  const DatePickerView(
+      {Key? key,
+      required this.name,
+      required this.ctrl,
+      this.minDate,
+      this.maxDate,
+      this.hintText,
+      this.buttonName,
+      required this.isMultipleSelection,
+      required this.enabled,
+      this.initialValue,
+      this.onChanged,
+      this.onFinish,
+      this.validatorDate})
+      : super(key: key);
+
+  String _dateFormat(DateTime? dateTime) =>
+      dateTime != null ? DateFormat('dd/MM/yyyy').format(dateTime) : "";
+
+  @override
+  Widget build(BuildContext context) {
+    List<DateTime?> initData = initialValue ?? [];
+    List<DateTime?> dateList = [];
+
+    String dateLabel() {
+      return dateList.map((e) => _dateFormat(e)).join(" - ");
+    }
+
+    onChangedDatePicker(List<DateTime?> value) {
+      if (isMultipleSelection) {
+        final pickerDateRange = PickerDateRange(
+          startDate: value[0] ?? DateTime.now(),
+          endDate:
+              value.length > 1 ? value[1] ?? DateTime.now() : DateTime.now(),
+        );
+        onChanged
+            ?.call(OnChangedDatePickerModel(pickerDateRange: pickerDateRange));
+      } else {
+        onChanged?.call(OnChangedDatePickerModel(dateTime: value[0]));
+      }
+      dateList = value;
+    }
+
+    dialogDatePicker() {
+      showModalBottomSheet(
+        context: context,
+        isScrollControlled: true,
+        builder: (BuildContext context) {
+          return Container(
+            padding: const EdgeInsets.only(top: 16.0),
+            height: SizeConfig.height * .65,
+            child: Column(
+              // mainAxisAlignment: MainAxisAlignment.spaceBetween,
+              mainAxisSize: MainAxisSize.min,
+              children: [
+                CalendarDatePicker2(
+                  value: [...initData],
+                  config: CalendarDatePicker2Config(
+                    centerAlignModePicker: true,
+                    calendarType: isMultipleSelection
+                        ? CalendarDatePicker2Type.range
+                        : CalendarDatePicker2Type.single,
+                    customModePickerIcon: const SizedBox(),
+                    firstDate: minDate ?? DateTime(1900),
+                    lastDate: maxDate,
+                  ),
+                  // initialValue: [...initData],
+                  onValueChanged: (value) {
+                    onChangedDatePicker(value);
+                  },
+                ),
+                Padding(
+                  padding: const EdgeInsets.symmetric(horizontal: 16),
+                  child: ButtonView(
+                    width: SizeConfig.width,
+                    onPressed: () {
+                      if (dateList.isNotEmpty) {
+                        onFinish?.call(dateList);
+                        ctrl.text = dateLabel();
+                        initData = dateList;
+                      }
+                      Navigator.pop(context);
+                    },
+                    name: 'OK',
+                  ),
+                ),
+              ],
+            ),
+          );
+        },
+      );
+    }
+
+    return TextFormView(
+      name: name,
+      hintText: hintText,
+      readOnly: true,
+      ctrl: ctrl,
+      validator: validatorDate,
+      enabled: enabled,
+      onTap: () {
+        if (enabled) dialogDatePicker();
+      },
+      suffixIcon: const UnconstrainedBox(
+        child: Icon(
+          Icons.calendar_today_rounded,
+          color: ColorPalette.slate400,
+        ),
+      ),
+    );
+  }
+}
+
+class OnChangedDatePickerModel {
+  final DateTime? dateTime;
+  final PickerDateRange? pickerDateRange;
+
+  OnChangedDatePickerModel({this.dateTime, this.pickerDateRange});
+}
+
+class PickerDateRange {
+  final DateTime startDate;
+  final DateTime endDate;
+
+  PickerDateRange({required this.startDate, required this.endDate});
+}

lib/application/component/list_tile/list_tile_view.dart

@@ -0,0 +1,70 @@
+import 'package:cims_apps/application/assets/path_assets.dart';
+import 'package:cims_apps/application/component/image/image_view.dart';
+import 'package:cims_apps/application/theme/color_palette.dart';
+import 'package:cims_apps/core/utils/size_config.dart';
+import 'package:flutter/material.dart';
+
+class ListTileView extends StatelessWidget {
+  final String title;
+  final VoidCallback? onPressed;
+  final Widget? prefixIcon, suffixIcon;
+  final Color? colorTitle;
+  const ListTileView(
+      {Key? key,
+      required this.title,
+      this.onPressed,
+      this.prefixIcon,
+      this.suffixIcon,
+      this.colorTitle})
+      : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      width: SizeConfig.width,
+      padding: const EdgeInsets.symmetric(vertical: 16.0, horizontal: 8.0),
+      margin: const EdgeInsets.symmetric(vertical: 16.0),
+      decoration: BoxDecoration(
+        color: ColorPalette.blue50,
+        borderRadius: BorderRadius.circular(10),
+        border: Border.all(
+          color: ColorPalette.greyLights,
+          width: 1,
+        ),
+      ),
+      child: Row(
+        mainAxisAlignment: MainAxisAlignment.spaceBetween,
+        children: [
+          prefixIcon ??
+              const ImageView(
+                image: PathAssets.iconChecklistOutlined,
+                width: 38,
+                height: 38,
+              ),
+          const SizedBox(
+            width: 16,
+          ),
+          Expanded(
+            child: Text(
+              title,
+              style: TextStyle(
+                fontWeight: FontWeight.w600,
+                color: colorTitle ?? ColorPalette.slate500,
+              ),
+            ),
+          ),
+          suffixIcon != null
+              ? IconButton(
+                  onPressed: onPressed,
+                  icon: const Icon(
+                    Icons.arrow_forward_ios,
+                    color: ColorPalette.primary,
+                    size: 20,
+                  ),
+                )
+              : const SizedBox(),
+        ],
+      ),
+    );
+  }
+}

lib/application/component/modal_redirect_app.dart

@@ -0,0 +1,41 @@
+import 'package:cims_apps/application/assets/path_assets.dart';
+import 'package:cims_apps/application/component/image/image_view.dart';
+import 'package:cims_apps/application/theme/color_palette.dart';
+import 'package:flutter/material.dart';
+
+class TypeApp {
+  String img, title;
+
+  TypeApp(this.img, this.title);
+}
+
+class ModalRedirectApp extends StatelessWidget {
+  final String value;
+  const ModalRedirectApp({super.key, required this.value});
+
+  @override
+  Widget build(BuildContext context) {
+    Map<String, TypeApp> typeApp = {
+      'Shopping Pay': TypeApp(PathAssets.imgOpenShopping, 'Shopping App'),
+    };
+
+    return Column(
+      children: [
+        ImageView(image: typeApp[value]!.img),
+        Text('Open ${typeApp[value]!.title}',
+          style: TextStyle(
+            fontSize: 22,
+            fontWeight: FontWeight.w600,
+            color: ColorPalette.slate800
+          ),
+        ),
+        Text('You will be redirected to the ${typeApp[value]!.title.toLowerCase()} to continue the payment',
+          style: TextStyle(
+              fontSize: 16,
+              color: ColorPalette.slate400
+          ),
+        )
+      ],
+    );
+  }
+}

lib/application/component/numeric_pad/numeric_pad.dart

@@ -0,0 +1,126 @@
+import 'package:cims_apps/application/theme/color_palette.dart';
+import 'package:cims_apps/core/utils/size_config.dart';
+import 'package:flutter/material.dart';
+
+class NumericPad extends StatelessWidget {
+  final Function(String) onNumberSelected;
+  final bool isPin;
+  const NumericPad({super.key, required this.onNumberSelected, this.isPin = false});
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.stretch,
+      children: [
+        Row(
+          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            numberWidget('1'),
+            dividerGradient(false, Alignment.bottomCenter, Alignment.topCenter),
+            numberWidget('2'),
+            dividerGradient(false, Alignment.bottomCenter, Alignment.topCenter),
+            numberWidget('3')
+          ],
+        ),
+        dividerGradient(true, Alignment.centerLeft, Alignment.centerRight),
+        Row(
+          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            numberWidget('4'),
+            dividerGradient(false, Alignment.center, Alignment.center, fullColor: true),
+            numberWidget('5'),
+            dividerGradient(false, Alignment.center, Alignment.center, fullColor: true),
+            numberWidget('6')
+          ],
+        ),
+        dividerGradient(true, Alignment.centerLeft, Alignment.centerRight),
+        Row(
+          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            numberWidget('7'),
+            dividerGradient(false, Alignment.center, Alignment.center, fullColor: true),
+            numberWidget('8'),
+            dividerGradient(false, Alignment.center, Alignment.center, fullColor: true),
+            numberWidget('9')
+          ],
+        ),
+        dividerGradient(true, Alignment.centerLeft, Alignment.centerRight),
+        Row(
+          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+          crossAxisAlignment: CrossAxisAlignment.center,
+          children: [
+            isPin ? spaceWidget() : numberWidget('0'),
+            dividerGradient(false, Alignment.topCenter, Alignment.bottomCenter),
+            numberWidget(isPin ? '0' : '000'),
+            dividerGradient(false, Alignment.topCenter, Alignment.bottomCenter),
+            removeWidget()
+          ],
+        ),
+      ],
+    );
+  }
+
+  Widget dividerGradient(bool isHorizontal, AlignmentGeometry gradientFrom, AlignmentGeometry gradientTo, {bool fullColor = false}) {
+    return Container(
+      width: isHorizontal ? SizeConfig.width : 1,
+      height: isHorizontal ? 1 : SizeConfig.height * 0.097,
+      decoration: BoxDecoration(
+          gradient: LinearGradient(
+              colors: [
+                if(isHorizontal) ...[
+                  ColorPalette.slate200.withOpacity(0)
+                ],
+                ColorPalette.slate200,
+                fullColor ? ColorPalette.slate200 : ColorPalette.slate200.withOpacity(0)
+              ],
+              begin: gradientFrom,
+              end: gradientTo
+          )
+      ),
+    );
+  }
+
+  Widget spaceWidget() {
+    return Expanded(
+        child: SizedBox()
+    );
+  }
+
+  Widget numberWidget(String number) {
+    return Expanded(
+        child: GestureDetector(
+          onTap: () {
+            onNumberSelected(number);
+          },
+          child: Container(
+            padding: EdgeInsets.symmetric(vertical: SizeConfig.height * .028),
+            child: Text(
+              number,
+              textAlign: TextAlign.center,
+              style: TextStyle(
+                  fontSize: 28,
+                  fontWeight: FontWeight.bold
+              ),
+            ),
+          ),
+        )
+    );
+  }
+
+  Widget removeWidget() {
+    return Expanded(
+        child: GestureDetector(
+          onTap: () {
+            onNumberSelected('');
+          },
+          child: Icon(
+            Icons.highlight_remove,
+            size: 28,
+          ),
+        )
+    );
+  }
+}

lib/application/component/otp/otp_view.dart

@@ -0,0 +1,145 @@
+import 'package:cims_apps/application/component/custom_app_bar/custom_app_bar.dart';
+import 'package:cims_apps/application/component/otp/otp_viewmodel.dart';
+import 'package:cims_apps/application/component/text_caption/text_caption.dart';
+import 'package:cims_apps/application/theme/color_palette.dart';
+import 'package:cims_apps/core/route/route.dart';
+import 'package:cims_apps/core/utils/size_config.dart';
+import 'package:cims_apps/features/auth/registration/view/registration_password_view.dart';
+import 'package:flutter/material.dart';
+import 'package:pinput/pinput.dart';
+import 'package:provider/provider.dart';
+
+class OtpView extends StatelessWidget {
+  final String title;
+  final String? contentTitle, contentSubtitle;
+  const OtpView({
+    Key? key,
+    required this.title,
+    this.contentTitle,
+    this.contentSubtitle,
+  }) : super(key: key);
+
+  Widget _otpContent(BuildContext context, OtpViewModel provider) {
+    return Form(
+        key: provider.formKey,
+        child: Column(
+          children: [
+            Pinput(
+              length: 4,
+              controller: provider.ctrlPin,
+              focusNode: provider.focusNode,
+              mainAxisAlignment: MainAxisAlignment.spaceBetween,
+              validator: (value) {
+                if (value!.isEmpty) {
+                  return 'Pin must be complete';
+                }
+                return null;
+              },
+              defaultPinTheme: PinTheme(
+                textStyle: const TextStyle(
+                  color: ColorPalette.slate800,
+                  fontSize: 24,
+                  fontWeight: FontWeight.bold,
+                ),
+                width: SizeConfig.width * .19,
+                height: SizeConfig.height * .08,
+                decoration: BoxDecoration(
+                  border: Border.all(color: const Color(0xFFE2E8F0)),
+                  borderRadius: BorderRadius.circular(8),
+                ),
+              ),
+              errorPinTheme: PinTheme(
+                textStyle: const TextStyle(
+                  color: ColorPalette.slate800,
+                  fontSize: 24,
+                  fontWeight: FontWeight.bold,
+                ),
+                width: SizeConfig.width * .19,
+                height: SizeConfig.height * .08,
+                decoration: BoxDecoration(
+                  border: Border.all(color: Colors.redAccent),
+                  borderRadius: BorderRadius.circular(8),
+                ),
+              ),
+              onCompleted: (pin) => provider.enableButton(),
+              onChanged: (value) {
+                if (provider.ctrlPin.length != 4) {
+                  provider.enableButton(isActive: false);
+                }
+              },
+            ),
+            Container(
+              margin: const EdgeInsets.symmetric(vertical: 32.0),
+              width: SizeConfig.width,
+              height: SizeConfig.height * .07,
+              child: ElevatedButton(
+                style: ElevatedButton.styleFrom(
+                  elevation: 0,
+                  backgroundColor: ColorPalette.primary,
+                ),
+                onPressed: !provider.buttonIsActive
+                    ? null
+                    : () {
+                        if (provider.formKey.currentState!.validate()) {
+                          final pin = provider.ctrlPin.text;
+                          provider.validateOtp(pin).then((value) {
+                            if (value) {
+                              routePush(context,
+                                  page: const RegistrationPasswordView(),
+                                  routeType: RouteType.pushReplace);
+                            } else {
+                              provider.ctrlPin.clear();
+                            }
+                          });
+                        }
+                      },
+                child: const Text(
+                  'Verify',
+                  style: TextStyle(
+                    fontSize: 16,
+                    fontWeight: FontWeight.bold,
+                    color: Colors.white,
+                  ),
+                ),
+              ),
+            ),
+          ],
+        ));
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return ChangeNotifierProvider(
+        create: (context) => OtpViewModel(),
+        builder: (context, child) {
+          return Scaffold(
+            appBar: CustomAppBar(height: SizeConfig.height * .1, title: title),
+            body: SingleChildScrollView(
+              padding: const EdgeInsets.all(16.0),
+              child:
+                  Consumer<OtpViewModel>(builder: (context, provider, child) {
+                return Column(
+                  children: [
+                    TextCaption(
+                      title: contentTitle ?? '',
+                      subtitle: contentSubtitle ?? '',
+                    ),
+                    _otpContent(context, provider),
+                    TextButton(
+                        onPressed: () {
+                          provider.ctrlPin.clear();
+                        },
+                        child: const Text(
+                          'Resend Code',
+                          style: TextStyle(
+                            fontWeight: FontWeight.w700,
+                          ),
+                        ))
+                  ],
+                );
+              }),
+            ),
+          );
+        });
+  }
+}

lib/application/component/otp/otp_viewmodel.dart

@@ -0,0 +1,22 @@
+import 'package:flutter/material.dart';
+
+class OtpViewModel extends ChangeNotifier {
+  var formKey = GlobalKey<FormState>();
+  var focusNode = FocusNode();
+  bool buttonIsActive = false;
+
+  TextEditingController ctrlPin = TextEditingController();
+
+  Future<bool> validateOtp(String pin) async {
+    final pinLength = pin.length;
+    if (pinLength == 4) {
+      return true;
+    }
+    return false;
+  }
+
+  void enableButton({bool isActive = true}) {
+    buttonIsActive = isActive;
+    notifyListeners();
+  }
+}

lib/application/component/risk_profile.dart

@@ -0,0 +1,212 @@
+import 'package:cims_apps/application/assets/path_assets.dart';
+import 'package:cims_apps/application/theme/color_palette.dart';
+import 'package:cims_apps/core/utils/size_config.dart';
+import 'package:cims_apps/features/auth/registration/view/submission_data/risk_profile/risk_profile_view_model/risk_profile_view_model.dart';
+import 'package:flutter/material.dart';
+
+class RiskProfile extends StatelessWidget {
+  final int totalScore;
+  final bool rowSuitableProduct;
+  const RiskProfile({super.key, required this.totalScore, required this.rowSuitableProduct});
+
+  @override
+  Widget build(BuildContext context) {
+    List<RiskProfileResult> listRiskProfileResult = [
+      RiskProfileResult(
+          'Conservative',
+          PathAssets.imgCat,
+          ColorPalette.green500,
+          'Investors with a conservative risk profile are risk-averse or do not want to experience large losses. Therefore, mutual fund products that are suitable for conservative investors are products that have low risk and stable returns.',
+          [
+            {'desc': 'Money Market Mutual Fund', 'icon': PathAssets.iconStrongBox},
+            {'desc': 'Fixed Income Mutual Fund', 'icon': PathAssets.iconMoneyReceive},
+            {'desc': 'Balanced Mutual Fund', 'icon': PathAssets.iconBalance},
+          ]
+      ),
+      RiskProfileResult(
+          'Moderate',
+          PathAssets.imgDeer,
+          ColorPalette.orange500,
+          'Investors with a moderate risk profile are investors who are ready to accept moderate risk to get higher returns than conservative mutual fund products. Therefore, mutual fund products that are suitable for moderate investors are products that have moderate risk and higher returns than conservative mutual fund products.',
+          [
+            {'desc': 'Fixed Income Mutual Fund', 'icon': PathAssets.iconMoneyReceive},
+            {'desc': 'Balanced Mutual Fund', 'icon': PathAssets.iconBalance},
+          ]
+      ),
+      RiskProfileResult(
+          'Aggressive',
+          PathAssets.imgLion,
+          ColorPalette.purple500,
+          'Investors with an aggressive risk profile are investors who are ready to accept high risks to get high returns. Therefore, mutual fund products that are suitable for aggressive investors are products that have high risk and high returns.',
+          [
+            {'desc': 'Equity Mutual Fund', 'icon': PathAssets.iconCoins},
+            {'desc': 'Aggressive Balanced Fund', 'icon': PathAssets.iconBalance},
+          ]
+      )
+    ];
+    RiskProfileResult riskProfile;
+    if(totalScore <= 25){
+      riskProfile = listRiskProfileResult[0];
+    }else if(totalScore <= 50){
+      riskProfile = listRiskProfileResult[1];
+    }else{
+      riskProfile = listRiskProfileResult[2];
+    }
+
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        ClipRRect(
+          borderRadius: BorderRadius.circular(8),
+          child: Container(
+            decoration: BoxDecoration(
+              color: riskProfile.color,
+              image: DecorationImage(image: AssetImage(riskProfile.img), alignment: Alignment.centerRight),
+              boxShadow: [
+                BoxShadow(
+                  color: riskProfile.color.withOpacity(0.2),
+                  blurRadius: 30
+                )
+              ]
+            ),
+            child: Row(
+              mainAxisAlignment: MainAxisAlignment.spaceBetween,
+              children: [
+                Container(
+                  padding: EdgeInsets.all(24),
+                  child: Column(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    children: [
+                      Text(
+                        riskProfile.type,
+                        style: TextStyle(
+                            fontWeight: FontWeight.bold,
+                            fontSize: 24,
+                            color: ColorPalette.white
+                        ),
+                      ),
+                      SizedBox(height: 16,),
+                      Text('Total Score :',
+                        style: TextStyle(
+                            fontWeight: FontWeight.bold,
+                            fontSize: 16,
+                            color: ColorPalette.white
+                        ),
+                      ),
+                      Text('$totalScore',
+                        style: TextStyle(
+                            fontWeight: FontWeight.bold,
+                            fontSize: 28,
+                            color: ColorPalette.white
+                        ),
+                      )
+                    ],
+                  ),
+                ),
+              ],
+            ),
+          ),
+        ),
+        SizedBox(
+          height: 24,
+        ),
+        Text(
+            riskProfile.desc,
+            style: TextStyle(
+                color: ColorPalette.slate500,
+                fontSize: 16
+            )
+        ),
+        SizedBox(
+          height: 24,
+        ),
+        Text(
+          'Suitable Product',
+          style: TextStyle(
+              color: ColorPalette.slate800,
+              fontWeight: FontWeight.bold,
+              fontSize: 18
+          ),
+        ),
+        SizedBox(
+          height: 16,
+        ),
+        rowSuitableProduct ?
+          Row(
+            children: riskProfile.suitableProduct.asMap().entries.map((e) {
+              return Expanded(
+                child: Container(
+                  margin: EdgeInsets.only(left: e.key != 0 ? 12 : 0),
+                  padding: EdgeInsets.all(16),
+                  decoration: BoxDecoration(
+                    border: Border.all(color: ColorPalette.slate200),
+                    borderRadius: BorderRadius.circular(6)
+                  ),
+                  child: Column(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    children: [
+                      Container(
+                          padding: EdgeInsets.all(8),
+                          decoration: BoxDecoration(
+                              shape: BoxShape.circle,
+                              color: riskProfile.color.withOpacity(0.1)
+                          ),
+                          child: Image.asset(e.value['icon'], width: SizeConfig.width * 0.07, color: riskProfile.color)
+                      ),
+                      SizedBox(
+                        height: 12,
+                      ),
+                      Text(e.value['desc'],
+                        style: TextStyle(
+                            fontSize: 16,
+                            fontWeight: FontWeight.bold,
+                            color: ColorPalette.slate800
+                        ),
+                      )
+                    ],
+                  ),
+                )
+              );
+            }).toList(),
+          )
+        : Wrap(
+          runSpacing: 16,
+          children: riskProfile.suitableProduct.map((e) {
+            return Container(
+              padding: EdgeInsets.all(16),
+              decoration: BoxDecoration(
+                borderRadius: BorderRadius.circular(6),
+                border: Border.all(color: ColorPalette.slate200),
+              ),
+              child: Row(
+                children: [
+                  Container(
+                      padding: EdgeInsets.all(8),
+                      alignment: Alignment.center,
+                      decoration: BoxDecoration(
+                          shape: BoxShape.circle,
+                          color: riskProfile.color.withOpacity(0.1)
+                      ),
+                      child: Image.asset(e['icon'], width: SizeConfig.width * 0.07, color: riskProfile.color)
+                  ),
+                  SizedBox(
+                    width: 12,
+                  ),
+                  Expanded(
+                    child: Text(e['desc'],
+                      style: TextStyle(
+                          fontSize: 18,
+                          fontWeight: FontWeight.bold,
+                          color: ColorPalette.slate800
+                      ),
+                    ),
+                  )
+                ],
+              ),
+            );
+          }).toList(),
+        )
+      ],
+    );
+  }
+}

lib/application/component/select_form/select_form_view.dart

@@ -0,0 +1,179 @@
+import 'package:cims_apps/application/component/button/button_view.dart';
+import 'package:cims_apps/application/component/text_form/text_form_view.dart';
+import 'package:cims_apps/application/theme/color_palette.dart';
+import 'package:cims_apps/core/utils/size_config.dart';
+import 'package:flutter/material.dart';
+
+class ItemSelectForm {
+  final String key;
+  final String text;
+  final String? description;
+  final bool isOther;
+  String image;
+
+  ItemSelectForm(
+    this.key,
+    this.text, {
+    this.isOther = false,
+    this.image = "",
+    this.description,
+  });
+}
+
+class SelectFormView extends StatelessWidget {
+  final String name;
+  final String? hintText;
+  final TextStyle? hintTextStyle;
+  final TextEditingController? ctrl;
+  final List<ItemSelectForm> listItem;
+  final ValueChanged<String> onSelect;
+  final FormFieldValidator<String>? validator;
+  final _borderRadius = const Radius.circular(24);
+  final bool? enabled;
+  const SelectFormView(
+      {Key? key,
+      required this.name,
+      this.hintText,
+      this.hintTextStyle,
+      this.ctrl,
+      required this.listItem,
+      required this.onSelect,
+      this.validator,
+      this.enabled})
+      : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    bottomSheet() {
+      showModalBottomSheet<void>(
+        context: context,
+        shape: RoundedRectangleBorder(
+          borderRadius: BorderRadius.only(
+            topLeft: _borderRadius,
+            topRight: _borderRadius,
+          ),
+        ),
+        builder: (BuildContext context) {
+          return StatefulBuilder(builder: (
+            BuildContext context,
+            StateSetter stateSetter,
+          ) {
+            return Container(
+              height: SizeConfig.height * .45,
+              decoration: const BoxDecoration(
+                color: Colors.white,
+                borderRadius: BorderRadius.vertical(
+                  top: Radius.circular(20),
+                ),
+              ),
+              padding: const EdgeInsets.all(16),
+              child: Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  Row(
+                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                    children: [
+                      Text(
+                        name,
+                        style: const TextStyle(
+                          color: ColorPalette.slate800,
+                          fontSize: 16,
+                          fontWeight: FontWeight.w600,
+                        ),
+                      ),
+                      IconButton(
+                          onPressed: () => Navigator.pop(context),
+                          icon: const Icon(
+                            Icons.clear,
+                            size: 26,
+                            color: ColorPalette.greyBase,
+                          )),
+                    ],
+                  ),
+                  const SizedBox(height: 16),
+                  Expanded(
+                    child: SingleChildScrollView(
+                      scrollDirection: Axis.vertical,
+                      child: Column(
+                        children: [
+                          ...listItem.map((e) {
+                            bool selected = e.text == ctrl?.text;
+                            return Card(
+                              elevation: 0,
+                              color: Colors.white,
+                              shape: RoundedRectangleBorder(
+                                side: BorderSide(
+                                  color: selected
+                                      ? ColorPalette.primary
+                                      : ColorPalette.greyBorder,
+                                ),
+                                borderRadius:
+                                    const BorderRadius.all(Radius.circular(12)),
+                              ),
+                              child: ListTile(
+                                title: Text(
+                                  e.text,
+                                  style: TextStyle(
+                                      fontSize: 16,
+                                      fontWeight: FontWeight.w500,
+                                      color: selected
+                                          ? ColorPalette.primary
+                                          : ColorPalette.slate500),
+                                ),
+                                subtitle: e.description != null
+                                    ? Text(
+                                        e.description!,
+                                        maxLines: 2,
+                                        overflow: TextOverflow.ellipsis,
+                                      )
+                                    : null,
+                                trailing: selected
+                                    ? const Icon(Icons.check_circle_rounded,
+                                        color: ColorPalette.primary)
+                                    : null,
+                                onTap: () {
+                                  stateSetter(() {
+                                    ctrl?.text = e.text;
+                                    onSelect(e.key);
+                                  });
+                                },
+                              ),
+                            );
+                          }),
+                        ],
+                      ),
+                    ),
+                  ),
+                  ButtonView(
+                    name: 'Select',
+                    marginVertical: 4.0,
+                    onPressed: () {
+                      Navigator.pop(context);
+                    },
+                  )
+                ],
+              ),
+            );
+          });
+        },
+      );
+    }
+
+    return TextFormView(
+      name: name,
+      readOnly: true,
+      enabled: enabled ?? true,
+      onTap: () {
+        if (listItem.isNotEmpty) bottomSheet();
+      },
+      validator: validator,
+      hintText: hintText,
+      hintTextStyle: hintTextStyle,
+      ctrl: ctrl,
+      suffixIcon: Icon(
+        Icons.keyboard_arrow_down,
+        size: SizeConfig.width * .07,
+      ),
+    );
+  }
+}

lib/application/component/set_pin_view/set_pin_view.dart

@@ -0,0 +1,135 @@
+import 'package:cims_apps/application/assets/path_assets.dart';
+import 'package:cims_apps/application/component/custom_app_bar/custom_app_bar.dart';
+import 'package:cims_apps/application/component/image/image_view.dart';
+import 'package:cims_apps/application/component/set_pin_view/set_pin_viewmodel.dart';
+import 'package:cims_apps/application/theme/color_palette.dart';
+import 'package:cims_apps/core/route/route.dart';
+import 'package:cims_apps/core/utils/size_config.dart';
+import 'package:cims_apps/features/auth/registration/view/registration_success_view.dart';
+import 'package:flutter/material.dart';
+import 'package:pinput/pinput.dart';
+import 'package:provider/provider.dart';
+
+class SetPinView extends StatelessWidget {
+  final String currentPin;
+  final void Function(BuildContext context, String pin) submitPin;
+
+  const SetPinView({
+    Key? key,
+    required this.currentPin,
+    required this.submitPin,
+  }) : super(key: key);
+
+  Widget _stepItem({bool isCurrentStep = false, bool isDone = false}) {
+    return Container(
+      margin:
+          const EdgeInsets.only(right: 4.0, left: 4.0, top: 16.0, bottom: 40.0),
+      height: 6,
+      width: SizeConfig.width * .08,
+      decoration: BoxDecoration(
+        color: isCurrentStep || isDone
+            ? ColorPalette.primary
+            : ColorPalette.greyBorderNeutrals,
+        borderRadius: BorderRadius.circular(50),
+      ),
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final textTheme = Theme.of(context).textTheme;
+    final pinInputController = TextEditingController();
+    const pinInputLength = 6;
+    const defaultPinTheme = PinTheme(
+      margin: EdgeInsets.symmetric(horizontal: 4.0, vertical: 16.0),
+      textStyle: TextStyle(
+        fontSize: 22,
+        color: Colors.black,
+        fontWeight: FontWeight.w600,
+      ),
+      decoration: BoxDecoration(),
+    );
+
+    final pInputFocusNode = FocusNode();
+
+    final focusedPinTheme = defaultPinTheme.copyWith(
+      decoration: defaultPinTheme.decoration?.copyWith(),
+    );
+
+    final submittedPinTheme = defaultPinTheme.copyWith(
+      decoration: defaultPinTheme.decoration?.copyWith(),
+    );
+    final followingPinTheme = defaultPinTheme.copyWith(
+      width: 13,
+      height: 13,
+      textStyle: const TextStyle(
+        fontSize: 16,
+        color: Color.fromRGBO(30, 60, 87, 1),
+        fontWeight: FontWeight.w600,
+      ),
+      decoration: defaultPinTheme.decoration?.copyWith(
+        color: ColorPalette.white,
+        border: Border.all(color: ColorPalette.slate300),
+        borderRadius: BorderRadius.circular(100),
+      ),
+    );
+    return ChangeNotifierProvider(
+        create: (context) => SetPinViewModel(),
+        builder: (context, child) {
+          return Scaffold(
+            appBar: CustomAppBar(
+                height: SizeConfig.height * .1, title: 'Registration'),
+            body: SingleChildScrollView(
+              padding: const EdgeInsets.symmetric(horizontal: 16.0),
+              child: Consumer<SetPinViewModel>(
+                  builder: (context, provider, child) {
+                return Column(
+                  crossAxisAlignment: CrossAxisAlignment.center,
+                  children: [
+                    Row(
+                      children: List.generate(
+                        9,
+                        (index) => _stepItem(isCurrentStep: true, isDone: true),
+                      ),
+                    ),
+                    ImageView(
+                      image: PathAssets.iconLock,
+                      width: SizeConfig.width * .15,
+                    ),
+                    Text(
+                      !provider.isPinCompleted
+                          ? 'Set your PIN'
+                          : 'Confirm your PIN',
+                      style: textTheme.headlineLarge,
+                    ),
+                    Pinput(
+                      onCompleted: (pin) {
+                        if (!provider.isPinCompleted) {
+                          provider.changePin();
+                          pinInputController.clear();
+                        } else {
+                          routePush(context,
+                              routeType: RouteType.pushReplace,
+                              page: const RegistrationSuccessView());
+                        }
+                      },
+                      keyboardType: TextInputType.number,
+                      obscureText: true,
+                      autofocus: true,
+                      isCursorAnimationEnabled: false,
+                      length: pinInputLength,
+                      controller: pinInputController,
+                      defaultPinTheme: defaultPinTheme,
+                      focusNode: pInputFocusNode,
+                      focusedPinTheme: focusedPinTheme,
+                      submittedPinTheme: submittedPinTheme,
+                      followingPinTheme: followingPinTheme,
+                    ),
+                  ],
+                );
+              }),
+            ),
+          );
+        });
+  }
+}

lib/application/component/set_pin_view/set_pin_viewmodel.dart

@@ -0,0 +1,9 @@
+import 'package:flutter/material.dart';
+
+class SetPinViewModel extends ChangeNotifier {
+  bool isPinCompleted = false;
+  void changePin() {
+    isPinCompleted = !isPinCompleted;
+    notifyListeners();
+  }
+}

lib/application/component/subscribe/goal_investing_view.dart

@@ -0,0 +1,77 @@
+import 'package:cims_apps/application/assets/path_assets.dart';
+import 'package:cims_apps/application/component/subscribe/other_plan_view.dart';
+import 'package:cims_apps/application/theme/color_palette.dart';
+import 'package:cims_apps/core/route/route.dart';
+import 'package:cims_apps/core/utils/size_config.dart';
+import 'package:flutter/material.dart';
+
+class GoalInvest {
+  String icon;
+  String title;
+
+  GoalInvest(this.icon, this.title);
+}
+
+class GoalInvestingView extends StatelessWidget {
+  final void Function(String) onListSelected;
+  const GoalInvestingView({super.key, required this.onListSelected});
+
+  @override
+  Widget build(BuildContext context) {
+    List<GoalInvest> listGoalInvest = [
+      GoalInvest(PathAssets.iconToga, 'Education'),
+      GoalInvest(PathAssets.iconCake, 'Marriage'),
+      GoalInvest(PathAssets.iconHouse, 'Old age days'),
+      GoalInvest(PathAssets.iconCreatePlan, 'Other Plan'),
+    ];
+
+    return Column(
+      children:
+        listGoalInvest.asMap().entries.map((e) {
+          return Padding(
+            padding: EdgeInsets.only(top: e.key != 0 ? 16 : 0),
+            child: ListTile(
+              onTap: () {
+                if(e.value.title == 'Other Plan'){
+                  routePush(
+                    context,
+                    page: OtherPlanView(
+                      selectedPlan: (value) {
+                        onListSelected(e.value.title);
+                      },
+                    )
+                  );
+                }else{
+                  onListSelected(e.value.title);
+                }
+              },
+              shape: RoundedRectangleBorder(
+                side: BorderSide(color: ColorPalette.slate200),
+                borderRadius: BorderRadius.circular(14)
+              ),
+              leading: Container(
+                padding: EdgeInsets.all(4),
+                decoration: BoxDecoration(
+                  color: ColorPalette.blue200.withOpacity(0.5),
+                  borderRadius: BorderRadius.circular(8)
+                ),
+                child: Image.asset(
+                  e.value.icon,
+                  width: SizeConfig.width * 0.07
+                )
+              ),
+              contentPadding: EdgeInsets.symmetric(horizontal: 16, vertical: 4),
+              title: Text(e.value.title,
+                style: TextStyle(
+                  fontWeight: FontWeight.w600,
+                  fontSize: 16,
+                  color: ColorPalette.slate800
+                ),
+              ),
+              trailing: Icon(Icons.chevron_right_rounded, color: ColorPalette.slate400),
+            ),
+          );
+        }).toList()
+    );
+  }
+}

lib/application/component/subscribe/input_investment_view.dart

@@ -0,0 +1,143 @@
+import 'package:cims_apps/application/component/button/button_view.dart';
+import 'package:cims_apps/application/component/numeric_pad/numeric_pad.dart';
+import 'package:cims_apps/application/theme/color_palette.dart';
+import 'package:cims_apps/core/utils/number_formatter.dart';
+import 'package:cims_apps/core/utils/size_config.dart';
+import 'package:flutter/material.dart';
+
+class InputInvestmentView extends StatefulWidget {
+  final String selectedPlan;
+  final void Function(String value) nextMove;
+  const InputInvestmentView({super.key, required this.selectedPlan, required this.nextMove});
+
+  @override
+  State<InputInvestmentView> createState() => _InputInvestmentViewState();
+}
+
+class _InputInvestmentViewState extends State<InputInvestmentView> {
+  TextEditingController inputController = TextEditingController();
+
+  @override
+  void initState() {
+    // TODO: implement initState
+    inputController.text = 'Rp 0';
+    super.initState();
+  }
+
+  @override
+  void dispose() {
+    // TODO: implement dispose
+    super.dispose();
+    inputController.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      decoration: BoxDecoration(
+          color: Colors.white,
+          borderRadius: BorderRadius.circular(16)
+      ),
+      child: Column(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          SizedBox(height: 16),
+          Padding(
+            padding: EdgeInsets.symmetric(horizontal: 24, vertical: 12),
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                Row(
+                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                  children: [
+                    Text(widget.selectedPlan,
+                      style: TextStyle(
+                        fontSize: 20,
+                        fontWeight: FontWeight.w700,
+
+                      ),
+                    ),
+                    Row(
+                      children: [
+                        Icon(Icons.change_circle_outlined, color: ColorPalette.primary, size: 20),
+                        SizedBox(width: 4),
+                        Text('Change',
+                          style: TextStyle(
+                              fontSize: 16,
+                              fontWeight: FontWeight.w600,
+                              color: ColorPalette.primary
+                          ),
+                        )
+                      ],
+                    )
+                  ],
+                ),
+                TextField(
+                  controller: inputController,
+                  textAlign: TextAlign.center,
+                  style: TextStyle(
+                      fontSize: 28,
+                      fontWeight: FontWeight.w600,
+                      color: ColorPalette.slate800
+                  ),
+                  keyboardType: TextInputType.number,
+                  onChanged: (value) {
+                    value = value.replaceAll('Rp ', '').replaceAll('.', '');
+                    double parseValue = double.parse(value);
+                    if(value.isNotEmpty){
+                      inputController.text = NumberFormatter.numberCurrency(parseValue, 'Rp ', 'id_ID', decimalDigits: 0);
+                    }else{
+                      inputController.text = NumberFormatter.numberCurrency(0, 'Rp ', 'id_ID', decimalDigits: 0);
+                    }
+                  },
+                  decoration: InputDecoration(
+                      enabledBorder: UnderlineInputBorder(
+                        borderSide: BorderSide(
+                            color: ColorPalette.primary,
+                            width: 2
+                        ),
+                      )
+                  ),
+                ),
+                SizedBox(height: 12),
+                Text('Minimum Budget Rp1,000,000',
+                  style: TextStyle(
+                      color: ColorPalette.slate400,
+                      fontSize: 16,
+                      fontWeight: FontWeight.w600
+                  ),
+                ),
+                SizedBox(height: 16),
+                NumericPad(onNumberSelected: (p0) {
+                  String checkIsZeroInput = inputController.text.replaceAll('Rp ', '').replaceAll(',', '');
+                  String getNumeric = p0;
+                  if(p0.isNotEmpty){
+                    if(checkIsZeroInput != '0'){
+                      getNumeric = checkIsZeroInput + getNumeric;
+                    }
+                  }else{
+                    getNumeric = checkIsZeroInput.substring(0, checkIsZeroInput.length - 1);
+                  }
+                  String formatNumeric = NumberFormatter.numberCurrency(
+                      double.parse(getNumeric), 'Rp ', 'id_ID', decimalDigits: 0).replaceAll('.', ',');
+                  inputController.text = formatNumeric;
+                }),
+                SizedBox(height: 8),
+                ButtonView(
+                  name: 'Next',
+                  onPressed: () {
+                    widget.nextMove(inputController.text);
+                  },
+                  width: SizeConfig.width,
+                  heightWrapContent: true,
+                  contentPadding: EdgeInsets.symmetric(vertical: 16),
+                  marginVertical: 0,
+                )
+              ],
+            ),
+          ),
+        ],
+      ),
+    );;
+  }
+}

lib/application/component/subscribe/other_plan_view.dart

@@ -0,0 +1,182 @@
+import 'package:cims_apps/application/assets/path_assets.dart';
+import 'package:cims_apps/application/component/button/button_view.dart';
+import 'package:cims_apps/application/component/custom_app_bar/custom_app_bar.dart';
+import 'package:cims_apps/application/component/image/image_view.dart';
+import 'package:cims_apps/application/component/text_form/text_form_view.dart';
+import 'package:cims_apps/application/theme/color_palette.dart';
+import 'package:cims_apps/core/utils/size_config.dart';
+import 'package:flutter/material.dart';
+
+class Plan {
+  String img, name;
+
+  Plan(this.img, this.name);
+}
+
+class OtherPlanView extends StatefulWidget {
+  final void Function(String value) selectedPlan;
+  const OtherPlanView({super.key, required this.selectedPlan});
+
+  @override
+  State<OtherPlanView> createState() => _OtherPlanViewState();
+}
+
+class _OtherPlanViewState extends State<OtherPlanView> {
+  TextEditingController createController = TextEditingController();
+  Plan selectedPlan = Plan('', '');
+
+  List<Plan> listPlan = [
+    Plan(PathAssets.iconToga, 'Education'),
+    Plan(PathAssets.iconCake, 'Marriage'),
+    Plan(PathAssets.iconHouse, 'Home'),
+    Plan(PathAssets.iconTicket, 'Entertainment'),
+    Plan(PathAssets.iconGadget, 'Gadget'),
+    Plan(PathAssets.iconMarket, 'Business'),
+    Plan(PathAssets.iconBag, 'Fashion'),
+    Plan(PathAssets.iconCart, 'Shop'),
+    Plan(PathAssets.iconCar, 'Vehicle'),
+    Plan(PathAssets.iconPlane, 'Holiday'),
+    Plan(PathAssets.iconCreatePlan, 'Create Plan'),
+  ];
+
+  @override
+  void initState() {
+    // TODO: implement initState
+    super.initState();
+  }
+
+  @override
+  void dispose() {
+    // TODO: implement dispose
+    super.dispose();
+    createController.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: CustomAppBar(
+        height: 70,
+        title: 'Other Plan'
+      ),
+      body: GridView(
+        padding: EdgeInsets.symmetric(horizontal: 24, vertical: 32),
+        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3),
+        children: listPlan.map((e) => cardPlan(e)).toList(),
+      ),
+      bottomNavigationBar: Container(
+        height: 110,
+        padding: EdgeInsets.symmetric(horizontal: 24),
+        child: ButtonView(
+          name: 'Select',
+          disabled: !(selectedPlan.img != ''),
+          onPressed: () {
+            Navigator.pop(context);
+            widget.selectedPlan(selectedPlan.name);
+          },
+          heightWrapContent: true,
+          width: SizeConfig.width,
+          contentPadding: EdgeInsets.symmetric(vertical: 12),
+          textColor: selectedPlan.img == '' ? ColorPalette.slate500 : ColorPalette.white,
+          disabledBgColor: ColorPalette.slate200,
+          backgroundColor: ColorPalette.primary,
+        ),
+      ),
+    );
+  }
+
+  Widget cardPlan(Plan plan) {
+    return GestureDetector(
+      onTap: () {
+        if(plan.name == 'Create Plan'){
+          showModalBottomSheet(
+            context: context,
+            builder: (context) => modalCreatePlan(),
+          );
+        }
+        setState(() {
+          selectedPlan = plan;
+        });
+      },
+      child: Container(
+        padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
+        decoration: BoxDecoration(
+          borderRadius: BorderRadius.circular(16),
+          border: Border.all(color: selectedPlan == plan ? ColorPalette.primary : Colors.transparent)
+        ),
+        child: Column(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            Container(
+              width: SizeConfig.width * 0.12,
+              height: SizeConfig.width * 0.12,
+              padding: EdgeInsets.all(12),
+              alignment: Alignment.center,
+              decoration: BoxDecoration(
+                borderRadius: BorderRadius.circular(8),
+                color: ColorPalette.blue200.withOpacity(0.5)
+              ),
+              child: ImageView(image: plan.img)
+            ),
+            SizedBox(height: 12),
+            Text(plan.name,
+              style: TextStyle(
+                color: selectedPlan == plan ? ColorPalette.primary : ColorPalette.slate800,
+                fontWeight: FontWeight.w600
+              ),
+            )
+          ],
+        ),
+      ),
+    );
+  }
+
+  Widget modalCreatePlan() {
+    return Container(
+      padding: EdgeInsets.all(24),
+      child: Column(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          Row(
+            mainAxisAlignment: MainAxisAlignment.spaceBetween,
+            children: [
+              Text('Create your plan',
+                style: TextStyle(
+                  fontWeight: FontWeight.w600,
+                  color: ColorPalette.slate800,
+                  fontSize: 16
+                ),
+              ),
+              GestureDetector(
+                onTap: () {
+                  Navigator.pop(context);
+                },
+                child: Icon(Icons.close_rounded),
+              )
+            ],
+          ),
+          TextFormView(
+            name: 'Objective Name',
+            ctrl: createController,
+          ),
+          SizedBox(height: 24),
+          ButtonView(
+            name: 'Select',
+            marginVertical: 0,
+            disabled: !(createController.text != ''),
+            onPressed: () {
+              Navigator.of(context)..pop()..pop();
+              widget.selectedPlan(selectedPlan.name);
+            },
+            heightWrapContent: true,
+            width: SizeConfig.width,
+            contentPadding: EdgeInsets.symmetric(vertical: 16),
+            textColor: createController.text == '' ? ColorPalette.slate500 : ColorPalette.white,
+            disabledBgColor: ColorPalette.slate200,
+            backgroundColor: ColorPalette.primary,
+          ),
+        ],
+      ),
+    );
+  }
+}

lib/application/component/subscribe/total_payment_view.dart

@@ -0,0 +1,255 @@
+import 'package:cims_apps/application/component/button/button_view.dart';
+import 'package:cims_apps/application/theme/color_palette.dart';
+import 'package:cims_apps/core/route/route.dart';
+import 'package:cims_apps/core/utils/number_formatter.dart';
+import 'package:cims_apps/features/dashboard/dashboard_account/view/product/view/step_subscribe/payment_method_view.dart';
+import 'package:cims_apps/features/dashboard/dashboard_account/view/product/view_model/product_view_model.dart';
+import 'package:flutter/material.dart';
+
+class TotalPaymentView extends StatefulWidget {
+  final int totalInvest;
+  final List<Product> listProduct;
+  const TotalPaymentView({
+    super.key,
+    required this.listProduct,
+    required this.totalInvest,
+  });
+
+  @override
+  State<TotalPaymentView> createState() => _TotalPaymentViewState();
+}
+
+class _TotalPaymentViewState extends State<TotalPaymentView> {
+  bool isAgreement = false;
+
+  @override
+  Widget build(BuildContext context) {
+    return SingleChildScrollView(
+      child: Container(
+        decoration: BoxDecoration(
+            color: Colors.white, borderRadius: BorderRadius.circular(16)),
+        child: Column(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            Padding(
+              padding: const EdgeInsets.all(24.0),
+              child: Row(
+                mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                children: [
+                  const Text(
+                    'Your Investment Today',
+                    style: TextStyle(
+                        color: ColorPalette.slate800,
+                        fontWeight: FontWeight.w600,
+                        fontSize: 16),
+                  ),
+                  GestureDetector(
+                      onTap: () => Navigator.pop(context),
+                      child: const Icon(Icons.close_rounded))
+                ],
+              ),
+            ),
+            ...widget.listProduct.asMap().entries.map((e) {
+              return Container(
+                padding: const EdgeInsets.only(
+                    left: 16, right: 24, bottom: 16, top: 16),
+                decoration: BoxDecoration(
+                    border: Border(
+                        left: BorderSide(
+                            width: 8,
+                            color:
+                                ColorPalette.investTypeColor[e.value.type]!))),
+                child: Row(
+                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                  children: [
+                    Expanded(
+                        flex: 5,
+                        child: Text(
+                          e.value.name ?? '',
+                          style: const TextStyle(
+                              color: ColorPalette.slate400,
+                              fontWeight: FontWeight.w600,
+                              fontSize: 16),
+                        )),
+                    Expanded(
+                        flex: 7,
+                        child: Text(
+                          NumberFormatter.numberCurrency(
+                              widget.totalInvest * e.value.totalPercent!,
+                              'Rp ',
+                              'id_ID'),
+                          textAlign: TextAlign.end,
+                          style: const TextStyle(
+                              fontWeight: FontWeight.w700,
+                              fontSize: 18,
+                              color: ColorPalette.slate800),
+                        ))
+                  ],
+                ),
+              );
+            }).toList(),
+            const SizedBox(height: 16),
+            const Padding(
+              padding: EdgeInsets.symmetric(horizontal: 24),
+              child: Row(
+                mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                children: [
+                  Text(
+                    'Purchase Commission',
+                    style: TextStyle(
+                        color: ColorPalette.slate400,
+                        fontWeight: FontWeight.w600,
+                        fontSize: 16),
+                  ),
+                  Text(
+                    'Free',
+                    style: TextStyle(
+                        color: ColorPalette.primary,
+                        fontSize: 18,
+                        fontWeight: FontWeight.w700),
+                  )
+                ],
+              ),
+            ),
+            const SizedBox(
+              height: 16,
+            ),
+            Container(
+              color: ColorPalette.slate200.withOpacity(0.5),
+              padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 16),
+              child: Row(
+                mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                children: [
+                  const Text(
+                    'Total',
+                    style: TextStyle(
+                        color: ColorPalette.slate400,
+                        fontWeight: FontWeight.w600,
+                        fontSize: 16),
+                  ),
+                  Text(
+                    NumberFormatter.numberCurrency(
+                        widget.totalInvest, 'Rp ', 'id_ID'),
+                    textAlign: TextAlign.end,
+                    style: const TextStyle(
+                        fontWeight: FontWeight.w700,
+                        fontSize: 18,
+                        color: ColorPalette.slate800),
+                  )
+                ],
+              ),
+            ),
+            buttonAgreement(),
+            Container(
+              padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 16),
+              child: Row(
+                mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                children: [
+                  const Text(
+                    'Total Payment',
+                    style: TextStyle(
+                        color: ColorPalette.slate400,
+                        fontWeight: FontWeight.w600,
+                        fontSize: 16),
+                  ),
+                  Text(
+                    NumberFormatter.numberCurrency(
+                        widget.totalInvest, 'Rp ', 'id_ID'),
+                    textAlign: TextAlign.end,
+                    style: const TextStyle(
+                        fontWeight: FontWeight.w700,
+                        fontSize: 18,
+                        color: ColorPalette.slate800),
+                  )
+                ],
+              ),
+            ),
+            ButtonView(
+              disabled: !isAgreement,
+              name: 'Subscribe Now',
+              onPressed: () {
+                routePush(context,
+                    page: PaymentMethodView(
+                      totalInvest: widget.totalInvest,
+                    ));
+              },
+              disabledBgColor: ColorPalette.slate200.withOpacity(0.5),
+              textColor: isAgreement ? Colors.white : ColorPalette.slate400,
+              textWeight: FontWeight.w700,
+              textSize: 20,
+              backgroundColor: ColorPalette.primary,
+            )
+          ],
+        ),
+      ),
+    );
+  }
+
+  Widget buttonAgreement() {
+    bool isAgree = isAgreement;
+    return Padding(
+      padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 16),
+      child: Row(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          GestureDetector(
+            onTap: () {
+              setState(() {
+                isAgreement = !isAgreement;
+              });
+            },
+            child: AnimatedContainer(
+              margin: const EdgeInsets.only(top: 4),
+              duration: const Duration(milliseconds: 200),
+              height: 16,
+              width: 16,
+              padding: const EdgeInsets.all(1),
+              alignment: Alignment.center,
+              decoration: BoxDecoration(
+                  shape: BoxShape.circle,
+                  border: Border.all(
+                      color: isAgree
+                          ? ColorPalette.primary
+                          : ColorPalette.slate200)),
+              child: AnimatedContainer(
+                duration: const Duration(milliseconds: 200),
+                child: Container(
+                  decoration: BoxDecoration(
+                      color:
+                          isAgree ? ColorPalette.primary : ColorPalette.white,
+                      shape: BoxShape.circle),
+                ),
+              ),
+            ),
+          ),
+          const SizedBox(
+            width: 12,
+          ),
+          Expanded(
+              child: Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              const Text(
+                'I agree to buy the mutual fund on this page and have read and agreed to all the contents of the Prospectus and summary information and understand the risks of my investment decision.',
+                style: TextStyle(
+                    fontSize: 16,
+                    fontWeight: FontWeight.w600,
+                    color: ColorPalette.slate400),
+              ),
+              GestureDetector(
+                  onTap: () {},
+                  child: const Text(
+                    'Read More',
+                    style: TextStyle(
+                        fontSize: 16,
+                        fontWeight: FontWeight.w600,
+                        decoration: TextDecoration.underline,
+                        color: ColorPalette.primary),
+                  ))
+            ],
+          ))
+        ],
+      ),
+    );
+  }
+}

lib/application/component/success_view.dart

@@ -0,0 +1,52 @@
+import 'package:cims_apps/application/component/button/button_view.dart';
+import 'package:cims_apps/application/component/image/image_view.dart';
+import 'package:cims_apps/core/utils/size_config.dart';
+import 'package:flutter/material.dart';
+
+class SuccessView extends StatelessWidget {
+  final String img;
+  final String textTitle;
+  final Widget? subtitle;
+  final void Function() nextRoute;
+  const SuccessView({super.key,
+    required this.img,
+    required this.textTitle,
+    required this.subtitle,
+    required this.nextRoute
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      body: Center(
+        child: Column(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            ImageView(image: img, width: SizeConfig.width * .8,),
+            Text(textTitle,
+              style: TextStyle(
+                fontWeight: FontWeight.w700,
+                fontSize: 28,
+              ),
+            ),
+            subtitle ?? SizedBox()
+          ],
+        ),
+      ),
+      bottomNavigationBar: Container(
+        padding: EdgeInsets.all(24),
+        height: 110,
+        width: SizeConfig.width,
+        child: ButtonView(
+          name: 'Done',
+          onPressed: nextRoute,
+          marginVertical: 0,
+          heightWrapContent: true,
+          width: SizeConfig.width,
+          textSize: 20,
+          contentPadding: EdgeInsets.symmetric(vertical: 12),
+        ),
+      ),
+    );
+  }
+}

lib/application/component/take_picture_screen/display_picture_screen.dart

@@ -0,0 +1,216 @@
+import 'dart:io';
+
+import 'package:cims_apps/application/assets/path_assets.dart';
+import 'package:cims_apps/application/component/button/button_view.dart';
+import 'package:cims_apps/application/component/image/image_view.dart';
+import 'package:cims_apps/application/component/take_picture_screen/take_picture_screen.dart';
+import 'package:cims_apps/application/theme/color_palette.dart';
+import 'package:cims_apps/core/route/route.dart';
+import 'package:cims_apps/core/utils/size_config.dart';
+import 'package:cims_apps/features/auth/registration/view/submission_data/submission_parent.dart';
+import 'package:cims_apps/features/auth/registration/viewmodel/submission_data_viewmodel.dart';
+import 'package:flutter/material.dart';
+import 'package:provider/provider.dart';
+import 'package:shared_preferences/shared_preferences.dart';
+
+class DisplayPictureScreen extends StatefulWidget {
+  final String imagePath, content;
+
+  const DisplayPictureScreen(
+      {super.key, required this.imagePath, required this.content});
+
+  @override
+  State<DisplayPictureScreen> createState() => _DisplayPictureScreenState();
+}
+
+class _DisplayPictureScreenState extends State<DisplayPictureScreen> {
+  Future<void> saveData() async {
+    SharedPreferences prefs = await SharedPreferences.getInstance();
+    if (widget.content == 'ktp') {
+      prefs.setString('imagePath', widget.imagePath);
+    } else {
+      prefs.setString('imagePathSelfie', widget.imagePath);
+    }
+  }
+
+  @override
+  void initState() {
+    saveData();
+    super.initState();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    List listIcons = [
+      {
+        'key': 'ktp',
+        'urlImg': PathAssets.iconKtp1,
+        'tag': 'ID card that matches your identity'
+      },
+      {
+        'key': 'ktp',
+        'urlImg': PathAssets.iconKtp2,
+        'tag': 'ID card is not glare & blurry'
+      },
+      {
+        'key': 'ktp',
+        'urlImg': PathAssets.iconKtp3,
+        'tag': 'ID card is clearly legible and not cut'
+      },
+      {
+        'key': 'ktp',
+        'urlImg': PathAssets.iconKtp4,
+        'tag': 'No objects other than ID cards in the photo'
+      },
+      {
+        'key': 'selfie',
+        'urlImg': PathAssets.iconSelfie1,
+        'tag': 'Good lighting, not dark and no reflections',
+      },
+      {
+        'key': 'selfie',
+        'urlImg': PathAssets.iconSelfie2,
+        'tag': 'ID card does not cover the face',
+      },
+      {
+        'key': 'selfie',
+        'urlImg': PathAssets.iconSelfie3,
+        'tag': 'Face not covered by mask, hat or glasses'
+      },
+      {
+        'key': 'selfie',
+        'urlImg': PathAssets.iconSelfie4,
+        'tag': 'Face and ID card are clear and not blurry'
+      },
+    ];
+    return MultiProvider(
+        providers: [
+          ChangeNotifierProvider(
+            create: (context) => SubmissionDataViewModel(),
+          )
+        ],
+        builder: (context, child) {
+          return Consumer<SubmissionDataViewModel>(
+              builder: (context, provider, child) {
+            return Scaffold(
+              appBar: AppBar(
+                title: const Text('Preview'),
+                automaticallyImplyLeading: false,
+              ),
+              body: Container(
+                  padding: const EdgeInsets.symmetric(horizontal: 24.0),
+                  child: Column(
+                    mainAxisAlignment: MainAxisAlignment.start,
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    children: [
+                      SizedBox(
+                          width: SizeConfig.width,
+                          height: SizeConfig.height * .4,
+                          child: Image.file(File(widget.imagePath))),
+                      const Padding(
+                        padding: EdgeInsets.symmetric(vertical: 16.0),
+                        child: Text(
+                          'Make sure the photo meets the requirements:',
+                          style: TextStyle(
+                            fontSize: 14,
+                            fontWeight: FontWeight.w700,
+                            color: ColorPalette.slate800,
+                          ),
+                        ),
+                      ),
+                      Wrap(
+                        alignment: WrapAlignment.spaceBetween,
+                        spacing: 8,
+                        runSpacing: 8,
+                        children: List.generate(4, (index) {
+                          List filteredList = listIcons
+                              .where(
+                                  (element) => element['key'] == widget.content)
+                              .toList();
+                          final urlImg = filteredList[index]['urlImg'];
+                          final tag = filteredList[index]['tag'];
+
+                          return Column(
+                            children: [
+                              Container(
+                                width: SizeConfig.width * .42,
+                                height: SizeConfig.height * .13,
+                                padding: const EdgeInsets.symmetric(
+                                    vertical: 8.0, horizontal: 8.0),
+                                decoration: BoxDecoration(
+                                    color: ColorPalette.blue50,
+                                    borderRadius: BorderRadius.circular(6.0)),
+                                child: Column(
+                                  mainAxisAlignment: MainAxisAlignment.center,
+                                  crossAxisAlignment: CrossAxisAlignment.start,
+                                  children: [
+                                    Padding(
+                                      padding:
+                                          const EdgeInsets.only(bottom: 8.0),
+                                      child: ImageView(
+                                        image: urlImg,
+                                        width: SizeConfig.width * .1,
+                                      ),
+                                    ),
+                                    Expanded(
+                                      child: Text(
+                                        tag,
+                                        maxLines: 2,
+                                        overflow: TextOverflow.ellipsis,
+                                        style: const TextStyle(
+                                            fontSize: 14,
+                                            color: ColorPalette.slate800,
+                                            fontWeight: FontWeight.normal),
+                                      ),
+                                    ),
+                                  ],
+                                ),
+                              ),
+                            ],
+                          );
+                        }),
+                      ),
+                      const Spacer(),
+                      Row(
+                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                        children: [
+                          SizedBox(
+                            width: SizeConfig.width * .42,
+                            child: ButtonView(
+                              name: 'Retake',
+                              isOutlined: true,
+                              marginVertical: 8.0,
+                              onPressed: () {
+                                provider.initCamera().then((cameras) {
+                                  routePush(context,
+                                      page: TakePictureScreen(
+                                        camera: widget.content == 'ktp'
+                                            ? cameras[0]
+                                            : cameras[1],
+                                        takeContent: widget.content,
+                                      ));
+                                });
+                              },
+                            ),
+                          ),
+                          SizedBox(
+                            width: SizeConfig.width * .4,
+                            child: ButtonView(
+                              marginVertical: 0.0,
+                              name: 'Next',
+                              onPressed: () {
+                                provider.nextSubmission(context);
+                                routePush(context,
+                                    page: const SubmissionParent());
+                              },
+                            ),
+                          ),
+                        ],
+                      )
+                    ],
+                  )),
+            );
+          });
+        });
+  }
+}

lib/application/component/take_picture_screen/take_picture_screen.dart

@@ -0,0 +1,140 @@
+import 'package:camera/camera.dart';
+import 'package:cims_apps/application/assets/path_assets.dart';
+import 'package:cims_apps/application/component/image/image_view.dart';
+import 'package:cims_apps/application/component/take_picture_screen/display_picture_screen.dart';
+import 'package:cims_apps/core/route/route.dart';
+import 'package:cims_apps/core/utils/size_config.dart';
+import 'package:flutter/material.dart';
+
+class TakePictureScreen extends StatefulWidget {
+  const TakePictureScreen({
+    super.key,
+    required this.camera,
+    required this.takeContent,
+  });
+
+  final CameraDescription camera;
+  final String takeContent;
+
+  @override
+  TakePictureScreenState createState() => TakePictureScreenState();
+}
+
+class TakePictureScreenState extends State<TakePictureScreen> {
+  late CameraController _controller;
+  late Future<void> _initializeControllerFuture;
+  bool isFlash = false;
+  late String _takeContent;
+
+  Future<void> changeFlash() async {
+    await _controller.setFlashMode(FlashMode.auto);
+    setState(() {
+      isFlash = !isFlash;
+    });
+  }
+
+  @override
+  void initState() {
+    super.initState();
+    _controller = CameraController(
+      widget.camera,
+      ResolutionPreset.medium,
+      enableAudio: false,
+    );
+    // Next, initialize the controller. This returns a Future.
+    _initializeControllerFuture = _controller.initialize();
+    _takeContent = widget.takeContent;
+  }
+
+  @override
+  void dispose() {
+    // Dispose of the controller when the widget is disposed.
+    _controller.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    // Fill this out in the next steps.
+    return Scaffold(
+      appBar: AppBar(
+        title: const Text('Registration'),
+        actions: [
+          IconButton(
+              onPressed: () {
+                changeFlash();
+              },
+              icon: Icon(isFlash ? Icons.flash_on : Icons.flash_off))
+        ],
+      ),
+      body: FutureBuilder<void>(
+        future: _initializeControllerFuture,
+        builder: (context, snapshot) {
+          if (snapshot.connectionState == ConnectionState.done) {
+            // If the Future is complete, display the preview.
+            return Stack(
+              children: [
+                SizedBox(
+                    width: SizeConfig.width,
+                    height: SizeConfig.height,
+                    child: CameraPreview(_controller)),
+                Container(
+                  decoration: BoxDecoration(
+                    gradient: LinearGradient(
+                      begin: Alignment.topCenter,
+                      end: Alignment.bottomCenter,
+                      colors: [
+                        Colors.transparent,
+                        Colors.black.withOpacity(0.5),
+                      ],
+                    ),
+                  ),
+                  child: ImageView(
+                    image: _takeContent == 'ktp'
+                        ? PathAssets.imgBgKtp
+                        : PathAssets.imgBgSelfie,
+                    width: SizeConfig.width,
+                    height: SizeConfig.height,
+                  ),
+                ),
+                Align(
+                  alignment: Alignment.bottomCenter,
+                  child: IconButton(
+                    onPressed: () async {
+                      try {
+                        // Ensure that the camera is initialized.
+                        await _initializeControllerFuture;
+
+                        // Attempt to take a picture and get the file `image`
+                        // where it was saved.
+                        final image = await _controller.takePicture();
+
+                        if (!mounted) return;
+                        routePush(context,
+                            page: DisplayPictureScreen(
+                              imagePath: image.path,
+                              content: _takeContent,
+                            ),
+                            routeType: RouteType.pushReplace);
+                      } catch (e) {
+                        // If an error occurs, log the error to the console.
+                        debugPrint(e.toString());
+                      }
+                    },
+                    icon: Icon(
+                      Icons.album_outlined,
+                      color: Colors.white,
+                      size: SizeConfig.width * .16,
+                    ),
+                  ),
+                )
+              ],
+            );
+          } else {
+            return const Center(child: CircularProgressIndicator());
+          }
+        },
+      ),
+    );
+  }
+}

lib/application/component/text_caption/text_caption.dart

@@ -3,10 +3,15 @@ import 'package:flutter/material.dart';
 
 class TextCaption extends StatelessWidget {
   final String title, subtitle;
+  final TextAlign? textAlign, textAlignSubtitle;
+  final CrossAxisAlignment? crossAxisAlignment;
   const TextCaption({
     Key? key,
     required this.title,
     this.subtitle = '',
+    this.textAlignSubtitle,
+    this.crossAxisAlignment,
+    this.textAlign,
   }) : super(key: key);
 
   @override
@@ -14,11 +19,12 @@ class TextCaption extends StatelessWidget {
     return Padding(
       padding: const EdgeInsets.only(bottom: 32.0),
       child: Column(
-        crossAxisAlignment: CrossAxisAlignment.start,
+        crossAxisAlignment: crossAxisAlignment ?? CrossAxisAlignment.start,
         mainAxisAlignment: MainAxisAlignment.spaceBetween,
         children: [
           Text(
             title,
+            textAlign: textAlign ?? TextAlign.start,
             style: const TextStyle(
               fontSize: 24,
               fontWeight: FontWeight.w700,
@@ -30,10 +36,11 @@ class TextCaption extends StatelessWidget {
                   padding: const EdgeInsets.only(top: 8.0),
                   child: Text(
                     subtitle,
+                    textAlign: textAlignSubtitle ?? TextAlign.start,
                     style: const TextStyle(
                       fontSize: 16,
                       fontWeight: FontWeight.w500,
-                      color: ColorPalette.slate800,
+                      color: ColorPalette.slate500,
                     ),
                   ),
                 )

lib/application/component/text_form/text_form_view.dart

@@ -5,6 +5,7 @@ import 'package:remove_emoji_input_formatter/remove_emoji_input_formatter.dart';
 
 class TextFormView extends StatelessWidget {
   final String name;
+  final double nameSize;
   final String? helperText;
   final String? initialValue;
   final VoidCallback? onTap;
@@ -14,7 +15,7 @@ class TextFormView extends StatelessWidget {
   final String? hintText, errorText;
   final TextEditingController? ctrl;
   final Widget? suffixIcon, suffixLable;
-  final Widget? prefixIcon;
+  final Widget? prefixIcon, prefix;
   final TextInputType? keyboardType;
   final FormFieldValidator<String>? validator;
   final bool obscureText;
@@ -33,12 +34,14 @@ class TextFormView extends StatelessWidget {
   final Color? disabledborderColor;
   final bool? enableInteractiveSelection;
   final Color? fontColorDisabled;
+  final EdgeInsets? contentPadding;
   final FocusNode? focusNode;
 
   // ignore: prefer_const_constructors_in_immutables
   TextFormView(
       {Key? key,
       required this.name,
+      this.nameSize = 16,
       this.helperText,
       this.onTap,
       this.fontColorDisabled,
@@ -69,8 +72,10 @@ class TextFormView extends StatelessWidget {
       this.preffixIconConstraints,
       this.disableColor = false,
       this.enableInteractiveSelection = true,
+      this.contentPadding,
       this.focusNode,
-      this.isTextAlignCenter = false})
+      this.isTextAlignCenter = false,
+      this.prefix})
       : super(key: key);
 
   @override
@@ -78,30 +83,33 @@ class TextFormView extends StatelessWidget {
     if (inputFormatters != null && maxLength != null) {
       inputFormatters?.add(LengthLimitingTextInputFormatter(maxLength));
     }
-    return Column(
+    return Padding(
+      padding: const EdgeInsets.symmetric(vertical: 8.0),
+      child: Column(
         crossAxisAlignment: CrossAxisAlignment.start,
         children: [
           Row(
-          mainAxisAlignment: MainAxisAlignment.start,
+            mainAxisAlignment: MainAxisAlignment.spaceBetween,
             children: [
               name.isNotEmpty
-                ? validator != null
+                  // ? validator != null
                   ? Row(
-                        mainAxisAlignment: MainAxisAlignment.start,
-                        crossAxisAlignment: CrossAxisAlignment.start,
+                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                      crossAxisAlignment: CrossAxisAlignment.center,
                       children: [
                         Text(
                           name,
-                            style: const TextStyle(
-                              fontSize: 16,
-                              color: ColorPalette.greyLight,
+                          style: TextStyle(
+                            fontSize: nameSize,
+                            fontWeight: FontWeight.w600,
+                            color: ColorPalette.slate800,
                           ),
                         ),
                         suffixLable ??
-                              const Text(
-                                " * ",
+                            Text(
+                              "",
                               style: TextStyle(
-                                  fontSize: 16,
+                                fontSize: nameSize,
                                 color: Colors.red,
                               ),
                             ),
@@ -112,8 +120,8 @@ class TextFormView extends StatelessWidget {
                       style: const TextStyle(
                         fontSize: 16,
                       ),
-                      )
-                : const SizedBox(),
+                    ),
+              // : const SizedBox(),
               trailingTitleWidget ?? const SizedBox(),
             ],
           ),
@@ -126,14 +134,14 @@ class TextFormView extends StatelessWidget {
             initialValue: initialValue,
             enabled: enabled,
             controller: ctrl,
-          // maxLength: maxLength,
+            maxLength: maxLength,
             keyboardType: keyboardType,
             onTap: onTap,
             onEditingComplete: onSubmit,
             style: TextStyle(
-            fontWeight: FontWeight.bold,
+              fontWeight: FontWeight.w500,
               fontSize: 14,
-            color: fontColorDisabled ?? Colors.black,
+              color: fontColorDisabled ?? ColorPalette.slate800,
             ),
             readOnly: readOnly,
             validator: validator,
@@ -155,7 +163,7 @@ class TextFormView extends StatelessWidget {
                 hintStyle: hintTextStyle ??
                     const TextStyle(
                       fontSize: 14,
-                  color: Colors.grey,
+                      color: ColorPalette.slate400,
                       fontWeight: FontWeight.normal,
                     ),
                 isDense: true,
@@ -167,19 +175,19 @@ class TextFormView extends StatelessWidget {
                 disabledBorder: OutlineInputBorder(
                   borderRadius: _borderRadius,
                   borderSide: BorderSide(
-                color: disabledborderColor ?? ColorPalette.greyFont,
+                    color: disabledborderColor ?? ColorPalette.greyBorder,
                   ),
                 ),
                 enabledBorder: OutlineInputBorder(
                   borderRadius: _borderRadius,
                   borderSide: BorderSide(
-                color: enabledborderColor ?? ColorPalette.greyBase,
+                    color: enabledborderColor ?? ColorPalette.greyBorder,
                   ),
                 ),
                 focusedBorder: OutlineInputBorder(
                   borderRadius: _borderRadius,
                   borderSide: BorderSide(
-                color: focusedBorderColor ?? ColorPalette.greyBase,
+                    color: focusedBorderColor ?? ColorPalette.greyBorder,
                   ),
                 ),
                 border: OutlineInputBorder(borderRadius: _borderRadius),
@@ -187,9 +195,15 @@ class TextFormView extends StatelessWidget {
                 prefixIcon: prefixIcon,
                 suffixIconConstraints: suffixIconConstraints,
                 prefixIconConstraints: preffixIconConstraints,
-          ),
+                prefix: prefix,
+                contentPadding: contentPadding ??
+                    const EdgeInsets.symmetric(
+                      horizontal: 8.0,
+                      vertical: 16.0,
+                    )),
           )
         ],
+      ),
     );
   }
 }

lib/application/component/text_title/text_title.dart

@@ -0,0 +1,26 @@
+import 'package:cims_apps/application/theme/color_palette.dart';
+import 'package:flutter/cupertino.dart';
+
+class TextTitle extends StatelessWidget {
+  final String title;
+  final Color? color;
+  final double? fontSize;
+  const TextTitle({
+    Key? key,
+    required this.title,
+    this.color,
+    this.fontSize,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Text(
+      title,
+      style: TextStyle(
+        fontSize: fontSize ?? 20,
+        fontWeight: FontWeight.w700,
+        color: color ?? ColorPalette.slate800,
+      ),
+    );
+  }
+}

lib/application/theme/color_palette.dart

@@ -73,5 +73,37 @@ class ColorPalette {
   static const Color chathamsBlue = Color(0xFF285BB9);
   static const Color background = Color(0xFFDADADA);
   static const Color backgroundBlueLight = Color(0xFFEBF3FD);
+  static const Color blue50 = Color(0xFFEFF6FF);
+  static const Color blue200 = Color(0xFFBFDBFE);
+  static const Color blue900 = Color(0xFF1E3A8A);
+  static const Color slate50 = Color(0xFFF8FAFC);
+  static const Color slate200 = Color(0xFFE2E8F0);
+  static const Color slate300 = Color(0xFFCBD5E1);
+  static const Color slate400 = Color(0xFF94A3B8);
+  static const Color slate500 = Color(0xFF64748B);
   static const Color slate800 = Color(0xFF1E293B);
+  static const Color purple100 = Color(0xFFEDE9FE);
+  static const Color purple500 = Color(0xFF8B5CF6);
+  static const Color orange50 = Color(0xFFFFF7ED);
+  static const Color orange100 = Color(0xFFFFEDD5);
+  static const Color orange500 = Color(0xFFF97316);
+  static const Color cyan100 = Color(0xFFCFFAFE);
+  static const Color cyan500 = Color(0xFF06B6D4);
+  static const Color green100 = Color(0xFFDCFCE7);
+  static const Color green400 = Color(0xFF4ADE80);
+  static const Color green500 = Color(0xFF16A34A);
+
+  static const Map<String, Color> investTypeColor = {
+    'Money Market': purple500,
+    'Shares': orange500,
+    'Sharia': green500,
+    'Bonds': cyan500
+  };
+
+  static const Map<String, Color> investTypeBgColor = {
+    'Money Market': purple100,
+    'Shares': orange100,
+    'Sharia': green100,
+    'Bonds': cyan100
+  };
 }

lib/core/utils/date_formatter.dart

@@ -0,0 +1,3 @@
+class DateFormatter {
+
+}

lib/core/utils/number_formatter.dart

@@ -0,0 +1,19 @@
+import 'package:intl/intl.dart';
+
+class NumberFormatter {
+  NumberFormatter._();
+
+  static String numberCurrency(dynamic value, String symbol, String locale, {int? decimalDigits = 2}) {
+    NumberFormat numberFormat = NumberFormat.currency(locale: locale, symbol: symbol, decimalDigits: decimalDigits);
+    String formatValue = numberFormat.format(value);
+
+    return formatValue;
+  }
+
+  static compactCurrency(dynamic value, String symbol, String locale) {
+    NumberFormat numberFormat = NumberFormat.compactCurrency(locale: locale, symbol: symbol);
+    String formatValue = numberFormat.format(value);
+
+    return formatValue;
+  }
+}

lib/core/utils/string_utils.dart

@@ -0,0 +1,16 @@
+class StringUtils {
+  static bool emailValidation(String email) {
+    return RegExp(
+            r'^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$')
+        .hasMatch(email);
+  }
+
+  static bool phoneValidation(String phone) {
+    return RegExp(r'^(\+62|62|0)8[1-9][0-9]{6,10}$').hasMatch(phone);
+  }
+
+  static bool passwordValidation(String password) {
+    return RegExp(r'^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*?[\W_])(?=.{8,})')
+        .hasMatch(password);
+  }
+}

lib/features/auth/login/view/login_view.dart

@@ -0,0 +1,93 @@
+import 'package:cims_apps/application/component/button/back_button_view.dart';
+import 'package:cims_apps/application/theme/color_palette.dart';
+import 'package:cims_apps/core/route/route.dart';
+import 'package:cims_apps/core/utils/size_config.dart';
+import 'package:cims_apps/features/auth/login/view/password_view.dart';
+import 'package:cims_apps/features/auth/login/view/phone_number_view.dart';
+import 'package:cims_apps/features/auth/login/view_model/login_view_model.dart';
+import 'package:cims_apps/features/bottom_navigation_view.dart';
+import 'package:flutter/material.dart';
+import 'package:provider/provider.dart';
+
+class LoginView extends StatefulWidget {
+  const LoginView({super.key});
+
+  @override
+  State<LoginView> createState() => _LoginViewState();
+}
+
+class _LoginViewState extends State<LoginView> {
+  int currentPage = 0;
+  PageController pageController = PageController(initialPage: 0);
+  TextEditingController phoneNumberController = TextEditingController();
+  TextEditingController passwordController = TextEditingController();
+
+  @override
+  void dispose() {
+    // TODO: implement dispose
+    pageController.dispose();
+    phoneNumberController.dispose();
+    passwordController.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return ChangeNotifierProvider(
+      create: (context) => LoginViewModel(),
+      child: WillPopScope(
+        onWillPop: () async {
+          if (currentPage == 1) {
+            currentPage--;
+            pageController.jumpToPage(0);
+            return false;
+          }
+          return true;
+        },
+        child: Scaffold(
+          backgroundColor: Colors.white,
+          appBar: AppBar(
+            toolbarHeight: 70,
+            backgroundColor: Colors.white,
+            surfaceTintColor: Colors.white,
+            automaticallyImplyLeading: false,
+            title: Row(
+              mainAxisAlignment: MainAxisAlignment.spaceBetween,
+              children: [
+                BackButtonView(),
+                const Text('Sign In'),
+                SizedBox(
+                  width: SizeConfig.width * 0.1,
+                )
+              ],
+            ),
+            shape: const RoundedRectangleBorder(
+                side: BorderSide(color: ColorPalette.slate200)),
+          ),
+          body: PageView(
+            physics: NeverScrollableScrollPhysics(),
+            controller: pageController,
+            children: [
+              PhoneNumberView(
+                  nextStep: nextStep, controller: phoneNumberController),
+              PasswordView(nextStep: nextStep, controller: passwordController)
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+
+  void nextStep() {
+    if (pageController.page == 0) {
+      currentPage++;
+      pageController.jumpToPage(1);
+    } else {
+      routePush(
+        context,
+        page: const BottomNavigationView(),
+        routeType: RouteType.pushReplace,
+      );
+    }
+  }
+}

lib/features/auth/login/view/password_view.dart

@@ -0,0 +1,92 @@
+import 'package:cims_apps/application/component/button/button_view.dart';
+import 'package:cims_apps/application/component/text_form/text_form_view.dart';
+import 'package:cims_apps/application/component/text_title/text_title.dart';
+import 'package:cims_apps/application/theme/color_palette.dart';
+import 'package:cims_apps/core/utils/size_config.dart';
+import 'package:cims_apps/features/auth/login/view_model/login_view_model.dart';
+import 'package:flutter/material.dart';
+import 'package:provider/provider.dart';
+
+class PasswordView extends StatelessWidget {
+  final void Function() nextStep;
+  final TextEditingController controller;
+  const PasswordView(
+      {super.key, required this.nextStep, required this.controller});
+
+  @override
+  Widget build(BuildContext context) {
+    return Consumer<LoginViewModel>(builder: (context, provider, child) {
+      return Container(
+        width: SizeConfig.width,
+        height: SizeConfig.height,
+        padding: const EdgeInsets.all(24),
+        child: Form(
+          key: provider.formKey,
+          child: SingleChildScrollView(
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                const TextTitle(title: 'Enter your password', fontSize: 24),
+                SizedBox(
+                  height: 24,
+                ),
+                TextFormView(
+                  name: 'Password',
+                  ctrl: controller,
+                  obscureText: !provider.showPassword,
+                  contentPadding: EdgeInsets.all(12),
+                  validator: (value) {
+                    if (value!.isEmpty) {
+                      return 'Password must filled';
+                    } else if (value.length < 8) {
+                      return 'Minimum password 8 Character';
+                    } else {
+                      return null;
+                    }
+                  },
+                  suffixIcon: GestureDetector(
+                    onTap: () {
+                      provider.changeShowPassword();
+                    },
+                    child: Icon(
+                      provider.showPassword
+                          ? Icons.visibility_outlined
+                          : Icons.visibility_off_outlined,
+                      color: ColorPalette.greyDarker,
+                    ),
+                  ),
+                ),
+                TextButton(
+                    style: TextButton.styleFrom(padding: EdgeInsets.all(0)),
+                    onPressed: () {},
+                    child: Text(
+                      'Forget the password?',
+                      style: TextStyle(
+                        color: ColorPalette.primary,
+                      ),
+                    )),
+                SizedBox(
+                  height: 16,
+                ),
+                ButtonView(
+                  name: 'Confirm',
+                  heightWrapContent: true,
+                  width: SizeConfig.width,
+                  textSize: 18,
+                  marginVertical: 0,
+                  contentPadding:
+                      EdgeInsets.symmetric(horizontal: 16, vertical: 12),
+                  onPressed: () {
+                    if (provider.formKey.currentState!.validate()) {
+                      nextStep();
+                    }
+                  },
+                )
+              ],
+            ),
+          ),
+        ),
+      );
+    });
+  }
+}

lib/features/auth/login/view/phone_number_view.dart

@@ -0,0 +1,135 @@
+import 'package:cims_apps/application/assets/path_assets.dart';
+import 'package:cims_apps/application/component/button/button_view.dart';
+import 'package:cims_apps/application/component/image/image_view.dart';
+import 'package:cims_apps/application/component/text_form/text_form_view.dart';
+import 'package:cims_apps/application/component/text_title/text_title.dart';
+import 'package:cims_apps/application/theme/color_palette.dart';
+import 'package:cims_apps/core/route/route.dart';
+import 'package:cims_apps/core/utils/size_config.dart';
+import 'package:cims_apps/features/auth/login/view_model/login_view_model.dart';
+import 'package:cims_apps/features/auth/registration/view/registration_view.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:provider/provider.dart';
+
+class PhoneNumberView extends StatelessWidget {
+  final void Function() nextStep;
+  final TextEditingController controller;
+  const PhoneNumberView(
+      {super.key, required this.nextStep, required this.controller});
+
+  @override
+  Widget build(BuildContext context) {
+    return ChangeNotifierProvider(
+        create: (context) => LoginViewModel(),
+        builder: (context, child) {
+          return Container(
+            width: SizeConfig.width,
+            height: SizeConfig.height,
+            padding: const EdgeInsets.all(24),
+            child:
+                Consumer<LoginViewModel>(builder: (context, provider, child) {
+              return Form(
+                key: provider.formKey,
+                child: SingleChildScrollView(
+                  child: Column(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    children: [
+                      const TextTitle(
+                          title: 'Enter your phone number', fontSize: 24),
+                      SizedBox(
+                        height: 24,
+                      ),
+                      TextFormView(
+                        name: 'Phone Number',
+                        keyboardType: TextInputType.number,
+                        ctrl: controller,
+                        inputFormatters: [
+                          FilteringTextInputFormatter.deny(RegExp(r'^0'))
+                        ],
+                        contentPadding: EdgeInsets.all(1),
+                        prefixIcon: Container(
+                            width: SizeConfig.width * .23,
+                            padding:
+                                const EdgeInsets.symmetric(horizontal: 16.0),
+                            margin: const EdgeInsets.only(right: 16),
+                            decoration: const BoxDecoration(
+                                color: ColorPalette.grey,
+                                borderRadius: BorderRadius.only(
+                                  topLeft: Radius.circular(8),
+                                  bottomLeft: Radius.circular(8),
+                                )),
+                            child: const Row(
+                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                              children: [
+                                ImageView(
+                                  image: PathAssets.iconFlag,
+                                  fit: BoxFit.contain,
+                                  width: 24,
+                                  height: 24,
+                                ),
+                                Text(
+                                  '+62',
+                                  style: TextStyle(
+                                    fontWeight: FontWeight.w600,
+                                    color: ColorPalette.slate800,
+                                  ),
+                                )
+                              ],
+                            )),
+                        validator: (value) {
+                          if (value!.isEmpty) {
+                            return 'Phone number must be filled';
+                          } else {
+                            return null;
+                          }
+                        },
+                      ),
+                      SizedBox(
+                        height: 32,
+                      ),
+                      ButtonView(
+                        name: 'Next',
+                        heightWrapContent: true,
+                        width: SizeConfig.width,
+                        marginVertical: 0,
+                        contentPadding: const EdgeInsets.symmetric(
+                            horizontal: 16, vertical: 12),
+                        onPressed: () {
+                          if (provider.formKey.currentState!.validate()) {
+                            nextStep();
+                          }
+                        },
+                      ),
+                      Row(
+                        mainAxisAlignment: MainAxisAlignment.center,
+                        children: [
+                          Text(
+                            "Don't have an account yet?",
+                            style: TextStyle(
+                              color: ColorPalette.slate500,
+                            ),
+                          ),
+                          TextButton(
+                              onPressed: () {
+                                routePush(context, page: RegistrationView());
+                              },
+                              style: TextButton.styleFrom(
+                                  padding: EdgeInsets.all(0)),
+                              child: Text(
+                                'Sign Up',
+                                style: TextStyle(
+                                    fontWeight: FontWeight.w600,
+                                    color: ColorPalette.primary),
+                              ))
+                        ],
+                      ),
+                    ],
+                  ),
+                ),
+              );
+            }),
+          );
+        });
+  }
+}

lib/features/auth/login/view_model/login_view_model.dart

@@ -0,0 +1,11 @@
+import 'package:flutter/material.dart';
+
+class LoginViewModel extends ChangeNotifier {
+  bool showPassword = false;
+  var formKey = GlobalKey<FormState>();
+
+  void changeShowPassword() {
+    showPassword = !showPassword;
+    notifyListeners();
+  }
+}

lib/features/auth/registration/view/initial_registration_step.dart

@@ -1,10 +1,12 @@
 import 'package:cims_apps/application/assets/path_assets.dart';
 import 'package:cims_apps/application/component/button/button_view.dart';
+import 'package:cims_apps/application/component/custom_app_bar/custom_app_bar.dart';
 import 'package:cims_apps/application/component/image/image_view.dart';
 import 'package:cims_apps/application/theme/color_palette.dart';
 import 'package:cims_apps/core/route/route.dart';
 import 'package:cims_apps/core/utils/size_config.dart';
 import 'package:cims_apps/features/auth/registration/view/submission_data/submission_parent.dart';
+import 'package:cims_apps/features/dashboard/dashboard_public/view/dashboard_public_view.dart';
 import 'package:flutter/material.dart';
 
 class InitialRegistrationStep extends StatelessWidget {
@@ -92,12 +94,12 @@ class InitialRegistrationStep extends StatelessWidget {
       {
         'desc': 'Personal Data',
         'isActive': true,
-        'isDone': true,
+        'isDone': false,
         'isLast': false,
       },
       {
         'desc': 'Email',
-        'isActive': true,
+        'isActive': false,
         'isDone': false,
         'isLast': false,
       },
@@ -146,9 +148,8 @@ class InitialRegistrationStep extends StatelessWidget {
     ];
 
     return Scaffold(
-      appBar: AppBar(
-        title: const Text('Registration'),
-      ),
+      appBar:
+          CustomAppBar(height: SizeConfig.height * .1, title: 'Registration'),
       body: Container(
         padding: const EdgeInsets.symmetric(horizontal: 24.0),
         child: Column(
@@ -175,7 +176,7 @@ class InitialRegistrationStep extends StatelessWidget {
               ],
             ),
             SizedBox(
-              height: SizeConfig.height * .6,
+              height: SizeConfig.height * .55,
               child: SingleChildScrollView(
                 scrollDirection: Axis.vertical,
                 child: Column(
@@ -192,12 +193,29 @@ class InitialRegistrationStep extends StatelessWidget {
                 ),
               ),
             ),
+            Row(
+              mainAxisAlignment: MainAxisAlignment.spaceBetween,
+              children: [
+                ButtonView(
+                  name: 'Home Page',
+                  marginVertical: 8.0,
+                  width: SizeConfig.width * .42,
+                  isOutlined: true,
+                  onPressed: () {
+                    routePush(context,
+                        page: const DashboardPublicView(),
+                        routeType: RouteType.pushReplace);
+                  },
+                ),
                 ButtonView(
                   name: 'Let’s Start',
                   marginVertical: 8.0,
+                  width: SizeConfig.width * .42,
                   onPressed: () {
                     routePush(context, page: const SubmissionParent());
                   },
+                ),
+              ],
             )
           ],
         ),

lib/features/auth/registration/view/registration_password_view.dart

@@ -0,0 +1,153 @@
+import 'package:cims_apps/application/assets/path_assets.dart';
+import 'package:cims_apps/application/component/button/button_view.dart';
+import 'package:cims_apps/application/component/custom_app_bar/custom_app_bar.dart';
+import 'package:cims_apps/application/component/image/image_view.dart';
+import 'package:cims_apps/application/component/text_caption/text_caption.dart';
+import 'package:cims_apps/application/component/text_form/text_form_view.dart';
+import 'package:cims_apps/application/theme/color_palette.dart';
+import 'package:cims_apps/core/route/route.dart';
+import 'package:cims_apps/core/utils/size_config.dart';
+import 'package:cims_apps/features/auth/registration/view/initial_registration_step.dart';
+import 'package:cims_apps/features/auth/registration/viewmodel/registration_viewmodel.dart';
+import 'package:flutter/material.dart';
+import 'package:provider/provider.dart';
+
+class RegistrationPasswordView extends StatelessWidget {
+  const RegistrationPasswordView({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return ChangeNotifierProvider(
+        create: (context) => RegistrationViewModel(),
+        builder: (context, child) {
+          return Scaffold(
+            appBar:
+                CustomAppBar(height: SizeConfig.height * .1, title: 'Sign Up'),
+            body: SingleChildScrollView(
+              padding: const EdgeInsets.all(16.0),
+              child: Consumer<RegistrationViewModel>(
+                  builder: (context, provider, child) {
+                return Form(
+                  key: provider.formKey,
+                  child: Column(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    children: [
+                      const TextCaption(
+                        title: 'Create your password',
+                        subtitle:
+                            'The password you create serves as your login',
+                      ),
+                      TextFormView(
+                        name: 'Password',
+                        hintText: 'Input password',
+                        ctrl: provider.passwordCtrl,
+                        obscureText: !provider.showPassword,
+                        validator: (value) {
+                          if (value!.isEmpty) {
+                            return 'Password must filled';
+                          } else if (value.length < 8) {
+                            return 'Minimum password 8 Character';
+                          } else {
+                            return null;
+                          }
+                        },
+                        suffixIcon: GestureDetector(
+                          onTap: () {
+                            provider.toggleVisibility();
+                          },
+                          child: Icon(
+                            provider.showPassword
+                                ? Icons.visibility_outlined
+                                : Icons.visibility_off_outlined,
+                            color: ColorPalette.greyDarker,
+                          ),
+                        ),
+                      ),
+                      const SizedBox(
+                        height: 32.0,
+                      ),
+                      TextFormView(
+                        name: 'Confirm Password',
+                        hintText: 'Input password',
+                        ctrl: provider.confirmPasswordCtrl,
+                        obscureText: !provider.showPasswordConfirm,
+                        validator: (value) {
+                          if (value!.isEmpty) {
+                            return 'Password must filled';
+                          } else if (value != provider.passwordCtrl.text) {
+                            return 'Password must be same';
+                          } else {
+                            return null;
+                          }
+                        },
+                        suffixIcon: GestureDetector(
+                          onTap: () {
+                            provider.toggleVisibilityConfirm();
+                          },
+                          child: Icon(
+                            provider.showPasswordConfirm
+                                ? Icons.visibility_outlined
+                                : Icons.visibility_off_outlined,
+                            color: ColorPalette.greyDarker,
+                          ),
+                        ),
+                      ),
+                      ButtonView(
+                        name: 'Confirm',
+                        onPressed: () {
+                          if (provider.formKey.currentState!.validate()) {
+                            routePush(context, page: const DialogSuccess());
+                          }
+                        },
+                      )
+                    ],
+                  ),
+                );
+              }),
+            ),
+          );
+        });
+  }
+}
+
+class DialogSuccess extends StatelessWidget {
+  const DialogSuccess({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      body: Container(
+        padding: const EdgeInsets.all(24.0),
+        child: Column(
+          mainAxisAlignment: MainAxisAlignment.end,
+          crossAxisAlignment: CrossAxisAlignment.center,
+          children: [
+            ImageView(
+              image: PathAssets.imgSuccessSignup,
+              width: SizeConfig.width * .8,
+            ),
+            const TextCaption(
+              title: 'Success',
+              subtitle:
+                  'Congratulations, your account creation was successful!',
+              crossAxisAlignment: CrossAxisAlignment.center,
+              textAlignSubtitle: TextAlign.center,
+            ),
+            SizedBox(
+              height: SizeConfig.height * .2,
+            ),
+            ButtonView(
+              name: 'Next',
+              marginVertical: 8.0,
+              onPressed: () {
+                routePush(context,
+                    page: const InitialRegistrationStep(),
+                    routeType: RouteType.pushReplace);
+              },
+            )
+          ],
+        ),
+      ),
+    );
+  }
+}

lib/features/auth/registration/view/registration_success_view.dart

@@ -0,0 +1,44 @@
+import 'package:cims_apps/application/assets/path_assets.dart';
+import 'package:cims_apps/application/component/button/button_view.dart';
+import 'package:cims_apps/application/component/image/image_view.dart';
+import 'package:cims_apps/application/component/text_caption/text_caption.dart';
+import 'package:cims_apps/core/route/route.dart';
+import 'package:cims_apps/features/bottom_navigation_view.dart';
+import 'package:flutter/material.dart';
+
+class RegistrationSuccessView extends StatelessWidget {
+  const RegistrationSuccessView({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      body: Container(
+        padding: const EdgeInsets.all(24.0),
+        child: Column(
+          children: [
+            const ImageView(image: PathAssets.imgFinish),
+            const TextCaption(
+              crossAxisAlignment: CrossAxisAlignment.center,
+              textAlignSubtitle: TextAlign.center,
+              title: 'Registration Successful!',
+              subtitle:
+                  'Please wait for the data verification process so that you can start investing.',
+            ),
+            const Spacer(),
+            ButtonView(
+              name: 'Next',
+              marginVertical: 0.0,
+              onPressed: () {
+                routePush(
+                  context,
+                  page: const BottomNavigationView(),
+                  routeType: RouteType.pushReplace,
+                );
+              },
+            )
+          ],
+        ),
+      ),
+    );
+  }
+}

lib/features/auth/registration/view/registration_view.dart

@@ -1,11 +1,17 @@
+import 'package:cims_apps/application/assets/path_assets.dart';
 import 'package:cims_apps/application/component/button/button_view.dart';
+import 'package:cims_apps/application/component/custom_app_bar/custom_app_bar.dart';
+import 'package:cims_apps/application/component/image/image_view.dart';
+import 'package:cims_apps/application/component/otp/otp_view.dart';
 import 'package:cims_apps/application/component/text_caption/text_caption.dart';
 import 'package:cims_apps/application/component/text_form/text_form_view.dart';
-import 'package:cims_apps/core/route/route.dart';
-import 'package:cims_apps/features/auth/registration/view/initial_registration_step.dart';
-import 'package:cims_apps/features/bottom_navigation_view.dart';
+import 'package:cims_apps/application/theme/color_palette.dart';
+import 'package:cims_apps/core/utils/size_config.dart';
+import 'package:cims_apps/features/auth/registration/viewmodel/registration_viewmodel.dart';
 import 'package:flutter/gestures.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:provider/provider.dart';
 
 class RegistrationView extends StatelessWidget {
   static const routName = '/RegistrationView';
@@ -13,12 +19,47 @@ class RegistrationView extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return Scaffold(
-      appBar: AppBar(
-        title: const Text('Sign Up'),
+    showOtpWidget() {
+      Navigator.of(context).pop();
+      showModalBottomSheet(
+        context: context,
+        isScrollControlled: true,
+        enableDrag: false,
+        shape: const RoundedRectangleBorder(
+          borderRadius: BorderRadius.vertical(
+            top: Radius.zero,
           ),
-      body: Container(
+        ),
+        builder: (BuildContext context) {
+          return Padding(
+            padding: EdgeInsets.only(
+              top: MediaQueryData.fromView(
+                WidgetsBinding.instance.window,
+              ).padding.top,
+            ),
+            child: const OtpView(
+              title: 'Sign Up',
+              contentTitle: 'Check your SMS',
+              contentSubtitle:
+                  'Enter 4 digit code We’ve sent to verify your phone number',
+            ),
+          );
+        },
+      );
+    }
+
+    return ChangeNotifierProvider(
+        create: (context) => RegistrationViewModel(),
+        builder: (context, child) {
+          return Scaffold(
+            appBar:
+                CustomAppBar(height: SizeConfig.height * .1, title: 'Sign Up'),
+            body: SingleChildScrollView(
               padding: const EdgeInsets.all(24.0),
+              child: Consumer<RegistrationViewModel>(
+                  builder: (context, provider, child) {
+                return Form(
+                  key: provider.formKeyPhone,
                   child: Column(
                     crossAxisAlignment: CrossAxisAlignment.start,
                     children: [
@@ -26,11 +67,57 @@ class RegistrationView extends StatelessWidget {
                         title: 'Enter your phone number',
                         subtitle: 'Input your registered phone number',
                       ),
-            TextFormView(name: 'Phone Number'),
+                      TextFormView(
+                        name: 'Phone Number',
+                        keyboardType: TextInputType.number,
+                        inputFormatters: [
+                          FilteringTextInputFormatter.deny(RegExp(r'^0'))
+                        ],
+                        contentPadding: EdgeInsets.zero,
+                        prefixIcon: Container(
+                            width: SizeConfig.width * .23,
+                            padding:
+                                const EdgeInsets.symmetric(horizontal: 16.0),
+                            margin: const EdgeInsets.only(right: 16),
+                            decoration: const BoxDecoration(
+                                color: ColorPalette.grey,
+                                borderRadius: BorderRadius.only(
+                                  topLeft: Radius.circular(8),
+                                  bottomLeft: Radius.circular(8),
+                                )),
+                            child: const Row(
+                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                              children: [
+                                ImageView(
+                                  image: PathAssets.iconFlag,
+                                  fit: BoxFit.contain,
+                                  width: 24,
+                                  height: 24,
+                                ),
+                                Text(
+                                  '+62',
+                                  style: TextStyle(
+                                    fontWeight: FontWeight.w600,
+                                    color: ColorPalette.slate800,
+                                  ),
+                                )
+                              ],
+                            )),
+                        ctrl: provider.phoneNumberCtrl,
+                        validator: (value) {
+                          if (value!.isEmpty) {
+                            return 'Phone number must be filled';
+                          } else {
+                            return null;
+                          }
+                        },
+                      ),
                       ButtonView(
                         name: 'Next',
                         onPressed: () {
-                routePush(context, page: const InitialRegistrationStep());
+                          if (provider.formKeyPhone.currentState!.validate()) {
+                            showOtpWidget();
+                          }
                         },
                       ),
                       Align(
@@ -42,14 +129,11 @@ class RegistrationView extends StatelessWidget {
                               text: 'Already have an account? ',
                               style: TextStyle(
                                 color: Colors.black,
-                      decoration: TextDecoration.underline,
+                                decoration: TextDecoration.none,
                               ),
                             ),
                             TextSpan(
-                    recognizer: TapGestureRecognizer()
-                      ..onTap = () {
-                        print('object');
-                      },
+                              recognizer: TapGestureRecognizer()..onTap = () {},
                               text: ' Sign In',
                               style: const TextStyle(
                                 color: Colors.blue,
@@ -60,7 +144,10 @@ class RegistrationView extends StatelessWidget {
                       )
                     ],
                   ),
+                );
+              }),
             ),
           );
+        });
   }
 }

lib/features/auth/registration/view/submission_data/data_bank/confirm_bank_account.dart

@@ -0,0 +1,112 @@
+import 'package:cims_apps/application/component/button/back_button_view.dart';
+import 'package:cims_apps/application/component/button/button_view.dart';
+import 'package:cims_apps/application/component/list_tile/list_tile_view.dart';
+import 'package:cims_apps/application/component/text_caption/text_caption.dart';
+import 'package:cims_apps/application/theme/color_palette.dart';
+import 'package:cims_apps/core/route/route.dart';
+import 'package:cims_apps/core/utils/size_config.dart';
+import 'package:cims_apps/features/auth/registration/view/submission_data/submission_parent.dart';
+import 'package:flutter/material.dart';
+
+class ConfirmBankAccount extends StatelessWidget {
+  const ConfirmBankAccount({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    List listData = [
+      {'title': 'Bank Name', 'subtitle': 'Bank Mandiri'},
+      {'title': 'Account Number', 'subtitle': '123002212084'},
+      {'title': 'Account Owner Name', 'subtitle': 'Muhamad Rosyidin'},
+      {'title': 'Name on ID card', 'subtitle': 'Muhamad Rosyidin'},
+    ];
+    return Scaffold(
+      appBar: AppBar(
+        toolbarHeight: 70,
+        backgroundColor: Colors.white,
+        surfaceTintColor: Colors.white,
+        automaticallyImplyLeading: false,
+        title: Row(
+          mainAxisAlignment: MainAxisAlignment.spaceBetween,
+          children: [
+            const BackButtonView(),
+            const Text('Registration'),
+            SizedBox(
+              width: SizeConfig.width * 0.1,
+            )
+          ],
+        ),
+        shape: const RoundedRectangleBorder(
+            side: BorderSide(color: ColorPalette.slate200)),
+      ),
+      body: SingleChildScrollView(
+        padding: const EdgeInsets.all(16.0),
+        child: SizedBox(
+          height: SizeConfig.height * .85,
+          child: Column(
+            mainAxisAlignment: MainAxisAlignment.spaceBetween,
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              const TextCaption(title: 'Bank account confirmation'),
+              SizedBox(
+                height: SizeConfig.height * .6,
+                child: Column(
+                  mainAxisAlignment: MainAxisAlignment.start,
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    ...listData.map((e) {
+                      return Padding(
+                        padding: const EdgeInsets.only(bottom: 16.0),
+                        child: Column(
+                          mainAxisAlignment: MainAxisAlignment.start,
+                          crossAxisAlignment: CrossAxisAlignment.start,
+                          children: [
+                            Text(
+                              e['title'],
+                              style: const TextStyle(
+                                  color: ColorPalette.slate400, fontSize: 16),
+                            ),
+                            Text(
+                              e['subtitle'],
+                              style: const TextStyle(
+                                  fontSize: 16,
+                                  color: ColorPalette.slate800,
+                                  fontWeight: FontWeight.w600),
+                            ),
+                          ],
+                        ),
+                      );
+                    }).toList(),
+                    const ListTileView(
+                      title:
+                          'Make sure your data is correct as it will affect the disbursement process',
+                    ),
+                  ],
+                ),
+              ),
+              Row(
+                mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                children: [
+                  ButtonView(
+                    name: 'Recheck',
+                    isOutlined: true,
+                    width: SizeConfig.width * .42,
+                    onPressed: () {
+                      Navigator.pop(context);
+                    },
+                  ),
+                  ButtonView(
+                    name: 'Confirm',
+                    width: SizeConfig.width * .42,
+                    onPressed: () {
+                      routePush(context, page: const SubmissionParent());
+                    },
+                  ),
+                ],
+              )
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}

lib/features/auth/registration/view/submission_data/data_bank/guide_screen.dart

@@ -0,0 +1,126 @@
+import 'package:cims_apps/application/assets/path_assets.dart';
+import 'package:cims_apps/application/component/button/back_button_view.dart';
+import 'package:cims_apps/application/component/button/button_view.dart';
+import 'package:cims_apps/application/component/image/image_view.dart';
+import 'package:cims_apps/application/component/text_caption/text_caption.dart';
+import 'package:cims_apps/application/theme/color_palette.dart';
+import 'package:cims_apps/core/utils/size_config.dart';
+import 'package:flutter/material.dart';
+
+class GuideScreen extends StatelessWidget {
+  const GuideScreen({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    List listImg = [
+      {
+        'urlImg': PathAssets.imgGuide1,
+        'title': 'Passbook',
+        'subtitle': 'Look in your passbook for the account number'
+      },
+      {
+        'urlImg': PathAssets.imgGuide2,
+        'title': 'Mobile Banking App',
+        'subtitle':
+            'Open the mobile banking app and you will find your account number'
+      },
+    ];
+
+    listGuide() {
+      return Column(
+        children: listImg.map((e) {
+          return Container(
+              width: SizeConfig.width,
+              height: SizeConfig.height * .18,
+              padding: const EdgeInsets.all(16.0),
+              margin: const EdgeInsets.symmetric(vertical: 8.0),
+              decoration: BoxDecoration(
+                color: ColorPalette.white,
+                borderRadius: BorderRadius.circular(12),
+                border: Border.all(
+                  color: ColorPalette.slate400,
+                  width: 2,
+                ),
+              ),
+              child: Row(
+                mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                children: [
+                  Padding(
+                    padding: const EdgeInsets.only(right: 8.0),
+                    child: ImageView(
+                      image: e['urlImg'],
+                      width: SizeConfig.width * .4,
+                      fit: BoxFit.fill,
+                      borderRadius: 8,
+                    ),
+                  ),
+                  Expanded(
+                    child: Column(
+                      crossAxisAlignment: CrossAxisAlignment.start,
+                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+                      children: [
+                        Text(
+                          e['title'],
+                          style: const TextStyle(
+                            fontSize: 16,
+                            fontWeight: FontWeight.w600,
+                            color: ColorPalette.slate800,
+                          ),
+                        ),
+                        Text(
+                          e['subtitle'],
+                          style: const TextStyle(
+                            fontSize: 14,
+                            fontWeight: FontWeight.w600,
+                            color: ColorPalette.slate500,
+                          ),
+                        ),
+                      ],
+                    ),
+                  )
+                ],
+              ));
+        }).toList(),
+      );
+    }
+
+    return Scaffold(
+      appBar: AppBar(
+        toolbarHeight: 70,
+        backgroundColor: Colors.white,
+        surfaceTintColor: Colors.white,
+        automaticallyImplyLeading: false,
+        title: Row(
+          mainAxisAlignment: MainAxisAlignment.spaceBetween,
+          children: [
+            const BackButtonView(),
+            const Text('Guide'),
+            SizedBox(
+              width: SizeConfig.width * 0.1,
+            )
+          ],
+        ),
+        shape: const RoundedRectangleBorder(
+            side: BorderSide(color: ColorPalette.slate200)),
+      ),
+      body: SingleChildScrollView(
+        padding: const EdgeInsets.symmetric(horizontal: 16.0),
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.end,
+          children: [
+            const ImageView(image: PathAssets.imgGuideBank),
+            const TextCaption(
+                textAlign: TextAlign.center,
+                title: 'Guide to knowing your account number'),
+            listGuide(),
+            ButtonView(
+              name: 'close',
+              isOutlined: true,
+              onPressed: () => Navigator.pop(context),
+            )
+          ],
+        ),
+      ),
+    );
+  }
+}

lib/features/auth/registration/view/submission_data/data_bank/submit_bank_account.dart

@@ -0,0 +1,88 @@
+import 'package:cims_apps/application/assets/path_assets.dart';
+import 'package:cims_apps/application/component/button/button_view.dart';
+import 'package:cims_apps/application/component/image/image_view.dart';
+import 'package:cims_apps/application/component/select_form/select_form_view.dart';
+import 'package:cims_apps/application/component/text_caption/text_caption.dart';
+import 'package:cims_apps/application/component/text_form/text_form_view.dart';
+import 'package:cims_apps/application/theme/color_palette.dart';
+import 'package:cims_apps/core/route/route.dart';
+import 'package:cims_apps/core/utils/size_config.dart';
+import 'package:cims_apps/features/auth/registration/view/submission_data/data_bank/guide_screen.dart';
+import 'package:cims_apps/features/auth/registration/viewmodel/submission_data_viewmodel.dart';
+import 'package:flutter/material.dart';
+import 'package:provider/provider.dart';
+
+import 'confirm_bank_account.dart';
+
+class SubmitBankAccount extends StatelessWidget {
+  const SubmitBankAccount({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return MultiProvider(
+        providers: [
+          ChangeNotifierProvider(
+            create: (context) => SubmissionDataViewModel(),
+          )
+        ],
+        builder: (context, child) {
+          return SizedBox(
+            child: Consumer<SubmissionDataViewModel>(
+                builder: (context, provider, child) {
+              return SingleChildScrollView(
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    const TextCaption(title: 'Input your bank account data'),
+                    SelectFormView(
+                      name: 'Bank Name',
+                      hintText: 'Select Bank',
+                      listItem: provider.listBank,
+                      ctrl: provider.ctrlBankName,
+                      onSelect: (value) {},
+                    ),
+                    TextFormView(
+                      name: 'Account Number',
+                      hintText: 'Input Account Number',
+                      keyboardType: TextInputType.number,
+                      trailingTitleWidget: SizedBox(
+                        width: 24,
+                        child: GestureDetector(
+                          onTap: () {
+                            routePush(context, page: const GuideScreen());
+                          },
+                          child:
+                              const ImageView(image: PathAssets.iconQuestion),
+                        ),
+                      ),
+                    ),
+                    TextFormView(
+                      name: 'Account Owner Name',
+                      hintText: 'Input Account Name',
+                    ),
+                    const Text(
+                      "Make sure the account you use is in your name, not someone else's",
+                      style: TextStyle(
+                        color: ColorPalette.slate400,
+                      ),
+                    ),
+                    SizedBox(height: SizeConfig.height * .08),
+                    ButtonView(
+                      name: 'Next',
+                      onPressed: () {
+                        provider.next(context).then((value) {
+                          if (value) {
+                            routePush(context,
+                                page: const ConfirmBankAccount());
+                          }
+                        });
+                      },
+                    )
+                  ],
+                ),
+              );
+            }),
+          );
+        });
+  }
+}

lib/features/auth/registration/view/submission_data/risk_profile/question_view.dart

@@ -0,0 +1,164 @@
+import 'package:cims_apps/application/assets/path_assets.dart';
+import 'package:cims_apps/application/component/button/back_button_view.dart';
+import 'package:cims_apps/application/component/button/button_view.dart';
+import 'package:cims_apps/application/component/image/image_view.dart';
+import 'package:cims_apps/application/theme/color_palette.dart';
+import 'package:cims_apps/core/route/route.dart';
+import 'package:cims_apps/core/utils/size_config.dart';
+import 'package:cims_apps/features/auth/registration/view/submission_data/risk_profile/results_view.dart';
+import 'package:cims_apps/features/auth/registration/view/submission_data/risk_profile/risk_profile_view_model/risk_profile_view_model.dart';
+import 'package:flutter/material.dart';
+import 'package:provider/provider.dart';
+
+class QuestionView extends StatefulWidget {
+  const QuestionView({super.key});
+
+  @override
+  State<QuestionView> createState() => _QuestionViewState();
+}
+
+class _QuestionViewState extends State<QuestionView> {
+  int currentPage = 0;
+  PageController pageController = PageController();
+
+  @override
+  Widget build(BuildContext context) {
+    return ChangeNotifierProvider(
+      create: (context) => RiskProfileViewModel(),
+      child:
+          Consumer<RiskProfileViewModel>(builder: (context, provider, child) {
+        return Scaffold(
+          appBar: AppBar(
+            toolbarHeight: 70,
+            backgroundColor: Colors.white,
+            surfaceTintColor: Colors.white,
+            automaticallyImplyLeading: false,
+            centerTitle: true,
+            title: Row(
+              mainAxisAlignment: MainAxisAlignment.spaceBetween,
+              children: [
+                BackButtonView(),
+                const Text('Risk Profile', textAlign: TextAlign.center),
+                SizedBox(width: SizeConfig.width * 0.1)
+              ],
+            ),
+            shape: const RoundedRectangleBorder(
+                side: BorderSide(color: ColorPalette.slate200)),
+          ),
+          body: PageView(
+            controller: pageController,
+            physics: NeverScrollableScrollPhysics(),
+            children: provider.listRiskProfileQuestion.asMap().entries.map((e) {
+              return containerQuestion(e.value, e.key,
+                  (index, score) => provider.selectedAnswer(index, score));
+            }).toList(),
+          ),
+          bottomNavigationBar: SizedBox(
+            height: 84,
+            child: ButtonView(
+              name: 'Next',
+              marginVertical: 16,
+              onPressed: () {
+                if (currentPage > 3) {
+                  int totalScore = provider.listScore
+                      .reduce((value, element) => value + element);
+                  provider.setTypeResult(totalScore);
+                  routePush(context,
+                      page: ResultsView(
+                          totalScore: totalScore.toString(),
+                          typeResult: provider.typeResult));
+                } else {
+                  setState(() {
+                    currentPage += 1;
+                  });
+                  pageController.nextPage(
+                      duration: Duration(milliseconds: 300),
+                      curve: Curves.ease);
+                }
+              },
+            ),
+          ),
+        );
+      }),
+    );
+  }
+
+  Widget containerQuestion(RiskProfileQuestion data, int index,
+      void Function(int index, int score) onTapAnswers) {
+    return SizedBox(
+      height: SizeConfig.height,
+      width: SizeConfig.width,
+      child: ListView(
+        padding: EdgeInsets.all(24),
+        children: [
+          ImageView(
+            image: data.img,
+            fit: BoxFit.fitWidth,
+          ),
+          SizedBox(
+            height: 16,
+          ),
+          Text(
+            '${index + 1} of 5 question',
+            style: TextStyle(
+                fontWeight: FontWeight.bold, color: ColorPalette.primary),
+          ),
+          SizedBox(
+            height: 12,
+          ),
+          Text(
+            data.question,
+            style: TextStyle(
+                fontWeight: FontWeight.bold,
+                fontSize: 24,
+                color: ColorPalette.slate800),
+          ),
+          SizedBox(
+            height: 16,
+          ),
+          Column(
+            children: data.answers.asMap().entries.map((e) {
+              bool selected = data.selectedScore == e.value.score;
+              return GestureDetector(
+                onTap: () {
+                  onTapAnswers(index, e.value.score);
+                },
+                child: AnimatedContainer(
+                  duration: Duration(milliseconds: 300),
+                  margin: EdgeInsets.only(top: 12),
+                  padding: EdgeInsets.all(12),
+                  decoration: BoxDecoration(
+                      border: Border.all(
+                          color: selected
+                              ? ColorPalette.primary
+                              : ColorPalette.slate200),
+                      borderRadius: BorderRadius.circular(8)),
+                  child: Row(
+                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                    children: [
+                      Expanded(
+                        child: Text(
+                          e.value.title,
+                          style: TextStyle(
+                              fontSize: 16,
+                              color: selected
+                                  ? ColorPalette.primary
+                                  : ColorPalette.slate500,
+                              fontWeight: FontWeight.w500),
+                        ),
+                      ),
+                      if (selected) ...[
+                        Icon(Icons.check_circle_rounded,
+                            color: ColorPalette.primary)
+                      ]
+                    ],
+                  ),
+                ),
+              );
+            }).toList(),
+          )
+        ],
+      ),
+    );
+  }
+}

lib/features/auth/registration/view/submission_data/risk_profile/results_view.dart

@@ -0,0 +1,182 @@
+import 'package:cims_apps/application/component/button/back_button_view.dart';
+import 'package:cims_apps/application/component/button/button_view.dart';
+import 'package:cims_apps/application/theme/color_palette.dart';
+import 'package:cims_apps/core/route/route.dart';
+import 'package:cims_apps/core/utils/size_config.dart';
+import 'package:cims_apps/features/auth/registration/view/submission_data/risk_profile/risk_profile_view_model/risk_profile_view_model.dart';
+import 'package:cims_apps/features/auth/registration/view/submission_data/terms_and_condition/terms_and_condition_view.dart';
+import 'package:flutter/material.dart';
+
+class ResultsView extends StatelessWidget {
+  final String totalScore;
+  final RiskProfileResult typeResult;
+  const ResultsView(
+      {super.key, required this.typeResult, required this.totalScore});
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        toolbarHeight: 70,
+        backgroundColor: Colors.white,
+        surfaceTintColor: Colors.white,
+        automaticallyImplyLeading: false,
+        title: Row(
+          mainAxisAlignment: MainAxisAlignment.spaceBetween,
+          children: [
+            const BackButtonView(),
+            const Text('Risk Profile', textAlign: TextAlign.center),
+            SizedBox(width: SizeConfig.width * 0.1)
+          ],
+        ),
+        shape: const RoundedRectangleBorder(
+            side: BorderSide(color: ColorPalette.slate200)),
+      ),
+      body: SingleChildScrollView(
+        padding: const EdgeInsets.all(24),
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            ClipRRect(
+              borderRadius: BorderRadius.circular(8),
+              child: Container(
+                decoration: BoxDecoration(
+                    color: typeResult.color,
+                    image: DecorationImage(
+                        image: AssetImage(typeResult.img),
+                        alignment: Alignment.centerRight)),
+                child: Row(
+                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                  children: [
+                    Container(
+                      padding: const EdgeInsets.all(24),
+                      child: Column(
+                        crossAxisAlignment: CrossAxisAlignment.start,
+                        children: [
+                          Text(
+                            typeResult.type,
+                            style: const TextStyle(
+                                fontWeight: FontWeight.bold,
+                                fontSize: 24,
+                                color: ColorPalette.white),
+                          ),
+                          const SizedBox(
+                            height: 16,
+                          ),
+                          const Text(
+                            'Total Score :',
+                            style: TextStyle(
+                                fontWeight: FontWeight.bold,
+                                fontSize: 16,
+                                color: ColorPalette.white),
+                          ),
+                          Text(
+                            totalScore,
+                            style: const TextStyle(
+                                fontWeight: FontWeight.bold,
+                                fontSize: 28,
+                                color: ColorPalette.white),
+                          )
+                        ],
+                      ),
+                    ),
+                  ],
+                ),
+              ),
+            ),
+            const SizedBox(
+              height: 24,
+            ),
+            Text(typeResult.desc,
+                style: const TextStyle(
+                    color: ColorPalette.slate500, fontSize: 16)),
+            const SizedBox(
+              height: 24,
+            ),
+            const Text(
+              'Suitable Product',
+              style: TextStyle(
+                  color: ColorPalette.slate800,
+                  fontWeight: FontWeight.bold,
+                  fontSize: 16),
+            ),
+            const SizedBox(
+              height: 16,
+            ),
+            Wrap(
+              runSpacing: 16,
+              children: typeResult.suitableProduct.map((e) {
+                return Container(
+                  padding: const EdgeInsets.all(16),
+                  decoration: BoxDecoration(
+                    borderRadius: BorderRadius.circular(6),
+                    border: Border.all(color: ColorPalette.slate200),
+                  ),
+                  child: Row(
+                    children: [
+                      Container(
+                          padding: const EdgeInsets.all(8),
+                          alignment: Alignment.center,
+                          decoration: BoxDecoration(
+                              shape: BoxShape.circle,
+                              color: typeResult.color.withOpacity(0.1)),
+                          child: Image.asset(e['icon'],
+                              width: SizeConfig.width * 0.07,
+                              color: typeResult.color)),
+                      const SizedBox(
+                        width: 12,
+                      ),
+                      Expanded(
+                        child: Text(
+                          e['desc'],
+                          style: const TextStyle(
+                              fontSize: 16,
+                              fontWeight: FontWeight.bold,
+                              color: ColorPalette.slate800),
+                        ),
+                      )
+                    ],
+                  ),
+                );
+              }).toList(),
+            ),
+            const SizedBox(
+              height: 32,
+            ),
+            ButtonView(
+              name: 'Re-test',
+              onPressed: () {},
+              marginVertical: 0,
+              backgroundColor: ColorPalette.white,
+              textColor: ColorPalette.primary,
+              borderColor: ColorPalette.primary,
+              isOutlined: true,
+              textSize: 16,
+              heightWrapContent: true,
+              contentPadding: const EdgeInsets.all(16),
+              width: SizeConfig.width,
+            ),
+            const SizedBox(
+              height: 16,
+            ),
+            ButtonView(
+              name: 'Confirm',
+              onPressed: () {
+                routePush(
+                  context,
+                  page: const TermsAndConditionView(),
+                  routeType: RouteType.pushReplace,
+                );
+              },
+              marginVertical: 0,
+              textSize: 16,
+              heightWrapContent: true,
+              contentPadding: const EdgeInsets.all(16),
+              width: SizeConfig.width,
+            )
+          ],
+        ),
+      ),
+    );
+  }
+}