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

Reviewed-on: #4

android/app/build.gradle

@@ -45,7 +45,7 @@ android {
         applicationId "com.example.cims_apps"
         // You can update the following values to match your application needs.
         // For more information, see: https://docs.flutter.dev/deployment/android#reviewing-the-gradle-build-configuration.
-        minSdkVersion flutter.minSdkVersion
+        minSdkVersion 21
         targetSdkVersion flutter.targetSdkVersion
         versionCode flutterVersionCode.toInteger()
         versionName flutterVersionName

android/app/src/main/AndroidManifest.xml

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

lib/application/assets/path_assets.dart

@@ -1,7 +1,7 @@
 class PathAssets {
   PathAssets._();
 
-  /// LOGO
+  /// ICON
   static const String iconSplashRight = 'assets/icons/splash-right.png';
   static const String iconSplashLeft = 'assets/icons/splash-left.png';
   static const String iconReksadana = 'assets/icons/icon-reksadana.png';
@@ -10,6 +10,24 @@ class PathAssets {
   static const String iconGoogle = 'assets/icons/icon-google.png';
   static const String icon1 = 'assets/icons/icon-1.png';
   static const String iconConnect = 'assets/icons/icon-connect.png';
+  static const String iconPortofolioBonds =
+      'assets/icons/icon-portofolio-bonds.png';
+  static const String iconPortofolioShares =
+      'assets/icons/icon-portofolio-shares.png';
+  static const String iconPortofolioSharia =
+      'assets/icons/icon-portofolio-sharia.png';
+  static const String iconPortofolioMoneyMarket =
+      'assets/icons/icon-portofolio-moneymarket.png';
+  static const String iconShield = 'assets/icons/icon-shield.png';
+  static const String iconFlag = 'assets/icons/icon-flag.png';
+  static const String iconKtp1 = 'assets/icons/icon-ktp1.png';
+  static const String iconKtp2 = 'assets/icons/icon-ktp2.png';
+  static const String iconKtp3 = 'assets/icons/icon-ktp3.png';
+  static const String iconKtp4 = 'assets/icons/icon-ktp4.png';
+  static const String iconSelfie1 = 'assets/icons/icon-selfie1.png';
+  static const String iconSelfie2 = 'assets/icons/icon-selfie2.png';
+  static const String iconSelfie3 = 'assets/icons/icon-selfie3.png';
+  static const String iconSelfie4 = 'assets/icons/icon-selfie4.png';
 
   /// IMAGE
   static const String imgSplashLogo = 'assets/images/splash-logo.png';
@@ -22,4 +40,12 @@ class PathAssets {
   static const String imgKtpCropped = 'assets/images/img-ktp-cropped.png';
   static const String imgKtpClear = 'assets/images/img-ktp-clear.png';
   static const String imgKtpBlur = 'assets/images/img-ktp-blur.png';
+  static const String imgDashboardAccount =
+      'assets/images/img-dashboard-account.png';
+  static const String imgCarousel = 'assets/images/img-carousel.png';
+  static const String imgArticles = 'assets/images/img-articles.png';
+  static const String imgProduct = 'assets/images/img-product.png';
+  static const String imgSuccessSignup = 'assets/images/img-success-signup.png';
+  static const String imgBgKtp = 'assets/images/img-bg-photo-ktp.png';
+  static const String imgBgSelfie = 'assets/images/img-bg-photo-selfie.png';
 }

lib/application/component/button/button_back.dart

@@ -0,0 +1,23 @@
+import 'package:cims_apps/core/utils/size_config.dart';
+import 'package:flutter/material.dart';
+
+class ButtonBack extends StatelessWidget {
+  const ButtonBack({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return SizedBox(
+      width: SizeConfig.width * 0.1,
+      child: IconButton(
+          style: IconButton.styleFrom(
+              backgroundColor: Colors.white,
+              shape: const CircleBorder()
+          ),
+          onPressed: () {
+            Navigator.pop(context);
+          },
+          icon: const Icon(Icons.arrow_back)
+      ),
+    );
+  }
+}

lib/application/component/button/button_view.dart

@@ -9,13 +9,14 @@ class ButtonView extends StatelessWidget {
   final double? height, width, widthSuffix, widthPrefix, marginVertical;
   final EdgeInsetsGeometry? contentPadding;
   final bool isSecondaryColor, isOutlined, heightWrapContent, disabled;
-  final Color? backgroundColor, textColor;
+  final Color? backgroundColor, textColor, borderColor;
   final MainAxisAlignment? mainAxisAlignmentContent;
   // final _widthBtn = SizeConfig.screenWidth / 1.5;
   final _widthBtn = SizeConfig.width * .9;
   // final _heightBtn = SizeConfig.screenHeight / 12;
   final _heightBtn = SizeConfig.height * .07;
   final FontWeight textWeight;
+  final TextAlign textAlign;
   final double? textSize, sizeBorderRadius;
   final int? maxLines;
 
@@ -31,9 +32,11 @@ class ButtonView extends StatelessWidget {
       this.width,
       this.contentPadding,
       this.backgroundColor,
+      this.borderColor,
       this.textColor,
       this.textWeight = FontWeight.bold,
       this.textSize,
+      this.textAlign = TextAlign.center,
       this.mainAxisAlignmentContent,
       this.disabled = false,
       this.heightWrapContent = false,
@@ -55,78 +58,80 @@ class ButtonView extends StatelessWidget {
     final widthPrefix =
         this.widthPrefix ?? (heightWrapContent ? width! / 4.7 : _widthBtn / 16);
 
-    return Container(
+    return Center(
-      margin: EdgeInsets.symmetric(vertical: marginVertical ?? 32.0),
+      child: Container(
-      width: width ?? _widthBtn,
+        margin: EdgeInsets.symmetric(vertical: marginVertical ?? 24.0),
-      height: heightWrapContent ? null : height ?? _heightBtn,
+        width: width ?? _widthBtn,
-      child: ElevatedButton(
+        height: heightWrapContent ? null : height ?? _heightBtn,
-        style: ElevatedButton.styleFrom(
+        child: ElevatedButton(
-          disabledBackgroundColor: isOutlined ? Colors.white : color.surface,
+          style: ElevatedButton.styleFrom(
-          padding: contentPadding,
+            disabledBackgroundColor: isOutlined ? Colors.white : color.surface,
-          backgroundColor: backgroundColor ??
+            padding: contentPadding,
-              (isOutlined
+            backgroundColor: backgroundColor ??
-                  ? Colors.white
+                (isOutlined
-                  : isSecondaryColor
+                    ? Colors.white
-                      ? ColorPalette.grey
+                    : isSecondaryColor
-                      : ColorPalette.primary),
+                        ? ColorPalette.grey
-          elevation: 0,
+                        : ColorPalette.primary),
-          shape: RoundedRectangleBorder(
+            elevation: 0,
-            borderRadius: BorderRadius.circular(sizeBorderRadius ?? 48),
+            shape: RoundedRectangleBorder(
-            side: isOutlined
+              borderRadius: BorderRadius.circular(sizeBorderRadius ?? 48),
-                ? BorderSide(
+              side: isOutlined
-                    color: disabled
+                  ? BorderSide(
-                        ? color.surface
+                      color: borderColor ?? (disabled
-                        : isSecondaryColor
+                          ? color.surface
-                            ? ColorPalette.greyBorder
+                          : isSecondaryColor
-                            : ColorPalette.primary,
+                          ? ColorPalette.greyBorder
-                  )
+                          : ColorPalette.primary),
-                : BorderSide.none,
+                    )
+                  : BorderSide.none,
+            ),
           ),
-        ),
+          onPressed: disabled ? null : onPressed,
-        onPressed: disabled ? null : onPressed,
+          child: Row(
-        child: Row(
+            mainAxisAlignment: mainAxisAlignmentContent ??
-          mainAxisAlignment: mainAxisAlignmentContent ??
+                (prefixIcon != null
-              (prefixIcon != null
+                    ? MainAxisAlignment.center
-                  ? MainAxisAlignment.center
+                    : suffixIcon != null
-                  : suffixIcon != null
+                        ? MainAxisAlignment.end
-                      ? MainAxisAlignment.end
+                        : MainAxisAlignment.center),
-                      : MainAxisAlignment.center),
+            children: [
-          children: [
+              if (prefixIcon != null) ...[
-            if (prefixIcon != null) ...[
+                prefixIcon!,
-              prefixIcon!,
+                SizedBox(width: widthPrefix),
-              SizedBox(width: widthPrefix),
+              ] else
-            ] else
+                Container(),
-              Container(),
+              Flexible(
-            Flexible(
+                child: Text(
-              child: Text(
+                  name,
-                name,
+                  textAlign: textAlign,
-                textAlign: TextAlign.center,
+                  maxLines: maxLines,
-                maxLines: maxLines,
+                  overflow: TextOverflow.ellipsis,
-                overflow: TextOverflow.ellipsis,
+                  style: TextStyle(
-                style: TextStyle(
+                    fontSize: textSize ?? 16,
-                  fontSize: textSize ?? 16,
+                    fontWeight: textWeight,
-                  fontWeight: textWeight,
+                    color: textColor ??
-                  color: textColor ??
+                        (disabled && isOutlined
-                      (disabled && isOutlined
+                            ? color.primary
-                          ? color.primary
+                            : disabled
-                          : disabled
+                                ? Colors.white
-                              ? Colors.white
+                                : isOutlined && isSecondaryColor
-                              : isOutlined && isSecondaryColor
+                                    ? ColorPalette.blackFont
-                                  ? ColorPalette.blackFont
+                                    : isOutlined
-                                  : isOutlined
+                                        ? color.primary
-                                      ? color.primary
+                                        : isSecondaryColor
-                                      : isSecondaryColor
+                                            ? Colors.white
-                                          ? Colors.white
+                                            : Colors.white),
-                                          : Colors.white),
+                  ),
                 ),
               ),
-            ),
+              if (suffixIcon != null) ...[
-            if (suffixIcon != null) ...[
+                SizedBox(width: widthSuffix),
-              SizedBox(width: widthSuffix),
+                suffixIcon!
-              suffixIcon!
+              ] else
-            ] else
+                Container()
-              Container()
+            ],
-          ],
+          ),
         ),
       ),
     );

lib/application/component/otp/otp_view.dart

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

lib/application/component/otp/otp_viewmodel.dart

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

lib/application/component/select_form/select_form_view.dart

@@ -0,0 +1,176 @@
+import 'package:cims_apps/application/component/button/button_view.dart';
+import 'package:cims_apps/application/component/text_form/text_form_view.dart';
+import 'package:cims_apps/application/theme/color_palette.dart';
+import 'package:cims_apps/core/utils/size_config.dart';
+import 'package:flutter/material.dart';
+
+class ItemSelectForm {
+  final String key;
+  final String text;
+  final String? description;
+  final bool isOther;
+  final String image;
+
+  ItemSelectForm(
+    this.key,
+    this.text, {
+    this.isOther = false,
+    this.image = "",
+    this.description,
+  });
+}
+
+class SelectFormView extends StatelessWidget {
+  final String name;
+  final String? hintText;
+  final TextStyle? hintTextStyle;
+  final TextEditingController? ctrl;
+  final Widget? bottomSheetTitle;
+  final List<ItemSelectForm> listItem;
+  final ValueChanged<String> onSelect;
+  final FormFieldValidator<String>? validator;
+  final _borderRadius = const Radius.circular(24);
+  final bool? enabled;
+  const SelectFormView(
+      {Key? key,
+      required this.name,
+      this.hintText,
+      this.hintTextStyle,
+      this.ctrl,
+      this.bottomSheetTitle,
+      required this.listItem,
+      required this.onSelect,
+      this.validator,
+      this.enabled})
+      : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    bottomSheet() {
+      showModalBottomSheet<void>(
+        context: context,
+        shape: RoundedRectangleBorder(
+          borderRadius: BorderRadius.only(
+            topLeft: _borderRadius,
+            topRight: _borderRadius,
+          ),
+        ),
+        builder: (BuildContext context) {
+          ItemSelectForm? selectedForm;
+          String? selectedKey;
+          if (listItem.isNotEmpty) {
+            var res = listItem.where((element) => element.key == selectedKey);
+            if (res.isNotEmpty) {
+              selectedForm = res.first;
+            }
+          }
+          return StatefulBuilder(builder: (
+            BuildContext context,
+            StateSetter stateSetter,
+          ) {
+            return Container(
+              height: SizeConfig.height * .45,
+              padding: const EdgeInsets.all(16),
+              child: Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  bottomSheetTitle ?? Container(),
+                  // const SizedBox(height: 16),
+                  Expanded(
+                    child: SingleChildScrollView(
+                      scrollDirection: Axis.vertical,
+                      child: Column(
+                        children: [
+                          ...listItem.map(
+                            (e) => Card(
+                              elevation: 0,
+                              color: Colors.transparent,
+                              shape: const RoundedRectangleBorder(
+                                side: BorderSide(
+                                  color: ColorPalette.greyBorder,
+                                ),
+                                borderRadius:
+                                    BorderRadius.all(Radius.circular(12)),
+                              ),
+                              child: ListTile(
+                                title: Text(
+                                  e.text,
+                                  style: const TextStyle(
+                                    fontSize: 14,
+                                  ),
+                                ),
+                                subtitle: e.description != null
+                                    ? Text(
+                                        e.description!,
+                                        maxLines: 2,
+                                        overflow: TextOverflow.ellipsis,
+                                      )
+                                    : null,
+                                // trailing: const Icon(
+                                //   Icons.check_circle,
+                                //   color: ColorPalette.primary,
+                                // ),
+                                trailing: Radio(
+                                  focusColor: ColorPalette.primary,
+                                  activeColor: ColorPalette.primary,
+                                  visualDensity: const VisualDensity(
+                                    horizontal: VisualDensity.minimumDensity,
+                                    vertical: VisualDensity.minimumDensity,
+                                  ),
+                                  materialTapTargetSize:
+                                      MaterialTapTargetSize.shrinkWrap,
+                                  value: e.key,
+                                  groupValue: selectedKey,
+                                  onChanged: (value) {
+                                    // selectedForm =
+                                    //     ItemSelectForm(e.key, e.text);
+                                    // stateSetter(() {
+                                    //   selectedKey = selectedForm!.key;
+                                    // });
+                                  },
+                                ),
+                                onTap: () {
+                                  ctrl?.text = e.text;
+                                  onSelect(e.key);
+                                  Navigator.of(context).pop();
+                                },
+                              ),
+                            ),
+                          ),
+                        ],
+                      ),
+                    ),
+                  ),
+                  ButtonView(
+                    name: 'Select',
+                    marginVertical: 4.0,
+                    onPressed: () {
+                      // print('object $')
+                    },
+                  )
+                ],
+              ),
+            );
+          });
+        },
+      );
+    }
+
+    return TextFormView(
+      name: name,
+      readOnly: true,
+      enabled: enabled ?? true,
+      onTap: () {
+        if (listItem.isNotEmpty) bottomSheet();
+      },
+      validator: validator,
+      hintText: hintText,
+      hintTextStyle: hintTextStyle,
+      ctrl: ctrl,
+      suffixIcon: Icon(
+        Icons.keyboard_arrow_down,
+        size: SizeConfig.width * .07,
+      ),
+    );
+  }
+}

lib/application/component/take_picture_screen/DisplayPictureScreen.dart

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

lib/application/component/take_picture_screen/take_picture_screen.dart

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

lib/application/component/text_caption/text_caption.dart

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

lib/application/component/text_form/text_form_view.dart

@@ -14,7 +14,7 @@ class TextFormView extends StatelessWidget {
   final String? hintText, errorText;
   final TextEditingController? ctrl;
   final Widget? suffixIcon, suffixLable;
-  final Widget? prefixIcon;
+  final Widget? prefixIcon, prefix;
   final TextInputType? keyboardType;
   final FormFieldValidator<String>? validator;
   final bool obscureText;
@@ -70,7 +70,8 @@ class TextFormView extends StatelessWidget {
       this.disableColor = false,
       this.enableInteractiveSelection = true,
       this.focusNode,
-      this.isTextAlignCenter = false})
+      this.isTextAlignCenter = false,
+      this.prefix})
       : super(key: key);
 
   @override
@@ -94,12 +95,12 @@ class TextFormView extends StatelessWidget {
                             name,
                             style: const TextStyle(
                               fontSize: 16,
-                              color: ColorPalette.greyLight,
+                              // color: ColorPalette.greyLight,
                             ),
                           ),
                           suffixLable ??
                               const Text(
-                                " * ",
+                                "",
                                 style: TextStyle(
                                   fontSize: 16,
                                   color: Colors.red,
@@ -126,7 +127,7 @@ class TextFormView extends StatelessWidget {
           initialValue: initialValue,
           enabled: enabled,
           controller: ctrl,
-          // maxLength: maxLength,
+          maxLength: maxLength,
           keyboardType: keyboardType,
           onTap: onTap,
           onEditingComplete: onSubmit,
@@ -148,46 +149,50 @@ class TextFormView extends StatelessWidget {
           enableInteractiveSelection: enableInteractiveSelection,
           textAlign: isTextAlignCenter ? TextAlign.center : TextAlign.left,
           decoration: InputDecoration(
-            helperText: helperText,
+              helperText: helperText,
-            errorStyle: errorStyle,
+              errorStyle: errorStyle,
-            errorText: errorText,
+              errorText: errorText,
-            errorMaxLines: 2,
+              errorMaxLines: 2,
-            hintStyle: hintTextStyle ??
+              hintStyle: hintTextStyle ??
-                const TextStyle(
+                  const TextStyle(
-                  fontSize: 14,
+                    fontSize: 14,
-                  color: Colors.grey,
+                    color: ColorPalette.greyFont,
-                  fontWeight: FontWeight.normal,
+                    fontWeight: FontWeight.normal,
+                  ),
+              isDense: true,
+              hintText: hintText,
+              filled: true,
+              fillColor: enabled && disableColor == false
+                  ? Colors.white
+                  : const Color.fromARGB(255, 233, 236, 239),
+              disabledBorder: OutlineInputBorder(
+                borderRadius: _borderRadius,
+                borderSide: BorderSide(
+                  color: disabledborderColor ?? ColorPalette.greyBorder,
                 ),
-            isDense: true,
-            hintText: hintText,
-            filled: true,
-            fillColor: enabled && disableColor == false
-                ? Colors.white
-                : const Color.fromARGB(255, 233, 236, 239),
-            disabledBorder: OutlineInputBorder(
-              borderRadius: _borderRadius,
-              borderSide: BorderSide(
-                color: disabledborderColor ?? ColorPalette.greyFont,
               ),
-            ),
+              enabledBorder: OutlineInputBorder(
-            enabledBorder: OutlineInputBorder(
+                borderRadius: _borderRadius,
-              borderRadius: _borderRadius,
+                borderSide: BorderSide(
-              borderSide: BorderSide(
+                  color: enabledborderColor ?? ColorPalette.greyBorder,
-                color: enabledborderColor ?? ColorPalette.greyBase,
+                ),
               ),
-            ),
+              focusedBorder: OutlineInputBorder(
-            focusedBorder: OutlineInputBorder(
+                borderRadius: _borderRadius,
-              borderRadius: _borderRadius,
+                borderSide: BorderSide(
-              borderSide: BorderSide(
+                  color: focusedBorderColor ?? ColorPalette.greyBorder,
-                color: focusedBorderColor ?? ColorPalette.greyBase,
+                ),
               ),
-            ),
+              border: OutlineInputBorder(borderRadius: _borderRadius),
-            border: OutlineInputBorder(borderRadius: _borderRadius),
+              suffixIcon: suffixIcon,
-            suffixIcon: suffixIcon,
+              prefixIcon: prefixIcon,
-            prefixIcon: prefixIcon,
+              suffixIconConstraints: suffixIconConstraints,
-            suffixIconConstraints: suffixIconConstraints,
+              prefixIconConstraints: preffixIconConstraints,
-            prefixIconConstraints: preffixIconConstraints,
+              prefix: prefix,
-          ),
+              contentPadding: const EdgeInsets.symmetric(
+                horizontal: 8.0,
+                vertical: 16.0,
+              )),
         )
       ],
     );

lib/application/component/text_title/text_title.dart

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

lib/application/theme/color_palette.dart

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

lib/core/utils/date_formatter.dart

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

lib/core/utils/number_formatter.dart

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

lib/core/utils/string_utils.dart

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

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

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

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

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

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

@@ -1,9 +1,14 @@
 import 'package:cims_apps/application/component/button/button_view.dart';
 import 'package:cims_apps/application/theme/color_palette.dart';
+import 'package:cims_apps/core/route/route.dart';
 import 'package:cims_apps/core/utils/size_config.dart';
+import 'package:cims_apps/features/auth/registration/view/submission_data/submit_photo_ktp.dart';
 import 'package:cims_apps/features/auth/registration/view/submission_data/submit_email.dart';
 import 'package:cims_apps/features/auth/registration/view/submission_data/submit_personal_data.dart';
+import 'package:cims_apps/features/auth/registration/viewmodel/submission_data_viewmodel.dart';
+import 'package:cims_apps/features/bottom_navigation_view.dart';
 import 'package:flutter/material.dart';
+import 'package:provider/provider.dart';
 
 class SubmissionParent extends StatefulWidget {
   static const routeName = '/SubmissionParent';
@@ -14,29 +19,16 @@ class SubmissionParent extends StatefulWidget {
 }
 
 class _SubmissionParentState extends State<SubmissionParent> {
-  int _currentStep = 1;
-  final int _stepAmount = 9;
   Widget _stepItem({bool isCurrentStep = false, bool isDone = false}) {
-    return GestureDetector(
+    return Container(
-      onTap: () {
+      margin: const EdgeInsets.only(right: 4.0, left: 4.0),
-        setState(() {
+      height: 6,
-          if (_currentStep > 1) {
+      width: SizeConfig.width * .08,
-            _currentStep--;
+      decoration: BoxDecoration(
-          } else if (_currentStep == 1) {
+        color: isCurrentStep || isDone
-            _currentStep++;
+            ? ColorPalette.primary
-          }
+            : ColorPalette.greyBorderNeutrals,
-        });
+        borderRadius: BorderRadius.circular(50),
-      },
-      child: Container(
-        margin: const EdgeInsets.only(right: 4.0, left: 4.0),
-        height: 6,
-        width: SizeConfig.width * .08,
-        decoration: BoxDecoration(
-          color: isCurrentStep || isDone
-              ? ColorPalette.primary
-              : ColorPalette.greyBorderNeutrals,
-          borderRadius: BorderRadius.circular(50),
-        ),
       ),
     );
   }
@@ -48,9 +40,7 @@ class _SubmissionParentState extends State<SubmissionParent> {
       case 2:
         return const SubmitEmail();
       case 3:
-        return Container(
+        return const SubmitPhotoKtp();
-          child: Text("Step 3"),
-        );
       case 4:
         return Container(
           child: Text("Step 4"),
@@ -80,48 +70,68 @@ class _SubmissionParentState extends State<SubmissionParent> {
 
   @override
   Widget build(BuildContext context) {
-    return Scaffold(
+    return ChangeNotifierProvider(
-      appBar: AppBar(
+        create: (context) => SubmissionDataViewModel(),
-        title: const Text('Registration'),
+        builder: (context, child) {
-      ),
+          return WillPopScope(
-      body: Stack(
+            onWillPop: () async {
-        children: [
+              await routePush(context,
-          Column(
+                  page: const BottomNavigationView(),
-            crossAxisAlignment: CrossAxisAlignment.start,
+                  routeType: RouteType.pushReplace);
-            children: [
+              return false;
-              Padding(
+            },
-                padding: const EdgeInsets.symmetric(
+            child: Scaffold(
-                    horizontal: 16.0, vertical: 16.0),
+              appBar: AppBar(
-                child: Row(
+                title: const Text('Registration'),
-                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
+              ),
-                  children: List.generate(
+              body: Stack(
-                    _stepAmount,
+                children: [
-                    (index) => _stepItem(
+                  Consumer<SubmissionDataViewModel>(
-                      isCurrentStep: _currentStep == index + 1,
+                      builder: (context, provider, child) {
-                    ),
+                    return Column(
-                  ),
+                      crossAxisAlignment: CrossAxisAlignment.start,
-                ),
+                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                      children: [
+                        Padding(
+                          padding: const EdgeInsets.symmetric(
+                              horizontal: 16.0, vertical: 16.0),
+                          child: Row(
+                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                            children: List.generate(
+                              provider.stepAmount,
+                              (index) => _stepItem(
+                                isCurrentStep:
+                                    provider.getCurrentStep == index + 1,
+                              ),
+                            ),
+                          ),
+                        ),
+                        Expanded(
+                          child: Container(
+                            padding:
+                                const EdgeInsets.symmetric(horizontal: 16.0),
+                            child: _content(provider.getCurrentStep),
+                          ),
+                        ),
+                        provider.getCurrentStep == 3
+                            ? const SizedBox()
+                            : Align(
+                                alignment: Alignment.bottomCenter,
+                                child: ButtonView(
+                                  name: 'Next',
+                                  marginVertical: 16.0,
+                                  onPressed: () {
+                                    provider.nextSubmission(context);
+                                  },
+                                ),
+                              )
+                      ],
+                    );
+                  }),
+                ],
               ),
-              Container(
-                padding: const EdgeInsets.symmetric(horizontal: 16.0),
-                child: _content(_currentStep),
-              )
-            ],
-          ),
-          Align(
-            alignment: Alignment.bottomCenter,
-            child: ButtonView(
-              name: 'Next',
-              marginVertical: 16.0,
-              onPressed: () {
-                setState(() {
-                  _currentStep++;
-                });
-              },
             ),
-          )
+          );
-        ],
+        });
-      ),
-    );
   }
 }

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

@@ -1,21 +1,81 @@
+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_caption/text_caption.dart';
 import 'package:cims_apps/application/component/text_form/text_form_view.dart';
+import 'package:cims_apps/features/auth/registration/viewmodel/submission_data_viewmodel.dart';
+import 'package:flutter/gestures.dart';
 import 'package:flutter/material.dart';
+import 'package:provider/provider.dart';
 
 class SubmitEmail extends StatelessWidget {
   const SubmitEmail({Key? key}) : super(key: key);
 
-  @override
+  Widget _emailVerify() {
-  Widget build(BuildContext context) {
     return Column(
-      crossAxisAlignment: CrossAxisAlignment.start,
       children: [
-        const TextCaption(title: 'Enter your e-mail'),
+        const ImageView(image: PathAssets.imgEmail),
-        TextFormView(
+        Align(
-          name: 'E-mail Address',
+          alignment: Alignment.center,
-          hintText: 'Input e-mail address',
+          child: RichText(
+            textAlign: TextAlign.center,
+            text: TextSpan(children: [
+              const 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,
+                ),
+              ),
+              TextSpan(
+                recognizer: TapGestureRecognizer()
+                  ..onTap = () {
+                    print('object');
+                  },
+                text: 'verification',
+                style: const TextStyle(
+                  color: Colors.blue,
+                ),
+              ),
+              const TextSpan(
+                text: ' to \ncontinue registration.',
+                style: TextStyle(
+                  color: Colors.black,
+                  decoration: TextDecoration.none,
+                ),
+              ),
+            ]),
+          ),
         ),
       ],
     );
   }
+
+  @override
+  Widget build(BuildContext context) {
+    return ChangeNotifierProvider(
+        create: (context) => SubmissionDataViewModel(),
+        builder: (context, child) {
+          return Consumer<SubmissionDataViewModel>(
+              builder: (context, provider, child) {
+            return Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                !provider.isEmailVerify
+                    ? const TextCaption(title: 'Enter your e-mail')
+                    : const TextCaption(title: 'Check your e-mail '),
+                !provider.isEmailVerify
+                    ? TextFormView(
+                        name: 'E-mail Address',
+                        hintText: 'Input e-mail address',
+                        onTap: () {
+                          provider.submitEmail();
+                        },
+                      )
+                    : _emailVerify(),
+              ],
+            );
+          });
+        });
+  }
 }

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

@@ -1,16 +1,56 @@
+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/theme/color_palette.dart';
+import 'package:cims_apps/features/auth/registration/viewmodel/submission_data_viewmodel.dart';
 import 'package:flutter/material.dart';
+import 'package:provider/provider.dart';
 
 class SubmitPersonalData extends StatelessWidget {
   const SubmitPersonalData({Key? key}) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
-    return Column(
+    List<ItemSelectForm> listForm = [
-      crossAxisAlignment: CrossAxisAlignment.start,
+      ItemSelectForm('key1', 'text'),
-      children: [
+      ItemSelectForm('key2', 'text'),
-        TextCaption(title: 'Your personal details'),
+      ItemSelectForm('key3', 'text'),
-      ],
+      ItemSelectForm('key4', 'text'),
-    );
+      ItemSelectForm('key5', 'text'),
+    ];
+    return ChangeNotifierProvider(
+        create: (context) => SubmissionDataViewModel(),
+        builder: (context, child) {
+          return Consumer<SubmissionDataViewModel>(
+              builder: (context, provider, child) {
+            return SingleChildScrollView(
+              child: Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                // mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                children: [
+                  const TextCaption(title: 'Your personal details'),
+                  SelectFormView(
+                    name: 'Occupation',
+                    hintText: 'Select occupation ',
+                    bottomSheetTitle: Row(
+                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                      children: [
+                        const Text('Occupation'),
+                        IconButton(
+                            onPressed: () => Navigator.pop(context),
+                            icon: const Icon(
+                              Icons.clear,
+                              size: 20,
+                              color: ColorPalette.greyBase,
+                            )),
+                      ],
+                    ),
+                    listItem: listForm,
+                    onSelect: (value) {},
+                  ),
+                ],
+              ),
+            );
+          });
+        });
   }
 }

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

@@ -0,0 +1,114 @@
+import 'package:cims_apps/application/assets/path_assets.dart';
+import 'package:cims_apps/application/component/button/button_view.dart';
+import 'package:cims_apps/application/component/image/image_view.dart';
+import 'package:cims_apps/application/component/take_picture_screen/take_picture_screen.dart';
+import 'package:cims_apps/application/component/text_caption/text_caption.dart';
+import 'package:cims_apps/application/theme/color_palette.dart';
+import 'package:cims_apps/core/route/route.dart';
+import 'package:cims_apps/core/utils/size_config.dart';
+import 'package:cims_apps/features/auth/registration/viewmodel/submission_data_viewmodel.dart';
+import 'package:flutter/material.dart';
+import 'package:provider/provider.dart';
+
+class SubmitPhotoKtp extends StatelessWidget {
+  const SubmitPhotoKtp({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    List listImg = [
+      {'urlImg': PathAssets.imgKtpBlur, 'tag': 'Blurry Photo'},
+      {'urlImg': PathAssets.imgKtpLight, 'tag': 'Light Reflection'},
+      {'urlImg': PathAssets.imgKtpCropped, 'tag': 'Cropped Photo'},
+      {'urlImg': PathAssets.imgKtpClear, 'tag': 'Clear Photo'},
+    ];
+    return MultiProvider(
+        providers: [
+          ChangeNotifierProvider(
+            create: (context) => SubmissionDataViewModel(),
+          ),
+        ],
+        builder: (context, child) {
+          return SizedBox(
+            height: SizeConfig.height * .75,
+            child: Column(
+              mainAxisAlignment: MainAxisAlignment.spaceBetween,
+              children: [
+                const TextCaption(
+                  title: 'Take a photo your ID card',
+                  subtitle:
+                      'Make sure your photo is clearly legible for identity verification purposes',
+                ),
+                SizedBox(
+                  width: SizeConfig.height,
+                  child: Wrap(
+                    alignment: WrapAlignment.spaceBetween,
+                    spacing: 10,
+                    runSpacing: 10,
+                    children: List.generate(listImg.length, (index) {
+                      final urlList = listImg[index]['urlImg'];
+                      final tag = listImg[index]['tag'];
+                      return Column(
+                        children: [
+                          ImageView(
+                            image: urlList,
+                            width: SizeConfig.width * .42,
+                          ),
+                          const SizedBox(
+                            height: 8,
+                          ),
+                          Text(
+                            tag,
+                            style: const TextStyle(
+                                color: ColorPalette.slate800,
+                                fontWeight: FontWeight.w600),
+                          ),
+                        ],
+                      );
+                    }),
+                  ),
+                ),
+                // const Spacer(),
+                const Row(
+                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                  children: [
+                    ImageView(
+                      image: PathAssets.iconShield,
+                      width: 20,
+                      height: 22,
+                    ),
+                    SizedBox(
+                      width: 8,
+                    ),
+                    Expanded(
+                      child: Text(
+                        'In accordance with OJK regulations, an ID card is required to purchase mutual funds.',
+                        style: TextStyle(
+                          fontWeight: FontWeight.w600,
+                          color: ColorPalette.primary,
+                        ),
+                      ),
+                    )
+                  ],
+                ),
+                Consumer<SubmissionDataViewModel>(
+                    builder: (context, provider, child) {
+                  return ButtonView(
+                    name: 'Take a Photo',
+                    marginVertical: 16.0,
+                    onPressed: () {
+                      provider.initCamera().then((cameras) {
+                        routePush(context,
+                            page: TakePictureScreen(
+                              camera: cameras.first,
+                              takeContent: 'ktp',
+                            ));
+                      });
+                    },
+                  );
+                })
+              ],
+            ),
+          );
+        });
+  }
+}

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

@@ -0,0 +1,21 @@
+import 'package:flutter/material.dart';
+
+class RegistrationViewModel extends ChangeNotifier {
+  TextEditingController passwordCtrl = TextEditingController();
+  TextEditingController confirmPasswordCtrl = TextEditingController();
+  TextEditingController phoneNumberCtrl = TextEditingController();
+  var formKey = GlobalKey<FormState>();
+  var formKeyPhone = GlobalKey<FormState>();
+  bool showPassword = false;
+  bool showPasswordConfirm = false;
+
+  void toggleVisibility() {
+    showPassword = !showPassword;
+    notifyListeners();
+  }
+
+  void toggleVisibilityConfirm() {
+    showPasswordConfirm = !showPasswordConfirm;
+    notifyListeners();
+  }
+}

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

@@ -0,0 +1,39 @@
+import 'package:camera/camera.dart';
+import 'package:flutter/material.dart';
+
+class SubmissionDataViewModel extends ChangeNotifier {
+  static int _currentStep = 1;
+  int get getCurrentStep => _currentStep;
+  int stepAmount = 9;
+  bool _isEmailVerify = false;
+  bool get isEmailVerify => _isEmailVerify;
+
+  Future<List<CameraDescription>> initCamera() async {
+    final cameras = await availableCameras();
+    final camerasDesc = cameras;
+    return camerasDesc;
+  }
+
+  submitEmail() {
+    _isEmailVerify = !_isEmailVerify;
+    notifyListeners();
+  }
+
+  onWillPopSubmission(BuildContext context) {
+    if (getCurrentStep != 1) {
+      _currentStep--;
+      notifyListeners();
+    } else {
+      Navigator.of(context).pop(true);
+    }
+  }
+
+  nextSubmission(BuildContext context) {
+    if (getCurrentStep < stepAmount) {
+      _currentStep++;
+    } else {
+      //ToDo : Go To next step after completing the submission
+    }
+    notifyListeners();
+  }
+}

lib/features/bottom_navigation_view.dart

@@ -1,4 +1,6 @@
 import 'package:cims_apps/application/theme/color_palette.dart';
+import 'package:cims_apps/features/dashboard/dashboard_account/view/homepage/homepage_view.dart';
+import 'package:cims_apps/features/dashboard/dashboard_account/view/portfolio/portfolio_view.dart';
 import 'package:flutter/material.dart';
 
 class BottomNavigationView extends StatefulWidget {
@@ -15,15 +17,12 @@ class _BottomNavigationViewState extends State<BottomNavigationView> {
   Widget build(BuildContext context) {
     ///TODO: masukan pagenya dilistWidget ini
     List<Widget> listWidget = [
-      Container(
+      HomeView(),
-        color: Colors.amberAccent,
-      ),
       Container(
         color: Colors.redAccent,
       ),
       Container(),
-      Container(),
+      PortofolioView(),
-      Container(),
       Container(),
     ];
 
@@ -60,6 +59,7 @@ class _BottomNavigationViewState extends State<BottomNavigationView> {
         },
         currentIndex: _selectedIndex,
         items: listNavigation,
+        type: BottomNavigationBarType.fixed,
         showUnselectedLabels: true,
         selectedItemColor: ColorPalette.primary,
         unselectedItemColor: Colors.black,

lib/features/dashboard/dashboard_account/view/homepage/homepage_view.dart

@@ -0,0 +1,529 @@
+import 'package:carousel_slider/carousel_slider.dart';
+import 'package:cims_apps/application/assets/path_assets.dart';
+import 'package:cims_apps/application/component/image/image_view.dart';
+import 'package:cims_apps/application/component/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/invest_type/invest_type_view.dart';
+import 'package:flutter/material.dart';
+
+class InvestType {
+  String name;
+  String iconImage;
+
+  InvestType(this.name, this.iconImage);
+}
+
+class StepVerification {
+  int currentStep;
+  List<String> nameStep;
+
+  StepVerification(this.currentStep, this.nameStep);
+}
+
+class Article {
+  String image;
+  String title;
+  String type;
+
+  Article(this.type, this.title, this.image);
+}
+
+class HomeView extends StatefulWidget {
+  const HomeView({super.key});
+
+  @override
+  State<HomeView> createState() => _HomeViewState();
+}
+
+class _HomeViewState extends State<HomeView> {
+  bool seePortofolioValue = false;
+
+  List<InvestType> listPortofolioType = [
+    InvestType('Money Market', PathAssets.iconPortofolioMoneyMarket),
+    InvestType('Shares', PathAssets.iconPortofolioShares),
+    InvestType('Bonds', PathAssets.iconPortofolioBonds),
+    InvestType('Sharia', PathAssets.iconPortofolioSharia)
+  ];
+
+  StepVerification listStepVerification = StepVerification(1, [
+    'Registration', 'Verification', 'Complete'
+  ]);
+
+  List<Article> listArticle = [
+    Article('Education', 'Menggali Potensi Pasar: Analisis Sebelum Memulai Investasi', PathAssets.imgArticles),
+    Article('News', 'Tren Investasi 2024: Peluang dan Risiko yang Perlu Diketahui', PathAssets.imgArticles),
+    Article('Education', 'Investasi Berkelanjutan: Mengenal Portofolio Hijau untuk Masa Depan', PathAssets.imgArticles),
+  ];
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      backgroundColor: const Color(0xffF8FAFC),
+      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.only(left: 24, right: 16),
+                  child: Row(
+                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                    children: [
+                      const Text(
+                        'Home',
+                        style: TextStyle(
+                            color: Colors.white,
+                            fontSize: 20,
+                            fontWeight: FontWeight.w700
+                        ),
+                      ),
+                      ElevatedButton(
+                          onPressed: () {
+
+                          },
+                          style: ElevatedButton.styleFrom(
+                              padding: const EdgeInsets.all(0),
+                              backgroundColor: Colors.white,
+                              foregroundColor: const Color(0xff2563EB),
+                              elevation: 0,
+                              shape: const CircleBorder()
+                          ),
+                          child: const Icon(Icons.notifications_outlined)
+                      )
+                    ],
+                  ),
+                ),
+                const SizedBox(
+                  height: 32,
+                ),
+                Padding(
+                  padding: const EdgeInsets.symmetric(horizontal: 24),
+                  child: portofolioValue(),
+                ),
+                const SizedBox(
+                  height: 24,
+                ),
+                cardInvestType(),
+                const SizedBox(
+                  height: 32,
+                ),
+                Expanded(
+                  child: ListView(
+                    padding: const EdgeInsets.all(0),
+                    children: [
+                      cardVerification(),
+                      const SizedBox(
+                        height: 24,
+                      ),
+                      infoAndPromo(),
+                      const SizedBox(
+                        height: 24,
+                      ),
+                      articles(),
+                    ],
+                  ),
+                ),
+              ],
+            )
+          ],
+        ),
+      ),
+    );
+  }
+
+  Widget portofolioValue() {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Row(
+          children: [
+            const Text('Portofolio Value', style: TextStyle(color: Colors.white)),
+            const SizedBox(
+              width: 12,
+            ),
+            GestureDetector(
+                onTap: () {
+                  setState(() {
+                    seePortofolioValue = !seePortofolioValue;
+                  });
+                },
+                child: const Icon(Icons.visibility_outlined, color: Color(0xff93C5FD))
+            )
+          ],
+        ),
+        const SizedBox(
+          height: 4,
+        ),
+        Row(
+          children: [
+            AnimatedCrossFade(
+              duration: const Duration(milliseconds: 300),
+              alignment: Alignment.center,
+              crossFadeState: seePortofolioValue ? CrossFadeState.showSecond : CrossFadeState.showFirst,
+              firstChild: RichText(
+                  text: const TextSpan(
+                      text: 'Rp ',
+                      style: TextStyle(fontSize: 32, color: Color(0xff93C5FD), fontFamily: 'Manrope',),
+                      children: [
+                        TextSpan(
+                          text: '22.500.000',
+                          style: TextStyle(
+                              fontSize: 32,
+                              fontWeight: FontWeight.bold,
+                              color: Colors.white,
+                              fontFamily: 'Manrope',
+                          ),
+                        )
+                      ]
+                  )
+              ),
+              secondChild: Padding(
+                padding: const EdgeInsets.symmetric(vertical: 16),
+                child: Wrap(
+                  spacing: 7,
+                  children: [
+                    for (int i = 0; i < 6; i++)
+                      Container(
+                        width: 12,
+                        height: 12,
+                        decoration: const BoxDecoration(color: Colors.white, shape: BoxShape.circle),
+                      ),
+                  ],
+                ),
+              ),
+            ),
+          ],
+        )
+      ],
+    );
+  }
+
+  Widget cardInvestType() {
+    return Container(
+      padding: const EdgeInsets.all(16),
+      decoration: BoxDecoration(
+          color: Colors.white,
+          borderRadius: BorderRadius.circular(12),
+          boxShadow: [
+            BoxShadow(
+                spreadRadius: 2,
+                blurRadius: 4,
+                color: const Color(0xff1E293B).withOpacity(0.04)
+            )
+          ]
+      ),
+      child: Wrap(
+        spacing: 10,
+        children: listPortofolioType.asMap().entries.map((e) {
+          return  GestureDetector(
+            onTap: () {
+              routePush(context, page: InvestTypeView(e.value.name));
+            },
+            child: Container(
+              color: Colors.white,
+              width: SizeConfig.width * .18,
+              child: Column(
+                children: [
+                  ImageView(image: e.value.iconImage, height: SizeConfig.width * .12, width: SizeConfig.width * .12,),
+                  const SizedBox(
+                    height: 8,
+                  ),
+                  Text(
+                    e.value.name,
+                    overflow: TextOverflow.ellipsis,
+                    textAlign: TextAlign.center,
+                    style: const TextStyle(
+                      fontSize: 12,
+                      fontWeight: FontWeight.w600
+                    ),
+                  )
+                ],
+              ),
+            ),
+          );
+        }).toList(),
+      ),
+    );
+  }
+
+  Widget cardVerification() {
+    return Container(
+      margin: const EdgeInsets.symmetric(horizontal: 24),
+      padding: const EdgeInsets.all(16),
+      decoration: BoxDecoration(
+        color: Colors.white,
+        borderRadius: BorderRadius.circular(12),
+      ),
+      child: Column(
+        children: [
+          stepVerification(),
+          const SizedBox(
+            height: 24,
+          ),
+          Row(
+            mainAxisAlignment: MainAxisAlignment.spaceBetween,
+            children: [
+              const Row(
+                children: [
+                  Icon(Icons.verified, size: 18,),
+                  SizedBox(
+                    width: 12,
+                  ),
+                  Text(
+                    'Verified by PT Gemilang',
+                    style: TextStyle(
+                      color: ColorPalette.slate500
+                    ),
+                  )
+                ],
+              ),
+              Container(
+                width: 16,
+                height: 16,
+                decoration: BoxDecoration(
+                    color: Colors.white,
+                    border: Border.all(color: const Color(0xffCBD5E1), width: 1.5),
+                    shape: BoxShape.circle
+                ),
+              )
+            ],
+          ),
+          const SizedBox(
+            height: 16,
+          ),
+          Row(
+            mainAxisAlignment: MainAxisAlignment.spaceBetween,
+            children: [
+              const Row(
+                crossAxisAlignment: CrossAxisAlignment.end,
+                children: [
+                  Icon(Icons.verified, size: 18,),
+                  SizedBox(
+                    width: 12,
+                  ),
+                  Text(
+                    'Verified by KSEI',
+                    style: TextStyle(
+                        color: ColorPalette.slate500
+                    ),
+                  )
+                ],
+              ),
+              Container(
+                width: 16,
+                height: 16,
+                decoration: BoxDecoration(
+                    color: Colors.white,
+                    border: Border.all(color: const Color(0xffCBD5E1), width: 1.5),
+                    shape: BoxShape.circle
+                ),
+              )
+            ],
+          ),
+          const SizedBox(
+            height: 16,
+          ),
+          Container(
+            padding: const EdgeInsets.all(12),
+            decoration: BoxDecoration(
+                color: ColorPalette.blue50,
+                borderRadius: BorderRadius.circular(12)
+            ),
+            child: const Column(
+              children: [
+                Text(
+                  'Your registration is currently being verified by PT Gemilang',
+                  style: TextStyle(
+                      color: ColorPalette.slate500
+                  ),
+                ),
+                SizedBox(
+                  height: 16,
+                ),
+                Row(
+                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                  children: [
+                    Text('Estimated:',
+                      style: TextStyle(
+                        color: ColorPalette.slate500
+                      ),
+                    ),
+                    Text(
+                      'January 30 2024',
+                      style: TextStyle(
+                          fontWeight: FontWeight.w600,
+                          color: Color(0xff1E293B)
+                      ),
+                    )
+                  ],
+                )
+              ],
+            ),
+          )
+        ],
+      ),
+    );
+  }
+
+  Widget stepVerification() {
+    return Row(
+      mainAxisAlignment: MainAxisAlignment.spaceBetween,
+      children: listStepVerification.nameStep.asMap().entries.map((e) {
+        return Row(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            if(e.key != 0)
+              SizedBox(
+                width: 30,
+                height: 30,
+                child: Divider(color: listStepVerification.currentStep >= e.key ? const Color(0xff2563EB) : const Color(0xffCBD5E1),),
+              ),
+            Column(
+              children: [
+                Container(
+                  width: 30,
+                  height: 30,
+                  decoration: BoxDecoration(
+                      shape: BoxShape.circle,
+                      color: listStepVerification.currentStep <= e.key ? Colors.white : const Color(0xff2563EB),
+                      border: Border.all(
+                          color: listStepVerification.currentStep < e.key ? const Color(0xffCBD5E1) : const Color(0xff2563EB),
+                          width: 2
+                      )
+                  ),
+                  child: listStepVerification.currentStep <= e.key ? const SizedBox() : const Icon(Icons.done_rounded, color: Colors.white,),
+                ),
+                const SizedBox(
+                  height: 8,
+                ),
+                Text(e.value, style: TextStyle(color: listStepVerification.currentStep == e.key ? const Color(0xff2563EB) : Colors.black),)
+              ],
+            ),
+          ],
+        );
+      }).toList(),
+    );
+  }
+
+  Widget infoAndPromo() {
+    return Padding(
+      padding: const EdgeInsets.symmetric(horizontal: 24),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          const TextTitle(title: 'Info and Special Promo', color: ColorPalette.slate800,),
+          const SizedBox(
+            height: 16,
+          ),
+          CarouselSlider(
+            items: [1,2,3].map((e) {
+              return Padding(
+                padding: const EdgeInsets.symmetric(horizontal: 8),
+                child: ImageView(image: PathAssets.imgCarousel, height: 150, width: SizeConfig.width * .9,),
+              );
+            }).toList(),
+            options: CarouselOptions(
+              height: 150,
+              autoPlay: true,
+              pageSnapping: true,
+              viewportFraction: 0.9,
+              autoPlayInterval: const Duration(seconds: 5),
+              autoPlayCurve: Curves.fastOutSlowIn,
+            ),
+          )
+        ],
+      ),
+    );
+  }
+
+  Widget articles() {
+    return Container(
+      color: Colors.white,
+      padding: const EdgeInsets.symmetric(vertical: 24),
+      child: Column(
+        children: [
+          Padding(
+            padding: const EdgeInsets.symmetric(horizontal: 24),
+            child: Row(
+              mainAxisAlignment: MainAxisAlignment.spaceBetween,
+              children: [
+                const TextTitle(title: 'Article', color: ColorPalette.slate800),
+                GestureDetector(
+                  onTap: () {
+
+                  },
+                  child: const Text('See More',
+                    style: TextStyle(
+                      color: ColorPalette.primary,
+                      fontWeight: FontWeight.bold
+                    ),),
+                )
+              ],
+            ),
+          ),
+          const SizedBox(
+            height: 16,
+          ),
+          ...listArticle.asMap().entries.map((e) {
+            return Column(
+              children: [
+                if(e.key != 0)...[
+                  const Padding(
+                    padding: EdgeInsets.symmetric(vertical: 12),
+                    child: Divider(color: ColorPalette.slate200,),
+                  )
+                ],
+                cardArticle(e.value),
+              ],
+            );
+          })
+        ],
+      ),
+    );
+  }
+
+  Widget cardArticle(Article article) {
+    return Padding(
+      padding: const EdgeInsets.symmetric(horizontal: 24),
+      child: Row(
+        children: [
+          ImageView(image: PathAssets.imgArticles, width: SizeConfig.width * .17, height: SizeConfig.height * .08, borderRadius: 8,),
+          const SizedBox(
+            width: 16,
+          ),
+          Expanded(
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                Text(article.title,
+                  style: const TextStyle(
+                    fontWeight: FontWeight.bold,
+                  ),
+                ),
+                const SizedBox(
+                  height: 8,
+                ),
+                Container(
+                  padding: const EdgeInsets.symmetric(vertical: 4, horizontal: 12),
+                  decoration: BoxDecoration(
+                    borderRadius: BorderRadius.circular(30),
+                    color: ColorPalette.colorSwitchButtonActive
+                  ),
+                  child: Text(article.type),
+                ),
+              ],
+            )
+          )
+        ],
+      ),
+    );
+  }
+}

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

@@ -0,0 +1,236 @@
+import 'package:cims_apps/application/assets/path_assets.dart';
+import 'package:cims_apps/application/component/button/button_back.dart';
+import 'package:cims_apps/application/component/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/number_formatter.dart';
+import 'package:cims_apps/core/utils/size_config.dart';
+import 'package:cims_apps/features/dashboard/dashboard_account/view/product/product_view.dart';
+import 'package:flutter/material.dart';
+
+class Product {
+  String name;
+  double yield;
+  double priceUnit;
+  double funds;
+  
+  Product(this.name, this.yield, this.priceUnit, this.funds);
+}
+
+class InvestTypeView extends StatefulWidget {
+  final String title;
+  const InvestTypeView(this.title, {super.key});
+
+  @override
+  State<InvestTypeView> createState() => _InvestTypeViewState();
+}
+
+class _InvestTypeViewState extends State<InvestTypeView> {
+  
+  List<Product> listProduct = [
+    Product('Gemilang Dana Kas Maxima', 8.17, 2600.79, 6300000),
+    Product('Gemilang Dana Likuid', 6.42, 1600.79, 2340000),
+    Product('Gemilang Income Fund', 8.17, 2600.79, 6300000)
+  ];
+  
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      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 ButtonBack(),
+                      TextTitle(title: widget.title, color: Colors.white),
+                      SizedBox(
+                        width: SizeConfig.width * 0.1,
+                      )
+                    ],
+                  ),
+                ),
+                const SizedBox(
+                  height: 24,
+                ),
+                Container(
+                  padding: const EdgeInsets.all(24),
+                  decoration: BoxDecoration(
+                    borderRadius: BorderRadius.circular(16),
+                    color: Colors.white
+                  ),
+                  child: Column(
+                    children: [
+                      filters(),
+                      ListView(
+                        shrinkWrap: true,
+                        children: listProduct.asMap().entries.map((e) {
+                          return GestureDetector(
+                            onTap: () {
+                              routePush(context, page: ProductView(widget.title));
+                            },
+                            child: Padding(
+                              padding: EdgeInsets.only(top: e.key != 0 ? 24 : 0),
+                              child: cardProduct(e.value),
+                            ),
+                          );
+                        }).toList(),
+                      )
+                    ],
+                  ),
+                ),
+              ],
+            )
+          ],
+        ),
+      ),
+    );
+  }
+
+  Widget filters() {
+    return Padding(
+      padding: const EdgeInsets.symmetric(horizontal: 8),
+      child: Row(
+        mainAxisAlignment: MainAxisAlignment.spaceBetween,
+        children: [
+          segmentFilter(const Icon(Icons.filter_alt_outlined, color: ColorPalette.slate400,), 'Filter', () { }),
+          segmentFilter(const RotatedBox(quarterTurns: 1, child: Icon(Icons.compare_arrows, color: ColorPalette.slate400)), 'Sort', () { }),
+          segmentFilter(const Icon(Icons.dashboard_outlined, color: ColorPalette.slate400), 'Compare', () { }),
+        ],
+      ),
+    );
+  }
+
+  Widget segmentFilter(Widget leading, String text, void Function()? onTap) {
+    return GestureDetector(
+      onTap: onTap,
+      child:  Container(
+        padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 16),
+        decoration: BoxDecoration(
+            border: Border.all(color: ColorPalette.slate200),
+            borderRadius: BorderRadius.circular(56)
+        ),
+        child: Row(
+          children: [
+            leading,
+            const SizedBox(
+              width: 4,
+            ),
+            Text(
+              text,
+              overflow: TextOverflow.ellipsis,
+              style: const TextStyle(
+                color: ColorPalette.slate500,
+                fontWeight: FontWeight.w700
+              ),
+            )
+          ],
+        ),
+      ),
+    );
+  }
+
+  Widget cardProduct(Product product) {
+    return Container(
+      padding: const EdgeInsets.all(16),
+      decoration: BoxDecoration(
+        borderRadius: BorderRadius.circular(12),
+        border: Border.all(color: ColorPalette.slate200),
+      ),
+      child: Column(
+        children: [
+          Row(
+            children: [
+              ImageView(image: PathAssets.imgProduct, width: SizeConfig.width * .12,),
+              const SizedBox(
+                width: 8,
+              ),
+              Expanded(
+                child: Text(
+                  product.name,
+                  style: const TextStyle(
+                    fontWeight: FontWeight.bold,
+                    fontSize: 18
+                  ),
+                ),
+              )
+            ],
+          ),
+          const Padding(
+            padding: EdgeInsets.symmetric(vertical: 12),
+            child: Divider(color: ColorPalette.slate200),
+          ),
+          Row(
+            mainAxisAlignment: MainAxisAlignment.spaceBetween,
+            children: [
+              Column(
+                children: [
+                  const Text('Yield', style: TextStyle(color: ColorPalette.slate400, fontWeight: FontWeight.w600),),
+                  Row(
+                    children: [
+                      Text(
+                        '${product.yield.toString()}%',
+                        style: const TextStyle(
+                          color: ColorPalette.green400,
+                          fontWeight: FontWeight.w600
+                        ),
+                      ),
+                      const Text('/'),
+                      const Text('3year', style: TextStyle(color: ColorPalette.slate400, fontWeight: FontWeight.w600),)
+                    ],
+                  )
+                ],
+              ),
+              Column(
+                children: [
+                  const Text('Price/unit', style: TextStyle(color: ColorPalette.slate400, fontWeight: FontWeight.w600),),
+                  Row(
+                    children: [
+                      const Icon(Icons.trending_up_outlined, size: 18, color: ColorPalette.green400,),
+                      const SizedBox(
+                        width: 2,
+                      ),
+                      Text(
+                        NumberFormatter.numberCurrency(product.priceUnit, 'Rp', 'id_ID'),
+                        style: const TextStyle(
+                          fontWeight: FontWeight.w600
+                        ),
+                      ),
+                    ],
+                  )
+                ],
+              ),
+              Column(
+                children: [
+                  const Text('Managed funds', style: TextStyle(color: ColorPalette.slate400, fontWeight: FontWeight.w600),),
+                  Row(
+                    children: [
+                      Text(
+                        NumberFormatter.compactCurrency(product.funds, 'Rp ', 'id_ID'),
+                        style: const TextStyle(
+                            fontWeight: FontWeight.w600
+                        ),
+                      ),
+                    ],
+                  )
+                ],
+              )
+            ],
+          )
+        ],
+      ),
+    );
+  }
+
+}

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

