lib/application/component/date_picker/date_picker_view.dart

@@ -0,0 +1,144 @@
+import 'package:calendar_date_picker2/calendar_date_picker2.dart';
+import 'package:cims_apps/application/component/button/button_view.dart';
+import 'package:cims_apps/application/component/text_form/text_form_view.dart';
+import 'package:cims_apps/application/theme/color_palette.dart';
+import 'package:cims_apps/core/utils/size_config.dart';
+import 'package:flutter/material.dart';
+import 'package:intl/intl.dart';
+
+class DatePickerView extends StatelessWidget {
+  final String name;
+  final TextEditingController ctrl;
+  final DateTime? minDate, maxDate;
+  final String? hintText, buttonName;
+  final bool isMultipleSelection, enabled;
+  final List<DateTime>? initialValue;
+  final ValueChanged<OnChangedDatePickerModel>? onChanged;
+  final ValueChanged<List<DateTime?>>? onFinish;
+  final FormFieldValidator<String>? validatorDate;
+  const DatePickerView(
+      {Key? key,
+      required this.name,
+      required this.ctrl,
+      this.minDate,
+      this.maxDate,
+      this.hintText,
+      this.buttonName,
+      required this.isMultipleSelection,
+      required this.enabled,
+      this.initialValue,
+      this.onChanged,
+      this.onFinish,
+      this.validatorDate})
+      : super(key: key);
+
+  String _dateFormat(DateTime? dateTime) =>
+      dateTime != null ? DateFormat('dd/MM/yyyy').format(dateTime) : "";
+
+  @override
+  Widget build(BuildContext context) {
+    List<DateTime?> initData = initialValue ?? [];
+    List<DateTime?> dateList = [];
+
+    String dateLabel() {
+      return dateList.map((e) => _dateFormat(e)).join(" - ");
+    }
+
+    onChangedDatePicker(List<DateTime?> value) {
+      if (isMultipleSelection) {
+        final pickerDateRange = PickerDateRange(
+          startDate: value[0] ?? DateTime.now(),
+          endDate:
+              value.length > 1 ? value[1] ?? DateTime.now() : DateTime.now(),
+        );
+        onChanged
+            ?.call(OnChangedDatePickerModel(pickerDateRange: pickerDateRange));
+      } else {
+        onChanged?.call(OnChangedDatePickerModel(dateTime: value[0]));
+      }
+      dateList = value;
+    }
+
+    dialogDatePicker() {
+      showModalBottomSheet(
+        context: context,
+        isScrollControlled: true,
+        builder: (BuildContext context) {
+          return Container(
+            padding: const EdgeInsets.only(top: 16.0),
+            height: SizeConfig.height * .65,
+            child: Column(
+              // mainAxisAlignment: MainAxisAlignment.spaceBetween,
+              mainAxisSize: MainAxisSize.min,
+              children: [
+                CalendarDatePicker2(
+                  value: [...initData],
+                  config: CalendarDatePicker2Config(
+                    centerAlignModePicker: true,
+                    calendarType: isMultipleSelection
+                        ? CalendarDatePicker2Type.range
+                        : CalendarDatePicker2Type.single,
+                    customModePickerIcon: const SizedBox(),
+                    firstDate: minDate ?? DateTime(1900),
+                    lastDate: maxDate,
+                  ),
+                  // initialValue: [...initData],
+                  onValueChanged: (value) {
+                    onChangedDatePicker(value);
+                  },
+                ),
+                Padding(
+                  padding: const EdgeInsets.symmetric(horizontal: 16),
+                  child: ButtonView(
+                    width: SizeConfig.width,
+                    onPressed: () {
+                      if (dateList.isNotEmpty) {
+                        onFinish?.call(dateList);
+                        ctrl.text = dateLabel();
+                        initData = dateList;
+                      }
+                      Navigator.pop(context);
+                    },
+                    name: 'OK',
+                  ),
+                ),
+              ],
+            ),
+          );
+        },
+      );
+    }
+
+    return TextFormView(
+      name: name,
+      hintText: hintText,
+      readOnly: true,
+      ctrl: ctrl,
+      validator: validatorDate,
+      enabled: enabled,
+      onTap: () {
+        if (enabled) dialogDatePicker();
+      },
+      suffixIcon: const UnconstrainedBox(
+        child: Icon(
+          Icons.calendar_today_rounded,
+          color: ColorPalette.slate400,
+        ),
+      ),
+    );
+  }
+}
+
+class OnChangedDatePickerModel {
+  final DateTime? dateTime;
+  final PickerDateRange? pickerDateRange;
+
+  OnChangedDatePickerModel({this.dateTime, this.pickerDateRange});
+}
+
+class PickerDateRange {
+  final DateTime startDate;
+  final DateTime endDate;
+
+  PickerDateRange({required this.startDate, required this.endDate});
+}

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

