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

Reviewed-on: #22

lib/application/assets/path_assets.dart

@@ -60,17 +60,15 @@ 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';
   static const String iconShop = 'assets/icons/icon-shop.png';
+  static const String iconCard = 'assets/icons/icon-card.png';
+  static const String iconChat = 'assets/icons/icon-chat.png';
+  static const String iconLogout = 'assets/icons/icon-logout.png';
+  static const String iconProfile = 'assets/icons/icon-profile.png';
+  static const String iconSetting = 'assets/icons/icon-setting.png';
   static const String iconGadgetOutline =
       'assets/icons/icon-gadget-outline.png';
 
@@ -101,6 +99,7 @@ class PathAssets {
   static const String imgMoneyIncome = 'assets/images/img-money-income.png';
   static const String imgGrowing = 'assets/images/img-growing.png';
   static const String imgCat = 'assets/images/img-cat.png';
+  static const String imgCatOutlined = 'assets/images/img-cat-outlined.png';
   static const String imgDeer = 'assets/images/img-deer.png';
   static const String imgLion = 'assets/images/img-lion.png';
   static const String imgGuideBank = 'assets/images/img-guide-bank.png';
@@ -111,10 +110,11 @@ 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 =
+  static const String imgExpandPurchase =
-      'assets/images/img-dashboard-profile.png';
+      'assets/images/img-expand-purchase.png';
   static const String imgEmptyTransaction =
       'assets/images/img-empty-transaction.png';
+  static const String bgProfile = 'assets/images/bg-profile.png';
 
   static const Map<String, String> goalInvestIcon = {
     'Education': iconToga,

lib/application/component/list_tile/list_tile_view.dart

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

lib/application/component/numeric_pad/numeric_pad.dart

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

lib/application/component/text_form/text_form_view.dart

@@ -190,18 +190,6 @@ 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,20 +5,17 @@ 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,7 +75,6 @@ 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);
@@ -91,11 +90,9 @@ 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,
@@ -110,16 +107,4 @@ 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/core/utils/string_utils.dart

@@ -1,3 +1,6 @@
+import 'package:cims_apps/application/theme/color_palette.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
 import 'package:intl/intl.dart';
 
 class StringUtils {
@@ -23,4 +26,16 @@ class StringUtils {
     }
     return '--:--:--';
   }
+
+  static void iCopyToClipboard(BuildContext context,
+      {String? desc, required String text}) {
+    Clipboard.setData(ClipboardData(text: text));
+    ScaffoldMessenger.of(context)
+        .showSnackBar(SnackBar(
+          backgroundColor: ColorPalette.primary,
+          content: Text(desc ?? "Text copied to clipboard"),
+        ))
+        .closed
+        .then((value) => ScaffoldMessenger.of(context).removeCurrentSnackBar());
+  }
 }

lib/features/auth/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, left: 1, top: 1, bottom: 1),
+                            margin: const EdgeInsets.only(right: 16),
                             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/dashboard/dashboard_account/view/profile/view/profile_view.dart';
+import 'package:cims_apps/features/profile/view/profile_view.dart';
 import 'package:cims_apps/features/transaction/view/transaction_view.dart';
 import 'package:flutter/material.dart';
 

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

@@ -50,7 +50,7 @@ class _HomeViewState extends State<HomeView> {
   ];
 
   StepVerification listStepVerification =
-      StepVerification(1, ['Registration', '', 'Verification', '', 'Complete']);
+      StepVerification(0, ['Registration', 'Verification', 'Complete']);
 
   List<Article> listArticle = [
     Article(
@@ -69,90 +69,77 @@ class _HomeViewState extends State<HomeView> {
 
   @override
   Widget build(BuildContext context) {
-
     return Scaffold(
-      backgroundColor: ColorPalette.slate50,
+      backgroundColor: const Color(0xffF8FAFC),
-      body: CustomScrollView(
+      body: SizedBox(
-        slivers: [
+        width: SizeConfig.width,
-          SliverAppBar(
+        height: SizeConfig.height,
-            onStretchTrigger: () async {
+        child: Stack(
-            },
+          children: [
-            expandedHeight: 325,
+            const ImageView(image: PathAssets.imgDashboardAccount),
-            collapsedHeight: 325,
+            Column(
-            leading: const SizedBox(),
-            surfaceTintColor: ColorPalette.slate50,
-            backgroundColor: ColorPalette.slate50,
-            flexibleSpace: FlexibleSpaceBar(
-              background: 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: 24,
-                      ),
-                    ],
-                  )
-                ],
-              ),
-            ),
-            floating: true,
-            snap: true,
-          ),
-          SliverToBoxAdapter(
-            child:  Column(
               children: [
-                cardVerification(),
+                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,
                 ),
-                infoAndPromo(),
+                cardInvestType(),
                 const SizedBox(
-                  height: 24,
+                  height: 32,
+                ),
+                Expanded(
+                  child: ListView(
+                    padding: const EdgeInsets.all(0),
+                    children: [
+                      cardVerification(),
+                      const SizedBox(
+                        height: 24,
+                      ),
+                      infoAndPromo(),
+                      const SizedBox(
+                        height: 24,
+                      ),
+                      articles(),
+                    ],
+                  ),
                 ),
-                articles(),
               ],
-            ),
+            )
-          )
+          ],
-        ],
+        ),
       ),
     );
   }
