feat: wip plan view, and component numeric pad

Reviewed-on: #8

lib/application/assets/path_assets.dart

@@ -10,10 +10,14 @@ 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 iconPortofolioBonds =
-  static const String iconPortofolioShares = 'assets/icons/icon-portofolio-shares.png';
+      'assets/icons/icon-portofolio-bonds.png';
-  static const String iconPortofolioSharia = 'assets/icons/icon-portofolio-sharia.png';
+  static const String iconPortofolioShares =
-  static const String iconPortofolioMoneyMarket = 'assets/icons/icon-portofolio-moneymarket.png';
+      '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';
@@ -28,6 +32,11 @@ class PathAssets {
   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';
 
   /// IMAGE
   static const String imgSplashLogo = 'assets/images/splash-logo.png';
@@ -40,7 +49,8 @@ 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 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';
@@ -49,11 +59,15 @@ class PathAssets {
   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 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';
 }

lib/application/component/button/back_button_view.dart

@@ -2,10 +2,10 @@ import 'package:cims_apps/application/theme/color_palette.dart';
 import 'package:cims_apps/core/utils/size_config.dart';
 import 'package:flutter/material.dart';
 
-class ButtonBack extends StatelessWidget {
+class BackButtonView extends StatelessWidget {
   final EdgeInsets? margin;
   final void Function()? onPress;
-  const ButtonBack({super.key, this.margin, this.onPress});
+  const BackButtonView({super.key, this.margin, this.onPress});
 
   @override
   Widget build(BuildContext context) {

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/goal_investing_view.dart

@@ -0,0 +1,46 @@
+import 'package:cims_apps/application/assets/path_assets.dart';
+import 'package:flutter/material.dart';
+
+class GoalInvest {
+  String icon;
+  String title;
+
+  GoalInvest(this.icon, this.title);
+}
+
+class GoalInvestingView extends StatelessWidget {
+  const GoalInvestingView({super.key});
+
+  @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, 'Create Plan'),
+    ];
+
+
+
+    return Column(
+      children: [
+        Row(
+          mainAxisAlignment: MainAxisAlignment.spaceBetween,
+          children: [
+            Text('Your Goal in Investing'),
+            GestureDetector(
+              child: Icon(Icons.close_rounded),
+            ),
+          ],
+        ),
+        ...listGoalInvest.asMap().entries.map((e) {
+          return ListTile(
+            leading: Image.asset(e.value.icon),
+            title: Text(e.value.title),
+            trailing: Icon(Icons.chevron_right_rounded),
+          );
+        })
+      ],
+    );
+  }
+}

lib/application/component/numeric_pad/numeric_pad.dart

@@ -0,0 +1,109 @@
+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.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.11,
+      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: Icon(
+          Icons.highlight_remove,
+          size: 28,
+        )
+    );
+  }
+}

lib/application/component/take_picture_screen/display_picture_screen.dart

