Merge pull request #196 from yaso-meth/NEW--Text-Input-Field

NEW--Text-Input-Field

Frontend/lib/main_dev.dart

@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_native_splash/flutter_native_splash.dart';
+import 'package:pwa_install/pwa_install.dart';
 import '../mih_env/env.dart';
 import '../../main.dart';
 import 'package:supertokens_flutter/supertokens.dart';
@@ -14,6 +15,9 @@ void main() async {
     apiBasePath: "/auth",
   );
   // setUrlStrategy(PathUrlStrategy());
+  PWAInstall().setup(installCallback: () {
+    debugPrint('APP INSTALLED!');
+  });
   FlutterNativeSplash.remove();
   runApp(const MzanziInnovationHub());
 }

Frontend/lib/main_prod.dart

@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_native_splash/flutter_native_splash.dart';
+import 'package:pwa_install/pwa_install.dart';
 import '../mih_env/env.dart';
 import '../../main.dart';
 import 'package:supertokens_flutter/supertokens.dart';
@@ -15,5 +16,8 @@ void main() async {
   );
   // setUrlStrategy(PathUrlStrategy());
   FlutterNativeSplash.remove();
+  PWAInstall().setup(installCallback: () {
+    debugPrint('APP INSTALLED!');
+  });
   runApp(const MzanziInnovationHub());
 }

Frontend/lib/mih_apis/mih_alert_services.dart

@@ -0,0 +1,58 @@
+import 'package:flutter/material.dart';
+import 'package:mzansi_innovation_hub/main.dart';
+import 'package:mzansi_innovation_hub/mih_components/mih_package_components/mih_package_alert.dart';
+
+class MihAlertServices {
+  void formNotFilledCompletely(BuildContext context) {
+    showDialog(
+      context: context,
+      builder: (context) {
+        return MihPackageAlert(
+          alertIcon: Icon(
+            Icons.warning_amber_rounded,
+            size: 150,
+            color: MzanziInnovationHub.of(context)!.theme.errorColor(),
+          ),
+          alertTitle: "Oops! Looks like some fields are missing.",
+          alertBody: Column(
+            children: [
+              Text(
+                "We noticed that some required fields are still empty. To ensure your request is processed smoothly, please fill out all the highlighted fields before submitting the form again.",
+                style: TextStyle(
+                  color:
+                      MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                  fontSize: 15,
+                  fontWeight: FontWeight.bold,
+                ),
+              ),
+              const SizedBox(height: 25),
+              RichText(
+                text: TextSpan(
+                  style: TextStyle(
+                    color:
+                        MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                    fontSize: 15,
+                    fontWeight: FontWeight.bold,
+                  ),
+                  children: <TextSpan>[
+                    TextSpan(
+                        text: "Here's a quick tip: ",
+                        style: TextStyle(
+                            fontStyle: FontStyle.italic,
+                            color: MzanziInnovationHub.of(context)!
+                                .theme
+                                .errorColor())),
+                    const TextSpan(
+                        text:
+                            "Look for fields without the \"(Optional)\" indicator next to them, as these are mandatory."),
+                  ],
+                ),
+              ),
+            ],
+          ),
+          alertColour: MzanziInnovationHub.of(context)!.theme.errorColor(),
+        );
+      },
+    );
+  }
+}

Frontend/lib/mih_apis/mih_install_services.dart

@@ -0,0 +1,64 @@
+import 'package:flutter/foundation.dart';
+import 'package:flutter/widgets.dart';
+import 'package:mzansi_innovation_hub/main.dart';
+import 'package:pwa_install/pwa_install.dart';
+// import 'package:universal_html/js.dart' as js;
+import 'package:url_launcher/url_launcher.dart';
+
+class MihInstallServices {
+  String? errorMessage;
+
+  Future<void> launchSocialUrl(Uri linkUrl) async {
+    if (!await launchUrl(linkUrl)) {
+      throw Exception('Could not launch $linkUrl');
+    }
+  }
+
+  void installMihTrigger(BuildContext context) {
+    final isWebAndroid =
+        kIsWeb && (defaultTargetPlatform == TargetPlatform.android);
+    final isWebIos = kIsWeb && (defaultTargetPlatform == TargetPlatform.iOS);
+    if (isWebAndroid) {
+      launchSocialUrl(
+        Uri.parse(
+          "https://play.google.com/store/apps/details?id=za.co.mzansiinnovationhub.mih",
+        ),
+      );
+    } else if (isWebIos) {
+      //Show pop up for IOS
+      launchSocialUrl(
+        Uri.parse(
+          "https://apps.apple.com/za/app/mzansi-innovation-hub/id6743310890",
+        ),
+      );
+    } else if (MzanziInnovationHub.of(context)!.theme.getPlatform() ==
+        "Android") {
+      //Installed Android App
+      launchSocialUrl(
+        Uri.parse(
+          "https://play.google.com/store/apps/details?id=za.co.mzansiinnovationhub.mih",
+        ),
+      );
+    } else if (MzanziInnovationHub.of(context)!.theme.getPlatform() == "iOS") {
+      launchSocialUrl(
+        Uri.parse(
+          "https://apps.apple.com/za/app/mzansi-innovation-hub/id6743310890",
+        ),
+      );
+    } else {
+      //Web
+      if (PWAInstall().installPromptEnabled) {
+        try {
+          PWAInstall().promptInstall_();
+        } catch (e) {
+          errorMessage = e.toString();
+          debugPrint('Error prompting install: $e');
+        }
+      } else {
+        // Fallback for unsupported platforms
+        debugPrint('Install prompt not available for this platform.');
+      }
+      // js.context.callMethod("presentAddToHome");
+    }
+  }
+}

Frontend/lib/mih_apis/mih_validation_services.dart

@@ -0,0 +1,84 @@
+class MihValidationServices {
+  String? isEmpty(String? value) {
+    if (value == null || value.isEmpty) {
+      return "This field is required";
+    }
+    return null;
+  }
+
+  String? validateLength(String? value, int maxLength) {
+    if (value == null || value.isEmpty) {
+      return "This field is required";
+    }
+    if (value.length > maxLength) {
+      return "Length must not exceed $maxLength characters";
+    }
+    return null;
+  }
+
+  String? validateEmail(String? email) {
+    if (email == null || email.isEmpty) {
+      return "Email is required";
+    }
+    final emailRegex =
+        RegExp(r'^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$');
+    if (!emailRegex.hasMatch(email)) {
+      return "Invalid Email Format";
+    }
+    return null;
+  }
+
+  String? validateUsername(String? username) {
+    String? errorMessage = "";
+    if (username == null || username.isEmpty) {
+      errorMessage += "Username is required";
+      return errorMessage;
+    }
+    if (!RegExp(r'^[a-zA-Z]').hasMatch(username)) {
+      errorMessage += "\n• Your username should start with a letter.";
+    }
+    if (!RegExp(r'^[a-zA-Z0-9_]+$').hasMatch(username)) {
+      errorMessage +=
+          "\n• You can use letters, numbers, and/or underscores only.";
+    }
+    if (username.length < 6 || username.length > 30) {
+      errorMessage += "\n• Keep it between 6 and 30 characters.";
+    }
+    if (RegExp(r'[@#\$]').hasMatch(username)) {
+      errorMessage += "\n• Avoid special characters like @, #, or \$.";
+    }
+
+    if (errorMessage.isEmpty) {
+      return null; // No errors, username is valid
+    }
+    return "Let's create a great username for you!$errorMessage";
+  }
+
+  String? validatePassword(String? password) {
+    String? errorMessage = "";
+    if (password == null || password.isEmpty) {
+      errorMessage += "Password is required";
+      return errorMessage;
+    }
+    if (password.length < 8) {
+      errorMessage += "\n• Contains at least 8 characters long";
+    }
+    if (!RegExp(r'[A-Z]').hasMatch(password)) {
+      errorMessage += "\n• Contains at least 1 uppercase letter";
+    }
+    if (!RegExp(r'[a-z]').hasMatch(password)) {
+      errorMessage += "\n• Contains at least 1 lowercase letter";
+    }
+    if (!RegExp(r'[0-9]').hasMatch(password)) {
+      errorMessage += "\n• Contains at least 1 digit";
+    }
+    if (!RegExp(r'[!@#$%^&*]').hasMatch(password)) {
+      errorMessage += "\n• Contains at least 1 special character (!@#\$%^&*)";
+    }
+    if (errorMessage.isEmpty) {
+      return null; // No errors, password is valid
+    }
+    errorMessage = "Let's create a great password for you!$errorMessage";
+    return errorMessage;
+  }
+}

Frontend/lib/mih_components/mih_inputs_and_buttons/mih_text_input.dart