@@ -0,0 +1,347 @@
+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:fl_chart/fl_chart.dart';
+import 'package:flutter/material.dart';
+
+class CategoryPortofolio {
+  String name;
+  int value;
+
+  CategoryPortofolio(this.value, this.name);
+}
+
+class PortofolioView extends StatefulWidget {
+  const PortofolioView({super.key});
+
+  @override
+  State<PortofolioView> createState() => _PortofolioViewState();
+}
+
+class _PortofolioViewState extends State<PortofolioView> {
+  List<Color> contentColor = [
+    ColorPalette.purple500,
+    ColorPalette.orange500,
+    ColorPalette.cyan500,
+    ColorPalette.green500,
+  ];
+  List<Color> bgContentColor = [
+    ColorPalette.purple100,
+    ColorPalette.orange100,
+    ColorPalette.cyan100,
+    ColorPalette.green100,
+  ];
+
+  bool seePortofolioValue = false;
+  int touchedIndex = -1;
+
+  List<CategoryPortofolio> listCategoryPortofolio = [
+    CategoryPortofolio(20, 'Money Market'),
+    CategoryPortofolio(15, 'Shares'),
+    CategoryPortofolio(8, 'Bonds'),
+    CategoryPortofolio(50, 'Sharia'),
+  ];
+
+  List<String> assetsImage = [
+    PathAssets.iconPortofolioMoneyMarket,
+    PathAssets.iconPortofolioShares,
+    PathAssets.iconPortofolioBonds,
+    PathAssets.iconPortofolioSharia,
+  ];
+
+  @override
+  Widget build(BuildContext context) {
+    return 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,
+                ),
+                const Center(
+                  child: Text(
+                    'Portofolio',
+                    style: TextStyle(
+                        fontSize: 20,
+                        fontWeight: FontWeight.w700,
+                        color: Colors.white),
+                  ),
+                ),
+                const SizedBox(
+                  height: 40,
+                ),
+                Padding(
+                  padding: const EdgeInsets.symmetric(horizontal: 24),
+                  child: portofolioValue(),
+                ),
+                Expanded(
+                  child: Container(
+                    margin: const EdgeInsets.only(top: 24),
+                    decoration: const BoxDecoration(
+                      color: Colors.white,
+                      borderRadius: BorderRadius.only(
+                          topLeft: Radius.circular(24),
+                          topRight: Radius.circular(24)),
+                    ),
+                    child: ListView(
+                      padding: const EdgeInsets.symmetric(vertical: 0),
+                      children: [
+                        Stack(alignment: Alignment.center, children: [
+                          AspectRatio(
+                            aspectRatio: 1.3,
+                            child: PieChart(PieChartData(
+                                pieTouchData: PieTouchData(
+                                  touchCallback:
+                                      (FlTouchEvent event, pieTouchResponse) {
+                                    setState(() {
+                                      if (!event.isInterestedForInteractions ||
+                                          pieTouchResponse == null ||
+                                          pieTouchResponse.touchedSection ==
+                                              null) {
+                                        touchedIndex = -1;
+                                        return;
+                                      }
+                                      touchedIndex = pieTouchResponse
+                                          .touchedSection!.touchedSectionIndex;
+                                    });
+                                  },
+                                ),
+                                borderData: FlBorderData(
+                                  show: true,
+                                ),
+                                sectionsSpace: 20,
+                                centerSpaceRadius: 100,
+                                sections: sectionsDataPortofolio())),
+                          ),
+                          const Column(
+                            children: [
+                              Text('Total Mutual Fund'),
+                              Text('10',
+                                  style: TextStyle(
+                                      fontSize: 44,
+                                      fontWeight: FontWeight.w700)),
+                            ],
+                          )
+                        ]),
+                        const SizedBox(
+                          height: 12,
+                        ),
+                        menuPortofolio(),
+                        const SizedBox(
+                          height: 24,
+                        ),
+                        ...listColumnPortofolio(),
+                        const SizedBox(
+                          height: 24,
+                        )
+                      ],
+                    ),
+                  ),
+                )
+              ],
+            )
+          ],
+        ),
+      ),
+    );
+  }
+
+  Widget portofolioValue() {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Row(
+          children: [
+            const Text('Portofolio Value',
+                style: TextStyle(color: Colors.white)),
+            const SizedBox(
+              width: 8,
+            ),
+            GestureDetector(
+                onTap: () {
+                  setState(() {
+                    seePortofolioValue = !seePortofolioValue;
+                  });
+                },
+                child: const Icon(Icons.visibility_outlined,
+                    color: Color(0xff93C5FD)))
+          ],
+        ),
+        const SizedBox(
+          height: 4,
+        ),
+        Row(
+          children: [
+            AnimatedCrossFade(
+              duration: const Duration(milliseconds: 300),
+              alignment: Alignment.center,
+              crossFadeState: seePortofolioValue
+                  ? CrossFadeState.showSecond
+                  : CrossFadeState.showFirst,
+              firstChild: RichText(
+                  text: const TextSpan(
+                      text: 'Rp ',
+                      style: TextStyle(fontSize: 32, color: Color(0xff93C5FD), fontFamily: 'Manrope'),
+                      children: [
+                    TextSpan(
+                      text: '22.500.000',
+                      style: TextStyle(
+                          fontSize: 32,
+                          fontFamily: 'Manrope',
+                          fontWeight: FontWeight.bold,
+                          color: Colors.white
+                      ),
+                    )
+                  ])),
+              secondChild: Padding(
+                padding: const EdgeInsets.symmetric(vertical: 16),
+                child: Wrap(
+                  spacing: 7,
+                  children: [
+                    for (int i = 0; i < 6; i++)
+                      Container(
+                        width: 12,
+                        height: 12,
+                        decoration: const BoxDecoration(
+                            color: Colors.white, shape: BoxShape.circle),
+                      ),
+                  ],
+                ),
+              ),
+            ),
+          ],
+        )
+      ],
+    );
+  }
+
+  List<PieChartSectionData> sectionsDataPortofolio() {
+    return listCategoryPortofolio.asMap().entries.map((e) {
+      final isTouched = e.key == touchedIndex;
+      final radius = isTouched ? 40.0 : 30.0;
+      return PieChartSectionData(
+        color: contentColor[e.key],
+        value: e.value.value.toDouble(),
+        title: e.value.name,
+        showTitle: isTouched,
+        radius: radius,
+        titleStyle: const TextStyle(
+          fontSize: 20,
+          fontWeight: FontWeight.bold,
+        ),
+      );
+    }).toList();
+  }
+
+  Widget menuPortofolio() {
+    return Container(
+      margin: const EdgeInsets.symmetric(horizontal: 24),
+      padding: const EdgeInsets.all(12),
+      decoration: BoxDecoration(
+          color: Colors.white,
+          borderRadius: const BorderRadius.all(Radius.circular(12)),
+          boxShadow: [
+            BoxShadow(
+                spreadRadius: 2,
+                blurRadius: 8,
+                color: const Color(0xff1E293B).withOpacity(0.04))
+          ]),
+      child: Wrap(
+        alignment: WrapAlignment.center,
+        spacing: 12,
+        children: listCategoryPortofolio.asMap().entries.map((e) {
+          return Container(
+            color: Colors.white,
+            width: SizeConfig.width * 0.18,
+            child: Column(
+              children: [
+                Container(
+                  height: 58,
+                  width: 58,
+                  alignment: Alignment.center,
+                  decoration: BoxDecoration(
+                      shape: BoxShape.circle,
+                      color: bgContentColor[e.key],
+                  ),
+                  child: Text(
+                    '${e.value.value}%',
+                    style: TextStyle(
+                        fontWeight: FontWeight.bold,
+                        color: contentColor[e.key]),
+                  ),
+                ),
+                const SizedBox(
+                  height: 8,
+                ),
+                Text(
+                  e.value.name,
+                  overflow: TextOverflow.ellipsis,
+                  textAlign: TextAlign.center,
+                )
+              ],
+            ),
+          );
+        }).toList(),
+      ),
+    );
+  }
+
+  List<Widget> listColumnPortofolio() {
+    return listCategoryPortofolio.asMap().entries.map((e) {
+      return Column(
+        children: [
+          if (e.key > 0) ...[
+            const Divider(
+              color: ColorPalette.slate200,
+            )
+          ],
+          ListTile(
+            contentPadding:
+                const EdgeInsets.symmetric(vertical: 0, horizontal: 24),
+            leading: ImageView(
+              image: assetsImage[e.key],
+              width: SizeConfig.width * .15,
+              height: SizeConfig.height * .08,
+              borderRadius: 8,
+            ),
+            title: Text(
+              e.value.name,
+              style: const TextStyle(fontWeight: FontWeight.w600),
+            ),
+            subtitle: Text(
+              e.value.name,
+              style: const TextStyle(
+                  fontWeight: FontWeight.w600, color: Color(0xff94A3B8)),
+            ),
+            trailing: const Column(
+              crossAxisAlignment: CrossAxisAlignment.end,
+              children: [
+                Text(
+                  'Rp 2.000.000',
+                  style: TextStyle(
+                      color: Colors.black,
+                      fontSize: 16,
+                      fontWeight: FontWeight.w700),
+                ),
+                Text(
+                  '+ Rp 200.000',
+                  style: TextStyle(
+                      fontSize: 14,
+                      color: Color(0xff4ADE80),
+                      fontWeight: FontWeight.w600),
+                )
+              ],
+            ),
+          ),
+        ],
+      );
+    }).toList();
+  }
+}

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

