Merge branch 'dev' of https://git.empatnusabangsa.com/nugrohob825/cims_apps into bayu/dev

Reviewed-on: #21

lib/application/assets/path_assets.dart

@@ -64,6 +64,11 @@ class PathAssets {
   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';
 
@@ -94,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';
@@ -104,8 +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 imgExpandPurchase =
+      'assets/images/img-expand-purchase.png';
   static const String imgEmptyTransaction =
       'assets/images/img-empty-transaction.png';
+  static const String bgProfile = 'assets/images/bg-profile.png';
 
   static const Map<String, String> goalInvestIcon = {
     'Education': iconToga,

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/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/profile/model/list_menu_model.dart

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

lib/features/profile/view/profile_view.dart

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

lib/features/transaction/view/cancel_view.dart

@@ -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 = [];
 }