Merge pull request 'bayu/dev' (#22) from bayu/dev into dev

Reviewed-on: #22

lib/application/assets/path_assets.dart

@@ -49,6 +49,28 @@ class PathAssets {
   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';
+  static const String iconNavigationHome =
+      'assets/icons/icon-navigation-home.png';
+  static const String iconNavigationPlan =
+      'assets/icons/icon-navigation-plan.png';
+  static const String iconNavigationTransaction =
+      'assets/icons/icon-navigation-transaction.png';
+  static const String iconNavigationPortfolio =
+      'assets/icons/icon-navigation-portfolio.png';
+  static const String iconNavigationProfile =
+      'assets/icons/icon-navigation-profile.png';
+  static const String iconRemove = 'assets/icons/icon-remove.png';
+  static const String iconEducation = 'assets/icons/icon-education.png';
+  static const String iconFund = 'assets/icons/icon-fund.png';
+  static const String iconHome = 'assets/icons/icon-home.png';
+  static const String iconShop = 'assets/icons/icon-shop.png';
+  static const String iconCard = 'assets/icons/icon-card.png';
+  static const String iconChat = 'assets/icons/icon-chat.png';
+  static const String iconLogout = 'assets/icons/icon-logout.png';
+  static const String iconProfile = 'assets/icons/icon-profile.png';
+  static const String iconSetting = 'assets/icons/icon-setting.png';
+  static const String iconGadgetOutline =
+      'assets/icons/icon-gadget-outline.png';
 
   /// IMAGE
   static const String imgSplashLogo = 'assets/images/splash-logo.png';
@@ -77,13 +99,36 @@ class PathAssets {
   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 imgCatOutlined = 'assets/images/img-cat-outlined.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 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';
+  static const String imgExpandPurchase =
+      'assets/images/img-expand-purchase.png';
+  static const String imgEmptyTransaction =
+      'assets/images/img-empty-transaction.png';
+  static const String bgProfile = 'assets/images/bg-profile.png';
+
+  static const Map<String, String> goalInvestIcon = {
+    'Education': iconToga,
+    'Marriage': iconCake,
+    'Old age days': iconHouse,
+    'Home': iconHouse,
+    'Other Plan': iconCreatePlan,
+    'Create Plan': iconCreatePlan,
+    'Entertainment': iconTicket,
+    'Gadget': iconGadget,
+    'Business': iconMarket,
+    'Fashion': iconBag,
+    'Shop': iconBag,
+    'Vehicle': iconCar,
+    'Holiday': iconPlane,
+  };
 }

lib/application/component/card_transaction/card_transaction_view.dart

@@ -0,0 +1,100 @@
+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 CardTransactionView extends StatelessWidget {
+  final VoidCallback onTap;
+  final String iconPath, type, amount, subs, step;
+  final String? timeTransaction;
+  const CardTransactionView({
+    Key? key,
+    required this.step,
+    required this.type,
+    required this.amount,
+    required this.iconPath,
+    required this.subs,
+    required this.onTap,
+    this.timeTransaction,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    TextTheme textTheme = Theme.of(context).textTheme;
+    return GestureDetector(
+      onTap: onTap,
+      child: Container(
+        margin: const EdgeInsets.symmetric(vertical: 16.0),
+        padding: const EdgeInsets.symmetric(vertical: 16.0, horizontal: 16.0),
+        decoration: BoxDecoration(
+          color: Colors.white,
+          border: Border.all(width: 1, color: ColorPalette.slate200),
+          borderRadius: const BorderRadius.all(Radius.circular(12)),
+        ),
+        child: Row(
+          mainAxisAlignment: MainAxisAlignment.spaceBetween,
+          crossAxisAlignment: CrossAxisAlignment.center,
+          children: [
+            SizedBox(
+                width: SizeConfig.width * .4,
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    Row(
+                      children: [
+                        ImageView(
+                            image: iconPath, width: SizeConfig.width * .12),
+                        Padding(
+                          padding: const EdgeInsets.only(left: 8.0),
+                          child: Text(
+                            type,
+                            style: textTheme.headlineSmall,
+                          ),
+                        ),
+                      ],
+                    ),
+                    Padding(
+                      padding: const EdgeInsets.only(top: 16.0),
+                      child: Text(
+                        amount,
+                        style: textTheme.headlineSmall,
+                      ),
+                    ),
+                  ],
+                )),
+            SizedBox(
+                width: SizeConfig.width * .4,
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.end,
+                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                  children: [
+                    SizedBox(
+                        height: SizeConfig.height * .08,
+                        child: Text(
+                          subs,
+                          style: const TextStyle(color: ColorPalette.primary),
+                        )),
+                    Row(
+                      mainAxisAlignment: MainAxisAlignment.end,
+                      children: [
+                        step == 'waiting'
+                            ? const Icon(Icons.access_time_sharp,
+                                color: ColorPalette.slate400)
+                            : const SizedBox(),
+                        step == 'waiting'
+                            ? Text(timeTransaction.toString())
+                            : const SizedBox(),
+                        const Padding(
+                          padding: EdgeInsets.only(left: 16.0),
+                          child: Icon(Icons.arrow_forward_ios),
+                        ),
+                      ],
+                    ),
+                  ],
+                )),
+          ],
+        ),
+      ),
+    );
+  }
+}