@@ -0,0 +1,325 @@
+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:fl_chart/fl_chart.dart';
+import 'package:flutter/material.dart';
+import 'dart:math';
+import 'package:intl/intl.dart';
+
+class ProductChartView extends StatefulWidget {
+  final String tabType;
+  final String lastTime;
+  final List<double> dataChart;
+
+  const ProductChartView({
+    super.key,
+    required this.tabType,
+    required this.lastTime,
+    required this.dataChart,
+  });
+
+  @override
+  State<ProductChartView> createState() => _ProductChartViewState();
+}
+
+class _ProductChartViewState extends State<ProductChartView> {
+  bool isShowLabel = true;
+  DateTime dateTime = DateTime.now();
+  double currentPrice = 0;
+  int spotIndicator = 0;
+  List<int> showingTooltipOnSpots = [1, 3, 5];
+  List<FlSpot> spots = [];
+
+  double dataHighest = 0;
+  double dataLowest = 0;
+
+  int indexHighestValue = 0;
+  int indexLowestValue = 0;
+
+  @override
+  void initState() {
+    spots = widget.dataChart.asMap().entries.map((e) {
+      return FlSpot(double.parse(e.key.toString()), e.value);
+    }).toList();
+    dataHighest = widget.dataChart.reduce(max);
+    dataLowest = widget.dataChart.reduce(min);
+    currentPrice = dataHighest;
+    indexHighestValue = widget.dataChart.indexWhere((element) => element == dataHighest);
+    indexLowestValue = widget.dataChart.indexWhere((element) => element == dataLowest);
+    // TODO: implement initState
+    super.initState();
+  }
+
+  @override
+  void didUpdateWidget(covariant ProductChartView oldWidget) {
+    // TODO: implement didUpdateWidget
+    spots = widget.dataChart.asMap().entries.map((e) {
+      return FlSpot(double.parse(e.key.toString()), e.value);
+    }).toList();
+    dataHighest = widget.dataChart.reduce(max);
+    dataLowest = widget.dataChart.reduce(min);
+    currentPrice = dataHighest;
+    indexHighestValue = widget.dataChart.indexWhere((element) => element == dataHighest);
+    indexLowestValue = widget.dataChart.indexWhere((element) => element == dataLowest);
+    super.didUpdateWidget(oldWidget);
+  }
+
+  @override
+  Widget build(BuildContext context) {
+
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Padding(
+          padding: const EdgeInsets.symmetric(horizontal: 24),
+          child: Wrap(
+            spacing: 8,
+            children: [
+              Text(
+                widget.tabType,
+                style: TextStyle(
+                    color: ColorPalette.slate400,
+                    fontWeight: FontWeight.w700
+                ),
+              ),
+              Text(
+                DateFormat('dd MMM yyyy').format(dateTime),
+                style: TextStyle(
+                    color: ColorPalette.slate300
+                ),
+              ),
+            ],
+          ),
+        ),
+        Padding(
+          padding: const EdgeInsets.symmetric(horizontal: 24),
+          child: TextTitle(title: NumberFormatter.numberCurrency(currentPrice, 'Rp ', 'id_ID')),
+        ),
+        Padding(
+          padding: const EdgeInsets.symmetric(horizontal: 24),
+          child: Wrap(
+            crossAxisAlignment: WrapCrossAlignment.center,
+            spacing: 8,
+            children: [
+              Icon(
+                Icons.trending_up_outlined,
+                size: 18,
+                color: ColorPalette.green500,
+              ),
+              Text(
+                'Rp20,30 (+3,88%)',
+                style: TextStyle(
+                  color: ColorPalette.green500,
+                  fontWeight: FontWeight.w600
+                ),
+              ),
+              Text(
+                'Last ${widget.lastTime}',
+                style: TextStyle(
+                  color: ColorPalette.slate300,
+                  fontWeight: FontWeight.w600
+                ),
+              )
+            ],
+          ),
+        ),
+        Padding(
+          padding: const EdgeInsets.symmetric(vertical: 48),
+          child: AspectRatio(
+            aspectRatio: 2.5,
+            child: LayoutBuilder(
+              builder: (context, constraints) {
+                return LineChart(
+                  LineChartData(
+                    // showingTooltipIndicators: showingTooltipOnSpots.map((index) {
+                    //   return ShowingTooltipIndicators([
+                    //     LineBarSpot(
+                    //       tooltipsOnBar,
+                    //       lineBarsData.indexOf(tooltipsOnBar),
+                    //       tooltipsOnBar.spots[index],
+                    //     ),
+                    //   ]);
+                    // }).toList(),
+                    extraLinesData: ExtraLinesData(
+                        verticalLines: [
+                          VerticalLine(
+                              color: Colors.transparent,
+                              x: indexHighestValue.toDouble(),
+                              label: VerticalLineLabel(
+                                show: spots.length < 7 ? false : isShowLabel,
+                                padding: EdgeInsets.only(bottom: 20, top: -25),
+                                alignment: (indexHighestValue / widget.dataChart.length) < 0.25 ? Alignment.topRight : (indexHighestValue / widget.dataChart.length) > 0.75 ? Alignment.topLeft : Alignment.topCenter,
+                                style: const TextStyle(
+                                  color: ColorPalette.slate400,
+                                  fontSize: 12,
+                                  fontWeight: FontWeight.bold,
+                                ),
+                                labelResolver: (p0) => NumberFormatter.numberCurrency(dataHighest, 'Rp ', 'id_ID'),
+                              )
+                          ),
+                          VerticalLine(
+                              color: Colors.transparent,
+                              x: indexLowestValue.toDouble(),
+                              label: VerticalLineLabel(
+                                show: spots.length < 7 ? false : isShowLabel,
+                                padding: EdgeInsets.only(bottom: -5, top: 20),
+                                alignment: (indexLowestValue / widget.dataChart.length ) < 0.25 ? Alignment.bottomRight : (indexLowestValue / widget.dataChart.length ) > 0.75 ? Alignment.bottomLeft : Alignment.bottomCenter,
+                                style: const TextStyle(
+                                  color: ColorPalette.slate400,
+                                  fontSize: 12,
+                                  fontWeight: FontWeight.bold,
+                                ),
+                                labelResolver: (p0) => NumberFormatter.numberCurrency(dataLowest, 'Rp ', 'id_ID'),
+                              )
+                          )
+                        ]
+                    ),
+                    lineTouchData: LineTouchData(
+                      getTouchLineEnd: (barData, spotIndex) => double.infinity,
+                      getTouchedSpotIndicator: (barData, spotIndexes) {
+                        return spotIndexes.map((spotIndex) {
+                          return TouchedSpotIndicatorData(
+                            const FlLine(strokeWidth: 1, color: ColorPalette.primary),
+                            FlDotData(
+                              getDotPainter: (spot, percent, barData, index) =>
+                                  FlDotCirclePainter(
+                                    radius: 1,
+                                    color: ColorPalette.white,
+                                    strokeColor: ColorPalette.primary,
+                                    strokeWidth: 2,
+                                  ),
+                            ),
+                          );
+                        }).toList();
+                      },
+                      touchCallback: (FlTouchEvent event, LineTouchResponse? response) {
+                        if (response == null || response.lineBarSpots == null) {
+                          setState(() {
+                            isShowLabel = true;
+                            currentPrice = widget.dataChart.last;
+                            dateTime = DateTime.now();
+                          });
+                          return;
+                        }
+                        double? spotIndex = response.lineBarSpots?[0].x;
+                        if(spotIndex != null){
+                          int absIndex = (spotIndex.toInt() - (spots.length - 1)).abs();
+                          setState(() {
+                            isShowLabel = false;
+                            spotIndicator = spotIndex.toInt();
+                            currentPrice = widget.dataChart[spotIndex.toInt()];
+                            dateTime = DateTime.now().subtract(Duration(days: absIndex));
+                          });
+                        }
+                      },
+                      touchTooltipData: LineTouchTooltipData(
+                        tooltipBgColor: Colors.transparent,
+                        tooltipPadding: EdgeInsets.all(0),
+                        fitInsideHorizontally: true,
+                        showOnTopOfTheChartBoxArea: true,
+                        getTooltipItems: (touchedSpots) {
+                          return touchedSpots.map((LineBarSpot touchedSpot) {
+                            final textStyle = TextStyle(
+                              color: ColorPalette.slate500,
+                              fontWeight: FontWeight.bold,
+                              fontSize: 12,
+                            );
+                            return LineTooltipItem(
+                              DateFormat('dd MMM yyyy').format(dateTime),
+                              textStyle,
+                            );
+                          }).toList();
+                        },
+                      ),
+                      handleBuiltInTouches: true,
+                    ),
+                    lineBarsData: [
+                      LineChartBarData(
+                        color: ColorPalette.primary,
+                        spots: spots,
+                        isCurved: true,
+                        preventCurveOverShooting: true,
+                        isStrokeCapRound: true,
+                        isStrokeJoinRound: true,
+                        barWidth: 1.2,
+                        belowBarData: BarAreaData(
+                          show: true,
+                          gradient: LinearGradient(
+                              begin: Alignment.topCenter,
+                              end: Alignment.bottomCenter,
+                              colors: [
+                                Color(0xFF5B8FF9),
+                                Colors.white
+                              ]
+                          ),
+                          spotsLine: BarAreaSpotsLine(
+                            show: true,
+                            applyCutOffY: true,
+                            flLineStyle: FlLine(
+                              color: ColorPalette.primary,
+                              strokeWidth: 1,
+                            ),
+                            checkToShowSpotLine: (spot) {
+                              if(spot.x == spotIndicator && !isShowLabel){
+                                return true;
+                              }
+                              return false;
+                            },
+                          )
+                        ),
+                        dotData: FlDotData(
+                          show: true,
+                          getDotPainter: (p0, p1, p2, p3) {
+                            return  FlDotCirclePainter(
+                              radius: 1,
+                              color: ColorPalette.white,
+                              strokeColor: ColorPalette.primary,
+                              strokeWidth: 2,
+                            );
+                          },
+                          checkToShowDot: (spot, barData) {
+                            if(spot.x == spotIndicator && !isShowLabel){
+                              return true;
+                            }
+                            return false;
+                          },
+                        ),
+                      ),
+                    ],
+                    titlesData: FlTitlesData(
+                      leftTitles: AxisTitles(
+                        sideTitles: SideTitles(
+                          showTitles: false,
+                          reservedSize: 56,
+                        ),
+                        drawBelowEverything: true,
+                      ),
+                      rightTitles: const AxisTitles(
+                        sideTitles: SideTitles(showTitles: false),
+                      ),
+                      bottomTitles: AxisTitles(
+                        sideTitles: SideTitles(
+                          showTitles: false,
+                          reservedSize: 36,
+                          interval: 1,
+                        ),
+                        drawBelowEverything: true,
+                      ),
+                      topTitles: const AxisTitles(
+                        sideTitles: SideTitles(showTitles: false),
+                      ),
+                    ),
+                    gridData: FlGridData(
+                        show: false
+                    ),
+                    borderData: FlBorderData(show: false),
+                  ),
+                );
+              },
+            ),
+          ),
+        ),
+      ],
+    );
+  }
+}

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