@@ -24,13 +24,13 @@ class SubmissionParent extends StatefulWidget {
 }
 
 class _SubmissionParentState extends State<SubmissionParent> {
-  Widget _stepItem({bool isCurrentStep = false, bool isDone = false}) {
+  Widget _stepItem({bool isCurrentStep = false}) {
     return Container(
       margin: const EdgeInsets.only(right: 0.0, left: 4.0),
       height: 6,
       width: SizeConfig.width * .08,
       decoration: BoxDecoration(
-        color: isCurrentStep || isDone
+        color: isCurrentStep
             ? ColorPalette.primary
             : ColorPalette.greyBorderNeutrals,
         borderRadius: BorderRadius.circular(50),
@@ -91,15 +91,10 @@ class _SubmissionParentState extends State<SubmissionParent> {
                             mainAxisAlignment: MainAxisAlignment.spaceBetween,
                             children:
                                 List.generate(provider.stepAmount, (index) {
-                              // print('indd $index');
-                              // print(
-                              //     'getCurrentStep ${provider.getCurrentStep}');
                               return _stepItem(
-                                isCurrentStep: provider.getCurrentStep ==
+                                isCurrentStep:
-                                        index + 1 ||
+                                    provider.getCurrentStep == index + 1 ||
-                                    provider.getCurrentStep - 1 == index + 1,
+                                        provider.getCurrentStep - 1 > index,
-                                // isDone:
-                                //     index + 1 != provider.getCurrentStep + 1,
                               );
                             }),
                           ),

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

@@ -2,6 +2,7 @@ import 'dart:io';
 
 import 'package:cims_apps/application/assets/path_assets.dart';
 import 'package:cims_apps/application/component/button/button_view.dart';
+import 'package:cims_apps/application/component/date_picker/date_picker_view.dart';
 import 'package:cims_apps/application/component/image/image_view.dart';
 import 'package:cims_apps/application/component/text_caption/text_caption.dart';
 import 'package:cims_apps/application/component/text_form/text_form_view.dart';
@@ -174,13 +175,11 @@ class SubmitDataIdCard extends StatelessWidget {
                       title: 'Check your ID card data for accuracy'),
                   TextFormView(name: 'NIK'),
                   TextFormView(name: 'Full Name'),
-                  TextFormView(
+                  DatePickerView(
-                    name: 'Birth Date',
+                      name: 'Birth Date',
-                    suffixIcon: const Icon(
+                      ctrl: provider.ctrlBirthDate,
-                      Icons.calendar_today_rounded,
+                      isMultipleSelection: false,
-                      color: ColorPalette.slate400,
+                      enabled: true),
-                    ),
-                  ),
                   photoDocument(provider),
                   Container(
                     width: SizeConfig.width,

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

@@ -5,6 +5,7 @@ import 'package:cims_apps/application/component/text_caption/text_caption.dart';
 import 'package:cims_apps/application/component/text_form/text_form_view.dart';
 import 'package:cims_apps/core/route/route.dart';
 import 'package:cims_apps/core/utils/size_config.dart';
+import 'package:cims_apps/core/utils/string_utils.dart';
 import 'package:cims_apps/features/auth/registration/view/submission_data/submission_parent.dart';
 import 'package:cims_apps/features/auth/registration/viewmodel/submission_data_viewmodel.dart';
 import 'package:flutter/gestures.dart';
@@ -32,10 +33,7 @@ class SubmitEmail extends StatelessWidget {
                 ),
               ),
               TextSpan(
-                recognizer: TapGestureRecognizer()
+                recognizer: TapGestureRecognizer()..onTap = () {},
-                  ..onTap = () {
-                    print('object');
-                  },
                 text: 'verification',
                 style: const TextStyle(
                   color: Colors.blue,
@@ -74,6 +72,16 @@ class SubmitEmail extends StatelessWidget {
                       ? TextFormView(
                           name: 'E-mail Address',
                           hintText: 'Input e-mail address',
+                          keyboardType: TextInputType.emailAddress,
+                          validator: (value) {
+                            if (value!.isEmpty) {
+                              return 'Filled cannot be empty';
+                            } else if (!StringUtils.emailValidation(value)) {
+                              return 'Format email wrong';
+                            } else {
+                              return null;
+                            }
+                          },
                           // onTap: () {
                           //   provider.submitEmail();
                           // },

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

@@ -19,6 +19,7 @@ class SubmissionDataViewModel extends ChangeNotifier {
   TextEditingController ctrlMarital = TextEditingController();
   TextEditingController ctrlSourceFund = TextEditingController();
   TextEditingController ctrlBankName = TextEditingController();
+  TextEditingController ctrlBirthDate = TextEditingController();
   int step = 1;
 
   List<ItemSelectForm> listOccupation = [

pubspec.lock

@@ -49,6 +49,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.1.1"
+  calendar_date_picker2:
+    dependency: "direct main"
+    description:
+      name: calendar_date_picker2
+      sha256: b91d51b8d0928f9745e0113e86d06b161ac48c52b7530337a3b77283cbc6be27
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.5.3"
   camera:
     dependency: "direct main"
     description:
@@ -292,10 +300,10 @@ packages:
     dependency: transitive
     description:
       name: js
-      sha256: "4186c61b32f99e60f011f7160e32c89a758ae9b1d0c6d28e2c02ef0382300e2b"
+      sha256: c1b2e9b5ea78c45e1a0788d29606ba27dc5f71f019f32ca5140f61ef071838cf
       url: "https://pub.dev"
     source: hosted
-    version: "0.7.0"
+    version: "0.7.1"
   lints:
     dependency: transitive
     description:
@@ -625,18 +633,18 @@ packages:
     dependency: transitive
     description:
       name: syncfusion_flutter_core
-      sha256: e8580e201c7197feac830b501889e877796a9fabbe20dcdbe90a981603939101
+      sha256: "4eed0d3ae50c16b5e8e4957f3c1917e9bd0315a08dfb49a104ca8fc10244bef3"
       url: "https://pub.dev"
     source: hosted
-    version: "24.2.4"
+    version: "24.2.6"
   syncfusion_flutter_signaturepad:
     dependency: "direct main"
     description:
       name: syncfusion_flutter_signaturepad
-      sha256: "878e1063b909a83c83677627261780d42d532d0b5e7e259d84da805008e7fb0d"
+      sha256: da55bd7d796f2c9b4707f3e063e443f67c355c6098002e446bbf43672952916e
       url: "https://pub.dev"
     source: hosted
-    version: "24.2.4"
+    version: "24.2.6"
   synchronized:
     dependency: transitive
     description:

pubspec.yaml

@@ -51,6 +51,8 @@ dependencies:
   syncfusion_flutter_signaturepad: ^24.2.4
   dotted_border: ^2.1.0
   shared_preferences: ^2.2.2
+  calendar_date_picker2: ^0.5.3
+