lib/application/component/card_transaction/empty_card_transaction.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/core/utils/size_config.dart';
+import 'package:flutter/material.dart';
+
+class EmptyCardTransaction extends StatelessWidget {
+  final VoidCallback onPressedButton;
+  const EmptyCardTransaction({Key? key, required this.onPressedButton})
+      : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    TextTheme textTheme = Theme.of(context).textTheme;
+    return Container(
+      padding: const EdgeInsets.symmetric(vertical: 8.0),
+      child: Center(
+        child: Column(
+          mainAxisAlignment: MainAxisAlignment.spaceAround,
+          children: [
+            ImageView(
+              image: PathAssets.imgEmptyTransaction,
+              width: SizeConfig.width * .4,
+            ),
+            Text(
+              'No Transaction Yet',
+              style: textTheme.headlineSmall,
+            ),
+            Text(
+              "Let's keep building your investment for even greater financial growth!",
+              style: textTheme.bodyMedium,
+              textAlign: TextAlign.center,
+            ),
+            ButtonView(
+              name: 'Investing Now',
+              width: SizeConfig.width * .5,
+              onPressed: onPressedButton,
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

lib/application/component/custom_app_bar/custom_app_bar.dart

@@ -11,9 +11,9 @@ class CustomAppBar extends StatelessWidget implements PreferredSizeWidget {
   const CustomAppBar({
     Key? key,
     required this.height,
-    this.leading,
     required this.title,
     this.trailing,
+    this.leading,
   }) : super(key: key);
 
   @override

lib/application/component/expandable_widget/expandable_widget.dart

@@ -0,0 +1,119 @@
+import 'package:cims_apps/application/component/expandable_widget/see_more_less_widget.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 ExpandableWidget extends StatelessWidget {
+  final String? content;
+  final double? fontSize;
+  final int maxLinesToShow;
+  final Alignment? alignmentMore;
+  final bool? hideTextMore;
+  final bool? hideIconMore;
+
+  ExpandableWidget({
+    super.key,
+    required this.content,
+    this.fontSize,
+    this.maxLinesToShow = 1,
+    this.alignmentMore,
+    this.hideTextMore = false,
+    this.hideIconMore = true,
+  });
+
+  ValueNotifier<bool> expanded = ValueNotifier(false);
+
+  @override
+  Widget build(BuildContext context) {
+    final TextSpan textSpan = TextSpan(
+      text: content ?? "",
+      style: TextStyle(
+        fontSize: fontSize ?? 16.0,
+        color: ColorPalette.slate400,
+      ),
+    );
+
+    final TextPainter textPainter = TextPainter(
+      text: textSpan,
+      maxLines: expanded.value ? null : maxLinesToShow,
+      textDirection: TextDirection.ltr,
+      strutStyle: StrutStyle(
+        fontSize: fontSize ?? 16.0,
+      )
+    );
+
+    textPainter.layout(maxWidth: SizeConfig.width);
+
+    final int numberOfLines = textPainter.computeLineMetrics().length;
+    return ValueListenableBuilder(
+      valueListenable: expanded,
+      builder: (context, values, _) {
+        return Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            LayoutBuilder(
+              builder: (BuildContext context, BoxConstraints constraints) {
+                if (!expanded.value && numberOfLines >= maxLinesToShow) {
+                  return Column(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    children: [
+                      Text(
+                        content ?? "",
+                        maxLines: maxLinesToShow,
+                        overflow: TextOverflow.ellipsis,
+                        style: TextStyle(
+                          fontSize: fontSize ?? 16.0,
+                          color: ColorPalette.slate400,
+                        ),
+                      ),
+                      /* See More :: type 1 - See More | 2 - See Less */
+                      SeeMoreLessWidget(
+                        textData: 'See More',
+                        type: 1,
+                        section: 1,
+                        onSeeMoreLessTap: () {
+                          expanded.value = true;
+                        },
+                        alignment: alignmentMore,
+                        hideIconMore: hideIconMore!,
+                        hideTextMore: hideTextMore!,
+                      ),
+                      /* See More :: type 1 - See More | 2 - See Less */
+                    ],
+                  );
+                } else {
+                  return Column(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    children: [
+                      Text(
+                        content ?? "",
+                        style: TextStyle(
+                          fontSize: fontSize ?? 16.0,
+                          color: ColorPalette.slate400,
+                        ),
+                      ),
+                      if (expanded.value && numberOfLines >= maxLinesToShow)
+                      /* See Less :: type 1 - See More | 2 - See Less */
+                        SeeMoreLessWidget(
+                          textData: 'See Less',
+                          type: 2,
+                          section: 1,
+                          onSeeMoreLessTap: () {
+                            expanded.value = false;
+                          },
+                          alignment: alignmentMore,
+                          hideIconMore: hideIconMore!,
+                          hideTextMore: hideTextMore!,
+                        ),
+                      /* See Less :: type 1 - See More | 2 - See Less */
+                    ],
+                  );
+                }
+              },
+            ),
+          ],
+        );
+      },
+    );
+  }
+}

lib/application/component/expandable_widget/see_more_less_widget.dart

@@ -0,0 +1,74 @@
+import 'package:cims_apps/application/theme/color_palette.dart';
+import 'package:flutter/material.dart';
+
+class SeeMoreLessWidget extends StatelessWidget {
+  final String? textData;
+  final int? type; /* type 1 - See More | 2 - See Less */
+  final Function? onSeeMoreLessTap;
+  final int?
+  section; /* 1: About the course | 2 - Who can take up this course? | 3 - Mentors | 4 - Course Video Reviews */
+  final Alignment? alignment;
+  final bool hideTextMore;
+  final bool hideIconMore;
+
+  const SeeMoreLessWidget({
+    super.key,
+    required this.textData,
+    required this.type,
+    required this.onSeeMoreLessTap,
+    required this.section,
+    required this.alignment,
+    required this.hideTextMore,
+    required this.hideIconMore,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Align(
+      alignment: alignment ?? Alignment.centerLeft,
+      child: InkWell(
+        onTap: () {
+          if (onSeeMoreLessTap != null) {
+            onSeeMoreLessTap!();
+          }
+        },
+        child: Text.rich(
+          softWrap: true,
+          style: const TextStyle(
+            color: ColorPalette.primary,
+          ),
+          textAlign: TextAlign.start,
+          TextSpan(
+            text: "",
+            children: [
+              if(!hideTextMore)
+                TextSpan(
+                  text: textData,
+                  style: const TextStyle(
+                      color: ColorPalette.primary,
+                      decoration: TextDecoration.underline,
+                  ),
+                ),
+              if(!hideTextMore && !hideIconMore)
+                const WidgetSpan(
+                  child: SizedBox(
+                    width: 3.0,
+                  ),
+                ),
+              if(!hideIconMore)
+                WidgetSpan(
+                  child: Icon(
+                    (type == 1)
+                        ? Icons.keyboard_arrow_down
+                        : Icons.keyboard_arrow_up,
+                    color: ColorPalette.slate300,
+                    size: 28,
+                  ),
+                ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}

lib/application/component/list_tile/list_tile_view.dart

@@ -8,22 +8,26 @@ class ListTileView extends StatelessWidget {
   final String title;
   final VoidCallback? onPressed;
   final Widget? prefixIcon, suffixIcon;
-  final Color? colorTitle;
+  final EdgeInsetsGeometry? padding, margin;
+  final TextStyle? textStyle;
   const ListTileView(
       {Key? key,
       required this.title,
       this.onPressed,
       this.prefixIcon,
       this.suffixIcon,
-      this.colorTitle})
+      this.padding,
+      this.textStyle,
+      this.margin})
       : 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),
+      padding: padding ??
+          const EdgeInsets.symmetric(vertical: 16.0, horizontal: 8.0),
+      margin: margin ?? const EdgeInsets.symmetric(vertical: 16.0),
       decoration: BoxDecoration(
         color: ColorPalette.blue50,
         borderRadius: BorderRadius.circular(10),
@@ -47,22 +51,23 @@ class ListTileView extends StatelessWidget {
           Expanded(
             child: Text(
               title,
-              style: TextStyle(
+              style: textStyle ??
+                  const TextStyle(
                     fontWeight: FontWeight.w600,
-                color: colorTitle ?? ColorPalette.slate500,
+                    color: ColorPalette.slate500,
                   ),
             ),
           ),
-          suffixIcon != null
-              ? IconButton(
+          suffixIcon ??
+              IconButton(
                 onPressed: onPressed,
                 icon: const Icon(
                   Icons.arrow_forward_ios,
                   color: ColorPalette.primary,
                   size: 20,
                 ),
-                )
-              : const SizedBox(),
+              ),
+          // : const SizedBox(),
         ],
       ),
     );

lib/application/component/numeric_pad/numeric_pad.dart

@@ -1,3 +1,5 @@
+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';
@@ -102,7 +104,8 @@ class NumericPad extends StatelessWidget {
               textAlign: TextAlign.center,
               style: TextStyle(
                 fontSize: 28,
-                  fontWeight: FontWeight.bold
+                fontWeight: FontWeight.bold,
+                color: ColorPalette.slate800
               ),
             ),
           ),
@@ -117,8 +120,9 @@ class NumericPad extends StatelessWidget {
             onNumberSelected('');
           },
           child: Icon(
-            Icons.highlight_remove,
+            Icons.backspace_outlined,
             size: 28,
+            color: ColorPalette.slate800,
           ),
         )
     );

lib/application/component/radio_agreement.dart

@@ -0,0 +1,57 @@
+import 'package:cims_apps/application/component/expandable_widget/expandable_widget.dart';
+import 'package:cims_apps/application/theme/color_palette.dart';
+import 'package:flutter/material.dart';
+
+class RadioAgreement extends StatelessWidget {
+  final void Function() onTap;
+  final bool isAgree;
+  final String desc;
+  const RadioAgreement({super.key, required this.isAgree, required this.desc, required this.onTap,});
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 16),
+      child: Row(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          GestureDetector(
+            onTap: onTap,
+            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: ExpandableWidget(
+              content: desc,
+              maxLinesToShow: 3,
+            )
+          )
+        ],
+      ),
+    );
+  }
+}

lib/application/component/risk_profile.dart

@@ -1,4 +1,5 @@
 import 'package:cims_apps/application/assets/path_assets.dart';
+import 'package:cims_apps/application/component/expandable_widget/expandable_widget.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';
@@ -73,20 +74,20 @@ class RiskProfile extends StatelessWidget {
               mainAxisAlignment: MainAxisAlignment.spaceBetween,
               children: [
                 Container(
-                  padding: EdgeInsets.all(24),
+                  padding: const EdgeInsets.all(24),
                   child: Column(
                     crossAxisAlignment: CrossAxisAlignment.start,
                     children: [
                       Text(
                         riskProfile.type,
-                        style: TextStyle(
+                        style: const TextStyle(
                             fontWeight: FontWeight.bold,
                             fontSize: 24,
                             color: ColorPalette.white
                         ),
                       ),
-                      SizedBox(height: 16,),
-                      Text('Total Score :',
+                      const SizedBox(height: 16,),
+                      const Text('Total Score :',
                         style: TextStyle(
                             fontWeight: FontWeight.bold,
                             fontSize: 16,
@@ -94,7 +95,7 @@ class RiskProfile extends StatelessWidget {
                         ),
                       ),
                       Text('$totalScore',
-                        style: TextStyle(
+                        style: const TextStyle(
                             fontWeight: FontWeight.bold,
                             fontSize: 28,
                             color: ColorPalette.white
@@ -107,20 +108,20 @@ class RiskProfile extends StatelessWidget {
             ),
           ),
         ),
-        SizedBox(
+        const SizedBox(
           height: 24,
         ),
-        Text(
-            riskProfile.desc,
-            style: TextStyle(
-                color: ColorPalette.slate500,
-                fontSize: 16
-            )
+        ExpandableWidget(
+          content: riskProfile.desc,
+          hideTextMore: true,
+          hideIconMore: false,
+          maxLinesToShow: 4,
+          alignmentMore: Alignment.center,
         ),
-        SizedBox(
+        const SizedBox(
           height: 24,
         ),
-        Text(
+        const Text(
           'Suitable Product',
           style: TextStyle(
               color: ColorPalette.slate800,
@@ -128,7 +129,7 @@ class RiskProfile extends StatelessWidget {
               fontSize: 18
           ),
         ),
-        SizedBox(
+        const SizedBox(
           height: 16,
         ),
         rowSuitableProduct ?
@@ -137,7 +138,7 @@ class RiskProfile extends StatelessWidget {
               return Expanded(
                 child: Container(
                   margin: EdgeInsets.only(left: e.key != 0 ? 12 : 0),
-                  padding: EdgeInsets.all(16),
+                  padding: const EdgeInsets.all(16),
                   decoration: BoxDecoration(
                     border: Border.all(color: ColorPalette.slate200),
                     borderRadius: BorderRadius.circular(6)
@@ -146,18 +147,18 @@ class RiskProfile extends StatelessWidget {
                     crossAxisAlignment: CrossAxisAlignment.start,
                     children: [
                       Container(
-                          padding: EdgeInsets.all(8),
+                          padding: const 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(
+                      const SizedBox(
                         height: 12,
                       ),
                       Text(e.value['desc'],
-                        style: TextStyle(
+                        style: const TextStyle(
                             fontSize: 16,
                             fontWeight: FontWeight.bold,
                             color: ColorPalette.slate800
@@ -173,7 +174,7 @@ class RiskProfile extends StatelessWidget {
           runSpacing: 16,
           children: riskProfile.suitableProduct.map((e) {
             return Container(
-              padding: EdgeInsets.all(16),
+              padding: const EdgeInsets.all(16),
               decoration: BoxDecoration(
                 borderRadius: BorderRadius.circular(6),
                 border: Border.all(color: ColorPalette.slate200),
@@ -181,7 +182,7 @@ class RiskProfile extends StatelessWidget {
               child: Row(
                 children: [
                   Container(
-                      padding: EdgeInsets.all(8),
+                      padding: const EdgeInsets.all(8),
                       alignment: Alignment.center,
                       decoration: BoxDecoration(
                           shape: BoxShape.circle,
@@ -189,12 +190,12 @@ class RiskProfile extends StatelessWidget {
                       ),
                       child: Image.asset(e['icon'], width: SizeConfig.width * 0.07, color: riskProfile.color)
                   ),
-                  SizedBox(
+                  const SizedBox(
                     width: 12,
                   ),
                   Expanded(
                     child: Text(e['desc'],
-                      style: TextStyle(
+                      style: const TextStyle(
                           fontSize: 18,
                           fontWeight: FontWeight.bold,
                           color: ColorPalette.slate800

lib/application/component/select_form/select_form_view.dart

@@ -47,6 +47,7 @@ class SelectFormView extends StatelessWidget {
     bottomSheet() {
       showModalBottomSheet<void>(
         context: context,
+        isDismissible: false,
         shape: RoundedRectangleBorder(
           borderRadius: BorderRadius.only(
             topLeft: _borderRadius,
@@ -82,7 +83,10 @@ class SelectFormView extends StatelessWidget {
                         ),
                       ),
                       IconButton(
-                          onPressed: () => Navigator.pop(context),
+                          onPressed: () {
+                            ctrl?.clear();
+                            Navigator.pop(context);
+                          },
                           icon: const Icon(
                             Icons.clear,
                             size: 26,
@@ -134,7 +138,7 @@ class SelectFormView extends StatelessWidget {
                                 onTap: () {
                                   stateSetter(() {
                                     ctrl?.text = e.text;
-                                    onSelect(e.key);
+                                    onSelect(e.text);
                                   });
                                 },
                               ),
@@ -148,7 +152,9 @@ class SelectFormView extends StatelessWidget {
                     name: 'Select',
                     marginVertical: 4.0,
                     onPressed: () {
+                      if (ctrl!.text.isNotEmpty) {
                         Navigator.pop(context);
+                      }
                     },
                   )
                 ],

lib/application/component/subscribe/goal_investing_view.dart

@@ -36,8 +36,8 @@ class GoalInvestingView extends StatelessWidget {
                   routePush(
                     context,
                     page: OtherPlanView(
-                      selectedPlan: (value) {
-                        onListSelected(e.value.title);
+                      selectedPlan: (val) {
+                        onListSelected(val);
                       },
                     )
                   );

lib/application/component/subscribe/input_investment_view.dart

@@ -1,3 +1,5 @@
+import 'dart:math';
+
 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';
@@ -6,9 +8,13 @@ import 'package:cims_apps/core/utils/size_config.dart';
 import 'package:flutter/material.dart';
 
 class InputInvestmentView extends StatefulWidget {
-  final String selectedPlan;
+  final String? currentPlan;
+  final void Function()? changePlan;
+  final int? currentPrice;
+  final int? minimumPrice;
+  final int? maximumPrice;
   final void Function(String value) nextMove;
-  const InputInvestmentView({super.key, required this.selectedPlan, required this.nextMove});
+  const InputInvestmentView({super.key, required this.nextMove, this.currentPlan, this.minimumPrice, this.maximumPrice, this.currentPrice, this.changePlan});
 
   @override
   State<InputInvestmentView> createState() => _InputInvestmentViewState();
@@ -17,10 +23,35 @@ class InputInvestmentView extends StatefulWidget {
 class _InputInvestmentViewState extends State<InputInvestmentView> {
   TextEditingController inputController = TextEditingController();
 
+  void validationInputValue(String currentValue) {
+    currentValue = currentValue.replaceAll('Rp ', '').replaceAll('.', '');
+    if(currentValue.isEmpty){
+      currentValue = '0';
+    }
+    double parseValue = double.parse(currentValue);
+    if(widget.minimumPrice != null){
+      if(parseValue <= widget.minimumPrice!){
+        parseValue = widget.minimumPrice!.toDouble();
+      }
+    }
+
+    if(widget.maximumPrice != null){
+      if(parseValue >= widget.maximumPrice!){
+        parseValue = widget.maximumPrice!.toDouble();
+      }
+    }
+
+    inputController.text = NumberFormatter.numberCurrency(parseValue, 'Rp ', 'id_ID', decimalDigits: 0);
+  }
+
   @override
   void initState() {
     // TODO: implement initState
+    if(widget.currentPrice != null){
+      inputController.text = NumberFormatter.numberCurrency(widget.currentPrice, 'Rp ', 'id_ID', decimalDigits: 0);
+    }else{
       inputController.text = 'Rp 0';
+    }
     super.initState();
   }
 
@@ -41,23 +72,25 @@ class _InputInvestmentViewState extends State<InputInvestmentView> {
       child: Column(
         mainAxisSize: MainAxisSize.min,
         children: [
-          SizedBox(height: 16),
           Padding(
-            padding: EdgeInsets.symmetric(horizontal: 24, vertical: 12),
+            padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 12),
             child: Column(
               crossAxisAlignment: CrossAxisAlignment.start,
               children: [
+                if(widget.currentPlan != null)
                   Row(
                     mainAxisAlignment: MainAxisAlignment.spaceBetween,
                     children: [
-                    Text(widget.selectedPlan,
-                      style: TextStyle(
+                      Text(widget.currentPlan ?? '',
+                        style: const TextStyle(
                           fontSize: 20,
                           fontWeight: FontWeight.w700,
-
                         ),
                       ),
-                    Row(
+                      InkWell(
+                        borderRadius: BorderRadius.circular(16),
+                        onTap: widget.changePlan,
+                        child: const Row(
                           children: [
                             Icon(Icons.change_circle_outlined, color: ColorPalette.primary, size: 20),
                             SizedBox(width: 4),
@@ -69,28 +102,23 @@ class _InputInvestmentViewState extends State<InputInvestmentView> {
                               ),
                             )
                           ],
+                        ),
                       )
                     ],
                   ),
                 TextField(
                   controller: inputController,
                   textAlign: TextAlign.center,
-                  style: TextStyle(
+                  style: const 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);
-                    }
+                    validationInputValue(value);
                   },
-                  decoration: InputDecoration(
+                  decoration: const InputDecoration(
                       enabledBorder: UnderlineInputBorder(
                         borderSide: BorderSide(
                             color: ColorPalette.primary,
@@ -99,30 +127,36 @@ class _InputInvestmentViewState extends State<InputInvestmentView> {
                       )
                   ),
                 ),
-                SizedBox(height: 12),
-                Text('Minimum Budget Rp1,000,000',
-                  style: TextStyle(
+                const SizedBox(height: 12),
+                if(widget.minimumPrice != null)
+                  Text('Minimum ${NumberFormatter.numberCurrency(widget.minimumPrice, 'Rp ', 'id_ID')}',
+                    style: const TextStyle(
                         color: ColorPalette.slate400,
                         fontSize: 16,
                         fontWeight: FontWeight.w600
                     ),
                   ),
-                SizedBox(height: 16),
+                if(widget.maximumPrice != null)
+                  Text('Maximum ${NumberFormatter.numberCurrency(widget.maximumPrice, 'Rp ', 'id_ID')}',
+                    style: const TextStyle(
+                        color: ColorPalette.slate400,
+                        fontSize: 16,
+                        fontWeight: FontWeight.w600
+                    ),
+                  ),
+                const SizedBox(height: 16),
                 NumericPad(onNumberSelected: (p0) {
-                  String checkIsZeroInput = inputController.text.replaceAll('Rp ', '').replaceAll(',', '');
-                  String getNumeric = p0;
+                  String currentValue = inputController.text;
                   if(p0.isNotEmpty){
-                    if(checkIsZeroInput != '0'){
-                      getNumeric = checkIsZeroInput + getNumeric;
+                    if(currentValue != '0'){
+                      currentValue = currentValue + p0;
                     }
                   }else{
-                    getNumeric = checkIsZeroInput.substring(0, checkIsZeroInput.length - 1);
+                    currentValue = currentValue.substring(0, currentValue.length - 1);
                   }
-                  String formatNumeric = NumberFormatter.numberCurrency(
-                      double.parse(getNumeric), 'Rp ', 'id_ID', decimalDigits: 0).replaceAll('.', ',');
-                  inputController.text = formatNumeric;
+                  validationInputValue(currentValue);
                 }),
-                SizedBox(height: 8),
+                const SizedBox(height: 24),
                 ButtonView(
                   name: 'Next',
                   onPressed: () {
@@ -130,7 +164,7 @@ class _InputInvestmentViewState extends State<InputInvestmentView> {
                   },
                   width: SizeConfig.width,
                   heightWrapContent: true,
-                  contentPadding: EdgeInsets.symmetric(vertical: 16),
+                  contentPadding: const EdgeInsets.symmetric(vertical: 16),
                   marginVertical: 0,
                 )
               ],
@@ -138,6 +172,6 @@ class _InputInvestmentViewState extends State<InputInvestmentView> {
           ),
         ],
       ),
-    );;
+    );
   }
 }

lib/application/component/subscribe/other_plan_view.dart

@@ -1,3 +1,5 @@
+import 'dart:math';
+
 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';
@@ -72,6 +74,8 @@ class _OtherPlanViewState extends State<OtherPlanView> {
           disabled: !(selectedPlan.img != ''),
           onPressed: () {
             Navigator.pop(context);
+            print('haloo');
+            print(selectedPlan.name);
             widget.selectedPlan(selectedPlan.name);
           },
           heightWrapContent: true,
@@ -91,6 +95,7 @@ class _OtherPlanViewState extends State<OtherPlanView> {
         if(plan.name == 'Create Plan'){
           showModalBottomSheet(
             context: context,
+            isDismissible: false,
             builder: (context) => modalCreatePlan(),
           );
         }
@@ -150,6 +155,9 @@ class _OtherPlanViewState extends State<OtherPlanView> {
               GestureDetector(
                 onTap: () {
                   Navigator.pop(context);
+                  setState(() {
+                    selectedPlan = Plan('', '');
+                  });
                 },
                 child: Icon(Icons.close_rounded),
               )
@@ -161,12 +169,12 @@ class _OtherPlanViewState extends State<OtherPlanView> {
           ),
           SizedBox(height: 24),
           ButtonView(
-            name: 'Select',
+            name: 'Next',
             marginVertical: 0,
             disabled: !(createController.text != ''),
             onPressed: () {
               Navigator.of(context)..pop()..pop();
-              widget.selectedPlan(selectedPlan.name);
+              widget.selectedPlan(createController.text);
             },
             heightWrapContent: true,
             width: SizeConfig.width,

lib/application/component/subscribe/total_payment_view.dart

@@ -1,4 +1,5 @@
 import 'package:cims_apps/application/component/button/button_view.dart';
+import 'package:cims_apps/application/component/radio_agreement.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';
@@ -6,22 +7,19 @@ import 'package:cims_apps/features/dashboard/dashboard_account/view/product/view
 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 {
+class TotalPaymentView extends StatelessWidget {
   final int totalInvest;
   final List<Product> listProduct;
+  final bool isAgree;
+  final void Function() onTapAgree;
   const TotalPaymentView({
     super.key,
     required this.listProduct,
     required this.totalInvest,
+    required this.isAgree,
+    required this.onTapAgree,
   });
 
-  @override
-  State<TotalPaymentView> createState() => _TotalPaymentViewState();
-}
-
-class _TotalPaymentViewState extends State<TotalPaymentView> {
-  bool isAgreement = false;
-
   @override
   Widget build(BuildContext context) {
     return SingleChildScrollView(
@@ -49,7 +47,7 @@ class _TotalPaymentViewState extends State<TotalPaymentView> {
                 ],
               ),
             ),
-            ...widget.listProduct.asMap().entries.map((e) {
+            ...listProduct.asMap().entries.map((e) {
               return Container(
                 padding: const EdgeInsets.only(
                     left: 16, right: 24, bottom: 16, top: 16),
@@ -75,7 +73,7 @@ class _TotalPaymentViewState extends State<TotalPaymentView> {
                         flex: 7,
                         child: Text(
                           NumberFormatter.numberCurrency(
-                              widget.totalInvest * e.value.totalPercent!,
+                              totalInvest * e.value.totalPercent!,
                               'Rp ',
                               'id_ID'),
                           textAlign: TextAlign.end,
@@ -129,7 +127,7 @@ class _TotalPaymentViewState extends State<TotalPaymentView> {
                   ),
                   Text(
                     NumberFormatter.numberCurrency(
-                        widget.totalInvest, 'Rp ', 'id_ID'),
+                        totalInvest, 'Rp ', 'id_ID'),
                     textAlign: TextAlign.end,
                     style: const TextStyle(
                         fontWeight: FontWeight.w700,
@@ -139,7 +137,13 @@ class _TotalPaymentViewState extends State<TotalPaymentView> {
                 ],
               ),
             ),
-            buttonAgreement(),
+            RadioAgreement(
+              isAgree: isAgree,
+              desc: '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.',
+              onTap: () {
+                onTapAgree();
+              },
+            ),
             Container(
               padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 16),
               child: Row(
@@ -154,7 +158,7 @@ class _TotalPaymentViewState extends State<TotalPaymentView> {
                   ),
                   Text(
                     NumberFormatter.numberCurrency(
-                        widget.totalInvest, 'Rp ', 'id_ID'),
+                        totalInvest, 'Rp ', 'id_ID'),
                     textAlign: TextAlign.end,
                     style: const TextStyle(
                         fontWeight: FontWeight.w700,
@@ -165,16 +169,16 @@ class _TotalPaymentViewState extends State<TotalPaymentView> {
               ),
             ),
             ButtonView(
-              disabled: !isAgreement,
+              disabled: !isAgree,
               name: 'Subscribe Now',
               onPressed: () {
                 routePush(context,
                     page: PaymentMethodView(
-                      totalInvest: widget.totalInvest,
+                      totalInvest: totalInvest,
                     ));
               },
               disabledBgColor: ColorPalette.slate200.withOpacity(0.5),
-              textColor: isAgreement ? Colors.white : ColorPalette.slate400,
+              textColor: isAgree ? Colors.white : ColorPalette.slate400,
               textWeight: FontWeight.w700,
               textSize: 20,
               backgroundColor: ColorPalette.primary,
@@ -185,71 +189,67 @@ class _TotalPaymentViewState extends State<TotalPaymentView> {
     );
   }
 
-  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),
-                  ))
-            ],
-          ))
-        ],
-      ),
-    );
-  }
+  // Widget buttonAgreement() {
+  //   return Padding(
+  //     padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 16),
+  //     child: Row(
+  //       crossAxisAlignment: CrossAxisAlignment.start,
+  //       children: [
+  //         GestureDetector(
+  //           onTap: () {
+  //           },
+  //           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/take_picture_screen/display_picture_screen.dart

@@ -2,6 +2,7 @@ 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/custom_app_bar/custom_app_bar.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';
@@ -12,6 +13,7 @@ import 'package:cims_apps/features/auth/registration/viewmodel/submission_data_v
 import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
 import 'package:shared_preferences/shared_preferences.dart';
+import 'dart:math' as math;
 
 class DisplayPictureScreen extends StatefulWidget {
   final String imagePath, content;
@@ -93,10 +95,8 @@ class _DisplayPictureScreenState extends State<DisplayPictureScreen> {
           return Consumer<SubmissionDataViewModel>(
               builder: (context, provider, child) {
             return Scaffold(
-              appBar: AppBar(
-                title: const Text('Preview'),
-                automaticallyImplyLeading: false,
-              ),
+              appBar: CustomAppBar(
+                  height: SizeConfig.height * .08, title: 'Preview'),
               body: Container(
                   padding: const EdgeInsets.symmetric(horizontal: 24.0),
                   child: Column(
@@ -106,7 +106,14 @@ class _DisplayPictureScreenState extends State<DisplayPictureScreen> {
                       SizedBox(
                           width: SizeConfig.width,
                           height: SizeConfig.height * .4,
-                          child: Image.file(File(widget.imagePath))),
+                          child: Transform(
+                              alignment: Alignment.center,
+                              transform: widget.content == 'selfie'
+                                  ? Matrix4.rotationY(math.pi)
+                                  : Matrix4.rotationY(0),
+                              child: Image.file(
+                                File(widget.imagePath),
+                              ))),
                       const Padding(
                         padding: EdgeInsets.symmetric(vertical: 16.0),
                         child: Text(

lib/application/component/take_picture_screen/take_picture_screen.dart

@@ -1,5 +1,6 @@
 import 'package:camera/camera.dart';
 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/take_picture_screen/display_picture_screen.dart';
 import 'package:cims_apps/core/route/route.dart';
@@ -27,7 +28,6 @@ class TakePictureScreenState extends State<TakePictureScreen> {
   late String _takeContent;
 
   Future<void> changeFlash() async {
-    await _controller.setFlashMode(FlashMode.auto);
     setState(() {
       isFlash = !isFlash;
     });
@@ -44,6 +44,7 @@ class TakePictureScreenState extends State<TakePictureScreen> {
     // Next, initialize the controller. This returns a Future.
     _initializeControllerFuture = _controller.initialize();
     _takeContent = widget.takeContent;
+    _controller.setFlashMode(isFlash ? FlashMode.torch : FlashMode.off);
   }
 
   @override
@@ -57,9 +58,10 @@ class TakePictureScreenState extends State<TakePictureScreen> {
   Widget build(BuildContext context) {
     // Fill this out in the next steps.
     return Scaffold(
-      appBar: AppBar(
-        title: const Text('Registration'),
-        actions: [
+      appBar: CustomAppBar(
+        title: 'Registration',
+        height: SizeConfig.height * .08,
+        trailing: [
           IconButton(
               onPressed: () {
                 changeFlash();

lib/application/theme/color_palette.dart

@@ -92,6 +92,7 @@ class ColorPalette {
   static const Color green100 = Color(0xFFDCFCE7);
   static const Color green400 = Color(0xFF4ADE80);
   static const Color green500 = Color(0xFF16A34A);
+  static const Color red600 = Color(0xffDC2626);
 
   static const Map<String, Color> investTypeColor = {
     'Money Market': purple500,

lib/core/utils/string_utils.dart

@@ -1,3 +1,8 @@
+import 'package:cims_apps/application/theme/color_palette.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:intl/intl.dart';
+
 class StringUtils {
   static bool emailValidation(String email) {
     return RegExp(
@@ -13,4 +18,24 @@ class StringUtils {
     return RegExp(r'^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*?[\W_])(?=.{8,})')
         .hasMatch(password);
   }
+
+  static String formatTime(DateTime? dateTime) {
+    if (dateTime != null) {
+      DateFormat formatter = DateFormat('HH:mm:ss');
+      return formatter.format(dateTime);
+    }
+    return '--:--:--';
+  }
+
+  static void iCopyToClipboard(BuildContext context,
+      {String? desc, required String text}) {
+    Clipboard.setData(ClipboardData(text: text));
+    ScaffoldMessenger.of(context)
+        .showSnackBar(SnackBar(
+          backgroundColor: ColorPalette.primary,
+          content: Text(desc ?? "Text copied to clipboard"),
+        ))
+        .closed
+        .then((value) => ScaffoldMessenger.of(context).removeCurrentSnackBar());
+  }
 }

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

@@ -6,7 +6,7 @@ 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:cims_apps/features/bottom_navigation_view.dart';
 import 'package:flutter/material.dart';
 
 class InitialRegistrationStep extends StatelessWidget {
@@ -203,7 +203,7 @@ class InitialRegistrationStep extends StatelessWidget {
                   isOutlined: true,
                   onPressed: () {
                     routePush(context,
-                        page: const DashboardPublicView(),
+                        page: const BottomNavigationView(),
                         routeType: RouteType.pushReplace);
                   },
                 ),

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

@@ -31,10 +31,11 @@ class RegistrationView extends StatelessWidget {
           ),
         ),
         builder: (BuildContext context) {
+          var flutterView = View.of(context);
           return Padding(
             padding: EdgeInsets.only(
               top: MediaQueryData.fromView(
-                WidgetsBinding.instance.window,
+                flutterView,
               ).padding.top,
             ),
             child: const OtpView(

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

@@ -6,19 +6,26 @@ 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';
+
+class ModelDataBank {
+  final String? title, subtitle;
+  ModelDataBank(this.title, this.subtitle);
+}
 
 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'},
-    ];
+    final listDataBank =
+        ModalRoute.of(context)!.settings.arguments as List<ModelDataBank>;
+
+    return ChangeNotifierProvider(
+        create: (context) => SubmissionDataViewModel(),
+        builder: (context, child) {
           return Scaffold(
             appBar: AppBar(
               toolbarHeight: 70,
@@ -42,7 +49,9 @@ class ConfirmBankAccount extends StatelessWidget {
               padding: const EdgeInsets.all(16.0),
               child: SizedBox(
                 height: SizeConfig.height * .85,
-          child: Column(
+                child: Consumer<SubmissionDataViewModel>(
+                    builder: (context, provider, child) {
+                  return Column(
                     mainAxisAlignment: MainAxisAlignment.spaceBetween,
                     crossAxisAlignment: CrossAxisAlignment.start,
                     children: [
@@ -53,7 +62,7 @@ class ConfirmBankAccount extends StatelessWidget {
                           mainAxisAlignment: MainAxisAlignment.start,
                           crossAxisAlignment: CrossAxisAlignment.start,
                           children: [
-                    ...listData.map((e) {
+                            ...listDataBank.map((e) {
                               return Padding(
                                 padding: const EdgeInsets.only(bottom: 16.0),
                                 child: Column(
@@ -61,12 +70,13 @@ class ConfirmBankAccount extends StatelessWidget {
                                   crossAxisAlignment: CrossAxisAlignment.start,
                                   children: [
                                     Text(
-                              e['title'],
+                                      e.title!,
                                       style: const TextStyle(
-                                  color: ColorPalette.slate400, fontSize: 16),
+                                          color: ColorPalette.slate400,
+                                          fontSize: 16),
                                     ),
                                     Text(
-                              e['subtitle'],
+                                      e.subtitle!,
                                       style: const TextStyle(
                                           fontSize: 16,
                                           color: ColorPalette.slate800,
@@ -98,15 +108,18 @@ class ConfirmBankAccount extends StatelessWidget {
                             name: 'Confirm',
                             width: SizeConfig.width * .42,
                             onPressed: () {
-                      routePush(context, page: const SubmissionParent());
+                              routePush(context,
+                                  page: const SubmissionParent());
                             },
                           ),
                         ],
                       )
                     ],
-          ),
+                  );
+                }),
               ),
             ),
           );
+        });
   }
 }

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

@@ -0,0 +1,108 @@
+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:cims_apps/features/auth/registration/viewmodel/submission_data_viewmodel.dart';
+import 'package:flutter/material.dart';
+import 'package:provider/provider.dart';
+
+class ListBankView extends StatelessWidget {
+  final ValueChanged<String> onSelect;
+  const ListBankView({Key? key, required this.onSelect}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    var textTheme = Theme.of(context).textTheme;
+
+    return ChangeNotifierProvider(
+        create: (context) => SubmissionDataViewModel(),
+        builder: (context, child) {
+          return Scaffold(
+            appBar: CustomAppBar(
+                height: SizeConfig.height * .1, title: 'Select Bank'),
+            body: Container(
+              padding: const EdgeInsets.symmetric(horizontal: 16.0),
+              child: Consumer<SubmissionDataViewModel>(
+                  builder: (context, provider, child) {
+                return Column(
+                  children: [
+                    Row(
+                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                      children: [
+                        ImageView(
+                          image: PathAssets.imgGuideBank,
+                          width: SizeConfig.width * .35,
+                        ),
+                        Expanded(
+                          child: Text(
+                            'Make sure the bank you choose is a bank account in your own name ',
+                            style: textTheme.bodyLarge,
+                          ),
+                        )
+                      ],
+                    ),
+                    TextFormView(
+                      name: '',
+                      hintText: 'Search bank',
+                      ctrl: provider.ctrlBankNameSearch,
+                      contentPadding: const EdgeInsets.symmetric(vertical: 0),
+                      prefixIcon: const Icon(
+                        Icons.search,
+                        color: ColorPalette.slate500,
+                      ),
+                    ),
+                    Expanded(
+                      child: SingleChildScrollView(
+                        child: Column(
+                          children: provider.listBank.asMap().entries.map((e) {
+                            bool selectedBank =
+                                e.key.toString() == provider.idx;
+                            return Card(
+                              elevation: 0,
+                              color: selectedBank
+                                  ? ColorPalette.blue50
+                                  : Colors.white,
+                              shape: const RoundedRectangleBorder(
+                                borderRadius:
+                                    BorderRadius.all(Radius.circular(12)),
+                              ),
+                              child: ListTile(
+                                title: Text(
+                                  e.value.text,
+                                  style: TextStyle(
+                                    fontSize: 16,
+                                    fontWeight: FontWeight.w600,
+                                    color: selectedBank
+                                        ? ColorPalette.primary
+                                        : ColorPalette.slate500,
+                                  ),
+                                ),
+                                onTap: () {
+                                  provider.changeBank(e.key.toString());
+                                  provider.selectBank(e.value.text);
+                                },
+                              ),
+                            );
+                          }).toList(),
+                        ),
+                      ),
+                    ),
+                    ButtonView(
+                      name: 'Select',
+                      marginVertical: 8.0,
+                      onPressed: () {
+                        onSelect(provider.valueBank);
+                        Navigator.pop(context);
+                      },
+                    ),
+                  ],
+                );
+              }),
+            ),
+          );
+        });
+  }
+}

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

@@ -1,13 +1,13 @@
 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/view/submission_data/data_bank/list_bank_view.dart';
 import 'package:cims_apps/features/auth/registration/viewmodel/submission_data_viewmodel.dart';
 import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
@@ -19,6 +19,40 @@ class SubmitBankAccount extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    showSearchBank(TextEditingController valueCtrl) {
+      showModalBottomSheet(
+        context: context,
+        isScrollControlled: true,
+        enableDrag: false,
+        shape: const RoundedRectangleBorder(
+          borderRadius: BorderRadius.vertical(
+            top: Radius.zero,
+          ),
+        ),
+        builder: (BuildContext context) {
+          return StatefulBuilder(
+            builder: (context, setState) {
+              var flutterView = View.of(context);
+              return Padding(
+                padding: EdgeInsets.only(
+                  top: MediaQueryData.fromView(
+                    flutterView,
+                  ).padding.top,
+                ),
+                child: ListBankView(
+                  onSelect: (value) {
+                    setState(() {
+                      valueCtrl.text = value;
+                    });
+                  },
+                ),
+              );
+            },
+          );
+        },
+      );
+    }
+
     return MultiProvider(
         providers: [
           ChangeNotifierProvider(
@@ -29,22 +63,44 @@ class SubmitBankAccount extends StatelessWidget {
           return SizedBox(
             child: Consumer<SubmissionDataViewModel>(
                 builder: (context, provider, child) {
-              return SingleChildScrollView(
+              return SizedBox(
+                height: SizeConfig.height * .8,
+                child: Form(
+                  key: provider.formKeySubmitDataBank,
                   child: Column(
                     crossAxisAlignment: CrossAxisAlignment.start,
+                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                     children: [
                       const TextCaption(title: 'Input your bank account data'),
-                    SelectFormView(
+                      TextFormView(
                         name: 'Bank Name',
-                      hintText: 'Select Bank',
-                      listItem: provider.listBank,
+                        hintText: 'Select bank',
+                        readOnly: true,
                         ctrl: provider.ctrlBankName,
-                      onSelect: (value) {},
+                        onTap: () {
+                          showSearchBank(provider.ctrlBankName);
+                        },
+                        suffixIcon: const Icon(
+                          Icons.keyboard_arrow_down_outlined,
+                        ),
+                        validator: (value) {
+                          if (value!.isEmpty) {
+                            return 'Field must be filled';
+                          }
+                          return null;
+                        },
                       ),
                       TextFormView(
                         name: 'Account Number',
                         hintText: 'Input Account Number',
+                        ctrl: provider.ctrlNoAccountBank,
                         keyboardType: TextInputType.number,
+                        validator: (value) {
+                          if (value!.isEmpty) {
+                            return 'Field must be filled';
+                          }
+                          return null;
+                        },
                         trailingTitleWidget: SizedBox(
                           width: 24,
                           child: GestureDetector(
@@ -59,6 +115,13 @@ class SubmitBankAccount extends StatelessWidget {
                       TextFormView(
                         name: 'Account Owner Name',
                         hintText: 'Input Account Name',
+                        ctrl: provider.ctrlNameAccountBank,
+                        validator: (value) {
+                          if (value!.isEmpty) {
+                            return 'Field must be filled';
+                          }
+                          return null;
+                        },
                       ),
                       const Text(
                         "Make sure the account you use is in your name, not someone else's",
@@ -70,16 +133,29 @@ class SubmitBankAccount extends StatelessWidget {
                       ButtonView(
                         name: 'Next',
                         onPressed: () {
+                          if (provider.formKeySubmitDataBank.currentState!
+                              .validate()) {
+                            provider
+                                .submitDataBank(
+                              bankName: provider.ctrlBankName.text,
+                              accountNumber: provider.ctrlNoAccountBank.text,
+                              accountName: provider.ctrlNameAccountBank.text,
+                            )
+                                .then((values) {
                               provider.next(context).then((value) {
                                 if (value) {
                                   routePush(context,
-                                page: const ConfirmBankAccount());
+                                      page: const ConfirmBankAccount(),
+                                      arguments: values);
                                 }
                               });
+                            });
+                          }
                         },
                       )
                     ],
                   ),
+                ),
               );
             }),
           );

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

@@ -56,8 +56,12 @@ class _QuestionViewState extends State<QuestionView> {
           bottomNavigationBar: SizedBox(
             height: 84,
             child: ButtonView(
+              disabled: provider.listScore[currentPage] == 0,
               name: 'Next',
               marginVertical: 16,
+              disabledBgColor: ColorPalette.slate200,
+              textColor: provider.listScore[currentPage] == 0 ? ColorPalette.slate500 : Colors.white,
+              backgroundColor: ColorPalette.primary,
               onPressed: () {
                 if (currentPage > 3) {
                   int totalScore = provider.listScore
@@ -65,8 +69,11 @@ class _QuestionViewState extends State<QuestionView> {
                   provider.setTypeResult(totalScore);
                   routePush(context,
                     page: ResultsView(
-                          totalScore: totalScore.toString(),
-                          typeResult: provider.typeResult));
+                        totalScore: totalScore,
+                        typeResult: provider.typeResult
+                    ),
+                    routeType: RouteType.pushReplace
+                  );
                 } else {
                   setState(() {
                     currentPage += 1;

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

@@ -1,14 +1,17 @@
 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/risk_profile.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/question_view.dart';
+import 'package:cims_apps/features/auth/registration/view/submission_data/risk_profile/risk_profile_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: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 int totalScore;
   final RiskProfileResult typeResult;
   const ResultsView(
       {super.key, required this.typeResult, required this.totalScore});
@@ -37,115 +40,15 @@ class ResultsView extends StatelessWidget {
         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(),
-            ),
+            RiskProfile(totalScore: totalScore, rowSuitableProduct: false),
             const SizedBox(
               height: 32,
             ),
             ButtonView(
               name: 'Re-test',
-              onPressed: () {},
+              onPressed: () {
+                routePush(context, page: QuestionView(), routeType: RouteType.pushReplace);
+              },
               marginVertical: 0,
               backgroundColor: ColorPalette.white,
               textColor: ColorPalette.primary,

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

@@ -14,12 +14,12 @@ class RiskProfileView extends StatelessWidget {
   Widget build(BuildContext context) {
     return Container(
       width: SizeConfig.width,
-      height: SizeConfig.height,
-      padding: EdgeInsets.all(24),
+      height: SizeConfig.height * .8,
+      padding: const EdgeInsets.all(24),
       child: Column(
         mainAxisAlignment: MainAxisAlignment.spaceBetween,
         children: [
-          Column(
+          const Column(
             children: [
               ImageView(image: PathAssets.imgDataReport),
               SizedBox(
@@ -48,7 +48,7 @@ class RiskProfileView extends StatelessWidget {
           ),
           Column(
             children: [
-              Row(
+              const Row(
                 mainAxisAlignment: MainAxisAlignment.center,
                 children: [
                   ImageView(
@@ -68,7 +68,7 @@ class RiskProfileView extends StatelessWidget {
                   )
                 ],
               ),
-              SizedBox(
+              const SizedBox(
                 height: 24,
               ),
               ButtonView(

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

@@ -1,3 +1,4 @@
+import 'package:cims_apps/application/component/button/back_button_view.dart';
 import 'package:cims_apps/application/component/custom_app_bar/custom_app_bar.dart';
 import 'package:cims_apps/application/theme/color_palette.dart';
 import 'package:cims_apps/core/route/route.dart';
@@ -66,21 +67,33 @@ class _SubmissionParentState extends State<SubmissionParent> {
     return ChangeNotifierProvider(
         create: (context) => SubmissionDataViewModel(),
         builder: (context, child) {
-          return WillPopScope(
-            onWillPop: () async {
+          return PopScope(
+            canPop: false,
+            onPopInvoked: (didPop) async {
+              if (didPop) {
+                return;
+              }
               await routePush(context,
                   page: const BottomNavigationView(),
                   routeType: RouteType.pushReplace);
-              return false;
             },
             child: Consumer<SubmissionDataViewModel>(
                 builder: (context, provider, child) {
               return Scaffold(
                 appBar: CustomAppBar(
-                    height: SizeConfig.height * .1, title: 'Registration'),
-                body: Stack(
-                  children: [
-                    Column(
+                  height: SizeConfig.height * .1,
+                  title: 'Registration',
+                  leading: BackButtonView(
+                    onPress: () {
+                      routePush(
+                        context,
+                        page: const BottomNavigationView(),
+                        routeType: RouteType.pushReplace,
+                      );
+                    },
+                  ),
+                ),
+                body: Column(
                   crossAxisAlignment: CrossAxisAlignment.start,
                   mainAxisAlignment: MainAxisAlignment.spaceBetween,
                   children: [
@@ -89,8 +102,7 @@ class _SubmissionParentState extends State<SubmissionParent> {
                           horizontal: 16.0, vertical: 16.0),
                       child: Row(
                         mainAxisAlignment: MainAxisAlignment.spaceBetween,
-                            children:
-                                List.generate(provider.stepAmount, (index) {
+                        children: List.generate(provider.stepAmount, (index) {
                           return _stepItem(
                             isCurrentStep:
                                 provider.getCurrentStep == index + 1 ||
@@ -100,16 +112,13 @@ class _SubmissionParentState extends State<SubmissionParent> {
                       ),
                     ),
                     Expanded(
-                          child: Container(
-                            padding:
-                                const EdgeInsets.symmetric(horizontal: 16.0),
+                      child: SingleChildScrollView(
+                        padding: const EdgeInsets.symmetric(horizontal: 16.0),
                         child: _content(provider.getCurrentStep),
                       ),
                     ),
                   ],
                 ),
-                  ],
-                ),
               );
             }),
           );

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

@@ -13,6 +13,7 @@ import 'package:cims_apps/features/auth/registration/view/submission_data/submis
 import 'package:cims_apps/features/auth/registration/viewmodel/submission_data_viewmodel.dart';
 import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
+import 'dart:math' as math;
 
 class SubmitDataIdCard extends StatelessWidget {
   const SubmitDataIdCard({Key? key}) : super(key: key);
@@ -108,17 +109,24 @@ class SubmitDataIdCard extends StatelessWidget {
                   SizedBox(
                     height: SizeConfig.height * .18,
                     width: SizeConfig.width * .45,
+                    child: Transform(
+                      alignment: Alignment.center,
+                      transform: e.key == 'selfie'
+                          ? Matrix4.rotationY(math.pi)
+                          : Matrix4.rotationY(0),
                       child: ClipRRect(
                         borderRadius: BorderRadius.circular(8),
                         child: Image.file(
                           File(e.image),
                           fit: BoxFit.fill,
                           errorBuilder: (context, error, stackTrace) {
-                          return const Icon(Icons.image_not_supported_outlined);
+                            return const Icon(
+                                Icons.image_not_supported_outlined);
                           },
                         ),
                       ),
                     ),
+                  ),
                   SizedBox(
                     width: SizeConfig.width * .43,
                     child: Row(
@@ -168,7 +176,9 @@ class SubmitDataIdCard extends StatelessWidget {
           return SingleChildScrollView(
             child: Consumer<SubmissionDataViewModel>(
                 builder: (context, provider, child) {
-              return Column(
+              return Form(
+                key: provider.formKeySubmitIdCard,
+                child: Column(
                   crossAxisAlignment: CrossAxisAlignment.start,
                   children: [
                     const TextCaption(
@@ -176,14 +186,35 @@ class SubmitDataIdCard extends StatelessWidget {
                     TextFormView(
                       name: 'NIK',
                       keyboardType: TextInputType.number,
+                      validator: (value) {
+                        if (value!.isEmpty) {
+                          return 'Field must be filled';
+                        }
+                        return null;
+                      },
+                    ),
+                    TextFormView(
+                      name: 'Full Name',
+                      validator: (value) {
+                        if (value!.isEmpty) {
+                          return 'Field must be filled';
+                        }
+                        return null;
+                      },
                     ),
-                  TextFormView(name: 'Full Name'),
                     DatePickerView(
                       name: 'Birth Date',
                       ctrl: provider.ctrlBirthDate,
                       maxDate: DateTime.now(),
                       isMultipleSelection: false,
-                      enabled: true),
+                      enabled: true,
+                      validatorDate: (value) {
+                        if (value!.isEmpty) {
+                          return 'Field must be filled';
+                        }
+                        return null;
+                      },
+                    ),
                     photoDocument(provider),
                     Container(
                       width: SizeConfig.width,
@@ -233,14 +264,19 @@ class SubmitDataIdCard extends StatelessWidget {
                     ButtonView(
                       name: 'Next',
                       onPressed: () async {
+                        if (provider.formKeySubmitIdCard.currentState!
+                            .validate()) {
                           await provider.next(context).then((value) {
                             if (value) {
-                          routePush(context, page: const SubmissionParent());
+                              routePush(context,
+                                  page: const SubmissionParent());
                             }
                           });
+                        }
                       },
                     )
                   ],
+                ),
               );
             }),
           );

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

@@ -15,41 +15,70 @@ import 'package:provider/provider.dart';
 class SubmitEmail extends StatelessWidget {
   const SubmitEmail({Key? key}) : super(key: key);
 
-  Widget _emailVerify() {
-    return Column(
+  Widget _emailVerify(BuildContext context, SubmissionDataViewModel provider) {
+    var textTheme = Theme.of(context).textTheme;
+    return Padding(
+      padding: const EdgeInsets.all(24.0),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
         children: [
+          const TextCaption(title: 'Check your e-mail'),
           const ImageView(image: PathAssets.imgEmail),
           Align(
             alignment: Alignment.center,
             child: RichText(
               textAlign: TextAlign.center,
               text: TextSpan(children: [
-              const TextSpan(
+                TextSpan(
                   text:
                       'We have sent a verification link to your e-mail. \nPlease check your email for ',
-                style: TextStyle(
-                  color: Colors.black,
-                  decoration: TextDecoration.none,
-                ),
+                  style: textTheme.displayMedium,
                 ),
                 TextSpan(
-                recognizer: TapGestureRecognizer()..onTap = () {},
+                  recognizer: TapGestureRecognizer()
+                    ..onTap = () async {
+                      await provider.next(context).then((value) {
+                        if (value) {
+                          routePush(context, page: const SubmissionParent());
+                        }
+                      });
+                    },
                   text: 'verification',
                   style: const TextStyle(
                     color: Colors.blue,
                   ),
                 ),
-              const TextSpan(
+                TextSpan(
                   text: ' to \ncontinue registration.',
-                style: TextStyle(
-                  color: Colors.black,
-                  decoration: TextDecoration.none,
-                ),
+                  style: textTheme.displayMedium,
                 ),
               ]),
             ),
           ),
         ],
+      ),
+    );
+  }
+
+  showEmailVerify(BuildContext context, SubmissionDataViewModel provider) {
+    showModalBottomSheet(
+      context: context,
+      isScrollControlled: true,
+      enableDrag: false,
+      shape: const RoundedRectangleBorder(
+        borderRadius: BorderRadius.vertical(
+          top: Radius.zero,
+        ),
+      ),
+      builder: (context) {
+        var flutterView = View.of(context);
+        return Padding(
+          padding: EdgeInsets.only(
+            top: MediaQueryData.fromView(flutterView).padding.top,
+          ),
+          child: _emailVerify(context, provider),
+        );
+      },
     );
   }
 
@@ -60,16 +89,16 @@ class SubmitEmail extends StatelessWidget {
         builder: (context, child) {
           return Consumer<SubmissionDataViewModel>(
               builder: (context, provider, child) {
-            return SingleChildScrollView(
+            return SizedBox(
+              height: SizeConfig.height * .78,
+              child: Form(
+                key: provider.formKeySubmitEmail,
                 child: Column(
                   crossAxisAlignment: CrossAxisAlignment.start,
-                // mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                   children: [
-                  !provider.isEmailVerify
-                      ? const TextCaption(title: 'Enter your e-mail')
-                      : const TextCaption(title: 'Check your e-mail '),
-                  !provider.isEmailVerify
-                      ? TextFormView(
+                    const TextCaption(title: 'Enter your e-mail'),
+                    TextFormView(
                       name: 'E-mail Address',
                       hintText: 'Input e-mail address',
                       keyboardType: TextInputType.emailAddress,
@@ -82,24 +111,20 @@ class SubmitEmail extends StatelessWidget {
                           return null;
                         }
                       },
-                          // onTap: () {
-                          //   provider.submitEmail();
-                          // },
-                        )
-                      : _emailVerify(),
-                  SizedBox(height: SizeConfig.height * .42),
+                    ),
+                    SizedBox(height: SizeConfig.height * .43),
                     ButtonView(
                       name: 'Next',
                       onPressed: () async {
-                      await provider.next(context).then((value) {
-                        if (value) {
-                          routePush(context, page: const SubmissionParent());
+                        if (provider.formKeySubmitEmail.currentState!
+                            .validate()) {
+                          showEmailVerify(context, provider);
                         }
-                      });
                       },
                     )
                   ],
                 ),
+              ),
             );
           });
         });

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

@@ -2,6 +2,7 @@ import 'package:cims_apps/application/component/button/button_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/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';
@@ -17,12 +18,13 @@ class SubmitPersonalData extends StatelessWidget {
         builder: (context, child) {
           return Consumer<SubmissionDataViewModel>(
               builder: (context, provider, child) {
-            return SingleChildScrollView(
+            return SizedBox(
+              height: SizeConfig.height * .78,
               child: Form(
                 key: provider.formKeyPersonalData,
                 child: Column(
                   crossAxisAlignment: CrossAxisAlignment.start,
-                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                   children: [
                     const TextCaption(title: 'Your personal details'),
                     SelectFormView(
@@ -31,6 +33,12 @@ class SubmitPersonalData extends StatelessWidget {
                       ctrl: provider.ctrlOccupation,
                       listItem: provider.listOccupation,
                       onSelect: (value) {},
+                      validator: (value) {
+                        if (value!.isEmpty) {
+                          return 'Field must be filled';
+                        }
+                        return null;
+                      },
                     ),
                     SelectFormView(
                       name: 'Income Level (IDR)',
@@ -38,6 +46,12 @@ class SubmitPersonalData extends StatelessWidget {
                       ctrl: provider.ctrlIncome,
                       listItem: provider.listIncome,
                       onSelect: (value) {},
+                      validator: (value) {
+                        if (value!.isEmpty) {
+                          return 'Field must be filled';
+                        }
+                        return null;
+                      },
                     ),
                     SelectFormView(
                       name: 'Marital Status',
@@ -45,6 +59,12 @@ class SubmitPersonalData extends StatelessWidget {
                       ctrl: provider.ctrlMarital,
                       listItem: provider.listMarital,
                       onSelect: (value) {},
+                      validator: (value) {
+                        if (value!.isEmpty) {
+                          return 'Field must be filled';
+                        }
+                        return null;
+                      },
                     ),
                     SelectFormView(
                       name: 'Source of Fund',
@@ -52,20 +72,28 @@ class SubmitPersonalData extends StatelessWidget {
                       ctrl: provider.ctrlSourceFund,
                       listItem: provider.listSourceFund,
                       onSelect: (value) {},
+                      validator: (value) {
+                        if (value!.isEmpty) {
+                          return 'Field must be filled';
+                        }
+                        return null;
+                      },
                     ),
-                    Align(
-                      alignment: Alignment.bottomCenter,
-                      child: ButtonView(
+                    // SizedBox(height: SizeConfig.height * .18),
+                    ButtonView(
+                      marginVertical: 0,
                       name: 'Next',
                       onPressed: () async {
+                        if (provider.formKeyPersonalData.currentState!
+                            .validate()) {
                           await provider.next(context).then((value) {
                             if (value) {
                               routePush(context,
                                   page: const SubmissionParent());
                             }
                           });
+                        }
                       },
-                      ),
                     )
                   ],
                 ),

lib/features/auth/registration/view/submission_data/submit_signature/initial_signature.dart

@@ -24,15 +24,18 @@ class InitialSignature extends StatelessWidget {
         builder: (context, child) {
           return Consumer<SubmissionDataViewModel>(
               builder: (context, provider, child) {
-            return Column(
+            return SizedBox(
+              height: SizeConfig.height * .8,
+              child: Column(
                 crossAxisAlignment: CrossAxisAlignment.start,
+                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                 children: [
                   const TextCaption(title: 'Draw your digital sign'),
                   const ImageView(image: PathAssets.frameSignature),
                   const ListTileView(
                       title:
                           'Make sure the sign you draw is match with your ID Card'),
-                SizedBox(height: SizeConfig.height * .07),
+                  SizedBox(height: SizeConfig.height * .1),
                   ButtonView(
                     name: 'Next',
                     onPressed: () {
@@ -44,6 +47,7 @@ class InitialSignature extends StatelessWidget {
                     },
                   )
                 ],
+              ),
             );
           });
         });

lib/features/auth/registration/view/submission_data/terms_and_condition/terms_and_condition_view.dart

@@ -3,6 +3,7 @@ import 'package:cims_apps/application/component/button/button_view.dart';
 import 'package:cims_apps/application/component/set_pin_view/set_pin_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/viewmodel/submission_data_viewmodel.dart';
 import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
@@ -60,15 +61,11 @@ class TermsAndConditionView extends StatelessWidget {
                         ],
                       ),
                     );
-                  })
-                ],
-              ),
-            ),
-            bottomNavigationBar: Consumer<SubmissionDataViewModel>(
+                  }),
+                  Consumer<SubmissionDataViewModel>(
                       builder: (context, provider, child) {
-              return Container(
-                height: 84,
-                padding: const EdgeInsets.symmetric(horizontal: 24),
+                    return Padding(
+                      padding: const EdgeInsets.only(top: 24.0),
                       child: Row(
                         children: [
                           Expanded(
@@ -77,7 +74,8 @@ class TermsAndConditionView extends StatelessWidget {
                             onPressed: () {
                               Navigator.pop(context);
                             },
-                      marginVertical: 16,
+                            height: SizeConfig.height * .06,
+                            marginVertical: 0,
                             backgroundColor: ColorPalette.white,
                             textColor: ColorPalette.primary,
                             isOutlined: true,
@@ -96,11 +94,15 @@ class TermsAndConditionView extends StatelessWidget {
                                           submitPin: (context, pin) {},
                                         ));
                                   },
-                            marginVertical: 16))
+                                  height: SizeConfig.height * .06,
+                                  marginVertical: 0))
                         ],
                       ),
                     );
                   }),
+                ],
+              ),
+            ),
           );
         });
   }

lib/features/auth/registration/viewmodel/submission_data_viewmodel.dart

@@ -1,5 +1,6 @@
 import 'package:camera/camera.dart';
 import 'package:cims_apps/application/component/select_form/select_form_view.dart';
+import 'package:cims_apps/features/auth/registration/view/submission_data/data_bank/confirm_bank_account.dart';
 import 'package:flutter/material.dart';
 import 'package:shared_preferences/shared_preferences.dart';
 
@@ -14,13 +15,21 @@ class SubmissionDataViewModel extends ChangeNotifier {
   bool _isEmailVerify = false;
   bool get isEmailVerify => _isEmailVerify;
   var formKeyPersonalData = GlobalKey<FormState>();
+  var formKeySubmitEmail = GlobalKey<FormState>();
+  var formKeySubmitIdCard = GlobalKey<FormState>();
+  var formKeySubmitDataBank = GlobalKey<FormState>();
   TextEditingController ctrlOccupation = TextEditingController();
   TextEditingController ctrlIncome = TextEditingController();
   TextEditingController ctrlMarital = TextEditingController();
   TextEditingController ctrlSourceFund = TextEditingController();
   TextEditingController ctrlBankName = TextEditingController();
+  TextEditingController ctrlNameAccountBank = TextEditingController();
+  TextEditingController ctrlNoAccountBank = TextEditingController();
+  TextEditingController ctrlBankNameSearch = TextEditingController();
   TextEditingController ctrlBirthDate = TextEditingController();
   int step = 1;
+  String? idx;
+  String valueBank = '';
 
   List<ItemSelectForm> listOccupation = [
     ItemSelectForm('key1', 'Student'),
@@ -44,16 +53,18 @@ class SubmissionDataViewModel extends ChangeNotifier {
   ];
 
   List<ItemSelectForm> listBank = [
-    ItemSelectForm('key1', 'BCA'),
-    ItemSelectForm('key2', 'BRI'),
-    ItemSelectForm('key3', 'BNI'),
-    ItemSelectForm('key4', 'BANK MANDIRI'),
-    ItemSelectForm('key5', 'CIMB NIAGA'),
+    ItemSelectForm('0', 'BCA'),
+    ItemSelectForm('1', 'BRI'),
+    ItemSelectForm('2', 'BNI'),
+    ItemSelectForm('3', 'BANK MANDIRI'),
+    ItemSelectForm('4', 'CIMB NIAGA'),
+    ItemSelectForm('5', 'PERMATA'),
+    ItemSelectForm('6', 'BANK JATENG'),
   ];
 
   List<ItemSelectForm> listImg = [
-    ItemSelectForm('', 'ID Card', image: ''),
-    ItemSelectForm('', 'Selfie with ID Card', image: ''),
+    ItemSelectForm('ktp', 'ID Card', image: ''),
+    ItemSelectForm('selfie', 'Selfie with ID Card', image: ''),
   ];
 
   Future<List<CameraDescription>> initCamera() async {
@@ -105,4 +116,31 @@ class SubmissionDataViewModel extends ChangeNotifier {
     }
     notifyListeners();
   }
+
+  changeBank(String key) {
+    idx = key;
+    notifyListeners();
+  }
+
+  selectBank(String value) {
+    valueBank = value;
+    notifyListeners();
+  }
+
+  List<ModelDataBank> listDataBank = [];
+
+  Future<List<ModelDataBank>?> submitDataBank(
+      {required String bankName, accountNumber, accountName}) async {
+    List<ModelDataBank> listResponse = [
+      ModelDataBank('Bank Name', bankName),
+      ModelDataBank('Account Number', accountNumber),
+      ModelDataBank('Account Owner Name', accountName),
+      ModelDataBank('Name on ID card', accountName),
+    ];
+    if (listResponse.first.subtitle != null) {
+      // listDataBank = listResponse;
+      return listResponse;
+    }
+    return null;
+  }
 }

lib/features/bottom_navigation_view.dart

@@ -1,4 +1,6 @@
+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/dashboard/dashboard_account/view/homepage/homepage_view.dart';
 import 'package:cims_apps/features/dashboard/dashboard_account/view/plan/view/plan_view.dart';
 import 'package:cims_apps/features/dashboard/dashboard_account/view/portfolio/portfolio_view.dart';
@@ -6,6 +8,12 @@ import 'package:cims_apps/features/profile/view/profile_view.dart';
 import 'package:cims_apps/features/transaction/view/transaction_view.dart';
 import 'package:flutter/material.dart';
 
+class BottomNavigationItem {
+  String icon, label;
+
+  BottomNavigationItem(this.icon, this.label);
+}
+
 class BottomNavigationView extends StatefulWidget {
   const BottomNavigationView({Key? key}) : super(key: key);
 
@@ -26,32 +34,20 @@ class _BottomNavigationViewState extends State<BottomNavigationView> {
       ProfileView(),
     ];
 
-    List<BottomNavigationBarItem> listNavigation = const [
-      BottomNavigationBarItem(
-        icon: Icon(Icons.home_outlined),
-        label: 'Home',
-      ),
-      BottomNavigationBarItem(
-        icon: Icon(Icons.file_open),
-        label: 'Plan',
-      ),
-      BottomNavigationBarItem(
-        icon: Icon(Icons.compare_arrows),
-        label: 'Transaction',
-      ),
-      BottomNavigationBarItem(
-        icon: Icon(Icons.pie_chart_rounded),
-        label: 'Portfolio',
-      ),
-      BottomNavigationBarItem(
-        icon: Icon(Icons.person),
-        label: 'Profile',
-      ),
+    List<BottomNavigationItem> listNavigation = [
+      BottomNavigationItem(PathAssets.iconNavigationHome, 'Home'),
+      BottomNavigationItem(PathAssets.iconNavigationPlan, 'Plan'),
+      BottomNavigationItem(PathAssets.iconNavigationTransaction, 'Transaction'),
+      BottomNavigationItem(PathAssets.iconNavigationPortfolio, 'Portfolio'),
+      BottomNavigationItem(PathAssets.iconNavigationProfile, 'Profile')
     ];
 
     return Scaffold(
       body: listWidget[_selectedIndex],
-      bottomNavigationBar: Padding(
+      bottomNavigationBar: Container(
+        decoration: const BoxDecoration(
+          border: Border(top: BorderSide(color: ColorPalette.slate200))
+        ),
         padding: const EdgeInsets.symmetric(vertical: 12),
         child: BottomNavigationBar(
           elevation: 0,
@@ -61,13 +57,25 @@ class _BottomNavigationViewState extends State<BottomNavigationView> {
             });
           },
           currentIndex: _selectedIndex,
-          items: listNavigation,
+          items: listNavigation.asMap().entries.map((e) {
+            return BottomNavigationBarItem(
+              icon: Padding(
+                padding: const EdgeInsets.only(bottom: 4),
+                child: Image.asset(
+                  e.value.icon,
+                  width: SizeConfig.width * 0.06,
+                  color: e.key == _selectedIndex ? ColorPalette.primary : ColorPalette.slate800
+                ),
+              ),
+              label: e.value.label
+            );
+          }).toList(),
           type: BottomNavigationBarType.fixed,
           showUnselectedLabels: true,
           selectedItemColor: ColorPalette.primary,
           unselectedItemColor: Colors.black,
-          selectedLabelStyle: const TextStyle(color: ColorPalette.primary),
-          unselectedLabelStyle: const TextStyle(color: Colors.black),
+          selectedLabelStyle: const TextStyle(color: ColorPalette.primary, fontSize: 12),
+          unselectedLabelStyle: const TextStyle(color: Colors.black, fontSize: 12),
         ),
       ),
     );

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

@@ -102,7 +102,7 @@ class _InvestTypeViewState extends State<InvestTypeView> {
                                     onTap: () {
                                       provider.setSelectedProduct(e.value);
                                       routePush(context,
-                                          page: ProductView(widget.title));
+                                          page: ProductView(selectedProduct: e.value));
                                     },
                                     child: Padding(
                                       padding: EdgeInsets.only(

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

@@ -1,12 +1,8 @@
-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/subscribe/goal_investing_view.dart';
 import 'package:cims_apps/application/component/subscribe/input_investment_view.dart';
-import 'package:cims_apps/application/component/numeric_pad/numeric_pad.dart';
 import 'package:cims_apps/application/component/risk_profile.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/number_formatter.dart';
 import 'package:cims_apps/core/utils/size_config.dart';
 import 'package:cims_apps/features/dashboard/dashboard_account/view/plan/view/step_invest_plan/options_starting_invest.dart';
 import 'package:cims_apps/features/dashboard/dashboard_account/view/plan/view_model/plan_view_model.dart';
@@ -40,28 +36,34 @@ class _PlanViewState extends State<PlanView> {
   @override
   Widget build(BuildContext context) {
 
-    return Scaffold(
-      appBar: CustomAppBar(height: 70, title: 'Investment Plan'),
+    return ChangeNotifierProvider(
+      create: (context) => PlanViewModel(),
+      child: Scaffold(
+        appBar: CustomAppBar(
+          height: SizeConfig.height * 0.08,
+          title: 'Investment Plan',
+          leading: const SizedBox(),
+        ),
         body: SingleChildScrollView(
-        padding: EdgeInsets.all(24),
+          padding: const EdgeInsets.all(24),
           child: Column(
             crossAxisAlignment: CrossAxisAlignment.start,
             children: [
-            RiskProfile(
+              const RiskProfile(
                 totalScore: 26,
                 rowSuitableProduct: true
               ),
-            SizedBox(
+              const SizedBox(
                 height: 32,
               ),
-            Text('Your Goal in Investing',
+              const Text('Your Goal in Investing',
                 style: TextStyle(
                   fontWeight: FontWeight.w700,
                   color: ColorPalette.slate800,
                   fontSize: 18
                 ),
               ),
-            SizedBox(
+              const SizedBox(
                 height: 24,
               ),
               GoalInvestingView(
@@ -78,6 +80,7 @@ class _PlanViewState extends State<PlanView> {
             ],
           ),
         ),
+      ),
     );
   }
 
@@ -95,7 +98,7 @@ class _PlanViewState extends State<PlanView> {
             child: Row(
               mainAxisAlignment: MainAxisAlignment.spaceBetween,
               children: [
-                Text("It's time to invest",
+                const Text("It's time to invest",
                   style: TextStyle(
                     fontSize: 16,
                     fontWeight: FontWeight.w600
@@ -105,17 +108,20 @@ class _PlanViewState extends State<PlanView> {
                   onTap: () {
                     Navigator.pop(context);
                   },
-                  child: Icon(Icons.close_rounded)
+                  child: const Icon(Icons.close_rounded)
                 )
               ],
             ),
           ),
-          Divider(color: ColorPalette.slate200, height: 1),
+          const Divider(color: ColorPalette.slate200, height: 1),
           InputInvestmentView(
-            selectedPlan: text,
+            currentPlan: text,
+            changePlan: () {
+              Navigator.pop(context);
+            },
             nextMove: (value) {
               Navigator.pop(context);
-              int formatIntParse = int.parse(value.replaceAll('Rp ', '').replaceAll(',', ''));
+              int formatIntParse = int.parse(value.replaceAll('Rp ', '').replaceAll('.', ''));
               showModalBottomSheet(context: context, builder: (context) => OptionsStartingInvest(totalInvest: formatIntParse));
             },
           ),

lib/features/dashboard/dashboard_account/view/plan/view/step_invest_plan/result_options_product.dart

@@ -3,9 +3,14 @@ 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/subscribe/total_payment_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/dashboard/dashboard_account/view/plan/view/step_invest_plan/options_starting_invest.dart';
+import 'package:cims_apps/features/dashboard/dashboard_account/view/plan/view_model/plan_view_model.dart';
+import 'package:cims_apps/features/dashboard/dashboard_account/view/product/view/product_view.dart';
 import 'package:cims_apps/features/dashboard/dashboard_account/view/product/view_model/product_view_model.dart';
 import 'package:flutter/material.dart';
+import 'package:provider/provider.dart';
 
 class ResultOptionsProduct extends StatelessWidget {
   final int totalInvest;
@@ -19,6 +24,10 @@ class ResultOptionsProduct extends StatelessWidget {
       Product(name: 'Gemilang Kas 2 Kelas A', type: 'Shares', totalPercent: 0.1)
     ];
 
+    return ChangeNotifierProvider(
+      create: (context) => PlanViewModel(),
+      child: Consumer<PlanViewModel>(
+        builder: (context, provider, child) {
           return Container(
             decoration: BoxDecoration(
               color: Colors.white,
@@ -28,10 +37,21 @@ class ResultOptionsProduct extends StatelessWidget {
             child: Column(
               mainAxisSize: MainAxisSize.min,
               children: [
-          const Row(
+                Row(
                   mainAxisAlignment: MainAxisAlignment.spaceBetween,
                   children: [
-              Icon(Icons.arrow_back, color: ColorPalette.slate500),
+                    GestureDetector(
+                        onTap: () {
+                          Navigator.pop(context);
+                          showModalBottomSheet(
+                            context: context,
+                            builder: (context) {
+                              return OptionsStartingInvest(totalInvest: totalInvest);
+                            },
+                          );
+                        },
+                      child: Icon(Icons.arrow_back, color: ColorPalette.slate500)
+                    ),
                     Text('Results from your risk profile',
                       style: TextStyle(
                         fontWeight: FontWeight.w600,
@@ -39,7 +59,13 @@ class ResultOptionsProduct extends StatelessWidget {
                         color: ColorPalette.slate800
                       ),
                     ),
-              Icon(Icons.close_rounded, color: ColorPalette.slate400)
+                    GestureDetector(
+                      onTap: () {
+                        Navigator.pop(context);
+
+                      },
+                      child: Icon(Icons.close_rounded, color: ColorPalette.slate400)
+                    )
                   ],
                 ),
                 const SizedBox(height: 32),
@@ -111,6 +137,7 @@ class ResultOptionsProduct extends StatelessWidget {
                             ),
                             GestureDetector(
                               onTap: () {
+                                routePush(context, page: ProductView(selectedProduct: e.value, seeMore: true));
                               },
                               child: const Text('See More',
                                 style: TextStyle(
@@ -131,13 +158,23 @@ class ResultOptionsProduct extends StatelessWidget {
                 ButtonView(
                   name: 'Next',
                   onPressed: () {
+                    Navigator.pop(context);
                     showModalBottomSheet(
                       context: context,
                       isScrollControlled: true,
                       builder: (context) =>
-                    TotalPaymentView(
+                        ChangeNotifierProvider(
+                          create: (context) => PlanViewModel(),
+                          child: Consumer<PlanViewModel>(
+                            builder: (context, planProvider, _) {
+                              return TotalPaymentView(
                                 listProduct: listProduct,
                                 totalInvest: totalInvest,
+                                isAgree: planProvider.isAgree,
+                                onTapAgree: planProvider.setAgree,
+                              );
+                            }
+                          ),
                         )
                     );
                   },
@@ -150,4 +187,7 @@ class ResultOptionsProduct extends StatelessWidget {
             ),
           );
         }
+      ),
+    );
+  }
 }

lib/features/dashboard/dashboard_account/view/plan/view_model/plan_view_model.dart

@@ -3,4 +3,10 @@ import 'package:flutter/material.dart';
 
 class PlanViewModel extends ChangeNotifier {
   List<Product> listProduct = [];
+  bool isAgree = false;
+
+  void setAgree() {
+    isAgree = !isAgree;
+    notifyListeners();
+  }
 }

lib/features/dashboard/dashboard_account/view/portfolio/portfolio_detail_view.dart

@@ -0,0 +1,265 @@
+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_title/text_title.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:cims_apps/features/dashboard/dashboard_account/view/portfolio/redeem_product/view/redeem_product.dart';
+import 'package:cims_apps/features/dashboard/dashboard_account/view/portfolio/redeem_product/view_model/redeem_product_view_model.dart';
+import 'package:flutter/material.dart';
+import 'package:provider/provider.dart';
+
+class PortfolioDetailView extends StatelessWidget {
+  const PortfolioDetailView({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    List<PortfolioProduct> listProduct = [
+      PortfolioProduct(
+          name: 'Gemilang Dana Kas Maxima',
+          type: 'Money Market',
+          yield: 8.17,
+          priceUnit: 2600.79,
+          funds: 6300000,
+          totalUnit: 14520
+      ),
+      PortfolioProduct(
+          name: 'Gemilang Dana Likuid',
+          type: 'Sharia',
+          yield: 6.42,
+          priceUnit: 1600.79,
+          funds: 2340000,
+          totalUnit: 232,
+      ),
+      PortfolioProduct(
+          name: 'Gemilang Income Fund',
+          type: 'Bonds',
+          yield: 8.17,
+          priceUnit: 2600.79,
+          funds: 6300000,
+          totalUnit: 2450,
+      )
+    ];
+
+
+    return ChangeNotifierProvider(
+      create: (context) => RedeemProductViewModel(),
+      child: Scaffold(
+        backgroundColor: Colors.white,
+        body: SizedBox(
+          width: SizeConfig.width,
+          height: SizeConfig.height,
+          child: Stack(
+            children: [
+              const ImageView(image: PathAssets.imgDashboardAccount),
+              Column(
+                children: [
+                  const SizedBox(
+                    height: 50,
+                  ),
+                  Padding(
+                    padding: const EdgeInsets.symmetric(horizontal: 24),
+                    child: Row(
+                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                      children: [
+                        const BackButtonView(),
+                        const TextTitle(title: 'Education', color: Colors.white),
+                        SizedBox(width: SizeConfig.width * 0.1,)
+                      ],
+                    ),
+                  ),
+                  const SizedBox(height: 24,),
+                  const Padding(
+                    padding: EdgeInsets.symmetric(horizontal: 24),
+                    child: Row(
+                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                      children: [
+                        Column(
+                          crossAxisAlignment: CrossAxisAlignment.start,
+                          children: [
+                            Text('Portfolio Value',
+                              style: TextStyle(
+                                  color: ColorPalette.white,
+                                  fontWeight: FontWeight.w400
+                              ),
+                            ),
+                            TextTitle(title: 'Rp 2.000.000', fontSize: 14, color: Colors.white)
+                          ],
+                        ),
+                        Column(
+                          crossAxisAlignment: CrossAxisAlignment.end,
+                          children: [
+                            Text('Advantages',
+                              style: TextStyle(
+                                  color: ColorPalette.white,
+                                  fontWeight: FontWeight.w400
+                              ),
+                            ),
+                            TextTitle(title: 'Rp 2.000.000', fontSize: 14, color: Colors.white)
+                          ],
+                        )
+                      ],
+                    ),
+                  ),
+                  const SizedBox(height: 24,),
+                  Expanded(
+                    child: Container(
+                      decoration: BoxDecoration(
+                        borderRadius: BorderRadius.circular(12),
+                        color: Colors.white,
+                      ),
+                      child: Consumer<RedeemProductViewModel>(
+                        builder: (context, provider, child) {
+                          return ListView(
+                            padding: const EdgeInsets.all(24),
+                            children: listProduct.asMap().entries.map((e) {
+                              return cardPortfolio(context, e.value);
+                            }).toList(),
+                          );
+                        }
+                      ),
+                    )
+                  )
+                ],
+              )
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+
+  Widget cardPortfolio(context, PortfolioProduct product) {
+    return Container(
+      padding: const EdgeInsets.all(16),
+      decoration: BoxDecoration(
+        color: Colors.white,
+        borderRadius: BorderRadius.circular(12),
+        border: Border.all(color: ColorPalette.slate200),
+        boxShadow: [
+          BoxShadow(
+            color: const Color(0xff1E293B).withOpacity(0.04),
+            blurRadius: 8,
+            spreadRadius: 2
+          )
+        ]
+      ),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Row(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              ImageView(
+                image: PathAssets.imgProduct,
+                width: SizeConfig.width * .13,
+              ),
+              const SizedBox(width: 8),
+              Expanded(
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    TextTitle(title: product.name ?? '', fontSize: 16,),
+                    const SizedBox(height: 4),
+                    Container(
+                      padding: const EdgeInsets.all(6),
+                      decoration: BoxDecoration(
+                          borderRadius: BorderRadius.circular(40),
+                          color: ColorPalette.investTypeBgColor[product.type!]?.withOpacity(0.5) ?? Colors.white,
+                          border: Border.all(width: 2, color: ColorPalette.investTypeColor[product.type!]?.withOpacity(0.4) ?? Colors.white)
+                      ),
+                      child: Text(
+                        product.type ?? '',
+                        style: TextStyle(
+                            color: ColorPalette.investTypeColor[product.type!],
+                            fontWeight: FontWeight.w600
+                        ),
+                      ),
+                    )
+                  ],
+                ),
+              )
+            ],
+          ),
+          const Padding(
+            padding: EdgeInsets.symmetric(vertical: 16),
+            child: Divider(height: 1, color: ColorPalette.slate200,),
+          ),
+          Wrap(
+            runSpacing: 8,
+            children: [
+              rowDescription('Present Value', 'Rp2.660.706', fontWeight: FontWeight.w700),
+              rowDescription('Investment Capital', 'Rp2.660.706'),
+              rowDescription('Advantages', 'Rp2.660.706'),
+              rowDescription('Purchase Price', NumberFormatter.numberCurrency(product.priceUnit, 'Rp ', 'id_ID')),
+              rowDescription('Number of Units', '${product.totalUnit ?? 0}'),
+            ],
+          ),
+          const SizedBox(height: 16,),
+          Row(
+            children: [
+              Expanded(
+                child: ButtonView(
+                  name: 'Redeem',
+                  marginVertical: 0,
+                  width: SizeConfig.width,
+                  isOutlined: true,
+                  heightWrapContent: true,
+                  contentPadding: const EdgeInsets.all(12),
+                  backgroundColor: Colors.white,
+                  borderColor: ColorPalette.red600,
+                  textColor: ColorPalette.red600,
+                  onPressed: () {
+                    Provider.of<RedeemProductViewModel>(context, listen: false).setProduct(product);
+                    showModalBottomSheet(
+                      context: context,
+                      isScrollControlled: true,
+                      builder: (context) {
+                        return RedeemProduct();
+                      },
+                    );
+                  },
+                ),
+              ),
+              const SizedBox(width: 16),
+              Expanded(
+                child: ButtonView(
+                  name: 'Buy',
+                  marginVertical: 0,
+                  width: SizeConfig.width,
+                  heightWrapContent: true,
+                  contentPadding: const EdgeInsets.all(12),
+                  onPressed: () {
+
+                  },
+                ),
+              )
+            ],
+          )
+        ],
+      ),
+    );
+  }
+
+  Widget rowDescription(String title, String value, {Color? color, FontWeight? fontWeight}) {
+    return Row(
+      mainAxisAlignment: MainAxisAlignment.spaceBetween,
+      children: [
+        Text(title,
+          style: const TextStyle(
+            color: ColorPalette.slate400,
+            fontWeight: FontWeight.w600
+          ),
+        ),
+        Text(value,
+          style: TextStyle(
+            color: color ?? ColorPalette.slate800,
+            fontWeight: fontWeight ?? FontWeight.w600,
+          ),
+        )
+      ],
+    );
+  }
+}

lib/features/dashboard/dashboard_account/view/portfolio/portfolio_view.dart

@@ -1,7 +1,10 @@
 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/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/dashboard/dashboard_account/view/portfolio/portfolio_detail_view.dart';
 import 'package:fl_chart/fl_chart.dart';
 import 'package:flutter/material.dart';
 
@@ -147,9 +150,31 @@ class _PortofolioViewState extends State<PortofolioView> {
                         ),
                         menuPortofolio(),
                         const SizedBox(
-                          height: 24,
+                          height: 12,
                         ),
-                        ...listColumnPortofolio(),
+                        const Padding(
+                          padding: EdgeInsets.symmetric(horizontal: 24, vertical: 12),
+                          child: Row(
+                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                            children: [
+                              TextTitle(title: 'My Portfolio', fontSize: 16),
+                              Row(
+                                children: [
+                                  Icon(Icons.add, size: 18, color: ColorPalette.primary),
+                                  SizedBox(width: 4),
+                                  const Text('Create',
+                                    style: TextStyle(
+                                      color: ColorPalette.primary,
+                                      fontWeight: FontWeight.w600
+                                    ),
+                                  )
+                                ],
+                              )
+                            ],
+                          ),
+                        ),
+                        // ...listColumnPortofolio(),
+                        cardPortfolio()
                       ],
                     ),
                   ),
@@ -183,6 +208,7 @@ class _PortofolioViewState extends State<PortofolioView> {
                     seePortofolioValue
                         ? Icons.visibility_off_outlined
                         : Icons.visibility_outlined,
+                    size: 18,
                     color: const Color(0xff93C5FD)))
           ],
         ),
@@ -358,4 +384,85 @@ class _PortofolioViewState extends State<PortofolioView> {
       );
     }).toList();
   }
+
+  Widget cardPortfolio() {
+    return GestureDetector(
+      onTap: () {
+        routePush(context, page: const PortfolioDetailView());
+      },
+      child: Container(
+        margin: const EdgeInsets.symmetric(horizontal: 24),
+        padding: const EdgeInsets.all(16),
+        decoration: BoxDecoration(
+          borderRadius: BorderRadius.circular(8),
+          border: Border.all(color: ColorPalette.slate200)
+        ),
+        child: Column(
+          children: [
+            Row(
+              children: [
+                Container(
+                    padding: const EdgeInsets.all(4),
+                    decoration: BoxDecoration(
+                        color: ColorPalette.blue200.withOpacity(0.5),
+                        borderRadius: BorderRadius.circular(8)
+                    ),
+                    child: ImageView(
+                        image: PathAssets.goalInvestIcon['Education'],
+                        width: SizeConfig.width * 0.07
+                    )
+                ),
+                const SizedBox(width: 8),
+                const Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    TextTitle(title: 'Education', fontSize: 16,),
+                    Text('2 Subscriptions',
+                      style: TextStyle(
+                        color: ColorPalette.slate400,
+                        fontWeight: FontWeight.w600
+                      ),
+                    )
+                  ],
+                ),
+              ],
+            ),
+            const Padding(
+              padding: EdgeInsets.symmetric(vertical: 8),
+              child: Divider(height: 1, color: ColorPalette.slate200),
+            ),
+            const Row(
+              mainAxisAlignment: MainAxisAlignment.spaceBetween,
+              children: [
+                Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    Text('Portfolio Value',
+                      style: TextStyle(
+                          color: ColorPalette.slate400,
+                          fontWeight: FontWeight.w400
+                      ),
+                    ),
+                    TextTitle(title: 'Rp 2.000.000', fontSize: 14,)
+                  ],
+                ),
+                Column(
+                  crossAxisAlignment: CrossAxisAlignment.end,
+                  children: [
+                    Text('Advantages',
+                      style: TextStyle(
+                          color: ColorPalette.slate400,
+                          fontWeight: FontWeight.w400
+                      ),
+                    ),
+                    TextTitle(title: 'Rp 2.000.000', fontSize: 14)
+                  ],
+                )
+              ],
+            )
+          ],
+        ),
+      ),
+    );
+  }
 }

lib/features/dashboard/dashboard_account/view/portfolio/redeem_product/view/change_amount.dart

@@ -0,0 +1,171 @@
+import 'dart:math';
+
+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/subscribe/input_investment_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/number_formatter.dart';
+import 'package:cims_apps/core/utils/size_config.dart';
+import 'package:cims_apps/features/dashboard/dashboard_account/view/portfolio/redeem_product/view/redeem_product.dart';
+import 'package:cims_apps/features/dashboard/dashboard_account/view/portfolio/redeem_product/view_model/redeem_product_view_model.dart';
+import 'package:flutter/material.dart';
+import 'package:provider/provider.dart';
+
+class ChangeAmount extends StatefulWidget {
+  final int totalAmount;
+  const ChangeAmount({super.key, required this.totalAmount});
+
+  @override
+  State<ChangeAmount> createState() => _ChangeAmountState();
+}
+
+class _ChangeAmountState extends State<ChangeAmount> {
+  TextEditingController amountController = TextEditingController();
+
+  @override
+  void initState() {
+    // TODO: implement initState
+    super.initState();
+    amountController.text = NumberFormatter.numberCurrency(widget.totalAmount, 'Rp ', 'id_ID', decimalDigits: 0);
+  }
+
+  @override
+  void dispose() {
+    // TODO: implement dispose
+    super.dispose();
+    amountController.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return ChangeNotifierProvider(
+      create: (context) => RedeemProductViewModel(),
+      child: Consumer<RedeemProductViewModel>(
+        builder: (context, provider, child) {
+          return Column(
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              Padding(
+                padding: const EdgeInsets.symmetric(vertical: 16, horizontal: 24),
+                child: Row(
+                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                  children: [
+                    GestureDetector(
+                        onTap: () {
+                          Navigator.pop(context);
+                          showModalBottomSheet(
+                            context: context,
+                            isScrollControlled: true,
+                            builder: (context) {
+                              return const RedeemProduct();
+                            },
+                          );
+                        },
+                        child: const Icon(Icons.arrow_back_rounded)
+                    ),
+                    const Text('Type amount',
+                      style: TextStyle(
+                          fontWeight: FontWeight.w600,
+                          fontSize: 16,
+                          color: ColorPalette.slate800
+                      ),
+                    ),
+                    GestureDetector(
+                        onTap: () {
+                          Navigator.pop(context);
+                        },
+                        child: const Icon(Icons.close_rounded)
+                    )
+                  ],
+                ),
+              ),
+              const Divider(height: 1, color: ColorPalette.slate200,),
+              Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  Padding(
+                    padding: EdgeInsets.all(24),
+                    child: cardProduct()
+                  ),
+                  InputInvestmentView(
+                    minimumPrice: (provider.getCurrentProduct.priceUnit! * 1).toInt(),
+                    maximumPrice: (provider.getCurrentProduct.priceUnit! * provider.getCurrentProduct.totalUnit!).toInt(),
+                    currentPrice: provider.getAmount!.toInt(),
+                    nextMove: (value) {
+                      String formatValueInput = value.replaceAll('Rp ', '').replaceAll('.', '');
+                      provider.setAmount(double.parse(formatValueInput));
+                      Navigator.pop(context);
+                      showModalBottomSheet(
+                        context: context,
+                        isScrollControlled: true,
+                        builder: (context) {
+                          return const RedeemProduct();
+                        },
+                      );
+                    },
+                  )
+                ],
+              ),
+              SizedBox(height: 16,)
+            ],
+          );
+        }
+      ),
+    );
+  }
+
+  Widget cardProduct() {
+    return Container(
+      padding: const EdgeInsets.all(16),
+      decoration: BoxDecoration(
+          color: Colors.white,
+          borderRadius: BorderRadius.circular(12),
+          border: Border.all(color: ColorPalette.slate200),
+          boxShadow: [
+            BoxShadow(
+                color: const Color(0xff1E293B).withOpacity(0.04),
+                blurRadius: 8,
+                spreadRadius: 2
+            )
+          ]
+      ),
+      child: Row(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          ImageView(
+            image: PathAssets.imgProduct,
+            width: SizeConfig.width * .13,
+          ),
+          const SizedBox(width: 8),
+          Expanded(
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                const TextTitle(title: 'Gemilang Dana Kas Maxima', fontSize: 16,),
+                const SizedBox(height: 4),
+                Container(
+                  padding: const EdgeInsets.all(6),
+                  decoration: BoxDecoration(
+                      borderRadius: BorderRadius.circular(40),
+                      color: ColorPalette.investTypeBgColor['Money Market']?.withOpacity(0.5) ?? Colors.white,
+                      border: Border.all(width: 2, color: ColorPalette.investTypeColor['Money Market']?.withOpacity(0.4) ?? Colors.white)
+                  ),
+                  child: Text(
+                    'Money Market' ?? '',
+                    style: TextStyle(
+                        color: ColorPalette.investTypeColor['Money Market'],
+                        fontWeight: FontWeight.w600
+                    ),
+                  ),
+                )
+              ],
+            ),
+          )
+        ],
+      ),
+    );
+  }
+}

lib/features/dashboard/dashboard_account/view/portfolio/redeem_product/view/change_destination_account.dart

@@ -0,0 +1,191 @@
+import 'package:cims_apps/application/component/button/button_view.dart';
+import 'package:cims_apps/application/theme/color_palette.dart';
+import 'package:cims_apps/features/dashboard/dashboard_account/view/portfolio/redeem_product/view/redeem_product.dart';
+import 'package:cims_apps/features/dashboard/dashboard_account/view/portfolio/redeem_product/view_model/redeem_product_view_model.dart';
+import 'package:flutter/material.dart';
+import 'package:provider/provider.dart';
+
+class ChangeDestinationAccount extends StatelessWidget {
+  const ChangeDestinationAccount({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    List<Account> listAccount = [
+      Account('Muhamad Rosyidin', 'BRI', '902139012324'),
+      Account('Achmad Muhaimin', 'BCA', '21391283928')
+    ];
+
+    return ChangeNotifierProvider(
+      create: (context) => RedeemProductViewModel(),
+      child: Consumer<RedeemProductViewModel>(
+        builder: (context, provider, child) {
+          return Column(
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              Padding(
+                padding: const EdgeInsets.symmetric(vertical: 16, horizontal: 24),
+                child: Row(
+                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                  children: [
+                    GestureDetector(
+                      onTap: () {
+                        Navigator.pop(context);
+                        showModalBottomSheet(
+                          context: context,
+                          isScrollControlled: true,
+                          builder: (context) {
+                            return const RedeemProduct();
+                          },
+                        );
+                      },
+                      child: const Icon(Icons.arrow_back_rounded)
+                    ),
+                    const Text('Change Destination Account',
+                      style: TextStyle(
+                        fontWeight: FontWeight.w600,
+                        fontSize: 16,
+                        color: ColorPalette.slate800
+                      ),
+                    ),
+                    GestureDetector(
+                      onTap: () {
+                        Navigator.pop(context);
+                      },
+                      child: const Icon(Icons.close_rounded)
+                    )
+                  ],
+                ),
+              ),
+              const Divider(height: 1, color: ColorPalette.slate200,),
+              Padding(
+                padding: const EdgeInsets.all(24),
+                child: Column(
+                  children: [
+                    ...listAccount.asMap().entries.map((e) {
+                      return GestureDetector(
+                        onTap: () => provider.setSelectedAcc(e.value),
+                        child: Padding(
+                          padding: EdgeInsets.only(top: e.key != 0 ? 16 : 0),
+                          child: cardAccount(e.value, provider.selectedAccount?.number ?? provider.getCurrentAccount.number),
+                        ),
+                      );
+                    }),
+                    const SizedBox(height: 24),
+                    GestureDetector(
+                      child: const Row(
+                        mainAxisSize: MainAxisSize.min,
+                        mainAxisAlignment: MainAxisAlignment.center,
+                        children: [
+                          Icon(Icons.add, size: 24, color: ColorPalette.primary),
+                          SizedBox(width: 12,),
+                          Text('New Bank',
+                            style: TextStyle(
+                                color: ColorPalette.primary,
+                                fontSize: 20,
+                                fontWeight: FontWeight.w600
+                            ),
+                          )
+                        ],
+                      ),
+                    ),
+                    const SizedBox(height: 32),
+                    ButtonView(
+                      name: 'Save',
+                      textSize: 20,
+                      marginVertical: 0,
+                      onPressed: () {
+                        Navigator.pop(context);
+                        showModalBottomSheet(
+                          context: context,
+                          isScrollControlled: true,
+                          builder: (context) {
+                            provider.setCurrentAcc(provider.selectedAccount!);
+                            return const RedeemProduct();
+                          },
+                        );
+                      },
+                    )
+                  ],
+                ),
+              ),
+            ],
+          );
+        }
+      ),
+    );
+  }
+
+  Widget cardAccount(Account account, String numberSelected) {
+    List<String> listNumber = [];
+
+    List.generate(account.number.length, (index) {
+      if(index > 3 && index < account.number.length - 4){
+        listNumber.add('*');
+      }else{
+        listNumber.add(account.number[index]);
+      }
+    });
+
+    return Container(
+      padding: const EdgeInsets.all(16),
+      decoration: BoxDecoration(
+          borderRadius: BorderRadius.circular(14),
+          border: Border.all(color: ColorPalette.slate200)
+      ),
+      child: Row(
+        children: [
+          Expanded(
+            child: Row(
+              mainAxisAlignment: MainAxisAlignment.spaceBetween,
+              children: [
+                Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    Text(account.nameOwner,
+                      style: const TextStyle(
+                          fontSize: 16,
+                          fontWeight: FontWeight.w600,
+                          color: ColorPalette.slate800
+                      ),
+                    ),
+                    Text(
+                      '${account.nameBank} - ${listNumber.join("")}',
+                      style: const TextStyle(
+                          fontSize: 16,
+                          fontWeight: FontWeight.w600,
+                          color: ColorPalette.slate400
+                      ),
+                    )
+                  ],
+                ),
+              ],
+            ),
+          ),
+          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: numberSelected == account.number
+                        ? ColorPalette.primary
+                        : ColorPalette.slate200)),
+            child: AnimatedContainer(
+              duration: const Duration(milliseconds: 200),
+              child: Container(
+                decoration: BoxDecoration(
+                    color:
+                    numberSelected == account.number ? ColorPalette.primary : ColorPalette.white,
+                    shape: BoxShape.circle),
+              ),
+            ),
+          )
+        ],
+      ),
+    );
+  }
+}

lib/features/dashboard/dashboard_account/view/portfolio/redeem_product/view/redeem_product.dart

@@ -0,0 +1,360 @@
+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/utils/number_formatter.dart';
+import 'package:cims_apps/core/utils/size_config.dart';
+import 'package:cims_apps/features/dashboard/dashboard_account/view/portfolio/redeem_product/view/change_amount.dart';
+import 'package:cims_apps/features/dashboard/dashboard_account/view/portfolio/redeem_product/view/change_destination_account.dart';
+import 'package:cims_apps/features/dashboard/dashboard_account/view/portfolio/redeem_product/view/total_redeem.dart';
+import 'package:cims_apps/features/dashboard/dashboard_account/view/portfolio/redeem_product/view_model/redeem_product_view_model.dart';
+import 'package:flutter/material.dart';
+import 'package:provider/provider.dart';
+
+class RedeemProduct extends StatefulWidget {
+  const RedeemProduct({super.key});
+
+  @override
+  State<RedeemProduct> createState() => _RedeemProductState();
+}
+
+class _RedeemProductState extends State<RedeemProduct> {
+  TextEditingController amountController = TextEditingController();
+
+  @override
+  void initState() {
+    // TODO: implement initState
+    super.initState();
+  }
+
+  @override
+  void dispose() {
+    // TODO: implement dispose
+    super.dispose();
+    amountController.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return ChangeNotifierProvider(
+      create: (context) => RedeemProductViewModel(),
+      child: Consumer<RedeemProductViewModel>(
+        builder: (context, provider, child) {
+          amountController.text = NumberFormatter.numberCurrency(provider.getAmount!.toInt(), 'Rp ', 'id_ID', decimalDigits: 0);
+          return Column(
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              Padding(
+                padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 16),
+                child: Row(
+                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                  children: [
+                    const Text('Products to be Redeemed',
+                      style: TextStyle(
+                        fontWeight: FontWeight.w600,
+                        color: ColorPalette.slate800,
+                        fontSize: 16
+                      ),
+                    ),
+                    GestureDetector(
+                      onTap: () => Navigator.pop(context),
+                      child: const Icon(Icons.close_rounded, color: ColorPalette.slate800,)
+                    )
+                  ],
+                ),
+              ),
+              const Divider(height: 1, color: ColorPalette.slate200,),
+              Padding(
+                padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 16),
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    cardProduct(),
+                    const SizedBox(height: 16),
+                    segmentAmount(
+                      context,
+                      provider.getAmount!,
+                      provider.getUnit!,
+                      (value) {
+                        provider.setUnit(value);
+                      },
+                    ),
+                    const SizedBox(height: 16),
+                    segmentDestinationAcc(provider.getCurrentAccount),
+                    const SizedBox(height: 36),
+                    ButtonView(
+                      name: 'Redeem',
+                      textSize: 20,
+                      marginVertical: 0,
+                      onPressed: () {
+                        Navigator.pop(context);
+                        showModalBottomSheet(
+                          context: context,
+                          isScrollControlled: true,
+                          builder: (context) {
+                            return TotalRedeem();
+                          },
+                        );
+                      },
+                    ),
+                    const SizedBox(height: 16)
+                  ],
+                ),
+              )
+            ],
+          );
+        }
+      ),
+    );
+  }
+
+  Widget cardProduct() {
+    return Container(
+      padding: const EdgeInsets.all(16),
+      decoration: BoxDecoration(
+          color: Colors.white,
+          borderRadius: BorderRadius.circular(12),
+          border: Border.all(color: ColorPalette.slate200),
+          boxShadow: [
+            BoxShadow(
+                color: const Color(0xff1E293B).withOpacity(0.04),
+                blurRadius: 8,
+                spreadRadius: 2
+            )
+          ]
+      ),
+      child: Row(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          ImageView(
+            image: PathAssets.imgProduct,
+            width: SizeConfig.width * .13,
+          ),
+          const SizedBox(width: 8),
+          Expanded(
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                const TextTitle(title: 'Gemilang Dana Kas Maxima', fontSize: 16,),
+                const SizedBox(height: 4),
+                Container(
+                  padding: const EdgeInsets.all(6),
+                  decoration: BoxDecoration(
+                      borderRadius: BorderRadius.circular(40),
+                      color: ColorPalette.investTypeBgColor['Money Market']?.withOpacity(0.5) ?? Colors.white,
+                      border: Border.all(width: 2, color: ColorPalette.investTypeColor['Money Market']?.withOpacity(0.4) ?? Colors.white)
+                  ),
+                  child: Text(
+                    'Money Market' ?? '',
+                    style: TextStyle(
+                        color: ColorPalette.investTypeColor['Money Market'],
+                        fontWeight: FontWeight.w600
+                    ),
+                  ),
+                )
+              ],
+            ),
+          )
+        ],
+      ),
+    );
+  }
+
+  Widget segmentAmount(context, double currentAmount, double currentUnit, void Function(double value) setUnit) {
+    double sliderValue = currentUnit / Provider.of<RedeemProductViewModel>(context, listen: false).getCurrentProduct.totalUnit!;
+    return Column(
+      children: [
+        const Align(
+          alignment: Alignment.centerLeft,
+          child: Text('Amount',
+            style: TextStyle(
+              fontWeight: FontWeight.w600,
+              color: ColorPalette.slate800,
+              fontSize: 16
+            ),
+          ),
+        ),
+        TextField(
+          controller: amountController,
+          textAlign: TextAlign.center,
+          style: const TextStyle(
+              fontSize: 28,
+              fontWeight: FontWeight.w700,
+              color: ColorPalette.slate800
+          ),
+          keyboardType: TextInputType.number,
+          readOnly: true,
+          decoration: InputDecoration(
+            enabledBorder: const UnderlineInputBorder(
+              borderSide: BorderSide(
+                  color: ColorPalette.slate200,
+                  width: 1
+              ),
+            ),
+            suffixIcon: GestureDetector(
+              onTap: () {
+                Navigator.pop(context);
+                showModalBottomSheet(
+                  context: context,
+                  isScrollControlled: true,
+                  builder: (context) {
+                    return ChangeAmount(
+                      totalAmount: currentAmount.toInt(),
+                    );
+                  },
+                );
+              },
+              child: const Icon(Icons.edit, color: ColorPalette.primary),
+            )
+          ),
+        ),
+        Padding(
+          padding: const EdgeInsets.symmetric(vertical: 20),
+          child: Row(
+            mainAxisAlignment: MainAxisAlignment.center,
+            children: [
+              Text(currentUnit.toStringAsFixed(2).replaceAll('.', ','),
+                style: const TextStyle(
+                  fontWeight: FontWeight.w700,
+                  fontSize: 18,
+                  color: ColorPalette.slate800
+                ),
+              ),
+              const Text(' unit',
+                style: TextStyle(
+                  fontWeight: FontWeight.w600,
+                  color: ColorPalette.slate400
+                ),
+              )
+            ],
+          ),
+        ),
+        Row(
+          children: [
+            Expanded(
+              child: SliderTheme(
+                data: SliderTheme.of(context).copyWith(
+                  trackHeight: 4.0,
+                  thumbColor: ColorPalette.primary,
+                  thumbShape: const RoundSliderThumbShape(enabledThumbRadius: 10.0),
+                  overlayColor:Colors.deepPurple,
+                  inactiveTickMarkColor: ColorPalette.primary,
+                  inactiveTrackColor: ColorPalette.slate200,
+                  overlayShape: SliderComponentShape.noOverlay
+                ),
+                child: Slider(
+                  value: sliderValue,
+                  onChanged: setUnit,
+                  label: sliderValue.round().toString(),
+                ),
+              ),
+            ),
+            SizedBox(width: 12),
+            Text('${(sliderValue * 100).toStringAsFixed(2)} %',
+              style: const TextStyle(
+                color: ColorPalette.slate800,
+                fontWeight: FontWeight.w600
+              ),
+            )
+          ],
+        )
+      ],
+    );
+  }
+
+  Widget segmentDestinationAcc(Account account) {
+    List<String> listNumber = [];
+
+    List.generate(account.number.length, (index) {
+      if(index > 3 && index < account.number.length - 4){
+        listNumber.add('*');
+      }else{
+        listNumber.add(account.number[index]);
+      }
+    });
+
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        const Text('Destination Account',
+          style: TextStyle(
+              fontWeight: FontWeight.w600,
+              color: ColorPalette.slate800,
+              fontSize: 16
+          ),
+        ),
+        const SizedBox(height: 16),
+        Container(
+          padding: const EdgeInsets.all(16),
+          decoration: BoxDecoration(
+            borderRadius: BorderRadius.circular(14),
+            border: Border.all(color: ColorPalette.slate200)
+          ),
+          child: Row(
+            mainAxisAlignment: MainAxisAlignment.spaceBetween,
+            children: [
+              Expanded(
+                child: Row(
+                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                  children: [
+                    Column(
+                      crossAxisAlignment: CrossAxisAlignment.start,
+                      children: [
+                        Text(account.nameOwner,
+                          style: const TextStyle(
+                            fontSize: 16,
+                            fontWeight: FontWeight.w600,
+                            color: ColorPalette.slate800
+                          ),
+                        ),
+                        Text('${account.nameBank} - ${listNumber.join("")}',
+                          style: const TextStyle(
+                              fontSize: 16,
+                              fontWeight: FontWeight.w600,
+                              color: ColorPalette.slate400
+                          ),
+                        )
+                      ],
+                    ),
+                  ],
+                ),
+              ),
+              GestureDetector(
+                onTap: () {
+                  Navigator.pop(context);
+                  showModalBottomSheet(
+                    context: context,
+                    isScrollControlled: true,
+                    builder: (context) => const ChangeDestinationAccount(),
+                  );
+                },
+                child: Container(
+                  padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
+                  decoration: BoxDecoration(
+                    borderRadius: BorderRadius.circular(18),
+                    color: ColorPalette.blue200.withOpacity(0.5)
+                  ),
+                  child: const 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
+                        ),
+                      )
+                    ],
+                  ),
+                ),
+              )
+            ],
+          ),
+        )
+      ],
+    );
+  }
+}

lib/features/dashboard/dashboard_account/view/portfolio/redeem_product/view/total_redeem.dart

@@ -0,0 +1,205 @@
+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/radio_agreement.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/number_formatter.dart';
+import 'package:cims_apps/core/utils/size_config.dart';
+import 'package:cims_apps/features/dashboard/dashboard_account/view/portfolio/redeem_product/view_model/redeem_product_view_model.dart';
+import 'package:flutter/material.dart';
+import 'package:provider/provider.dart';
+
+class TotalRedeem extends StatelessWidget {
+  const TotalRedeem({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return ChangeNotifierProvider(
+      create: (context) => RedeemProductViewModel(),
+      child: Consumer<RedeemProductViewModel>(
+        builder: (context, provider, child) {
+          return Column(
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              Padding(
+                padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 16),
+                child: Row(
+                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                  children: [
+                    const Text('Investment Funds that You Cash Out',
+                      style: TextStyle(
+                          fontWeight: FontWeight.w600,
+                          color: ColorPalette.slate800,
+                          fontSize: 16
+                      ),
+                    ),
+                    GestureDetector(
+                        onTap: () => Navigator.pop(context),
+                        child: const Icon(Icons.close_rounded, color: ColorPalette.slate800,)
+                    )
+                  ],
+                ),
+              ),
+              const Divider(height: 1, color: ColorPalette.slate200,),
+              Padding(
+                padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 16),
+                child: cardProduct(provider.getCurrentProduct, provider.getUnit!),
+              ),
+              const Padding(
+                padding: EdgeInsets.symmetric(horizontal: 24),
+                child: Row(
+                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                  children: [
+                    Text('Sales Commission',
+                      style: TextStyle(
+                        color: ColorPalette.slate400,
+                        fontSize: 16
+                      ),
+                    ),
+                    Text('Free',
+                      style: TextStyle(
+                        fontWeight: FontWeight.w600,
+                        color: ColorPalette.primary,
+                        fontSize: 16
+                      ),
+                    )
+                  ],
+                ),
+              ),
+              const SizedBox(height: 16),
+              const Padding(
+                padding: EdgeInsets.symmetric(horizontal: 24),
+                child: Row(
+                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                  children: [
+                    Text('Cash Out Method',
+                      style: TextStyle(
+                          color: ColorPalette.slate400,
+                          fontSize: 16
+                      ),
+                    ),
+                    Text('Regular',
+                      style: TextStyle(
+                          fontWeight: FontWeight.w600,
+                          color: ColorPalette.primary,
+                          fontSize: 16
+                      ),
+                    )
+                  ],
+                ),
+              ),
+              const SizedBox(height: 16,),
+              Container(
+                padding: EdgeInsets.symmetric(horizontal: 24, vertical: 16),
+                color: ColorPalette.slate200.withOpacity(0.5),
+                child: Row(
+                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                  children: [
+                    Expanded(
+                      child: TextTitle(
+                        title: 'Estimated Funds Disbursed',
+                        color: ColorPalette.slate500,
+                        fontSize: 16,
+                      )
+                    ),
+                    Expanded(
+                      child: Text(
+                        NumberFormatter.numberCurrency((provider.getCurrentProduct.priceUnit! * provider.getUnit!).toInt(), 'Rp ', 'id_ID', decimalDigits: 0),
+                        textAlign: TextAlign.end,
+                        style: TextStyle(
+                          color: ColorPalette.slate800,
+                          fontWeight: FontWeight.w700,
+                          fontSize: 18
+                        ),
+                      )
+                    )
+                  ],
+                ),
+              ),
+              RadioAgreement(
+                isAgree: provider.isAgree,
+                desc: 'I agree to the sale of the mutual funds listed on this page. I understand that the total funds disbursed are approximate. The amount received may change according to the closing price of the mutual fund on the day of sale.',
+                onTap: provider.setAgree
+              ),
+              const SizedBox(height: 24),
+              ButtonView(
+                disabled: !provider.isAgree,
+                name: 'Redeem',
+                textSize: 20,
+                marginVertical: 0,
+                disabledBgColor: ColorPalette.slate200.withOpacity(0.5),
+                textColor: !provider.isAgree ? ColorPalette.slate400 : Colors.white,
+                onPressed: () {
+                  Navigator.pop(context);
+                  showModalBottomSheet(
+                    context: context,
+                    isScrollControlled: true,
+                    builder: (context) {
+                      return TotalRedeem();
+                    },
+                  );
+                },
+              ),
+              const SizedBox(height: 24)
+            ],
+          );
+        }
+      ),
+    );
+  }
+
+  Widget cardProduct(PortfolioProduct product, double currentUnit) {
+    return Container(
+      padding: const EdgeInsets.all(16),
+      decoration: BoxDecoration(
+          color: Colors.white,
+          borderRadius: BorderRadius.circular(12),
+          border: Border.all(color: ColorPalette.slate200),
+          boxShadow: [
+            BoxShadow(
+                color: const Color(0xff1E293B).withOpacity(0.04),
+                blurRadius: 8,
+                spreadRadius: 2
+            )
+          ]
+      ),
+      child: Row(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          ImageView(
+            image: PathAssets.imgProduct,
+            width: SizeConfig.width * .13,
+          ),
+          const SizedBox(width: 8),
+          Expanded(
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                TextTitle(title: product.name ?? '', fontSize: 16,),
+                const SizedBox(height: 4),
+                Row(
+                  children: [
+                    Text(currentUnit.toStringAsFixed(2).replaceAll('.', ','),
+                      style: const TextStyle(
+                          fontWeight: FontWeight.w700,
+                          fontSize: 18,
+                          color: ColorPalette.slate800
+                      ),
+                    ),
+                    const Text(' unit',
+                      style: TextStyle(
+                          fontWeight: FontWeight.w600,
+                          color: ColorPalette.slate400
+                      ),
+                    )
+                  ],
+                ),
+              ],
+            ),
+          )
+        ],
+      ),
+    );
+  }
+}

lib/features/dashboard/dashboard_account/view/portfolio/redeem_product/view_model/redeem_product_view_model.dart

@@ -0,0 +1,73 @@
+import 'package:flutter/material.dart';
+
+class Account {
+  String nameOwner, nameBank, number;
+
+  Account(this.nameOwner, this.nameBank, this.number);
+}
+
+class PortfolioProduct {
+  String? name, type;
+  double? yield;
+  double? priceUnit, funds, totalPercent, totalUnit;
+
+  PortfolioProduct({this.name, this.type, this.yield, this.priceUnit, this.funds, this.totalPercent = 1, this.totalUnit});
+}
+
+class RedeemProductViewModel extends ChangeNotifier {
+  static Account currentAccount = Account('Muhamad Rosyidin', 'BRI', '902139012324');
+  static PortfolioProduct currentProduct =
+    PortfolioProduct(
+      name: 'Gemilang Dana Kas Maxima',
+      type: '',
+      yield: 8.17,
+      priceUnit: 2600.79,
+      funds: 6300000,
+      totalUnit: 25
+  );
+
+  static double? amount;
+  static double? unit;
+  Account? selectedAccount;
+
+  Account get getCurrentAccount => currentAccount;
+  PortfolioProduct get getCurrentProduct => currentProduct;
+  double? get getAmount => amount;
+  double? get getUnit => unit;
+
+  bool isAgree = false;
+
+  void setCurrentAcc(Account account) {
+    currentAccount = account;
+    notifyListeners();
+  }
+
+  void setSelectedAcc(Account account){
+    selectedAccount = account;
+    notifyListeners();
+  }
+
+  void setAmount(double amount) {
+    amount = amount;
+    unit = (amount / currentProduct.priceUnit!);
+    notifyListeners();
+  }
+
+  void setUnit(double value){
+    unit = currentProduct.totalUnit! * value;
+    amount = unit! * currentProduct.priceUnit!;
+    notifyListeners();
+  }
+
+  void setProduct(PortfolioProduct product) {
+    currentProduct = product;
+    amount = product.priceUnit! * (product.totalUnit! / 2.0);
+    unit = (product.totalUnit! / 2.0);
+    notifyListeners();
+  }
+
+  void setAgree() {
+    isAgree = !isAgree;
+    notifyListeners();
+  }
+}

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

@@ -24,8 +24,9 @@ class Time {
 }
 
 class ProductView extends StatefulWidget {
-  final String investType;
-  const ProductView(this.investType, {super.key});
+  final bool seeMore;
+  final Product selectedProduct;
+  const ProductView({super.key, required this.selectedProduct, this.seeMore = false});
 
   @override
   State<ProductView> createState() => _ProductViewState();
@@ -144,7 +145,8 @@ class _ProductViewState extends State<ProductView> {
             ],
           ),
         ),
-        bottomNavigationBar: Container(
+        bottomNavigationBar: !widget.seeMore ?
+          Container(
             height: SizeConfig.height * .1,
             padding: const EdgeInsets.symmetric(horizontal: 24),
             child: ButtonView(
@@ -159,7 +161,7 @@ class _ProductViewState extends State<ProductView> {
               height: SizeConfig.height * 0.06,
               marginVertical: 16,
             ),
-        ),
+          ) : SizedBox(),
       ),
     );
   }
@@ -177,7 +179,7 @@ class _ProductViewState extends State<ProductView> {
                   SizedBox(width: 8),
                   Expanded(
                     child: Text(
-                      'Gemilang Dana Kas Maxima',
+                      widget.selectedProduct.name ?? '',
                       maxLines: 2,
                       overflow: TextOverflow.ellipsis,
                       style: TextStyle(
@@ -190,17 +192,18 @@ class _ProductViewState extends State<ProductView> {
                 ],
               ),
             ),
+            SizedBox(width: 12),
             Container(
               padding: const EdgeInsets.all(6),
               decoration: BoxDecoration(
                   borderRadius: BorderRadius.circular(40),
-                  color: ColorPalette.investTypeBgColor[widget.investType] ?? Colors.white,
-                  border: Border.all(width: 2, color: ColorPalette.investTypeColor[widget.investType] ?? Colors.white)
+                  color: ColorPalette.investTypeBgColor[widget.selectedProduct.type] ?? Colors.white,
+                  border: Border.all(width: 2, color: ColorPalette.investTypeColor[widget.selectedProduct.type] ?? Colors.white)
               ),
               child: Text(
-                widget.investType,
+                widget.selectedProduct.type ?? '',
                 style: TextStyle(
-                    color: ColorPalette.investTypeColor[widget.investType],
+                    color: ColorPalette.investTypeColor[widget.selectedProduct.type],
                     fontWeight: FontWeight.w600
                 ),
               ),

lib/features/dashboard/dashboard_account/view/product/view/step_subscribe/select_goal_investing.dart

@@ -2,6 +2,7 @@ import 'package:cims_apps/application/component/subscribe/goal_investing_view.da
 import 'package:cims_apps/application/component/subscribe/input_investment_view.dart';
 import 'package:cims_apps/application/component/subscribe/total_payment_view.dart';
 import 'package:cims_apps/application/theme/color_palette.dart';
+import 'package:cims_apps/features/dashboard/dashboard_account/view/plan/view_model/plan_view_model.dart';
 import 'package:cims_apps/features/dashboard/dashboard_account/view/product/view_model/product_view_model.dart';
 import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
@@ -11,10 +12,9 @@ class SelectGoalInvesting extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return MultiProvider(
-      providers: [
-        ChangeNotifierProvider(create: (context) => ProductViewModel(),)
-      ],
+
+    return ChangeNotifierProvider(
+      create: (context) => ProductViewModel(),
       child: Consumer<ProductViewModel>(
         builder: (context, provider, child) {
           return Container(
@@ -51,23 +51,50 @@ class SelectGoalInvesting extends StatelessWidget {
                       context: context,
                       isScrollControlled: true,
                       builder: (context) {
-                        return InputInvestmentView(
-                          selectedPlan: p0,
+                        return ChangeNotifierProvider(
+                          create: (context) => ProductViewModel(),
+                          child: Consumer<ProductViewModel>(
+                            builder: (context, provider, child) {
+                              return Padding(
+                                padding: EdgeInsets.symmetric(vertical: 16),
+                                child: InputInvestmentView(
+                                  currentPlan: p0,
+                                  changePlan: () {
+                                    Navigator.pop(context);
+                                    showModalBottomSheet(
+                                      context: context,
+                                      isScrollControlled: true,
+                                      builder: (context) => SelectGoalInvesting(),
+                                    );
+                                  },
                                   nextMove: (value) {
                                     Navigator.pop(context);
-                            int formatIntParse = int.parse(value.replaceAll('Rp ', '').replaceAll(',', ''));
+                                    int formatIntParse = int.parse(value.replaceAll('Rp ', '').replaceAll('.', ''));
                                     showModalBottomSheet(
                                       context: context,
                                       isScrollControlled: true,
                                       builder: (context) =>
-                                TotalPaymentView(
+                                        ChangeNotifierProvider(
+                                          create: (context) => ProductViewModel(),
+                                          child: Consumer<ProductViewModel>(
+                                              builder: (context, provider, child) {
+                                                return TotalPaymentView(
                                                   listProduct: [
                                                     provider.getSelectedProduct
                                                   ],
                                                   totalInvest: formatIntParse,
+                                                  isAgree: provider.isAgree,
+                                                  onTapAgree: provider.setAgree,
+                                                );
+                                              }
+                                            ),
                                           )
                                     );
                                   },
+                                ),
+                              );
+                            }
+                          ),
                         );
                       },
                     );

lib/features/dashboard/dashboard_account/view/product/view_model/product_view_model.dart

@@ -14,6 +14,7 @@ class ProductViewModel extends ChangeNotifier {
   Product get getSelectedProduct => selectedProduct;
 
   double totalInvestment = 0;
+  bool isAgree = false;
 
   void setSelectedProduct(Product product) {
     selectedProduct = product;
@@ -24,4 +25,9 @@ class ProductViewModel extends ChangeNotifier {
     totalInvestment = value;
     notifyListeners();
   }
+
+  void setAgree() {
+    isAgree = !isAgree;
+    notifyListeners();
+  }
 }

lib/features/dashboard/dashboard_public/view/dashboard_public_view.dart

@@ -44,7 +44,6 @@ class DashboardPublicView extends StatelessWidget {
           return Scaffold(
             body: SingleChildScrollView(
               padding: const EdgeInsets.only(
-                top: 32.0,
                 bottom: 8.0,
                 left: 24.0,
                 right: 24.0,
@@ -55,6 +54,7 @@ class DashboardPublicView extends StatelessWidget {
                   crossAxisAlignment: CrossAxisAlignment.start,
                   mainAxisAlignment: MainAxisAlignment.spaceBetween,
                   children: [
+                    SizedBox(height: SizeConfig.height * .06),
                     ImageView(
                       image: PathAssets.icon1,
                       width: SizeConfig.width * .35,
@@ -67,7 +67,7 @@ class DashboardPublicView extends StatelessWidget {
                       alignment: Alignment.center,
                       child: ImageView(
                         image: PathAssets.imgDashboard,
-                        width: SizeConfig.width * .7,
+                        width: SizeConfig.width * .8,
                       ),
                     ),
                     Row(
@@ -105,6 +105,7 @@ class DashboardPublicView extends StatelessWidget {
                         provider.loginGoogle(context);
                       },
                     ),
+                    SizedBox(height: SizeConfig.height * .1),
                     Row(
                       mainAxisAlignment: MainAxisAlignment.spaceBetween,
                       children: [

lib/features/profile/model/list_menu_model.dart

@@ -0,0 +1,8 @@
+import 'package:flutter/material.dart';
+
+class ListMenuModel {
+  final String title, pathAsset;
+  final Widget page;
+  ListMenuModel(
+      {required this.title, required this.pathAsset, required this.page});
+}

lib/features/profile/view/profile_view.dart

@@ -1,5 +1,8 @@
-import 'package:cims_apps/application/component/custom_app_bar/custom_app_bar.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/theme/color_palette.dart';
 import 'package:cims_apps/core/utils/size_config.dart';
+import 'package:cims_apps/features/profile/model/list_menu_model.dart';
 import 'package:flutter/material.dart';
 
 class ProfileView extends StatelessWidget {
@@ -7,8 +10,110 @@ class ProfileView extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    List<ListMenuModel> listMenuGeneral = [
+      ListMenuModel(
+          title: 'Personal Data',
+          pathAsset: PathAssets.iconProfile,
+          page: Container()),
+      ListMenuModel(
+          title: 'Change Password',
+          pathAsset: PathAssets.iconLock,
+          page: Container()),
+      ListMenuModel(
+          title: 'Add Card', pathAsset: PathAssets.iconCard, page: Container()),
+      ListMenuModel(
+          title: 'Settings',
+          pathAsset: PathAssets.iconSetting,
+          page: Container()),
+    ];
+
+    List<ListMenuModel> listMenuPreferences = [
+      ListMenuModel(
+          title: 'FAQs', pathAsset: PathAssets.iconChat, page: Container()),
+      ListMenuModel(
+          title: 'Log Out',
+          pathAsset: PathAssets.iconLogout,
+          page: Container()),
+    ];
+    TextStyle textStyle = const TextStyle(
+      fontSize: 20,
+      fontWeight: FontWeight.bold,
+      color: Colors.white,
+    );
+
+    Widget cardContent(
+        {required String title, required List<ListMenuModel> listMenu}) {
+      return Container(
+        width: SizeConfig.width,
+        padding: const EdgeInsets.all(16.0),
+        decoration: const BoxDecoration(
+            color: Colors.white,
+            borderRadius: BorderRadius.all(Radius.circular(12))),
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            Text(title),
+            ...listMenu.map((e) {
+              return Padding(
+                padding: const EdgeInsets.only(top: 8.0),
+                child: ListTile(
+                  title: Text(e.title),
+                  contentPadding: EdgeInsets.zero,
+                  leading: ImageView(
+                      image: e.pathAsset, width: SizeConfig.width * .08),
+                  trailing: const Icon(Icons.arrow_forward_ios,
+                      color: ColorPalette.slate400),
+                  onTap: () {
+                    // routePush(context, page: e.page);
+                  },
+                ),
+              );
+            }),
+          ],
+        ),
+      );
+    }
+
     return Scaffold(
-      appBar: CustomAppBar(height: SizeConfig.height * .1, title: 'Profile'),
+      appBar: null,
+      body: Stack(
+        children: [
+          ImageView(image: PathAssets.bgProfile, width: SizeConfig.width),
+          Container(
+            width: SizeConfig.width,
+            padding: const EdgeInsets.only(top: 40.0, left: 16.0, right: 16.0),
+            child: SingleChildScrollView(
+              padding: const EdgeInsets.only(bottom: 60.0),
+              child: Column(
+                crossAxisAlignment: CrossAxisAlignment.center,
+                children: [
+                  Text('Profile', style: textStyle),
+                  Padding(
+                    padding: const EdgeInsets.only(top: 40.0, bottom: 8.0),
+                    child: ImageView(
+                      image: PathAssets.imgCatOutlined,
+                      width: SizeConfig.width * .28,
+                    ),
+                  ),
+                  Text('Muhamad Rosyidin',
+                      style: textStyle.copyWith(fontSize: 24)),
+                  Text('Investor Conservative',
+                      style: textStyle.copyWith(
+                        fontSize: 16,
+                        fontWeight: FontWeight.normal,
+                        color: ColorPalette.green400,
+                      )),
+                  SizedBox(height: SizeConfig.height * .02),
+                  cardContent(title: 'General', listMenu: listMenuGeneral),
+                  SizedBox(height: SizeConfig.height * .03),
+                  cardContent(
+                      title: 'Preference', listMenu: listMenuPreferences),
+                ],
+              ),
+            ),
+          ),
+        ],
+      ),
     );
   }
 }

lib/features/transaction/view/cancel_view.dart

@@ -0,0 +1,51 @@
+import 'package:cims_apps/application/assets/path_assets.dart';
+import 'package:cims_apps/application/component/card_transaction/card_transaction_view.dart';
+import 'package:cims_apps/application/component/card_transaction/empty_card_transaction.dart';
+import 'package:cims_apps/core/route/route.dart';
+import 'package:cims_apps/core/utils/number_formatter.dart';
+import 'package:cims_apps/core/utils/string_utils.dart';
+import 'package:cims_apps/features/transaction/view/subscribe_detail_view.dart';
+import 'package:cims_apps/features/transaction/viewmodel/transaction_viewmodel.dart';
+import 'package:flutter/material.dart';
+import 'package:provider/provider.dart';
+
+class CancelView extends StatelessWidget {
+  const CancelView({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return SingleChildScrollView(
+      child: Consumer<TransactionViewModel>(
+        builder: (context, provider, child) => Column(
+          children: [
+            if (provider.listCancelTransaction.isEmpty)
+              EmptyCardTransaction(
+                onPressedButton: () {},
+              ),
+            ...provider.listCancelTransaction.map((e) {
+              return CardTransactionView(
+                onTap: () {
+                  routePush(context,
+                      page: const SubscribeDetailView(
+                        type: 'virtual',
+                      ));
+                },
+                iconPath: PathAssets.iconEducation,
+                type: 'Education',
+                amount: NumberFormatter.numberCurrency(
+                  6000000,
+                  'Rp ',
+                  'id_ID',
+                  decimalDigits: 0,
+                ),
+                timeTransaction: StringUtils.formatTime(DateTime.now()),
+                subs: '3 Subscription',
+                step: 'cancel',
+              );
+            }),
+          ],
+        ),
+      ),
+    );
+  }
+}

lib/features/transaction/view/done_view.dart

@@ -0,0 +1,53 @@
+import 'package:cims_apps/application/assets/path_assets.dart';
+import 'package:cims_apps/application/component/card_transaction/card_transaction_view.dart';
+import 'package:cims_apps/application/component/card_transaction/empty_card_transaction.dart';
+import 'package:cims_apps/core/route/route.dart';
+import 'package:cims_apps/core/utils/number_formatter.dart';
+import 'package:cims_apps/core/utils/string_utils.dart';
+import 'package:cims_apps/features/transaction/view/subscribe_detail_view.dart';
+import 'package:cims_apps/features/transaction/viewmodel/transaction_viewmodel.dart';
+import 'package:flutter/material.dart';
+import 'package:provider/provider.dart';
+
+class DoneView extends StatelessWidget {
+  const DoneView({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return SingleChildScrollView(
+      child: Consumer<TransactionViewModel>(
+        builder: (context, provider, child) {
+          return Column(
+            children: [
+              if (provider.listDoneTransaction.isEmpty)
+                EmptyCardTransaction(
+                  onPressedButton: () {},
+                ),
+              ...provider.listDoneTransaction.map((e) {
+                return CardTransactionView(
+                  onTap: () {
+                    routePush(context,
+                        page: const SubscribeDetailView(
+                          type: 'virtual',
+                        ));
+                  },
+                  iconPath: PathAssets.iconEducation,
+                  type: 'Education',
+                  amount: NumberFormatter.numberCurrency(
+                    6000000,
+                    'Rp ',
+                    'id_ID',
+                    decimalDigits: 0,
+                  ),
+                  timeTransaction: StringUtils.formatTime(DateTime.now()),
+                  subs: '3 Subscription',
+                  step: 'done',
+                );
+              }),
+            ],
+          );
+        },
+      ),
+    );
+  }
+}

lib/features/transaction/view/onprocess_view.dart

@@ -0,0 +1,50 @@
+import 'package:cims_apps/application/assets/path_assets.dart';
+import 'package:cims_apps/application/component/card_transaction/card_transaction_view.dart';
+import 'package:cims_apps/application/component/card_transaction/empty_card_transaction.dart';
+import 'package:cims_apps/core/route/route.dart';
+import 'package:cims_apps/core/utils/number_formatter.dart';
+import 'package:cims_apps/core/utils/string_utils.dart';
+import 'package:cims_apps/features/transaction/view/subscribe_detail_view.dart';
+import 'package:cims_apps/features/transaction/viewmodel/transaction_viewmodel.dart';
+import 'package:flutter/material.dart';
+import 'package:provider/provider.dart';
+
+class OnProcessView extends StatelessWidget {
+  const OnProcessView({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return SingleChildScrollView(
+      child:
+          Consumer<TransactionViewModel>(builder: (context, provider, child) {
+        return Column(children: [
+          if (provider.listOnProcessTransaction.isEmpty)
+            EmptyCardTransaction(
+              onPressedButton: () {},
+            ),
+          ...provider.listOnProcessTransaction.map((e) {
+            return CardTransactionView(
+              onTap: () {
+                routePush(context,
+                    page: const SubscribeDetailView(
+                      type: 'virtual',
+                    ));
+              },
+              iconPath: PathAssets.iconHome,
+              type: 'Home',
+              amount: NumberFormatter.numberCurrency(
+                6000000,
+                'Rp ',
+                'id_ID',
+                decimalDigits: 0,
+              ),
+              timeTransaction: StringUtils.formatTime(DateTime.now()),
+              subs: '3 Subscription',
+              step: 'on process',
+            );
+          }),
+        ]);
+      }),
+    );
+  }
+}

lib/features/transaction/view/subscribe_detail_view.dart

@@ -0,0 +1,516 @@
+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/list_tile/list_tile_view.dart';
+import 'package:cims_apps/application/theme/color_palette.dart';
+import 'package:cims_apps/core/utils/size_config.dart';
+import 'package:cims_apps/core/utils/string_utils.dart';
+import 'package:flutter/material.dart';
+
+class SubscribeDetailView extends StatelessWidget {
+  final String type;
+  const SubscribeDetailView({Key? key, required this.type}) : super(key: key);
+
+  Widget _stepper(
+    TextTheme textTheme, {
+    required String description,
+    String? date,
+    time,
+    bool isActive = false,
+    bool isDone = false,
+    bool isLast = false,
+  }) {
+    return Container(
+      padding: const EdgeInsets.only(top: 8.0, left: 16.0),
+      child: Row(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Column(
+            children: [
+              Padding(
+                padding: const EdgeInsets.only(left: 2.0, top: 8.0),
+                child: Icon(
+                  Icons.circle_rounded,
+                  size: 10,
+                  color: isDone
+                      ? ColorPalette.primary
+                      : isActive
+                          ? ColorPalette.primary
+                          : ColorPalette.slate400,
+                ),
+              ),
+              if (!isLast)
+                ConstrainedBox(
+                  constraints: BoxConstraints.expand(
+                      height: SizeConfig.width * .2, width: 0.0),
+                  child: Padding(
+                    padding: const EdgeInsets.symmetric(vertical: 4.0),
+                    child: VerticalDivider(
+                      color:
+                          isDone ? ColorPalette.primary : ColorPalette.slate400,
+                      thickness: 2.0,
+                    ),
+                  ),
+                ),
+            ],
+          ),
+          Padding(
+            padding: const EdgeInsets.only(left: 16.0),
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                Padding(
+                  padding: const EdgeInsets.only(bottom: 8.0),
+                  child: Text(
+                    description,
+                    style: TextStyle(
+                      fontSize: 16,
+                      fontWeight: FontWeight.w600,
+                      color: isDone
+                          ? Colors.black87
+                          : isActive
+                              ? ColorPalette.primary
+                              : ColorPalette.slate400,
+                    ),
+                  ),
+                ),
+                isDone
+                    ? Row(
+                        children: [
+                          Text(date ?? ''),
+                          const Padding(
+                            padding: EdgeInsets.symmetric(horizontal: 4.0),
+                            child: Icon(
+                              Icons.circle,
+                              size: 6,
+                              color: ColorPalette.slate400,
+                            ),
+                          ),
+                          Text(time ?? ''),
+                        ],
+                      )
+                    : const SizedBox(),
+              ],
+            ),
+          )
+        ],
+      ),
+    );
+  }
+
+  Widget _listProduct(BuildContext context) {
+    TextTheme textTheme = Theme.of(context).textTheme;
+    return Padding(
+      padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
+      child: Column(
+        children: [
+          Row(
+            children: [
+              ImageView(
+                image: PathAssets.imgProduct,
+                width: SizeConfig.width * .1,
+              ),
+              Padding(
+                padding: const EdgeInsets.only(left: 8.0),
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    Text(
+                      'Gemilang Dana Kas Maxima',
+                      style: textTheme.headlineSmall,
+                    ),
+                    Container(
+                        padding: const EdgeInsets.symmetric(
+                            horizontal: 8.0, vertical: 2.0),
+                        decoration: BoxDecoration(
+                          color: ColorPalette.purple100,
+                          border: Border.all(
+                            width: 1,
+                            color: ColorPalette.purple,
+                          ),
+                          borderRadius:
+                              const BorderRadius.all(Radius.circular(24)),
+                        ),
+                        child: const Text(
+                          'Money Market',
+                          style: TextStyle(
+                            color: ColorPalette.purple500,
+                          ),
+                        )),
+                  ],
+                ),
+              ),
+            ],
+          ),
+          Padding(
+            padding: const EdgeInsets.symmetric(vertical: 8.0),
+            child: Row(
+              mainAxisAlignment: MainAxisAlignment.spaceBetween,
+              children: [
+                const Text('Investment Amount'),
+                Text(
+                  'Rp 2.000.000',
+                  style: textTheme.headlineSmall,
+                ),
+              ],
+            ),
+          ),
+          const Divider(
+            color: ColorPalette.slate200,
+          ),
+        ],
+      ),
+    );
+  }
+
+  Widget _cardVA(BuildContext context) {
+    return Container(
+      margin: const EdgeInsets.only(top: 16.0, bottom: 8.0),
+      padding: const EdgeInsets.only(bottom: 16.0),
+      decoration: BoxDecoration(
+        color: Colors.white,
+        border: Border.all(width: 1, color: ColorPalette.slate200),
+        borderRadius: const BorderRadius.all(Radius.circular(12)),
+      ),
+      child: Padding(
+        padding: const EdgeInsets.symmetric(horizontal: 16.0),
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            SizedBox(height: SizeConfig.height * .02),
+            RichText(
+                text: const TextSpan(children: [
+              TextSpan(
+                text: 'Transfer to  ',
+                style: TextStyle(
+                  color: ColorPalette.slate400,
+                  fontWeight: FontWeight.normal,
+                ),
+              ),
+              TextSpan(
+                text: 'ABC Virtual Account',
+                style: TextStyle(
+                  color: ColorPalette.slate800,
+                  fontWeight: FontWeight.bold,
+                ),
+              ),
+            ])),
+            SizedBox(height: SizeConfig.height * .01),
+            const Text(
+              'Ferdy Maulana',
+              style: TextStyle(
+                color: Colors.black87,
+                fontSize: 16,
+              ),
+            ),
+            ListTileView(
+              title: '8785 0000 3165 5512',
+              prefixIcon: const SizedBox(),
+              padding: const EdgeInsets.only(right: 16.0),
+              margin: const EdgeInsets.only(top: 8.0, bottom: 8.0),
+              textStyle: const TextStyle(
+                  fontWeight: FontWeight.bold, color: ColorPalette.primary),
+              suffixIcon: ButtonView(
+                name: 'Copy',
+                width: SizeConfig.width * .3,
+                height: SizeConfig.height * .052,
+                sizeBorderRadius: 8.0,
+                widthPrefix: 8.0,
+                marginVertical: 10.0,
+                prefixIcon: const Icon(
+                  Icons.file_copy_outlined,
+                  color: Colors.white,
+                  size: 20,
+                ),
+                onPressed: () {
+                  StringUtils.iCopyToClipboard(
+                    context,
+                    text: '8785 0000 3165 5512',
+                  );
+                },
+              ),
+            ),
+            const Divider(color: ColorPalette.slate200),
+            const Text(
+              'Amount to be transferred',
+              style: TextStyle(
+                color: Colors.black87,
+                fontSize: 16,
+              ),
+            ),
+            ListTileView(
+              title: 'Rp 10.000.000',
+              prefixIcon: const SizedBox(),
+              padding: const EdgeInsets.only(right: 16.0),
+              margin: const EdgeInsets.only(top: 8.0),
+              textStyle: const TextStyle(
+                  fontWeight: FontWeight.bold, color: ColorPalette.primary),
+              suffixIcon: ButtonView(
+                name: 'Copy',
+                width: SizeConfig.width * .3,
+                height: SizeConfig.height * .052,
+                sizeBorderRadius: 8.0,
+                widthPrefix: 8.0,
+                marginVertical: 10.0,
+                prefixIcon: const Icon(
+                  Icons.file_copy_outlined,
+                  color: Colors.white,
+                  size: 20,
+                ),
+                onPressed: () {
+                  StringUtils.iCopyToClipboard(
+                    context,
+                    text: '10.000.000',
+                  );
+                },
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+
+  Widget _cardContent(BuildContext context) {
+    TextTheme textTheme = Theme.of(context).textTheme;
+    List mySteps = const [
+      {
+        'desc': 'Payment Being Verified',
+        'date': '07 Feb 2024 ',
+        'time': '21:01',
+        'isActive': false,
+        'isDone': true,
+        'isLast': false,
+      },
+      {
+        'desc': 'Successful Payment',
+        'date': '07 Feb 2024 ',
+        'time': '21:01',
+        'isActive': true,
+        'isDone': false,
+        'isLast': false,
+      },
+      {
+        'desc': 'Investment Manager Verification',
+        'date': '07 Feb 2024 ',
+        'time': '21:01',
+        'isActive': false,
+        'isDone': false,
+        'isLast': false,
+      },
+      {
+        'desc': 'Successful Purchase',
+        'date': '07 Feb 2024 ',
+        'time': '21:01',
+        'isActive': false,
+        'isDone': false,
+        'isLast': true,
+      },
+    ];
+
+    return SingleChildScrollView(
+      padding: const EdgeInsets.symmetric(horizontal: 16.0),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Row(
+            mainAxisAlignment: MainAxisAlignment.center,
+            children: [
+              const Icon(Icons.access_time, color: ColorPalette.slate400),
+              const Padding(
+                padding: EdgeInsets.symmetric(horizontal: 8.0),
+                child: Text('Waiting for Payment'),
+              ),
+              Text('23:56:42', style: textTheme.headlineSmall),
+            ],
+          ),
+          type == 'virtual' ? _cardVA(context) : const SizedBox(),
+          Padding(
+            padding: const EdgeInsets.symmetric(vertical: 16.0),
+            child: Text('Purchase Details', style: textTheme.headlineSmall),
+          ),
+          Container(
+            margin: const EdgeInsets.symmetric(vertical: 8.0),
+            padding: const EdgeInsets.only(bottom: 16.0),
+            decoration: BoxDecoration(
+              color: Colors.white,
+              border: Border.all(width: 1, color: ColorPalette.slate200),
+              borderRadius: const BorderRadius.all(Radius.circular(12)),
+            ),
+            child: ExpansionTile(
+              shape: ShapeBorder.lerp(
+                  const StadiumBorder(side: BorderSide.none),
+                  InputBorder.none,
+                  0),
+              title: Row(
+                children: [
+                  ImageView(
+                    image: PathAssets.iconEducation,
+                    width: SizeConfig.width * .08,
+                  ),
+                  const Padding(
+                    padding: EdgeInsets.only(left: 8.0),
+                    child: Text('Education'),
+                  ),
+                ],
+              ),
+              subtitle: Padding(
+                padding: const EdgeInsets.only(left: 40.0),
+                child: Text('3 Subscriptions', style: textTheme.bodyMedium),
+              ),
+              children: [
+                _listProduct(context),
+                _listProduct(context),
+              ],
+            ),
+          ),
+          ...mySteps.map((e) {
+            return _stepper(
+              textTheme,
+              description: '${e['desc']}',
+              date: e['date'],
+              time: e['time'],
+              isActive: e['isActive'],
+              isDone: e['isDone'],
+              isLast: e['isLast'],
+            );
+          }),
+          Container(
+              margin: const EdgeInsets.symmetric(vertical: 8.0),
+              // padding: const EdgeInsets.only(bottom: 16.0),
+              decoration: BoxDecoration(
+                color: Colors.white,
+                border: Border.all(width: 1, color: ColorPalette.slate200),
+                borderRadius: const BorderRadius.all(Radius.circular(12)),
+              ),
+              child: ExpansionTile(
+                  shape: ShapeBorder.lerp(
+                      const StadiumBorder(side: BorderSide.none),
+                      InputBorder.none,
+                      0),
+                  title: Row(
+                    children: [
+                      const Expanded(
+                          child: Text('When Is My Purchase Complete?')),
+                      ImageView(
+                        image: PathAssets.imgExpandPurchase,
+                        width: SizeConfig.width * .15,
+                      ),
+                    ],
+                  ))),
+        ],
+      ),
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      body: SizedBox(
+        child: Stack(
+          children: [
+            const ImageView(image: PathAssets.imgDashboardAccount),
+            Column(
+              children: [
+                SizedBox(height: SizeConfig.height * .05),
+                Padding(
+                  padding: const EdgeInsets.all(16.0),
+                  child: Row(
+                    mainAxisAlignment: MainAxisAlignment.start,
+                    children: [
+                      BackButtonView(
+                        onPress: () => Navigator.pop(context),
+                      ),
+                      const Padding(
+                        padding: EdgeInsets.symmetric(horizontal: 80.0),
+                        child: Text(
+                          'Subscribe Detail',
+                          style: TextStyle(
+                            fontSize: 18,
+                            color: Colors.white,
+                            fontWeight: FontWeight.bold,
+                          ),
+                        ),
+                      ),
+                    ],
+                  ),
+                ),
+                type == 'virtual'
+                    ? const Padding(
+                        padding: EdgeInsets.only(bottom: 8.0),
+                        child: Text(
+                          'Virtual Account',
+                          style: TextStyle(
+                            color: Colors.white,
+                            fontSize: 16,
+                          ),
+                        ),
+                      )
+                    : const SizedBox(),
+                Row(
+                  mainAxisAlignment: MainAxisAlignment.center,
+                  children: [
+                    ImageView(
+                      image: PathAssets.imgProduct,
+                      width: SizeConfig.width * .08,
+                    ),
+                    Padding(
+                      padding: const EdgeInsets.only(left: 8.0),
+                      child: Text(
+                        type == 'virtual' ? 'ABC' : 'Shopping Pay',
+                        style: const TextStyle(
+                          fontWeight: FontWeight.bold,
+                          color: Colors.white,
+                        ),
+                      ),
+                    ),
+                  ],
+                ),
+                const Padding(
+                  padding: EdgeInsets.only(top: 8.0),
+                  child: Row(
+                    mainAxisAlignment: MainAxisAlignment.center,
+                    children: [
+                      Text(
+                        'No.Subscribe : ',
+                        style: TextStyle(
+                          fontWeight: FontWeight.normal,
+                          color: Colors.white,
+                        ),
+                      ),
+                      Text(
+                        'PI9393084SDMI1',
+                        style: TextStyle(
+                          fontWeight: FontWeight.bold,
+                          color: Colors.white,
+                        ),
+                      ),
+                    ],
+                  ),
+                ),
+                Expanded(
+                  child: Container(
+                    color: Colors.transparent,
+                    width: SizeConfig.width,
+                    padding: const EdgeInsets.only(top: 16.0),
+                    child: Container(
+                        margin: const EdgeInsets.only(top: 32.0),
+                        padding: const EdgeInsets.only(top: 32.0),
+                        decoration: const BoxDecoration(
+                          color: Colors.white,
+                          borderRadius: BorderRadius.only(
+                              topLeft: Radius.circular(24),
+                              topRight: Radius.circular(24)),
+                        ),
+                        child: _cardContent(context)),
+                  ),
+                ),
+              ],
+            )
+          ],
+        ),
+      ),
+    );
+  }
+}

lib/features/transaction/view/transaction_view.dart

@@ -1,15 +1,124 @@
-import 'package:cims_apps/application/component/custom_app_bar/custom_app_bar.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/theme/color_palette.dart';
 import 'package:cims_apps/core/utils/size_config.dart';
+import 'package:cims_apps/features/transaction/view/cancel_view.dart';
+import 'package:cims_apps/features/transaction/view/done_view.dart';
+import 'package:cims_apps/features/transaction/view/onprocess_view.dart';
+import 'package:cims_apps/features/transaction/view/waiting_view.dart';
+import 'package:cims_apps/features/transaction/viewmodel/transaction_viewmodel.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter_toggle_tab/flutter_toggle_tab.dart';
+import 'package:provider/provider.dart';
 
 class TransactionView extends StatelessWidget {
   const TransactionView({Key? key}) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
+    List<Tab> textTabs = const [
+      Tab(text: 'Waiting'),
+      Tab(text: 'On process'),
+      Tab(text: 'Done'),
+      Tab(text: 'Cancel'),
+    ];
+    List<Widget> listTabBarView = const [
+      WaitingView(),
+      OnProcessView(),
+      DoneView(),
+      CancelView(),
+    ];
+
+    return ChangeNotifierProvider(
+        create: (context) => TransactionViewModel(),
+        builder: (context, child) {
           return Scaffold(
-      appBar:
-          CustomAppBar(height: SizeConfig.height * .1, title: 'Transaction'),
+            backgroundColor: ColorPalette.primary,
+            body: SizedBox(
+              child: Stack(
+                children: [
+                  const ImageView(image: PathAssets.imgDashboardAccount),
+                  Column(
+                    children: [
+                      SizedBox(
+                        height: SizeConfig.height * .05,
+                      ),
+                      const Center(
+                        child: Text(
+                          'Transaction',
+                          style: TextStyle(
+                              fontSize: 20,
+                              fontWeight: FontWeight.w700,
+                              color: Colors.white),
+                        ),
+                      ),
+                      SizedBox(
+                        height: SizeConfig.height * .04,
+                      ),
+                      Container(
+                        margin: const EdgeInsets.symmetric(horizontal: 24),
+                        child: FlutterToggleTab(
+                          height: SizeConfig.height * .065,
+                          width: SizeConfig.width * .2,
+                          marginSelected: const EdgeInsets.all(8.0),
+                          isScroll: false,
+                          selectedTextStyle: const TextStyle(
+                            color: ColorPalette.primary,
+                            fontWeight: FontWeight.w700,
+                          ),
+                          unSelectedTextStyle: const TextStyle(
+                            color: ColorPalette.blackFont,
+                            fontWeight: FontWeight.w700,
+                          ),
+                          unSelectedBackgroundColors: const [
+                            ColorPalette.blue50
+                          ],
+                          selectedBackgroundColors: const [ColorPalette.white],
+                          labels: const ['Subscribe', 'Reedem'],
+                          selectedLabelIndex: (p0) {},
+                          selectedIndex: 0,
+                        ),
+                      ),
+                      Expanded(
+                          child: DefaultTabController(
+                        length: textTabs.length,
+                        child: Container(
+                          color: Colors.transparent,
+                          padding: const EdgeInsets.only(top: 32.0),
+                          child: Container(
+                            margin: const EdgeInsets.only(top: 24),
+                            padding: const EdgeInsets.only(top: 16.0),
+                            decoration: const BoxDecoration(
+                              color: Colors.white,
+                              borderRadius: BorderRadius.only(
+                                  topLeft: Radius.circular(24),
+                                  topRight: Radius.circular(24)),
+                            ),
+                            child: Column(
+                              children: [
+                                TabBar(
+                                  tabs: textTabs,
+                                  indicatorColor: Colors.blueAccent,
+                                ),
+                                Expanded(
+                                    child: Padding(
+                                  padding: const EdgeInsets.symmetric(
+                                    horizontal: 16.0,
+                                    vertical: 4.0,
+                                  ),
+                                  child: TabBarView(children: listTabBarView),
+                                ))
+                              ],
+                            ),
+                          ),
+                        ),
+                      )),
+                    ],
+                  )
+                ],
+              ),
+            ),
           );
+        });
   }
 }

lib/features/transaction/view/waiting_view.dart

@@ -0,0 +1,49 @@
+import 'package:cims_apps/application/assets/path_assets.dart';
+import 'package:cims_apps/application/component/card_transaction/card_transaction_view.dart';
+import 'package:cims_apps/application/component/card_transaction/empty_card_transaction.dart';
+import 'package:cims_apps/core/route/route.dart';
+import 'package:cims_apps/core/utils/number_formatter.dart';
+import 'package:cims_apps/core/utils/string_utils.dart';
+import 'package:cims_apps/features/transaction/view/subscribe_detail_view.dart';
+import 'package:cims_apps/features/transaction/viewmodel/transaction_viewmodel.dart';
+import 'package:flutter/material.dart';
+import 'package:provider/provider.dart';
+
+class WaitingView extends StatelessWidget {
+  const WaitingView({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return SingleChildScrollView(
+      child:
+          Consumer<TransactionViewModel>(builder: (context, provider, child) {
+        return Column(
+          children: [
+            provider.listWaitingTransaction.isNotEmpty
+                ? CardTransactionView(
+                    onTap: () {
+                      routePush(context,
+                          page: const SubscribeDetailView(
+                            type: 'normal',
+                          ));
+                    },
+                    iconPath: PathAssets.iconEducation,
+                    type: 'Education',
+                    amount: NumberFormatter.numberCurrency(
+                      6000000,
+                      'Rp ',
+                      'id_ID',
+                      decimalDigits: 0,
+                    ),
+                    timeTransaction: StringUtils.formatTime(DateTime.now()),
+                    subs: '3 Subscription',
+                    step: 'waiting')
+                : EmptyCardTransaction(
+                    onPressedButton: () {},
+                  ),
+          ],
+        );
+      }),
+    );
+  }
+}

lib/features/transaction/viewmodel/transaction_viewmodel.dart

@@ -0,0 +1,8 @@
+import 'package:flutter/material.dart';
+
+class TransactionViewModel extends ChangeNotifier {
+  List listWaitingTransaction = [1];
+  List listOnProcessTransaction = [1];
+  List listDoneTransaction = [];
+  List listCancelTransaction = [];
+}

lib/main.dart

@@ -76,10 +76,8 @@ class MyApp extends StatelessWidget {
             secondary: const Color(0xFFFECDA6),
             onBackground: const Color(0xFFA9A9A9),
           ),
-        bottomSheetTheme: BottomSheetThemeData(
-          backgroundColor: Colors.white,
-          surfaceTintColor: Colors.white
-        )
+          bottomSheetTheme: const BottomSheetThemeData(
+              backgroundColor: Colors.white, surfaceTintColor: Colors.white)
           // useMaterial3: true,
           ),
       initialRoute: initialRoute,

pubspec.lock

@@ -259,6 +259,14 @@ packages:
     description: flutter
     source: sdk
     version: "0.0.0"
+  flutter_toggle_tab:
+    dependency: "direct main"
+    description:
+      name: flutter_toggle_tab
+      sha256: "90ad0d050f656df677998825f985637d010117a1793828cd7e6dadada4ecd2c5"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.4.1"
   flutter_web_plugins:
     dependency: transitive
     description: flutter
@@ -681,18 +689,18 @@ packages:
     dependency: transitive
     description:
       name: syncfusion_flutter_core
-      sha256: "4eed0d3ae50c16b5e8e4957f3c1917e9bd0315a08dfb49a104ca8fc10244bef3"
+      sha256: "9f98e2726af42967497eaef68f3373261700bbfcd33bd97da4ec85cb56fcdaf7"
       url: "https://pub.dev"
     source: hosted
-    version: "24.2.6"
+    version: "24.2.7"
   syncfusion_flutter_signaturepad:
     dependency: "direct main"
     description:
       name: syncfusion_flutter_signaturepad
-      sha256: da55bd7d796f2c9b4707f3e063e443f67c355c6098002e446bbf43672952916e
+      sha256: d51d5e346c70b938a8e1f2318a073213172aea7b99e33073c379657b1066c001
       url: "https://pub.dev"
     source: hosted
-    version: "24.2.6"
+    version: "24.2.7"
   synchronized:
     dependency: transitive
     description:

pubspec.yaml

@@ -53,6 +53,7 @@ dependencies:
   shared_preferences: ^2.2.2
   calendar_date_picker2: ^0.5.3
   google_sign_in: ^6.2.1
+  flutter_toggle_tab: ^1.4.1