@@ -292,10 +279,9 @@ class _HomeViewState extends State<HomeView> {
       child: Column(
         children: [
           stepVerification(),
-          if(listStepVerification.currentStep < 3)
+          const SizedBox(
-            const SizedBox(
+            height: 24,
-              height: 24,
+          ),
-            ),
           if (listStepVerification.currentStep == 1) ...[
             Row(
               mainAxisAlignment: MainAxisAlignment.spaceBetween,
@@ -305,7 +291,6 @@ class _HomeViewState extends State<HomeView> {
                     Icon(
                       Icons.verified,
                       size: 18,
-                      color: ColorPalette.slate300,
                     ),
                     SizedBox(
                       width: 12,
@@ -339,7 +324,6 @@ class _HomeViewState extends State<HomeView> {
                     Icon(
                       Icons.verified,
                       size: 18,
-                      color: ColorPalette.slate300,
                     ),
                     SizedBox(
                       width: 12,
@@ -404,11 +388,11 @@ class _HomeViewState extends State<HomeView> {
                   borderRadius: BorderRadius.circular(12)),
               child: Column(
                 children: [
-                  const Text(
+                  Text(
                     "Let's start registering your data to start mutual fund investment at PT Gemilang Indonesia",
                     style: TextStyle(color: ColorPalette.slate500),
                   ),
-                  const SizedBox(
+                  SizedBox(
                     height: 16,
                   ),
                   ButtonView(
@@ -416,9 +400,9 @@ class _HomeViewState extends State<HomeView> {
                     width: SizeConfig.width,
                     marginVertical: 0,
                     heightWrapContent: true,
-                    contentPadding: const EdgeInsets.all(12),
+                    contentPadding: EdgeInsets.all(12),
                     onPressed: () {
-                      routePush(context, page: const InitialRegistrationStep());
+                      routePush(context, page: InitialRegistrationStep());
                     },
                   )
                 ],
@@ -433,61 +417,57 @@ class _HomeViewState extends State<HomeView> {
   Widget stepVerification() {
     return Row(
       mainAxisAlignment: MainAxisAlignment.spaceBetween,
-      crossAxisAlignment: CrossAxisAlignment.start,
+      children: listStepVerification.nameStep.asMap().entries.map((e) {
-      children: List.generate(
+        return Row(
-        listStepVerification.nameStep.length,
+          crossAxisAlignment: CrossAxisAlignment.start,
-            (index) {
+          children: [
-          print(index % 2);
+            if (e.key != 0)
-          if (index % 2 == 0) {
+              SizedBox(
-            final currentStep = index ~/ 2;
+                width: 30,
-            return Column(
+                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,
+                      shape: BoxShape.circle,
-                    color: listStepVerification.currentStep <= currentStep
+                      color: listStepVerification.currentStep <= e.key
-                        ? Colors.white
+                          ? Colors.white
-                        : const Color(0xff2563EB),
-                    border: Border.all(
-                      color: listStepVerification.currentStep < currentStep
-                          ? const Color(0xffCBD5E1)
                           : const Color(0xff2563EB),
-                      width: 2,
+                      border: Border.all(
-                    ),
+                          color: listStepVerification.currentStep < e.key
-                  ),
+                              ? const Color(0xffCBD5E1)
-                  child: listStepVerification.currentStep <= currentStep
+                              : const Color(0xff2563EB),
+                          width: 2)),
+                  child: listStepVerification.currentStep <= e.key
                       ? const SizedBox()
                       : const Icon(
-                    Icons.done_rounded,
+                          Icons.done_rounded,
-                    color: Colors.white,
+                          color: Colors.white,
-                  ),
+                        ),
+                ),
+                const SizedBox(
+                  height: 8,
                 ),
-                const SizedBox(height: 8),
                 Text(
-                  listStepVerification.nameStep[index],
+                  e.value,
                   style: TextStyle(
-                    color: listStepVerification.currentStep == currentStep
+                      color: listStepVerification.currentStep == e.key
-                        ? const Color(0xff2563EB)
+                          ? const Color(0xff2563EB)
-                        : Colors.black,
+                          : Colors.black),
-                  ),
+                )
-                ),
               ],
-            );
+            ),
-          } else {
+          ],
-            return SizedBox(
+        );
-              width: 30,
+      }).toList(),
-              height: 30,
-              child: Divider(
-                color: listStepVerification.currentStep > index ~/ 2
-                    ? const Color(0xff2563EB)
-                    : const Color(0xffCBD5E1),
-              ),
-            );
-          }
-        },
-      ),
     );
   }
 
@@ -611,7 +591,7 @@ class _HomeViewState extends State<HomeView> {
                     color: ColorPalette.green100),
                 child: Text(
                   article.type,
-                  style: const TextStyle(
+                  style: 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,7 +13,6 @@ 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';
 
@@ -80,8 +79,6 @@ class _ProductViewState extends State<ProductView> {
     });
   }
 
-  double currentScroll = 0;
-
   @override
   void initState() {
     machineController.text = NumberFormatter.numberCurrency(100000, 'Rp ', 'id_ID', decimalDigits: 0);
@@ -107,106 +104,64 @@ class _ProductViewState extends State<ProductView> {
     return ChangeNotifierProvider(
       create: (context) => ProductViewModel(),
       child: Scaffold(
-        body: NotificationListener<ScrollNotification>(
+        body: SizedBox(
-          onNotification: (notification) {
+          child: Stack(
-            setState(() {
+            children: [
-              currentScroll = notification.metrics.pixels;
+              const ImageView(image: PathAssets.imgDashboardAccount),
-            });
+              Column(
-            return false;
+                children: [
-          },
+                  const SizedBox(
-          child: CustomScrollView(
+                    height: 50,
-            slivers: [
+                  ),
-              SliverAppBar(
+                  const Padding(
-                toolbarHeight: 70,
+                    padding: EdgeInsets.symmetric(horizontal: 24),
-                expandedHeight: 170,
+                    child: Row(
-                leadingWidth: 0,
+                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
-                floating: false,
+                      children: [
-                automaticallyImplyLeading: false,
+                        BackButtonView(),
-                title: AnimatedCrossFade(
+                        Wrap(
-                  firstChild:  Text(
+                          spacing: 12,
-                    widget.selectedProduct.name ?? '',
+                          children: [
-                    maxLines: 2,
+                            Icon(Icons.search_rounded, color: ColorPalette.blue200, size: 32),
-                    overflow: TextOverflow.ellipsis,
+                            Icon(Icons.file_download_outlined, color: ColorPalette.blue200, size: 32),
-                    style: TextStyle(
+                            Icon(Icons.star_outline_rounded, color: ColorPalette.blue200, size: 32)
-                        color: Colors.white,
+                          ],
-                        fontWeight: FontWeight.w700,
+                        )
-                        fontSize: 18
+                      ],
                     ),
                   ),
-                  secondChild: Padding(
+                  const SizedBox(
-                    padding: const EdgeInsets.only(left: 8),
+                    height: 24,
-                    child: BackButtonView(),
                   ),
-                  crossFadeState: currentScroll >= 85 ? CrossFadeState.showFirst : CrossFadeState.showSecond,
+                  headContainer(),
-                  duration: Duration(milliseconds: 200)
+                  const SizedBox(
-                ),
+                    height: 24,
-                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)
-                    ],
                   ),
-                  SizedBox(width: 24,)
+                  Expanded(
+                    child: contentContainer()
+                  )
                 ],
-                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(
+          Container(
-          height: SizeConfig.height * .1,
+            height: SizeConfig.height * .1,
-          padding: const EdgeInsets.symmetric(horizontal: 24),
+            padding: const EdgeInsets.symmetric(horizontal: 24),
-          child: ButtonView(
+            child: ButtonView(
-            name: 'Subscribe',
+              name: 'Subscribe',
-            onPressed: () {
+              onPressed: () {
-              showModalBottomSheet(
+                showModalBottomSheet(
-                context: context,
+                  context: context,
-                isScrollControlled: true,
+                  isScrollControlled: true,
-                builder: (context) => SelectGoalInvesting(),
+                  builder: (context) => SelectGoalInvesting(),
-              );
+                );
-            },
+              },
-            height: SizeConfig.height * 0.06,
+              height: SizeConfig.height * 0.06,
-            marginVertical: 16,
+              marginVertical: 16,
-          ),
+            ),
-        ) : SizedBox(),
+          ) : SizedBox(),
       ),
     );
   }
@@ -265,11 +220,8 @@ class _ProductViewState extends State<ProductView> {
         decoration: BoxDecoration(
           color: Colors.white,
         ),
-        child: Column(
+        child: ListView(
           children: [
-            const SizedBox(
-              height: 12,
-            ),
             ProductChartView(
               tabType: listTab[selectedTab],
               lastTime: selectedTime.completeName,

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

@@ -1,165 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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: 24.0,
+                bottom: 8.0,
                 left: 24.0,
                 right: 24.0,
               ),
@@ -59,7 +59,6 @@ class DashboardPublicView extends StatelessWidget {
                       image: PathAssets.icon1,
                       width: SizeConfig.width * .35,
                     ),
-                    SizedBox(height: SizeConfig.height * .02),
                     Align(
                         alignment: Alignment.center,
                         heightFactor: 1,
@@ -106,7 +105,7 @@ class DashboardPublicView extends StatelessWidget {
                         provider.loginGoogle(context);
                       },
                     ),
-                    SizedBox(height: SizeConfig.height * .07),
+                    SizedBox(height: SizeConfig.height * .1),
                     Row(
                       mainAxisAlignment: MainAxisAlignment.spaceBetween,
                       children: [

lib/features/profile/model/list_menu_model.dart

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

lib/features/profile/view/profile_view.dart

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

lib/features/transaction/view/cancel_view.dart

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

lib/features/transaction/view/done_view.dart

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

lib/features/transaction/view/onprocess_view.dart

@@ -1,5 +1,10 @@
+import 'package:cims_apps/application/assets/path_assets.dart';
 import 'package:cims_apps/application/component/card_transaction/card_transaction_view.dart';
 import 'package:cims_apps/application/component/card_transaction/empty_card_transaction.dart';
+import 'package:cims_apps/core/route/route.dart';
+import 'package:cims_apps/core/utils/number_formatter.dart';
+import 'package:cims_apps/core/utils/string_utils.dart';
+import 'package:cims_apps/features/transaction/view/subscribe_detail_view.dart';
 import 'package:cims_apps/features/transaction/viewmodel/transaction_viewmodel.dart';
 import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
@@ -19,12 +24,23 @@ class OnProcessView extends StatelessWidget {
             ),
           ...provider.listOnProcessTransaction.map((e) {
             return CardTransactionView(
+              onTap: () {
+                routePush(context,
+                    page: const SubscribeDetailView(
+                      type: 'virtual',
+                    ));
+              },
+              iconPath: PathAssets.iconHome,
+              type: 'Home',
+              amount: NumberFormatter.numberCurrency(
+                6000000,
+                'Rp ',
+                'id_ID',
+                decimalDigits: 0,
+              ),
+              timeTransaction: StringUtils.formatTime(DateTime.now()),
+              subs: '3 Subscription',
               step: 'on process',
-              type: 'type',
-              amount: 'amount',
-              iconPath: 'iconPath',
-              subs: 'subs',
-              onTap: () {},
             );
           }),
         ]);

lib/features/transaction/view/subscribe_detail_view.dart

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

lib/features/transaction/view/waiting_view.dart

@@ -1,8 +1,10 @@
 import 'package:cims_apps/application/assets/path_assets.dart';
 import 'package:cims_apps/application/component/card_transaction/card_transaction_view.dart';
 import 'package:cims_apps/application/component/card_transaction/empty_card_transaction.dart';
+import 'package:cims_apps/core/route/route.dart';
 import 'package:cims_apps/core/utils/number_formatter.dart';
 import 'package:cims_apps/core/utils/string_utils.dart';
+import 'package:cims_apps/features/transaction/view/subscribe_detail_view.dart';
 import 'package:cims_apps/features/transaction/viewmodel/transaction_viewmodel.dart';
 import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
@@ -19,7 +21,12 @@ class WaitingView extends StatelessWidget {
           children: [
             provider.listWaitingTransaction.isNotEmpty
                 ? CardTransactionView(
-                    onTap: () {},
+                    onTap: () {
+                      routePush(context,
+                          page: const SubscribeDetailView(
+                            type: 'normal',
+                          ));
+                    },
                     iconPath: PathAssets.iconEducation,
                     type: 'Education',
                     amount: NumberFormatter.numberCurrency(

lib/features/transaction/viewmodel/transaction_viewmodel.dart

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