@@ -112,7 +112,7 @@ class DisplayPictureScreen extends StatelessWidget {
                             children: [
                               Container(
                                 width: SizeConfig.width * .42,
-                                height: SizeConfig.height * .15,
+                                height: SizeConfig.height * .13,
                                 padding: const EdgeInsets.symmetric(
                                     vertical: 8.0, horizontal: 8.0),
                                 decoration: BoxDecoration(
@@ -162,7 +162,9 @@ class DisplayPictureScreen extends StatelessWidget {
                                 provider.initCamera().then((cameras) {
                                   routePush(context,
                                       page: TakePictureScreen(
-                                        camera: cameras.first,
+                                        camera: content == 'ktp'
+                                            ? cameras[0]
+                                            : cameras[1],
                                         takeContent: content,
                                       ));
                                 });
@@ -170,9 +172,9 @@ class DisplayPictureScreen extends StatelessWidget {
                             ),
                           ),
                           SizedBox(
-                            width: SizeConfig.width * .42,
+                            width: SizeConfig.width * .4,
                             child: ButtonView(
-                              marginVertical: 8.0,
+                              marginVertical: 0.0,
                               name: 'Next',
                               onPressed: () {
                                 provider.nextSubmission(context);

lib/application/component/take_picture_screen/take_picture_screen.dart

@@ -1,7 +1,7 @@
 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/DisplayPictureScreen.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';

lib/application/component/text_caption/text_caption.dart

@@ -3,7 +3,7 @@ import 'package:flutter/material.dart';
 
 class TextCaption extends StatelessWidget {
   final String title, subtitle;
-  final TextAlign? textAlignSubtitle;
+  final TextAlign? textAlign, textAlignSubtitle;
   final CrossAxisAlignment? crossAxisAlignment;
   const TextCaption({
     Key? key,
@@ -11,6 +11,7 @@ class TextCaption extends StatelessWidget {
     this.subtitle = '',
     this.textAlignSubtitle,
     this.crossAxisAlignment,
+    this.textAlign,
   }) : super(key: key);
 
   @override
@@ -23,6 +24,7 @@ class TextCaption extends StatelessWidget {
         children: [
           Text(
             title,
+            textAlign: textAlign ?? TextAlign.start,
             style: const TextStyle(
               fontSize: 24,
               fontWeight: FontWeight.w700,

lib/application/component/text_form/text_form_view.dart

@@ -81,23 +81,26 @@ 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,
+                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
-                        crossAxisAlignment: CrossAxisAlignment.start,
+                      crossAxisAlignment: CrossAxisAlignment.center,
                       children: [
                         Text(
                           name,
                           style: const TextStyle(
                             fontSize: 16,
-                              // color: ColorPalette.greyLight,
+                            fontWeight: FontWeight.w600,
+                            color: ColorPalette.slate800,
                           ),
                         ),
                         suffixLable ??
@@ -115,8 +118,8 @@ class TextFormView extends StatelessWidget {
                       style: const TextStyle(
                         fontSize: 16,
                       ),
-                      )
+                    ),
-                : const SizedBox(),
+              // : const SizedBox(),
               trailingTitleWidget ?? const SizedBox(),
             ],
           ),
@@ -191,13 +194,14 @@ class TextFormView extends StatelessWidget {
                 suffixIconConstraints: suffixIconConstraints,
                 prefixIconConstraints: preffixIconConstraints,
                 prefix: prefix,
-              contentPadding: contentPadding ?? const EdgeInsets.symmetric(
+                contentPadding: contentPadding ??
+                    const EdgeInsets.symmetric(
                       horizontal: 8.0,
                       vertical: 16.0,
-              )
+                    )),
-          ),
           )
         ],
+      ),
     );
   }
 }

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

@@ -1,5 +1,5 @@
 import 'package:cims_apps/application/assets/path_assets.dart';
-import 'package:cims_apps/application/component/button/button_back.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_form/text_form_view.dart';
@@ -10,7 +10,7 @@ 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/auth/registration/view/risk_profile/risk_profile_view.dart';
+import 'package:cims_apps/features/auth/registration/view/submission_data/risk_profile/risk_profile_view.dart';
 import 'package:cims_apps/features/bottom_navigation_view.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
@@ -61,7 +61,7 @@ class _LoginViewState extends State<LoginView> {
             title: Row(
               mainAxisAlignment: MainAxisAlignment.spaceBetween,
               children: [
-                ButtonBack(),
+                BackButtonView(),
                 const Text('Sign In'),
                 SizedBox(
                   width: SizeConfig.width * 0.1,
@@ -69,14 +69,14 @@ class _LoginViewState extends State<LoginView> {
               ],
             ),
             shape: const RoundedRectangleBorder(
-                side: BorderSide(color: ColorPalette.slate200)
+                side: BorderSide(color: ColorPalette.slate200)),
-            ),
           ),
           body: PageView(
             physics: NeverScrollableScrollPhysics(),
             controller: pageController,
             children: [
-              PhoneNumberView(nextStep: nextStep, controller: phoneNumberController),
+              PhoneNumberView(
+                  nextStep: nextStep, controller: phoneNumberController),
               PasswordView(nextStep: nextStep, controller: passwordController)
             ],
           ),

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

@@ -1,6 +1,7 @@
 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/numeric_pad/numeric_pad.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';
@@ -35,6 +36,7 @@ class PhoneNumberView extends StatelessWidget {
             inputFormatters: [
               FilteringTextInputFormatter.deny(RegExp(r'^0'))
             ],
+            contentPadding: EdgeInsets.all(1),
             prefixIcon: Container(
                 width: SizeConfig.width * .23,
                 padding:
@@ -108,6 +110,10 @@ class PhoneNumberView extends StatelessWidget {
                   )
               )
             ],
+          ),
+          NumericPad(
+            onNumberSelected: (p0) {
+            },
           )
         ],
       ),

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

@@ -1,164 +0,0 @@
-import 'package:cims_apps/application/assets/path_assets.dart';
-import 'package:cims_apps/application/component/button/button_back.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/risk_profile/results_view.dart';
-import 'package:cims_apps/features/auth/registration/view/risk_profile/risk_profile_view.dart';
-import 'package:cims_apps/features/auth/registration/view/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: [
-                  ButtonBack(),
-                  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/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,56 @@
+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/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/features/auth/registration/view/submission_data/data_bank/guide_screen.dart';
+import 'package:flutter/material.dart';
+
+class SubmitBankAccount extends StatelessWidget {
+  const SubmitBankAccount({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    List<ItemSelectForm> listForm = [
+      ItemSelectForm('key1', 'BCA'),
+      ItemSelectForm('key2', 'BRI'),
+      ItemSelectForm('key3', 'BNI'),
+      ItemSelectForm('key4', 'BANK MANDIRI'),
+      ItemSelectForm('key5', 'CIMB NIAGA'),
+    ];
+    return SingleChildScrollView(
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          const TextCaption(title: 'Input your bank account data'),
+          SelectFormView(
+            name: 'Bank Name',
+            listItem: listForm,
+            onSelect: (value) {},
+          ),
+          TextFormView(
+            name: 'Account Number',
+            trailingTitleWidget: SizedBox(
+              width: 24,
+              child: GestureDetector(
+                onTap: () {
+                  routePush(context, page: GuideScreen());
+                },
+                child: const ImageView(image: PathAssets.iconQuestion),
+              ),
+            ),
+          ),
+          TextFormView(name: 'Account Owner Name'),
+          const Text(
+            "Make sure the account you use is in your name, not someone else's",
+            style: TextStyle(
+              color: ColorPalette.slate400,
+            ),
+          )
+        ],
+      ),
+    );
+  }
+}

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

@@ -1,12 +1,12 @@
 import 'package:cims_apps/application/assets/path_assets.dart';
-import 'package:cims_apps/application/component/button/button_back.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/registration_password_view.dart';
-import 'package:cims_apps/features/auth/registration/view/risk_profile/risk_profile_view_model/risk_profile_view_model.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';
 
@@ -26,7 +26,7 @@ class ResultsView extends StatelessWidget {
         title: Row(
           mainAxisAlignment: MainAxisAlignment.spaceBetween,
           children: [
-            ButtonBack(),
+            BackButtonView(),
             const Text('Risk Profile', textAlign: TextAlign.center),
             SizedBox(
                 width: SizeConfig.width * 0.1

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

@@ -1,11 +1,11 @@
 import 'package:cims_apps/application/assets/path_assets.dart';
-import 'package:cims_apps/application/component/button/button_back.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/risk_profile/question_view.dart';
+import 'package:cims_apps/features/auth/registration/view/submission_data/risk_profile/question_view.dart';
 import 'package:flutter/material.dart';
 
 class RiskProfileView extends StatelessWidget {
@@ -22,16 +22,13 @@ class RiskProfileView extends StatelessWidget {
         title: Row(
           mainAxisAlignment: MainAxisAlignment.spaceBetween,
           children: [
-            ButtonBack(),
+            BackButtonView(),
             const Text('Risk Profile', textAlign: TextAlign.center),
-            SizedBox(
+            SizedBox(width: SizeConfig.width * 0.1)
-              width: SizeConfig.width * 0.1
-            )
           ],
         ),
         shape: const RoundedRectangleBorder(
-            side: BorderSide(color: ColorPalette.slate200)
+            side: BorderSide(color: ColorPalette.slate200)),
-        ),
       ),
       body: Container(
         width: SizeConfig.width,
@@ -52,8 +49,7 @@ class RiskProfileView extends StatelessWidget {
                   style: TextStyle(
                       color: ColorPalette.slate800,
                       fontWeight: FontWeight.bold,
-                    fontSize: 24
+                      fontSize: 24),
-                  ),
                 ),
                 SizedBox(
                   height: 12,
@@ -64,8 +60,7 @@ class RiskProfileView extends StatelessWidget {
                   style: TextStyle(
                       fontSize: 16,
                       fontWeight: FontWeight.w600,
-                    color: ColorPalette.slate500
+                      color: ColorPalette.slate500),
-                  ),
                 ),
               ],
             ),
@@ -87,8 +82,7 @@ class RiskProfileView extends StatelessWidget {
                       style: TextStyle(
                           fontWeight: FontWeight.w600,
                           color: ColorPalette.primary,
-                        fontSize: 16
+                          fontSize: 16),
-                      ),
                     )
                   ],
                 ),