@@ -0,0 +1,789 @@
+import 'dart:math';
+
+import 'package:cims_apps/application/assets/path_assets.dart';
+import 'package:cims_apps/application/component/button/button_back.dart';
+import 'package:cims_apps/application/component/button/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/product/product_chart_view.dart';
+import 'package:flutter/material.dart';
+import 'package:group_button/group_button.dart';
+
+class Time {
+  int value;
+  String simpleName, completeName;
+
+  Time(this.value, this.simpleName, this.completeName);
+}
+
+class ProductView extends StatefulWidget {
+  final String investType;
+  const ProductView(this.investType, {super.key});
+
+  @override
+  State<ProductView> createState() => _ProductViewState();
+}
+
+class _ProductViewState extends State<ProductView> {
+  int selectedTab = 0;
+  Time selectedTime = Time(2, '1D', '1 day');
+  int selectedMachineType = 0;
+  int selectedMachineTime = 0;
+
+  List<Time> listTime = [
+    Time(2, '1D', '1 day'),
+    Time(30, '1M', '1 month'),
+    Time(90, '3M', '3 months'),
+    Time(365, '1Y', '1 year'),
+  ];
+
+  List<String> listTab = ['NAV', 'AUM'];
+
+  List<String> listMachine = ['Monthly Routine', 'Connect Once'];
+
+  List<Time> listMachineTime = [
+    Time(1, '1D', '1 year'),
+    Time(3, '1M', '3 year'),
+    Time(5, '3M', '5 year'),
+    Time(10, '1Y', '10 year'),
+  ];
+
+  TextEditingController machineController = TextEditingController();
+
+  GroupButtonController machineGroupButtonController = GroupButtonController(selectedIndex: 0);
+
+  List<String> listTopHoldings = [
+    'Bank Pembangunan Daerah Sulawesi Selatan dan Sulawesi Barat',
+    'PT. Bank Jabar Banten, TBK',
+    'PT. Bank Mega',
+    'PT. Bank Nagaria',
+    'PT. BPD Sulawesi Tengah'
+  ];
+
+  List<double> data = [];
+  double estimatedValue = 0;
+
+  void setEstimatedValue() {
+    double parseValue = double.parse(machineController.text.replaceAll('Rp ', '').replaceAll('.', ''));
+    int machineType = selectedMachineType == 0 ? 12 : 1;
+    setState(() {
+      estimatedValue = (machineType * (listMachineTime[selectedMachineTime].value) * ((parseValue * machineType) * 10/100)) + parseValue;
+    });
+  }
+
+  @override
+  void initState() {
+    machineController.text = NumberFormatter.numberCurrency(100000, 'Rp ', 'id_ID', decimalDigits: 0);
+    selectedTime = listTime[0];
+    setEstimatedValue();
+    List.generate(2, (index) => {
+      data.add((2500 + index - Random().nextInt(100)).toDouble())
+    });
+    // TODO: implement initState
+    super.initState();
+  }
+
+  @override
+  void dispose() {
+    machineController.dispose();
+    machineGroupButtonController.dispose();
+    // TODO: implement dispose
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      body: SizedBox(
+        width: SizeConfig.width,
+        height: SizeConfig.height,
+        child: Stack(
+          children: [
+            const ImageView(image: PathAssets.imgDashboardAccount),
+            Column(
+              children: [
+                const SizedBox(
+                  height: 50,
+                ),
+                const Padding(
+                  padding: EdgeInsets.symmetric(horizontal: 24),
+                  child: Row(
+                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                    children: [
+                      ButtonBack(),
+                      Wrap(
+                        spacing: 12,
+                        children: [
+                          Icon(Icons.search_rounded, color: ColorPalette.blue200, size: 32),
+                          Icon(Icons.file_download_outlined, color: ColorPalette.blue200, size: 32),
+                          Icon(Icons.star_outline_rounded, color: ColorPalette.blue200, size: 32)
+                        ],
+                      )
+                    ],
+                  ),
+                ),
+                const SizedBox(
+                  height: 24,
+                ),
+                headContainer(),
+                const SizedBox(
+                  height: 24,
+                ),
+                Expanded(
+                  child: contentContainer()
+                )
+              ],
+            )
+          ],
+        ),
+      ),
+      bottomNavigationBar: Padding(
+        padding: const EdgeInsets.symmetric(horizontal: 24),
+        child: ButtonView(
+          name: 'Buy',
+          onPressed: () {
+
+          },
+          height: SizeConfig.height * 0.06,
+          marginVertical: 16,
+        ),
+      ),
+    );
+  }
+
+  Widget headContainer() {
+    return Padding(
+        padding: const EdgeInsets.symmetric(horizontal: 24),
+        child: Row(
+          mainAxisAlignment: MainAxisAlignment.spaceBetween,
+          children: [
+            Expanded(
+              child: Row(
+                children: [
+                  ImageView(image: PathAssets.imgProduct, width: SizeConfig.width * .12),
+                  SizedBox(width: 8),
+                  Expanded(
+                    child: Text(
+                      'Gemilang Dana Kas Maxima',
+                      maxLines: 2,
+                      overflow: TextOverflow.ellipsis,
+                      style: TextStyle(
+                          color: Colors.white,
+                          fontWeight: FontWeight.w700,
+                          fontSize: 18
+                      ),
+                    ),
+                  )
+                ],
+              ),
+            ),
+            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)
+              ),
+              child: Text(
+                widget.investType,
+                style: TextStyle(
+                    color: ColorPalette.investTypeColor[widget.investType],
+                    fontWeight: FontWeight.w600
+                ),
+              ),
+            )
+          ],
+        ),
+      );
+  }
+
+  Widget contentContainer() {
+    return ClipRRect(
+      borderRadius: BorderRadius.circular(12),
+      child: Container(
+        decoration: BoxDecoration(
+          color: Colors.white,
+        ),
+        child: ListView(
+          children: [
+            ProductChartView(
+              tabType: listTab[selectedTab],
+              lastTime: selectedTime.completeName,
+              dataChart: data,
+            ),
+            Center(
+              child: Padding(
+                padding: const EdgeInsets.all(24),
+                child: switchTab(listTab, (value) {
+                  setState(() {
+                    selectedTab = value;
+                    data.clear();
+                    List.generate(selectedTime.value, (index) => {
+                      data.add((2500 + index - Random().nextInt(100)).toDouble())
+                    });
+                  });
+                }, selectedTab),
+              ),
+            ),
+            swithTime(),
+            const SizedBox(
+            height: 24,
+            ),
+            Padding(
+              padding: const EdgeInsets.symmetric(horizontal: 24),
+              child: Row(
+                mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                children: [
+                  columnInformation('CAGR 1Y', '3,88%'),
+                  columnInformation('Drawdown 1Y', '0%'),
+                  columnInformation('Expense Ratio', '1,99%')
+                ],
+              ),
+            ),
+            const SizedBox(
+              height: 16,
+            ),
+            Padding(
+              padding: const EdgeInsets.symmetric(horizontal: 24),
+              child: Row(
+                mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                children: [
+                  columnInformation('Total AUM', '3,88%'),
+                  columnInformation('Avg.Yield Dec 23', '6,44%'),
+                  columnInformation('Risk Level', 'Conservative')
+                ],
+              ),
+            ),
+            const SizedBox(
+              height: 24,
+            ),
+            cardInformation('Investment Information', informationInvest()),
+            const SizedBox(
+              height: 24,
+            ),
+            cardInformation('Investment Costs', investCost()),
+            const SizedBox(
+              height: 24,
+            ),
+            moreAction(),
+            const SizedBox(
+              height: 24,
+            ),
+            cardInformation('Time Machine', timeMachine()),
+            const SizedBox(
+              height: 24,
+            ),
+            topFiveHoldings(),
+            const SizedBox(
+              height: 24,
+            ),
+            cardInformation('Document', documentProduct()),
+          ],
+        ),
+      ),
+    );
+  }
+
+  Widget switchTab(List<String> dataTab, void Function(int value) onTap, int current) {
+    return Container(
+      width: SizeConfig.width,
+      decoration: BoxDecoration(
+        border: Border.all(
+          color: ColorPalette.slate200,
+        ),
+        borderRadius: BorderRadius.circular(80)
+      ),
+      child: Stack(
+        children: [
+          // AnimatedPositioned(
+          //   duration: const Duration(milliseconds: 200),
+          //   curve: Curves.fastOutSlowIn,
+          //   right: current == dataTab.length - 1 ? 0 : SizeConfig.width * current / dataTab.length - (12 * dataTab.length),
+          //   left:  current == 0 ? 0 : SizeConfig.width * current / dataTab.length - (12 * dataTab.length),
+          //   child: Container(
+          //     height: 35,
+          //     decoration: BoxDecoration(
+          //       color: ColorPalette.blue200,
+          //       borderRadius: BorderRadius.circular(80)
+          //     ),
+          //   ),
+          // ),
+          Container(
+            height: 35,
+            decoration: BoxDecoration(
+              borderRadius: BorderRadius.circular(80)
+            ),
+            child: Row(
+              children: dataTab.asMap().entries.map((e) => Expanded(
+                  child: GestureDetector(
+                      onTap: () {
+                        onTap(e.key);
+                      },
+                      child: AnimatedContainer(
+                        duration: const Duration(milliseconds: 300),
+                        height: 35,
+                        alignment: Alignment.center,
+                        decoration: BoxDecoration(
+                          borderRadius: BorderRadius.circular(80),
+                          color: e.key == current ? ColorPalette.blue200 : ColorPalette.white
+                        ),
+                        child: Text(
+                          e.value,
+                          textAlign: TextAlign.center,
+                          style: TextStyle(
+                            fontWeight: e.key == current ? FontWeight.w700 : FontWeight.w500,
+                            color: e.key == current ? ColorPalette.primary : ColorPalette.slate500
+                          ),
+                        ),
+                      )
+                  )
+              )).toList(),
+            ),
+          )
+        ],
+      ),
+    );
+  }
+
+  Widget swithTime() {
+    return Container(
+        color: ColorPalette.slate50,
+        alignment: Alignment.center,
+        child: SingleChildScrollView(
+          scrollDirection: Axis.horizontal,
+          padding: const EdgeInsets.symmetric(horizontal: 24),
+          child: Row(
+            mainAxisAlignment: MainAxisAlignment.center,
+            children: listTime.map((e) {
+              return GestureDetector(
+                onTap: () {
+                  setState(() {
+                    selectedTime = e;
+                    data.clear();
+                    List.generate(e.value, (index) => {
+                      data.add((2500 + index - Random().nextInt(100)).toDouble())
+                    });
+                  });
+                },
+                child: AnimatedContainer(
+                  duration: const Duration(milliseconds: 200),
+                  width: SizeConfig.width * .12,
+                  alignment: Alignment.center,
+                  padding: const EdgeInsets.symmetric(vertical: 4),
+                  decoration: BoxDecoration(
+                      borderRadius: BorderRadius.circular(4),
+                      color: selectedTime == e ? ColorPalette.primary : ColorPalette.slate50
+                  ),
+                  child: Text(e.simpleName, style: TextStyle(
+                      color: selectedTime == e ? ColorPalette.white : ColorPalette.slate400,
+                      fontWeight: FontWeight.w700
+                  )),
+                ),
+              );
+            }).toList(),
+          ),
+        )
+    );
+  }
+
+  Widget columnInformation(String title, String value) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.center,
+      children: [
+        rowInformation(title),
+        Row(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            Text(value)
+          ],
+        )
+      ],
+    );
+  }
+
+  Widget rowInformation(String title) {
+    return Row(
+      mainAxisAlignment: MainAxisAlignment.center,
+      children: [
+        Text(
+          title,
+          maxLines: 1,
+          style: const TextStyle(
+            color: ColorPalette.slate400,
+            fontWeight: FontWeight.w600
+          ),
+        ),
+        const SizedBox(width: 2),
+        const Icon(Icons.info_outline_rounded, size: 16, color: ColorPalette.slate400)
+      ],
+    );
+  }
+  
+  Widget cardInformation(String title, Widget child) {
+    return Container(
+      margin: const EdgeInsets.symmetric(horizontal: 24),
+      padding: const EdgeInsets.all(16),
+      decoration: BoxDecoration(
+        border: Border.all(color: ColorPalette.slate200),
+        borderRadius: BorderRadius.circular(12)
+      ),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          TextTitle(title: title, fontSize: 16),
+          const SizedBox(
+            height: 16,
+          ),
+          child
+        ],
+      ),
+    );
+  }
+
+  Widget informationInvest() {
+    return Column(
+      children: [
+        const Row(
+          mainAxisAlignment: MainAxisAlignment.spaceBetween,
+          children: [
+            Text(
+              'Minimum Purchase',
+              style: TextStyle(
+                color: ColorPalette.slate400,
+                fontWeight: FontWeight.w600
+              ),
+            ),
+            Text('Rp10.000')
+          ],
+        ),
+        Row(
+          mainAxisAlignment: MainAxisAlignment.spaceBetween,
+          children: [
+            rowInformation('Custodian Bank'),
+            const Text('HSBC INDONESIA')
+          ],
+        ),
+        Row(
+          mainAxisAlignment: MainAxisAlignment.spaceBetween,
+          children: [
+            rowInformation('Depository Bank'),
+            const Text('BCA')
+          ],
+        )
+      ],
+    );
+  }
+
+  Widget investCost(){
+    return Column(
+      children: [
+        const Row(
+          mainAxisAlignment: MainAxisAlignment.spaceBetween,
+          children: [
+            Text(
+              'Purchase Commission',
+              style: TextStyle(
+                  color: ColorPalette.slate400,
+                  fontWeight: FontWeight.w600
+              ),
+            ),
+            Text('Free',
+              style: TextStyle(
+                fontWeight: FontWeight.bold
+              ),
+            )
+          ],
+        ),
+        Row(
+          mainAxisAlignment: MainAxisAlignment.spaceBetween,
+          children: [
+            rowInformation('Sales Commission'),
+            const Text('Free',
+              style: TextStyle(
+                fontWeight: FontWeight.bold
+              ),
+            )
+          ],
+        ),
+      ],
+    );
+  }
+
+  Widget moreAction() {
+    return Padding(
+      padding: const EdgeInsets.symmetric(horizontal: 24),
+      child: Row(
+        children: [
+          Expanded(
+            child: ButtonView(
+              onPressed: () {
+
+              },
+              prefixIcon: Icon(Icons.space_dashboard_sharp),
+              backgroundColor: ColorPalette.blue50,
+              sizeBorderRadius: 8,
+              isSecondaryColor: false,
+              width: SizeConfig.width * .5,
+              heightWrapContent: true,
+              isOutlined: true,
+              widthPrefix: 10,
+              name: 'Routine Savings',
+              textSize: 14,
+              textAlign: TextAlign.start,
+              contentPadding: EdgeInsets.all(12),
+            )
+          ),
+          SizedBox(
+            width: 16,
+          ),
+          Expanded(
+              child: ButtonView(
+                onPressed: () {
+
+                },
+                prefixIcon: Icon(Icons.space_dashboard_sharp, color: ColorPalette.orange500),
+                widthPrefix: 10,
+                name: 'Compare Mutual Funds',
+                width: SizeConfig.width * .5,
+                heightWrapContent: true,
+                backgroundColor: ColorPalette.orange50,
+                sizeBorderRadius: 8,
+                isOutlined: true,
+                borderColor: ColorPalette.orange500,
+                textSize: 14,
+                textAlign: TextAlign.start,
+                textColor: ColorPalette.orange500,
+                contentPadding: EdgeInsets.all(12),
+              )
+          ),
+        ],
+      ),
+    );
+  }
+
+  Widget timeMachine() {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        switchTab(listMachine, (value) {
+            setState(() {
+              selectedMachineType = value;
+            });
+            setEstimatedValue();
+          },
+          selectedMachineType
+        ),
+        const Padding(
+          padding: EdgeInsets.only(top: 16, bottom: 8),
+          child: Text(
+            "Today's Investment Estimated Value",
+            style: TextStyle(
+              fontWeight: FontWeight.w600,
+              color: ColorPalette.slate800
+            ),
+          ),
+        ),
+        TextFormView(
+          name: '',
+          ctrl: machineController,
+          onChanged: (value) {
+            value = value.replaceAll('Rp ', '').replaceAll('.', '');
+            double parseValue = double.parse(value);
+            if(value.isNotEmpty){
+              machineController.text = NumberFormatter.numberCurrency(parseValue, 'Rp ', 'id_ID', decimalDigits: 0);
+            }else{
+              machineController.text = NumberFormatter.numberCurrency(0, 'Rp ', 'id_ID', decimalDigits: 0);
+            }
+            setEstimatedValue();
+          },
+          keyboardType: TextInputType.number,
+        ),
+        const Padding(
+          padding: EdgeInsets.only(top: 16, bottom: 8),
+          child: Text(
+            "How many years ago did you start investing?",
+            style: TextStyle(
+                fontWeight: FontWeight.w600,
+                color: ColorPalette.slate800
+            ),
+          ),
+        ),
+        Center(
+          child: GroupButton(
+            buttons: listMachineTime.map((e) => e.completeName).toList(),
+            controller: machineGroupButtonController,
+            onSelected: (value, index, isSelected) {
+              setState(() {
+                selectedMachineTime = index;
+              });
+              setEstimatedValue();
+            },
+            options: GroupButtonOptions(
+              buttonWidth: SizeConfig.width * .375,
+              mainGroupAlignment: MainGroupAlignment.spaceBetween,
+              groupRunAlignment: GroupRunAlignment.spaceBetween,
+              spacing: 16,
+              elevation: 0,
+              borderRadius: BorderRadius.circular(80),
+              selectedShadow: const [],
+              selectedColor: Colors.white,
+              selectedBorderColor: ColorPalette.primary,
+              selectedTextStyle: const TextStyle(
+                fontWeight: FontWeight.w700,
+                color: ColorPalette.primary
+              ),
+              unselectedShadow: const [],
+              unselectedBorderColor: ColorPalette.slate200,
+              unselectedTextStyle: const TextStyle(
+                fontWeight: FontWeight.w500,
+                color: ColorPalette.slate500
+              ),
+            ),
+          ),
+        ),
+        const Padding(
+          padding: EdgeInsets.only(top: 16, bottom: 8),
+          child: Text(
+            "Today's Investment Estimated Value",
+            style: TextStyle(
+                fontWeight: FontWeight.w600,
+                color: ColorPalette.slate500
+            ),
+          ),
+        ),
+        TextTitle(
+          title: NumberFormatter.numberCurrency(estimatedValue, 'Rp ', 'id_ID'),
+          fontSize: 24,
+          color: ColorPalette.primary,
+        )
+      ],
+    );
+  }
+
+  Widget topFiveHoldings() {
+    return Column(
+      children: [
+        const Padding(
+          padding: EdgeInsets.symmetric(horizontal: 24),
+          child: Row(
+            mainAxisAlignment: MainAxisAlignment.spaceBetween,
+            children: [
+              TextTitle(title: 'Top 5 Holdings'),
+              Text(
+                'As of 31 Dec 2023',
+                style: TextStyle(
+                  fontSize: 12,
+                  color: ColorPalette.slate400
+                ),
+              )
+            ],
+          ),
+        ),
+        const SizedBox(
+          height: 16,
+        ),
+        ...listTopHoldings.asMap().entries.map((e) {
+          return topProduct(e.key, e.value);
+        })
+      ],
+    );
+  }
+
+  Widget topProduct(int index, String name) {
+    return Column(
+      children: [
+        if(index != 0)...[
+          const Padding(
+            padding: EdgeInsets.symmetric(vertical: 16),
+            child: Divider(color: ColorPalette.slate200,),
+          )
+        ],
+        Padding(
+          padding: const EdgeInsets.symmetric(horizontal: 24),
+          child: Row(
+            children: [
+              Container(
+                alignment: Alignment.center,
+                padding: const EdgeInsets.symmetric(vertical: 4, horizontal: 11),
+                decoration: BoxDecoration(
+                  shape: BoxShape.circle,
+                  color: ColorPalette.blue50,
+                  border: Border.all(color: ColorPalette.blue200)
+                ),
+                child: Text(index.toString(), style: const TextStyle(color: ColorPalette.primary)),
+              ),
+              const SizedBox(
+                width: 16,
+              ),
+              Expanded(
+                child: Text(
+                  name,
+                  style: const TextStyle(
+                    color: ColorPalette.slate800,
+                    fontSize: 16
+                  ),
+                )
+              )
+            ],
+          ),
+        )
+      ],
+    );
+  }
+
+  Widget documentProduct() {
+    return Column(
+      children: [
+        Wrap(
+          runAlignment: WrapAlignment.spaceBetween,
+          alignment: WrapAlignment.spaceBetween,
+          children: [
+            SizedBox(
+              width: SizeConfig.width * .4,
+              child: const Row(
+                children: [
+                  Icon(Icons.file_copy_outlined, color: ColorPalette.primary),
+                  SizedBox(
+                    width: 16,
+                  ),
+                  Text(
+                    'Prospektus',
+                    style: TextStyle(
+                      color: ColorPalette.primary,
+                      fontWeight: FontWeight.w600
+                    ),
+                  )
+                ],
+              ),
+            ),
+            SizedBox(
+              width: SizeConfig.width * .4,
+              child: const Row(
+                children: [
+                  Icon(Icons.file_copy_outlined, color: ColorPalette.primary),
+                  SizedBox(
+                    width: 16,
+                  ),
+                  Expanded(
+                    child: Text(
+                      'Fun Fact Sheet',
+                      overflow: TextOverflow.ellipsis,
+                      style: TextStyle(
+                          color: ColorPalette.primary,
+                          fontWeight: FontWeight.w600
+                      ),
+                    ),
+                  )
+                ],
+              ),
+            )
+          ],
+        )
+      ],
+    );
+  }
+}

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