@@ -147,16 +147,12 @@ class _MIHTextFieldState extends State<MIHTextField> {
       }),
       decoration: InputDecoration(
         label: setRequiredText(),
-        //labelStyle: TextStyle(color: MzanziInnovationHub.of(context)!.theme.primaryColor()),
         fillColor: MzanziInnovationHub.of(context)!.theme.primaryColor(),
         filled: true,
         errorText: _errorText,
         errorStyle: TextStyle(
             color: MzanziInnovationHub.of(context)!.theme.errorColor(),
             fontWeight: FontWeight.bold),
-        //errorBorder: const InputBorder(),
-        //hintText: hintText,
-        //hintStyle: TextStyle(color: Colors.blueGrey[400]),
         disabledBorder: OutlineInputBorder(
           borderSide: BorderSide(
             color: MzanziInnovationHub.of(context)!.theme.secondaryColor(),

Frontend/lib/mih_components/mih_package_components/Example/package_tools/package_tool_one.dart

@@ -2,9 +2,11 @@ import 'package:file_picker/file_picker.dart';
 import 'package:flutter/material.dart';
 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_apis/mih_alert_services.dart';
+import 'package:mzansi_innovation_hub/mih_apis/mih_validation_services.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_package_tool_body.dart';
 import 'package:mzansi_innovation_hub/mih_components/mih_package_components/mih_package_window.dart';
 import 'package:mzansi_innovation_hub/mih_components/mih_package_components/mih_circle_avatar.dart';
@@ -12,6 +14,7 @@ import 'package:mzansi_innovation_hub/mih_components/mih_package_components/mih_
 import 'package:mzansi_innovation_hub/mih_components/mih_package_components/mih_icons.dart';
 import 'package:mzansi_innovation_hub/mih_components/mih_package_components/mih_image_display.dart';
 import 'package:mzansi_innovation_hub/mih_components/mih_package_components/mih_search_bar.dart';
+import 'package:mzansi_innovation_hub/mih_components/mih_package_components/mih_text_form_field.dart';
 
 class PackageToolOne extends StatefulWidget {
   const PackageToolOne({super.key});
@@ -27,7 +30,14 @@ class _PackageToolOneState extends State<PackageToolOne> {
   TextEditingController _fileNameController = TextEditingController();
   TextEditingController _imagefileController = TextEditingController();
   TextEditingController _searchController = TextEditingController();
+  TextEditingController _textFieldZeroController = TextEditingController();
+  TextEditingController _textFieldOneController = TextEditingController();
+  TextEditingController _textFieldTwoController = TextEditingController();
+  TextEditingController _textFieldThreeController = TextEditingController();
+  TextEditingController _textFieldFourController = TextEditingController();
   final FocusNode searchFocusNode = FocusNode();
+  final _formKey = GlobalKey<FormState>();
+
   void showTestFullWindow() {
     showDialog(
       context: context,
@@ -85,9 +95,10 @@ class _PackageToolOneState extends State<PackageToolOne> {
 
   @override
   Widget build(BuildContext context) {
+    double screenWidth = MediaQuery.of(context).size.width;
     return MihPackageToolBody(
-      borderOn: true,
+      borderOn: false,
-      bodyItem: getBody(),
+      bodyItem: getBody(screenWidth),
     );
   }
 
@@ -110,10 +121,15 @@ class _PackageToolOneState extends State<PackageToolOne> {
     });
   }
 
-  Widget getBody() {
+  Widget getBody(double width) {
     return Stack(
       children: [
         MihSingleChildScroll(
+          child: Padding(
+            padding:
+                MzanziInnovationHub.of(context)!.theme.screenType == "desktop"
+                    ? EdgeInsets.symmetric(horizontal: width * 0.2)
+                    : EdgeInsets.symmetric(horizontal: width * 0.075),
             child: Column(
               mainAxisAlignment: MainAxisAlignment.center,
               crossAxisAlignment: CrossAxisAlignment.center,
@@ -136,6 +152,126 @@ class _PackageToolOneState extends State<PackageToolOne> {
                   ],
                 ),
                 const SizedBox(height: 20),
+                MihForm(
+                  formKey: _formKey,
+                  formFields: [
+                    MihTextFormField(
+                      width: 200,
+                      fillColor: MzanziInnovationHub.of(context)!
+                          .theme
+                          .secondaryColor(),
+                      inputColor:
+                          MzanziInnovationHub.of(context)!.theme.primaryColor(),
+                      controller: _textFieldZeroController,
+                      multiLineInput: false,
+                      requiredText: false,
+                      hintText: "Username",
+                      validator: (value) {
+                        return MihValidationServices().validateUsername(value);
+                      },
+                    ),
+                    const SizedBox(height: 10),
+                    MihTextFormField(
+                      fillColor: MzanziInnovationHub.of(context)!
+                          .theme
+                          .secondaryColor(),
+                      inputColor:
+                          MzanziInnovationHub.of(context)!.theme.primaryColor(),
+                      controller: _textFieldOneController,
+                      multiLineInput: false,
+                      requiredText: true,
+                      hintText: "Email",
+                      autofillHints: [AutofillHints.email],
+                      validator: (value) {
+                        return MihValidationServices().validateEmail(value);
+                      },
+                    ),
+                    const SizedBox(height: 10),
+                    MihTextFormField(
+                      fillColor: MzanziInnovationHub.of(context)!
+                          .theme
+                          .secondaryColor(),
+                      inputColor:
+                          MzanziInnovationHub.of(context)!.theme.primaryColor(),
+                      controller: _textFieldTwoController,
+                      multiLineInput: false,
+                      requiredText: true,
+                      hintText: "Password",
+                      passwordMode: true,
+                      autofillHints: [AutofillHints.password],
+                      validator: (value) {
+                        return MihValidationServices().validatePassword(value);
+                      },
+                    ),
+                    const SizedBox(height: 10),
+                    MihTextFormField(
+                      fillColor: MzanziInnovationHub.of(context)!
+                          .theme
+                          .secondaryColor(),
+                      inputColor:
+                          MzanziInnovationHub.of(context)!.theme.primaryColor(),
+                      controller: _textFieldThreeController,
+                      multiLineInput: false,
+                      requiredText: true,
+                      hintText: "Numbers Only",
+                      numberMode: true,
+                      validator: (value) => value == null || value.isEmpty
+                          ? 'This Field is required'
+                          : null,
+                    ),
+                    const SizedBox(height: 10),
+                    MihTextFormField(
+                      height: 250,
+                      fillColor: MzanziInnovationHub.of(context)!
+                          .theme
+                          .secondaryColor(),
+                      inputColor:
+                          MzanziInnovationHub.of(context)!.theme.primaryColor(),
+                      controller: _textFieldFourController,
+                      multiLineInput: true,
+                      requiredText: false,
+                      hintText: "Enter Multi Line Text",
+                    ),
+                    const SizedBox(height: 20),
+                    Align(
+                      alignment: Alignment.center,
+                      child: MihButton(
+                        onPressed: () {
+                          if (_formKey.currentState!.validate()) {
+                            // Process data
+                            ScaffoldMessenger.of(context).showSnackBar(
+                              const SnackBar(content: Text("Input Valid")),
+                            );
+                          } else {
+                            MihAlertServices().formNotFilledCompletely(context);
+                          }
+                        },
+                        buttonColor: MzanziInnovationHub.of(context)!
+                            .theme
+                            .secondaryColor(),
+                        elevation: 10,
+                        width: 300,
+                        child: Text(
+                          "Submit Form",
+                          style: TextStyle(
+                            color: MzanziInnovationHub.of(context)!
+                                .theme
+                                .primaryColor(),
+                            fontSize: 20,
+                            fontWeight: FontWeight.bold,
+                          ),
+                        ),
+                      ),
+                    ),
+                  ],
+                ),
+                const SizedBox(height: 10),
+                Divider(
+                  color:
+                      MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                  thickness: 2,
+                ),
+                const SizedBox(height: 10),
                 MihSearchBar(
                   controller: _searchController,
                   hintText: "Ask Mzansi",
@@ -184,8 +320,9 @@ class _PackageToolOneState extends State<PackageToolOne> {
                     children: [
                       Icon(
                         Icons.delete,
-                      color:
+                        color: MzanziInnovationHub.of(context)!
-                          MzanziInnovationHub.of(context)!.theme.primaryColor(),
+                            .theme
+                            .primaryColor(),
                       ),
                       Text(
                         "Click Me",
@@ -252,11 +389,15 @@ class _PackageToolOneState extends State<PackageToolOne> {
                   },
                 ),
                 const SizedBox(height: 10),
-              MIHTextField(
+                MihTextFormField(
+                  fillColor:
+                      MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                  inputColor:
+                      MzanziInnovationHub.of(context)!.theme.primaryColor(),
                   controller: _fileNameController,
                   hintText: "Selected Avatar File",
-                editable: false,
+                  requiredText: false,
-                required: false,
+                  readOnly: false,
                 ),
                 const SizedBox(height: 10),
                 MihImageDisplay(
@@ -273,15 +414,21 @@ class _PackageToolOneState extends State<PackageToolOne> {
                   },
                 ),
                 const SizedBox(height: 10),
-              MIHTextField(
+                MihTextFormField(
+                  fillColor:
+                      MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                  inputColor:
+                      MzanziInnovationHub.of(context)!.theme.primaryColor(),
                   controller: _imagefileController,
                   hintText: "Selected Image File",
-                editable: false,
+                  requiredText: false,
-                required: false,
+                  readOnly: false,
                 ),
+                const SizedBox(height: 10),
               ],
             ),
           ),
+        ),
         Positioned(
           right: 0,
           bottom: 0,

Frontend/lib/mih_components/mih_package_components/mih_form.dart

@@ -0,0 +1,27 @@
+import 'package:flutter/material.dart';
+
+class MihForm extends StatefulWidget {
+  final GlobalKey<FormState> formKey;
+  final List<Widget> formFields;
+  const MihForm({
+    super.key,
+    required this.formKey,
+    required this.formFields,
+  });
+
+  @override
+  State<MihForm> createState() => _MihFormState();
+}
+
+class _MihFormState extends State<MihForm> {
+  @override
+  Widget build(BuildContext context) {
+    return Form(
+      key: widget.formKey,
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: widget.formFields,
+      ),
+    );
+  }
+}

Frontend/lib/mih_components/mih_package_components/mih_package_window.dart

@@ -39,7 +39,7 @@ class _MihPackageWindowState extends State<MihPackageWindow> {
       setState(() {
         windowTitleSize = 25;
         horizontralWindowPadding = width / 7;
-        vertticalWindowPadding = 25;
+        vertticalWindowPadding = 10;
         windowWidth = width;
         windowHeight = height;
       });

Frontend/lib/mih_components/mih_package_components/mih_text_form_field.dart

@@ -0,0 +1,279 @@
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:mzansi_innovation_hub/main.dart';
+
+class MihTextFormField extends StatefulWidget {
+  final double? width;
+  final double? height;
+  final Color fillColor;
+  final Color inputColor;
+  final TextEditingController controller;
+  final bool? hasError;
+  final String hintText;
+  final double? borderRadius;
+  final bool? multiLineInput;
+  final bool? readOnly;
+  final bool? passwordMode;
+  final bool? numberMode;
+  final bool requiredText;
+  final FormFieldValidator<String>? validator;
+  final List<String>? autofillHints;
+  final double? elevation;
+
+  const MihTextFormField({
+    Key? key,
+    this.width,
+    this.height,
+    required this.fillColor,
+    required this.inputColor,
+    required this.controller,
+    this.hasError,
+    required this.hintText,
+    required this.requiredText,
+    this.borderRadius,
+    this.multiLineInput,
+    this.readOnly,
+    this.passwordMode,
+    this.numberMode,
+    this.validator,
+    this.autofillHints,
+    this.elevation,
+  }) : super(key: key);
+
+  @override
+  State<MihTextFormField> createState() => _MihTextFormFieldState();
+}
+
+class _MihTextFormFieldState extends State<MihTextFormField> {
+  late bool _obscureText;
+  FormFieldState<String>? _formFieldState;
+
+  @override
+  void initState() {
+    super.initState();
+    _obscureText = widget.passwordMode ?? false;
+    widget.controller.addListener(_onControllerTextChanged);
+  }
+
+  @override
+  void didUpdateWidget(covariant MihTextFormField oldWidget) {
+    super.didUpdateWidget(oldWidget);
+    // If the controller itself changes, remove listener from old and add to new
+    if (widget.controller != oldWidget.controller) {
+      oldWidget.controller.removeListener(_onControllerTextChanged);
+      widget.controller.addListener(_onControllerTextChanged);
+      // Immediately update form field state if controller changed and has value
+      _formFieldState?.didChange(widget.controller.text);
+    }
+  }
+
+  void _onControllerTextChanged() {
+    // Only update the FormField's value if it's not already the same
+    // and if the formFieldState is available.
+    if (_formFieldState != null &&
+        _formFieldState!.value != widget.controller.text) {
+      _formFieldState!.didChange(widget.controller.text);
+    }
+  }
+
+  @override
+  void dispose() {
+    widget.controller.removeListener(_onControllerTextChanged);
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Center(
+      child: SizedBox(
+        width: widget.width,
+        height: widget.height,
+        child: Theme(
+          data: Theme.of(context).copyWith(
+            textSelectionTheme: TextSelectionThemeData(
+              selectionColor: widget.inputColor.withValues(alpha: 0.3),
+              selectionHandleColor: widget.inputColor,
+            ),
+          ),
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              Row(
+                mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                children: [
+                  Text(
+                    widget.hintText,
+                    textAlign: TextAlign.left,
+                    style: TextStyle(
+                      color: widget.fillColor,
+                      fontSize: 15,
+                      fontWeight: FontWeight.bold,
+                    ),
+                  ),
+                  Visibility(
+                    visible: !widget.requiredText,
+                    child: Text(
+                      "(Optional)",
+                      textAlign: TextAlign.right,
+                      style: TextStyle(
+                        color: widget.fillColor,
+                        fontSize: 15,
+                        fontWeight: FontWeight.bold,
+                      ),
+                    ),
+                  ),
+                ],
+              ),
+              const SizedBox(height: 4),
+              FormField<String>(
+                initialValue: widget.controller.text,
+                validator: widget.validator,
+                autovalidateMode: AutovalidateMode.onUserInteraction,
+                builder: (field) {
+                  _formFieldState = field;
+                  return Column(
+                    crossAxisAlignment:
+                        CrossAxisAlignment.start, // <-- Add this line
+                    children: [
+                      Material(
+                        elevation: widget.elevation ?? 4.0,
+                        borderRadius:
+                            BorderRadius.circular(widget.borderRadius ?? 8.0),
+                        child: SizedBox(
+                          height: widget.height != null
+                              ? widget.height! - 25
+                              : null,
+                          child: TextFormField(
+                            controller: widget.controller,
+                            cursorColor: widget.inputColor,
+                            autofillHints: widget.autofillHints,
+                            textAlign: TextAlign.start,
+                            textAlignVertical: widget.multiLineInput == true
+                                ? TextAlignVertical.top
+                                : TextAlignVertical.center,
+                            obscureText: widget.passwordMode == true
+                                ? _obscureText
+                                : false,
+                            expands: widget.passwordMode == true
+                                ? false
+                                : (widget.multiLineInput ?? false),
+                            maxLines: widget.passwordMode == true ? 1 : null,
+                            readOnly: widget.readOnly ?? false,
+                            keyboardType: widget.numberMode == true
+                                ? TextInputType.number
+                                : null,
+                            inputFormatters: widget.numberMode == true
+                                ? [FilteringTextInputFormatter.digitsOnly]
+                                : null,
+                            style: TextStyle(
+                              color: widget.inputColor,
+                              fontWeight: FontWeight.w500,
+                            ),
+                            decoration: InputDecoration(
+                              suffixIcon: widget.passwordMode == true
+                                  ? IconButton(
+                                      icon: Icon(
+                                        _obscureText
+                                            ? Icons.visibility_off
+                                            : Icons.visibility,
+                                        color: widget.inputColor,
+                                      ),
+                                      onPressed: () {
+                                        setState(() {
+                                          _obscureText = !_obscureText;
+                                        });
+                                      },
+                                    )
+                                  : null,
+                              errorStyle: const TextStyle(
+                                  height: 0, fontSize: 0), // <-- Add this line
+                              contentPadding: const EdgeInsets.symmetric(
+                                  horizontal: 10.0, vertical: 8.0),
+                              filled: true,
+                              fillColor: widget.fillColor,
+                              border: OutlineInputBorder(
+                                borderRadius: BorderRadius.circular(
+                                    widget.borderRadius ?? 8.0),
+                                borderSide: field.hasError
+                                    ? BorderSide(
+                                        color: MzanziInnovationHub.of(context)!
+                                            .theme
+                                            .errorColor(),
+                                        width: 2.0,
+                                      )
+                                    : BorderSide.none,
+                              ),
+                              enabledBorder: OutlineInputBorder(
+                                borderRadius: BorderRadius.circular(
+                                    widget.borderRadius ?? 8.0),
+                                borderSide: BorderSide.none,
+                              ),
+                              focusedBorder: OutlineInputBorder(
+                                borderRadius: BorderRadius.circular(
+                                    widget.borderRadius ?? 8.0),
+                                borderSide: BorderSide(
+                                  color: field.hasError
+                                      ? MzanziInnovationHub.of(context)!
+                                          .theme
+                                          .errorColor()
+                                      : widget.inputColor,
+                                  width: 3.0,
+                                ),
+                              ),
+                              errorBorder: OutlineInputBorder(
+                                borderRadius: BorderRadius.circular(
+                                    widget.borderRadius ?? 8.0),
+                                borderSide: BorderSide(
+                                  color: MzanziInnovationHub.of(context)!
+                                      .theme
+                                      .errorColor(),
+                                  width: 3.0,
+                                ),
+                              ),
+                              focusedErrorBorder: OutlineInputBorder(
+                                borderRadius: BorderRadius.circular(
+                                    widget.borderRadius ?? 8.0),
+                                borderSide: BorderSide(
+                                  color: MzanziInnovationHub.of(context)!
+                                      .theme
+                                      .errorColor(),
+                                  width: 3.0,
+                                ),
+                              ),
+                            ),
+                            onChanged: (value) {
+                              field.didChange(value);
+                            },
+                          ),
+                        ),
+                      ),
+                      if (field.hasError)
+                        Row(
+                          children: [
+                            Padding(
+                              padding:
+                                  const EdgeInsets.only(left: 8.0, top: 4.0),
+                              child: Text(
+                                field.errorText ?? '',
+                                style: TextStyle(
+                                  fontSize: 12,
+                                  color: MzanziInnovationHub.of(context)!
+                                      .theme
+                                      .errorColor(),
+                                  fontWeight: FontWeight.bold,
+                                ),
+                              ),
+                            ),
+                          ],
+                        ),
+                    ],
+                  );
+                },
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}

Frontend/lib/mih_env/env.dart

@@ -15,16 +15,13 @@ abstract class AppEnviroment {
       case Enviroment.dev:
         {
           //================= Android Dev Urls =================
-          baseApiUrl = "http://10.0.2.2:8080";
+          // baseApiUrl = "http://10.0.2.2:8080";
-          baseFileUrl = "http://10.0.2.2:9000";
+          // baseFileUrl = "http://10.0.2.2:9000";
-          baseAiUrl = "http://10.0.2.2:11434";
+          // baseAiUrl = "http://10.0.2.2:11434";
           //================= Web Dev Urls =================
-          // baseApiUrl = "http://localhost:8080";
+          baseApiUrl = "http://localhost:8080";
-          // baseFileUrl = "http://localhost:9000";
+          baseFileUrl = "http://localhost:9000";
-          // baseAiUrl = "http://localhost:11434";
+          baseAiUrl = "http://localhost:11434";
-          whatsappAccessToken =
-              "EAAPINXuNFdYBOzBjTcvZA2iPXEHbHRF9uNXyP3ihkPRUcBqKNru5g9NKRRKkFaiaITEzO3BMo6CjdUmlDH4qYTW2mzDrZB4Q21ZCEZBgECZCu27vfaOXJZCYQLNxwoXkrZBRYv8ZAP37f69r3z9JxLQxdxn9gwqA3oNZAlBBRapJQzxOr6pZBTdI3bbjbu17ZBIwRcF4JCqPDCNLEZCI3bmHwEd2i2niNMYZD";
-          //fingerPrintPluginKey = 'h5X7a5j14iUZCobI1ZeX';
           break;
         }
       case Enviroment.prod:

Frontend/lib/mih_packages/about_mih/package_tools/mih_info.dart

@@ -1,5 +1,6 @@
 import 'package:flutter_speed_dial/flutter_speed_dial.dart';
 import 'package:mzansi_innovation_hub/main.dart';
+import 'package:mzansi_innovation_hub/mih_apis/mih_install_services.dart';
 import 'package:mzansi_innovation_hub/mih_components/mih_layout/mih_single_child_scroll.dart';
 import 'package:mzansi_innovation_hub/mih_components/mih_layout/mih_tile.dart';
 import 'package:mzansi_innovation_hub/mih_components/mih_package_components/mih_button.dart';
@@ -9,7 +10,6 @@ import 'package:flutter/material.dart';
 import 'package:font_awesome_flutter/font_awesome_flutter.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_icons.dart';
-import "package:universal_html/js.dart" as js;
 import 'package:url_launcher/url_launcher.dart';
 import 'package:share_plus/share_plus.dart';
 
@@ -41,46 +41,6 @@ class _MihInfoState extends State<MihInfo> {
   final Uri _redditUrl =
       Uri.parse('https://www.reddit.com/r/Mzani_Innovation_Hub/');
 
-  void installMihTrigger() {
-    final isWebAndroid =
-        kIsWeb && (defaultTargetPlatform == TargetPlatform.android);
-    final isWebIos = kIsWeb && (defaultTargetPlatform == TargetPlatform.iOS);
-
-    if (isWebAndroid) {
-      launchSocialUrl(
-        Uri.parse(
-          "https://play.google.com/store/apps/details?id=za.co.mzansiinnovationhub.mih",
-        ),
-      );
-    } else if (isWebIos) {
-      //Show pop up for IOS
-      // _showIOSInstallationGuide();
-      launchSocialUrl(
-        Uri.parse(
-          "https://apps.apple.com/za/app/mzansi-innovation-hub/id6743310890",
-        ),
-      );
-    } else if (MzanziInnovationHub.of(context)!.theme.getPlatform() ==
-        "Android") {
-      //Installed Android App
-      // _showIOSInstallationGuide();
-      launchSocialUrl(
-        Uri.parse(
-          "https://play.google.com/store/apps/details?id=za.co.mzansiinnovationhub.mih",
-        ),
-      );
-    } else if (MzanziInnovationHub.of(context)!.theme.getPlatform() == "iOS") {
-      launchSocialUrl(
-        Uri.parse(
-          "https://apps.apple.com/za/app/mzansi-innovation-hub/id6743310890",
-        ),
-      );
-    } else {
-      //Web
-      js.context.callMethod("presentAddToHome");
-    }
-  }
-
   Widget founderBio() {
     String bio = "";
     bio += "BSc Computer Science & Information Systems\n";
@@ -553,7 +513,7 @@ class _MihInfoState extends State<MihInfo> {
                   children: [
                     MihButton(
                       onPressed: () {
-                        installMihTrigger();
+                        MihInstallServices().installMihTrigger(context);
                       },
                       buttonColor: MzanziInnovationHub.of(context)!
                           .theme

Frontend/lib/mih_packages/authentication/forgot_password.dart

@@ -2,11 +2,14 @@ import 'dart:convert';
 
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
+import 'package:mzansi_innovation_hub/mih_apis/mih_alert_services.dart';
+import 'package:mzansi_innovation_hub/mih_apis/mih_validation_services.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_package_alert.dart';
+import 'package:mzansi_innovation_hub/mih_components/mih_package_components/mih_text_form_field.dart';
 import '../../main.dart';
 import 'package:supertokens_flutter/http.dart' as http;
-import '../../mih_components/mih_inputs_and_buttons/mih_text_input.dart';
 import '../../mih_components/mih_layout/mih_action.dart';
 import '../../mih_components/mih_layout/mih_body.dart';
 import '../../mih_components/mih_layout/mih_header.dart';
@@ -25,6 +28,7 @@ class ForgotPassword extends StatefulWidget {
 
 class _ForgotPasswordState extends State<ForgotPassword> {
   final emailController = TextEditingController();
+  final _formKey = GlobalKey<FormState>();
 
   //bool _obscureText = true;
   bool successfulForgotPassword = false;
@@ -201,7 +205,7 @@ class _ForgotPasswordState extends State<ForgotPassword> {
     );
   }
 
-  MIHBody getBody() {
+  MIHBody getBody(double width) {
     return MIHBody(
       borderOn: false,
       bodyItems: [
@@ -219,7 +223,12 @@ class _ForgotPasswordState extends State<ForgotPassword> {
               child: SingleChildScrollView(
                 physics: const BouncingScrollPhysics(),
                 child: Padding(
-                  padding: const EdgeInsets.all(25.0),
+                  padding: MzanziInnovationHub.of(context)!.theme.screenType ==
+                          "desktop"
+                      ? EdgeInsets.symmetric(
+                          vertical: 25, horizontal: width * 0.2)
+                      : EdgeInsets.symmetric(
+                          vertical: 25, horizontal: width * 0.075),
                   child: Column(
                     mainAxisAlignment: MainAxisAlignment.center,
                     children: [
@@ -244,25 +253,38 @@ class _ForgotPasswordState extends State<ForgotPassword> {
                               .secondaryColor(),
                         ),
                       ),
-                      //spacer
                       const SizedBox(height: 25),
-
+                      MihForm(
-                      //email input
+                        formKey: _formKey,
-                      SizedBox(
+                        formFields: [
-                        width: 500.0,
+                          MihTextFormField(
-                        child: MIHTextField(
+                            fillColor: MzanziInnovationHub.of(context)!
+                                .theme
+                                .secondaryColor(),
+                            inputColor: MzanziInnovationHub.of(context)!
+                                .theme
+                                .primaryColor(),
                             controller: emailController,
-                          hintText: 'Email',
+                            multiLineInput: false,
-                          editable: true,
+                            requiredText: true,
-                          required: true,
+                            hintText: "Email",
+                            validator: (value) {
+                              return MihValidationServices()
+                                  .validateEmail(value);
+                            },
                           ),
-                      ),
-
                           //spacer
-                      const SizedBox(height: 25),
+                          const SizedBox(height: 20),
-                      MihButton(
+                          Align(
+                            alignment: Alignment.center,
+                            child: MihButton(
                               onPressed: () {
+                                if (_formKey.currentState!.validate()) {
                                   prePassResteWarning();
+                                } else {
+                                  MihAlertServices()
+                                      .formNotFilledCompletely(context);
+                                }
                               },
                               buttonColor: MzanziInnovationHub.of(context)!
                                   .theme
@@ -279,6 +301,9 @@ class _ForgotPasswordState extends State<ForgotPassword> {
                                 ),
                               ),
                             ),
+                          ),
+                        ],
+                      ),
                     ],
                   ),
                 ),
@@ -304,11 +329,12 @@ class _ForgotPasswordState extends State<ForgotPassword> {
 
   @override
   Widget build(BuildContext context) {
+    double screenWidth = MediaQuery.of(context).size.width;
     return MIHLayoutBuilder(
       actionButton: getActionButton(),
       header: getHeader(),
       secondaryActionButton: null,
-      body: getBody(),
+      body: getBody(screenWidth),
       actionDrawer: null,
       secondaryActionDrawer: null,
       bottomNavBar: null,

Frontend/lib/mih_packages/authentication/register.dart

@@ -1,18 +1,18 @@
 import 'dart:convert';
 
+import 'package:mzansi_innovation_hub/mih_apis/mih_alert_services.dart';
+import 'package:mzansi_innovation_hub/mih_apis/mih_install_services.dart';
+import 'package:mzansi_innovation_hub/mih_apis/mih_validation_services.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_icons.dart';
+import 'package:mzansi_innovation_hub/mih_components/mih_package_components/mih_text_form_field.dart';
 import 'package:mzansi_innovation_hub/mih_objects/arguments.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import '../../main.dart';
-//import '../objects/sessionST.dart';
-//import 'package:supertokens_flutter/supertokens.dart';
 import 'package:supertokens_flutter/http.dart' as http;
 import 'package:supertokens_flutter/supertokens.dart';
-
-import '../../mih_components/mih_inputs_and_buttons/mih_pass_input.dart';
-import '../../mih_components/mih_inputs_and_buttons/mih_text_input.dart';
 import '../../mih_components/mih_layout/mih_action.dart';
 import '../../mih_components/mih_layout/mih_body.dart';
 import '../../mih_components/mih_layout/mih_header.dart';
@@ -37,6 +37,7 @@ class _RegisterState extends State<Register> {
   final officeID = TextEditingController();
   final baseAPI = AppEnviroment.baseApiUrl;
   final FocusNode _focusNode = FocusNode();
+  final _formKey = GlobalKey<FormState>();
   bool _obscureText = true;
 
   bool successfulSignUp = false;
@@ -218,20 +219,9 @@ class _RegisterState extends State<Register> {
     );
   }
 
-  void validateInput() async {
+  void submitFormInput() async {
-    if (emailController.text.isEmpty ||
-        passwordController.text.isEmpty ||
-        confirmPasswordController.text.isEmpty) {
-      showDialog(
-        context: context,
-        builder: (context) {
-          return const MIHErrorMessage(errorType: "Input Error");
-        },
-      );
-    } else {
     await signUserUp();
   }
-  }
 
   void toggle() {
     setState(() {
@@ -247,14 +237,11 @@ class _RegisterState extends State<Register> {
           padding: const EdgeInsets.all(10.0),
           child: MihButton(
             onPressed: () {
-              Navigator.of(context).pushNamed(
+              MihInstallServices().installMihTrigger(context);
-                '/about',
-                arguments: 0,
-              );
             },
             buttonColor:
                 MzanziInnovationHub.of(context)!.theme.secondaryColor(),
-            width: 300,
+            width: 150,
             child: Text(
               "Install MIH",
               style: TextStyle(
@@ -267,10 +254,7 @@ class _RegisterState extends State<Register> {
         ),
         iconSize: 35,
         onTap: () {
-          Navigator.of(context).pushNamed(
+          MihInstallServices().installMihTrigger(context);
-            '/about',
-            arguments: 0,
-          );
         },
       ),
     );
@@ -315,7 +299,7 @@ class _RegisterState extends State<Register> {
     );
   }
 
-  MIHBody getBody() {
+  MIHBody getBody(double width) {
     return MIHBody(
       borderOn: false,
       bodyItems: [
@@ -325,7 +309,11 @@ class _RegisterState extends State<Register> {
           onKeyEvent: (event) async {
             if (event is KeyDownEvent &&
                 event.logicalKey == LogicalKeyboardKey.enter) {
-              validateInput();
+              if (_formKey.currentState!.validate()) {
+                submitFormInput();
+              } else {
+                MihAlertServices().formNotFilledCompletely(context);
+              }
             }
           },
           child: SafeArea(
@@ -333,7 +321,10 @@ class _RegisterState extends State<Register> {
             child: SingleChildScrollView(
               physics: const BouncingScrollPhysics(),
               child: Padding(
-                padding: const EdgeInsets.all(25.0),
+                padding: MzanziInnovationHub.of(context)!.theme.screenType ==
+                        "desktop"
+                    ? EdgeInsets.symmetric(horizontal: width * 0.2)
+                    : EdgeInsets.symmetric(horizontal: width * 0.075),
                 child: Column(
                   mainAxisAlignment: MainAxisAlignment.center,
                   children: [
@@ -359,50 +350,90 @@ class _RegisterState extends State<Register> {
                       ),
                     ),
                     //spacer
-                    const SizedBox(height: 25),
+                    // const SizedBox(height: 20),
+                    MihForm(
+                      formKey: _formKey,
+                      formFields: [
                         //email input
-                    SizedBox(
+                        MihTextFormField(
-                      width: 500.0,
+                          fillColor: MzanziInnovationHub.of(context)!
-                      child: MIHTextField(
+                              .theme
+                              .secondaryColor(),
+                          inputColor: MzanziInnovationHub.of(context)!
+                              .theme
+                              .primaryColor(),
                           controller: emailController,
-                        hintText: 'Email',
+                          multiLineInput: false,
-                        editable: true,
+                          requiredText: true,
-                        required: true,
+                          hintText: "Email",
-                      ),
+                          autofillHints: const [AutofillHints.email],
+                          validator: (value) {
+                            return MihValidationServices().validateEmail(value);
+                          },
                         ),
                         //spacer
                         const SizedBox(height: 10),
                         //password input
-                    SizedBox(
+                        MihTextFormField(
-                      width: 500.0,
+                          fillColor: MzanziInnovationHub.of(context)!
-                      child: MIHPassField(
+                              .theme
+                              .secondaryColor(),
+                          inputColor: MzanziInnovationHub.of(context)!
+                              .theme
+                              .primaryColor(),
                           controller: passwordController,
-                        hintText: 'Password',
+                          multiLineInput: false,
-                        required: true,
+                          requiredText: true,
-                        signIn: false,
+                          hintText: "Password",
-                      ),
+                          passwordMode: true,
+                          autofillHints: const [AutofillHints.password],
+                          validator: (value) {
+                            return MihValidationServices()
+                                .validatePassword(value);
+                          },
                         ),
                         //spacer
                         const SizedBox(height: 10),
-                    //password input
+                        MihTextFormField(
-                    SizedBox(
+                          fillColor: MzanziInnovationHub.of(context)!
-                      width: 500.0,
+                              .theme
-                      child: MIHPassField(
+                              .secondaryColor(),
+                          inputColor: MzanziInnovationHub.of(context)!
+                              .theme
+                              .primaryColor(),
                           controller: confirmPasswordController,
-                        hintText: 'Confirm Password',
+                          multiLineInput: false,
-                        required: true,
+                          requiredText: true,
-                        signIn: false,
+                          hintText: "Confirm Password",
-                      ),
+                          passwordMode: true,
+                          autofillHints: const [AutofillHints.password],
+                          validator: (value) {
+                            return MihValidationServices()
+                                .validatePassword(value);
+                          },
                         ),
                         //spacer
-                    const SizedBox(height: 25),
+                        const SizedBox(height: 20),
                         // sign up button
+                        Center(
+                          child: Wrap(
+                            alignment: WrapAlignment.center,
+                            runAlignment: WrapAlignment.center,
+                            spacing: 10,
+                            runSpacing: 10,
+                            children: [
                               MihButton(
                                 onPressed: () {
-                        validateInput();
+                                  if (_formKey.currentState!.validate()) {
+                                    submitFormInput();
+                                  } else {
+                                    MihAlertServices()
+                                        .formNotFilledCompletely(context);
+                                  }
                                 },
-                      buttonColor:
+                                buttonColor: MzanziInnovationHub.of(context)!
-                          MzanziInnovationHub.of(context)!.theme.successColor(),
+                                    .theme
+                                    .successColor(),
                                 width: 300,
                                 child: Text(
                                   "Create New Account",
@@ -415,37 +446,29 @@ class _RegisterState extends State<Register> {
                                   ),
                                 ),
                               ),
-
+                              MihButton(
-                    const SizedBox(height: 10),
+                                onPressed: widget.onTap,
-                    //register text
+                                buttonColor: MzanziInnovationHub.of(context)!
-                    SizedBox(
-                      width: 500.0,
-                      //height: 100.0,
-                      child: Row(
-                        mainAxisAlignment: MainAxisAlignment.end,
-                        children: [
-                          const Text(
-                            'Already a User?',
-                            style: TextStyle(fontSize: 18, color: Colors.grey),
-                          ),
-                          const SizedBox(
-                            width: 6,
-                          ),
-                          GestureDetector(
-                            onTap: widget.onTap,
-                            child: Text(
-                              'Sign In',
-                              style: TextStyle(
-                                fontSize: 18,
-                                color: MzanziInnovationHub.of(context)!
                                     .theme
                                     .secondaryColor(),
+                                width: 300,
+                                child: Text(
+                                  "I have an account",
+                                  style: TextStyle(
+                                    color: MzanziInnovationHub.of(context)!
+                                        .theme
+                                        .primaryColor(),
+                                    fontSize: 20,
                                     fontWeight: FontWeight.bold,
                                   ),
                                 ),
-                          )
+                              ),
                             ],
                           ),
+                        ),
+
+                        //here
+                      ],
                     )
                   ],
                 ),
@@ -468,11 +491,12 @@ class _RegisterState extends State<Register> {
 
   @override
   Widget build(BuildContext context) {
+    double screenWidth = MediaQuery.of(context).size.width;
     return MIHLayoutBuilder(
       actionButton: getActionButton(),
       header: getHeader(),
       secondaryActionButton: getSecondaryActionButton(),
-      body: getBody(),
+      body: getBody(screenWidth),
       actionDrawer: null,
       secondaryActionDrawer: null,
       bottomNavBar: null,

Frontend/lib/mih_packages/authentication/reset_password.dart

@@ -2,10 +2,13 @@ import 'dart:convert';
 
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
+import 'package:mzansi_innovation_hub/mih_apis/mih_alert_services.dart';
+import 'package:mzansi_innovation_hub/mih_apis/mih_validation_services.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 '../../main.dart';
 import 'package:supertokens_flutter/http.dart' as http;
-import '../../mih_components/mih_inputs_and_buttons/mih_pass_input.dart';
 import '../../mih_components/mih_layout/mih_action.dart';
 import '../../mih_components/mih_layout/mih_body.dart';
 import '../../mih_components/mih_layout/mih_header.dart';
@@ -35,6 +38,7 @@ class _ResetPasswordState extends State<ResetPassword> {
   bool acceptWarning = false;
   // focus node to capture keyboard events
   final FocusNode _focusNode = FocusNode();
+  final _formKey = GlobalKey<FormState>();
 
   final baseAPI = AppEnviroment.baseApiUrl;
 
@@ -131,16 +135,8 @@ class _ResetPasswordState extends State<ResetPassword> {
     );
   }
 
-  void validateInput() async {
+  void submitFormInput() async {
-    if (passwordController.text.isEmpty ||
+    if (passwordController.text != confirmPasswordController.text) {
-        confirmPasswordController.text.isEmpty) {
-      showDialog(
-        context: context,
-        builder: (context) {
-          return const MIHErrorMessage(errorType: "Input Error");
-        },
-      );
-    } else if (passwordController.text != confirmPasswordController.text) {
       passwordError();
     } else {
       await submitPasswodReset();
@@ -185,7 +181,7 @@ class _ResetPasswordState extends State<ResetPassword> {
     );
   }
 
-  MIHBody getBody() {
+  MIHBody getBody(double width) {
     return MIHBody(
       borderOn: false,
       bodyItems: [
@@ -195,7 +191,11 @@ class _ResetPasswordState extends State<ResetPassword> {
           onKeyEvent: (event) async {
             if (event is KeyDownEvent &&
                 event.logicalKey == LogicalKeyboardKey.enter) {
-              validateInput();
+              if (_formKey.currentState!.validate()) {
+                submitFormInput();
+              } else {
+                MihAlertServices().formNotFilledCompletely(context);
+              }
             }
           },
           child: SafeArea(
@@ -203,7 +203,10 @@ class _ResetPasswordState extends State<ResetPassword> {
               child: SingleChildScrollView(
                 physics: const BouncingScrollPhysics(),
                 child: Padding(
-                  padding: const EdgeInsets.all(25.0),
+                  padding: MzanziInnovationHub.of(context)!.theme.screenType ==
+                          "desktop"
+                      ? EdgeInsets.symmetric(horizontal: width * 0.2)
+                      : EdgeInsets.symmetric(horizontal: width * 0.075),
                   child: Column(
                     mainAxisAlignment: MainAxisAlignment.center,
                     children: [
@@ -229,48 +232,84 @@ class _ResetPasswordState extends State<ResetPassword> {
                         ),
                       ),
                       //spacer
-                      // const SizedBox(height: 15),
-                      // Text(
-                      //   'token: ${widget.token}',
-                      //   style: TextStyle(
-                      //     fontSize: 15,
-                      //     fontWeight: FontWeight.bold,
-                      //     color: MzanziInnovationHub.of(context)!
-                      //         .theme
-                      //         .secondaryColor(),
-                      //   ),
-                      // ),
-                      //spacer
                       const SizedBox(height: 25),
-                      //email input
+                      MihForm(
-                      SizedBox(
+                        formKey: _formKey,
-                        width: 500.0,
+                        formFields: [
-                        child: MIHPassField(
+                          MihTextFormField(
+                            fillColor: MzanziInnovationHub.of(context)!
+                                .theme
+                                .secondaryColor(),
+                            inputColor: MzanziInnovationHub.of(context)!
+                                .theme
+                                .primaryColor(),
                             controller: passwordController,
-                          hintText: 'New Password',
+                            multiLineInput: false,
-                          required: true,
+                            requiredText: true,
-                          signIn: false,
+                            hintText: "Password",
-                        ),
+                            passwordMode: true,
+                            autofillHints: const [AutofillHints.password],
+                            validator: (value) {
+                              return MihValidationServices()
+                                  .validatePassword(value);
+                            },
                           ),
                           //spacer
                           const SizedBox(height: 10),
-                      //password input
+                          MihTextFormField(
-                      SizedBox(
+                            fillColor: MzanziInnovationHub.of(context)!
-                        width: 500.0,
+                                .theme
-                        child: MIHPassField(
+                                .secondaryColor(),
+                            inputColor: MzanziInnovationHub.of(context)!
+                                .theme
+                                .primaryColor(),
                             controller: confirmPasswordController,
-                          hintText: 'Confirm New Password',
+                            multiLineInput: false,
-                          required: true,
+                            requiredText: true,
-                          signIn: false,
+                            hintText: "Confirm Password",
-                        ),
+                            passwordMode: true,
+                            autofillHints: const [AutofillHints.password],
+                            validator: (value) {
+                              return MihValidationServices()
+                                  .validatePassword(value);
+                            },
                           ),
 
+                          // //email input
+                          // SizedBox(
+                          //   width: 500.0,
+                          //   child: MIHPassField(
+                          //     controller: passwordController,
+                          //     hintText: 'New Password',
+                          //     required: true,
+                          //     signIn: false,
+                          //   ),
+                          // ),
+                          // //spacer
+                          // const SizedBox(height: 10),
+                          // //password input
+                          // SizedBox(
+                          //   width: 500.0,
+                          //   child: MIHPassField(
+                          //     controller: confirmPasswordController,
+                          //     hintText: 'Confirm New Password',
+                          //     required: true,
+                          //     signIn: false,
+                          //   ),
+                          // ),
+
                           //spacer
                           const SizedBox(height: 25),
                           // sign in button
-                      MihButton(
+                          Center(
+                            child: MihButton(
                               onPressed: () {
-                          validateInput();
+                                if (_formKey.currentState!.validate()) {
+                                  submitFormInput();
+                                } else {
+                                  MihAlertServices()
+                                      .formNotFilledCompletely(context);
+                                }
                               },
                               buttonColor: MzanziInnovationHub.of(context)!
                                   .theme
@@ -287,6 +326,9 @@ class _ResetPasswordState extends State<ResetPassword> {
                                 ),
                               ),
                             ),
+                          ),
+                        ],
+                      ),
                     ],
                   ),
                 ),
@@ -313,11 +355,12 @@ class _ResetPasswordState extends State<ResetPassword> {
 
   @override
   Widget build(BuildContext context) {
+    double screenWidth = MediaQuery.of(context).size.width;
     return MIHLayoutBuilder(
       actionButton: getActionButton(),
       header: getHeader(),
       secondaryActionButton: null,
-      body: getBody(),
+      body: getBody(screenWidth),
       actionDrawer: null,
       secondaryActionDrawer: null,
       bottomNavBar: null,

Frontend/lib/mih_packages/authentication/signin.dart

@@ -1,13 +1,16 @@
 import 'dart:convert';
+import 'package:mzansi_innovation_hub/mih_apis/mih_alert_services.dart';
+import 'package:mzansi_innovation_hub/mih_apis/mih_install_services.dart';
+import 'package:mzansi_innovation_hub/mih_apis/mih_validation_services.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_icons.dart';
+import 'package:mzansi_innovation_hub/mih_components/mih_package_components/mih_text_form_field.dart';
 import 'package:mzansi_innovation_hub/mih_objects/arguments.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import '../../main.dart';
 import 'package:supertokens_flutter/http.dart' as http;
-import '../../mih_components/mih_inputs_and_buttons/mih_pass_input.dart';
-import '../../mih_components/mih_inputs_and_buttons/mih_text_input.dart';
 import '../../mih_components/mih_layout/mih_action.dart';
 import '../../mih_components/mih_layout/mih_body.dart';
 import '../../mih_components/mih_layout/mih_header.dart';
@@ -34,6 +37,7 @@ class _SignInState extends State<SignIn> {
 
   // focus node to capture keyboard events
   final FocusNode _focusNode = FocusNode();
+  final _formKey = GlobalKey<FormState>();
 
   final baseAPI = AppEnviroment.baseApiUrl;
 
@@ -99,7 +103,11 @@ class _SignInState extends State<SignIn> {
           emailController.text = "testpatient@mzansi-innovation-hub.co.za";
           passwordController.text = "Testprofile@1234";
         });
-        validateInput();
+        if (_formKey.currentState!.validate()) {
+          submitSignInForm();
+        } else {
+          MihAlertServices().formNotFilledCompletely(context);
+        }
       },
       tileName: "Patient",
       tileIcon: Icon(
@@ -116,7 +124,11 @@ class _SignInState extends State<SignIn> {
           emailController.text = "testdoctor@mzansi-innovation-hub.co.za";
           passwordController.text = "Testprofile@1234";
         });
-        validateInput();
+        if (_formKey.currentState!.validate()) {
+          submitSignInForm();
+        } else {
+          MihAlertServices().formNotFilledCompletely(context);
+        }
       },
       tileName: "Doctor",
       tileIcon: Icon(
@@ -134,7 +146,11 @@ class _SignInState extends State<SignIn> {
           emailController.text = "test-business@mzansi-innovation-hub.co.za";
           passwordController.text = "Testprofile@1234";
         });
-        validateInput();
+        if (_formKey.currentState!.validate()) {
+          submitSignInForm();
+        } else {
+          MihAlertServices().formNotFilledCompletely(context);
+        }
       },
       tileName: "Business",
       tileIcon: Icon(
@@ -151,7 +167,11 @@ class _SignInState extends State<SignIn> {
           emailController.text = "test@mzansi-innovation-hub.co.za";
           passwordController.text = "Testprofile@1234";
         });
-        validateInput();
+        if (_formKey.currentState!.validate()) {
+          submitSignInForm();
+        } else {
+          MihAlertServices().formNotFilledCompletely(context);
+        }
       },
       tileName: "Test",
       tileIcon: Icon(
@@ -174,18 +194,9 @@ class _SignInState extends State<SignIn> {
     );
   }
 
-  void validateInput() async {
+  void submitSignInForm() async {
-    if (emailController.text.isEmpty || passwordController.text.isEmpty) {
-      showDialog(
-        context: context,
-        builder: (context) {
-          return const MIHErrorMessage(errorType: "Input Error");
-        },
-      );
-    } else {
     await signUserIn();
     if (successfulSignIn) {
-        // TextInput.finishAutofillContext();
       Navigator.of(context).pushNamedAndRemoveUntil(
         '/',
         (route) => false,
@@ -196,7 +207,6 @@ class _SignInState extends State<SignIn> {
       );
     }
   }
-  }
 
   void showSandboxProfiles() {
     showDialog(
@@ -293,14 +303,11 @@ class _SignInState extends State<SignIn> {
           padding: const EdgeInsets.all(10.0),
           child: MihButton(
             onPressed: () {
-              Navigator.of(context).pushNamed(
+              MihInstallServices().installMihTrigger(context);
-                '/about',
-                arguments: 0,
-              );
             },
             buttonColor:
                 MzanziInnovationHub.of(context)!.theme.secondaryColor(),
-            width: 300,
+            width: 150,
             child: Text(
               "Install MIH",
               style: TextStyle(
@@ -361,7 +368,7 @@ class _SignInState extends State<SignIn> {
     );
   }
 
-  MIHBody getBody() {
+  MIHBody getBody(double width) {
     return MIHBody(
       borderOn: false,
       bodyItems: [
@@ -371,7 +378,11 @@ class _SignInState extends State<SignIn> {
           onKeyEvent: (event) async {
             if (event is KeyDownEvent &&
                 event.logicalKey == LogicalKeyboardKey.enter) {
-              validateInput();
+              if (_formKey.currentState!.validate()) {
+                submitSignInForm();
+              } else {
+                MihAlertServices().formNotFilledCompletely(context);
+              }
             }
           },
           child: SafeArea(
@@ -379,7 +390,10 @@ class _SignInState extends State<SignIn> {
               child: SingleChildScrollView(
                 physics: const BouncingScrollPhysics(),
                 child: Padding(
-                  padding: const EdgeInsets.all(25.0),
+                  padding: MzanziInnovationHub.of(context)!.theme.screenType ==
+                          "desktop"
+                      ? EdgeInsets.symmetric(horizontal: width * 0.2)
+                      : EdgeInsets.symmetric(horizontal: width * 0.075),
                   child: AutofillGroup(
                     child: Column(
                       mainAxisAlignment: MainAxisAlignment.center,
@@ -406,61 +420,51 @@ class _SignInState extends State<SignIn> {
                           ),
                         ),
                         //spacer
-                        const SizedBox(height: 25),
+                        const SizedBox(height: 10),
-
+                        MihForm(
-                        // SizedBox(
+                          formKey: _formKey,
-                        //   width: 500.0,
+                          formFields: [
-                        //   //height: 100.0,
+                            MihTextFormField(
-                        //   child: Row(
+                              fillColor: MzanziInnovationHub.of(context)!
-                        //     mainAxisAlignment: MainAxisAlignment.start,
+                                  .theme
-                        //     children: [
+                                  .secondaryColor(),
-                        //       GestureDetector(
+                              inputColor: MzanziInnovationHub.of(context)!
-                        //         onTap: () {
+                                  .theme
-                        //           showSandboxProfiles();
+                                  .primaryColor(),
-                        //         },
-                        //         child: Text(
-                        //           'Sandbox Profile',
-                        //           style: TextStyle(
-                        //             fontSize: 18,
-                        //             color: MzanziInnovationHub.of(context)!
-                        //                 .theme
-                        //                 .secondaryColor(),
-                        //             fontWeight: FontWeight.bold,
-                        //           ),
-                        //         ),
-                        //       ),
-                        //     ],
-                        //   ),
-                        // ),
-                        // const SizedBox(height: 10),
-                        //email input
-                        SizedBox(
-                          width: 500.0,
-                          child: MIHTextField(
                               controller: emailController,
-                            hintText: 'Email',
+                              multiLineInput: false,
-                            editable: true,
+                              requiredText: true,
-                            required: true,
+                              hintText: "Email",
-                            autoFillHintGroup: const [AutofillHints.email],
+                              autofillHints: const [AutofillHints.email],
-                            textInputAction: TextInputAction.next,
+                              validator: (value) {
+                                return MihValidationServices()
+                                    .validateEmail(value);
+                              },
                             ),
-                        ),
-
                             //spacer
                             const SizedBox(height: 10),
                             //password input
-                        SizedBox(
+                            MihTextFormField(
-                          width: 500.0,
+                              fillColor: MzanziInnovationHub.of(context)!
-                          child: MIHPassField(
+                                  .theme
+                                  .secondaryColor(),
+                              inputColor: MzanziInnovationHub.of(context)!
+                                  .theme
+                                  .primaryColor(),
                               controller: passwordController,
-                            hintText: 'Password',
+                              multiLineInput: false,
-                            required: true,
+                              requiredText: true,
-                            signIn: true,
+                              hintText: "Password",
-                            autoFillHintGroup: const [AutofillHints.password],
+                              passwordMode: true,
-                          ),
+                              autofillHints: const [AutofillHints.password],
+                              validator: (value) {
+                                return MihValidationServices()
+                                    .validatePassword(value);
+                              },
                             ),
+                            const SizedBox(height: 10),
                             SizedBox(
-                          width: 500.0,
+                              // width: 500.0,
                               //height: 100.0,
                               child: Row(
                                 mainAxisAlignment: MainAxisAlignment.end,
@@ -487,13 +491,26 @@ class _SignInState extends State<SignIn> {
                             ),
 
                             //spacer
-                        const SizedBox(height: 30),
+                            const SizedBox(height: 20),
                             // sign in button
+                            Center(
+                              child: Wrap(
+                                alignment: WrapAlignment.center,
+                                runAlignment: WrapAlignment.center,
+                                spacing: 10,
+                                runSpacing: 10,
+                                children: [
                                   MihButton(
                                     onPressed: () {
-                            validateInput();
+                                      if (_formKey.currentState!.validate()) {
+                                        submitSignInForm();
+                                      } else {
+                                        MihAlertServices()
+                                            .formNotFilledCompletely(context);
+                                      }
                                     },
-                          buttonColor: MzanziInnovationHub.of(context)!
+                                    buttonColor:
+                                        MzanziInnovationHub.of(context)!
                                             .theme
                                             .secondaryColor(),
                                     width: 300,
@@ -508,10 +525,10 @@ class _SignInState extends State<SignIn> {
                                       ),
                                     ),
                                   ),
-                        const SizedBox(height: 10),
                                   MihButton(
                                     onPressed: widget.onTap,
-                          buttonColor: MzanziInnovationHub.of(context)!
+                                    buttonColor:
+                                        MzanziInnovationHub.of(context)!
                                             .theme
                                             .successColor(),
                                     width: 300,
@@ -526,46 +543,15 @@ class _SignInState extends State<SignIn> {
                                       ),
                                     ),
                                   ),
+                                ],
+                              ),
+                            ),
+
                             //spacer
-                        const SizedBox(height: 10),
+                            const SizedBox(height: 35),
-                        //register text
+                            Center(
-                        // SizedBox(
+                              child: SizedBox(
-                        //   width: 500.0,
+                                width: width,
-                        //   //height: 100.0,
-                        //   child: Row(
-                        //     mainAxisAlignment: MainAxisAlignment.end,
-                        //     children: [
-                        //       Text(
-                        //         'New User?',
-                        //         style: TextStyle(
-                        //             fontSize: 18,
-                        //             color: MzanziInnovationHub.of(context)!
-                        //                 .theme
-                        //                 .messageTextColor()),
-                        //       ),
-                        //       const SizedBox(
-                        //         width: 6,
-                        //       ),
-                        //       GestureDetector(
-                        //         onTap: widget.onTap,
-                        //         child: Text(
-                        //           'Register Now',
-                        //           style: TextStyle(
-                        //             fontSize: 18,
-                        //             color: MzanziInnovationHub.of(context)!
-                        //                 .theme
-                        //                 .secondaryColor(),
-                        //             fontWeight: FontWeight.bold,
-                        //           ),
-                        //         ),
-                        //       ),
-                        //     ],
-                        //   ),
-                        // ),
-                        //spacer
-                        const SizedBox(height: 15),
-                        SizedBox(
-                          width: 500.0,
                                 //height: 100.0,
                                 child: Row(
                                   mainAxisAlignment: MainAxisAlignment.center,
@@ -586,7 +572,8 @@ class _SignInState extends State<SignIn> {
                                           style: TextStyle(
                                               fontWeight: FontWeight.bold,
                                               fontSize: 15,
-                                        color: MzanziInnovationHub.of(context)!
+                                              color: MzanziInnovationHub.of(
+                                                      context)!
                                                   .theme
                                                   .secondaryColor()),
                                         ),
@@ -607,8 +594,10 @@ class _SignInState extends State<SignIn> {
                                   ],
                                 ),
                               ),
+                            ),
                             const SizedBox(height: 10),
-                        Visibility(
+                            Center(
+                              child: Visibility(
                                 visible: showProfiles,
                                 child: SizedBox(
                                   width: 500,
@@ -616,7 +605,8 @@ class _SignInState extends State<SignIn> {
                                     //mainAxisSize: MainAxisSize.max,
                                     children: [
                                       GridView.builder(
-                                  physics: const NeverScrollableScrollPhysics(),
+                                        physics:
+                                            const NeverScrollableScrollPhysics(),
                                         shrinkWrap: true,
                                         itemCount: sandboxProfileList.length,
                                         gridDelegate:
@@ -632,7 +622,8 @@ class _SignInState extends State<SignIn> {
                                         "NB: These accounts are used for test purposes. Please do not store personal information on these profiles.",
                                         textAlign: TextAlign.center,
                                         style: TextStyle(
-                                    color: MzanziInnovationHub.of(context)!
+                                          color:
+                                              MzanziInnovationHub.of(context)!
                                                   .theme
                                                   .secondaryColor(),
                                           fontSize: 15.0,
@@ -643,6 +634,9 @@ class _SignInState extends State<SignIn> {
                                   ),
                                 ),
                               ),
+                            ),
+                          ],
+                        ),
                       ],
                     ),
                   ),
@@ -674,11 +668,12 @@ class _SignInState extends State<SignIn> {
 
   @override
   Widget build(BuildContext context) {
+    double screenWidth = MediaQuery.of(context).size.width;
     return MIHLayoutBuilder(
       actionButton: getActionButton(),
       header: getHeader(),
       secondaryActionButton: getSecondaryActionButton(),
-      body: getBody(),
+      body: getBody(screenWidth),
       actionDrawer: null,
       secondaryActionDrawer: null,
       bottomNavBar: null,

Frontend/lib/mih_packages/calendar/builder/build_appointment_list.dart

@@ -1,12 +1,14 @@
 import 'package:flutter_speed_dial/flutter_speed_dial.dart';
 import 'package:mzansi_innovation_hub/main.dart';
+import 'package:mzansi_innovation_hub/mih_apis/mih_alert_services.dart';
 import 'package:mzansi_innovation_hub/mih_apis/mih_mzansi_calendar_apis.dart';
+import 'package:mzansi_innovation_hub/mih_apis/mih_validation_services.dart';
 import 'package:mzansi_innovation_hub/mih_components/mih_inputs_and_buttons/mih_date_input.dart';
-import 'package:mzansi_innovation_hub/mih_components/mih_inputs_and_buttons/mih_multiline_text_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_inputs_and_buttons/mih_time_input.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_package_window.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_delete_message.dart';
 import 'package:mzansi_innovation_hub/mih_components/mih_pop_up_messages/mih_error_message.dart';
 import 'package:mzansi_innovation_hub/mih_env/env.dart';
@@ -57,6 +59,7 @@ class _BuildAppointmentListState extends State<BuildAppointmentList> {
   TextEditingController fnameController = TextEditingController();
   TextEditingController lnameController = TextEditingController();
   TextEditingController daysExtensionController = TextEditingController();
+  final _formKey = GlobalKey<FormState>();
   int counter = 0;
   late double width;
   late double height;
@@ -69,7 +72,7 @@ class _BuildAppointmentListState extends State<BuildAppointmentList> {
     }
   }
 
-  Widget displayAppointment(int index) {
+  Widget displayAppointment(int index, double bodyWidth) {
     String heading =
         "${widget.appointmentList[index].date_time.split('T')[1].substring(0, 5)} - ${widget.appointmentList[index].title.toUpperCase()}";
     String description = widget.appointmentList[index].description;
@@ -100,9 +103,7 @@ class _BuildAppointmentListState extends State<BuildAppointmentList> {
           MzanziInnovationHub.of(context)!.theme.messageTextColor();
     }
 
-    return Padding(
+    return Container(
-      padding: const EdgeInsets.all(5.0),
-      child: Container(
       decoration: BoxDecoration(
           border: Border.all(
             width: 3.0,
@@ -131,23 +132,21 @@ class _BuildAppointmentListState extends State<BuildAppointmentList> {
                 widget.appointmentList[index].description;
             widget.dateController.text =
                 widget.appointmentList[index].date_time.split('T')[0];
-              widget.timeController.text = widget
+            widget.timeController.text = widget.appointmentList[index].date_time
-                  .appointmentList[index].date_time
                 .split('T')[1]
                 .substring(0, 5);
           });
           if (widget.inWaitingRoom == false) {
-              appointmentDetailsWindow(index);
+            appointmentDetailsWindow(index, bodyWidth);
           } else {
-              waitingRiinAppointmentDetailsWindow(index);
+            waitingRiinAppointmentDetailsWindow(index, bodyWidth);
           }
         },
       ),
-      ),
     );
   }
 
-  void appointmentDetailsWindow(int index) {
+  void appointmentDetailsWindow(int index, double bodyWidth) {
     showDialog(
       context: context,
       barrierDismissible: false,
@@ -171,7 +170,7 @@ class _BuildAppointmentListState extends State<BuildAppointmentList> {
               backgroundColor:
                   MzanziInnovationHub.of(context)!.theme.successColor(),
               onTap: () {
-                appointmentUpdateWindow(index);
+                appointmentUpdateWindow(index, bodyWidth);
               },
             ),
             SpeedDialChild(
@@ -200,56 +199,72 @@ class _BuildAppointmentListState extends State<BuildAppointmentList> {
             widget.titleController.clear();
             widget.descriptionIDController.clear();
           },
-          windowBody: Column(
+          windowBody: Padding(
+            padding:
+                MzanziInnovationHub.of(context)!.theme.screenType == "desktop"
+                    ? EdgeInsets.symmetric(horizontal: width * 0.05)
+                    : const EdgeInsets.symmetric(horizontal: 0),
+            child: Column(
               children: [
                 const SizedBox(height: 10),
-              SizedBox(
+                MihTextFormField(
-                // width: 500,
+                  fillColor:
-                child: MIHTextField(
+                      MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                  inputColor:
+                      MzanziInnovationHub.of(context)!.theme.primaryColor(),
                   controller: widget.titleController,
-                  hintText: "Title",
+                  multiLineInput: false,
-                  editable: false,
+                  requiredText: true,
-                  required: false,
+                  readOnly: true,
-                ),
+                  hintText: "Appointment Title",
                 ),
                 const SizedBox(height: 10),
-              SizedBox(
+                MihTextFormField(
-                  // width: 500,
+                  fillColor:
-                  child: MIHTextField(
+                      MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                  inputColor:
+                      MzanziInnovationHub.of(context)!.theme.primaryColor(),
                   controller: widget.dateController,
+                  multiLineInput: false,
+                  requiredText: true,
+                  readOnly: true,
                   hintText: "Date",
-                editable: false,
-                required: false,
-              )),
-              const SizedBox(height: 10),
-              SizedBox(
-                  // width: 500,
-                  child: MIHTextField(
-                controller: widget.timeController,
-                hintText: "Time",
-                editable: false,
-                required: false,
-              )),
-              const SizedBox(height: 10),
-              SizedBox(
-                // width: 500,
-                height: 250,
-                child: MIHMLTextField(
-                  controller: widget.descriptionIDController,
-                  hintText: "Description",
-                  editable: false,
-                  required: false,
                 ),
+                const SizedBox(height: 10),
+                MihTextFormField(
+                  fillColor:
+                      MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                  inputColor:
+                      MzanziInnovationHub.of(context)!.theme.primaryColor(),
+                  controller: widget.timeController,
+                  multiLineInput: false,
+                  requiredText: true,
+                  readOnly: true,
+                  hintText: "Time",
+                ),
+                const SizedBox(height: 10),
+                MihTextFormField(
+                  fillColor:
+                      MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                  inputColor:
+                      MzanziInnovationHub.of(context)!.theme.primaryColor(),
+                  controller: widget.descriptionIDController,
+                  multiLineInput: true,
+                  height: 250,
+                  requiredText: true,
+                  readOnly: true,
+                  hintText: "Appointment Description",
                 ),
                 const SizedBox(height: 10),
               ],
             ),
+          ),
         );
       },
     );
   }
 
-  void waitingRiinAppointmentDetailsWindow(int index) {
+  void waitingRiinAppointmentDetailsWindow(int index, double bodyWidth) {
     showDialog(
       context: context,
       barrierDismissible: false,
@@ -273,7 +288,7 @@ class _BuildAppointmentListState extends State<BuildAppointmentList> {
               backgroundColor:
                   MzanziInnovationHub.of(context)!.theme.successColor(),
               onTap: () {
-                appointmentUpdateWindow(index);
+                appointmentUpdateWindow(index, bodyWidth);
               },
             ),
             SpeedDialChild(
@@ -302,65 +317,82 @@ class _BuildAppointmentListState extends State<BuildAppointmentList> {
             widget.titleController.clear();
             widget.descriptionIDController.clear();
           },
-          windowBody: Column(
+          windowBody: Padding(
+            padding:
+                MzanziInnovationHub.of(context)!.theme.screenType == "desktop"
+                    ? EdgeInsets.symmetric(horizontal: width * 0.05)
+                    : const EdgeInsets.symmetric(horizontal: 0),
+            child: Column(
               children: [
-              SizedBox(
+                const SizedBox(height: 10),
-                // width: 500,
+                MihTextFormField(
-                child: MIHTextField(
+                  fillColor:
+                      MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                  inputColor:
+                      MzanziInnovationHub.of(context)!.theme.primaryColor(),
                   controller: widget.titleController,
-                  hintText: "Title",
+                  multiLineInput: false,
-                  editable: false,
+                  requiredText: true,
-                  required: false,
+                  readOnly: true,
-                ),
+                  hintText: "Appointment Title",
                 ),
                 const SizedBox(height: 10),
-              SizedBox(
+                MihTextFormField(
-                // width: 500,
+                  fillColor:
-                child: MIHTextField(
+                      MzanziInnovationHub.of(context)!.theme.secondaryColor(),
-                  controller: widget.titleController,
+                  inputColor:
-                  hintText: "Patient ID Number",
+                      MzanziInnovationHub.of(context)!.theme.primaryColor(),
-                  editable: false,
-                  required: false,
-                ),
-              ),
-              const SizedBox(height: 10),
-              SizedBox(
-                  // width: 500,
-                  child: MIHTextField(
                   controller: widget.dateController,
+                  multiLineInput: false,
+                  requiredText: true,
+                  readOnly: true,
                   hintText: "Date",
-                editable: false,
+                ),
-                required: false,
-              )),
                 const SizedBox(height: 10),
-              SizedBox(
+                MihTextFormField(
-                  // width: 500,
+                  fillColor:
-                  child: MIHTextField(
+                      MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                  inputColor:
+                      MzanziInnovationHub.of(context)!.theme.primaryColor(),
                   controller: widget.timeController,
+                  multiLineInput: false,
+                  requiredText: true,
+                  readOnly: true,
                   hintText: "Time",
-                editable: false,
+                ),
-                required: false,
-              )),
                 const SizedBox(height: 10),
-              SizedBox(
+                MihTextFormField(
-                // width: 500,
+                  fillColor:
-                height: 250,
+                      MzanziInnovationHub.of(context)!.theme.secondaryColor(),
-                child: MIHMLTextField(
+                  inputColor:
+                      MzanziInnovationHub.of(context)!.theme.primaryColor(),
                   controller: widget.descriptionIDController,
-                  hintText: "Description",
+                  multiLineInput: true,
-                  editable: false,
+                  height: 250,
-                  required: false,
+                  requiredText: true,
+                  readOnly: true,
+                  hintText: "Appointment Description",
                 ),
-              ),
+                const SizedBox(height: 10),
-              const SizedBox(height: 20),
+                // SizedBox(
+                //   // width: 500,
+                //   child: MIHTextField(
+                //     controller: widget.titleController,
+                //     hintText: "Patient ID Number",
+                //     editable: false,
+                //     required: false,
+                //   ),
+                // ),
+                // const SizedBox(height: 10),
               ],
             ),
+          ),
         );
       },
     );
   }
 
-  void appointmentUpdateWindow(int index) {
+  void appointmentUpdateWindow(int index, double bodyWidth) {
     showDialog(
       context: context,
       barrierDismissible: false,
@@ -382,16 +414,29 @@ class _BuildAppointmentListState extends State<BuildAppointmentList> {
             });
             Navigator.of(context).pop();
           },
-          windowBody: Column(
+          windowBody: Padding(
+            padding:
+                MzanziInnovationHub.of(context)!.theme.screenType == "desktop"
+                    ? EdgeInsets.symmetric(horizontal: width * 0.05)
+                    : const EdgeInsets.symmetric(horizontal: 0),
+            child: Column(
               children: [
-              SizedBox(
+                MihForm(
-                // width: 500,
+                  formKey: _formKey,
-                child: MIHTextField(
+                  formFields: [
+                    MihTextFormField(
+                      fillColor: MzanziInnovationHub.of(context)!
+                          .theme
+                          .secondaryColor(),
+                      inputColor:
+                          MzanziInnovationHub.of(context)!.theme.primaryColor(),
                       controller: widget.titleController,
-                  hintText: "Title",
+                      multiLineInput: false,
-                  editable: true,
+                      requiredText: true,
-                  required: true,
+                      hintText: "Appointment Title",
-                ),
+                      validator: (value) {
+                        return MihValidationServices().isEmpty(value);
+                      },
                     ),
                     const SizedBox(height: 10),
                     SizedBox(
@@ -412,28 +457,40 @@ class _BuildAppointmentListState extends State<BuildAppointmentList> {
                       ),
                     ),
                     const SizedBox(height: 10),
-              SizedBox(
+                    MihTextFormField(
-                // width: 500,
+                      fillColor: MzanziInnovationHub.of(context)!
-                height: 250,
+                          .theme
-                child: MIHMLTextField(
+                          .secondaryColor(),
+                      inputColor:
+                          MzanziInnovationHub.of(context)!.theme.primaryColor(),
                       controller: widget.descriptionIDController,
-                  hintText: "Description",
+                      multiLineInput: true,
-                  editable: true,
+                      height: 250,
-                  required: true,
+                      requiredText: true,
-                ),
+                      hintText: "Appointment Description",
+                      validator: (value) {
+                        return MihValidationServices().isEmpty(value);
+                      },
                     ),
                     const SizedBox(height: 20),
-              Wrap(
+                    Center(
+                      child: Wrap(
                         alignment: WrapAlignment.center,
                         runSpacing: 10,
                         spacing: 10,
                         children: [
                           MihButton(
                             onPressed: () {
+                              if (_formKey.currentState!.validate()) {
                                 updateAppointmentCall(index);
+                              } else {
+                                MihAlertServices()
+                                    .formNotFilledCompletely(context);
+                              }
                             },
-                    buttonColor:
+                            buttonColor: MzanziInnovationHub.of(context)!
-                        MzanziInnovationHub.of(context)!.theme.successColor(),
+                                .theme
+                                .successColor(),
                             width: 300,
                             child: Text(
                               "Update",
@@ -447,18 +504,20 @@ class _BuildAppointmentListState extends State<BuildAppointmentList> {
                             ),
                           ),
                         ],
-              )
+                      ),
+                    ),
                   ],
                 ),
+              ],
+            ),
+          ),
         );
       },
     );
   }
 
   bool isAppointmentInputValid() {
-    if (widget.titleController.text.isEmpty ||
+    if (widget.dateController.text.isEmpty ||
-        widget.descriptionIDController.text.isEmpty ||
-        widget.dateController.text.isEmpty ||
         widget.timeController.text.isEmpty) {
       return false;
     } else {
@@ -585,7 +644,7 @@ class _BuildAppointmentListState extends State<BuildAppointmentList> {
         shrinkWrap: true,
         itemCount: widget.appointmentList.length,
         itemBuilder: (context, index) {
-          return displayAppointment(index);
+          return displayAppointment(index, width);
         },
       ),
     );

Frontend/lib/mih_packages/calendar/package_tools/appointments.dart

@@ -1,14 +1,16 @@
 import 'package:flutter_speed_dial/flutter_speed_dial.dart';
+import 'package:mzansi_innovation_hub/mih_apis/mih_alert_services.dart';
 import 'package:mzansi_innovation_hub/mih_apis/mih_mzansi_calendar_apis.dart';
+import 'package:mzansi_innovation_hub/mih_apis/mih_validation_services.dart';
 import 'package:mzansi_innovation_hub/mih_components/mih_inputs_and_buttons/mih_date_input.dart';
-import 'package:mzansi_innovation_hub/mih_components/mih_inputs_and_buttons/mih_multiline_text_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_inputs_and_buttons/mih_time_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_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_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_package_window.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_objects/appointment.dart';
 import 'package:mzansi_innovation_hub/mih_objects/business.dart';
@@ -59,6 +61,8 @@ class _PatientAccessRequestState extends State<Appointments> {
   late Future<List<Appointment>> businessAppointmentResults;
   late Future<List<Appointment>> appointmentResults;
 
+  final _formKey = GlobalKey<FormState>();
+
   Widget displayAppointmentList(List<Appointment> appointmentList) {
     if (appointmentList.isNotEmpty) {
       return Expanded(
@@ -96,7 +100,7 @@ class _PatientAccessRequestState extends State<Appointments> {
     );
   }
 
-  void addAppointmentWindow() {
+  void addAppointmentWindow(double width) {
     showDialog(
       context: context,
       barrierDismissible: false,
@@ -111,16 +115,29 @@ class _PatientAccessRequestState extends State<Appointments> {
             _appointmentTitleController.clear();
             _appointmentDescriptionIDController.clear();
           },
-          windowBody: Column(
+          windowBody: Padding(
+            padding:
+                MzanziInnovationHub.of(context)!.theme.screenType == "desktop"
+                    ? EdgeInsets.symmetric(horizontal: width * 0.05)
+                    : const EdgeInsets.symmetric(horizontal: 0),
+            child: Column(
               children: [
-              SizedBox(
+                MihForm(
-                // width: 500,
+                  formKey: _formKey,
-                child: MIHTextField(
+                  formFields: [
+                    MihTextFormField(
+                      fillColor: MzanziInnovationHub.of(context)!
+                          .theme
+                          .secondaryColor(),
+                      inputColor:
+                          MzanziInnovationHub.of(context)!.theme.primaryColor(),
                       controller: _appointmentTitleController,
-                  hintText: "Title",
+                      multiLineInput: false,
-                  editable: true,
+                      requiredText: true,
-                  required: true,
+                      hintText: "Appointment Title",
-                ),
+                      validator: (value) {
+                        return MihValidationServices().isEmpty(value);
+                      },
                     ),
                     const SizedBox(height: 10),
                     SizedBox(
@@ -141,36 +158,52 @@ class _PatientAccessRequestState extends State<Appointments> {
                       ),
                     ),
                     const SizedBox(height: 10),
-              SizedBox(
+                    MihTextFormField(
-                // width: 500,
+                      fillColor: MzanziInnovationHub.of(context)!
-                height: 250,
+                          .theme
-                child: MIHMLTextField(
+                          .secondaryColor(),
+                      inputColor:
+                          MzanziInnovationHub.of(context)!.theme.primaryColor(),
                       controller: _appointmentDescriptionIDController,
-                  hintText: "Description",
+                      multiLineInput: true,
-                  editable: true,
+                      height: 250,
-                  required: true,
+                      requiredText: true,
-                ),
+                      hintText: "Appointment Description",
+                      validator: (value) {
+                        return MihValidationServices().isEmpty(value);
+                      },
                     ),
                     const SizedBox(height: 20),
-              MihButton(
+                    Center(
+                      child: MihButton(
                         onPressed: () {
+                          if (_formKey.currentState!.validate()) {
                             addAppointmentCall();
+                          } else {
+                            MihAlertServices().formNotFilledCompletely(context);
+                          }
                         },
-                buttonColor:
+                        buttonColor: MzanziInnovationHub.of(context)!
-                    MzanziInnovationHub.of(context)!.theme.successColor(),
+                            .theme
+                            .successColor(),
                         width: 300,
                         child: Text(
                           "Add",
                           style: TextStyle(
-                    color:
+                            color: MzanziInnovationHub.of(context)!
-                        MzanziInnovationHub.of(context)!.theme.primaryColor(),
+                                .theme
+                                .primaryColor(),
                             fontSize: 20,
                             fontWeight: FontWeight.bold,
                           ),
                         ),
                       ),
+                    ),
                   ],
                 ),
+              ],
+            ),
+          ),
         );
       },
     );
@@ -247,7 +280,7 @@ class _PatientAccessRequestState extends State<Appointments> {
     });
   }
 
-  Widget getBody() {
+  Widget getBody(double width) {
     return Stack(
       children: [
         MihSingleChildScroll(
@@ -320,7 +353,7 @@ class _PatientAccessRequestState extends State<Appointments> {
                 backgroundColor:
                     MzanziInnovationHub.of(context)!.theme.successColor(),
                 onTap: () {
-                  addAppointmentWindow();
+                  addAppointmentWindow(width);
                 },
               )
             ],
@@ -362,9 +395,10 @@ class _PatientAccessRequestState extends State<Appointments> {
 
   @override
   Widget build(BuildContext context) {
+    double screenWidth = MediaQuery.of(context).size.width;
     return MihPackageToolBody(
       borderOn: false,
-      bodyItem: getBody(),
+      bodyItem: getBody(screenWidth),
     );
   }
 }

Frontend/lib/mih_packages/mzansi_ai/package_tools/ai_chat.dart

@@ -4,10 +4,10 @@ import 'dart:convert';
 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_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_package_components/mih_package_tool_body.dart';
 import 'package:mzansi_innovation_hub/mih_components/mih_package_components/mih_package_window.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_components/mih_pop_up_messages/mih_loading_circle.dart';
 import 'package:mzansi_innovation_hub/mih_env/env.dart';
 import 'package:mzansi_innovation_hub/mih_objects/app_user.dart';
@@ -436,6 +436,7 @@ class _AiChatState extends State<AiChat> {
                       const SizedBox(height: 15),
                       Row(
                         mainAxisAlignment: MainAxisAlignment.start,
+                        crossAxisAlignment: CrossAxisAlignment.center,
                         children: [
                           IconButton.filled(
                             onPressed: () {
@@ -450,14 +451,19 @@ class _AiChatState extends State<AiChat> {
                             ),
                           ),
                           const SizedBox(width: 10),
-                          SizedBox(
+                          MihTextFormField(
                             width: 200,
-                            child: MIHTextField(
+                            fillColor: MzanziInnovationHub.of(context)!
+                                .theme
+                                .secondaryColor(),
+                            inputColor: MzanziInnovationHub.of(context)!
+                                .theme
+                                .primaryColor(),
                             controller: _fontSizeController,
-                              hintText: "Chat Font Size",
+                            multiLineInput: false,
-                              editable: false,
+                            requiredText: true,
-                              required: true,
+                            readOnly: true,
-                            ),
+                            hintText: "Time",
                           ),
                           const SizedBox(width: 10),
                           IconButton.filled(

Frontend/lib/mih_packages/mzansi_profile/business_profile/builders/build_employee_list.dart

@@ -2,10 +2,12 @@ import 'dart:convert';
 
 import 'package:flutter_speed_dial/flutter_speed_dial.dart';
 import 'package:mzansi_innovation_hub/main.dart';
+import 'package:mzansi_innovation_hub/mih_apis/mih_alert_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_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_package_window.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_delete_message.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_loading_circle.dart';
@@ -36,6 +38,7 @@ class _BuildEmployeeListState extends State<BuildEmployeeList> {
   TextEditingController fnameController = TextEditingController();
   TextEditingController lnameController = TextEditingController();
 
+  final _formKey = GlobalKey<FormState>();
   final baseAPI = AppEnviroment.baseApiUrl;
 
   Future<void> updateEmployeeAPICall(int index) async {
@@ -140,7 +143,7 @@ class _BuildEmployeeListState extends State<BuildEmployeeList> {
     }
   }
 
-  void updateEmployeePopUp(int index) {
+  void updateEmployeePopUp(int index, double width) {
     setState(() {
       accessController.text = widget.employees[index].access;
       typeController.text = widget.employees[index].title;
@@ -176,23 +179,40 @@ class _BuildEmployeeListState extends State<BuildEmployeeList> {
         onWindowTapClose: () {
           Navigator.pop(context);
         },
-        windowBody: Column(
+        windowBody: Padding(
+          padding:
+              MzanziInnovationHub.of(context)!.theme.screenType == "desktop"
+                  ? EdgeInsets.symmetric(horizontal: width * 0.05)
+                  : const EdgeInsets.symmetric(horizontal: 0),
+          child: Column(
             children: [
-            const SizedBox(height: 10.0),
+              MihForm(
-            MIHTextField(
+                formKey: _formKey,
+                formFields: [
+                  MihTextFormField(
+                    fillColor:
+                        MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                    inputColor:
+                        MzanziInnovationHub.of(context)!.theme.primaryColor(),
                     controller: fnameController,
+                    multiLineInput: false,
+                    requiredText: true,
+                    readOnly: true,
                     hintText: "First Name",
-              editable: false,
-              required: true,
                   ),
                   const SizedBox(height: 10.0),
-            MIHTextField(
+                  MihTextFormField(
+                    fillColor:
+                        MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                    inputColor:
+                        MzanziInnovationHub.of(context)!.theme.primaryColor(),
                     controller: lnameController,
+                    multiLineInput: false,
+                    requiredText: true,
+                    readOnly: true,
                     hintText: "Surname",
-              editable: false,
-              required: true,
                   ),
-            const SizedBox(height: 10.0),
+                  const SizedBox(height: 15.0),
                   MIHDropdownField(
                     controller: typeController,
                     hintText: "Title",
@@ -210,34 +230,47 @@ class _BuildEmployeeListState extends State<BuildEmployeeList> {
                     editable: true,
                     enableSearch: false,
                   ),
-            const SizedBox(height: 15.0),
+                  const SizedBox(height: 20.0),
-            MihButton(
+                  Center(
+                    child: MihButton(
                       onPressed: () {
+                        if (_formKey.currentState!.validate()) {
                           if (isRequiredFieldsCaptured()) {
                             updateEmployeeAPICall(index);
                           } else {
                             showDialog(
                               context: context,
                               builder: (context) {
-                      return const MIHErrorMessage(errorType: "Input Error");
+                                return const MIHErrorMessage(
+                                    errorType: "Input Error");
                               },
                             );
                           }
+                        } else {
+                          MihAlertServices().formNotFilledCompletely(context);
+                        }
                       },
-              buttonColor:
+                      buttonColor: MzanziInnovationHub.of(context)!
-                  MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                          .theme
+                          .secondaryColor(),
                       width: 300,
                       child: Text(
                         "Update",
                         style: TextStyle(
-                  color: MzanziInnovationHub.of(context)!.theme.primaryColor(),
+                          color: MzanziInnovationHub.of(context)!
+                              .theme
+                              .primaryColor(),
                           fontSize: 20,
                           fontWeight: FontWeight.bold,
                         ),
                       ),
                     ),
+                  ),
                 ],
               ),
+            ],
+          ),
+        ),
       ),
     );
   }
@@ -264,6 +297,7 @@ class _BuildEmployeeListState extends State<BuildEmployeeList> {
 
   @override
   Widget build(BuildContext context) {
+    double screenWidth = MediaQuery.of(context).size.width;
     return ListView.separated(
       shrinkWrap: true,
       physics: const NeverScrollableScrollPhysics(),
@@ -291,7 +325,7 @@ class _BuildEmployeeListState extends State<BuildEmployeeList> {
             ),
           ),
           onTap: () {
-            updateEmployeePopUp(index);
+            updateEmployeePopUp(index, screenWidth);
           },
         );
       },

Frontend/lib/mih_packages/mzansi_profile/business_profile/builders/build_user_list.dart

@@ -1,10 +1,12 @@
 import 'dart:convert';
 
 import 'package:mzansi_innovation_hub/main.dart';
+import 'package:mzansi_innovation_hub/mih_apis/mih_alert_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_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_package_window.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_loading_circle.dart';
 import 'package:mzansi_innovation_hub/mih_components/mih_pop_up_messages/mih_success_message.dart';
@@ -31,9 +33,10 @@ class BuildUserList extends StatefulWidget {
 class _BuildUserListState extends State<BuildUserList> {
   TextEditingController accessController = TextEditingController();
   TextEditingController typeController = TextEditingController();
-  TextEditingController fnameController = TextEditingController();
+  TextEditingController usernameController = TextEditingController();
-  TextEditingController lnameController = TextEditingController();
+  TextEditingController emailController = TextEditingController();
 
+  final _formKey = GlobalKey<FormState>();
   final baseAPI = AppEnviroment.baseApiUrl;
 
   Future<void> createBusinessUserAPICall(int index) async {
@@ -112,14 +115,14 @@ class _BuildUserListState extends State<BuildUserList> {
     return "$firstLetter********@$end";
   }
 
-  void addEmployeePopUp(int index) {
+  void addEmployeePopUp(int index, double width) {
     setState(() {
       //accessController.text = widget.users[index].access;
       //typeController.text = widget.users[index].title;
       // var fnameInitial = widget.users[index].fname[0];
       // var lnameInitial = widget.users[index].lname[0];
-      fnameController.text = widget.users[index].username;
+      usernameController.text = widget.users[index].username;
-      lnameController.text = hideEmail(widget.users[index].email);
+      emailController.text = hideEmail(widget.users[index].email);
     });
     showDialog(
         context: context,
@@ -127,23 +130,44 @@ class _BuildUserListState extends State<BuildUserList> {
         builder: (context) => MihPackageWindow(
             fullscreen: false,
             windowTitle: "Add Employee",
-            windowBody: Column(
+            windowBody: Padding(
+              padding:
+                  MzanziInnovationHub.of(context)!.theme.screenType == "desktop"
+                      ? EdgeInsets.symmetric(horizontal: width * 0.05)
+                      : const EdgeInsets.symmetric(horizontal: 0),
+              child: Column(
                 children: [
-                const SizedBox(height: 10.0),
+                  MihForm(
-                MIHTextField(
+                    formKey: _formKey,
-                  controller: fnameController,
+                    formFields: [
-                  hintText: "Username Name",
+                      MihTextFormField(
-                  editable: false,
+                        fillColor: MzanziInnovationHub.of(context)!
-                  required: true,
+                            .theme
+                            .secondaryColor(),
+                        inputColor: MzanziInnovationHub.of(context)!
+                            .theme
+                            .primaryColor(),
+                        controller: usernameController,
+                        multiLineInput: false,
+                        requiredText: true,
+                        readOnly: true,
+                        hintText: "Username",
                       ),
                       const SizedBox(height: 10.0),
-                MIHTextField(
+                      MihTextFormField(
-                  controller: lnameController,
+                        fillColor: MzanziInnovationHub.of(context)!
+                            .theme
+                            .secondaryColor(),
+                        inputColor: MzanziInnovationHub.of(context)!
+                            .theme
+                            .primaryColor(),
+                        controller: emailController,
+                        multiLineInput: false,
+                        requiredText: true,
+                        readOnly: true,
                         hintText: "Email",
-                  editable: false,
-                  required: true,
                       ),
-                const SizedBox(height: 10.0),
+                      const SizedBox(height: 15.0),
                       MIHDropdownField(
                         controller: typeController,
                         hintText: "Title",
@@ -162,8 +186,10 @@ class _BuildUserListState extends State<BuildUserList> {
                         enableSearch: false,
                       ),
                       const SizedBox(height: 15.0),
-                MihButton(
+                      Center(
+                        child: MihButton(
                           onPressed: () {
+                            if (_formKey.currentState!.validate()) {
                               if (isRequiredFieldsCaptured()) {
                                 createBusinessUserAPICall(index);
                               } else {
@@ -175,23 +201,32 @@ class _BuildUserListState extends State<BuildUserList> {
                                   },
                                 );
                               }
+                            } else {
+                              MihAlertServices()
+                                  .formNotFilledCompletely(context);
+                            }
                           },
-                  buttonColor:
+                          buttonColor: MzanziInnovationHub.of(context)!
-                      MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                              .theme
+                              .secondaryColor(),
                           width: 300,
                           child: Text(
                             "Add",
                             style: TextStyle(
-                      color:
+                              color: MzanziInnovationHub.of(context)!
-                          MzanziInnovationHub.of(context)!.theme.primaryColor(),
+                                  .theme
+                                  .primaryColor(),
                               fontSize: 20,
                               fontWeight: FontWeight.bold,
                             ),
                           ),
                         ),
-                const SizedBox(height: 10.0),
+                      ),
                     ],
                   ),
+                ],
+              ),
+            ),
             onWindowTapClose: () {
               Navigator.pop(context);
             }));
@@ -201,13 +236,14 @@ class _BuildUserListState extends State<BuildUserList> {
   void dispose() {
     accessController.dispose();
     typeController.dispose();
-    fnameController.dispose();
+    usernameController.dispose();
-    lnameController.dispose();
+    emailController.dispose();
     super.dispose();
   }
 
   @override
   Widget build(BuildContext context) {
+    double screenWidth = MediaQuery.of(context).size.width;
     return ListView.separated(
       shrinkWrap: true,
       physics: const NeverScrollableScrollPhysics(),
@@ -232,7 +268,7 @@ class _BuildUserListState extends State<BuildUserList> {
             ),
           ),
           onTap: () {
-            addEmployeePopUp(index);
+            addEmployeePopUp(index, screenWidth);
           },
         );
       },

Frontend/lib/mih_packages/mzansi_profile/business_profile/package_tools/mih_business_details.dart

@@ -1,15 +1,19 @@
 import 'package:file_picker/file_picker.dart';
 import 'package:flutter/material.dart';
 import 'package:mzansi_innovation_hub/main.dart';
+import 'package:mzansi_innovation_hub/mih_apis/mih_alert_services.dart';
 import 'package:mzansi_innovation_hub/mih_apis/mih_business_details_apis.dart';
 import 'package:mzansi_innovation_hub/mih_apis/mih_file_api.dart';
 import 'package:mzansi_innovation_hub/mih_apis/mih_location_api.dart';
-import 'package:mzansi_innovation_hub/mih_components/mih_inputs_and_buttons/mih_text_input.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_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_package_tool_body.dart';
 import 'package:mzansi_innovation_hub/mih_components/mih_package_components/mih_package_alert.dart';
 import 'package:mzansi_innovation_hub/mih_components/mih_package_components/mih_circle_avatar.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';
@@ -39,17 +43,11 @@ class _MihBusinessDetailsState extends State<MihBusinessDetails> {
   final contactController = TextEditingController();
   final emailController = TextEditingController();
   final locationController = TextEditingController();
+  final _formKey = GlobalKey<FormState>();
   late String env;
 
   Future<void> submitForm() async {
-    if (!isEmailValid()) {
+    if (isFormFilled()) {
-      showDialog(
-        context: context,
-        builder: (context) {
-          return const MIHErrorMessage(errorType: "Invalid Email");
-        },
-      );
-    } else if (isFormFilled()) {
       int statusCode = 0;
       statusCode = await MihBusinessDetailsApi().updateBusinessDetails(
         widget.arguments.business!.business_id,
@@ -180,14 +178,7 @@ class _MihBusinessDetailsState extends State<MihBusinessDetails> {
   }
 
   bool isFormFilled() {
-    if (regController.text.isEmpty ||
+    if (typeController.text.isEmpty) {
-        nameController.text.isEmpty ||
-        typeController.text.isEmpty ||
-        practiceNoController.text.isEmpty ||
-        vatNoController.text.isEmpty ||
-        contactController.text.isEmpty ||
-        emailController.text.isEmpty ||
-        locationController.text.isEmpty) {
       return false;
     } else {
       return true;
@@ -233,24 +224,34 @@ class _MihBusinessDetailsState extends State<MihBusinessDetails> {
 
   @override
   Widget build(BuildContext context) {
+    double screenWidth = MediaQuery.of(context).size.width;
     return MihPackageToolBody(
       borderOn: false,
       innerHorizontalPadding: 10,
-      bodyItem: getBody(context),
+      bodyItem: getBody(screenWidth, context),
     );
   }
 
-  Widget getBody(BuildContext context) {
+  Widget getBody(double width, BuildContext context) {
     return MihSingleChildScroll(
+        child: Padding(
+      padding: MzanziInnovationHub.of(context)!.theme.screenType == "desktop"
+          ? EdgeInsets.symmetric(horizontal: width * 0.2)
+          : EdgeInsets.symmetric(horizontal: width * 0.075),
       child: Column(
         children: [
-        MihCircleAvatar(
+          MihForm(
+            formKey: _formKey,
+            formFields: [
+              Center(
+                child: MihCircleAvatar(
                   imageFile: widget.logoImage,
                   width: 150,
                   editable: true,
                   fileNameController: fileNameController,
                   userSelectedfile: imageFile,
-          frameColor: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                  frameColor:
+                      MzanziInnovationHub.of(context)!.theme.secondaryColor(),
                   backgroundColor:
                       MzanziInnovationHub.of(context)!.theme.primaryColor(),
                   onChange: (selectedfile) {
@@ -259,73 +260,129 @@ class _MihBusinessDetailsState extends State<MihBusinessDetails> {
                     });
                   },
                 ),
+              ),
               Visibility(
                 visible: false,
-          child: MIHTextField(
+                child: MihTextFormField(
+                  fillColor:
+                      MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                  inputColor:
+                      MzanziInnovationHub.of(context)!.theme.primaryColor(),
                   controller: fileNameController,
+                  multiLineInput: false,
+                  requiredText: true,
+                  readOnly: true,
                   hintText: "Selected File Name",
-            editable: false,
-            required: false,
                 ),
               ),
               const SizedBox(height: 20),
-        MIHTextField(
+              MihTextFormField(
+                fillColor:
+                    MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                inputColor:
+                    MzanziInnovationHub.of(context)!.theme.primaryColor(),
                 controller: regController,
+                multiLineInput: false,
+                requiredText: true,
                 hintText: "Registration No.",
-          editable: true,
+                validator: (value) {
-          required: true,
+                  return MihValidationServices().isEmpty(value);
+                },
               ),
               const SizedBox(height: 10),
-        MIHTextField(
+              MihTextFormField(
+                fillColor:
+                    MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                inputColor:
+                    MzanziInnovationHub.of(context)!.theme.primaryColor(),
                 controller: nameController,
+                multiLineInput: false,
+                requiredText: true,
                 hintText: "Business Name",
-          editable: true,
+                validator: (value) {
-          required: true,
+                  return MihValidationServices().isEmpty(value);
+                },
               ),
-        const SizedBox(height: 10),
+              const SizedBox(height: 15),
-        MIHTextField(
+              MIHDropdownField(
                 controller: typeController,
                 hintText: "Business Type",
-          editable: true,
+                dropdownOptions: const ["Doctors Office", "Other"],
                 required: true,
+                editable: true,
+                enableSearch: false,
               ),
               const SizedBox(height: 10),
-        MIHTextField(
+              MihTextFormField(
+                fillColor:
+                    MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                inputColor:
+                    MzanziInnovationHub.of(context)!.theme.primaryColor(),
                 controller: practiceNoController,
+                multiLineInput: false,
+                requiredText: typeController.text == "Doctors Office",
                 hintText: "Practice Number",
-          editable: true,
+                validator: (validateValue) {
-          required: true,
+                  return MihValidationServices().isEmpty(validateValue);
+                },
               ),
               const SizedBox(height: 10),
-        MIHTextField(
+              MihTextFormField(
+                fillColor:
+                    MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                inputColor:
+                    MzanziInnovationHub.of(context)!.theme.primaryColor(),
                 controller: vatNoController,
+                multiLineInput: false,
+                requiredText: true,
                 hintText: "VAT Number",
-          editable: true,
+                validator: (value) {
-          required: true,
+                  return MihValidationServices().isEmpty(value);
+                },
               ),
               const SizedBox(height: 10),
-        MIHTextField(
+              MihTextFormField(
+                fillColor:
+                    MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                inputColor:
+                    MzanziInnovationHub.of(context)!.theme.primaryColor(),
                 controller: contactController,
+                multiLineInput: false,
+                requiredText: true,
                 hintText: "Contact Number",
-          editable: true,
+                validator: (value) {
-          required: true,
+                  return MihValidationServices().isEmpty(value);
+                },
               ),
               const SizedBox(height: 10),
-        MIHTextField(
+              MihTextFormField(
+                fillColor:
+                    MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                inputColor:
+                    MzanziInnovationHub.of(context)!.theme.primaryColor(),
                 controller: emailController,
-          hintText: "Email",
+                multiLineInput: false,
-          editable: true,
+                requiredText: true,
-          required: true,
+                hintText: "Business Email",
+                validator: (value) {
+                  return MihValidationServices().validateEmail(value);
+                },
               ),
               const SizedBox(height: 10),
               Row(
+                crossAxisAlignment: CrossAxisAlignment.end,
                 children: [
                   Flexible(
-              child: MIHTextField(
+                    child: MihTextFormField(
+                      fillColor: MzanziInnovationHub.of(context)!
+                          .theme
+                          .secondaryColor(),
+                      inputColor:
+                          MzanziInnovationHub.of(context)!.theme.primaryColor(),
                       controller: locationController,
-                hintText: "Location",
+                      multiLineInput: false,
-                editable: false,
+                      requiredText: true,
-                required: false,
+                      hintText: "GPS Location",
                     ),
                   ),
                   const SizedBox(width: 10.0),
@@ -346,7 +403,9 @@ class _MihBusinessDetailsState extends State<MihBusinessDetails> {
                     child: Text(
                       "Set",
                       style: TextStyle(
-                  color: MzanziInnovationHub.of(context)!.theme.primaryColor(),
+                        color: MzanziInnovationHub.of(context)!
+                            .theme
+                            .primaryColor(),
                         fontSize: 20,
                         fontWeight: FontWeight.bold,
                       ),
@@ -355,22 +414,34 @@ class _MihBusinessDetailsState extends State<MihBusinessDetails> {
                 ],
               ),
               const SizedBox(height: 15),
-        MihButton(
+              Center(
+                child: MihButton(
                   onPressed: () {
+                    if (_formKey.currentState!.validate()) {
                       submitForm();
+                    } else {
+                      MihAlertServices().formNotFilledCompletely(context);
+                    }
                   },
-          buttonColor: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                  buttonColor:
+                      MzanziInnovationHub.of(context)!.theme.secondaryColor(),
                   width: 300,
                   child: Text(
                     "Update",
                     style: TextStyle(
-              color: MzanziInnovationHub.of(context)!.theme.primaryColor(),
+                      color:
+                          MzanziInnovationHub.of(context)!.theme.primaryColor(),
                       fontSize: 20,
                       fontWeight: FontWeight.bold,
                     ),
                   ),
                 ),
+              ),
+              const SizedBox(height: 20),
             ],
+          ),
+        ],
+      ),
     ));
   }
 }

Frontend/lib/mih_packages/mzansi_profile/business_profile/package_tools/mih_my_business_user.dart

@@ -1,16 +1,19 @@
 import 'package:file_picker/file_picker.dart';
 import 'package:flutter/material.dart';
 import 'package:mzansi_innovation_hub/main.dart';
+import 'package:mzansi_innovation_hub/mih_apis/mih_alert_services.dart';
 import 'package:mzansi_innovation_hub/mih_apis/mih_file_api.dart';
 import 'package:mzansi_innovation_hub/mih_apis/mih_my_business_user_apis.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_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_package_tool_body.dart';
 import 'package:mzansi_innovation_hub/mih_components/mih_package_components/mih_package_alert.dart';
 import 'package:mzansi_innovation_hub/mih_components/mih_package_components/mih_circle_avatar.dart';
 import 'package:mzansi_innovation_hub/mih_components/mih_package_components/mih_image_display.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';
@@ -42,15 +45,11 @@ class _MihMyBusinessUserState extends State<MihMyBusinessUser> {
   final lnameController = TextEditingController();
   final accessController = TextEditingController();
   final signtureController = TextEditingController();
+  final _formKey = GlobalKey<FormState>();
   late String env;
 
   bool isFormFilled() {
-    if (signtureController.text.isEmpty ||
+    if (titleDropdownController.text.isEmpty) {
-        titleDropdownController.text.isEmpty ||
-        titleTextController.text.isEmpty ||
-        fnameController.text.isEmpty ||
-        lnameController.text.isEmpty ||
-        accessController.text.isEmpty) {
       return false;
     } else {
       return true;
@@ -205,35 +204,51 @@ class _MihMyBusinessUserState extends State<MihMyBusinessUser> {
 
   @override
   Widget build(BuildContext context) {
+    double screenWidth = MediaQuery.of(context).size.width;
     return MihPackageToolBody(
       borderOn: false,
       innerHorizontalPadding: 10,
-      bodyItem: getBody(),
+      bodyItem: getBody(screenWidth),
     );
   }
 
-  Widget getBody() {
+  Widget getBody(double width) {
     return MihSingleChildScroll(
+      child: Padding(
+        padding: MzanziInnovationHub.of(context)!.theme.screenType == "desktop"
+            ? EdgeInsets.symmetric(horizontal: width * 0.2)
+            : EdgeInsets.symmetric(horizontal: width * 0.075),
         child: Column(
           children: [
-          MihCircleAvatar(
+            MihForm(
+              formKey: _formKey,
+              formFields: [
+                Center(
+                  child: MihCircleAvatar(
                     imageFile: widget.userProPicImage,
                     width: 150,
                     editable: false,
                     fileNameController: fileNameController,
                     userSelectedfile: userPicFile,
-            frameColor: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                    frameColor:
+                        MzanziInnovationHub.of(context)!.theme.secondaryColor(),
                     backgroundColor:
                         MzanziInnovationHub.of(context)!.theme.primaryColor(),
                     onChange: (_) {},
                   ),
+                ),
                 Visibility(
                   visible: false,
-            child: MIHTextField(
+                  child: MihTextFormField(
+                    fillColor:
+                        MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                    inputColor:
+                        MzanziInnovationHub.of(context)!.theme.primaryColor(),
                     controller: fileNameController,
+                    multiLineInput: false,
+                    requiredText: true,
+                    readOnly: true,
                     hintText: "Selected File Name",
-              editable: false,
-              required: false,
                   ),
                 ),
                 const SizedBox(height: 20),
@@ -246,32 +261,63 @@ class _MihMyBusinessUserState extends State<MihMyBusinessUser> {
                   enableSearch: false,
                 ),
                 const SizedBox(height: 10),
-          MIHTextField(
+                MihTextFormField(
+                  fillColor:
+                      MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                  inputColor:
+                      MzanziInnovationHub.of(context)!.theme.primaryColor(),
                   controller: titleTextController,
+                  multiLineInput: false,
+                  requiredText: true,
                   hintText: "Other Title",
-            editable: true,
+                  validator: (value) {
-            required: true,
+                    return MihValidationServices().isEmpty(value);
+                  },
                 ),
                 const SizedBox(height: 10),
-          MIHTextField(
+                MihTextFormField(
+                  fillColor:
+                      MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                  inputColor:
+                      MzanziInnovationHub.of(context)!.theme.primaryColor(),
                   controller: fnameController,
-            hintText: "Name",
+                  multiLineInput: false,
-            editable: false,
+                  requiredText: true,
-            required: true,
+                  readOnly: true,
+                  hintText: "First Name",
+                  validator: (value) {
+                    return MihValidationServices().isEmpty(value);
+                  },
                 ),
                 const SizedBox(height: 10),
-          MIHTextField(
+                MihTextFormField(
+                  fillColor:
+                      MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                  inputColor:
+                      MzanziInnovationHub.of(context)!.theme.primaryColor(),
                   controller: lnameController,
+                  multiLineInput: false,
+                  requiredText: true,
+                  readOnly: true,
                   hintText: "Surname",
-            editable: false,
+                  validator: (value) {
-            required: true,
+                    return MihValidationServices().isEmpty(value);
+                  },
                 ),
                 const SizedBox(height: 10),
-          MIHTextField(
+                MihTextFormField(
+                  fillColor:
+                      MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                  inputColor:
+                      MzanziInnovationHub.of(context)!.theme.primaryColor(),
                   controller: accessController,
+                  multiLineInput: false,
+                  requiredText: true,
                   hintText: "Access Level",
-            editable: false,
+                  readOnly: true,
-            required: true,
+                  validator: (value) {
+                    return MihValidationServices().isEmpty(value);
+                  },
                 ),
                 const SizedBox(height: 10),
                 Container(
@@ -285,7 +331,8 @@ class _MihMyBusinessUserState extends State<MihMyBusinessUser> {
                     ),
                   ),
                 ),
-          MihImageDisplay(
+                Center(
+                  child: MihImageDisplay(
                     imageFile: widget.userSignatureImage,
                     width: 300,
                     height: 200,
@@ -298,20 +345,31 @@ class _MihMyBusinessUserState extends State<MihMyBusinessUser> {
                       });
                     },
                   ),
+                ),
                 const SizedBox(height: 10),
                 Visibility(
                   visible: false,
-            child: MIHTextField(
+                  child: MihTextFormField(
-              controller: signtureController,
+                    fillColor:
+                        MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                    inputColor:
+                        MzanziInnovationHub.of(context)!.theme.primaryColor(),
+                    controller: fileNameController,
+                    multiLineInput: false,
+                    requiredText: true,
+                    readOnly: true,
                     hintText: "Selected Signature File",
-              editable: false,
-              required: true,
                   ),
                 ),
                 const SizedBox(height: 15),
-          MihButton(
+                Center(
+                  child: MihButton(
                     onPressed: () {
+                      if (_formKey.currentState!.validate()) {
                         submitForm();
+                      } else {
+                        MihAlertServices().formNotFilledCompletely(context);
+                      }
                     },
                     buttonColor:
                         MzanziInnovationHub.of(context)!.theme.secondaryColor(),
@@ -319,14 +377,21 @@ class _MihMyBusinessUserState extends State<MihMyBusinessUser> {
                     child: Text(
                       "Update",
                       style: TextStyle(
-                color: MzanziInnovationHub.of(context)!.theme.primaryColor(),
+                        color: MzanziInnovationHub.of(context)!
+                            .theme
+                            .primaryColor(),
                         fontSize: 20,
                         fontWeight: FontWeight.bold,
                       ),
                     ),
                   ),
+                ),
+                const SizedBox(height: 20),
               ],
             ),
+          ],
+        ),
+      ),
     );
   }
 }

Frontend/lib/mih_packages/mzansi_profile/business_profile/profile_business_add.dart

@@ -2,17 +2,20 @@ import 'dart:convert';
 
 import 'package:http/http.dart';
 import 'package:mzansi_innovation_hub/main.dart';
+import 'package:mzansi_innovation_hub/mih_apis/mih_alert_services.dart';
 import 'package:mzansi_innovation_hub/mih_apis/mih_business_details_apis.dart';
 import 'package:mzansi_innovation_hub/mih_apis/mih_file_api.dart';
 import 'package:mzansi_innovation_hub/mih_apis/mih_location_api.dart';
 import 'package:mzansi_innovation_hub/mih_apis/mih_my_business_user_apis.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';
@@ -60,6 +63,7 @@ class _ProfileBusinessAddState extends State<ProfileBusinessAdd> {
   PlatformFile? selectedSignature;
 
   final ValueNotifier<String> busType = ValueNotifier("");
+  final _formKey = GlobalKey<FormState>();
   late String env;
 
   // Future<void> uploadSelectedFile(
@@ -217,17 +221,9 @@ class _ProfileBusinessAddState extends State<ProfileBusinessAdd> {
   }
 
   bool isFieldsFilled() {
-    if (nameController.text.isEmpty ||
+    if (typeController.text.isEmpty ||
-        typeController.text.isEmpty ||
-        regController.text.isEmpty ||
-        // logonameController.text.isEmpty ||
-        fnameController.text.isEmpty ||
-        lnameController.text.isEmpty ||
         titleController.text.isEmpty ||
-        // signtureController.text.isEmpty ||
+        accessController.text.isEmpty) {
-        accessController.text.isEmpty ||
-        contactController.text.isEmpty ||
-        emailController.text.isEmpty) {
       return false;
     } else {
       return true;
@@ -235,9 +231,7 @@ class _ProfileBusinessAddState extends State<ProfileBusinessAdd> {
   }
 
   void submitForm() {
-    if (!isEmailValid()) {
+    if (isFieldsFilled()) {
-      emailError();
-    } else if (isFieldsFilled()) {
       print("Inside submit method");
       createBusinessProfileAPICall();
     } else {
@@ -304,9 +298,9 @@ class _ProfileBusinessAddState extends State<ProfileBusinessAdd> {
     );
   }
 
-  MIHBody getBody() {
+  MIHBody getBody(double width) {
     return MIHBody(
-      borderOn: true,
+      borderOn: false,
       bodyItems: [
         KeyboardListener(
           focusNode: _focusNode,
@@ -314,13 +308,21 @@ class _ProfileBusinessAddState extends State<ProfileBusinessAdd> {
           onKeyEvent: (event) async {
             if (event is KeyDownEvent &&
                 event.logicalKey == LogicalKeyboardKey.enter) {
+              if (_formKey.currentState!.validate()) {
                 submitForm();
+              } else {
+                MihAlertServices().formNotFilledCompletely(context);
+              }
             }
           },
           child: SingleChildScrollView(
+            child: Padding(
+              padding:
+                  MzanziInnovationHub.of(context)!.theme.screenType == "desktop"
+                      ? EdgeInsets.symmetric(horizontal: width * 0.2)
+                      : EdgeInsets.symmetric(horizontal: width * 0.075),
               child: Column(
                 children: [
-                //const SizedBox(height: 15),
                   const Text(
                     "My Business Details",
                     style: TextStyle(
@@ -333,47 +335,41 @@ class _ProfileBusinessAddState extends State<ProfileBusinessAdd> {
                           .theme
                           .secondaryColor()),
                   const SizedBox(height: 10.0),
-                // MihCircleAvatar(
+                  MihForm(
-                //   imageFile: logoPreview,
+                    formKey: _formKey,
-                //   width: 150,
+                    formFields: [
-                //   editable: true,
+                      MihTextFormField(
-                //   fileNameController: logonameController,
+                        fillColor: MzanziInnovationHub.of(context)!
-                //   userSelectedfile: selectedLogo,
+                            .theme
-                //   frameColor:
+                            .secondaryColor(),
-                //       MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                        inputColor: MzanziInnovationHub.of(context)!
-                //   backgroundColor:
+                            .theme
-                //       MzanziInnovationHub.of(context)!.theme.primaryColor(),
+                            .primaryColor(),
-                //   onChange: (selectedfile) {
-                //     setState(() {
-                //       selectedLogo = selectedfile;
-                //     });
-                //   },
-                // ),
-                // const SizedBox(height: 10.0),
-                // Visibility(
-                //   visible: true,
-                //   child: MIHTextField(
-                //     controller: logonameController,
-                //     hintText: "Selected Logo File Name",
-                //     editable: false,
-                //     required: true,
-                //   ),
-                // ),
-                // const SizedBox(height: 10.0),
-                MIHTextField(
                         controller: regController,
+                        multiLineInput: false,
+                        requiredText: true,
                         hintText: "Registration No.",
-                  editable: true,
+                        validator: (value) {
-                  required: true,
+                          return MihValidationServices().isEmpty(value);
+                        },
                       ),
                       const SizedBox(height: 10.0),
-                MIHTextField(
+                      MihTextFormField(
+                        fillColor: MzanziInnovationHub.of(context)!
+                            .theme
+                            .secondaryColor(),
+                        inputColor: MzanziInnovationHub.of(context)!
+                            .theme
+                            .primaryColor(),
                         controller: nameController,
+                        multiLineInput: false,
+                        requiredText: true,
                         hintText: "Business Name",
-                  editable: true,
+                        validator: (value) {
-                  required: true,
+                          return MihValidationServices().isEmpty(value);
+                        },
                       ),
-                const SizedBox(height: 10.0),
+                      const SizedBox(height: 15.0),
                       MIHDropdownField(
                         controller: typeController,
                         hintText: "Business Type",
@@ -385,70 +381,96 @@ class _ProfileBusinessAddState extends State<ProfileBusinessAdd> {
                       const SizedBox(height: 10.0),
                       ValueListenableBuilder(
                         valueListenable: busType,
-                  builder: (BuildContext context, String value, Widget? child) {
+                        builder: (BuildContext context, String value,
+                            Widget? child) {
                           return Visibility(
                             visible: value == "Doctors Office",
-                      child: MIHTextField(
+                            child: MihTextFormField(
+                              fillColor: MzanziInnovationHub.of(context)!
+                                  .theme
+                                  .secondaryColor(),
+                              inputColor: MzanziInnovationHub.of(context)!
+                                  .theme
+                                  .primaryColor(),
                               controller: practiceNoController,
+                              multiLineInput: false,
+                              requiredText: true,
                               hintText: "Practice Number",
-                        editable: true,
+                              validator: (validateValue) {
-                        required: true,
+                                if (value == "Doctors Office") {
+                                  return MihValidationServices()
+                                      .isEmpty(validateValue);
+                                }
+                                return null;
+                              },
                             ),
                           );
                         },
                       ),
                       const SizedBox(height: 10.0),
-                MIHTextField(
+                      MihTextFormField(
+                        fillColor: MzanziInnovationHub.of(context)!
+                            .theme
+                            .secondaryColor(),
+                        inputColor: MzanziInnovationHub.of(context)!
+                            .theme
+                            .primaryColor(),
                         controller: vatNoController,
+                        multiLineInput: false,
+                        requiredText: true,
                         hintText: "VAT Number",
-                  editable: true,
+                        validator: (value) {
-                  required: true,
+                          return MihValidationServices().isEmpty(value);
+                        },
                       ),
                       const SizedBox(height: 10.0),
-                MIHTextField(
+                      MihTextFormField(
+                        fillColor: MzanziInnovationHub.of(context)!
+                            .theme
+                            .secondaryColor(),
+                        inputColor: MzanziInnovationHub.of(context)!
+                            .theme
+                            .primaryColor(),
                         controller: contactController,
+                        multiLineInput: false,
+                        requiredText: true,
                         hintText: "Contact Number",
-                  editable: true,
+                        validator: (value) {
-                  required: true,
+                          return MihValidationServices().isEmpty(value);
+                        },
                       ),
                       const SizedBox(height: 10.0),
-                MIHTextField(
+                      MihTextFormField(
+                        fillColor: MzanziInnovationHub.of(context)!
+                            .theme
+                            .secondaryColor(),
+                        inputColor: MzanziInnovationHub.of(context)!
+                            .theme
+                            .primaryColor(),
                         controller: emailController,
-                  hintText: "Email",
+                        multiLineInput: false,
-                  editable: true,
+                        requiredText: true,
-                  required: true,
+                        hintText: "Business Email",
+                        validator: (value) {
+                          return MihValidationServices().validateEmail(value);
+                        },
                       ),
                       const SizedBox(height: 10.0),
-                // MIHFileField(
-                //   controller: logonameController,
-                //   hintText: "Logo",
-                //   editable: false,
-                //   required: true,
-                //   onPressed: () async {
-                //     FilePickerResult? result =
-                //         await FilePicker.platform.pickFiles(
-                //       type: FileType.custom,
-                //       allowedExtensions: ['jpg', 'png', 'pdf'],
-                //     );
-                //     if (result == null) return;
-                //     final selectedFile = result.files.first;
-                //     setState(() {
-                //       selectedLogo = selectedFile;
-                //     });
-                //     setState(() {
-                //       logonameController.text = selectedFile.name;
-                //     });
-                //   },
-                // ),
-                const SizedBox(height: 10.0),
                       Row(
+                        crossAxisAlignment: CrossAxisAlignment.end,
                         children: [
                           Flexible(
-                      child: MIHTextField(
+                            child: MihTextFormField(
+                              fillColor: MzanziInnovationHub.of(context)!
+                                  .theme
+                                  .secondaryColor(),
+                              inputColor: MzanziInnovationHub.of(context)!
+                                  .theme
+                                  .primaryColor(),
                               controller: locationController,
-                        hintText: "Location",
+                              multiLineInput: false,
-                        editable: false,
+                              requiredText: true,
-                        required: false,
+                              hintText: "GPS Location",
                             ),
                           ),
                           const SizedBox(width: 10.0),
@@ -482,20 +504,17 @@ class _ProfileBusinessAddState extends State<ProfileBusinessAdd> {
                           ),
                         ],
                       ),
-
                       const SizedBox(height: 15.0),
-                Divider(
-                  color:
-                      MzanziInnovationHub.of(context)?.theme.secondaryColor(),
-                ),
                       //const SizedBox(height: 15.0),
-                const Text(
+                      const Center(
+                        child: Text(
                           "My Business User",
                           style: TextStyle(
                             fontWeight: FontWeight.bold,
                             fontSize: 22,
                           ),
                         ),
+                      ),
                       Divider(
                           color: MzanziInnovationHub.of(context)!
                               .theme
@@ -510,18 +529,36 @@ class _ProfileBusinessAddState extends State<ProfileBusinessAdd> {
                         enableSearch: false,
                       ),
                       const SizedBox(height: 10.0),
-                MIHTextField(
+                      MihTextFormField(
+                        fillColor: MzanziInnovationHub.of(context)!
+                            .theme
+                            .secondaryColor(),
+                        inputColor: MzanziInnovationHub.of(context)!
+                            .theme
+                            .primaryColor(),
                         controller: fnameController,
-                  hintText: "Name",
+                        multiLineInput: false,
-                  editable: false,
+                        requiredText: true,
-                  required: true,
+                        hintText: "First Name",
+                        validator: (value) {
+                          return MihValidationServices().isEmpty(value);
+                        },
                       ),
                       const SizedBox(height: 10.0),
-                MIHTextField(
+                      MihTextFormField(
+                        fillColor: MzanziInnovationHub.of(context)!
+                            .theme
+                            .secondaryColor(),
+                        inputColor: MzanziInnovationHub.of(context)!
+                            .theme
+                            .primaryColor(),
                         controller: lnameController,
+                        multiLineInput: false,
+                        requiredText: true,
                         hintText: "Surname",
-                  editable: false,
+                        validator: (value) {
-                  required: true,
+                          return MihValidationServices().isEmpty(value);
+                        },
                       ),
                       const SizedBox(height: 15.0),
                       MIHDropdownField(
@@ -532,26 +569,38 @@ class _ProfileBusinessAddState extends State<ProfileBusinessAdd> {
                         editable: false,
                         enableSearch: false,
                       ),
-                const SizedBox(height: 30.0),
+                      const SizedBox(height: 20.0),
-                MihButton(
+                      Center(
+                        child: MihButton(
                           onPressed: () {
+                            if (_formKey.currentState!.validate()) {
                               submitForm();
+                            } else {
+                              MihAlertServices()
+                                  .formNotFilledCompletely(context);
+                            }
                           },
-                  buttonColor:
+                          buttonColor: MzanziInnovationHub.of(context)!
-                      MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                              .theme
+                              .secondaryColor(),
                           width: 300,
                           child: Text(
                             "Add",
                             style: TextStyle(
-                      color:
+                              color: MzanziInnovationHub.of(context)!
-                          MzanziInnovationHub.of(context)!.theme.primaryColor(),
+                                  .theme
+                                  .primaryColor(),
                               fontSize: 20,
                               fontWeight: FontWeight.bold,
                             ),
                           ),
                         ),
+                      ),
                     ],
                   ),
+                ],
+              ),
+            ),
           ),
         ),
       ],
@@ -596,11 +645,12 @@ class _ProfileBusinessAddState extends State<ProfileBusinessAdd> {
 
   @override
   Widget build(BuildContext context) {
+    double screenWidth = MediaQuery.of(context).size.width;
     return MIHLayoutBuilder(
       actionButton: getActionButton(),
       secondaryActionButton: null,
       header: getHeader(),
-      body: getBody(),
+      body: getBody(screenWidth),
       actionDrawer: null,
       secondaryActionDrawer: null,
       bottomNavBar: null,

Frontend/lib/mih_packages/mzansi_profile/personal_profile/package_tools/mih_personal_profile.dart

@@ -1,15 +1,17 @@
 import 'dart:convert';
 
 import 'package:mzansi_innovation_hub/main.dart';
+import 'package:mzansi_innovation_hub/mih_apis/mih_alert_services.dart';
 import 'package:mzansi_innovation_hub/mih_apis/mih_file_api.dart';
 import 'package:mzansi_innovation_hub/mih_apis/mih_user_apis.dart';
-import 'package:mzansi_innovation_hub/mih_components/mih_inputs_and_buttons/mih_file_input.dart';
+import 'package:mzansi_innovation_hub/mih_apis/mih_validation_services.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_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_package_tool_body.dart';
 import 'package:mzansi_innovation_hub/mih_components/mih_package_components/mih_package_alert.dart';
 import 'package:mzansi_innovation_hub/mih_components/mih_package_components/mih_circle_avatar.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';
@@ -39,6 +41,7 @@ class _MihPersonalProfileState extends State<MihPersonalProfile> {
   late bool businessUser;
   late String oldProPicName;
   late String env;
+  final _formKey = GlobalKey<FormState>();
 
   void notUniqueAlert() {
     showDialog(
@@ -65,10 +68,9 @@ class _MihPersonalProfileState extends State<MihPersonalProfile> {
 
   Future<void> submitForm() async {
     // print("============\nsubmiit form\n=================");
-    if (isFieldsFilled()) {
     if (widget.arguments.signedInUser.username != usernameController.text) {
-        bool isUsernameUnique = await MihUserApis.isUsernameUnique(
+      bool isUsernameUnique =
-            usernameController.text, context);
+          await MihUserApis.isUsernameUnique(usernameController.text, context);
       print("isUsernameUnique: $isUsernameUnique");
       if (isUsernameUnique == false) {
         notUniqueAlert();
@@ -79,24 +81,6 @@ class _MihPersonalProfileState extends State<MihPersonalProfile> {
       await uploadSelectedFile(proPic);
     }
     await updateUserApiCall();
-    } else {
-      showDialog(
-        context: context,
-        builder: (context) {
-          return const MIHErrorMessage(errorType: "Input Error");
-        },
-      );
-    }
-  }
-
-  bool isFieldsFilled() {
-    if (fnameController.text.isEmpty ||
-        lnameController.text.isEmpty ||
-        usernameController.text.isEmpty) {
-      return false;
-    } else {
-      return true;
-    }
   }
 
   bool isBusinessUser() {
@@ -252,25 +236,35 @@ class _MihPersonalProfileState extends State<MihPersonalProfile> {
 
   @override
   Widget build(BuildContext context) {
+    double screenWidth = MediaQuery.of(context).size.width;
     return MihPackageToolBody(
       borderOn: false,
       innerHorizontalPadding: 10,
-      bodyItem: getBody(),
+      bodyItem: getBody(screenWidth),
     );
   }
 
-  Widget getBody() {
+  Widget getBody(double width) {
     return MihSingleChildScroll(
+      child: Padding(
+        padding: MzanziInnovationHub.of(context)!.theme.screenType == "desktop"
+            ? EdgeInsets.symmetric(horizontal: width * 0.2)
+            : EdgeInsets.symmetric(horizontal: width * 0.075),
         child: Column(
+          mainAxisAlignment: MainAxisAlignment.start,
           children: [
-          //displayProPic(),
+            MihForm(
-          MihCircleAvatar(
+              formKey: _formKey,
+              formFields: [
+                Center(
+                  child: MihCircleAvatar(
                     imageFile: propicPreview,
                     width: 150,
                     editable: true,
                     fileNameController: proPicController,
                     userSelectedfile: proPic,
-            frameColor: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                    frameColor:
+                        MzanziInnovationHub.of(context)!.theme.secondaryColor(),
                     backgroundColor:
                         MzanziInnovationHub.of(context)!.theme.primaryColor(),
                     onChange: (selectedImage) {
@@ -279,75 +273,63 @@ class _MihPersonalProfileState extends State<MihPersonalProfile> {
                       });
                     },
                   ),
-          // MIHProfilePicture(
+                ),
-          //   profilePictureFile: widget.arguments.propicFile,
-          //   proPicController: proPicController,
-          //   proPic: proPic,
-          //   width: 155,
-          //   radius: 70,
-          //   drawerMode: false,
-          //   editable: true,
-          //   frameColor: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
-          //   onChange: (newProPic) {
-          //     setState(() {
-          //       proPic = newProPic;
-          //     });
-          //   },
-          // ),
                 const SizedBox(height: 25.0),
                 Visibility(
                   visible: false,
-            child: MIHFileField(
+                  child: MihTextFormField(
+                    fillColor:
+                        MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                    inputColor:
+                        MzanziInnovationHub.of(context)!.theme.primaryColor(),
                     controller: proPicController,
-              hintText: "Profile Picture",
+                    multiLineInput: false,
-              editable: false,
+                    requiredText: true,
-              required: false,
+                    readOnly: true,
-              onPressed: () async {
+                    hintText: "Selected File Name",
-                FilePickerResult? result = await FilePicker.platform.pickFiles(
+                  ),
-                  type: FileType.custom,
+                ),
-                  allowedExtensions: ['jpg', 'png'],
+                const SizedBox(height: 10.0),
-                  withData: true,
+                MihTextFormField(
-                );
+                  fillColor:
-                if (result == null) return;
+                      MzanziInnovationHub.of(context)!.theme.secondaryColor(),
-                final selectedFile = result.files.first;
+                  inputColor:
-                setState(() {
+                      MzanziInnovationHub.of(context)!.theme.primaryColor(),
-                  proPic = selectedFile;
+                  controller: usernameController,
-                  propicPreview = MemoryImage(proPic!.bytes!);
+                  multiLineInput: false,
-                });
+                  requiredText: true,
-
+                  hintText: "Username",
-                setState(() {
+                  validator: (value) {
-                  proPicController.text = selectedFile.name;
+                    return MihValidationServices().validateUsername(value);
-                });
                   },
                 ),
-          ),
-          // const SizedBox(height: 10.0),
-          // MIHTextField(
-          //   controller: proPicController,
-          //   hintText: "Pro Pic",
-          //   editable: true,
-          //   required: true,
-          // ),
                 const SizedBox(height: 10.0),
-          MIHTextField(
+                MihTextFormField(
-            controller: usernameController,
+                  fillColor:
-            hintText: "Username",
+                      MzanziInnovationHub.of(context)!.theme.secondaryColor(),
-            editable: true,
+                  inputColor:
-            required: true,
+                      MzanziInnovationHub.of(context)!.theme.primaryColor(),
-          ),
-          const SizedBox(height: 10.0),
-          MIHTextField(
                   controller: fnameController,
+                  multiLineInput: false,
+                  requiredText: true,
                   hintText: "First Name",
-            editable: true,
+                  validator: (value) {
-            required: true,
+                    return MihValidationServices().isEmpty(value);
+                  },
                 ),
                 const SizedBox(height: 10.0),
-          MIHTextField(
+                MihTextFormField(
+                  fillColor:
+                      MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                  inputColor:
+                      MzanziInnovationHub.of(context)!.theme.primaryColor(),
                   controller: lnameController,
+                  multiLineInput: false,
+                  requiredText: true,
                   hintText: "Last Name",
-            editable: true,
+                  validator: (value) {
-            required: true,
+                    return MihValidationServices().isEmpty(value);
+                  },
                 ),
                 const SizedBox(height: 10.0),
                 Row(
@@ -375,9 +357,15 @@ class _MihPersonalProfileState extends State<MihPersonalProfile> {
                   ],
                 ),
                 const SizedBox(height: 30.0),
-          MihButton(
+                Center(
+                  child: MihButton(
                     onPressed: () {
+                      //Add validation here
+                      if (_formKey.currentState!.validate()) {
                         submitForm();
+                      } else {
+                        MihAlertServices().formNotFilledCompletely(context);
+                      }
                     },
                     buttonColor:
                         MzanziInnovationHub.of(context)!.theme.secondaryColor(),
@@ -385,14 +373,20 @@ class _MihPersonalProfileState extends State<MihPersonalProfile> {
                     child: Text(
                       "Update",
                       style: TextStyle(
-                color: MzanziInnovationHub.of(context)!.theme.primaryColor(),
+                        color: MzanziInnovationHub.of(context)!
+                            .theme
+                            .primaryColor(),
                         fontSize: 20,
                         fontWeight: FontWeight.bold,
                       ),
                     ),
                   ),
+                ),
               ],
             ),
+          ],
+        ),
+      ),
     );
   }
 }

Frontend/lib/mih_packages/mzansi_profile/personal_profile/package_tools/mih_personal_settings.dart

@@ -118,34 +118,26 @@ class _MihPersonalSettingsState extends State<MihPersonalSettings> {
             ),
           ),
           const SizedBox(height: 10.0),
-          Wrap(
-            spacing: 10,
-            runSpacing: 10,
-            alignment: WrapAlignment.center,
-            crossAxisAlignment: WrapCrossAlignment.center,
-            children: [
           Text(
             "Would you like to delete your MIH account?",
             textAlign: TextAlign.center,
             style: TextStyle(
               fontSize: 18,
               fontWeight: FontWeight.bold,
-                  color:
+              color: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
-                      MzanziInnovationHub.of(context)!.theme.secondaryColor(),
             ),
           ),
+          const SizedBox(height: 10.0),
           MihButton(
             onPressed: () {
               deleteAccountPopUp(context);
             },
-                buttonColor:
+            buttonColor: MzanziInnovationHub.of(context)!.theme.errorColor(),
-                    MzanziInnovationHub.of(context)!.theme.errorColor(),
             width: 300,
             child: Text(
               "Delete Account",
               style: TextStyle(
-                    color:
+                color: MzanziInnovationHub.of(context)!.theme.primaryColor(),
-                        MzanziInnovationHub.of(context)!.theme.primaryColor(),
                 fontSize: 20,
                 fontWeight: FontWeight.bold,
               ),
@@ -153,8 +145,6 @@ class _MihPersonalSettingsState extends State<MihPersonalSettings> {
           ),
         ],
       ),
-        ],
-      ),
     );
   }
 }

Frontend/lib/mih_packages/mzansi_wallet/builder/build_loyalty_card_list.dart

@@ -1,19 +1,18 @@
 import 'package:flutter_speed_dial/flutter_speed_dial.dart';
 import 'package:mzansi_innovation_hub/main.dart';
+import 'package:mzansi_innovation_hub/mih_apis/mih_alert_services.dart';
 import 'package:mzansi_innovation_hub/mih_apis/mih_mzansi_wallet_apis.dart';
-import 'package:mzansi_innovation_hub/mih_components/mih_inputs_and_buttons/mih_number_input.dart';
+import 'package:mzansi_innovation_hub/mih_apis/mih_validation_services.dart';
-import 'package:mzansi_innovation_hub/mih_components/mih_inputs_and_buttons/mih_text_input.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_package_alert.dart';
 import 'package:mzansi_innovation_hub/mih_components/mih_package_components/mih_package_window.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_delete_message.dart';
-import 'package:mzansi_innovation_hub/mih_components/mih_pop_up_messages/mih_error_message.dart';
 import 'package:mzansi_innovation_hub/mih_objects/app_user.dart';
 import 'package:mzansi_innovation_hub/mih_objects/loyalty_card.dart';
 import 'package:mzansi_innovation_hub/mih_packages/mzansi_wallet/components/mih_card_display.dart';
 import 'package:flutter/material.dart';
-
-// import 'package:syncfusion_flutter_barcodes/barcodes.dart';
 import 'package:barcode_widget/barcode_widget.dart';
 
 class BuildLoyaltyCardList extends StatefulWidget {
@@ -36,6 +35,7 @@ class _BuildLoyaltyCardListState extends State<BuildLoyaltyCardList> {
   final TextEditingController _nicknameController = TextEditingController();
   final TextEditingController _cardNumberController = TextEditingController();
   late int _noFavourites;
+  final _formKey = GlobalKey<FormState>();
 
   void openscanner() async {
     Navigator.of(context).pushNamed(
@@ -44,7 +44,7 @@ class _BuildLoyaltyCardListState extends State<BuildLoyaltyCardList> {
     );
   }
 
-  void editCardWindow(BuildContext ctxt, int index) {
+  void editCardWindow(BuildContext ctxt, int index, double width) {
     showDialog(
       context: context,
       barrierDismissible: false,
@@ -56,43 +56,65 @@ class _BuildLoyaltyCardListState extends State<BuildLoyaltyCardList> {
           _nicknameController.clear();
           Navigator.pop(context);
         },
-        windowBody: Column(
+        windowBody: Padding(
+          padding:
+              MzanziInnovationHub.of(context)!.theme.screenType == "desktop"
+                  ? EdgeInsets.symmetric(horizontal: width * 0.05)
+                  : EdgeInsets.symmetric(horizontal: width * 0),
+          child: Column(
             children: [
-            const SizedBox(height: 10),
+              MihForm(
-            MIHTextField(
+                formKey: _formKey,
+                formFields: [
+                  MihTextFormField(
+                    fillColor:
+                        MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                    inputColor:
+                        MzanziInnovationHub.of(context)!.theme.primaryColor(),
                     controller: _nicknameController,
+                    multiLineInput: false,
+                    requiredText: false,
                     hintText: "Card Title",
-              editable: true,
-              required: false,
                   ),
                   const SizedBox(height: 10),
                   Row(
                     mainAxisAlignment: MainAxisAlignment.center,
-              crossAxisAlignment: CrossAxisAlignment.center,
+                    crossAxisAlignment: CrossAxisAlignment.end,
                     mainAxisSize: MainAxisSize.max,
                     children: [
                       Flexible(
-                  child: MIHNumberField(
+                        child: MihTextFormField(
+                          fillColor: MzanziInnovationHub.of(context)!
+                              .theme
+                              .secondaryColor(),
+                          inputColor: MzanziInnovationHub.of(context)!
+                              .theme
+                              .primaryColor(),
                           controller: _cardNumberController,
+                          multiLineInput: false,
+                          requiredText: true,
                           hintText: "Card Number",
-                    editable: true,
+                          numberMode: true,
-                    required: true,
+                          validator: (value) {
-                    enableDecimal: false,
+                            return MihValidationServices().isEmpty(value);
+                          },
                         ),
                       ),
-                const SizedBox(width: 10),
+                      const SizedBox(width: 20),
                       MihButton(
                         onPressed: () {
                           openscanner();
                         },
-                  buttonColor:
+                        buttonColor: MzanziInnovationHub.of(context)!
-                      MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                            .theme
+                            .secondaryColor(),
                         width: 100,
                         child: Text(
                           "Scan",
                           style: TextStyle(
-                      color:
+                            color: MzanziInnovationHub.of(context)!
-                          MzanziInnovationHub.of(context)!.theme.primaryColor(),
+                                .theme
+                                .primaryColor(),
                             fontSize: 20,
                             fontWeight: FontWeight.bold,
                           ),
@@ -101,16 +123,10 @@ class _BuildLoyaltyCardListState extends State<BuildLoyaltyCardList> {
                     ],
                   ),
                   const SizedBox(height: 15),
-            MihButton(
+                  Center(
+                    child: MihButton(
                       onPressed: () {
-                if (_cardNumberController.text == "") {
+                        if (_formKey.currentState!.validate()) {
-                  showDialog(
-                    context: context,
-                    builder: (context) {
-                      return const MIHErrorMessage(errorType: "Input Error");
-                    },
-                  );
-                } else {
                           MIHMzansiWalletApis.updateLoyaltyCardAPICall(
                             widget.signedInUser,
                             widget.cardList[index].idloyalty_cards,
@@ -121,22 +137,31 @@ class _BuildLoyaltyCardListState extends State<BuildLoyaltyCardList> {
                             0,
                             ctxt,
                           );
+                        } else {
+                          MihAlertServices().formNotFilledCompletely(context);
                         }
                       },
-              buttonColor:
+                      buttonColor: MzanziInnovationHub.of(context)!
-                  MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                          .theme
+                          .secondaryColor(),
                       width: 300,
                       child: Text(
                         "Update",
                         style: TextStyle(
-                  color: MzanziInnovationHub.of(context)!.theme.primaryColor(),
+                          color: MzanziInnovationHub.of(context)!
+                              .theme
+                              .primaryColor(),
                           fontSize: 20,
                           fontWeight: FontWeight.bold,
                         ),
                       ),
                     ),
+                  ),
                 ],
               ),
+            ],
+          ),
+        ),
       ),
     );
   }
@@ -278,7 +303,7 @@ class _BuildLoyaltyCardListState extends State<BuildLoyaltyCardList> {
     );
   }
 
-  void viewCardWindow(int index) {
+  void viewCardWindow(int index, double width) {
     //print(widget.cardList[index].card_number);
     String formattedCardNumber = "";
     for (int i = 0; i <= widget.cardList[index].card_number.length - 1; i++) {
@@ -344,7 +369,7 @@ class _BuildLoyaltyCardListState extends State<BuildLoyaltyCardList> {
                 _cardNumberController.text = widget.cardList[index].card_number;
                 _nicknameController.text = widget.cardList[index].nickname;
               });
-              editCardWindow(context, index);
+              editCardWindow(context, index, width);
             },
           ),
           SpeedDialChild(
@@ -488,7 +513,7 @@ class _BuildLoyaltyCardListState extends State<BuildLoyaltyCardList> {
               height: 100,
             ),
             onTap: () {
-              viewCardWindow(index);
+              viewCardWindow(index, size.width);
             },
           );
         },

Frontend/lib/mih_packages/mzansi_wallet/components/mih_barcode_scanner.dart

@@ -129,6 +129,7 @@ class _MihBarcodeScannerState extends State<MihBarcodeScanner>
                           .theme
                           .secondaryColor(),
                       width: 100,
+                      height: 50,
                       child: Text(
                         "Cancel",
                         style: TextStyle(

Frontend/lib/mih_packages/mzansi_wallet/package_tools/mih_cards.dart

@@ -1,15 +1,17 @@
 import 'package:flutter_speed_dial/flutter_speed_dial.dart';
 import 'package:mzansi_innovation_hub/main.dart';
+import 'package:mzansi_innovation_hub/mih_apis/mih_alert_services.dart';
 import 'package:mzansi_innovation_hub/mih_apis/mih_mzansi_wallet_apis.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_number_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_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_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_package_window.dart';
 import 'package:mzansi_innovation_hub/mih_components/mih_package_components/mih_search_bar.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_loading_circle.dart';
 import 'package:mzansi_innovation_hub/mih_objects/app_user.dart';
@@ -36,6 +38,7 @@ class _MihCardsState extends State<MihCards> {
   final TextEditingController cardNumberController = TextEditingController();
   final TextEditingController cardSearchController = TextEditingController();
   final FocusNode searchFocusNode = FocusNode();
+  final _formKey = GlobalKey<FormState>();
   late Future<List<MIHLoyaltyCard>> cardList;
   List<MIHLoyaltyCard> listOfCards = [];
   //bool showSelectedCardType = false;
@@ -81,7 +84,7 @@ class _MihCardsState extends State<MihCards> {
     }
   }
 
-  void addCardWindow(BuildContext ctxt) {
+  void addCardWindow(BuildContext ctxt, double width) {
     showDialog(
       context: context,
       barrierDismissible: false,
@@ -95,8 +98,16 @@ class _MihCardsState extends State<MihCards> {
           shopName.value = "";
           Navigator.pop(context);
         },
-        windowBody: Column(
+        windowBody: Padding(
+          padding:
+              MzanziInnovationHub.of(context)!.theme.screenType == "desktop"
+                  ? EdgeInsets.symmetric(horizontal: width * 0.05)
+                  : EdgeInsets.symmetric(horizontal: width * 0),
+          child: Column(
             children: [
+              MihForm(
+                formKey: _formKey,
+                formFields: [
                   MIHDropdownField(
                     controller: shopController,
                     hintText: "Shop Name",
@@ -152,52 +163,72 @@ class _MihCardsState extends State<MihCards> {
                   ),
                   ValueListenableBuilder(
                     valueListenable: shopName,
-              builder: (BuildContext context, String value, Widget? child) {
+                    builder:
+                        (BuildContext context, String value, Widget? child) {
                       return Visibility(
                         visible: value != "",
                         child: Column(
                           children: [
                             const SizedBox(height: 10),
                             MihCardDisplay(
-                          shopName: shopName.value, nickname: "", height: 200),
+                                shopName: shopName.value,
+                                nickname: "",
+                                height: 200),
                           ],
                         ),
                       );
                     },
                   ),
                   const SizedBox(height: 10),
-            MIHTextField(
+                  MihTextFormField(
+                    fillColor:
+                        MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                    inputColor:
+                        MzanziInnovationHub.of(context)!.theme.primaryColor(),
                     controller: _nicknameController,
+                    multiLineInput: false,
+                    requiredText: false,
                     hintText: "Card Title",
-              editable: true,
-              required: false,
                   ),
                   const SizedBox(height: 10),
                   Row(
                     mainAxisAlignment: MainAxisAlignment.center,
-              crossAxisAlignment: CrossAxisAlignment.center,
+                    crossAxisAlignment: CrossAxisAlignment.end,
                     mainAxisSize: MainAxisSize.max,
                     children: [
                       Flexible(
-                  child: MIHNumberField(
+                        child: MihTextFormField(
+                          fillColor: MzanziInnovationHub.of(context)!
+                              .theme
+                              .secondaryColor(),
+                          inputColor: MzanziInnovationHub.of(context)!
+                              .theme
+                              .primaryColor(),
                           controller: cardNumberController,
+                          multiLineInput: false,
+                          requiredText: true,
                           hintText: "Card Number",
-                    editable: true,
+                          numberMode: true,
-                    required: true,
+                          validator: (value) {
-                    enableDecimal: false,
+                            return MihValidationServices().isEmpty(value);
+                          },
                         ),
                       ),
-                const SizedBox(width: 10),
+                      const SizedBox(width: 20),
                       MihButton(
-                  onPressed: () {},
+                        onPressed: () {
-                  buttonColor:
+                          openscanner();
-                      MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                        },
+                        buttonColor: MzanziInnovationHub.of(context)!
+                            .theme
+                            .secondaryColor(),
                         width: 100,
                         child: Text(
                           "Scan",
                           style: TextStyle(
-                      color:
+                            color: MzanziInnovationHub.of(context)!
-                          MzanziInnovationHub.of(context)!.theme.primaryColor(),
+                                .theme
+                                .primaryColor(),
                             fontSize: 20,
                             fontWeight: FontWeight.bold,
                           ),
@@ -206,14 +237,16 @@ class _MihCardsState extends State<MihCards> {
                     ],
                   ),
                   const SizedBox(height: 15),
-            MihButton(
+                  Center(
+                    child: MihButton(
                       onPressed: () {
-                if (shopController.text == "" ||
+                        if (_formKey.currentState!.validate()) {
-                    cardNumberController.text == "") {
+                          if (shopController.text == "") {
                             showDialog(
                               context: context,
                               builder: (context) {
-                      return const MIHErrorMessage(errorType: "Input Error");
+                                return const MIHErrorMessage(
+                                    errorType: "Input Error");
                               },
                             );
                           } else {
@@ -229,21 +262,31 @@ class _MihCardsState extends State<MihCards> {
                               context,
                             );
                           }
+                        } else {
+                          MihAlertServices().formNotFilledCompletely(context);
+                        }
                       },
-              buttonColor:
+                      buttonColor: MzanziInnovationHub.of(context)!
-                  MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                          .theme
+                          .secondaryColor(),
                       width: 300,
                       child: Text(
                         "Add",
                         style: TextStyle(
-                  color: MzanziInnovationHub.of(context)!.theme.primaryColor(),
+                          color: MzanziInnovationHub.of(context)!
+                              .theme
+                              .primaryColor(),
                           fontSize: 20,
                           fontWeight: FontWeight.bold,
                         ),
                       ),
                     ),
+                  ),
                 ],
               ),
+            ],
+          ),
+        ),
       ),
     );
   }
@@ -359,7 +402,7 @@ class _MihCardsState extends State<MihCards> {
                   backgroundColor:
                       MzanziInnovationHub.of(context)!.theme.successColor(),
                   onTap: () {
-                    addCardWindow(context);
+                    addCardWindow(context, width);
                   },
                 )
               ]),

Frontend/lib/mih_packages/patient_profile/pat_manager/list_builders/build_mih_patient_search_list.dart

@@ -2,11 +2,10 @@ import 'dart:convert';
 
 import 'package:mzansi_innovation_hub/main.dart';
 import 'package:mzansi_innovation_hub/mih_apis/mih_api_calls.dart';
-import 'package:mzansi_innovation_hub/mih_components/mih_inputs_and_buttons/mih_date_input.dart';
+import 'package:mzansi_innovation_hub/mih_apis/mih_validation_services.dart';
-import 'package:mzansi_innovation_hub/mih_components/mih_inputs_and_buttons/mih_text_input.dart';
-import 'package:mzansi_innovation_hub/mih_components/mih_inputs_and_buttons/mih_time_input.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_package_window.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_components/mih_pop_up_messages/mih_warning_message.dart';
@@ -132,116 +131,6 @@ class _BuildPatientsListState extends State<BuildMihPatientSearchList> {
     );
   }
 
-  void submitApointment(int index) {
-    //To-Do: Implement the appointment submission
-    print("To-do: Implement the appointment submission");
-    // MIHApiCalls.addAppointmentAPICall(
-    //   widget.business!.business_id,
-    //   widget.patients[index].app_id,
-    //   dateController.text,
-    //   timeController.text,
-    //   widget.arguments,
-    //   context,
-    // );
-  }
-
-  bool isAppointmentFieldsFilled() {
-    if (dateController.text.isEmpty || timeController.text.isEmpty) {
-      return false;
-    } else {
-      return true;
-    }
-  }
-
-  void appointmentPopUp(int index) {
-    var firstLetterFName = widget.patients[index].first_name[0];
-    var firstLetterLName = widget.patients[index].last_name[0];
-    var fnameStar = '*' * 8;
-    var lnameStar = '*' * 8;
-
-    setState(() {
-      idController.text = widget.patients[index].id_no;
-      fnameController.text = firstLetterFName + fnameStar;
-      lnameController.text = firstLetterLName + lnameStar;
-    });
-    showDialog(
-      context: context,
-      barrierDismissible: false,
-      builder: (context) => MihPackageWindow(
-        fullscreen: false,
-        windowTitle: "Patient Appointment",
-        onWindowTapClose: () {
-          Navigator.pop(context);
-        },
-        windowBody: Column(
-          children: [
-            MIHTextField(
-              controller: idController,
-              hintText: "ID No.",
-              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: "Surname",
-              editable: false,
-              required: true,
-            ),
-            const SizedBox(height: 10.0),
-            MIHDateField(
-              controller: dateController,
-              lableText: "Date",
-              required: true,
-            ),
-            const SizedBox(height: 10.0),
-            MIHTimeField(
-              controller: timeController,
-              lableText: "Time",
-              required: true,
-            ),
-            const SizedBox(height: 30.0),
-            MihButton(
-              onPressed: () {
-                bool filled = isAppointmentFieldsFilled();
-                if (filled) {
-                  //print("here2");
-                  submitApointment(index);
-                  //print("here3");
-                } else {
-                  showDialog(
-                    context: context,
-                    builder: (context) {
-                      return const MIHErrorMessage(errorType: "Input Error");
-                    },
-                  );
-                }
-              },
-              buttonColor:
-                  MzanziInnovationHub.of(context)!.theme.secondaryColor(),
-              width: 300,
-              child: Text(
-                "Book",
-                style: TextStyle(
-                  color: MzanziInnovationHub.of(context)!.theme.primaryColor(),
-                  fontSize: 20,
-                  fontWeight: FontWeight.bold,
-                ),
-              ),
-            ),
-          ],
-        ),
-      ),
-    );
-  }
-
   void noAccessWarning() {
     showDialog(
       context: context,
@@ -331,32 +220,60 @@ class _BuildPatientsListState extends State<BuildMihPatientSearchList> {
         },
         windowBody: Column(
           children: [
-            MIHTextField(
+            MihTextFormField(
+              fillColor:
+                  MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+              inputColor: MzanziInnovationHub.of(context)!.theme.primaryColor(),
               controller: idController,
+              multiLineInput: false,
+              requiredText: true,
+              readOnly: true,
               hintText: "ID No.",
-              editable: false,
+              validator: (value) {
-              required: true,
+                return MihValidationServices().isEmpty(value);
+              },
             ),
             const SizedBox(height: 10.0),
-            MIHTextField(
+            MihTextFormField(
+              fillColor:
+                  MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+              inputColor: MzanziInnovationHub.of(context)!.theme.primaryColor(),
               controller: fnameController,
+              multiLineInput: false,
+              requiredText: true,
+              readOnly: true,
               hintText: "First Name",
-              editable: false,
+              validator: (value) {
-              required: true,
+                return MihValidationServices().isEmpty(value);
+              },
             ),
             const SizedBox(height: 10.0),
-            MIHTextField(
+            MihTextFormField(
+              fillColor:
+                  MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+              inputColor: MzanziInnovationHub.of(context)!.theme.primaryColor(),
               controller: lnameController,
+              multiLineInput: false,
+              requiredText: true,
+              readOnly: true,
               hintText: "Surname",
-              editable: false,
+              validator: (value) {
-              required: true,
+                return MihValidationServices().isEmpty(value);
+              },
             ),
             const SizedBox(height: 10.0),
-            MIHTextField(
+            MihTextFormField(
+              fillColor:
+                  MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+              inputColor: MzanziInnovationHub.of(context)!.theme.primaryColor(),
               controller: accessStatusController,
+              multiLineInput: false,
+              requiredText: true,
+              readOnly: true,
               hintText: "Access Status",
-              editable: false,
+              validator: (value) {
-              required: true,
+                return MihValidationServices().isEmpty(value);
+              },
             ),
             const SizedBox(height: 20.0),
             Visibility(

Frontend/lib/mih_packages/patient_profile/pat_manager/list_builders/build_my_patient_list_list.dart

@@ -1,11 +1,14 @@
 import 'package:mzansi_innovation_hub/main.dart';
+import 'package:mzansi_innovation_hub/mih_apis/mih_alert_services.dart';
 import 'package:mzansi_innovation_hub/mih_apis/mih_api_calls.dart';
 import 'package:mzansi_innovation_hub/mih_apis/mih_mzansi_calendar_apis.dart';
+import 'package:mzansi_innovation_hub/mih_apis/mih_validation_services.dart';
 import 'package:mzansi_innovation_hub/mih_components/mih_inputs_and_buttons/mih_date_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_inputs_and_buttons/mih_time_input.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_package_window.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_warning_message.dart';
 import 'package:mzansi_innovation_hub/mih_env/env.dart';
@@ -41,6 +44,7 @@ class _BuildPatientsListState extends State<BuildMyPatientListList> {
   TextEditingController idController = TextEditingController();
   TextEditingController fnameController = TextEditingController();
   TextEditingController lnameController = TextEditingController();
+  final _formKey = GlobalKey<FormState>();
 
   final baseAPI = AppEnviroment.baseApiUrl;
 
@@ -66,18 +70,6 @@ class _BuildPatientsListState extends State<BuildMyPatientListList> {
       timeController.text,
       context,
     );
-    // MIHApiCalls.addAppointmentAPICall(
-    //   widget.business!.business_id,
-    //   widget.patientAccesses[index].app_id,
-    //   dateController.text,
-    //   timeController.text,
-    //   BusinessArguments(
-    //     widget.signedInUser,
-    //     widget.businessUser,
-    //     widget.business,
-    //   ),
-    //   context,
-    // );
   }
 
   bool isAppointmentFieldsFilled() {
@@ -88,10 +80,9 @@ class _BuildPatientsListState extends State<BuildMyPatientListList> {
     }
   }
 
-  void appointmentPopUp(int index) {
+  void appointmentPopUp(int index, double width) {
     var firstLetterFName = widget.patientAccesses[index].fname;
     var firstLetterLName = widget.patientAccesses[index].lname;
-
     setState(() {
       idController.text = widget.patientAccesses[index].id_no;
       fnameController.text = firstLetterFName;
@@ -106,27 +97,59 @@ class _BuildPatientsListState extends State<BuildMyPatientListList> {
         onWindowTapClose: () {
           Navigator.pop(context);
         },
-        windowBody: Column(
+        windowBody: Padding(
+          padding:
+              MzanziInnovationHub.of(context)!.theme.screenType == "desktop"
+                  ? EdgeInsets.symmetric(horizontal: width * 0.056)
+                  : const EdgeInsets.symmetric(horizontal: 0),
+          child: Column(
             children: [
-            MIHTextField(
+              MihForm(
+                formKey: _formKey,
+                formFields: [
+                  MihTextFormField(
+                    fillColor:
+                        MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                    inputColor:
+                        MzanziInnovationHub.of(context)!.theme.primaryColor(),
                     controller: idController,
+                    multiLineInput: false,
+                    requiredText: true,
+                    readOnly: true,
                     hintText: "ID No.",
-              editable: false,
+                    validator: (value) {
-              required: true,
+                      return MihValidationServices().isEmpty(value);
+                    },
                   ),
                   const SizedBox(height: 10.0),
-            MIHTextField(
+                  MihTextFormField(
+                    fillColor:
+                        MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                    inputColor:
+                        MzanziInnovationHub.of(context)!.theme.primaryColor(),
                     controller: fnameController,
+                    multiLineInput: false,
+                    requiredText: true,
+                    readOnly: true,
                     hintText: "First Name",
-              editable: false,
+                    validator: (value) {
-              required: true,
+                      return MihValidationServices().isEmpty(value);
+                    },
                   ),
                   const SizedBox(height: 10.0),
-            MIHTextField(
+                  MihTextFormField(
+                    fillColor:
+                        MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                    inputColor:
+                        MzanziInnovationHub.of(context)!.theme.primaryColor(),
                     controller: lnameController,
+                    multiLineInput: false,
+                    requiredText: true,
+                    readOnly: true,
                     hintText: "Surname",
-              editable: false,
+                    validator: (value) {
-              required: true,
+                      return MihValidationServices().isEmpty(value);
+                    },
                   ),
                   const SizedBox(height: 10.0),
                   MIHDateField(
@@ -141,8 +164,10 @@ class _BuildPatientsListState extends State<BuildMyPatientListList> {
                     required: true,
                   ),
                   const SizedBox(height: 30.0),
-            MihButton(
+                  Center(
+                    child: MihButton(
                       onPressed: () {
+                        if (_formKey.currentState!.validate()) {
                           bool filled = isAppointmentFieldsFilled();
                           if (filled) {
                             submitApointment(index);
@@ -150,25 +175,36 @@ class _BuildPatientsListState extends State<BuildMyPatientListList> {
                             showDialog(
                               context: context,
                               builder: (context) {
-                      return const MIHErrorMessage(errorType: "Input Error");
+                                return const MIHErrorMessage(
+                                    errorType: "Input Error");
                               },
                             );
                           }
+                        } else {
+                          MihAlertServices().formNotFilledCompletely(context);
+                        }
                       },
-              buttonColor:
+                      buttonColor: MzanziInnovationHub.of(context)!
-                  MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                          .theme
+                          .secondaryColor(),
                       width: 300,
                       child: Text(
                         "Book Appointment",
                         style: TextStyle(
-                  color: MzanziInnovationHub.of(context)!.theme.primaryColor(),
+                          color: MzanziInnovationHub.of(context)!
+                              .theme
+                              .primaryColor(),
                           fontSize: 20,
                           fontWeight: FontWeight.bold,
                         ),
                       ),
                     ),
+                  ),
                 ],
               ),
+            ],
+          ),
+        ),
       ),
     );
   }
@@ -202,10 +238,10 @@ class _BuildPatientsListState extends State<BuildMyPatientListList> {
     return hasAccess;
   }
 
-  void patientProfileChoicePopUp(int index, Patient? patientProfile) async {
+  void patientProfileChoicePopUp(
+      int index, Patient? patientProfile, double width) async {
     var firstLetterFName = widget.patientAccesses[index].fname;
     var firstLetterLName = widget.patientAccesses[index].lname;
-
     setState(() {
       idController.text = widget.patientAccesses[index].id_no;
       fnameController.text = firstLetterFName;
@@ -220,42 +256,77 @@ class _BuildPatientsListState extends State<BuildMyPatientListList> {
         onWindowTapClose: () {
           Navigator.pop(context);
         },
-        windowBody: Column(
+        windowBody: Padding(
+          padding:
+              MzanziInnovationHub.of(context)!.theme.screenType == "desktop"
+                  ? EdgeInsets.symmetric(horizontal: width * 0.05)
+                  : const EdgeInsets.symmetric(horizontal: 0),
+          child: Column(
             children: [
-            MIHTextField(
+              MihTextFormField(
+                fillColor:
+                    MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                inputColor:
+                    MzanziInnovationHub.of(context)!.theme.primaryColor(),
                 controller: idController,
+                multiLineInput: false,
+                requiredText: true,
+                readOnly: true,
                 hintText: "ID No.",
-              editable: false,
+                validator: (value) {
-              required: true,
+                  return MihValidationServices().isEmpty(value);
+                },
               ),
               const SizedBox(height: 10.0),
-            MIHTextField(
+              MihTextFormField(
+                fillColor:
+                    MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                inputColor:
+                    MzanziInnovationHub.of(context)!.theme.primaryColor(),
                 controller: fnameController,
+                multiLineInput: false,
+                requiredText: true,
+                readOnly: true,
                 hintText: "First Name",
-              editable: false,
+                validator: (value) {
-              required: true,
+                  return MihValidationServices().isEmpty(value);
+                },
               ),
               const SizedBox(height: 10.0),
-            MIHTextField(
+              MihTextFormField(
+                fillColor:
+                    MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                inputColor:
+                    MzanziInnovationHub.of(context)!.theme.primaryColor(),
                 controller: lnameController,
+                multiLineInput: false,
+                requiredText: true,
+                readOnly: true,
                 hintText: "Surname",
-              editable: false,
+                validator: (value) {
-              required: true,
+                  return MihValidationServices().isEmpty(value);
+                },
               ),
               const SizedBox(height: 30.0),
-            Wrap(runSpacing: 10, spacing: 10, children: [
+              Center(
+                child: Wrap(
+                  runSpacing: 10,
+                  spacing: 10,
+                  children: [
                     MihButton(
                       onPressed: () {
-                  appointmentPopUp(index);
+                        appointmentPopUp(index, width);
                       },
-                buttonColor:
+                      buttonColor: MzanziInnovationHub.of(context)!
-                    MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                          .theme
+                          .secondaryColor(),
                       width: 300,
                       child: Text(
                         "Book Appointment",
                         style: TextStyle(
-                    color:
+                          color: MzanziInnovationHub.of(context)!
-                        MzanziInnovationHub.of(context)!.theme.primaryColor(),
+                              .theme
+                              .primaryColor(),
                           fontSize: 20,
                           fontWeight: FontWeight.bold,
                         ),
@@ -263,7 +334,8 @@ class _BuildPatientsListState extends State<BuildMyPatientListList> {
                     ),
                     MihButton(
                       onPressed: () {
-                  Navigator.of(context).pushNamed('/patient-manager/patient',
+                        Navigator.of(context)
+                            .pushNamed('/patient-manager/patient',
                                 arguments: PatientViewArguments(
                                   widget.signedInUser,
                                   patientProfile,
@@ -278,21 +350,25 @@ class _BuildPatientsListState extends State<BuildMyPatientListList> {
                       child: Text(
                         "View Medical Records",
                         style: TextStyle(
-                    color:
+                          color: MzanziInnovationHub.of(context)!
-                        MzanziInnovationHub.of(context)!.theme.primaryColor(),
+                              .theme
+                              .primaryColor(),
                           fontSize: 20,
                           fontWeight: FontWeight.bold,
                         ),
                       ),
                     ),
-            ])
                   ],
                 ),
+              )
+            ],
+          ),
+        ),
       ),
     );
   }
 
-  Widget displayMyPatientTile(int index) {
+  Widget displayMyPatientTile(int index, double width) {
     var firstName = "";
     var lastName = "";
     String access = widget.patientAccesses[index].status.toUpperCase();
@@ -350,7 +426,7 @@ class _BuildPatientsListState extends State<BuildMyPatientListList> {
               p = result;
             });
           });
-          patientProfileChoicePopUp(index, p);
+          patientProfileChoicePopUp(index, p, width);
         } else {
           noAccessWarning(index);
         }
@@ -374,6 +450,7 @@ class _BuildPatientsListState extends State<BuildMyPatientListList> {
 
   @override
   Widget build(BuildContext context) {
+    double screenWidth = MediaQuery.of(context).size.width;
     return ListView.separated(
       shrinkWrap: true,
       physics: const NeverScrollableScrollPhysics(),
@@ -384,7 +461,7 @@ class _BuildPatientsListState extends State<BuildMyPatientListList> {
       },
       itemCount: widget.patientAccesses.length,
       itemBuilder: (context, index) {
-        return displayMyPatientTile(index);
+        return displayMyPatientTile(index, screenWidth);
       },
     );
   }

Frontend/lib/mih_packages/patient_profile/pat_manager/package_tools/waiting_room.dart

@@ -1,16 +1,18 @@
 import 'package:flutter_speed_dial/flutter_speed_dial.dart';
 import 'package:mzansi_innovation_hub/main.dart';
+import 'package:mzansi_innovation_hub/mih_apis/mih_alert_services.dart';
 import 'package:mzansi_innovation_hub/mih_apis/mih_mzansi_calendar_apis.dart';
+import 'package:mzansi_innovation_hub/mih_apis/mih_validation_services.dart';
 import 'package:mzansi_innovation_hub/mih_components/mih_calendar.dart';
 import 'package:mzansi_innovation_hub/mih_components/mih_inputs_and_buttons/mih_date_input.dart';
-import 'package:mzansi_innovation_hub/mih_components/mih_inputs_and_buttons/mih_multiline_text_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_inputs_and_buttons/mih_time_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_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_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_package_window.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_loading_circle.dart';
 import 'package:mzansi_innovation_hub/mih_env/env.dart';
@@ -59,9 +61,10 @@ class _WaitingRoomState extends State<WaitingRoom> {
   late Future<List<Appointment>> businessAppointmentResults;
   late Future<List<Appointment>> appointmentResults;
   bool inWaitingRoom = true;
+  final _formKey = GlobalKey<FormState>();
 
   // Business Appointment Tool
-  Widget getBusinessAppointmentsTool() {
+  Widget getBusinessAppointmentsTool(double width) {
     return Stack(
       children: [
         MihSingleChildScroll(
@@ -137,7 +140,7 @@ class _WaitingRoomState extends State<WaitingRoom> {
                     MzanziInnovationHub.of(context)!.theme.successColor(),
                 onTap: () {
                   // addAppointmentWindow();
-                  appointmentTypeSelection();
+                  appointmentTypeSelection(width);
                 },
               )
             ],
@@ -203,7 +206,7 @@ class _WaitingRoomState extends State<WaitingRoom> {
     );
   }
 
-  void appointmentTypeSelection() {
+  void appointmentTypeSelection(double width) {
     String question = "What type of appointment would you like to add?";
     question +=
         "\n\nExisting Patient: Add an appointment for an patient your practice has access to.";
@@ -274,7 +277,7 @@ class _WaitingRoomState extends State<WaitingRoom> {
               MihButton(
                 onPressed: () {
                   Navigator.pop(context);
-                  addAppointmentWindow();
+                  addAppointmentWindow(width);
                 },
                 buttonColor:
                     MzanziInnovationHub.of(context)!.theme.secondaryColor(),
@@ -296,7 +299,7 @@ class _WaitingRoomState extends State<WaitingRoom> {
     );
   }
 
-  void addAppointmentWindow() {
+  void addAppointmentWindow(double width) {
     showDialog(
       context: context,
       barrierDismissible: false,
@@ -312,16 +315,29 @@ class _WaitingRoomState extends State<WaitingRoom> {
             _appointmentDescriptionIDController.clear();
             _patientController.clear();
           },
-          windowBody: Column(
+          windowBody: Padding(
+            padding:
+                MzanziInnovationHub.of(context)!.theme.screenType == "desktop"
+                    ? EdgeInsets.symmetric(horizontal: width * 0.05)
+                    : const EdgeInsets.symmetric(horizontal: 0),
+            child: Column(
               children: [
-              SizedBox(
+                MihForm(
-                // width: 500,
+                  formKey: _formKey,
-                child: MIHTextField(
+                  formFields: [
+                    MihTextFormField(
+                      fillColor: MzanziInnovationHub.of(context)!
+                          .theme
+                          .secondaryColor(),
+                      inputColor:
+                          MzanziInnovationHub.of(context)!.theme.primaryColor(),
                       controller: _appointmentTitleController,
-                  hintText: "Title",
+                      multiLineInput: false,
-                  editable: true,
+                      requiredText: true,
-                  required: true,
+                      hintText: "Appointment Title",
-                ),
+                      validator: (value) {
+                        return MihValidationServices().isEmpty(value);
+                      },
                     ),
                     const SizedBox(height: 10),
                     SizedBox(
@@ -342,36 +358,52 @@ class _WaitingRoomState extends State<WaitingRoom> {
                       ),
                     ),
                     const SizedBox(height: 10),
-              SizedBox(
+                    MihTextFormField(
-                // width: 500,
                       height: 250,
-                child: MIHMLTextField(
+                      fillColor: MzanziInnovationHub.of(context)!
+                          .theme
+                          .secondaryColor(),
+                      inputColor:
+                          MzanziInnovationHub.of(context)!.theme.primaryColor(),
                       controller: _appointmentDescriptionIDController,
+                      multiLineInput: true,
+                      requiredText: true,
                       hintText: "Description",
-                  editable: true,
+                      validator: (value) {
-                  required: true,
+                        return MihValidationServices().isEmpty(value);
-                ),
+                      },
                     ),
                     const SizedBox(height: 20),
-              MihButton(
+                    Center(
+                      child: MihButton(
                         onPressed: () {
+                          if (_formKey.currentState!.validate()) {
                             addAppointmentCall();
+                          } else {
+                            MihAlertServices().formNotFilledCompletely(context);
+                          }
                         },
-                buttonColor:
+                        buttonColor: MzanziInnovationHub.of(context)!
-                    MzanziInnovationHub.of(context)!.theme.successColor(),
+                            .theme
+                            .successColor(),
                         width: 300,
                         child: Text(
                           "Add",
                           style: TextStyle(
-                    color:
+                            color: MzanziInnovationHub.of(context)!
-                        MzanziInnovationHub.of(context)!.theme.primaryColor(),
+                                .theme
+                                .primaryColor(),
                             fontSize: 20,
                             fontWeight: FontWeight.bold,
                           ),
                         ),
                       ),
+                    ),
                   ],
                 ),
+              ],
+            ),
+          ),
         );
       },
     );
@@ -413,8 +445,7 @@ class _WaitingRoomState extends State<WaitingRoom> {
   }
 
   bool isAppointmentInputValid() {
-    if (_appointmentTitleController.text.isEmpty ||
+    if (_appointmentDescriptionIDController.text.isEmpty ||
-        _appointmentDescriptionIDController.text.isEmpty ||
         _appointmentDateController.text.isEmpty ||
         _appointmentTimeController.text.isEmpty) {
       return false;
@@ -458,9 +489,10 @@ class _WaitingRoomState extends State<WaitingRoom> {
 
   @override
   Widget build(BuildContext context) {
+    double screenWidth = MediaQuery.of(context).size.width;
     return MihPackageToolBody(
       borderOn: false,
-      bodyItem: getBusinessAppointmentsTool(),
+      bodyItem: getBusinessAppointmentsTool(screenWidth),
     );
   }
 }

Frontend/lib/mih_packages/patient_profile/pat_profile/components/Claim_Statement_Window.dart

@@ -1,13 +1,17 @@
+import 'package:flutter/foundation.dart';
 import 'package:flutter/services.dart';
 import 'package:mzansi_innovation_hub/main.dart';
+import 'package:mzansi_innovation_hub/mih_apis/mih_alert_services.dart';
 import 'package:mzansi_innovation_hub/mih_apis/mih_claim_statement_generation_api.dart';
 import 'package:mzansi_innovation_hub/mih_apis/mih_icd10_code_api.dart';
+import 'package:mzansi_innovation_hub/mih_apis/mih_validation_services.dart';
 import 'package:mzansi_innovation_hub/mih_components/mih_inputs_and_buttons/mih_date_input.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_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_package_window.dart';
 import 'package:mzansi_innovation_hub/mih_components/mih_package_components/mih_search_bar.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_objects/app_user.dart';
 import 'package:mzansi_innovation_hub/mih_objects/arguments.dart';
@@ -66,6 +70,7 @@ class _ClaimStatementWindowState extends State<ClaimStatementWindow> {
   final ValueNotifier<String> medAid = ValueNotifier("");
   List<ICD10Code> icd10codeList = [];
   final FocusNode _searchFocusNode = FocusNode();
+  final _formKey = GlobalKey<FormState>();
 
   void icd10SearchWindow(List<ICD10Code> codeList) {
     showDialog(
@@ -78,9 +83,16 @@ class _ClaimStatementWindowState extends State<ClaimStatementWindow> {
     );
   }
 
-  Widget getWindowBody() {
+  Widget getWindowBody(double width) {
-    return Column(
+    return Padding(
+      padding: MzanziInnovationHub.of(context)!.theme.screenType == "desktop"
+          ? EdgeInsets.symmetric(horizontal: width * 0.05)
+          : const EdgeInsets.symmetric(horizontal: 0),
+      child: Column(
         children: [
+          MihForm(
+            formKey: _formKey,
+            formFields: [
               MIHDropdownField(
                 controller: _docTypeController,
                 hintText: "Document Type",
@@ -90,16 +102,21 @@ class _ClaimStatementWindowState extends State<ClaimStatementWindow> {
                 enableSearch: false,
               ),
               const SizedBox(height: 10),
-        Text(
+              Center(
+                child: Text(
                   "Service Details",
                   textAlign: TextAlign.center,
                   style: TextStyle(
-            fontSize: 20,
+                    fontSize: 25,
                     fontWeight: FontWeight.bold,
-            color: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                    color:
+                        MzanziInnovationHub.of(context)!.theme.secondaryColor(),
                   ),
                 ),
-        Divider(color: MzanziInnovationHub.of(context)!.theme.secondaryColor()),
+              ),
+              Divider(
+                  color:
+                      MzanziInnovationHub.of(context)!.theme.secondaryColor()),
               const SizedBox(height: 10),
               MIHDateField(
                 controller: _serviceDateController,
@@ -128,9 +145,10 @@ class _ClaimStatementWindowState extends State<ClaimStatementWindow> {
                     case 'Consultation':
                       returnWidget = Column(
                         children: [
-                    MIHDropdownField(
+                          SizedBox(
+                            child: MIHDropdownField(
                               controller: _serviceDescOptionsController,
-                      hintText: "Service Decription Options",
+                              hintText: "Consultation Type",
                               dropdownOptions: const [
                                 "General Consultation",
                                 "Follow-Up Consultation",
@@ -141,42 +159,64 @@ class _ClaimStatementWindowState extends State<ClaimStatementWindow> {
                               editable: true,
                               enableSearch: false,
                             ),
+                          ),
                           const SizedBox(height: 10),
                         ],
                       );
                     case 'Procedure':
                       returnWidget = Column(
                         children: [
-                    MIHTextField(
+                          MihTextFormField(
+                            fillColor: MzanziInnovationHub.of(context)!
+                                .theme
+                                .secondaryColor(),
+                            inputColor: MzanziInnovationHub.of(context)!
+                                .theme
+                                .primaryColor(),
                             controller: _prcedureNameController,
+                            multiLineInput: false,
+                            requiredText: true,
                             hintText: "Procedure Name",
-                      editable: true,
+                            validator: (value) {
-                      required: true,
+                              return MihValidationServices().isEmpty(value);
+                            },
                           ),
                           const SizedBox(height: 10),
-                    // MIHDateField(
+                          MihTextFormField(
-                    //   controller: _procedureDateController,
+                            fillColor: MzanziInnovationHub.of(context)!
-                    //   lableText: "Procedure Date",
+                                .theme
-                    //   required: true,
+                                .secondaryColor(),
-                    // ),
+                            inputColor: MzanziInnovationHub.of(context)!
-                    // const SizedBox(height: 10),
+                                .theme
-                    MIHTextField(
+                                .primaryColor(),
                             controller: _proceedureAdditionalInfoController,
+                            multiLineInput: false,
+                            requiredText: true,
                             hintText: "Additional Information",
-                      editable: true,
+                            validator: (value) {
-                      required: true,
+                              return MihValidationServices().isEmpty(value);
+                            },
                           ),
-                    const SizedBox(height: 10),
+                          const SizedBox(height: 15),
                         ],
                       );
                     case 'Other':
                       returnWidget = Column(
                         children: [
-                    MIHTextField(
+                          MihTextFormField(
+                            fillColor: MzanziInnovationHub.of(context)!
+                                .theme
+                                .secondaryColor(),
+                            inputColor: MzanziInnovationHub.of(context)!
+                                .theme
+                                .primaryColor(),
                             controller: _serviceDescOptionsController,
-                      hintText: "Service Decription text",
+                            multiLineInput: false,
-                      editable: false,
+                            requiredText: true,
-                      required: true,
+                            hintText: "Service Description Details",
+                            validator: (value) {
+                              return MihValidationServices().isEmpty(value);
+                            },
                           ),
                           const SizedBox(height: 10),
                         ],
@@ -187,15 +227,31 @@ class _ClaimStatementWindowState extends State<ClaimStatementWindow> {
                   return returnWidget;
                 },
               ),
-        //const SizedBox(height: 10),
+              Column(
+                children: [
+                  Align(
+                    alignment: Alignment.centerLeft,
+                    child: Text("ICD-10 Code & Description",
+                        style: TextStyle(
+                          fontSize: 15,
+                          fontWeight: FontWeight.bold,
+                          color: MzanziInnovationHub.of(context)!
+                              .theme
+                              .secondaryColor(),
+                        )),
+                  ),
+                  const SizedBox(height: 4),
                   MihSearchBar(
                     controller: _icd10CodeController,
-          hintText: "ICD-10 Code & Description",
+                    hintText: "ICD-10 Search",
                     prefixIcon: Icons.search,
-          fillColor: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                    fillColor:
-          hintColor: MzanziInnovationHub.of(context)!.theme.primaryColor(),
+                        MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                    hintColor:
+                        MzanziInnovationHub.of(context)!.theme.primaryColor(),
                     onPrefixIconTap: () {
-            MIHIcd10CodeApis.getIcd10Codes(_icd10CodeController.text, context)
+                      MIHIcd10CodeApis.getIcd10Codes(
+                              _icd10CodeController.text, context)
                           .then((result) {
                         icd10SearchWindow(result);
                       });
@@ -205,33 +261,55 @@ class _ClaimStatementWindowState extends State<ClaimStatementWindow> {
                     },
                     searchFocusNode: _searchFocusNode,
                   ),
-        const SizedBox(height: 10),
+                ],
-        MIHTextField(
-          controller: _amountController,
-          hintText: "Amount",
-          editable: true,
-          required: true,
               ),
-        Text(
+              const SizedBox(height: 10),
+              MihTextFormField(
+                fillColor:
+                    MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                inputColor:
+                    MzanziInnovationHub.of(context)!.theme.primaryColor(),
+                controller: _amountController,
+                multiLineInput: false,
+                requiredText: true,
+                numberMode: true,
+                hintText: "Service Cost",
+                validator: (value) {
+                  return MihValidationServices().isEmpty(value);
+                },
+              ),
+              const SizedBox(height: 10),
+              Center(
+                child: Text(
                   "Additional Infomation",
                   textAlign: TextAlign.center,
                   style: TextStyle(
-            fontSize: 20,
+                    fontSize: 25,
                     fontWeight: FontWeight.bold,
-            color: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                    color:
+                        MzanziInnovationHub.of(context)!.theme.secondaryColor(),
                   ),
                 ),
-        Divider(color: MzanziInnovationHub.of(context)!.theme.secondaryColor()),
+              ),
+              Divider(
+                  color:
+                      MzanziInnovationHub.of(context)!.theme.secondaryColor()),
               const SizedBox(height: 10),
-        MIHTextField(
+              MihTextFormField(
+                fillColor:
+                    MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                inputColor:
+                    MzanziInnovationHub.of(context)!.theme.primaryColor(),
                 controller: _preauthNoController,
+                multiLineInput: false,
+                requiredText: false,
                 hintText: "Pre-authorisation No.",
-          editable: true,
-          required: false,
               ),
-        const SizedBox(height: 15),
+              const SizedBox(height: 20),
-        MihButton(
+              Center(
+                child: MihButton(
                   onPressed: () {
+                    if (_formKey.currentState!.validate()) {
                       if (isInputValid()) {
                         MIHClaimStatementGenerationApi().generateClaimStatement(
                             ClaimStatementGenerationArguments(
@@ -275,23 +353,33 @@ class _ClaimStatementWindowState extends State<ClaimStatementWindow> {
                         showDialog(
                           context: context,
                           builder: (context) {
-                  return const MIHErrorMessage(errorType: "Input Error");
+                            return const MIHErrorMessage(
+                                errorType: "Input Error");
                           },
                         );
                       }
+                    } else {
+                      MihAlertServices().formNotFilledCompletely(context);
+                    }
                   },
-          buttonColor: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                  buttonColor:
+                      MzanziInnovationHub.of(context)!.theme.secondaryColor(),
                   width: 300,
                   child: Text(
                     "Generate",
                     style: TextStyle(
-              color: MzanziInnovationHub.of(context)!.theme.primaryColor(),
+                      color:
+                          MzanziInnovationHub.of(context)!.theme.primaryColor(),
                       fontSize: 20,
                       fontWeight: FontWeight.bold,
                     ),
                   ),
                 ),
+              ),
             ],
+          ),
+        ],
+      ),
     );
   }
 
@@ -312,19 +400,6 @@ class _ClaimStatementWindowState extends State<ClaimStatementWindow> {
   }
 
   bool isInputValid() {
-    switch (_serviceDescController.text) {
-      case 'Procedure':
-        if (_docTypeController.text.isEmpty ||
-            _serviceDateController.text.isEmpty ||
-            _icd10CodeController.text.isEmpty ||
-            _amountController.text.isEmpty ||
-            _prcedureNameController.text.isEmpty ||
-            _proceedureAdditionalInfoController.text.isEmpty) {
-          return false;
-        } else {
-          return true;
-        }
-      default:
     if (_docTypeController.text.isEmpty ||
         _serviceDateController.text.isEmpty ||
         _icd10CodeController.text.isEmpty ||
@@ -335,7 +410,6 @@ class _ClaimStatementWindowState extends State<ClaimStatementWindow> {
       return true;
     }
   }
-  }
 
   String getUserTitle() {
     if (widget.businessUser!.title == "Doctor") {
@@ -397,19 +471,14 @@ class _ClaimStatementWindowState extends State<ClaimStatementWindow> {
 
   @override
   Widget build(BuildContext context) {
+    double screenWidth = MediaQuery.of(context).size.width;
     return MihPackageWindow(
       fullscreen: false,
       windowTitle: "Generate Claim/ Statement Document",
       onWindowTapClose: () {
-        // medicineController.clear();
-        // quantityController.clear();
-        // dosageController.clear();
-        // timesDailyController.clear();
-        // noDaysController.clear();
-        // noRepeatsController.clear();
         Navigator.pop(context);
       },
-      windowBody: getWindowBody(),
+      windowBody: getWindowBody(screenWidth),
     );
   }
 }

Frontend/lib/mih_packages/patient_profile/pat_profile/components/icd10_search_window.dart

@@ -1,5 +1,7 @@
-import 'package:mzansi_innovation_hub/mih_components/mih_inputs_and_buttons/mih_text_input.dart';
+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_package_components/mih_package_window.dart';
+import 'package:mzansi_innovation_hub/mih_components/mih_package_components/mih_text_form_field.dart';
 import 'package:mzansi_innovation_hub/mih_objects/icd10_code.dart.dart';
 import 'package:mzansi_innovation_hub/mih_packages/patient_profile/pat_profile/list_builders/build_icd10_code_list.dart';
 import 'package:flutter/material.dart';
@@ -21,12 +23,28 @@ class _ICD10SearchWindowState extends State<ICD10SearchWindow> {
   Widget getWindowBody() {
     return Column(
       children: [
-        MIHTextField(
+        MihTextFormField(
+          fillColor: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+          inputColor: MzanziInnovationHub.of(context)!.theme.primaryColor(),
           controller: widget.icd10CodeController,
-          hintText: "Search Text",
+          multiLineInput: false,
-          editable: false,
+          requiredText: true,
-          required: false,
+          numberMode: true,
+          hintText: "ICD-10 Code Searched",
+          validator: (value) {
+            return MihValidationServices().isEmpty(value);
+          },
         ),
+        const SizedBox(height: 15),
+        Text(
+          "Search for ICD-10 Codes",
+          style: TextStyle(
+            color: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+            fontSize: 25,
+            fontWeight: FontWeight.bold,
+          ),
+        ),
+        Divider(color: MzanziInnovationHub.of(context)!.theme.secondaryColor()),
         BuildICD10CodeList(
           icd10CodeController: widget.icd10CodeController,
           icd10codeList: widget.icd10codeList,

Frontend/lib/mih_packages/patient_profile/pat_profile/list_builders/build_notes_list.dart

@@ -2,9 +2,8 @@ import 'dart:convert';
 
 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_multiline_text_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_package_components/mih_package_window.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_delete_message.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';
@@ -148,7 +147,7 @@ class _BuildNotesListState extends State<BuildNotesList> {
                     color:
                         MzanziInnovationHub.of(context)!.theme.primaryColor(),
                   ),
-                  label: "Delete Document",
+                  label: "Delete Note",
                   labelBackgroundColor:
                       MzanziInnovationHub.of(context)!.theme.successColor(),
                   labelStyle: TextStyle(
@@ -170,43 +169,62 @@ class _BuildNotesListState extends State<BuildNotesList> {
         windowBody: Column(
           children: [
             const SizedBox(height: 10.0),
-            MIHTextField(
+            MihTextFormField(
+              fillColor:
+                  MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+              inputColor: MzanziInnovationHub.of(context)!.theme.primaryColor(),
               controller: businessNameController,
+              multiLineInput: false,
+              requiredText: true,
+              readOnly: true,
               hintText: "Office",
-              editable: false,
-              required: false,
             ),
             const SizedBox(height: 10.0),
-            MIHTextField(
+            MihTextFormField(
+              fillColor:
+                  MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+              inputColor: MzanziInnovationHub.of(context)!.theme.primaryColor(),
               controller: userNameController,
+              multiLineInput: false,
+              requiredText: true,
+              readOnly: true,
               hintText: "Created By",
-              editable: false,
-              required: false,
             ),
             const SizedBox(height: 10.0),
-            MIHTextField(
+            MihTextFormField(
+              fillColor:
+                  MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+              inputColor: MzanziInnovationHub.of(context)!.theme.primaryColor(),
               controller: dateController,
+              multiLineInput: false,
+              requiredText: true,
+              readOnly: true,
               hintText: "Created Date",
-              editable: false,
-              required: false,
             ),
             const SizedBox(height: 10.0),
-            MIHTextField(
+            MihTextFormField(
+              fillColor:
+                  MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+              inputColor: MzanziInnovationHub.of(context)!.theme.primaryColor(),
               controller: noteTitleController,
+              multiLineInput: false,
+              requiredText: true,
+              readOnly: true,
               hintText: "Note Title",
-              editable: false,
-              required: false,
             ),
             const SizedBox(height: 10.0),
-            SizedBox(
+            MihTextFormField(
               height: 250,
-              child: MIHMLTextField(
+              fillColor:
+                  MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+              inputColor: MzanziInnovationHub.of(context)!.theme.primaryColor(),
               controller: noteTextController,
+              multiLineInput: true,
+              requiredText: true,
+              readOnly: true,
               hintText: "Note Details",
-                editable: false,
-                required: false,
-              ),
             ),
+            const SizedBox(height: 10.0),
           ],
         ),
       ),

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

@@ -1,13 +1,15 @@
 import 'dart:convert';
 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_multiline_text_input.dart';
+import 'package:mzansi_innovation_hub/mih_apis/mih_alert_services.dart';
-import 'package:mzansi_innovation_hub/mih_components/mih_inputs_and_buttons/mih_text_input.dart';
+import 'package:mzansi_innovation_hub/mih_apis/mih_validation_services.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_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_package_window.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_loading_circle.dart';
 import 'package:mzansi_innovation_hub/mih_components/mih_pop_up_messages/mih_success_message.dart';
@@ -51,6 +53,7 @@ class _PatientConsultationState extends State<PatientConsultation> {
   final doctorController = TextEditingController();
   final ValueNotifier<int> _counter = ValueNotifier<int>(0);
   String endpoint = "${AppEnviroment.baseApiUrl}/notes/patients/";
+  final _formKey = GlobalKey<FormState>();
 
   Future<List<Note>> fetchNotes(String endpoint) async {
     final response = await http.get(Uri.parse(
@@ -67,7 +70,7 @@ class _PatientConsultationState extends State<PatientConsultation> {
     }
   }
 
-  void addNotePopUp() {
+  void addNotePopUp(double width) {
     DateTime now = new DateTime.now();
     DateTime date = new DateTime(now.year, now.month, now.day);
     var title = "";
@@ -92,50 +95,85 @@ class _PatientConsultationState extends State<PatientConsultation> {
           titleController.clear();
           noteTextController.clear();
         },
-        windowBody: Column(
+        windowBody: Padding(
+          padding:
+              MzanziInnovationHub.of(context)!.theme.screenType == "desktop"
+                  ? EdgeInsets.symmetric(horizontal: width * 0.05)
+                  : const EdgeInsets.symmetric(horizontal: 0),
+          child: Column(
             children: [
-            MIHTextField(
+              MihForm(
+                formKey: _formKey,
+                formFields: [
+                  MihTextFormField(
+                    fillColor:
+                        MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                    inputColor:
+                        MzanziInnovationHub.of(context)!.theme.primaryColor(),
                     controller: officeController,
+                    multiLineInput: false,
+                    requiredText: true,
+                    readOnly: true,
                     hintText: "Office",
-              editable: false,
-              required: true,
                   ),
                   const SizedBox(height: 10.0),
-            MIHTextField(
+                  MihTextFormField(
+                    fillColor:
+                        MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                    inputColor:
+                        MzanziInnovationHub.of(context)!.theme.primaryColor(),
                     controller: doctorController,
+                    multiLineInput: false,
+                    requiredText: true,
+                    readOnly: true,
                     hintText: "Created By",
-              editable: false,
-              required: true,
                   ),
                   const SizedBox(height: 10.0),
-            MIHTextField(
+                  MihTextFormField(
+                    fillColor:
+                        MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                    inputColor:
+                        MzanziInnovationHub.of(context)!.theme.primaryColor(),
                     controller: dateController,
+                    multiLineInput: false,
+                    requiredText: true,
+                    readOnly: true,
                     hintText: "Created Date",
-              editable: false,
-              required: true,
                   ),
                   const SizedBox(height: 10.0),
-            MIHTextField(
+                  MihTextFormField(
+                    fillColor:
+                        MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                    inputColor:
+                        MzanziInnovationHub.of(context)!.theme.primaryColor(),
                     controller: titleController,
+                    multiLineInput: false,
+                    requiredText: true,
                     hintText: "Note Title",
-              editable: true,
+                    validator: (value) {
-              required: true,
+                      return MihValidationServices().isEmpty(value);
+                    },
                   ),
                   const SizedBox(height: 10.0),
-            SizedBox(
+                  MihTextFormField(
-              //width: 700,
                     height: 250,
-              child: MIHMLTextField(
+                    fillColor:
+                        MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                    inputColor:
+                        MzanziInnovationHub.of(context)!.theme.primaryColor(),
                     controller: noteTextController,
+                    multiLineInput: true,
+                    requiredText: true,
                     hintText: "Note Details",
-                editable: true,
+                    validator: (value) {
-                required: true,
+                      return MihValidationServices().validateLength(value, 512);
-              ),
+                    },
                   ),
                   SizedBox(
                     height: 15,
                     child: ValueListenableBuilder(
-                builder: (BuildContext context, int value, Widget? child) {
+                      builder:
+                          (BuildContext context, int value, Widget? child) {
                         return Row(
                           mainAxisSize: MainAxisSize.max,
                           mainAxisAlignment: MainAxisAlignment.end,
@@ -144,6 +182,7 @@ class _PatientConsultationState extends State<PatientConsultation> {
                               "$value",
                               style: TextStyle(
                                 color: getNoteDetailLimitColor(),
+                                fontWeight: FontWeight.bold,
                               ),
                             ),
                             const SizedBox(width: 5),
@@ -151,6 +190,7 @@ class _PatientConsultationState extends State<PatientConsultation> {
                               "/512",
                               style: TextStyle(
                                 color: getNoteDetailLimitColor(),
+                                fontWeight: FontWeight.bold,
                               ),
                             ),
                           ],
@@ -162,16 +202,11 @@ class _PatientConsultationState extends State<PatientConsultation> {
                   const SizedBox(height: 15.0),
                   MihButton(
                     onPressed: () {
-                if (isFieldsFilled()) {
+                      if (_formKey.currentState!.validate()) {
                         addPatientNoteAPICall();
                         Navigator.pop(context);
                       } else {
-                  showDialog(
+                        MihAlertServices().formNotFilledCompletely(context);
-                    context: context,
-                    builder: (context) {
-                      return const MIHErrorMessage(errorType: "Input Error");
-                    },
-                  );
                       }
                     },
                     buttonColor:
@@ -180,7 +215,9 @@ class _PatientConsultationState extends State<PatientConsultation> {
                     child: Text(
                       "Add Note",
                       style: TextStyle(
-                  color: MzanziInnovationHub.of(context)!.theme.primaryColor(),
+                        color: MzanziInnovationHub.of(context)!
+                            .theme
+                            .primaryColor(),
                         fontSize: 20,
                         fontWeight: FontWeight.bold,
                       ),
@@ -188,6 +225,9 @@ class _PatientConsultationState extends State<PatientConsultation> {
                   ),
                 ],
               ),
+            ],
+          ),
+        ),
       ),
     );
   }
@@ -242,40 +282,6 @@ class _PatientConsultationState extends State<PatientConsultation> {
     }
   }
 
-  List<Widget> setIcons() {
-    if (widget.type == "personal") {
-      return [
-        Text(
-          "Consultation Notes",
-          textAlign: TextAlign.center,
-          style: TextStyle(
-              fontSize: 25,
-              fontWeight: FontWeight.bold,
-              color: MzanziInnovationHub.of(context)!.theme.secondaryColor()),
-        ),
-      ];
-    } else {
-      return [
-        Text(
-          "Consultation Notes",
-          textAlign: TextAlign.center,
-          style: TextStyle(
-              fontSize: 25,
-              fontWeight: FontWeight.bold,
-              color: MzanziInnovationHub.of(context)!.theme.secondaryColor()),
-        ),
-        IconButton(
-          onPressed: () {
-            // addConsultationNotePopUp();
-            addNotePopUp();
-          },
-          icon: Icon(Icons.add,
-              color: MzanziInnovationHub.of(context)!.theme.secondaryColor()),
-        )
-      ];
-    }
-  }
-
   void successPopUp(String message) {
     showDialog(
       context: context,
@@ -320,13 +326,14 @@ class _PatientConsultationState extends State<PatientConsultation> {
 
   @override
   Widget build(BuildContext context) {
+    double screenWidth = MediaQuery.of(context).size.width;
     return MihPackageToolBody(
       borderOn: false,
-      bodyItem: getBody(),
+      bodyItem: getBody(screenWidth),
     );
   }
 
-  Widget getBody() {
+  Widget getBody(double width) {
     return Stack(
       children: [
         MihSingleChildScroll(
@@ -384,7 +391,7 @@ class _PatientConsultationState extends State<PatientConsultation> {
                       MzanziInnovationHub.of(context)!.theme.successColor(),
                   onTap: () {
                     // addConsultationNotePopUp();
-                    addNotePopUp();
+                    addNotePopUp(width);
                   },
                 )
               ],

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,76 +38,126 @@ class _PatientInfoState extends State<PatientInfo> {
   final medAidController = TextEditingController();
   final medMainMemController = TextEditingController();
   final medAidCodeController = TextEditingController();
-  double textFieldWidth = 400.0;
+  final _formKey = GlobalKey<FormState>();
+  double textFieldWidth = 500;
   late String medAid;
 
   Widget getPatientDetailsField() {
-    return Wrap(
+    return Center(
+      child: Wrap(
         spacing: 15,
         runSpacing: 10,
         children: [
           SizedBox(
             width: textFieldWidth,
-          child: MIHTextField(
+            child: MihTextFormField(
+              // width: textFieldWidth,
+              fillColor:
+                  MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+              inputColor: MzanziInnovationHub.of(context)!.theme.primaryColor(),
               controller: idController,
+              multiLineInput: false,
+              requiredText: true,
+              readOnly: true,
               hintText: "ID No.",
-              editable: false,
+              // validator: (value) {
-              required: false),
+              //   return MihValidationServices().isEmpty(value);
+              // },
+            ),
           ),
           SizedBox(
             width: textFieldWidth,
-          child: MIHTextField(
+            child: MihTextFormField(
+              // width: textFieldWidth,
+              fillColor:
+                  MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+              inputColor: MzanziInnovationHub.of(context)!.theme.primaryColor(),
               controller: fnameController,
-              hintText: "Name",
+              multiLineInput: false,
-              editable: false,
+              requiredText: true,
-              required: false),
+              readOnly: true,
+              hintText: "First Name",
+            ),
           ),
           SizedBox(
             width: textFieldWidth,
-          child: MIHTextField(
+            child: MihTextFormField(
+              // width: textFieldWidth,
+              fillColor:
+                  MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+              inputColor: MzanziInnovationHub.of(context)!.theme.primaryColor(),
               controller: lnameController,
+              multiLineInput: false,
+              requiredText: true,
               hintText: "Surname",
-              editable: false,
+              readOnly: true,
-              required: false),
+            ),
           ),
           SizedBox(
             width: textFieldWidth,
-          child: MIHTextField(
+            child: MihTextFormField(
+              // width: textFieldWidth,
+              fillColor:
+                  MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+              inputColor: MzanziInnovationHub.of(context)!.theme.primaryColor(),
               controller: cellController,
+              multiLineInput: false,
+              requiredText: true,
+              readOnly: true,
               hintText: "Cell No.",
-              editable: false,
+            ),
-              required: false),
           ),
           SizedBox(
             width: textFieldWidth,
-          child: MIHTextField(
+            child: MihTextFormField(
+              // width: textFieldWidth,
+              fillColor:
+                  MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+              inputColor: MzanziInnovationHub.of(context)!.theme.primaryColor(),
               controller: emailController,
+              multiLineInput: false,
+              requiredText: true,
+              readOnly: true,
               hintText: "Email",
-              editable: false,
+            ),
-              required: false),
           ),
           SizedBox(
             width: textFieldWidth,
-          child: MIHTextField(
+            child: MihTextFormField(
+              // width: textFieldWidth,
+              height: 100,
+              fillColor:
+                  MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+              inputColor: MzanziInnovationHub.of(context)!.theme.primaryColor(),
               controller: addressController,
+              multiLineInput: true,
+              requiredText: true,
+              readOnly: true,
               hintText: "Address",
-              editable: false,
+            ),
-              required: false),
           ),
         ],
+      ),
     );
   }
 
   Widget getMedAidDetailsFields() {
     List<Widget> medAidDet = [];
-    medAidDet.add(SizedBox(
+    medAidDet.add(
+      SizedBox(
         width: textFieldWidth,
-      child: MIHTextField(
+        child: MihTextFormField(
+          // width: textFieldWidth,
+          fillColor: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+          inputColor: MzanziInnovationHub.of(context)!.theme.primaryColor(),
           controller: medAidController,
+          multiLineInput: false,
+          requiredText: true,
+          readOnly: true,
           hintText: "Medical Aid",
-          editable: false,
+        ),
-          required: false),
+      ),
-    ));
+    );
     bool req;
     if (medAid == "Yes") {
       req = true;
@@ -118,67 +169,88 @@ class _PatientInfoState extends State<PatientInfo> {
         visible: req,
         child: SizedBox(
           width: textFieldWidth,
-          child: MIHTextField(
+          child: MihTextFormField(
+            // width: textFieldWidth,
+            fillColor: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+            inputColor: MzanziInnovationHub.of(context)!.theme.primaryColor(),
             controller: medMainMemController,
+            multiLineInput: false,
+            requiredText: true,
+            readOnly: true,
             hintText: "Main Member",
-              editable: false,
-              required: false),
           ),
         ),
-      //const SizedBox(height: 10.0),
+      ),
       Visibility(
         visible: req,
         child: SizedBox(
           width: textFieldWidth,
-          child: MIHTextField(
+          child: MihTextFormField(
+            // width: textFieldWidth,
+            fillColor: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+            inputColor: MzanziInnovationHub.of(context)!.theme.primaryColor(),
             controller: medNoController,
+            multiLineInput: false,
+            requiredText: true,
+            readOnly: true,
             hintText: "No.",
-              editable: false,
-              required: false),
           ),
         ),
-      //const SizedBox(height: 10.0),
+      ),
       Visibility(
         visible: req,
         child: SizedBox(
           width: textFieldWidth,
-          child: MIHTextField(
+          child: MihTextFormField(
+            // width: textFieldWidth,
+            fillColor: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+            inputColor: MzanziInnovationHub.of(context)!.theme.primaryColor(),
             controller: medAidCodeController,
+            multiLineInput: false,
+            requiredText: true,
+            readOnly: true,
             hintText: "Code",
-              editable: false,
-              required: false),
           ),
         ),
-      //const SizedBox(height: 10.0),
+      ),
       Visibility(
         visible: req,
         child: SizedBox(
-          width: textFieldWidth,
+          child: MihTextFormField(
-          child: MIHTextField(
+            // width: textFieldWidth,
+            fillColor: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+            inputColor: MzanziInnovationHub.of(context)!.theme.primaryColor(),
             controller: medNameController,
+            multiLineInput: false,
+            requiredText: true,
+            readOnly: true,
             hintText: "Name",
-              editable: false,
-              required: false),
           ),
         ),
-      //const SizedBox(height: 10.0),
+      ),
       Visibility(
         visible: req,
         child: SizedBox(
           width: textFieldWidth,
-          child: MIHTextField(
+          child: MihTextFormField(
+            // width: textFieldWidth,
+            fillColor: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+            inputColor: MzanziInnovationHub.of(context)!.theme.primaryColor(),
             controller: medSchemeController,
+            multiLineInput: false,
+            requiredText: true,
+            readOnly: true,
             hintText: "Plan",
-              editable: false,
-              required: false),
           ),
         ),
-      //),
+      ),
     ]);
-    return Wrap(
+    return Center(
+      child: Wrap(
         spacing: 10,
         runSpacing: 10,
         children: medAidDet,
+      ),
     );
   }
 
@@ -232,25 +304,30 @@ class _PatientInfoState extends State<PatientInfo> {
 
   @override
   Widget build(BuildContext context) {
+    double screenWidth = MediaQuery.of(context).size.width;
     return MihPackageToolBody(
       borderOn: false,
       innerHorizontalPadding: 10,
-      bodyItem: getBody(),
+      bodyItem: getBody(screenWidth),
     );
   }
 
-  Widget getBody() {
+  Widget getBody(double width) {
     return Stack(
       children: [
         MihSingleChildScroll(
           child: Column(
+            mainAxisAlignment: MainAxisAlignment.center,
             children: [
+              MihForm(
+                formKey: _formKey,
+                formFields: [
                   Row(
                       mainAxisAlignment: MainAxisAlignment.center,
                       //crossAxisAlignment: ,
                       children: [
                         Text(
-                      "Personal Details",
+                          "Personal",
                           textAlign: TextAlign.center,
                           style: TextStyle(
                             fontSize: 25,
@@ -261,26 +338,36 @@ class _PatientInfoState extends State<PatientInfo> {
                           ),
                         ),
                       ]),
+                  Divider(
+                      color: MzanziInnovationHub.of(context)!
+                          .theme
+                          .secondaryColor()),
                   const SizedBox(height: 10),
                   getPatientDetailsField(),
                   const SizedBox(height: 10),
-              Text(
+                  Center(
-                "Medical Aid Details",
+                    child: Text(
+                      "Medical Aid",
                       textAlign: TextAlign.center,
                       style: TextStyle(
                         fontSize: 25,
                         fontWeight: FontWeight.bold,
-                  color:
+                        color: MzanziInnovationHub.of(context)!
-                      MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                            .theme
+                            .secondaryColor(),
+                      ),
                     ),
                   ),
                   Divider(
-                  color:
+                      color: MzanziInnovationHub.of(context)!
-                      MzanziInnovationHub.of(context)!.theme.secondaryColor()),
+                          .theme
+                          .secondaryColor()),
                   const SizedBox(height: 10),
                   getMedAidDetailsFields(),
                 ],
               ),
+            ],
+          ),
         ),
         Visibility(
           visible: widget.type == "personal",

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

@@ -1,14 +1,16 @@
 import 'dart:convert';
 
 import 'package:mzansi_innovation_hub/main.dart';
+import 'package:mzansi_innovation_hub/mih_apis/mih_alert_services.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 +51,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) {
@@ -158,85 +161,148 @@ class _AddPatientState extends State<AddPatient> {
     }
   }
 
-  Widget displayForm() {
+  Widget displayForm(double width) {
-    return MihSingleChildScroll(
+    return SingleChildScrollView(
+      child: Padding(
+        padding: MzanziInnovationHub.of(context)!.theme.screenType == "desktop"
+            ? EdgeInsets.symmetric(horizontal: width * 0.2)
+            : EdgeInsets.symmetric(horizontal: width * 0.075),
         child: Column(
+          children: [
+            MihForm(
+              formKey: _formKey,
+              formFields: [
+                Row(
+                  mainAxisAlignment: MainAxisAlignment.center,
                   children: [
                     Text(
-            "Personal Details",
+                      "Personal",
                       textAlign: TextAlign.center,
                       style: TextStyle(
                         fontWeight: FontWeight.bold,
-              fontSize: 22.0,
+                        fontSize: 25.0,
-              color: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                        color: MzanziInnovationHub.of(context)!
+                            .theme
+                            .secondaryColor(),
                       ),
                     ),
+                  ],
+                ),
                 Divider(
-              color: MzanziInnovationHub.of(context)!.theme.secondaryColor()),
+                    color: MzanziInnovationHub.of(context)!
+                        .theme
+                        .secondaryColor()),
                 const SizedBox(height: 10.0),
-          MIHTextField(
+                MihTextFormField(
+                  fillColor:
+                      MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                  inputColor:
+                      MzanziInnovationHub.of(context)!.theme.primaryColor(),
                   controller: idController,
-            hintText: "13 digit ID Number or Passport",
+                  multiLineInput: false,
-            editable: true,
+                  requiredText: true,
-            required: true,
+                  hintText: "ID No.",
+                  validator: (value) {
+                    return MihValidationServices().isEmpty(value);
+                  },
                 ),
                 const SizedBox(height: 10.0),
-          MIHTextField(
+                MihTextFormField(
+                  fillColor:
+                      MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                  inputColor:
+                      MzanziInnovationHub.of(context)!.theme.primaryColor(),
                   controller: fnameController,
+                  multiLineInput: false,
+                  requiredText: true,
                   hintText: "First Name",
-            editable: false,
+                  validator: (value) {
-            required: true,
+                    return MihValidationServices().isEmpty(value);
+                  },
                 ),
                 const SizedBox(height: 10.0),
-          MIHTextField(
+                MihTextFormField(
+                  fillColor:
+                      MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                  inputColor:
+                      MzanziInnovationHub.of(context)!.theme.primaryColor(),
                   controller: lnameController,
-            hintText: "Last Name",
+                  multiLineInput: false,
-            editable: false,
+                  requiredText: true,
-            required: true,
+                  hintText: "Surname",
+                  validator: (value) {
+                    return MihValidationServices().isEmpty(value);
+                  },
                 ),
                 const SizedBox(height: 10.0),
-          MIHTextField(
+                MihTextFormField(
+                  fillColor:
+                      MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                  inputColor:
+                      MzanziInnovationHub.of(context)!.theme.primaryColor(),
                   controller: cellController,
-            hintText: "Cell Number",
+                  multiLineInput: false,
-            editable: true,
+                  requiredText: true,
-            required: true,
+                  hintText: "Cell No.",
+                  validator: (value) {
+                    return MihValidationServices().isEmpty(value);
+                  },
                 ),
                 const SizedBox(height: 10.0),
-          MIHTextField(
+                MihTextFormField(
+                  fillColor:
+                      MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                  inputColor:
+                      MzanziInnovationHub.of(context)!.theme.primaryColor(),
                   controller: emailController,
+                  multiLineInput: false,
+                  requiredText: true,
+                  readOnly: true,
                   hintText: "Email",
-            editable: false,
+                  validator: (value) {
-            required: true,
+                    return MihValidationServices().validateEmail(value);
+                  },
                 ),
                 const SizedBox(height: 10.0),
-          MIHTextField(
+                MihTextFormField(
+                  height: 100,
+                  fillColor:
+                      MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                  inputColor:
+                      MzanziInnovationHub.of(context)!.theme.primaryColor(),
                   controller: addressController,
+                  multiLineInput: true,
+                  requiredText: true,
                   hintText: "Address",
-            editable: true,
+                  validator: (value) {
-            required: true,
+                    return MihValidationServices().isEmpty(value);
+                  },
                 ),
                 const SizedBox(height: 15.0),
-          Text(
+                Center(
+                  child: Text(
                     "Medical Aid Details",
                     textAlign: TextAlign.center,
                     style: TextStyle(
                       fontWeight: FontWeight.bold,
-              fontSize: 22.0,
+                      fontSize: 25.0,
-              color: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                      color: MzanziInnovationHub.of(context)!
+                          .theme
+                          .secondaryColor(),
+                    ),
                   ),
                 ),
                 Divider(
-              color: MzanziInnovationHub.of(context)!.theme.secondaryColor()),
+                    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,
+                  enableSearch: false,
                   dropdownOptions: const ["Yes", "No"],
                 ),
                 ValueListenableBuilder(
@@ -256,42 +322,100 @@ class _AddPatientState extends State<AddPatient> {
                             dropdownOptions: const ["Yes", "No"],
                           ),
                           const SizedBox(height: 10.0),
-                    MIHTextField(
+                          MihTextFormField(
+                            fillColor: MzanziInnovationHub.of(context)!
+                                .theme
+                                .secondaryColor(),
+                            inputColor: MzanziInnovationHub.of(context)!
+                                .theme
+                                .primaryColor(),
                             controller: medNoController,
-                      hintText: "Medical Aid No.",
+                            multiLineInput: false,
-                      editable: value,
+                            requiredText: true,
-                      required: value,
+                            hintText: "No.",
+                            validator: (validationValue) {
+                              if (value) {
+                                return MihValidationServices()
+                                    .isEmpty(validationValue);
+                              }
+                              return null;
+                            },
                           ),
                           const SizedBox(height: 10.0),
-                    MIHTextField(
+                          MihTextFormField(
+                            fillColor: MzanziInnovationHub.of(context)!
+                                .theme
+                                .secondaryColor(),
+                            inputColor: MzanziInnovationHub.of(context)!
+                                .theme
+                                .primaryColor(),
                             controller: medAidCodeController,
-                      hintText: "Medical Aid Code",
+                            multiLineInput: false,
-                      editable: value,
+                            requiredText: true,
-                      required: value,
+                            hintText: "Code",
+                            validator: (validationValue) {
+                              if (value) {
+                                return MihValidationServices()
+                                    .isEmpty(validationValue);
+                              }
+                              return null;
+                            },
                           ),
                           const SizedBox(height: 10.0),
-                    MIHTextField(
+                          MihTextFormField(
+                            fillColor: MzanziInnovationHub.of(context)!
+                                .theme
+                                .secondaryColor(),
+                            inputColor: MzanziInnovationHub.of(context)!
+                                .theme
+                                .primaryColor(),
                             controller: medNameController,
-                      hintText: "Medical Aid Name",
+                            multiLineInput: false,
-                      editable: value,
+                            requiredText: true,
-                      required: value,
+                            hintText: "Name",
+                            validator: (validationValue) {
+                              if (value) {
+                                return MihValidationServices()
+                                    .isEmpty(validationValue);
+                              }
+                              return null;
+                            },
                           ),
                           const SizedBox(height: 10.0),
-                    MIHTextField(
+                          MihTextFormField(
+                            fillColor: MzanziInnovationHub.of(context)!
+                                .theme
+                                .secondaryColor(),
+                            inputColor: MzanziInnovationHub.of(context)!
+                                .theme
+                                .primaryColor(),
                             controller: medSchemeController,
-                      hintText: "Medical Aid Plan",
+                            multiLineInput: false,
-                      editable: value,
+                            requiredText: true,
-                      required: value,
+                            hintText: "Plan",
+                            validator: (validationValue) {
+                              if (value) {
+                                return MihValidationServices()
+                                    .isEmpty(validationValue);
+                              }
+                              return null;
+                            },
                           ),
+                          const SizedBox(height: 10.0),
                         ],
                       ),
                     );
                   },
                 ),
-          const SizedBox(height: 30.0),
+                const SizedBox(height: 20.0),
-          MihButton(
+                Center(
+                  child: MihButton(
                     onPressed: () {
+                      if (_formKey.currentState!.validate()) {
                         submitForm();
+                      } else {
+                        MihAlertServices().formNotFilledCompletely(context);
+                      }
                     },
                     buttonColor:
                         MzanziInnovationHub.of(context)!.theme.secondaryColor(),
@@ -299,28 +423,26 @@ class _AddPatientState extends State<AddPatient> {
                     child: Text(
                       "Add",
                       style: TextStyle(
-                color: MzanziInnovationHub.of(context)!.theme.primaryColor(),
+                        color: MzanziInnovationHub.of(context)!
+                            .theme
+                            .primaryColor(),
                         fontSize: 20,
                         fontWeight: FontWeight.bold,
                       ),
                     ),
                   ),
+                ),
+                const SizedBox(height: 20.0),
               ],
             ),
+          ],
+        ),
+      ),
     );
   }
 
   void submitForm() {
-    if (isFieldsFilled()) {
     addPatientAPICall();
-    } else {
-      showDialog(
-        context: context,
-        builder: (context) {
-          return const MIHErrorMessage(errorType: "Input Error");
-        },
-      );
-    }
   }
 
   MIHAction getActionButton() {
@@ -348,9 +470,9 @@ class _AddPatientState extends State<AddPatient> {
     );
   }
 
-  MIHBody getBody() {
+  MIHBody getBody(double width) {
     return MIHBody(
-      borderOn: true,
+      borderOn: false,
       bodyItems: [
         KeyboardListener(
           focusNode: _focusNode,
@@ -358,10 +480,14 @@ class _AddPatientState extends State<AddPatient> {
           onKeyEvent: (event) async {
             if (event is KeyDownEvent &&
                 event.logicalKey == LogicalKeyboardKey.enter) {
+              if (_formKey.currentState!.validate()) {
                 submitForm();
+              } else {
+                MihAlertServices().formNotFilledCompletely(context);
+              }
             }
           },
-          child: displayForm(),
+          child: displayForm(width),
         ),
       ],
     );
@@ -401,12 +527,12 @@ class _AddPatientState extends State<AddPatient> {
 
   @override
   Widget build(BuildContext context) {
-    print("Add Patient");
+    double screenWidth = MediaQuery.of(context).size.width;
     return MIHLayoutBuilder(
       actionButton: getActionButton(),
       header: getHeader(),
       secondaryActionButton: null,
-      body: getBody(),
+      body: getBody(screenWidth),
       actionDrawer: null,
       secondaryActionDrawer: null,
       bottomNavBar: null,

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

@@ -1,13 +1,16 @@
 import 'dart:convert';
 
 import 'package:mzansi_innovation_hub/main.dart';
+import 'package:mzansi_innovation_hub/mih_apis/mih_alert_services.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 +52,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;
@@ -371,104 +375,145 @@ class _EditPatientState extends State<EditPatient> {
     }
   }
 
-  Widget displayForm() {
+  Widget displayForm(double width) {
     return SingleChildScrollView(
+      child: Padding(
+        padding: MzanziInnovationHub.of(context)!.theme.screenType == "desktop"
+            ? EdgeInsets.symmetric(horizontal: width * 0.2)
+            : EdgeInsets.symmetric(horizontal: width * 0.075),
         child: Column(
           children: [
+            MihForm(
+              formKey: _formKey,
+              formFields: [
                 Row(
                   mainAxisAlignment: MainAxisAlignment.center,
                   children: [
                     Text(
-                "Personal Details",
+                      "Personal",
                       textAlign: TextAlign.center,
                       style: TextStyle(
                         fontWeight: FontWeight.bold,
-                  fontSize: 22.0,
+                        fontSize: 25.0,
-                  color:
+                        color: MzanziInnovationHub.of(context)!
-                      MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                            .theme
+                            .secondaryColor(),
                       ),
                     ),
-              // IconButton(
-              //   icon: const Icon(Icons.delete),
-              //   color: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
-              //   //alignment: Alignment.topRight,
-              //   onPressed: () {
-              //     deletePatientPopUp();
-              //   },
-              // ),
                   ],
                 ),
                 Divider(
-              color: MzanziInnovationHub.of(context)!.theme.secondaryColor()),
+                    color: MzanziInnovationHub.of(context)!
+                        .theme
+                        .secondaryColor()),
                 const SizedBox(height: 10.0),
-          MIHTextField(
+                MihTextFormField(
+                  fillColor:
+                      MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                  inputColor:
+                      MzanziInnovationHub.of(context)!.theme.primaryColor(),
                   controller: idController,
-            hintText: "13 digit ID Number or Passport",
+                  multiLineInput: false,
-            editable: false,
+                  requiredText: true,
-            required: true,
+                  hintText: "ID No.",
+                  validator: (value) {
+                    return MihValidationServices().isEmpty(value);
+                  },
                 ),
                 const SizedBox(height: 10.0),
-          MIHTextField(
+                MihTextFormField(
+                  fillColor:
+                      MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                  inputColor:
+                      MzanziInnovationHub.of(context)!.theme.primaryColor(),
                   controller: fnameController,
+                  multiLineInput: false,
+                  requiredText: true,
                   hintText: "First Name",
-            editable: false,
+                  validator: (value) {
-            required: true,
+                    return MihValidationServices().isEmpty(value);
+                  },
                 ),
                 const SizedBox(height: 10.0),
-          MIHTextField(
+                MihTextFormField(
+                  fillColor:
+                      MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                  inputColor:
+                      MzanziInnovationHub.of(context)!.theme.primaryColor(),
                   controller: lnameController,
-            hintText: "Last Name",
+                  multiLineInput: false,
-            editable: false,
+                  requiredText: true,
-            required: true,
+                  hintText: "Surname",
+                  validator: (value) {
+                    return MihValidationServices().isEmpty(value);
+                  },
                 ),
                 const SizedBox(height: 10.0),
-          MIHTextField(
+                MihTextFormField(
+                  fillColor:
+                      MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                  inputColor:
+                      MzanziInnovationHub.of(context)!.theme.primaryColor(),
                   controller: cellController,
-            hintText: "Cell Number",
+                  multiLineInput: false,
-            editable: true,
+                  requiredText: true,
-            required: true,
+                  hintText: "Cell No.",
+                  validator: (value) {
+                    return MihValidationServices().isEmpty(value);
+                  },
                 ),
                 const SizedBox(height: 10.0),
-          MIHTextField(
+                MihTextFormField(
+                  fillColor:
+                      MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                  inputColor:
+                      MzanziInnovationHub.of(context)!.theme.primaryColor(),
                   controller: emailController,
+                  multiLineInput: false,
+                  requiredText: true,
+                  readOnly: true,
                   hintText: "Email",
-            editable: false,
+                  validator: (value) {
-            required: true,
+                    return MihValidationServices().validateEmail(value);
+                  },
                 ),
                 const SizedBox(height: 10.0),
-          MIHTextField(
+                MihTextFormField(
+                  height: 100,
+                  fillColor:
+                      MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                  inputColor:
+                      MzanziInnovationHub.of(context)!.theme.primaryColor(),
                   controller: addressController,
+                  multiLineInput: true,
+                  requiredText: true,
                   hintText: "Address",
-            editable: true,
+                  validator: (value) {
-            required: true,
+                    return MihValidationServices().isEmpty(value);
+                  },
                 ),
                 const SizedBox(height: 15.0),
-          Text(
+                Center(
+                  child: Text(
                     "Medical Aid Details",
                     textAlign: TextAlign.center,
                     style: TextStyle(
                       fontWeight: FontWeight.bold,
-              fontSize: 22.0,
+                      fontSize: 25.0,
-              color: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                      color: MzanziInnovationHub.of(context)!
+                          .theme
+                          .secondaryColor(),
+                    ),
                   ),
                 ),
                 Divider(
-              color: MzanziInnovationHub.of(context)!.theme.secondaryColor()),
+                    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,
@@ -484,49 +529,107 @@ class _EditPatientState extends State<EditPatient> {
                           const SizedBox(height: 10.0),
                           MIHDropdownField(
                             controller: medMainMemController,
-                      hintText: "Main Member.",
+                            hintText: "Main Member",
                             editable: value,
                             required: value,
                             enableSearch: false,
                             dropdownOptions: const ["Yes", "No"],
                           ),
                           const SizedBox(height: 10.0),
-                    MIHTextField(
+                          MihTextFormField(
+                            fillColor: MzanziInnovationHub.of(context)!
+                                .theme
+                                .secondaryColor(),
+                            inputColor: MzanziInnovationHub.of(context)!
+                                .theme
+                                .primaryColor(),
                             controller: medNoController,
-                      hintText: "Medical Aid No.",
+                            multiLineInput: false,
-                      editable: value,
+                            requiredText: true,
-                      required: value,
+                            hintText: "No.",
+                            validator: (validationValue) {
+                              if (value) {
+                                return MihValidationServices()
+                                    .isEmpty(validationValue);
+                              }
+                              return null;
+                            },
                           ),
                           const SizedBox(height: 10.0),
-                    MIHTextField(
+                          MihTextFormField(
+                            fillColor: MzanziInnovationHub.of(context)!
+                                .theme
+                                .secondaryColor(),
+                            inputColor: MzanziInnovationHub.of(context)!
+                                .theme
+                                .primaryColor(),
                             controller: medAidCodeController,
-                      hintText: "Medical Aid Code",
+                            multiLineInput: false,
-                      editable: value,
+                            requiredText: true,
-                      required: value,
+                            hintText: "Code",
+                            validator: (validationValue) {
+                              if (value) {
+                                return MihValidationServices()
+                                    .isEmpty(validationValue);
+                              }
+                              return null;
+                            },
                           ),
                           const SizedBox(height: 10.0),
-                    MIHTextField(
+                          MihTextFormField(
+                            fillColor: MzanziInnovationHub.of(context)!
+                                .theme
+                                .secondaryColor(),
+                            inputColor: MzanziInnovationHub.of(context)!
+                                .theme
+                                .primaryColor(),
                             controller: medNameController,
-                      hintText: "Medical Aid Name",
+                            multiLineInput: false,
-                      editable: value,
+                            requiredText: true,
-                      required: value,
+                            hintText: "Name",
+                            validator: (validationValue) {
+                              if (value) {
+                                return MihValidationServices()
+                                    .isEmpty(validationValue);
+                              }
+                              return null;
+                            },
                           ),
                           const SizedBox(height: 10.0),
-                    MIHTextField(
+                          MihTextFormField(
+                            fillColor: MzanziInnovationHub.of(context)!
+                                .theme
+                                .secondaryColor(),
+                            inputColor: MzanziInnovationHub.of(context)!
+                                .theme
+                                .primaryColor(),
                             controller: medSchemeController,
-                      hintText: "Medical Aid Plan",
+                            multiLineInput: false,
-                      editable: value,
+                            requiredText: true,
-                      required: value,
+                            hintText: "Plan",
+                            validator: (validationValue) {
+                              if (value) {
+                                return MihValidationServices()
+                                    .isEmpty(validationValue);
+                              }
+                              return null;
+                            },
                           ),
+                          const SizedBox(height: 10.0),
                         ],
                       ),
                     );
                   },
                 ),
-          const SizedBox(height: 30.0),
+                const SizedBox(height: 20.0),
-          MihButton(
+                Center(
+                  child: MihButton(
                     onPressed: () {
+                      if (_formKey.currentState!.validate()) {
                         submitForm();
+                      } else {
+                        MihAlertServices().formNotFilledCompletely(context);
+                      }
                     },
                     buttonColor:
                         MzanziInnovationHub.of(context)!.theme.secondaryColor(),
@@ -534,37 +637,26 @@ class _EditPatientState extends State<EditPatient> {
                     child: Text(
                       "Update",
                       style: TextStyle(
-                color: MzanziInnovationHub.of(context)!.theme.primaryColor(),
+                        color: MzanziInnovationHub.of(context)!
+                            .theme
+                            .primaryColor(),
                         fontSize: 20,
                         fontWeight: FontWeight.bold,
                       ),
                     ),
                   ),
+                ),
+                const SizedBox(height: 20.0),
               ],
             ),
+          ],
+        ),
+      ),
     );
   }
 
   void submitForm() {
-    if (isFieldsFilled()) {
-      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() {
@@ -592,9 +684,9 @@ class _EditPatientState extends State<EditPatient> {
     );
   }
 
-  MIHBody getBody() {
+  MIHBody getBody(double width) {
     return MIHBody(
-      borderOn: true,
+      borderOn: false,
       bodyItems: [
         KeyboardListener(
           focusNode: _focusNode,
@@ -602,10 +694,14 @@ class _EditPatientState extends State<EditPatient> {
           onKeyEvent: (event) async {
             if (event is KeyDownEvent &&
                 event.logicalKey == LogicalKeyboardKey.enter) {
+              if (_formKey.currentState!.validate()) {
                 submitForm();
+              } else {
+                MihAlertServices().formNotFilledCompletely(context);
+              }
             }
           },
-          child: displayForm(),
+          child: displayForm(width),
         ),
       ],
     );
@@ -665,61 +761,12 @@ class _EditPatientState extends State<EditPatient> {
       actionButton: getActionButton(),
       header: getHeader(),
       secondaryActionButton: null,
-      body: getBody(),
+      body: getBody(width),
       actionDrawer: null,
       secondaryActionDrawer: null,
       bottomNavBar: null,
       pullDownToRefresh: false,
       onPullDown: () async {},
     );
-    // return Scaffold(
-    //   // appBar: const MIHAppBar(
-    //   //   barTitle: "Edit Patient",
-    //   //   propicFile: null,
-    //   // ),
-    //   body: SafeArea(
-    //     child: Stack(
-    //       children: [
-    //         KeyboardListener(
-    //           focusNode: _focusNode,
-    //           autofocus: true,
-    //           onKeyEvent: (event) async {
-    //             if (event is KeyDownEvent &&
-    //                 event.logicalKey == LogicalKeyboardKey.enter) {
-    //               submitForm();
-    //             }
-    //           },
-    //           child: displayForm(),
-    //         ),
-    //         Positioned(
-    //           top: 10,
-    //           left: 5,
-    //           width: 50,
-    //           height: 50,
-    //           child: IconButton(
-    //             onPressed: () {
-    //               Navigator.of(context).pop();
-    //             },
-    //             icon: const Icon(Icons.arrow_back),
-    //           ),
-    //         ),
-    //         Positioned(
-    //             top: 10,
-    //             right: 5,
-    //             width: 50,
-    //             height: 50,
-    //             child: IconButton(
-    //               icon: const Icon(Icons.delete),
-    //               color:
-    //                   MzanziInnovationHub.of(context)!.theme.secondaryColor(),
-    //               //alignment: Alignment.topRight,
-    //               onPressed: () {
-    //                 deletePatientPopUp();
-    //               },
-    //             ))
-    //       ],
-    //     ),
-    //   ),
-    // );
   }
 }

Frontend/pubspec.yaml

@@ -77,6 +77,7 @@ dependencies:
   share_plus: ^10.1.4
   app_settings: ^6.1.1
   animated_button: ^0.3.1
+  pwa_install: ^0.0.6
 
 dev_dependencies:
   flutter_test:
@@ -84,7 +85,7 @@ dev_dependencies:
     
   build_runner: ^2.4.8
 
-  build_web_compilers: ^3.2.7
+  build_web_compilers: ^4.1.5
   # The "flutter_lints" package below contains a set of recommended lints to
   # encourage good coding practices. The lint set provided by the package is
   # activated in the `analysis_options.yaml` file located at the root of your

Frontend/web/index.html

@@ -1,10 +1,14 @@
-<!DOCTYPE html><html><head>
+<!DOCTYPE html>
+<html>
+
+<head>
   <base href="/">
 
   <!-- APP Description -->
   <meta charset="UTF-8">
   <meta content="IE=Edge" http-equiv="X-UA-Compatible">
-  <meta name="description" content="Digitizing Mzansi one process at a time. Discover essential Mzansi apps to streamline your personal and professional life. Simplify your daily tasks with our user-friendly solutions.">
+  <meta name="description"
+    content="Digitizing Mzansi one process at a time. Discover essential Mzansi apps to streamline your personal and professional life. Simplify your daily tasks with our user-friendly solutions.">
 
   <!-- iOS meta tags & icons -->
   <meta name="mobile-web-app-capable" content="yes">
@@ -29,7 +33,38 @@
   <!-- Splash screen -->
 
 
-  <script src="install_pwa.js" defer=""></script>
+  <!-- <script src="install_pwa.js" defer=""></script> -->
+  <!-- Capture PWA install prompt event -->
+  <script>
+    let deferredPrompt;
+
+    window.addEventListener('beforeinstallprompt', (e) => {
+      deferredPrompt = e;
+    });
+
+    function promptInstall() {
+      deferredPrompt.prompt();
+    }
+
+    // Listen for app install event
+    window.addEventListener('appinstalled', () => {
+      deferredPrompt = null;
+      appInstalled();
+    });
+
+    // Track how PWA was launched (either from browser or as PWA)
+    function getLaunchMode() {
+      const isStandalone = window.matchMedia('(display-mode: standalone)').matches;
+      if (deferredPrompt) hasPrompt();
+      if (document.referrer.startsWith('android-app://')) {
+        appLaunchedAsTWA();
+      } else if (navigator.standalone || isStandalone) {
+        appLaunchedAsPWA();
+      } else {
+        window.appLaunchedInBrowser();
+      }
+    }
+  </script>
   <!-- Splash screen -->
   <!-- <script>
     var dartPdfJsBaseUrl = "https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.2.146/";
@@ -58,18 +93,21 @@
 
     .contain {
       display: block;
-      width:100%; height:100%;
+      width: 100%;
+      height: 100%;
       object-fit: contain;
     }
 
     .stretch {
       display: block;
-      width:100%; height:100%;
+      width: 100%;
+      height: 100%;
     }
 
     .cover {
       display: block;
-      width:100%; height:100%;
+      width: 100%;
+      height: 100%;
       object-fit: cover;
     }
 
@@ -104,13 +142,21 @@
 
 <body>
   <picture id="splash-branding">
-    <source srcset="splash/img/branding-1x.png 1x, splash/img/branding-2x.png 2x, splash/img/branding-3x.png 3x, splash/img/branding-4x.png 4x" media="(prefers-color-scheme: light)">
+    <source
-    <source srcset="splash/img/branding-dark-1x.png 1x, splash/img/branding-dark-2x.png 2x, splash/img/branding-dark-3x.png 3x, splash/img/branding-dark-4x.png 4x" media="(prefers-color-scheme: dark)">
+      srcset="splash/img/branding-1x.png 1x, splash/img/branding-2x.png 2x, splash/img/branding-3x.png 3x, splash/img/branding-4x.png 4x"
+      media="(prefers-color-scheme: light)">
+    <source
+      srcset="splash/img/branding-dark-1x.png 1x, splash/img/branding-dark-2x.png 2x, splash/img/branding-dark-3x.png 3x, splash/img/branding-dark-4x.png 4x"
+      media="(prefers-color-scheme: dark)">
     <img class="bottom" aria-hidden="true" src="splash/img/branding-1x.png" alt="">
   </picture>
   <picture id="splash">
-      <source srcset="splash/img/light-1x.png 1x, splash/img/light-2x.png 2x, splash/img/light-3x.png 3x, splash/img/light-4x.png 4x" media="(prefers-color-scheme: light)">
+    <source
-      <source srcset="splash/img/dark-1x.png 1x, splash/img/dark-2x.png 2x, splash/img/dark-3x.png 3x, splash/img/dark-4x.png 4x" media="(prefers-color-scheme: dark)">
+      srcset="splash/img/light-1x.png 1x, splash/img/light-2x.png 2x, splash/img/light-3x.png 3x, splash/img/light-4x.png 4x"
+      media="(prefers-color-scheme: light)">
+    <source
+      srcset="splash/img/dark-1x.png 1x, splash/img/dark-2x.png 2x, splash/img/dark-3x.png 3x, splash/img/dark-4x.png 4x"
+      media="(prefers-color-scheme: dark)">
     <img class="center" aria-hidden="true" src="splash/img/light-1x.png" alt="">
   </picture>
 
@@ -249,7 +295,10 @@
 
 
   <script id="pdfjs-lib" src="//cdnjs.cloudflare.com/ajax/libs/pdf.js/3.2.146/pdf.min.js" defer=""></script>
-<script id="pdfjs-worker" type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/pdf.js/3.2.146/pdf.worker.min.js" defer=""></script>
+  <script id="pdfjs-worker" type="text/javascript"
+    src="//cdnjs.cloudflare.com/ajax/libs/pdf.js/3.2.146/pdf.worker.min.js" defer=""></script>
   <!--------------------->
 
-</body><!-- File Picker & PDF viewer --></html>
+</body><!-- File Picker & PDF viewer -->
+
+</html>