Add new mih text form field to Pat Prof: Details

Frontend/lib/mih_packages/patient_profile/pat_profile/package_tools/patient_info.dart

@@ -1,9 +1,10 @@
 import 'package:flutter_speed_dial/flutter_speed_dial.dart';
 import 'package:mzansi_innovation_hub/main.dart';
-import 'package:mzansi_innovation_hub/mih_components/mih_inputs_and_buttons/mih_text_input.dart';
 import 'package:mzansi_innovation_hub/mih_components/mih_layout/mih_single_child_scroll.dart';
+import 'package:mzansi_innovation_hub/mih_components/mih_package_components/mih_form.dart';
 import 'package:mzansi_innovation_hub/mih_components/mih_package_components/mih_package_tool_body.dart';
 import 'package:mzansi_innovation_hub/mih_components/mih_package_components/mih_floating_menu.dart';
+import 'package:mzansi_innovation_hub/mih_components/mih_package_components/mih_text_form_field.dart';
 import 'package:mzansi_innovation_hub/mih_objects/app_user.dart';
 import 'package:mzansi_innovation_hub/mih_objects/arguments.dart';
 import 'package:mzansi_innovation_hub/mih_objects/patients.dart';
@@ -37,6 +38,7 @@ class _PatientInfoState extends State<PatientInfo> {
   final medAidController = TextEditingController();
   final medMainMemController = TextEditingController();
   final medAidCodeController = TextEditingController();
+  final _formKey = GlobalKey<FormState>();
   double textFieldWidth = 400.0;
   late String medAid;
 
@@ -45,53 +47,69 @@ class _PatientInfoState extends State<PatientInfo> {
       spacing: 15,
       runSpacing: 10,
       children: [
-        SizedBox(
+        MihTextFormField(
           width: textFieldWidth,
-          child: MIHTextField(
+          fillColor: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
-              controller: idController,
+          inputColor: MzanziInnovationHub.of(context)!.theme.primaryColor(),
-              hintText: "ID No.",
+          controller: idController,
-              editable: false,
+          multiLineInput: false,
-              required: false),
+          requiredText: true,
+          readOnly: true,
+          hintText: "ID No.",
+          // validator: (value) {
+          //   return MihValidationServices().isEmpty(value);
+          // },
         ),
-        SizedBox(
+        MihTextFormField(
           width: textFieldWidth,
-          child: MIHTextField(
+          fillColor: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
-              controller: fnameController,
+          inputColor: MzanziInnovationHub.of(context)!.theme.primaryColor(),
-              hintText: "Name",
+          controller: fnameController,
-              editable: false,
+          multiLineInput: false,
-              required: false),
+          requiredText: true,
+          readOnly: true,
+          hintText: "First Name",
         ),
-        SizedBox(
+        MihTextFormField(
           width: textFieldWidth,
-          child: MIHTextField(
+          fillColor: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
-              controller: lnameController,
+          inputColor: MzanziInnovationHub.of(context)!.theme.primaryColor(),
-              hintText: "Surname",
+          controller: lnameController,
-              editable: false,
+          multiLineInput: false,
-              required: false),
+          requiredText: true,
+          hintText: "Surname",
+          readOnly: true,
         ),
-        SizedBox(
+        MihTextFormField(
           width: textFieldWidth,
-          child: MIHTextField(
+          fillColor: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
-              controller: cellController,
+          inputColor: MzanziInnovationHub.of(context)!.theme.primaryColor(),
-              hintText: "Cell No.",
+          controller: cellController,
-              editable: false,
+          multiLineInput: false,
-              required: false),
+          requiredText: true,
+          readOnly: true,
+          hintText: "Cell No.",
         ),
-        SizedBox(
+        MihTextFormField(
           width: textFieldWidth,
-          child: MIHTextField(
+          fillColor: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
-              controller: emailController,
+          inputColor: MzanziInnovationHub.of(context)!.theme.primaryColor(),
-              hintText: "Email",
+          controller: emailController,
-              editable: false,
+          multiLineInput: false,
-              required: false),
+          requiredText: true,
+          readOnly: true,
+          hintText: "Email",
         ),
-        SizedBox(
+        MihTextFormField(
           width: textFieldWidth,
-          child: MIHTextField(
+          height: 100,
-              controller: addressController,
+          fillColor: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
-              hintText: "Address",
+          inputColor: MzanziInnovationHub.of(context)!.theme.primaryColor(),
-              editable: false,
+          controller: addressController,
-              required: false),
+          multiLineInput: true,
+          requiredText: true,
+          readOnly: true,
+          hintText: "Address",
         ),
       ],
     );
@@ -99,14 +117,18 @@ class _PatientInfoState extends State<PatientInfo> {
 
   Widget getMedAidDetailsFields() {
     List<Widget> medAidDet = [];
-    medAidDet.add(SizedBox(
+    medAidDet.add(
-      width: textFieldWidth,
+      MihTextFormField(
-      child: MIHTextField(
+        width: textFieldWidth,
-          controller: medAidController,
+        fillColor: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
-          hintText: "Medical Aid",
+        inputColor: MzanziInnovationHub.of(context)!.theme.primaryColor(),
-          editable: false,
+        controller: medAidController,
-          required: false),
+        multiLineInput: false,
-    ));
+        requiredText: true,
+        readOnly: true,
+        hintText: "Medical Aid",
+      ),
+    );
     bool req;
     if (medAid == "Yes") {
       req = true;
@@ -116,64 +138,69 @@ class _PatientInfoState extends State<PatientInfo> {
     medAidDet.addAll([
       Visibility(
         visible: req,
-        child: SizedBox(
+        child: MihTextFormField(
           width: textFieldWidth,
-          child: MIHTextField(
+          fillColor: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
-              controller: medMainMemController,
+          inputColor: MzanziInnovationHub.of(context)!.theme.primaryColor(),
-              hintText: "Main Member",
+          controller: medMainMemController,
-              editable: false,
+          multiLineInput: false,
-              required: false),
+          requiredText: true,
+          readOnly: true,
+          hintText: "Main Member",
         ),
       ),
-      //const SizedBox(height: 10.0),
       Visibility(
         visible: req,
-        child: SizedBox(
+        child: MihTextFormField(
           width: textFieldWidth,
-          child: MIHTextField(
+          fillColor: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
-              controller: medNoController,
+          inputColor: MzanziInnovationHub.of(context)!.theme.primaryColor(),
-              hintText: "No.",
+          controller: medNoController,
-              editable: false,
+          multiLineInput: false,
-              required: false),
+          requiredText: true,
+          readOnly: true,
+          hintText: "No.",
         ),
       ),
-      //const SizedBox(height: 10.0),
       Visibility(
         visible: req,
-        child: SizedBox(
+        child: MihTextFormField(
           width: textFieldWidth,
-          child: MIHTextField(
+          fillColor: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
-              controller: medAidCodeController,
+          inputColor: MzanziInnovationHub.of(context)!.theme.primaryColor(),
-              hintText: "Code",
+          controller: medAidCodeController,
-              editable: false,
+          multiLineInput: false,
-              required: false),
+          requiredText: true,
+          readOnly: true,
+          hintText: "Code",
         ),
       ),
-      //const SizedBox(height: 10.0),
       Visibility(
         visible: req,
-        child: SizedBox(
+        child: MihTextFormField(
           width: textFieldWidth,
-          child: MIHTextField(
+          fillColor: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
-              controller: medNameController,
+          inputColor: MzanziInnovationHub.of(context)!.theme.primaryColor(),
-              hintText: "Name",
+          controller: medNameController,
-              editable: false,
+          multiLineInput: false,
-              required: false),
+          requiredText: true,
+          readOnly: true,
+          hintText: "Name",
         ),
       ),
-      //const SizedBox(height: 10.0),
       Visibility(
         visible: req,
-        child: SizedBox(
+        child: MihTextFormField(
           width: textFieldWidth,
-          child: MIHTextField(
+          fillColor: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
-              controller: medSchemeController,
+          inputColor: MzanziInnovationHub.of(context)!.theme.primaryColor(),
-              hintText: "Plan",
+          controller: medSchemeController,
-              editable: false,
+          multiLineInput: false,
-              required: false),
+          requiredText: true,
+          readOnly: true,
+          hintText: "Plan",
         ),
       ),
-      //),
     ]);
     return Wrap(
       spacing: 10,
@@ -245,12 +272,35 @@ class _PatientInfoState extends State<PatientInfo> {
         MihSingleChildScroll(
           child: Column(
             children: [
-              Row(
+              MihForm(
-                  mainAxisAlignment: MainAxisAlignment.center,
+                formKey: _formKey,
-                  //crossAxisAlignment: ,
+                formFields: [
-                  children: [
+                  Row(
-                    Text(
+                      mainAxisAlignment: MainAxisAlignment.center,
-                      "Personal Details",
+                      //crossAxisAlignment: ,
+                      children: [
+                        Text(
+                          "Personal",
+                          textAlign: TextAlign.center,
+                          style: TextStyle(
+                            fontSize: 25,
+                            fontWeight: FontWeight.bold,
+                            color: MzanziInnovationHub.of(context)!
+                                .theme
+                                .secondaryColor(),
+                          ),
+                        ),
+                      ]),
+                  Divider(
+                      color: MzanziInnovationHub.of(context)!
+                          .theme
+                          .secondaryColor()),
+                  const SizedBox(height: 10),
+                  getPatientDetailsField(),
+                  const SizedBox(height: 10),
+                  Center(
+                    child: Text(
+                      "Medical Aid",
                       textAlign: TextAlign.center,
                       style: TextStyle(
                         fontSize: 25,
@@ -260,25 +310,15 @@ class _PatientInfoState extends State<PatientInfo> {
                             .secondaryColor(),
                       ),
                     ),
-                  ]),
+                  ),
-              const SizedBox(height: 10),
+                  Divider(
-              getPatientDetailsField(),
+                      color: MzanziInnovationHub.of(context)!
-              const SizedBox(height: 10),
+                          .theme
-              Text(
+                          .secondaryColor()),
-                "Medical Aid Details",
+                  const SizedBox(height: 10),
-                textAlign: TextAlign.center,
+                  getMedAidDetailsFields(),
-                style: TextStyle(
+                ],
-                  fontSize: 25,
-                  fontWeight: FontWeight.bold,
-                  color:
-                      MzanziInnovationHub.of(context)!.theme.secondaryColor(),
-                ),
               ),
-              Divider(
-                  color:
-                      MzanziInnovationHub.of(context)!.theme.secondaryColor()),
-              const SizedBox(height: 10),
-              getMedAidDetailsFields(),
             ],
           ),
         ),

Frontend/lib/mih_packages/patient_profile/pat_profile/patient_add.dart

@@ -1,14 +1,15 @@
 import 'dart:convert';
 
 import 'package:mzansi_innovation_hub/main.dart';
+import 'package:mzansi_innovation_hub/mih_apis/mih_validation_services.dart';
 import 'package:mzansi_innovation_hub/mih_components/mih_inputs_and_buttons/mih_dropdown_input.dart';
-import 'package:mzansi_innovation_hub/mih_components/mih_inputs_and_buttons/mih_text_input.dart';
 import 'package:mzansi_innovation_hub/mih_components/mih_layout/mih_action.dart';
 import 'package:mzansi_innovation_hub/mih_components/mih_layout/mih_body.dart';
 import 'package:mzansi_innovation_hub/mih_components/mih_layout/mih_header.dart';
 import 'package:mzansi_innovation_hub/mih_components/mih_layout/mih_layout_builder.dart';
-import 'package:mzansi_innovation_hub/mih_components/mih_layout/mih_single_child_scroll.dart';
 import 'package:mzansi_innovation_hub/mih_components/mih_package_components/mih_button.dart';
+import 'package:mzansi_innovation_hub/mih_components/mih_package_components/mih_form.dart';
+import 'package:mzansi_innovation_hub/mih_components/mih_package_components/mih_text_form_field.dart';
 import 'package:mzansi_innovation_hub/mih_components/mih_pop_up_messages/mih_error_message.dart';
 import 'package:mzansi_innovation_hub/mih_components/mih_pop_up_messages/mih_success_message.dart';
 import 'package:mzansi_innovation_hub/mih_env/env.dart';
@@ -49,6 +50,7 @@ class _AddPatientState extends State<AddPatient> {
   //late bool medRequired;
   final ValueNotifier<bool> medRequired = ValueNotifier(false);
   final FocusNode _focusNode = FocusNode();
+  final _formKey = GlobalKey<FormState>();
 
   bool isFieldsFilled() {
     if (medRequired.value) {
@@ -159,151 +161,268 @@ class _AddPatientState extends State<AddPatient> {
   }
 
   Widget displayForm() {
-    return MihSingleChildScroll(
+    return SingleChildScrollView(
       child: Column(
         children: [
-          Text(
+          MihForm(
-            "Personal Details",
+            formKey: _formKey,
-            textAlign: TextAlign.center,
+            formFields: [
-            style: TextStyle(
+              Row(
-              fontWeight: FontWeight.bold,
+                mainAxisAlignment: MainAxisAlignment.center,
-              fontSize: 22.0,
+                children: [
-              color: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                  Text(
-            ),
+                    "Personal",
-          ),
+                    textAlign: TextAlign.center,
-          Divider(
+                    style: TextStyle(
-              color: MzanziInnovationHub.of(context)!.theme.secondaryColor()),
+                      fontWeight: FontWeight.bold,
-          const SizedBox(height: 10.0),
+                      fontSize: 25.0,
-          MIHTextField(
+                      color: MzanziInnovationHub.of(context)!
-            controller: idController,
+                          .theme
-            hintText: "13 digit ID Number or Passport",
+                          .secondaryColor(),
-            editable: true,
-            required: true,
-          ),
-          const SizedBox(height: 10.0),
-          MIHTextField(
-            controller: fnameController,
-            hintText: "First Name",
-            editable: false,
-            required: true,
-          ),
-          const SizedBox(height: 10.0),
-          MIHTextField(
-            controller: lnameController,
-            hintText: "Last Name",
-            editable: false,
-            required: true,
-          ),
-          const SizedBox(height: 10.0),
-          MIHTextField(
-            controller: cellController,
-            hintText: "Cell Number",
-            editable: true,
-            required: true,
-          ),
-          const SizedBox(height: 10.0),
-          MIHTextField(
-            controller: emailController,
-            hintText: "Email",
-            editable: false,
-            required: true,
-          ),
-          const SizedBox(height: 10.0),
-          MIHTextField(
-            controller: addressController,
-            hintText: "Address",
-            editable: true,
-            required: true,
-          ),
-          const SizedBox(height: 15.0),
-          Text(
-            "Medical Aid Details",
-            textAlign: TextAlign.center,
-            style: TextStyle(
-              fontWeight: FontWeight.bold,
-              fontSize: 22.0,
-              color: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
-            ),
-          ),
-          Divider(
-              color: MzanziInnovationHub.of(context)!.theme.secondaryColor()),
-          const SizedBox(height: 10.0),
-          MIHDropdownField(
-            controller: medAidController,
-            hintText: "Medical Aid",
-            editable: true,
-            enableSearch: false,
-            // onSelect: (_) {
-            //   isRequired();
-            // },
-            required: true,
-            dropdownOptions: const ["Yes", "No"],
-          ),
-          ValueListenableBuilder(
-            valueListenable: medRequired,
-            builder: (BuildContext context, bool value, Widget? child) {
-              return Visibility(
-                visible: value,
-                child: Column(
-                  children: [
-                    const SizedBox(height: 10.0),
-                    MIHDropdownField(
-                      controller: medMainMemController,
-                      hintText: "Main Member",
-                      editable: value,
-                      required: value,
-                      enableSearch: false,
-                      dropdownOptions: const ["Yes", "No"],
                     ),
-                    const SizedBox(height: 10.0),
+                  ),
-                    MIHTextField(
+                ],
-                      controller: medNoController,
-                      hintText: "Medical Aid No.",
-                      editable: value,
-                      required: value,
-                    ),
-                    const SizedBox(height: 10.0),
-                    MIHTextField(
-                      controller: medAidCodeController,
-                      hintText: "Medical Aid Code",
-                      editable: value,
-                      required: value,
-                    ),
-                    const SizedBox(height: 10.0),
-                    MIHTextField(
-                      controller: medNameController,
-                      hintText: "Medical Aid Name",
-                      editable: value,
-                      required: value,
-                    ),
-                    const SizedBox(height: 10.0),
-                    MIHTextField(
-                      controller: medSchemeController,
-                      hintText: "Medical Aid Plan",
-                      editable: value,
-                      required: value,
-                    ),
-                  ],
-                ),
-              );
-            },
-          ),
-          const SizedBox(height: 30.0),
-          MihButton(
-            onPressed: () {
-              submitForm();
-            },
-            buttonColor:
-                MzanziInnovationHub.of(context)!.theme.secondaryColor(),
-            width: 300,
-            child: Text(
-              "Add",
-              style: TextStyle(
-                color: MzanziInnovationHub.of(context)!.theme.primaryColor(),
-                fontSize: 20,
-                fontWeight: FontWeight.bold,
               ),
-            ),
+              Divider(
+                  color:
+                      MzanziInnovationHub.of(context)!.theme.secondaryColor()),
+              const SizedBox(height: 10.0),
+              MihTextFormField(
+                fillColor:
+                    MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                inputColor:
+                    MzanziInnovationHub.of(context)!.theme.primaryColor(),
+                controller: idController,
+                multiLineInput: false,
+                requiredText: true,
+                hintText: "ID No.",
+                validator: (value) {
+                  return MihValidationServices().isEmpty(value);
+                },
+              ),
+              const SizedBox(height: 10.0),
+              MihTextFormField(
+                fillColor:
+                    MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                inputColor:
+                    MzanziInnovationHub.of(context)!.theme.primaryColor(),
+                controller: fnameController,
+                multiLineInput: false,
+                requiredText: true,
+                hintText: "First Name",
+                validator: (value) {
+                  return MihValidationServices().isEmpty(value);
+                },
+              ),
+              const SizedBox(height: 10.0),
+              MihTextFormField(
+                fillColor:
+                    MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                inputColor:
+                    MzanziInnovationHub.of(context)!.theme.primaryColor(),
+                controller: lnameController,
+                multiLineInput: false,
+                requiredText: true,
+                hintText: "Surname",
+                validator: (value) {
+                  return MihValidationServices().isEmpty(value);
+                },
+              ),
+              const SizedBox(height: 10.0),
+              MihTextFormField(
+                fillColor:
+                    MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                inputColor:
+                    MzanziInnovationHub.of(context)!.theme.primaryColor(),
+                controller: cellController,
+                multiLineInput: false,
+                requiredText: true,
+                hintText: "Cell No.",
+                validator: (value) {
+                  return MihValidationServices().isEmpty(value);
+                },
+              ),
+              const SizedBox(height: 10.0),
+              MihTextFormField(
+                fillColor:
+                    MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                inputColor:
+                    MzanziInnovationHub.of(context)!.theme.primaryColor(),
+                controller: emailController,
+                multiLineInput: false,
+                requiredText: true,
+                readOnly: true,
+                hintText: "Email",
+                validator: (value) {
+                  return MihValidationServices().validateEmail(value);
+                },
+              ),
+              const SizedBox(height: 10.0),
+              MihTextFormField(
+                height: 100,
+                fillColor:
+                    MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                inputColor:
+                    MzanziInnovationHub.of(context)!.theme.primaryColor(),
+                controller: addressController,
+                multiLineInput: true,
+                requiredText: true,
+                hintText: "Address",
+                validator: (value) {
+                  return MihValidationServices().isEmpty(value);
+                },
+              ),
+              const SizedBox(height: 15.0),
+              Center(
+                child: Text(
+                  "Medical Aid Details",
+                  textAlign: TextAlign.center,
+                  style: TextStyle(
+                    fontWeight: FontWeight.bold,
+                    fontSize: 25.0,
+                    color:
+                        MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                  ),
+                ),
+              ),
+              Divider(
+                  color:
+                      MzanziInnovationHub.of(context)!.theme.secondaryColor()),
+              const SizedBox(height: 10.0),
+              MIHDropdownField(
+                controller: medAidController,
+                hintText: "Medical Aid",
+                editable: true,
+                required: true,
+                enableSearch: false,
+                dropdownOptions: const ["Yes", "No"],
+              ),
+              ValueListenableBuilder(
+                valueListenable: medRequired,
+                builder: (BuildContext context, bool value, Widget? child) {
+                  return Visibility(
+                    visible: value,
+                    child: Column(
+                      children: [
+                        const SizedBox(height: 10.0),
+                        MIHDropdownField(
+                          controller: medMainMemController,
+                          hintText: "Main Member",
+                          editable: value,
+                          required: value,
+                          enableSearch: false,
+                          dropdownOptions: const ["Yes", "No"],
+                        ),
+                        const SizedBox(height: 10.0),
+                        MihTextFormField(
+                          fillColor: MzanziInnovationHub.of(context)!
+                              .theme
+                              .secondaryColor(),
+                          inputColor: MzanziInnovationHub.of(context)!
+                              .theme
+                              .primaryColor(),
+                          controller: medNoController,
+                          multiLineInput: false,
+                          requiredText: true,
+                          hintText: "No.",
+                          validator: (validationValue) {
+                            if (value) {
+                              return MihValidationServices()
+                                  .isEmpty(validationValue);
+                            }
+                            return null;
+                          },
+                        ),
+                        const SizedBox(height: 10.0),
+                        MihTextFormField(
+                          fillColor: MzanziInnovationHub.of(context)!
+                              .theme
+                              .secondaryColor(),
+                          inputColor: MzanziInnovationHub.of(context)!
+                              .theme
+                              .primaryColor(),
+                          controller: medAidCodeController,
+                          multiLineInput: false,
+                          requiredText: true,
+                          hintText: "Code",
+                          validator: (validationValue) {
+                            if (value) {
+                              return MihValidationServices()
+                                  .isEmpty(validationValue);
+                            }
+                            return null;
+                          },
+                        ),
+                        const SizedBox(height: 10.0),
+                        MihTextFormField(
+                          fillColor: MzanziInnovationHub.of(context)!
+                              .theme
+                              .secondaryColor(),
+                          inputColor: MzanziInnovationHub.of(context)!
+                              .theme
+                              .primaryColor(),
+                          controller: medNameController,
+                          multiLineInput: false,
+                          requiredText: true,
+                          hintText: "Name",
+                          validator: (validationValue) {
+                            if (value) {
+                              return MihValidationServices()
+                                  .isEmpty(validationValue);
+                            }
+                            return null;
+                          },
+                        ),
+                        const SizedBox(height: 10.0),
+                        MihTextFormField(
+                          fillColor: MzanziInnovationHub.of(context)!
+                              .theme
+                              .secondaryColor(),
+                          inputColor: MzanziInnovationHub.of(context)!
+                              .theme
+                              .primaryColor(),
+                          controller: medSchemeController,
+                          multiLineInput: false,
+                          requiredText: true,
+                          hintText: "Plan",
+                          validator: (validationValue) {
+                            if (value) {
+                              return MihValidationServices()
+                                  .isEmpty(validationValue);
+                            }
+                            return null;
+                          },
+                        ),
+                        const SizedBox(height: 10.0),
+                      ],
+                    ),
+                  );
+                },
+              ),
+              const SizedBox(height: 20.0),
+              Center(
+                child: MihButton(
+                  onPressed: () {
+                    if (_formKey.currentState!.validate()) {
+                      submitForm();
+                    }
+                  },
+                  buttonColor:
+                      MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                  width: 300,
+                  child: Text(
+                    "Add",
+                    style: TextStyle(
+                      color:
+                          MzanziInnovationHub.of(context)!.theme.primaryColor(),
+                      fontSize: 20,
+                      fontWeight: FontWeight.bold,
+                    ),
+                  ),
+                ),
+              ),
+              const SizedBox(height: 20.0),
+            ],
           ),
         ],
       ),
@@ -311,16 +430,7 @@ class _AddPatientState extends State<AddPatient> {
   }
 
   void submitForm() {
-    if (isFieldsFilled()) {
+    addPatientAPICall();
-      addPatientAPICall();
-    } else {
-      showDialog(
-        context: context,
-        builder: (context) {
-          return const MIHErrorMessage(errorType: "Input Error");
-        },
-      );
-    }
   }
 
   MIHAction getActionButton() {
@@ -350,7 +460,7 @@ class _AddPatientState extends State<AddPatient> {
 
   MIHBody getBody() {
     return MIHBody(
-      borderOn: true,
+      borderOn: false,
       bodyItems: [
         KeyboardListener(
           focusNode: _focusNode,
@@ -358,7 +468,9 @@ class _AddPatientState extends State<AddPatient> {
           onKeyEvent: (event) async {
             if (event is KeyDownEvent &&
                 event.logicalKey == LogicalKeyboardKey.enter) {
-              submitForm();
+              if (_formKey.currentState!.validate()) {
+                submitForm();
+              }
             }
           },
           child: displayForm(),

Frontend/lib/mih_packages/patient_profile/pat_profile/patient_edit.dart

@@ -1,13 +1,15 @@
 import 'dart:convert';
 
 import 'package:mzansi_innovation_hub/main.dart';
+import 'package:mzansi_innovation_hub/mih_apis/mih_validation_services.dart';
 import 'package:mzansi_innovation_hub/mih_components/mih_inputs_and_buttons/mih_dropdown_input.dart';
-import 'package:mzansi_innovation_hub/mih_components/mih_inputs_and_buttons/mih_text_input.dart';
 import 'package:mzansi_innovation_hub/mih_components/mih_layout/mih_action.dart';
 import 'package:mzansi_innovation_hub/mih_components/mih_layout/mih_body.dart';
 import 'package:mzansi_innovation_hub/mih_components/mih_layout/mih_header.dart';
 import 'package:mzansi_innovation_hub/mih_components/mih_layout/mih_layout_builder.dart';
 import 'package:mzansi_innovation_hub/mih_components/mih_package_components/mih_button.dart';
+import 'package:mzansi_innovation_hub/mih_components/mih_package_components/mih_form.dart';
+import 'package:mzansi_innovation_hub/mih_components/mih_package_components/mih_text_form_field.dart';
 import 'package:mzansi_innovation_hub/mih_components/mih_pop_up_messages/mih_error_message.dart';
 import 'package:mzansi_innovation_hub/mih_components/mih_pop_up_messages/mih_success_message.dart';
 import 'package:mzansi_innovation_hub/mih_env/env.dart';
@@ -49,6 +51,7 @@ class _EditPatientState extends State<EditPatient> {
   final docOfficeIdApiUrl = "${AppEnviroment.baseApiUrl}/users/profile/";
   final apiUrlEdit = "${AppEnviroment.baseApiUrl}/patients/update/";
   final apiUrlDelete = "${AppEnviroment.baseApiUrl}/patients/delete/";
+  final _formKey = GlobalKey<FormState>();
 
   late int futureDocOfficeId;
   late String userEmail;
@@ -375,196 +378,273 @@ class _EditPatientState extends State<EditPatient> {
     return SingleChildScrollView(
       child: Column(
         children: [
-          Row(
+          MihForm(
-            mainAxisAlignment: MainAxisAlignment.center,
+            formKey: _formKey,
-            children: [
+            formFields: [
-              Text(
+              Row(
-                "Personal Details",
+                mainAxisAlignment: MainAxisAlignment.center,
-                textAlign: TextAlign.center,
+                children: [
-                style: TextStyle(
+                  Text(
-                  fontWeight: FontWeight.bold,
+                    "Personal",
-                  fontSize: 22.0,
+                    textAlign: TextAlign.center,
+                    style: TextStyle(
+                      fontWeight: FontWeight.bold,
+                      fontSize: 25.0,
+                      color: MzanziInnovationHub.of(context)!
+                          .theme
+                          .secondaryColor(),
+                    ),
+                  ),
+                ],
+              ),
+              Divider(
                   color:
+                      MzanziInnovationHub.of(context)!.theme.secondaryColor()),
+              const SizedBox(height: 10.0),
+              MihTextFormField(
+                fillColor:
+                    MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                inputColor:
+                    MzanziInnovationHub.of(context)!.theme.primaryColor(),
+                controller: idController,
+                multiLineInput: false,
+                requiredText: true,
+                hintText: "ID No.",
+                validator: (value) {
+                  return MihValidationServices().isEmpty(value);
+                },
+              ),
+              const SizedBox(height: 10.0),
+              MihTextFormField(
+                fillColor:
+                    MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                inputColor:
+                    MzanziInnovationHub.of(context)!.theme.primaryColor(),
+                controller: fnameController,
+                multiLineInput: false,
+                requiredText: true,
+                hintText: "First Name",
+                validator: (value) {
+                  return MihValidationServices().isEmpty(value);
+                },
+              ),
+              const SizedBox(height: 10.0),
+              MihTextFormField(
+                fillColor:
+                    MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                inputColor:
+                    MzanziInnovationHub.of(context)!.theme.primaryColor(),
+                controller: lnameController,
+                multiLineInput: false,
+                requiredText: true,
+                hintText: "Surname",
+                validator: (value) {
+                  return MihValidationServices().isEmpty(value);
+                },
+              ),
+              const SizedBox(height: 10.0),
+              MihTextFormField(
+                fillColor:
+                    MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                inputColor:
+                    MzanziInnovationHub.of(context)!.theme.primaryColor(),
+                controller: cellController,
+                multiLineInput: false,
+                requiredText: true,
+                hintText: "Cell No.",
+                validator: (value) {
+                  return MihValidationServices().isEmpty(value);
+                },
+              ),
+              const SizedBox(height: 10.0),
+              MihTextFormField(
+                fillColor:
+                    MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                inputColor:
+                    MzanziInnovationHub.of(context)!.theme.primaryColor(),
+                controller: emailController,
+                multiLineInput: false,
+                requiredText: true,
+                readOnly: true,
+                hintText: "Email",
+                validator: (value) {
+                  return MihValidationServices().validateEmail(value);
+                },
+              ),
+              const SizedBox(height: 10.0),
+              MihTextFormField(
+                height: 100,
+                fillColor:
+                    MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                inputColor:
+                    MzanziInnovationHub.of(context)!.theme.primaryColor(),
+                controller: addressController,
+                multiLineInput: true,
+                requiredText: true,
+                hintText: "Address",
+                validator: (value) {
+                  return MihValidationServices().isEmpty(value);
+                },
+              ),
+              const SizedBox(height: 15.0),
+              Center(
+                child: Text(
+                  "Medical Aid Details",
+                  textAlign: TextAlign.center,
+                  style: TextStyle(
+                    fontWeight: FontWeight.bold,
+                    fontSize: 25.0,
+                    color:
+                        MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                  ),
+                ),
+              ),
+              Divider(
+                  color:
+                      MzanziInnovationHub.of(context)!.theme.secondaryColor()),
+              const SizedBox(height: 10.0),
+              MIHDropdownField(
+                controller: medAidController,
+                hintText: "Medical Aid",
+                editable: true,
+                required: true,
+                enableSearch: false,
+                dropdownOptions: const ["Yes", "No"],
+              ),
+              ValueListenableBuilder(
+                valueListenable: medRequired,
+                builder: (BuildContext context, bool value, Widget? child) {
+                  return Visibility(
+                    visible: value,
+                    child: Column(
+                      children: [
+                        const SizedBox(height: 10.0),
+                        MIHDropdownField(
+                          controller: medMainMemController,
+                          hintText: "Main Member",
+                          editable: value,
+                          required: value,
+                          enableSearch: false,
+                          dropdownOptions: const ["Yes", "No"],
+                        ),
+                        const SizedBox(height: 10.0),
+                        MihTextFormField(
+                          fillColor: MzanziInnovationHub.of(context)!
+                              .theme
+                              .secondaryColor(),
+                          inputColor: MzanziInnovationHub.of(context)!
+                              .theme
+                              .primaryColor(),
+                          controller: medNoController,
+                          multiLineInput: false,
+                          requiredText: true,
+                          hintText: "No.",
+                          validator: (validationValue) {
+                            if (value) {
+                              return MihValidationServices()
+                                  .isEmpty(validationValue);
+                            }
+                            return null;
+                          },
+                        ),
+                        const SizedBox(height: 10.0),
+                        MihTextFormField(
+                          fillColor: MzanziInnovationHub.of(context)!
+                              .theme
+                              .secondaryColor(),
+                          inputColor: MzanziInnovationHub.of(context)!
+                              .theme
+                              .primaryColor(),
+                          controller: medAidCodeController,
+                          multiLineInput: false,
+                          requiredText: true,
+                          hintText: "Code",
+                          validator: (validationValue) {
+                            if (value) {
+                              return MihValidationServices()
+                                  .isEmpty(validationValue);
+                            }
+                            return null;
+                          },
+                        ),
+                        const SizedBox(height: 10.0),
+                        MihTextFormField(
+                          fillColor: MzanziInnovationHub.of(context)!
+                              .theme
+                              .secondaryColor(),
+                          inputColor: MzanziInnovationHub.of(context)!
+                              .theme
+                              .primaryColor(),
+                          controller: medNameController,
+                          multiLineInput: false,
+                          requiredText: true,
+                          hintText: "Name",
+                          validator: (validationValue) {
+                            if (value) {
+                              return MihValidationServices()
+                                  .isEmpty(validationValue);
+                            }
+                            return null;
+                          },
+                        ),
+                        const SizedBox(height: 10.0),
+                        MihTextFormField(
+                          fillColor: MzanziInnovationHub.of(context)!
+                              .theme
+                              .secondaryColor(),
+                          inputColor: MzanziInnovationHub.of(context)!
+                              .theme
+                              .primaryColor(),
+                          controller: medSchemeController,
+                          multiLineInput: false,
+                          requiredText: true,
+                          hintText: "Plan",
+                          validator: (validationValue) {
+                            if (value) {
+                              return MihValidationServices()
+                                  .isEmpty(validationValue);
+                            }
+                            return null;
+                          },
+                        ),
+                        const SizedBox(height: 10.0),
+                      ],
+                    ),
+                  );
+                },
+              ),
+              const SizedBox(height: 20.0),
+              Center(
+                child: MihButton(
+                  onPressed: () {
+                    if (_formKey.currentState!.validate()) {
+                      submitForm();
+                    }
+                  },
+                  buttonColor:
                       MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                  width: 300,
+                  child: Text(
+                    "Update",
+                    style: TextStyle(
+                      color:
+                          MzanziInnovationHub.of(context)!.theme.primaryColor(),
+                      fontSize: 20,
+                      fontWeight: FontWeight.bold,
+                    ),
+                  ),
                 ),
               ),
-              // IconButton(
+              const SizedBox(height: 20.0),
-              //   icon: const Icon(Icons.delete),
-              //   color: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
-              //   //alignment: Alignment.topRight,
-              //   onPressed: () {
-              //     deletePatientPopUp();
-              //   },
-              // ),
             ],
           ),
-          Divider(
-              color: MzanziInnovationHub.of(context)!.theme.secondaryColor()),
-          const SizedBox(height: 10.0),
-          MIHTextField(
-            controller: idController,
-            hintText: "13 digit ID Number or Passport",
-            editable: false,
-            required: true,
-          ),
-          const SizedBox(height: 10.0),
-          MIHTextField(
-            controller: fnameController,
-            hintText: "First Name",
-            editable: false,
-            required: true,
-          ),
-          const SizedBox(height: 10.0),
-          MIHTextField(
-            controller: lnameController,
-            hintText: "Last Name",
-            editable: false,
-            required: true,
-          ),
-          const SizedBox(height: 10.0),
-          MIHTextField(
-            controller: cellController,
-            hintText: "Cell Number",
-            editable: true,
-            required: true,
-          ),
-          const SizedBox(height: 10.0),
-          MIHTextField(
-            controller: emailController,
-            hintText: "Email",
-            editable: false,
-            required: true,
-          ),
-          const SizedBox(height: 10.0),
-          MIHTextField(
-            controller: addressController,
-            hintText: "Address",
-            editable: true,
-            required: true,
-          ),
-          const SizedBox(height: 15.0),
-          Text(
-            "Medical Aid Details",
-            textAlign: TextAlign.center,
-            style: TextStyle(
-              fontWeight: FontWeight.bold,
-              fontSize: 22.0,
-              color: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
-            ),
-          ),
-          Divider(
-              color: MzanziInnovationHub.of(context)!.theme.secondaryColor()),
-          const SizedBox(height: 10.0),
-          MIHDropdownField(
-            controller: medAidController,
-            hintText: "Medical Aid",
-            // onSelect: (selected) {
-            //   if (selected == "Yes") {
-            //     setState(() {
-            //       medRequired = true;
-            //     });
-            //   } else {
-            //     setState(() {
-            //       medRequired = false;
-            //     });
-            //   }
-            // },
-            editable: true,
-            required: true,
-            enableSearch: false,
-            dropdownOptions: const ["Yes", "No"],
-          ),
-          ValueListenableBuilder(
-            valueListenable: medRequired,
-            builder: (BuildContext context, bool value, Widget? child) {
-              return Visibility(
-                visible: value,
-                child: Column(
-                  children: [
-                    const SizedBox(height: 10.0),
-                    MIHDropdownField(
-                      controller: medMainMemController,
-                      hintText: "Main Member.",
-                      editable: value,
-                      required: value,
-                      enableSearch: false,
-                      dropdownOptions: const ["Yes", "No"],
-                    ),
-                    const SizedBox(height: 10.0),
-                    MIHTextField(
-                      controller: medNoController,
-                      hintText: "Medical Aid No.",
-                      editable: value,
-                      required: value,
-                    ),
-                    const SizedBox(height: 10.0),
-                    MIHTextField(
-                      controller: medAidCodeController,
-                      hintText: "Medical Aid Code",
-                      editable: value,
-                      required: value,
-                    ),
-                    const SizedBox(height: 10.0),
-                    MIHTextField(
-                      controller: medNameController,
-                      hintText: "Medical Aid Name",
-                      editable: value,
-                      required: value,
-                    ),
-                    const SizedBox(height: 10.0),
-                    MIHTextField(
-                      controller: medSchemeController,
-                      hintText: "Medical Aid Plan",
-                      editable: value,
-                      required: value,
-                    ),
-                  ],
-                ),
-              );
-            },
-          ),
-          const SizedBox(height: 30.0),
-          MihButton(
-            onPressed: () {
-              submitForm();
-            },
-            buttonColor:
-                MzanziInnovationHub.of(context)!.theme.secondaryColor(),
-            width: 300,
-            child: Text(
-              "Update",
-              style: TextStyle(
-                color: MzanziInnovationHub.of(context)!.theme.primaryColor(),
-                fontSize: 20,
-                fontWeight: FontWeight.bold,
-              ),
-            ),
-          ),
         ],
       ),
     );
   }
 
   void submitForm() {
-    if (isFieldsFilled()) {
+    updatePatientApiCall();
-      if (!medRequired.value) {
-        setState(() {
-          medMainMemController.text = "";
-          medNoController.text = "";
-          medAidCodeController.text = "";
-          medNameController.text = "";
-          medSchemeController.text = "";
-        });
-      }
-      updatePatientApiCall();
-    } else {
-      showDialog(
-        context: context,
-        builder: (context) {
-          return const MIHErrorMessage(errorType: "Input Error");
-        },
-      );
-    }
   }
 
   MIHAction getActionButton() {
@@ -594,7 +674,7 @@ class _EditPatientState extends State<EditPatient> {
 
   MIHBody getBody() {
     return MIHBody(
-      borderOn: true,
+      borderOn: false,
       bodyItems: [
         KeyboardListener(
           focusNode: _focusNode,
@@ -602,7 +682,9 @@ class _EditPatientState extends State<EditPatient> {
           onKeyEvent: (event) async {
             if (event is KeyDownEvent &&
                 event.logicalKey == LogicalKeyboardKey.enter) {
-              submitForm();
+              if (_formKey.currentState!.validate()) {
+                submitForm();
+              }
             }
           },
           child: displayForm(),