fix: product view

lib/application/assets/path_assets.dart

@@ -60,6 +60,13 @@ class PathAssets {
   static const String iconNavigationProfile =
       'assets/icons/icon-navigation-profile.png';
   static const String iconRemove = 'assets/icons/icon-remove.png';
+  static const String iconCat = 'assets/icons/icon-cat.png';
+  static const String iconProfile = 'assets/icons/icon-profile.png';
+  static const String iconPadlock = 'assets/icons/icon-padlock.png';
+  static const String iconCard = 'assets/icons/icon-card.png';
+  static const String iconSetting = 'assets/icons/icon-setting.png';
+  static const String iconFaqs = 'assets/icons/icon-faqs.png';
+  static const String iconLogout = 'assets/icons/icon-logout.png';
   static const String iconEducation = 'assets/icons/icon-education.png';
   static const String iconFund = 'assets/icons/icon-fund.png';
   static const String iconHome = 'assets/icons/icon-home.png';
@@ -104,6 +111,8 @@ class PathAssets {
       'assets/images/img-payment-success.png';
   static const String frameSignature = 'assets/images/frame-signature.png';
   static const String imgFinish = 'assets/images/img-finish.png';
+  static const String imgDashboardProfile =
+      'assets/images/img-dashboard-profile.png';
   static const String imgEmptyTransaction =
       'assets/images/img-empty-transaction.png';
 

lib/application/component/numeric_pad/numeric_pad.dart

@@ -1,5 +1,3 @@
-import 'package:cims_apps/application/assets/path_assets.dart';
-import 'package:cims_apps/application/component/image/image_view.dart';
 import 'package:cims_apps/application/theme/color_palette.dart';
 import 'package:cims_apps/core/utils/size_config.dart';
 import 'package:flutter/material.dart';
@@ -86,7 +84,7 @@ class NumericPad extends StatelessWidget {
   }
 
   Widget spaceWidget() {
-    return Expanded(
+    return const Expanded(
         child: SizedBox()
     );
   }
@@ -98,11 +96,12 @@ class NumericPad extends StatelessWidget {
             onNumberSelected(number);
           },
           child: Container(
+            color: Colors.transparent,
             padding: EdgeInsets.symmetric(vertical: SizeConfig.height * .028),
             child: Text(
               number,
               textAlign: TextAlign.center,
-              style: TextStyle(
+              style: const TextStyle(
                 fontSize: 28,
                 fontWeight: FontWeight.bold,
                 color: ColorPalette.slate800
@@ -119,10 +118,14 @@ class NumericPad extends StatelessWidget {
           onTap: () {
             onNumberSelected('');
           },
-          child: Icon(
-            Icons.backspace_outlined,
-            size: 28,
-            color: ColorPalette.slate800,
+          child: Container(
+            color: Colors.transparent,
+            padding: EdgeInsets.symmetric(vertical: SizeConfig.height * .028),
+            child: const Icon(
+              Icons.backspace_outlined,
+              size: 28,
+              color: ColorPalette.slate800,
+            ),
           ),
         )
     );

lib/application/component/text_form/text_form_view.dart

@@ -190,6 +190,18 @@ class TextFormView extends StatelessWidget {
                     color: focusedBorderColor ?? ColorPalette.greyBorder,
                   ),
                 ),
+                errorBorder: OutlineInputBorder(
+                  borderRadius: _borderRadius,
+                  borderSide: BorderSide(
+                      color: ColorPalette.red600
+                  )
+                ),
+                focusedErrorBorder: OutlineInputBorder(
+                  borderRadius: _borderRadius,
+                  borderSide: BorderSide(
+                    color: ColorPalette.red600
+                  )
+                ),
                 border: OutlineInputBorder(borderRadius: _borderRadius),
                 suffixIcon: suffixIcon,
                 prefixIcon: prefixIcon,

lib/application/component/text_title/text_title.dart

@@ -5,17 +5,20 @@ class TextTitle extends StatelessWidget {
   final String title;
   final Color? color;
   final double? fontSize;
+  final TextAlign? textAlign;
   const TextTitle({
     Key? key,
     required this.title,
     this.color,
     this.fontSize,
+    this.textAlign,
   }) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
     return Text(
       title,
+      textAlign: textAlign,
       style: TextStyle(
         fontSize: fontSize ?? 20,
         fontWeight: FontWeight.w700,

lib/application/theme/color_palette.dart

@@ -75,6 +75,7 @@ class ColorPalette {
   static const Color backgroundBlueLight = Color(0xFFEBF3FD);
   static const Color blue50 = Color(0xFFEFF6FF);
   static const Color blue200 = Color(0xFFBFDBFE);
+  static const Color blue600 = Color(0xFF2563EB);
   static const Color blue900 = Color(0xFF1E3A8A);
   static const Color slate50 = Color(0xFFF8FAFC);
   static const Color slate200 = Color(0xFFE2E8F0);
@@ -90,9 +91,11 @@ class ColorPalette {
   static const Color cyan100 = Color(0xFFCFFAFE);
   static const Color cyan500 = Color(0xFF06B6D4);
   static const Color green100 = Color(0xFFDCFCE7);
+  static const Color green300 = Color(0xFF86EFAC);
   static const Color green400 = Color(0xFF4ADE80);
   static const Color green500 = Color(0xFF16A34A);
-  static const Color red600 = Color(0xffDC2626);
+  static const Color red600 = Color(0xFFDC2626);
+  static const Color red50 = Color(0xFFFEF2F2);
 
   static const Map<String, Color> investTypeColor = {
     'Money Market': purple500,
@@ -107,4 +110,16 @@ class ColorPalette {
     'Sharia': green100,
     'Bonds': cyan100
   };
+
+  static const Map<String, Color> riskColor = {
+    'Moderate': orange500,
+    'Conservative': green500,
+    'Aggressive': cyan500
+  };
+
+  static const Map<String, Color> textRiskColor = {
+    'Moderate': orange500,
+    'Conservative': green300,
+    'Aggressive': cyan500
+  };
 }

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

@@ -52,7 +52,7 @@ class PhoneNumberView extends StatelessWidget {
                             width: SizeConfig.width * .23,
                             padding:
                                 const EdgeInsets.symmetric(horizontal: 16.0),
-                            margin: const EdgeInsets.only(right: 16),
+                            margin: const EdgeInsets.only(right: 16, left: 1, top: 1, bottom: 1),
                             decoration: const BoxDecoration(
                                 color: ColorPalette.grey,
                                 borderRadius: BorderRadius.only(

lib/features/bottom_navigation_view.dart

@@ -4,7 +4,7 @@ import 'package:cims_apps/core/utils/size_config.dart';
 import 'package:cims_apps/features/dashboard/dashboard_account/view/homepage/homepage_view.dart';
 import 'package:cims_apps/features/dashboard/dashboard_account/view/plan/view/plan_view.dart';
 import 'package:cims_apps/features/dashboard/dashboard_account/view/portfolio/portfolio_view.dart';
-import 'package:cims_apps/features/profile/view/profile_view.dart';
+import 'package:cims_apps/features/dashboard/dashboard_account/view/profile/view/profile_view.dart';
 import 'package:cims_apps/features/transaction/view/transaction_view.dart';
 import 'package:flutter/material.dart';
 

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

@@ -50,7 +50,7 @@ class _HomeViewState extends State<HomeView> {
   ];
 
   StepVerification listStepVerification =
-      StepVerification(0, ['Registration', 'Verification', 'Complete']);
+      StepVerification(1, ['Registration', '', 'Verification', '', 'Complete']);
 
   List<Article> listArticle = [
     Article(
@@ -69,77 +69,90 @@ class _HomeViewState extends State<HomeView> {
 
   @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,
+      backgroundColor: ColorPalette.slate50,
+      body: CustomScrollView(
+        slivers: [
+          SliverAppBar(
+            onStretchTrigger: () async {
+            },
+            expandedHeight: 325,
+            collapsedHeight: 325,
+            leading: const SizedBox(),
+            surfaceTintColor: ColorPalette.slate50,
+            backgroundColor: ColorPalette.slate50,
+            flexibleSpace: FlexibleSpaceBar(
+              background: Stack(
+                children: [
+                  const ImageView(image: PathAssets.imgDashboardAccount),
+                  Column(
                     children: [
-                      const Text(
-                        'Home',
-                        style: TextStyle(
-                            color: Colors.white,
-                            fontSize: 20,
-                            fontWeight: FontWeight.w700),
+                      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: 24,
                       ),
-                      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(),
-                ),
+                  )
+                ],
+              ),
+            ),
+            floating: true,
+            snap: true,
+          ),
+          SliverToBoxAdapter(
+            child:  Column(
+              children: [
+                cardVerification(),
                 const SizedBox(
                   height: 24,
                 ),
-                cardInvestType(),
+                infoAndPromo(),
                 const SizedBox(
-                  height: 32,
-                ),
-                Expanded(
-                  child: ListView(
-                    padding: const EdgeInsets.all(0),
-                    children: [
-                      cardVerification(),
-                      const SizedBox(
-                        height: 24,
-                      ),
-                      infoAndPromo(),
-                      const SizedBox(
-                        height: 24,
-                      ),
-                      articles(),
-                    ],
-                  ),
+                  height: 24,
                 ),
+                articles(),
               ],
-            )
-          ],
-        ),
+            ),
+          )
+        ],
       ),
     );
   }
@@ -279,9 +292,10 @@ class _HomeViewState extends State<HomeView> {
       child: Column(
         children: [
           stepVerification(),
-          const SizedBox(
-            height: 24,
-          ),
+          if(listStepVerification.currentStep < 3)
+            const SizedBox(
+              height: 24,
+            ),
           if (listStepVerification.currentStep == 1) ...[
             Row(
               mainAxisAlignment: MainAxisAlignment.spaceBetween,
@@ -291,6 +305,7 @@ class _HomeViewState extends State<HomeView> {
                     Icon(
                       Icons.verified,
                       size: 18,
+                      color: ColorPalette.slate300,
                     ),
                     SizedBox(
                       width: 12,
@@ -324,6 +339,7 @@ class _HomeViewState extends State<HomeView> {
                     Icon(
                       Icons.verified,
                       size: 18,
+                      color: ColorPalette.slate300,
                     ),
                     SizedBox(
                       width: 12,
@@ -388,11 +404,11 @@ class _HomeViewState extends State<HomeView> {
                   borderRadius: BorderRadius.circular(12)),
               child: Column(
                 children: [
-                  Text(
+                  const Text(
                     "Let's start registering your data to start mutual fund investment at PT Gemilang Indonesia",
                     style: TextStyle(color: ColorPalette.slate500),
                   ),
-                  SizedBox(
+                  const SizedBox(
                     height: 16,
                   ),
                   ButtonView(
@@ -400,9 +416,9 @@ class _HomeViewState extends State<HomeView> {
                     width: SizeConfig.width,
                     marginVertical: 0,
                     heightWrapContent: true,
-                    contentPadding: EdgeInsets.all(12),
+                    contentPadding: const EdgeInsets.all(12),
                     onPressed: () {
-                      routePush(context, page: InitialRegistrationStep());
+                      routePush(context, page: const InitialRegistrationStep());
                     },
                   )
                 ],
@@ -417,57 +433,61 @@ class _HomeViewState extends State<HomeView> {
   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(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: List.generate(
+        listStepVerification.nameStep.length,
+            (index) {
+          print(index % 2);
+          if (index % 2 == 0) {
+            final currentStep = index ~/ 2;
+            return Column(
               children: [
                 Container(
                   width: 30,
                   height: 30,
                   decoration: BoxDecoration(
-                      shape: BoxShape.circle,
-                      color: listStepVerification.currentStep <= e.key
-                          ? Colors.white
+                    shape: BoxShape.circle,
+                    color: listStepVerification.currentStep <= currentStep
+                        ? Colors.white
+                        : const Color(0xff2563EB),
+                    border: Border.all(
+                      color: listStepVerification.currentStep < currentStep
+                          ? const Color(0xffCBD5E1)
                           : const Color(0xff2563EB),
-                      border: Border.all(
-                          color: listStepVerification.currentStep < e.key
-                              ? const Color(0xffCBD5E1)
-                              : const Color(0xff2563EB),
-                          width: 2)),
-                  child: listStepVerification.currentStep <= e.key
+                      width: 2,
+                    ),
+                  ),
+                  child: listStepVerification.currentStep <= currentStep
                       ? const SizedBox()
                       : const Icon(
-                          Icons.done_rounded,
-                          color: Colors.white,
-                        ),
-                ),
-                const SizedBox(
-                  height: 8,
+                    Icons.done_rounded,
+                    color: Colors.white,
+                  ),
                 ),
+                const SizedBox(height: 8),
                 Text(
-                  e.value,
+                  listStepVerification.nameStep[index],
                   style: TextStyle(
-                      color: listStepVerification.currentStep == e.key
-                          ? const Color(0xff2563EB)
-                          : Colors.black),
-                )
+                    color: listStepVerification.currentStep == currentStep
+                        ? const Color(0xff2563EB)
+                        : Colors.black,
+                  ),
+                ),
               ],
-            ),
-          ],
-        );
-      }).toList(),
+            );
+          } else {
+            return SizedBox(
+              width: 30,
+              height: 30,
+              child: Divider(
+                color: listStepVerification.currentStep > index ~/ 2
+                    ? const Color(0xff2563EB)
+                    : const Color(0xffCBD5E1),
+              ),
+            );
+          }
+        },
+      ),
     );
   }
 
@@ -591,7 +611,7 @@ class _HomeViewState extends State<HomeView> {
                     color: ColorPalette.green100),
                 child: Text(
                   article.type,
-                  style: TextStyle(
+                  style: const TextStyle(
                       fontWeight: FontWeight.w600,
                       color: ColorPalette.green500),
                 ),

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

@@ -388,7 +388,7 @@ class _PortofolioViewState extends State<PortofolioView> {
   Widget cardPortfolio() {
     return GestureDetector(
       onTap: () {
-        routePush(context, page: const PortfolioDetailView());
+        // routePush(context, page: const PortfolioDetailView());
       },
       child: Container(
         margin: const EdgeInsets.symmetric(horizontal: 24),

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

@@ -13,6 +13,7 @@ import 'package:cims_apps/features/dashboard/dashboard_account/view/product/view
 import 'package:cims_apps/features/dashboard/dashboard_account/view/product/view/step_subscribe/select_goal_investing.dart';
 import 'package:cims_apps/features/dashboard/dashboard_account/view/product/view_model/product_view_model.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
 import 'package:group_button/group_button.dart';
 import 'package:provider/provider.dart';
 
@@ -79,6 +80,8 @@ class _ProductViewState extends State<ProductView> {
     });
   }
 
+  double currentScroll = 0;
+
   @override
   void initState() {
     machineController.text = NumberFormatter.numberCurrency(100000, 'Rp ', 'id_ID', decimalDigits: 0);
@@ -104,64 +107,106 @@ class _ProductViewState extends State<ProductView> {
     return ChangeNotifierProvider(
       create: (context) => ProductViewModel(),
       child: Scaffold(
-        body: SizedBox(
-          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: [
-                        BackButtonView(),
-                        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)
-                          ],
-                        )
-                      ],
+        body: NotificationListener<ScrollNotification>(
+          onNotification: (notification) {
+            setState(() {
+              currentScroll = notification.metrics.pixels;
+            });
+            return false;
+          },
+          child: CustomScrollView(
+            slivers: [
+              SliverAppBar(
+                toolbarHeight: 70,
+                expandedHeight: 170,
+                leadingWidth: 0,
+                floating: false,
+                automaticallyImplyLeading: false,
+                title: AnimatedCrossFade(
+                  firstChild:  Text(
+                    widget.selectedProduct.name ?? '',
+                    maxLines: 2,
+                    overflow: TextOverflow.ellipsis,
+                    style: TextStyle(
+                        color: Colors.white,
+                        fontWeight: FontWeight.w700,
+                        fontSize: 18
                     ),
                   ),
-                  const SizedBox(
-                    height: 24,
+                  secondChild: Padding(
+                    padding: const EdgeInsets.only(left: 8),
+                    child: BackButtonView(),
                   ),
-                  headContainer(),
-                  const SizedBox(
-                    height: 24,
+                  crossFadeState: currentScroll >= 85 ? CrossFadeState.showFirst : CrossFadeState.showSecond,
+                  duration: Duration(milliseconds: 200)
+                ),
+                centerTitle: false,
+                snap: false,
+                pinned: true,
+                backgroundColor: Color(0xFF1745C8).withOpacity(currentScroll >= 95 ? 1 : currentScroll / 95),
+                surfaceTintColor: ColorPalette.primary,
+                actions: [
+                  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)
+                    ],
                   ),
-                  Expanded(
-                    child: contentContainer()
-                  )
+                  SizedBox(width: 24,)
                 ],
+                flexibleSpace: Opacity(
+                  opacity: currentScroll > 0 ? ((95 - currentScroll) / 95) > 0.01 ? ((95 - currentScroll) / 95) : 0 : 1,
+                  child: Stack(
+                    children: [
+                      ImageView(image: PathAssets.imgDashboardAccount, width: SizeConfig.width, height: 200),
+                      Column(
+                        mainAxisAlignment: MainAxisAlignment.end,
+                        children: [
+                          headContainer(),
+                          const SizedBox(
+                            height: 24,
+                          ),
+                          Container(
+                            height: 12,
+                            decoration: BoxDecoration(
+                                color: Colors.white,
+                                borderRadius: BorderRadius.only(
+                                    topLeft: Radius.circular(12),
+                                    topRight: Radius.circular(12)
+                                )
+                            ),
+                          )
+                        ],
+                      )
+                    ],
+                  ),
+                ),
+              ),
+              SliverToBoxAdapter(
+                child: contentContainer(),
               )
             ],
           ),
         ),
         bottomNavigationBar: !widget.seeMore ?
-          Container(
-            height: SizeConfig.height * .1,
-            padding: const EdgeInsets.symmetric(horizontal: 24),
-            child: ButtonView(
-              name: 'Subscribe',
-              onPressed: () {
-                showModalBottomSheet(
-                  context: context,
-                  isScrollControlled: true,
-                  builder: (context) => SelectGoalInvesting(),
-                );
-              },
-              height: SizeConfig.height * 0.06,
-              marginVertical: 16,
-            ),
-          ) : SizedBox(),
+        Container(
+          height: SizeConfig.height * .1,
+          padding: const EdgeInsets.symmetric(horizontal: 24),
+          child: ButtonView(
+            name: 'Subscribe',
+            onPressed: () {
+              showModalBottomSheet(
+                context: context,
+                isScrollControlled: true,
+                builder: (context) => SelectGoalInvesting(),
+              );
+            },
+            height: SizeConfig.height * 0.06,
+            marginVertical: 16,
+          ),
+        ) : SizedBox(),
       ),
     );
   }
@@ -220,8 +265,11 @@ class _ProductViewState extends State<ProductView> {
         decoration: BoxDecoration(
           color: Colors.white,
         ),
-        child: ListView(
+        child: Column(
           children: [
+            const SizedBox(
+              height: 12,
+            ),
             ProductChartView(
               tabType: listTab[selectedTab],
               lastTime: selectedTime.completeName,

lib/features/dashboard/dashboard_account/view/profile/view/profile_view.dart

@@ -0,0 +1,165 @@
+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/utils/size_config.dart';
+import 'package:cims_apps/features/dashboard/dashboard_account/view/profile/view_model/profile_view_model.dart';
+import 'package:flutter/material.dart';
+import 'package:provider/provider.dart';
+
+class RouteNavigation {
+  String icon;
+  String title;
+  Widget destination;
+
+  RouteNavigation(this.icon, this.title, this.destination);
+}
+
+class ProfileView extends StatelessWidget {
+  const ProfileView({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    List<RouteNavigation> listGeneral = [
+      RouteNavigation(PathAssets.iconProfile, 'Personal Data', Container()),
+      RouteNavigation(PathAssets.iconPadlock, 'Change Password', Container()),
+      RouteNavigation(PathAssets.iconCard, 'Add Card', Container()),
+      RouteNavigation(PathAssets.iconSetting, 'Settings', Container())
+    ];
+
+    List<RouteNavigation> listPreferences = [
+      RouteNavigation(PathAssets.iconFaqs, 'FAQs', Container()),
+      RouteNavigation(PathAssets.iconLogout, 'Log Out', Container())
+    ];
+
+    return Provider(
+      create: (context) => ProfileViewModel(),
+      child: Scaffold(
+        body: SizedBox(
+          width: SizeConfig.width,
+          height: SizeConfig.height,
+          child: Stack(
+            children: [
+              const Positioned(
+                left: 0,
+                right: 0,
+                top: 0,
+                bottom: 0,
+                child: ImageView(image: PathAssets.imgDashboardProfile)
+              ),
+              Consumer<ProfileViewModel>(
+                builder: (context, provider, child) {
+                  return ListView(
+                    padding: const EdgeInsets.all(0),
+                    children: [
+                      const SizedBox(
+                        height: 50,
+                      ),
+                      const Center(
+                        child: TextTitle(title: 'Profile', color: Colors.white, fontSize: 20,)
+                      ),
+                      SizedBox(
+                        height: SizeConfig.height * 0.05,
+                      ),
+                      Container(
+                        alignment: Alignment.center,
+                        decoration: BoxDecoration(
+                          shape: BoxShape.circle,
+                          color: Colors.white,
+                          border: Border.all(color: ColorPalette.slate200, width: 1.5)
+                        ),
+                        padding: const EdgeInsets.all(8),
+                        child: ImageView(image: PathAssets.iconCat, width: SizeConfig.width * 0.14,),
+                      ),
+                      const SizedBox(height: 16),
+                      Center(
+                        child: TextTitle(title: provider.getUser.name ?? '', color: Colors.white, fontSize: 24,)),
+                      Text('Investor ${provider.getUser.risk}',
+                        textAlign: TextAlign.center,
+                        style: TextStyle(
+                          fontSize: 16,
+                          color: ColorPalette.textRiskColor[provider.getUser.risk]
+                        ),
+                      ),
+                      const SizedBox(height: 24),
+                      boxNavigation('General', listGeneral),
+                      const SizedBox(height: 24),
+                      boxNavigation('Preferences', listPreferences)
+                    ],
+                  );
+                }
+              )
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+
+  Widget boxNavigation(String title, List<RouteNavigation> list) {
+    return Container(
+      padding: const EdgeInsets.all(16),
+      margin: const EdgeInsets.symmetric(horizontal: 24),
+      decoration: BoxDecoration(
+        color: Colors.white,
+        borderRadius: BorderRadius.circular(12),
+      ),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Text(title,
+            style: const TextStyle(
+                fontWeight: FontWeight.w700,
+                color: ColorPalette.slate400
+            ),
+          ),
+          const SizedBox(height: 16),
+          Wrap(
+            runSpacing: 16,
+            children: list.map((e) {
+              return rowNavigation(
+                  e.icon,
+                  e.title,
+                  e.destination
+              );
+            }).toList(),
+          )
+        ],
+      ),
+    );
+  }
+
+  Widget rowNavigation(String icon, String text, Widget destination) {
+    bool isLogout = text == 'Log Out';
+    Color textColor = isLogout ? ColorPalette.red600 : ColorPalette.slate800;
+    Color bgLeadingColor = isLogout ? ColorPalette.red50 : ColorPalette.blue50;
+    Color iconColor = isLogout ? ColorPalette.red600 : ColorPalette.blue600;
+
+    return Row(
+      children: [
+        Container(
+          alignment: Alignment.center,
+          padding: const EdgeInsets.all(4),
+          decoration: BoxDecoration(
+            shape: BoxShape.circle,
+            color: bgLeadingColor
+          ),
+          child: Image.asset(icon, width: SizeConfig.width * 0.05, color: iconColor)
+        ),
+        Expanded(
+          child: Padding(
+            padding: const EdgeInsets.symmetric(horizontal: 16),
+            child: Text(text,
+              style: TextStyle(
+                fontWeight: FontWeight.w600,
+                fontSize: 16,
+                color: textColor
+              ),
+            ),
+          ),
+        ),
+        const Icon(Icons.chevron_right_outlined, size: 28, color: ColorPalette.slate400)
+      ],
+    );
+  }
+}

lib/features/dashboard/dashboard_account/view/profile/view_model/profile_view_model.dart

@@ -0,0 +1,11 @@
+class User {
+  String? name, risk;
+
+  User({this.name, this.risk});
+}
+
+class ProfileViewModel {
+  static final User _user = User(name: 'Muhammad Rosyidin', risk: 'Conservative');
+
+  User get getUser => _user;
+}

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

@@ -44,7 +44,7 @@ class DashboardPublicView extends StatelessWidget {
           return Scaffold(
             body: SingleChildScrollView(
               padding: const EdgeInsets.only(
-                bottom: 8.0,
+                bottom: 24.0,
                 left: 24.0,
                 right: 24.0,
               ),
@@ -59,6 +59,7 @@ class DashboardPublicView extends StatelessWidget {
                       image: PathAssets.icon1,
                       width: SizeConfig.width * .35,
                     ),
+                    SizedBox(height: SizeConfig.height * .02),
                     Align(
                         alignment: Alignment.center,
                         heightFactor: 1,
@@ -105,7 +106,7 @@ class DashboardPublicView extends StatelessWidget {
                         provider.loginGoogle(context);
                       },
                     ),
-                    SizedBox(height: SizeConfig.height * .1),
+                    SizedBox(height: SizeConfig.height * .07),
                     Row(
                       mainAxisAlignment: MainAxisAlignment.spaceBetween,
                       children: [

lib/features/profile/view/profile_view.dart

@@ -1,14 +0,0 @@
-import 'package:cims_apps/application/component/custom_app_bar/custom_app_bar.dart';
-import 'package:cims_apps/core/utils/size_config.dart';
-import 'package:flutter/material.dart';
-
-class ProfileView extends StatelessWidget {
-  const ProfileView({Key? key}) : super(key: key);
-
-  @override
-  Widget build(BuildContext context) {
-    return Scaffold(
-      appBar: CustomAppBar(height: SizeConfig.height * .08, title: 'Profile'),
-    );
-  }
-}