@@ -5,6 +5,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/registration_view.dart';
+import 'package:cims_apps/features/bottom_navigation_view.dart';
 import 'package:flutter/material.dart';
 
 class DashboardPublicView extends StatelessWidget {
@@ -68,7 +69,9 @@ class DashboardPublicView extends StatelessWidget {
                   isOutlined: true,
                   width: SizeConfig.width * .43,
                   height: SizeConfig.height * .06,
-                  onPressed: () {},
+                  onPressed: () {
+                    routePush(context, page: const BottomNavigationView());
+                  },
                 ),
                 ButtonView(
                   name: 'Sign Up',

pubspec.lock

@@ -49,6 +49,54 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.1.1"
+  camera:
+    dependency: "direct main"
+    description:
+      name: camera
+      sha256: "9499cbc2e51d8eb0beadc158b288380037618ce4e30c9acbc4fae1ac3ecb5797"
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.10.5+9"
+  camera_android:
+    dependency: transitive
+    description:
+      name: camera_android
+      sha256: "351429510121d179b9aac5a2e8cb525c3cd6c39f4d709c5f72dfb21726e52371"
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.10.8+16"
+  camera_avfoundation:
+    dependency: transitive
+    description:
+      name: camera_avfoundation
+      sha256: "608b56b0880722f703871329c4d7d4c2f379c8e2936940851df7fc041abc6f51"
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.9.13+10"
+  camera_platform_interface:
+    dependency: transitive
+    description:
+      name: camera_platform_interface
+      sha256: fceb2c36038b6392317b1d5790c6ba9e6ca9f1da3031181b8bea03882bf9387a
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.7.3"
+  camera_web:
+    dependency: transitive
+    description:
+      name: camera_web
+      sha256: f18ccfb33b2a7c49a52ad5aa3f07330b7422faaecbdfd9b9fe8e51182f6ad67d
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.3.2+4"
+  carousel_slider:
+    dependency: "direct main"
+    description:
+      name: carousel_slider
+      sha256: "9c695cc963bf1d04a47bd6021f68befce8970bcd61d24938e1fb0918cf5d9c42"
+      url: "https://pub.dev"
+    source: hosted
+    version: "4.2.1"
   characters:
     dependency: transitive
     description:
@@ -81,6 +129,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "3.1.1"
+  cross_file:
+    dependency: transitive
+    description:
+      name: cross_file
+      sha256: fedaadfa3a6996f75211d835aaeb8fede285dae94262485698afd832371b9a5e
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.3.3+8"
   crypto:
     dependency: transitive
     description:
@@ -97,6 +153,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.0.6"
+  equatable:
+    dependency: transitive
+    description:
+      name: equatable
+      sha256: c2b87cb7756efdf69892005af546c56c0b5037f54d2a88269b4f347a505e3ca2
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.0.5"
   fake_async:
     dependency: transitive
     description:
@@ -129,6 +193,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.1.0"
+  fl_chart:
+    dependency: "direct main"
+    description:
+      name: fl_chart
+      sha256: "5a74434cc83bf64346efb562f1a06eefaf1bcb530dc3d96a104f631a1eff8d79"
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.65.0"
   flutter:
     dependency: "direct main"
     description: flutter
@@ -150,6 +222,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "2.0.3"
+  flutter_plugin_android_lifecycle:
+    dependency: transitive
+    description:
+      name: flutter_plugin_android_lifecycle
+      sha256: b068ffc46f82a55844acfa4fdbb61fad72fa2aef0905548419d97f0f95c456da
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.0.17"
   flutter_svg:
     dependency: "direct main"
     description:
@@ -163,6 +243,19 @@ packages:
     description: flutter
     source: sdk
     version: "0.0.0"
+  flutter_web_plugins:
+    dependency: transitive
+    description: flutter
+    source: sdk
+    version: "0.0.0"
+  group_button:
+    dependency: "direct main"
+    description:
+      name: group_button
+      sha256: "0610fcf28ed122bfb4b410fce161a390f7f2531d55d1d65c5375982001415940"
+      url: "https://pub.dev"
+    source: hosted
+    version: "5.3.4"
   http:
     dependency: transitive
     description:
@@ -179,6 +272,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "4.0.2"
+  intl:
+    dependency: "direct main"
+    description:
+      name: intl
+      sha256: d6f56758b7d3014a48af9701c085700aac781a92a87a62b1333b46d8879661cf
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.19.0"
   js:
     dependency: transitive
     description:
@@ -227,6 +328,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.10.0"
+  nested:
+    dependency: transitive
+    description:
+      name: nested
+      sha256: "03bac4c528c64c95c722ec99280375a6f2fc708eec17c7b3f07253b626cd2a20"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.0.0"
   octo_image:
     dependency: transitive
     description:
@@ -236,7 +345,7 @@ packages:
     source: hosted
     version: "2.0.0"
   path:
-    dependency: transitive
+    dependency: "direct main"
     description:
       name: path
       sha256: "8829d8a55c13fc0e37127c29fedf290c102f4e40ae94ada574091fe0ff96c917"
@@ -260,7 +369,7 @@ packages:
     source: hosted
     version: "1.0.1"
   path_provider:
-    dependency: transitive
+    dependency: "direct main"
     description:
       name: path_provider
       sha256: b27217933eeeba8ff24845c34003b003b2b22151de3c908d0e679e8fe1aa078b
@@ -315,6 +424,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "6.0.2"
+  pinput:
+    dependency: "direct main"
+    description:
+      name: pinput
+      sha256: "543da5bfdefd9e06914a12100f8c9156f84cef3efc14bca507c49e966c5b813b"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.3.0"
   platform:
     dependency: transitive
     description:
@@ -339,6 +456,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "3.7.4"
+  provider:
+    dependency: "direct main"
+    description:
+      name: provider
+      sha256: "9a96a0a19b594dbc5bf0f1f27d2bc67d5f95957359b461cd9feb44ed6ae75096"
+      url: "https://pub.dev"
+    source: hosted
+    version: "6.1.1"
   remove_emoji_input_formatter:
     dependency: "direct main"
     description:
@@ -360,6 +485,14 @@ packages:
     description: flutter
     source: sdk
     version: "0.0.99"
+  smart_auth:
+    dependency: transitive
+    description:
+      name: smart_auth
+      sha256: a25229b38c02f733d0a4e98d941b42bed91a976cb589e934895e60ccfa674cf6
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.1.1"
   source_span:
     dependency: transitive
     description:
@@ -408,6 +541,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "2.1.2"
+  stream_transform:
+    dependency: transitive
+    description:
+      name: stream_transform
+      sha256: "14a00e794c7c11aa145a170587321aedce29769c08d7f58b1d141da75e3b1c6f"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.1.0"
   string_scanner:
     dependency: transitive
     description:
@@ -416,6 +557,22 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.2.0"
+  syncfusion_flutter_core:
+    dependency: transitive
+    description:
+      name: syncfusion_flutter_core
+      sha256: e8580e201c7197feac830b501889e877796a9fabbe20dcdbe90a981603939101
+      url: "https://pub.dev"
+    source: hosted
+    version: "24.2.4"
+  syncfusion_flutter_signaturepad:
+    dependency: "direct main"
+    description:
+      name: syncfusion_flutter_signaturepad
+      sha256: "878e1063b909a83c83677627261780d42d532d0b5e7e259d84da805008e7fb0d"
+      url: "https://pub.dev"
+    source: hosted
+    version: "24.2.4"
   synchronized:
     dependency: transitive
     description:
@@ -448,6 +605,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.3.2"
+  universal_platform:
+    dependency: transitive
+    description:
+      name: universal_platform
+      sha256: d315be0f6641898b280ffa34e2ddb14f3d12b1a37882557869646e0cc363d0cc
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.0.0+1"
   uuid:
     dependency: transitive
     description:

pubspec.yaml

@@ -39,6 +39,17 @@ dependencies:
   flutter_svg: ^1.1.6
   cached_network_image: ^3.2.3
   remove_emoji_input_formatter: ^0.0.1+1
+  fl_chart: ^0.65.0
+  intl: ^0.19.0
+  carousel_slider: ^4.2.1
+  provider: ^6.1.1
+  group_button: ^5.3.4
+  pinput: ^2.2.21
+  camera: ^0.10.5+9
+  path_provider: ^2.1.2
+  path: ^1.8.3
+  syncfusion_flutter_signaturepad: ^24.2.4
+