lib/features/auth/registration/view/submission_data/submission_parent.dart

@@ -2,9 +2,12 @@ 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/data_bank/submit_bank_account.dart';
+import 'package:cims_apps/features/auth/registration/view/submission_data/submit_data_id_card.dart';
 import 'package:cims_apps/features/auth/registration/view/submission_data/submit_photo_ktp.dart';
 import 'package:cims_apps/features/auth/registration/view/submission_data/submit_email.dart';
 import 'package:cims_apps/features/auth/registration/view/submission_data/submit_personal_data.dart';
+import 'package:cims_apps/features/auth/registration/view/submission_data/submit_photo_selfie.dart';
 import 'package:cims_apps/features/auth/registration/viewmodel/submission_data_viewmodel.dart';
 import 'package:cims_apps/features/bottom_navigation_view.dart';
 import 'package:flutter/material.dart';
@@ -42,17 +45,11 @@ class _SubmissionParentState extends State<SubmissionParent> {
       case 3:
         return const SubmitPhotoKtp();
       case 4:
-        return Container(
+        return const SubmitPhotoSelfie();
-          child: Text("Step 4"),
-        );
       case 5:
-        return Container(
+        return const SubmitDataIdCard();
-          child: Text("Step 5"),
-        );
       case 6:
-        return Container(
+        return const SubmitBankAccount();
-          child: Text("Step 6"),
-        );
       case 7:
         return Container(
           child: Text("Step 7"),
@@ -113,7 +110,8 @@ class _SubmissionParentState extends State<SubmissionParent> {
                             child: _content(provider.getCurrentStep),
                           ),
                         ),
-                        provider.getCurrentStep == 3
+                        provider.getCurrentStep == 3 ||
+                                provider.getCurrentStep == 4
                             ? const SizedBox()
                             : Align(
                                 alignment: Alignment.bottomCenter,

lib/features/auth/registration/view/submission_data/submit_data_id_card.dart

@@ -0,0 +1,218 @@
+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/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 SubmitDataIdCard extends StatelessWidget {
+  const SubmitDataIdCard({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    List listImg = [
+      {'urlImg': PathAssets.imgKtpClear, 'tag': 'ID Card'},
+      {'urlImg': PathAssets.imgSelfieClear, 'tag': 'Selfie with ID Card'},
+    ];
+
+    bottomSheet() {
+      showModalBottomSheet(
+        context: context,
+        builder: (BuildContext context) {
+          return StatefulBuilder(
+            builder: (context, setState) {
+              return Container(
+                decoration: const BoxDecoration(
+                    color: Colors.white,
+                    borderRadius:
+                        BorderRadius.vertical(top: Radius.circular(18))),
+                height: SizeConfig.height * .32,
+                padding: const EdgeInsets.all(16.0),
+                child: Column(
+                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                  children: [
+                    Row(
+                      children: [
+                        const ImageView(
+                          image: PathAssets.iconShield,
+                          width: 20,
+                          height: 22,
+                        ),
+                        const SizedBox(
+                          width: 8,
+                        ),
+                        const Expanded(
+                          child: Text(
+                            'Will my data be safe?',
+                            style: TextStyle(
+                              fontWeight: FontWeight.w600,
+                              color: ColorPalette.primary,
+                            ),
+                          ),
+                        ),
+                        IconButton(
+                          onPressed: () => Navigator.pop(context),
+                          icon: const Icon(
+                            Icons.close,
+                            color: ColorPalette.slate400,
+                          ),
+                        )
+                      ],
+                    ),
+                    const Text(
+                      'We only request data in accordance with OJK regulations. Your data is encrypted and will not be shared with third parties without your consent.',
+                      style: TextStyle(
+                        color: ColorPalette.slate400,
+                      ),
+                    ),
+                    ButtonView(
+                      name: 'OK',
+                      isOutlined: true,
+                      onPressed: () {
+                        Navigator.pop(context);
+                      },
+                    )
+                  ],
+                ),
+              );
+            },
+          );
+        },
+      );
+    }
+
+    Widget photoDocument() {
+      return Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          const Padding(
+            padding: EdgeInsets.symmetric(vertical: 8.0),
+            child: Text(
+              'Photo Document',
+              style: TextStyle(
+                fontSize: 16,
+                fontWeight: FontWeight.w600,
+                color: ColorPalette.slate800,
+              ),
+            ),
+          ),
+          Row(
+            mainAxisAlignment: MainAxisAlignment.spaceBetween,
+            children: listImg.map((e) {
+              return Column(
+                children: [
+                  SizedBox(
+                    height: SizeConfig.height * .18,
+                    width: SizeConfig.width * .45,
+                    child: ImageView(
+                      image: e['urlImg'],
+                      fit: BoxFit.fill,
+                      borderRadius: 12,
+                    ),
+                  ),
+                  SizedBox(
+                    width: SizeConfig.width * .43,
+                    child: Row(
+                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                      children: [
+                        Text(
+                          e['tag'],
+                          overflow: TextOverflow.ellipsis,
+                          maxLines: 1,
+                          style: const TextStyle(
+                            fontWeight: FontWeight.w600,
+                            color: ColorPalette.slate800,
+                          ),
+                        ),
+                        SizedBox(
+                          width: 38,
+                          child: IconButton(
+                              style: IconButton.styleFrom(
+                                  backgroundColor: Colors.white,
+                                  shape: const CircleBorder(
+                                      side: BorderSide(
+                                          color: ColorPalette.slate200))),
+                              onPressed: () {},
+                              icon: const Icon(
+                                Icons.camera_alt_outlined,
+                                color: ColorPalette.slate500,
+                              )),
+                        ),
+                      ],
+                    ),
+                  )
+                ],
+              );
+            }).toList(),
+          )
+        ],
+      );
+    }
+
+    return SingleChildScrollView(
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          const TextCaption(title: 'Check your ID card data for accuracy'),
+          TextFormView(name: 'NIK'),
+          TextFormView(name: 'Full Name'),
+          TextFormView(
+            name: 'Birth Date',
+            suffixIcon: const Icon(
+              Icons.calendar_today_rounded,
+              color: ColorPalette.slate400,
+            ),
+          ),
+          photoDocument(),
+          Container(
+            width: SizeConfig.width,
+            padding: const EdgeInsets.symmetric(horizontal: 16.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: [
+                const ImageView(
+                  image: PathAssets.iconShield,
+                  width: 20,
+                  height: 22,
+                ),
+                const SizedBox(
+                  width: 8,
+                ),
+                const Expanded(
+                  child: Text(
+                    'Will my data be safe?',
+                    style: TextStyle(
+                      fontWeight: FontWeight.w600,
+                      color: ColorPalette.primary,
+                    ),
+                  ),
+                ),
+                IconButton(
+                  onPressed: () {
+                    bottomSheet();
+                  },
+                  icon: const Icon(
+                    Icons.arrow_forward_ios,
+                    color: ColorPalette.primary,
+                    size: 20,
+                  ),
+                )
+              ],
+            ),
+          )
+        ],
+      ),
+    );
+  }
+}

lib/features/auth/registration/view/submission_data/submit_photo_ktp.dart

@@ -99,7 +99,7 @@ class SubmitPhotoKtp extends StatelessWidget {
                       provider.initCamera().then((cameras) {
                         routePush(context,
                             page: TakePictureScreen(
-                              camera: cameras.first,
+                              camera: cameras[0],
                               takeContent: 'ktp',
                             ));
                       });

lib/features/auth/registration/view/submission_data/submit_photo_selfie.dart

@@ -0,0 +1,125 @@
+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/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/viewmodel/submission_data_viewmodel.dart';
+import 'package:flutter/material.dart';
+import 'package:provider/provider.dart';
+
+class SubmitPhotoSelfie extends StatelessWidget {
+  const SubmitPhotoSelfie({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    List listImg = [
+      {
+        'urlImg': PathAssets.imgSelfieBlur,
+        'tag': 'Blurry and ID card is not visible'
+      },
+      {
+        'urlImg': PathAssets.imgSelfieClear,
+        'tag': 'ID card and face clearly visible'
+      },
+    ];
+    return MultiProvider(
+        providers: [
+          ChangeNotifierProvider(
+            create: (context) => SubmissionDataViewModel(),
+          )
+        ],
+        builder: (context, child) {
+          return SizedBox(
+            height: SizeConfig.height * .75,
+            child: Column(
+              mainAxisAlignment: MainAxisAlignment.spaceBetween,
+              children: [
+                const TextCaption(
+                  title: 'Take a selfie with your ID card',
+                  subtitle:
+                      'Make sure your face and identity are clearly visible to ensure your identity is correct.',
+                ),
+                SizedBox(
+                  height: SizeConfig.height * .42,
+                  width: SizeConfig.width,
+                  child: Wrap(
+                    alignment: WrapAlignment.spaceBetween,
+                    spacing: 2,
+                    runSpacing: 2,
+                    children: List.generate(listImg.length, (index) {
+                      final urlList = listImg[index]['urlImg'];
+                      final tag = listImg[index]['tag'];
+                      return Column(
+                        children: [
+                          ImageView(
+                            image: urlList,
+                            width: SizeConfig.width * .35,
+                          ),
+                          const SizedBox(
+                            height: 8,
+                          ),
+                          SizedBox(
+                            width: SizeConfig.width * .42,
+                            child: Text(
+                              tag,
+                              textAlign: TextAlign.center,
+                              style: const TextStyle(
+                                  color: ColorPalette.slate800,
+                                  fontWeight: FontWeight.w600),
+                            ),
+                          ),
+                        ],
+                      );
+                    }),
+                  ),
+                ),
+                const Row(
+                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                  crossAxisAlignment: CrossAxisAlignment.center,
+                  children: [
+                    ImageView(
+                      image: PathAssets.iconShield,
+                      width: 20,
+                      height: 22,
+                    ),
+                    SizedBox(
+                      width: 8,
+                    ),
+                    Expanded(
+                      child: Text(
+                        'In accordance with OJK regulations, a selfie with ID card is required to purchase mutual funds.',
+                        maxLines: 2,
+                        style: TextStyle(
+                          fontSize: 12,
+                          fontWeight: FontWeight.w600,
+                          color: ColorPalette.primary,
+                        ),
+                      ),
+                    )
+                  ],
+                ),
+                Consumer<SubmissionDataViewModel>(
+                    builder: (context, provider, child) {
+                  return ButtonView(
+                    name: 'Take a Photo',
+                    marginVertical: 16.0,
+                    onPressed: () {
+                      provider.initCamera().then((cameras) {
+                        routePush(context,
+                            page: TakePictureScreen(
+                              camera: cameras[1],
+                              takeContent: 'selfie',
+                            ));
+                      });
+                    },
+                  );
+                })
+              ],
+            ),
+          );
+        });
+  }
+}

lib/features/bottom_navigation_view.dart

@@ -1,5 +1,6 @@
 import 'package:cims_apps/application/theme/color_palette.dart';
 import 'package:cims_apps/features/dashboard/dashboard_account/view/homepage/homepage_view.dart';
+import 'package:cims_apps/features/dashboard/dashboard_account/view/plan/plan_view.dart';
 import 'package:cims_apps/features/dashboard/dashboard_account/view/portfolio/portfolio_view.dart';
 import 'package:flutter/material.dart';
 
@@ -18,9 +19,7 @@ class _BottomNavigationViewState extends State<BottomNavigationView> {
     ///TODO: masukan pagenya dilistWidget ini
     List<Widget> listWidget = [
       HomeView(),
-      Container(
+      PlanView(),
-        color: Colors.redAccent,
-      ),
       Container(),
       PortofolioView(),
       Container(),
@@ -32,8 +31,8 @@ class _BottomNavigationViewState extends State<BottomNavigationView> {
         label: 'Home',
       ),
       BottomNavigationBarItem(
-        icon: Icon(Icons.search),
+        icon: Icon(Icons.file_open),
-        label: 'Search',
+        label: 'Plan',
       ),
       BottomNavigationBarItem(
         icon: Icon(Icons.compare_arrows),
@@ -51,7 +50,10 @@ class _BottomNavigationViewState extends State<BottomNavigationView> {
 
     return Scaffold(
       body: listWidget[_selectedIndex],
-      bottomNavigationBar: BottomNavigationBar(
+      bottomNavigationBar: Padding(
+        padding: const EdgeInsets.symmetric(vertical: 12),
+        child: BottomNavigationBar(
+          elevation: 0,
           onTap: (value) {
             setState(() {
               _selectedIndex = value;
@@ -66,6 +68,7 @@ class _BottomNavigationViewState extends State<BottomNavigationView> {
           selectedLabelStyle: const TextStyle(color: ColorPalette.primary),
           unselectedLabelStyle: const TextStyle(color: Colors.black),
         ),
+      ),
     );
   }
 }

lib/features/dashboard/dashboard_account/view/invest_type/invest_type_view.dart

@@ -1,5 +1,5 @@
 import 'package:cims_apps/application/assets/path_assets.dart';
-import 'package:cims_apps/application/component/button/button_back.dart';
+import 'package:cims_apps/application/component/button/back_button_view.dart';
 import 'package:cims_apps/application/component/image/image_view.dart';
 import 'package:cims_apps/application/component/text_title/text_title.dart';
 import 'package:cims_apps/application/theme/color_palette.dart';
@@ -53,7 +53,7 @@ class _InvestTypeViewState extends State<InvestTypeView> {
                   child: Row(
                     mainAxisAlignment: MainAxisAlignment.spaceBetween,
                     children: [
-                      const ButtonBack(),
+                      const BackButtonView(),
                       TextTitle(title: widget.title, color: Colors.white),
                       SizedBox(
                         width: SizeConfig.width * 0.1,

lib/features/dashboard/dashboard_account/view/plan/plan_view.dart

@@ -0,0 +1,22 @@
+import 'package:cims_apps/application/component/custom_app_bar/custom_app_bar.dart';
+import 'package:cims_apps/application/component/goal_investing_view.dart';
+import 'package:flutter/material.dart';
+
+class PlanView extends StatelessWidget {
+  const PlanView({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: CustomAppBar(height: 70, title: 'Investment Plan'),
+      body: SingleChildScrollView(
+        padding: EdgeInsets.all(24),
+        child: Column(
+          children: [
+            GoalInvestingView()
+          ],
+        ),
+      ),
+    );
+  }
+}

lib/features/dashboard/dashboard_account/view/product/product_view.dart

@@ -1,7 +1,7 @@
 import 'dart:math';
 
 import 'package:cims_apps/application/assets/path_assets.dart';
-import 'package:cims_apps/application/component/button/button_back.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_form/text_form_view.dart';
@@ -112,7 +112,7 @@ class _ProductViewState extends State<ProductView> {
                   child: Row(
                     mainAxisAlignment: MainAxisAlignment.spaceBetween,
                     children: [
-                      ButtonBack(),
+                      BackButtonView(),
                       Wrap(
                         spacing: 12,
                         children: [