Enhance Mzansi Profile Look & Feel and workflow

.vscode/launch.json

@@ -11,6 +11,17 @@
             "type": "dart",
             "program": "lib/main_dev.dart"
         },
+        {
+            "name": "Debug (web)",
+            "cwd": "mih_ui",
+            "request": "launch",
+            "type": "dart",
+            "program": "lib/main_dev.dart",
+            "args": [
+                "--web-port",
+                "1995"
+            ]
+        },
         {
             "name": "Profile",
             "cwd": "mih_ui",

mih_api_hub/main.py

@@ -42,6 +42,7 @@ st_api_key = os.getenv("SUPERTOKENS_API_KEY")
 origins = [
     "http://localhost",
     "http://localhost:80",
+    "http://localhost:1995",
     "http://localhost:8080",
     "http://MIH-API-Hub:80",
     "http://MIH-API-Hub",

mih_ui/android/app/src/main/res/values/arrays.xml

@@ -5,5 +5,6 @@
         <item>@drawable/mzansi_wallet_sc</item>
         <item>@drawable/mzansi_ai_sc</item>
         <item>@drawable/mih_calculator_sc</item>
+        <item>@drawable/mzansi_directory_sc</item>
     </array>
 </resources>

mih_ui/lib/mih_config/mih_theme.dart

@@ -9,7 +9,7 @@ class MihTheme {
   late String loadingAssetText;
   late TargetPlatform platform;
   bool kIsWeb = const bool.fromEnvironment('dart.library.js_util');
-  String latestVersion = "1.2.5";
+  String latestVersion = "1.2.6";
   MihTheme() {
     mode = "Dark";
   }

mih_ui/lib/mih_package_components/Example/package_tools/package_tool_one.dart

@@ -161,6 +161,7 @@ class _PackageToolOneState extends State<PackageToolOne> {
     return Stack(
       children: [
         MihSingleChildScroll(
+          scrollbarOn: true,
           child: Padding(
             padding:
                 MzansiInnovationHub.of(context)!.theme.screenType == "desktop"

mih_ui/lib/mih_package_components/Example/package_tools/package_tool_three.dart

@@ -111,6 +111,7 @@ class _PackageToolThreeState extends State<PackageToolThree> {
     return Stack(
       children: [
         MihSingleChildScroll(
+          scrollbarOn: true,
           child: Column(
             mainAxisAlignment: MainAxisAlignment.start,
             children: [

mih_ui/lib/mih_package_components/Example/package_tools/package_tool_two.dart

@@ -24,6 +24,7 @@ class _PackageToolTwoState extends State<PackageToolTwo> {
 
   Widget getBody() {
     return MihSingleChildScroll(
+      scrollbarOn: true,
       child: Column(
         mainAxisAlignment: MainAxisAlignment.start,
         mainAxisSize: MainAxisSize.max,

mih_ui/lib/mih_package_components/Example/package_tools/package_tool_zero.dart

@@ -25,6 +25,7 @@ class _PackageToolZeroState extends State<PackageToolZero> {
 
   Widget getBody() {
     return MihSingleChildScroll(
+      scrollbarOn: true,
       child: Column(
         mainAxisAlignment: MainAxisAlignment.start,
         children: [

mih_ui/lib/mih_package_components/mih_business_info_card_v2.dart

@@ -0,0 +1,679 @@
+import 'package:flutter/material.dart';
+import 'package:go_router/go_router.dart';
+import 'package:mzansi_innovation_hub/main.dart';
+import 'package:mzansi_innovation_hub/mih_objects/bookmarked_business.dart';
+import 'package:mzansi_innovation_hub/mih_objects/business.dart';
+import 'package:mzansi_innovation_hub/mih_objects/business_review.dart';
+import 'package:mzansi_innovation_hub/mih_package_components/mih_button.dart';
+import 'package:mzansi_innovation_hub/mih_package_components/mih_icons.dart';
+import 'package:mzansi_innovation_hub/mih_package_components/mih_package_window.dart';
+import 'package:mzansi_innovation_hub/mih_providers/mzansi_directory_provider.dart';
+import 'package:mzansi_innovation_hub/mih_config/mih_colors.dart';
+import 'package:mzansi_innovation_hub/mih_packages/mzansi_profile/business_profile/components/mih_add_bookmark_alert.dart';
+import 'package:mzansi_innovation_hub/mih_packages/mzansi_profile/business_profile/components/mih_delete_bookmark_alert.dart';
+import 'package:mzansi_innovation_hub/mih_packages/mzansi_profile/business_profile/components/mih_review_business_window.dart';
+import 'package:mzansi_innovation_hub/mih_providers/mzansi_profile_provider.dart';
+import 'package:mzansi_innovation_hub/mih_services/mih_alert_services.dart';
+import 'package:mzansi_innovation_hub/mih_services/mih_business_details_services.dart';
+import 'package:mzansi_innovation_hub/mih_services/mih_file_services.dart';
+import 'package:mzansi_innovation_hub/mih_services/mih_mzansi_directory_services.dart';
+import 'package:provider/provider.dart';
+import 'package:redacted/redacted.dart';
+import 'package:supertokens_flutter/supertokens.dart';
+import 'package:url_launcher/url_launcher.dart';
+
+class MihBusinessCardV2 extends StatefulWidget {
+  final Business business;
+  final double width;
+  const MihBusinessCardV2({
+    super.key,
+    required this.business,
+    required this.width,
+  });
+
+  @override
+  State<MihBusinessCardV2> createState() => _MihBusinessCardV2State();
+}
+
+class _MihBusinessCardV2State extends State<MihBusinessCardV2> {
+  Future<BusinessReview?>? _businessReviewFuture;
+  Future<BookmarkedBusiness?>? _bookmarkedBusinessFuture;
+  bool _isUserSignedIn = false;
+
+  Future<void> _checkUserSession() async {
+    final doesSessionExist = await SuperTokens.doesSessionExist();
+    setState(() {
+      _isUserSignedIn = doesSessionExist;
+    });
+  }
+
+  RedactedConfiguration getRedactedConfiguration() {
+    return RedactedConfiguration(
+      // redactedColor: Colors.pink,
+      redactedColor: MihColors.getPrimaryColor(
+          MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+    );
+  }
+
+  Future<void> _makePhoneCall(String phoneNumber) async {
+    String formattedNumber = phoneNumber.replaceAll("-", "");
+    final Uri url = Uri(scheme: 'tel', path: formattedNumber);
+    if (await canLaunchUrl(url)) {
+      await launchUrl(url);
+    } else {
+      MihAlertServices().errorBasicAlert(
+        "Error Making Call",
+        "We couldn't open your phone app to call $formattedNumber. To fix this, make sure you have a phone application installed and it's set as your default dialer.",
+        context,
+      );
+    }
+  }
+
+  String? _encodeQueryParameters(Map<String, String> params) {
+    return params.entries
+        .map((MapEntry<String, String> e) =>
+            '${Uri.encodeComponent(e.key)}=${Uri.encodeComponent(e.value)}')
+        .join('&');
+  }
+
+  Future<void> _launchEmail(
+      String recipient, String subject, String body) async {
+    final Uri emailLaunchUri = Uri(
+      scheme: 'mailto',
+      path: recipient,
+      query: _encodeQueryParameters(<String, String>{
+        'subject': subject,
+        'body': body,
+      }),
+    );
+
+    if (await canLaunchUrl(emailLaunchUri)) {
+      await launchUrl(emailLaunchUri);
+    } else {
+      MihAlertServices().errorBasicAlert(
+        "Error Creating Email",
+        "We couldn't launch your email app to send a message to $recipient. To fix this, please confirm that you have an email application installed and that it's set as your default.",
+        context,
+      );
+    }
+  }
+
+  Future<void> _launchGoogleMapsWithUrl({
+    required double latitude,
+    required double longitude,
+    String? label,
+  }) async {
+    final Uri googleMapsUrl = Uri.parse(
+      'https://www.google.com/maps/search/?api=1&query=$latitude,$longitude${label != null ? '&query_place_id=' : ''}',
+    );
+    try {
+      if (await canLaunchUrl(googleMapsUrl)) {
+        await launchUrl(googleMapsUrl);
+      } else {
+        MihAlertServices().errorBasicAlert(
+          "Error Opening Maps",
+          "There was an issue opening maps for ${widget.business.Name}. This usually happens if you don't have a maps app installed or it's not set as your default. Please install one to proceed.",
+          context,
+        );
+      }
+    } catch (e) {
+      MihAlertServices().errorBasicAlert(
+        "Error Opening Maps",
+        "There was an issue opening maps for ${widget.business.Name}. This usually happens if you don't have a maps app installed or it's not set as your default. Please install one to proceed.",
+        context,
+      );
+    }
+  }
+
+  Future<void> _launchWebsite(String urlString) async {
+    String newUrl = urlString;
+    if (!newUrl.startsWith("https://")) {
+      newUrl = "https://$urlString";
+    }
+    final Uri url = Uri.parse(newUrl);
+    try {
+      if (await canLaunchUrl(url)) {
+        await launchUrl(url);
+      } else {
+        MihAlertServices().errorBasicAlert(
+          "Error Opening Website",
+          "We couldn't open the link to $newUrl. To view this website, please ensure you have a web browser installed and set as your default.",
+          context,
+        );
+      }
+    } catch (e) {
+      MihAlertServices().errorBasicAlert(
+        "Error Opening Website",
+        "We couldn't open the link to $newUrl. To view this website, please ensure you have a web browser installed and set as your default.",
+        context,
+      );
+    }
+  }
+
+  Future<BusinessReview?> getUserReview() async {
+    String user_id = await SuperTokens.getUserId();
+    return await MihMzansiDirectoryServices().getUserReviewOfBusiness(
+      user_id,
+      widget.business.business_id,
+    );
+  }
+
+  Future<BookmarkedBusiness?> getUserBookmark() async {
+    String user_id = await SuperTokens.getUserId();
+    return await MihMzansiDirectoryServices().getUserBookmarkOfBusiness(
+      user_id,
+      widget.business.business_id,
+    );
+  }
+
+  bool isValidGps(String coordinateString) {
+    final RegExp gpsRegex = RegExp(
+        r"^-?([1-8]?\d(\.\d+)?|90(\.0+)?),\s*-?(1[0-7]\d(\.\d+)?|180(\.0+)?|\d{1,2}(\.\d+)?)$");
+    return gpsRegex.hasMatch(coordinateString);
+  }
+
+  @override
+  void initState() {
+    super.initState();
+    _checkUserSession();
+    _businessReviewFuture = getUserReview();
+    _bookmarkedBusinessFuture = getUserBookmark();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    // double screenWidth = MediaQuery.of(context).size.width;
+    return Consumer2<MzansiProfileProvider, MzansiDirectoryProvider>(
+      builder: (BuildContext context, MzansiProfileProvider profileProvider,
+          MzansiDirectoryProvider directoryProvider, Widget? child) {
+        double iconSize = 33.0;
+        return Wrap(
+          alignment: WrapAlignment.center,
+          runSpacing: 10,
+          spacing: 10,
+          children: [
+            Column(
+              children: [
+                SizedBox(
+                  width: 80,
+                  height: 80,
+                  child: MihButton(
+                    onPressed: () {
+                      _makePhoneCall(widget.business.contact_no);
+                    },
+                    buttonColor: MihColors.getGreenColor(
+                        MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+                    child: Icon(
+                      Icons.phone,
+                      color: MihColors.getPrimaryColor(
+                          MzansiInnovationHub.of(context)!.theme.mode ==
+                              "Dark"),
+                      size: iconSize,
+                    ),
+                  ),
+                ),
+                const SizedBox(height: 2),
+                FittedBox(
+                  child: Text(
+                    "Call",
+                    style: TextStyle(
+                      fontWeight: FontWeight.bold,
+                      color: MihColors.getSecondaryColor(
+                          MzansiInnovationHub.of(context)!.theme.mode ==
+                              "Dark"),
+                      fontSize: 20,
+                    ),
+                  ),
+                ),
+              ],
+            ),
+            Column(
+              children: [
+                SizedBox(
+                  width: 80,
+                  height: 80,
+                  child: MihButton(
+                    onPressed: () {
+                      _launchEmail(
+                        widget.business.bus_email,
+                        "Inquiery about ${widget.business.Name}",
+                        "Dear ${widget.business.Name},\n\nI would like to inquire about your services.\n\nBest regards,\n",
+                      );
+                    },
+                    buttonColor: MihColors.getPinkColor(
+                        MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+                    child: Icon(
+                      Icons.email,
+                      color: MihColors.getPrimaryColor(
+                          MzansiInnovationHub.of(context)!.theme.mode ==
+                              "Dark"),
+                      size: iconSize,
+                    ),
+                  ),
+                ),
+                const SizedBox(height: 2),
+                FittedBox(
+                  child: Text(
+                    "Email",
+                    style: TextStyle(
+                      fontWeight: FontWeight.bold,
+                      color: MihColors.getSecondaryColor(
+                          MzansiInnovationHub.of(context)!.theme.mode ==
+                              "Dark"),
+                      fontSize: 20,
+                    ),
+                  ),
+                ),
+              ],
+            ),
+            if (isValidGps(widget.business.gps_location))
+              Column(
+                children: [
+                  SizedBox(
+                    width: 80,
+                    height: 80,
+                    child: MihButton(
+                      onPressed: () {
+                        final latitude = double.parse(
+                            widget.business.gps_location.split(',')[0]);
+                        final longitude = double.parse(
+                            widget.business.gps_location.split(',')[1]);
+                        _launchGoogleMapsWithUrl(
+                          latitude: latitude,
+                          longitude: longitude,
+                        );
+                      },
+                      buttonColor: MihColors.getOrangeColor(
+                          MzansiInnovationHub.of(context)!.theme.mode ==
+                              "Dark"),
+                      child: Icon(
+                        Icons.location_on,
+                        color: MihColors.getPrimaryColor(
+                            MzansiInnovationHub.of(context)!.theme.mode ==
+                                "Dark"),
+                        size: iconSize,
+                      ),
+                    ),
+                  ),
+                  const SizedBox(height: 2),
+                  FittedBox(
+                    child: Text(
+                      "Maps",
+                      style: TextStyle(
+                        fontWeight: FontWeight.bold,
+                        color: MihColors.getSecondaryColor(
+                            MzansiInnovationHub.of(context)!.theme.mode ==
+                                "Dark"),
+                        fontSize: 20,
+                      ),
+                    ),
+                  ),
+                ],
+              ),
+            if (widget.business.website.isNotEmpty &&
+                widget.business.website != "")
+              Column(
+                children: [
+                  SizedBox(
+                    width: 80,
+                    height: 80,
+                    child: MihButton(
+                      onPressed: () {
+                        _launchWebsite(widget.business.website);
+                      },
+                      buttonColor: MihColors.getRedColor(
+                          MzansiInnovationHub.of(context)!.theme.mode ==
+                              "Dark"),
+                      child: Icon(
+                        Icons.language,
+                        color: MihColors.getPrimaryColor(
+                            MzansiInnovationHub.of(context)!.theme.mode ==
+                                "Dark"),
+                        size: iconSize,
+                      ),
+                    ),
+                  ),
+                  const SizedBox(height: 2),
+                  FittedBox(
+                    child: Text(
+                      "Website",
+                      style: TextStyle(
+                        fontWeight: FontWeight.bold,
+                        color: MihColors.getSecondaryColor(
+                            MzansiInnovationHub.of(context)!.theme.mode ==
+                                "Dark"),
+                        fontSize: 20,
+                      ),
+                    ),
+                  ),
+                ],
+              ),
+            FutureBuilder(
+              future: _businessReviewFuture,
+              builder: (context, asyncSnapshot) {
+                if (asyncSnapshot.connectionState == ConnectionState.waiting) {
+                  return Column(
+                    children: [
+                      SizedBox(
+                        width: 80,
+                        height: 80,
+                        child: MihButton(
+                          onPressed: () {},
+                          buttonColor: MihColors.getGreyColor(
+                              MzansiInnovationHub.of(context)!.theme.mode ==
+                                  "Dark"),
+                          child: Icon(
+                            Icons.star_rate_rounded,
+                            color: MihColors.getPrimaryColor(
+                                MzansiInnovationHub.of(context)!.theme.mode ==
+                                    "Dark"),
+                            size: iconSize,
+                          ),
+                        ),
+                      ).redacted(context: context, redact: true),
+                      const SizedBox(height: 2),
+                      FittedBox(
+                        child: Text(
+                          "Rate Us",
+                          style: TextStyle(
+                            fontWeight: FontWeight.bold,
+                            color: MihColors.getSecondaryColor(
+                                MzansiInnovationHub.of(context)!.theme.mode ==
+                                    "Dark"),
+                            fontSize: 20,
+                          ),
+                        ),
+                      ).redacted(context: context, redact: true),
+                    ],
+                  );
+                } else {
+                  BusinessReview? businessReview = asyncSnapshot.data;
+                  String ratingTitle = "";
+                  if (businessReview == null) {
+                    ratingTitle = "Rate Us";
+                  } else {
+                    ratingTitle = "Edit";
+                  }
+                  return Column(
+                    children: [
+                      SizedBox(
+                        width: 80,
+                        height: 80,
+                        child: MihButton(
+                          onPressed: () {
+                            businessReviewRatingWindow(directoryProvider,
+                                businessReview, true, widget.width);
+                          },
+                          buttonColor: MihColors.getYellowColor(
+                              MzansiInnovationHub.of(context)!.theme.mode ==
+                                  "Dark"),
+                          child: Icon(
+                            Icons.star_rate_rounded,
+                            color: MihColors.getPrimaryColor(
+                                MzansiInnovationHub.of(context)!.theme.mode ==
+                                    "Dark"),
+                            size: iconSize,
+                          ),
+                        ),
+                      ),
+                      const SizedBox(height: 2),
+                      FittedBox(
+                        child: Text(
+                          ratingTitle,
+                          style: TextStyle(
+                            fontWeight: FontWeight.bold,
+                            color: MihColors.getSecondaryColor(
+                                MzansiInnovationHub.of(context)!.theme.mode ==
+                                    "Dark"),
+                            fontSize: 20,
+                          ),
+                        ),
+                      ),
+                    ],
+                  );
+                }
+              },
+            ),
+            FutureBuilder(
+              future: _bookmarkedBusinessFuture,
+              builder: (context, asyncSnapshot) {
+                if (asyncSnapshot.connectionState == ConnectionState.waiting) {
+                  return Column(
+                    children: [
+                      SizedBox(
+                        width: 80,
+                        height: 80,
+                        child: MihButton(
+                          onPressed: () {},
+                          buttonColor: MihColors.getGreyColor(
+                              MzansiInnovationHub.of(context)!.theme.mode ==
+                                  "Dark"),
+                          child: Icon(
+                            Icons.bookmark_add_rounded,
+                            color: MihColors.getPrimaryColor(
+                                MzansiInnovationHub.of(context)!.theme.mode ==
+                                    "Dark"),
+                            size: iconSize,
+                          ),
+                        ),
+                      ).redacted(context: context, redact: true),
+                      const SizedBox(height: 2),
+                      FittedBox(
+                        child: Text(
+                          "bookmark",
+                          style: TextStyle(
+                            fontWeight: FontWeight.bold,
+                            color: MihColors.getSecondaryColor(
+                                MzansiInnovationHub.of(context)!.theme.mode ==
+                                    "Dark"),
+                            fontSize: 20,
+                          ),
+                        ),
+                      ).redacted(context: context, redact: true),
+                    ],
+                  );
+                } else {
+                  BookmarkedBusiness? bookmarkBusiness = asyncSnapshot.data;
+                  String bookmarkDisplayTitle = "";
+                  if (bookmarkBusiness == null) {
+                    bookmarkDisplayTitle = "Bookmark";
+                  } else {
+                    bookmarkDisplayTitle = "Remove";
+                  }
+                  return Column(
+                    children: [
+                      SizedBox(
+                        width: 80,
+                        height: 80,
+                        child: MihButton(
+                          onPressed: () {
+                            if (bookmarkBusiness == null) {
+                              showAddBookmarkAlert();
+                            } else {
+                              showDeleteBookmarkAlert(bookmarkBusiness);
+                            }
+                          },
+                          buttonColor: MihColors.getBluishPurpleColor(
+                              MzansiInnovationHub.of(context)!.theme.mode ==
+                                  "Dark"),
+                          child: Icon(
+                            bookmarkBusiness == null
+                                ? Icons.bookmark_add_rounded
+                                : Icons.bookmark_remove_rounded,
+                            color: MihColors.getPrimaryColor(
+                                MzansiInnovationHub.of(context)!.theme.mode ==
+                                    "Dark"),
+                            size: iconSize,
+                          ),
+                        ),
+                      ),
+                      const SizedBox(height: 2),
+                      FittedBox(
+                        child: Text(
+                          bookmarkDisplayTitle,
+                          style: TextStyle(
+                            fontWeight: FontWeight.bold,
+                            color: MihColors.getSecondaryColor(
+                                MzansiInnovationHub.of(context)!.theme.mode ==
+                                    "Dark"),
+                            fontSize: 20,
+                          ),
+                        ),
+                      ),
+                    ],
+                  );
+                }
+              },
+            ),
+          ],
+        );
+      },
+    );
+  }
+
+  Future<void> businessReviewRatingWindow(
+      MzansiDirectoryProvider directoryProvider,
+      BusinessReview? myReview,
+      bool previouslyRated,
+      double width) async {
+    if (_isUserSignedIn) {
+      showDialog(
+        barrierDismissible: false,
+        context: context,
+        builder: (context) => MihReviewBusinessWindow(
+          business: widget.business,
+          businessReview: myReview,
+          screenWidth: width,
+          readOnly: false,
+          onSuccessDismissPressed: () async {
+            List<Business>? businessSearchResults = [];
+            businessSearchResults = await MihBusinessDetailsServices()
+                .searchBusinesses(directoryProvider.searchTerm,
+                    directoryProvider.businessTypeFilter, context);
+            Map<String, Future<String>> busImagesUrl = {};
+            Future<String> businessLogoUrl;
+            for (var bus in businessSearchResults) {
+              businessLogoUrl = MihFileApi.getMinioFileUrl(bus.logo_path);
+              busImagesUrl[bus.business_id] = businessLogoUrl;
+            }
+            directoryProvider.setSearchedBusinesses(
+              searchedBusinesses: businessSearchResults,
+              businessesImagesUrl: busImagesUrl,
+            );
+            setState(() {
+              _businessReviewFuture = getUserReview();
+            });
+          },
+        ),
+      );
+    } else {
+      showSignInRequiredAlert();
+    }
+  }
+
+  void showAddBookmarkAlert() {
+    if (_isUserSignedIn) {
+      showDialog(
+        barrierDismissible: false,
+        context: context,
+        builder: (context) => MihAddBookmarkAlert(
+          business: widget.business,
+          onSuccessDismissPressed: () async {
+            _bookmarkedBusinessFuture = getUserBookmark();
+          },
+        ),
+      );
+    } else {
+      showSignInRequiredAlert();
+    }
+  }
+
+  void showDeleteBookmarkAlert(BookmarkedBusiness? bookmarkBusiness) {
+    if (_isUserSignedIn) {
+      showDialog(
+          barrierDismissible: false,
+          context: context,
+          builder: (context) => MihDeleteBookmarkAlert(
+                business: widget.business,
+                bookmarkBusiness: bookmarkBusiness,
+                onSuccessDismissPressed: () {
+                  _bookmarkedBusinessFuture = getUserBookmark();
+                },
+                // startUpSearch: widget.startUpSearch,
+              ));
+    } else {
+      showSignInRequiredAlert();
+    }
+  }
+
+  void showSignInRequiredAlert() {
+    showDialog(
+      barrierDismissible: false,
+      context: context,
+      builder: (context) {
+        return MihPackageWindow(
+          fullscreen: false,
+          windowTitle: null,
+          onWindowTapClose: () {
+            context.pop();
+          },
+          windowBody: Column(
+            children: [
+              Icon(
+                MihIcons.mihLogo,
+                size: 125,
+                color: MihColors.getSecondaryColor(
+                    MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+              ),
+              const SizedBox(height: 10),
+              Text(
+                "Let's Get Started",
+                textAlign: TextAlign.center,
+                style: TextStyle(
+                  color: MihColors.getSecondaryColor(
+                      MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+                  fontSize: 25,
+                  fontWeight: FontWeight.bold,
+                ),
+              ),
+              const SizedBox(height: 15),
+              Text(
+                "Ready to dive in to the world of MIH?\nSign in or create a free MIH account to unlock all the powerful features of the MIH app. It's quick and easy!",
+                style: TextStyle(
+                  color: MihColors.getSecondaryColor(
+                      MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+                  fontSize: 15,
+                ),
+              ),
+              const SizedBox(height: 25),
+              Center(
+                child: MihButton(
+                  onPressed: () {
+                    context.goNamed(
+                      'mihHome',
+                      extra: true,
+                    );
+                  },
+                  buttonColor: MihColors.getGreenColor(
+                      MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+                  elevation: 10,
+                  width: 300,
+                  child: Text(
+                    "Sign In/ Create Account",
+                    style: TextStyle(
+                      color: MihColors.getPrimaryColor(
+                          MzansiInnovationHub.of(context)!.theme.mode ==
+                              "Dark"),
+                      fontSize: 20,
+                      fontWeight: FontWeight.bold,
+                    ),
+                  ),
+                ),
+              ),
+            ],
+          ),
+        );
+      },
+    );
+  }
+}

mih_ui/lib/mih_package_components/mih_package_window.dart

@@ -197,7 +197,10 @@ class _MihPackageWindowState extends State<MihPackageWindow> {
                             maxHeight: windowHeight * 0.85,
                             maxWidth: windowWidth * 0.85,
                           ),
-                          child: MihSingleChildScroll(child: widget.windowBody),
+                          child: MihSingleChildScroll(
+                            scrollbarOn: true,
+                            child: widget.windowBody,
+                          ),
                         ),
                       ),
                     ),

mih_ui/lib/mih_package_components/mih_profile_links.dart

@@ -3,7 +3,7 @@ import 'package:font_awesome_flutter/font_awesome_flutter.dart';
 import 'package:mzansi_innovation_hub/main.dart';
 import 'package:mzansi_innovation_hub/mih_config/mih_colors.dart';
 import 'package:mzansi_innovation_hub/mih_objects/profile_link.dart';
-import 'package:mzansi_innovation_hub/mih_package_components/mih_package_tile.dart';
+import 'package:mzansi_innovation_hub/mih_package_components/mih_button.dart';
 import 'package:mzansi_innovation_hub/mih_providers/mzansi_profile_provider.dart';
 import 'package:provider/provider.dart';
 import 'package:url_launcher/url_launcher.dart';
@@ -26,72 +26,87 @@ class MihProfileLinks extends StatefulWidget {
 class _MihProfileLinksState extends State<MihProfileLinks> {
   Widget displayLinkButton(ProfileLink link) {
     IconData iconData;
-    Color iconColor;
+    Color btnColor;
+    Color iconColor = Colors.white;
     switch (link.destination.toLowerCase()) {
       case "youtube":
         iconData = FontAwesomeIcons.youtube;
-        iconColor = const Color(0xFFFF0000);
+        btnColor = const Color(0xFFFF0000);
         break;
       case "tiktok":
         iconData = FontAwesomeIcons.tiktok;
-        iconColor = const Color(0xFF000000);
+        btnColor = const Color(0xFF000000);
         break;
       case "twitch":
         iconData = FontAwesomeIcons.twitch;
-        iconColor = const Color(0xFF6441a5);
+        btnColor = const Color(0xFF6441a5);
         break;
       case "threads":
         iconData = FontAwesomeIcons.threads;
-        iconColor = const Color(0xFF000000);
+        btnColor = const Color(0xFF000000);
         break;
       case "whatsapp":
         iconData = FontAwesomeIcons.whatsapp;
-        iconColor = const Color(0xFF25D366);
+        btnColor = const Color(0xFF25D366);
         break;
       case "instagram":
         iconData = FontAwesomeIcons.instagram;
-        iconColor = const Color(0xFFF56040);
+        btnColor = const Color(0xFFF56040);
         break;
       case "x":
         iconData = FontAwesomeIcons.xTwitter;
-        iconColor = const Color(0xFF000000);
+        btnColor = const Color(0xFF000000);
         break;
       case "linkedin":
         iconData = FontAwesomeIcons.linkedin;
-        iconColor = const Color(0xFF0a66c2);
+        btnColor = const Color(0xFF0a66c2);
         break;
       case "facebook":
         iconData = FontAwesomeIcons.facebook;
-        iconColor = const Color(0xFF4267B2);
+        btnColor = const Color(0xFF4267B2);
         break;
       case "reddit":
         iconData = FontAwesomeIcons.reddit;
-        iconColor = const Color(0xFFFF4500);
+        btnColor = const Color(0xFFFF4500);
         break;
       case "discord":
         iconData = FontAwesomeIcons.discord;
-        iconColor = const Color(0xFF5865F2);
+        btnColor = const Color(0xFF5865F2);
+        break;
+      case "git":
+        iconData = FontAwesomeIcons.git;
+        btnColor = const Color(0xFF73A952);
         break;
       default:
         iconData = FontAwesomeIcons.link;
-        iconColor = MihColors.getPrimaryColor(
+        btnColor = MihColors.getPrimaryColor(
             MzansiInnovationHub.of(context)!.theme.mode == "Dark");
     }
-
+    return MihButton(
-    return MihPackageTile(
+      onPressed: () {
-      onTap: () {
         launchSocialUrl(Uri.parse(link.web_link));
       },
-      appName: link.destination,
+      buttonColor: btnColor,
-      appIcon: Icon(
+      child: FaIcon(
         iconData,
         color: iconColor,
+        size: 33,
       ),
-      iconSize: 200,
-      textColor: Colors.black,
-      // MihColors.getPrimaryColor(
-      //     MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
     );
+    // return MihPackageTile(
+    //   onTap: () {
+    //     launchSocialUrl(Uri.parse(link.web_link));
+    //   },
+    //   appName: link.destination,
+    //   appIcon: Icon(
+    //     iconData,
+    //     color: btnColor,
+    //   ),
+    //   iconSize: 200,
+    //   textColor: Colors.black,
+    //   // MihColors.getPrimaryColor(
+    //   //     MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+    // );
   }
 
   Future<void> launchSocialUrl(Uri linkUrl) async {
@@ -110,54 +125,37 @@ class _MihProfileLinksState extends State<MihProfileLinks> {
           padding: widget.paddingOn == null || widget.paddingOn!
               ? MzansiInnovationHub.of(context)!.theme.screenType == "desktop"
                   ? EdgeInsets.symmetric(horizontal: width * 0.2)
-                  : EdgeInsets.symmetric(horizontal: width * 0.075)
+                  : EdgeInsets.symmetric(horizontal: width * 0)
               : EdgeInsetsGeometry.all(0),
-          child: Material(
+          child: widget.links.isEmpty
-            color: MihColors.getSecondaryColor(
+              ? SizedBox(
-                    MzansiInnovationHub.of(context)!.theme.mode == "Dark")
+                  height: 35,
-                .withValues(alpha: 0.6),
+                  child: Text(
-            borderRadius: BorderRadius.circular(25),
+                    "No Profile Links",
-            elevation: 10,
+                    textAlign: TextAlign.center,
-            shadowColor: Colors.black,
+                    style: TextStyle(
-            child: Container(
+                      fontSize: 25,
-              width: 500,
+                      fontWeight: FontWeight.bold,
-              padding: EdgeInsets.all(10),
+                      color: MihColors.getPrimaryColor(
-              decoration: BoxDecoration(
+                          MzansiInnovationHub.of(context)!.theme.mode ==
-                color: MihColors.getSecondaryColor(
+                              "Dark"),
-                    MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
-                borderRadius: BorderRadius.circular(10),
-              ),
-              child: widget.links.isEmpty
-                  ? SizedBox(
-                      height: 35,
-                      child: Text(
-                        "No Profile Links",
-                        textAlign: TextAlign.center,
-                        style: TextStyle(
-                          fontSize: 25,
-                          fontWeight: FontWeight.bold,
-                          color: MihColors.getPrimaryColor(
-                              MzansiInnovationHub.of(context)!.theme.mode ==
-                                  "Dark"),
-                        ),
-                      ),
-                    )
-                  : Wrap(
-                      alignment: WrapAlignment.center,
-                      runSpacing: 15,
-                      spacing: 15,
-                      children: widget.links.map(
-                        (link) {
-                          return SizedBox(
-                            width: widget.buttonSize ?? 80,
-                            height: widget.buttonSize ?? 80,
-                            child: displayLinkButton(link),
-                          );
-                        },
-                      ).toList(),
                     ),
-            ),
+                  ),
-          ),
+                )
+              : Wrap(
+                  alignment: WrapAlignment.center,
+                  runSpacing: 10,
+                  spacing: 10,
+                  children: widget.links.map(
+                    (link) {
+                      return SizedBox(
+                        width: widget.buttonSize ?? 80,
+                        height: widget.buttonSize ?? 80,
+                        child: displayLinkButton(link),
+                      );
+                    },
+                  ).toList(),
+                ),
         );
       },
     );

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

@@ -1,7 +1,9 @@
 import 'package:flutter_speed_dial/flutter_speed_dial.dart';
+import 'package:go_router/go_router.dart';
 import 'package:mzansi_innovation_hub/main.dart';
 import 'package:mzansi_innovation_hub/mih_objects/profile_link.dart';
 import 'package:mzansi_innovation_hub/mih_config/mih_colors.dart';
+import 'package:mzansi_innovation_hub/mih_package_components/mih_package_window.dart';
 import 'package:mzansi_innovation_hub/mih_package_components/mih_profile_links.dart';
 import 'package:mzansi_innovation_hub/mih_services/mih_business_details_services.dart';
 import 'package:mzansi_innovation_hub/mih_services/mih_install_services.dart';
@@ -432,7 +434,119 @@ class _MihInfoState extends State<MihInfo> {
           children: [
             MihButton(
               onPressed: () {
-                MihInstallServices().installMihTrigger(context);
+                if (MzansiInnovationHub.of(context)!.theme.getPlatform() ==
+                    "Android") {
+                  showDialog(
+                    context: context,
+                    builder: (context) {
+                      return MihPackageWindow(
+                        fullscreen: false,
+                        windowTitle: "Select Option",
+                        onWindowTapClose: () {
+                          context.pop();
+                        },
+                        windowBody: Column(
+                          children: [
+                            Text(
+                              "Please select the platform you want to install/ Update MIH from",
+                              style: TextStyle(
+                                color: MihColors.getSecondaryColor(
+                                    MzansiInnovationHub.of(context)!
+                                            .theme
+                                            .mode ==
+                                        "Dark"),
+                                fontSize: 20,
+                                fontWeight: FontWeight.bold,
+                              ),
+                            ),
+                            const SizedBox(height: 25),
+                            MihButton(
+                              onPressed: () {
+                                launchSocialUrl(
+                                  Uri.parse(
+                                    "https://play.google.com/store/apps/details?id=za.co.mzansiinnovationhub.mih",
+                                  ),
+                                );
+                              },
+                              buttonColor: MihColors.getGreenColor(
+                                  MzansiInnovationHub.of(context)!.theme.mode ==
+                                      "Dark"),
+                              child: Row(
+                                mainAxisAlignment: MainAxisAlignment.center,
+                                children: [
+                                  FaIcon(
+                                    FontAwesomeIcons.googlePlay,
+                                    color: MihColors.getPrimaryColor(
+                                        MzansiInnovationHub.of(context)!
+                                                .theme
+                                                .mode ==
+                                            "Dark"),
+                                  ),
+                                  const SizedBox(width: 10),
+                                  Text(
+                                    "Play Store",
+                                    style: TextStyle(
+                                      color: MihColors.getPrimaryColor(
+                                          MzansiInnovationHub.of(context)!
+                                                  .theme
+                                                  .mode ==
+                                              "Dark"),
+                                      fontSize: 20,
+                                      fontWeight: FontWeight.bold,
+                                    ),
+                                  ),
+                                ],
+                              ),
+                            ),
+                            const SizedBox(
+                              height: 10,
+                            ),
+                            MihButton(
+                              onPressed: () {
+                                launchSocialUrl(
+                                  Uri.parse(
+                                    "https://appgallery.huawei.com/app/C113315335?pkgName=za.co.mzansiinnovationhub.mih",
+                                  ),
+                                );
+                              },
+                              buttonColor: MihColors.getGreenColor(
+                                  MzansiInnovationHub.of(context)!.theme.mode ==
+                                      "Dark"),
+                              child: Row(
+                                mainAxisAlignment: MainAxisAlignment.center,
+                                children: [
+                                  FaIcon(
+                                    Icons.store,
+                                    color: MihColors.getPrimaryColor(
+                                        MzansiInnovationHub.of(context)!
+                                                .theme
+                                                .mode ==
+                                            "Dark"),
+                                  ),
+                                  const SizedBox(width: 10),
+                                  Text(
+                                    "App Gallery",
+                                    style: TextStyle(
+                                      color: MihColors.getPrimaryColor(
+                                          MzansiInnovationHub.of(context)!
+                                                  .theme
+                                                  .mode ==
+                                              "Dark"),
+                                      fontSize: 20,
+                                      fontWeight: FontWeight.bold,
+                                    ),
+                                  ),
+                                ],
+                              ),
+                            ),
+                          ],
+                        ),
+                      );
+                    },
+                  );
+                } else {
+                  MihInstallServices().installMihTrigger(context);
+                }
               },
               buttonColor: MihColors.getGreenColor(
                   MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
@@ -736,6 +850,14 @@ class _MihInfoState extends State<MihInfo> {
         destination: "Reddit",
         web_link: "https://www.reddit.com/r/Mzani_Innovation_Hub/",
       ),
+      ProfileLink(
+        idprofile_links: 1,
+        app_id: "1234",
+        business_id: "",
+        destination: "Git",
+        web_link:
+            "https://git.mzansi-innovation-hub.co.za/yaso_meth/mih-project",
+      ),
     ];
     return Column(
       children: [
@@ -752,7 +874,7 @@ class _MihInfoState extends State<MihInfo> {
         ),
         MihProfileLinks(links: links),
         const SizedBox(
-          height: 25,
+          height: 75,
         ),
       ],
     );

mih_ui/lib/mih_packages/calculator/package_tools/currency_exchange_rate.dart

@@ -290,6 +290,7 @@ class _CurrencyExchangeRateState extends State<CurrencyExchangeRate> {
     return Consumer<MihCalculatorProvider>(
       builder: (context, calculatorProvider, child) {
         return MihSingleChildScroll(
+          scrollbarOn: true,
           child: Padding(
             padding:
                 MzansiInnovationHub.of(context)!.theme.screenType == "desktop"

mih_ui/lib/mih_packages/calculator/package_tools/simple_calc.dart

@@ -94,6 +94,7 @@ class _SimpleCalcState extends State<SimpleCalc> {
       }
     }
     return MihSingleChildScroll(
+      scrollbarOn: true,
       child: Column(
         mainAxisAlignment: MainAxisAlignment.start,
         mainAxisSize: MainAxisSize.min,

mih_ui/lib/mih_packages/calculator/package_tools/tip_calc.dart

@@ -259,6 +259,7 @@ class _TipCalcState extends State<TipCalc> {
 
   Widget getBody(double width) {
     return MihSingleChildScroll(
+      scrollbarOn: true,
       child: Padding(
         padding: MzansiInnovationHub.of(context)!.theme.screenType == "desktop"
             ? EdgeInsets.symmetric(horizontal: width * 0.2)

mih_ui/lib/mih_packages/mih_authentication/package_tools/mih_forgot_password.dart

@@ -5,6 +5,7 @@ import 'package:mzansi_innovation_hub/main.dart';
 import 'package:mzansi_innovation_hub/mih_package_components/mih_button.dart';
 import 'package:mzansi_innovation_hub/mih_package_components/mih_form.dart';
 import 'package:mzansi_innovation_hub/mih_package_components/mih_package_tool_body.dart';
+import 'package:mzansi_innovation_hub/mih_package_components/mih_single_child_scroll.dart';
 import 'package:mzansi_innovation_hub/mih_package_components/mih_text_form_field.dart';
 import 'package:mzansi_innovation_hub/mih_package_components/mih_loading_circle.dart';
 import 'package:mzansi_innovation_hub/mih_config/mih_colors.dart';
@@ -139,89 +140,85 @@ class _MihForgotPasswordState extends State<MihForgotPassword> {
           validateInput();
         }
       },
-      child: SafeArea(
+      child: MihSingleChildScroll(
-        child: SingleChildScrollView(
+        scrollbarOn: true,
-          physics: const BouncingScrollPhysics(),
+        child: Padding(
-          child: Padding(
+          padding: MzansiInnovationHub.of(context)!.theme.screenType ==
-            padding: MzansiInnovationHub.of(context)!.theme.screenType ==
+                  "desktop"
-                    "desktop"
+              ? EdgeInsets.symmetric(vertical: 25, horizontal: width * 0.2)
-                ? EdgeInsets.symmetric(vertical: 25, horizontal: width * 0.2)
+              : EdgeInsets.symmetric(vertical: 25, horizontal: width * 0.075),
-                : EdgeInsets.symmetric(vertical: 25, horizontal: width * 0.075),
+          child: Column(
-            child: Column(
+            mainAxisAlignment: MainAxisAlignment.start,
-              mainAxisAlignment: MainAxisAlignment.start,
+            crossAxisAlignment: CrossAxisAlignment.center,
-              crossAxisAlignment: CrossAxisAlignment.center,
+            mainAxisSize: MainAxisSize.max,
-              mainAxisSize: MainAxisSize.max,
+            children: [
-              children: [
+              //logo
-                //logo
+              Icon(
-                Icon(
+                Icons.lock,
-                  Icons.lock,
+                size: 100,
-                  size: 100,
+                color: MihColors.getSecondaryColor(
+                    MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+              ),
+              //spacer
+              const SizedBox(height: 10),
+              //Heading
+              Text(
+                'Forgot Password',
+                style: TextStyle(
+                  fontSize: 25,
+                  fontWeight: FontWeight.bold,
                   color: MihColors.getSecondaryColor(
                       MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
                 ),
-                //spacer
+              ),
-                const SizedBox(height: 10),
+              const SizedBox(height: 25),
-                //Heading
+              MihForm(
-                Text(
+                formKey: _formKey,
-                  'Forgot Password',
+                formFields: [
-                  style: TextStyle(
+                  MihTextFormField(
-                    fontSize: 25,
+                    fillColor: MihColors.getSecondaryColor(
-                    fontWeight: FontWeight.bold,
-                    color: MihColors.getSecondaryColor(
                         MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+                    inputColor: MihColors.getPrimaryColor(
+                        MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+                    controller: emailController,
+                    multiLineInput: false,
+                    requiredText: true,
+                    hintText: "Email",
+                    validator: (value) {
+                      return MihValidationServices().validateEmail(value);
+                    },
                   ),
-                ),
+                  //spacer
-                const SizedBox(height: 25),
+                  const SizedBox(height: 20),
-                MihForm(
+                  Align(
-                  formKey: _formKey,
+                    alignment: Alignment.center,
-                  formFields: [
+                    child: MihButton(
-                    MihTextFormField(
+                      onPressed: () {
-                      fillColor: MihColors.getSecondaryColor(
+                        if (_formKey.currentState!.validate()) {
-                          MzansiInnovationHub.of(context)!.theme.mode ==
+                          prePassResteWarning();
-                              "Dark"),
+                        } else {
-                      inputColor: MihColors.getPrimaryColor(
+                          MihAlertServices().inputErrorAlert(context);
-                          MzansiInnovationHub.of(context)!.theme.mode ==
+                        }
-                              "Dark"),
-                      controller: emailController,
-                      multiLineInput: false,
-                      requiredText: true,
-                      hintText: "Email",
-                      validator: (value) {
-                        return MihValidationServices().validateEmail(value);
                       },
-                    ),
+                      buttonColor: MihColors.getGreenColor(
-                    //spacer
+                          MzansiInnovationHub.of(context)!.theme.mode ==
-                    const SizedBox(height: 20),
+                              "Dark"),
-                    Align(
+                      width: 300,
-                      alignment: Alignment.center,
+                      child: Text(
-                      child: MihButton(
+                        "Reset Password",
-                        onPressed: () {
+                        style: TextStyle(
-                          if (_formKey.currentState!.validate()) {
+                          color: MihColors.getPrimaryColor(
-                            prePassResteWarning();
+                              MzansiInnovationHub.of(context)!.theme.mode ==
-                          } else {
+                                  "Dark"),
-                            MihAlertServices().inputErrorAlert(context);
+                          fontSize: 20,
-                          }
+                          fontWeight: FontWeight.bold,
-                        },
-                        buttonColor: MihColors.getGreenColor(
-                            MzansiInnovationHub.of(context)!.theme.mode ==
-                                "Dark"),
-                        width: 300,
-                        child: Text(
-                          "Reset Password",
-                          style: TextStyle(
-                            color: MihColors.getPrimaryColor(
-                                MzansiInnovationHub.of(context)!.theme.mode ==
-                                    "Dark"),
-                            fontSize: 20,
-                            fontWeight: FontWeight.bold,
-                          ),
                         ),
                       ),
                     ),
-                  ],
+                  ),
-                ),
+                ],
-              ],
+              ),
-            ),
+            ],
           ),
         ),
       ),

mih_ui/lib/mih_packages/mih_authentication/package_tools/mih_register.dart

@@ -205,6 +205,7 @@ class _MihRegisterState extends State<MihRegister> {
         }
       },
       child: MihSingleChildScroll(
+        scrollbarOn: true,
         child: Padding(
           padding:
               MzansiInnovationHub.of(context)!.theme.screenType == "desktop"

mih_ui/lib/mih_packages/mih_authentication/package_tools/mih_reset_password.dart

@@ -5,6 +5,7 @@ import 'package:mzansi_innovation_hub/main.dart';
 import 'package:mzansi_innovation_hub/mih_package_components/mih_button.dart';
 import 'package:mzansi_innovation_hub/mih_package_components/mih_form.dart';
 import 'package:mzansi_innovation_hub/mih_package_components/mih_package_tool_body.dart';
+import 'package:mzansi_innovation_hub/mih_package_components/mih_single_child_scroll.dart';
 import 'package:mzansi_innovation_hub/mih_package_components/mih_text_form_field.dart';
 import 'package:mzansi_innovation_hub/mih_package_components/mih_loading_circle.dart';
 import 'package:mzansi_innovation_hub/mih_config/mih_colors.dart';
@@ -104,110 +105,104 @@ class _MihResetPasswordState extends State<MihResetPassword> {
           }
         }
       },
-      child: SafeArea(
+      child: MihSingleChildScroll(
-        child: SingleChildScrollView(
+        scrollbarOn: true,
-          physics: const BouncingScrollPhysics(),
+        child: Padding(
-          child: Padding(
+          padding:
-            padding:
+              MzansiInnovationHub.of(context)!.theme.screenType == "desktop"
-                MzansiInnovationHub.of(context)!.theme.screenType == "desktop"
+                  ? EdgeInsets.symmetric(horizontal: width * 0.2)
-                    ? EdgeInsets.symmetric(horizontal: width * 0.2)
+                  : EdgeInsets.symmetric(horizontal: width * 0.075),
-                    : EdgeInsets.symmetric(horizontal: width * 0.075),
+          child: Column(
-            child: Column(
+            mainAxisAlignment: MainAxisAlignment.start,
-              mainAxisAlignment: MainAxisAlignment.start,
+            children: [
-              children: [
+              // Text("Token: ${widget.token}"), // For testing purposes only
-                // Text("Token: ${widget.token}"), // For testing purposes only
+              //logo
-                //logo
+              Icon(
-                Icon(
+                Icons.lock,
-                  Icons.lock,
+                size: 100,
-                  size: 100,
+                color: MihColors.getSecondaryColor(
+                    MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+              ),
+              //spacer
+              const SizedBox(height: 10),
+              //Heading
+              Text(
+                'Reset Password',
+                style: TextStyle(
+                  fontSize: 25,
+                  fontWeight: FontWeight.bold,
                   color: MihColors.getSecondaryColor(
                       MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
                 ),
-                //spacer
+              ),
-                const SizedBox(height: 10),
+              //spacer
-                //Heading
+              const SizedBox(height: 25),
-                Text(
+              MihForm(
-                  'Reset Password',
+                formKey: _formKey,
-                  style: TextStyle(
+                formFields: [
-                    fontSize: 25,
+                  MihTextFormField(
-                    fontWeight: FontWeight.bold,
+                    fillColor: MihColors.getSecondaryColor(
-                    color: MihColors.getSecondaryColor(
                         MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+                    inputColor: MihColors.getPrimaryColor(
+                        MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+                    controller: passwordController,
+                    multiLineInput: false,
+                    requiredText: true,
+                    hintText: "Password",
+                    passwordMode: true,
+                    autofillHints: const [AutofillHints.password],
+                    validator: (value) {
+                      return MihValidationServices().validatePassword(value);
+                    },
                   ),
-                ),
+                  //spacer
-                //spacer
+                  const SizedBox(height: 10),
-                const SizedBox(height: 25),
+                  MihTextFormField(
-                MihForm(
+                    fillColor: MihColors.getSecondaryColor(
-                  formKey: _formKey,
+                        MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
-                  formFields: [
+                    inputColor: MihColors.getPrimaryColor(
-                    MihTextFormField(
+                        MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
-                      fillColor: MihColors.getSecondaryColor(
+                    controller: confirmPasswordController,
-                          MzansiInnovationHub.of(context)!.theme.mode ==
+                    multiLineInput: false,
-                              "Dark"),
+                    requiredText: true,
-                      inputColor: MihColors.getPrimaryColor(
+                    hintText: "Confirm Password",
-                          MzansiInnovationHub.of(context)!.theme.mode ==
+                    passwordMode: true,
-                              "Dark"),
+                    autofillHints: const [AutofillHints.password],
-                      controller: passwordController,
+                    validator: (value) {
-                      multiLineInput: false,
+                      return MihValidationServices().validatePassword(value);
-                      requiredText: true,
+                    },
-                      hintText: "Password",
+                  ),
-                      passwordMode: true,
+                  //spacer
-                      autofillHints: const [AutofillHints.password],
+                  const SizedBox(height: 25),
-                      validator: (value) {
+                  // sign in button
-                        return MihValidationServices().validatePassword(value);
+                  Center(
+                    child: MihButton(
+                      onPressed: () {
+                        if (_formKey.currentState!.validate()) {
+                          submitFormInput();
+                        } else {
+                          MihAlertServices().inputErrorAlert(context);
+                        }
                       },
-                    ),
+                      buttonColor: MihColors.getGreenColor(
-                    //spacer
-                    const SizedBox(height: 10),
-                    MihTextFormField(
-                      fillColor: MihColors.getSecondaryColor(
                           MzansiInnovationHub.of(context)!.theme.mode ==
                               "Dark"),
-                      inputColor: MihColors.getPrimaryColor(
+                      width: 300,
-                          MzansiInnovationHub.of(context)!.theme.mode ==
+                      child: Text(
-                              "Dark"),
+                        "Reset Password",
-                      controller: confirmPasswordController,
+                        style: TextStyle(
-                      multiLineInput: false,
+                          color: MihColors.getPrimaryColor(
-                      requiredText: true,
+                              MzansiInnovationHub.of(context)!.theme.mode ==
-                      hintText: "Confirm Password",
+                                  "Dark"),
-                      passwordMode: true,
+                          fontSize: 20,
-                      autofillHints: const [AutofillHints.password],
+                          fontWeight: FontWeight.bold,
-                      validator: (value) {
-                        return MihValidationServices().validatePassword(value);
-                      },
-                    ),
-                    //spacer
-                    const SizedBox(height: 25),
-                    // sign in button
-                    Center(
-                      child: MihButton(
-                        onPressed: () {
-                          if (_formKey.currentState!.validate()) {
-                            submitFormInput();
-                          } else {
-                            MihAlertServices().inputErrorAlert(context);
-                          }
-                        },
-                        buttonColor: MihColors.getGreenColor(
-                            MzansiInnovationHub.of(context)!.theme.mode ==
-                                "Dark"),
-                        width: 300,
-                        child: Text(
-                          "Reset Password",
-                          style: TextStyle(
-                            color: MihColors.getPrimaryColor(
-                                MzansiInnovationHub.of(context)!.theme.mode ==
-                                    "Dark"),
-                            fontSize: 20,
-                            fontWeight: FontWeight.bold,
-                          ),
                         ),
                       ),
                     ),
-                  ],
+                  ),
-                ),
+                ],
-              ],
+              ),
-            ),
+            ],
           ),
         ),
       ),

mih_ui/lib/mih_packages/mih_authentication/package_tools/mih_sign_in.dart

@@ -202,6 +202,7 @@ class _MihSignInState extends State<MihSignIn> {
         }
       },
       child: MihSingleChildScroll(
+        scrollbarOn: true,
         child: Padding(
           padding:
               MzansiInnovationHub.of(context)!.theme.screenType == "desktop"

mih_ui/lib/mih_packages/mine_sweeper/package_tools/mine_sweeper_game.dart

@@ -626,6 +626,7 @@ class _MineSweeperGameState extends State<MineSweeperGame> {
                 alignment: Alignment.topCenter,
                 children: [
                   MihSingleChildScroll(
+                    scrollbarOn: true,
                     child: board.isEmpty && squaresLeft < 0
                         // Start Up Message before setting up game
                         ? Padding(

mih_ui/lib/mih_packages/mine_sweeper/package_tools/mine_sweeper_quick_start_guide.dart

@@ -845,6 +845,7 @@ class _MineSweeperQuickStartGuideState
 
   Widget getBody(double width) {
     return MihSingleChildScroll(
+      scrollbarOn: true,
       child: Padding(
         padding: EdgeInsets.symmetric(horizontal: width / 20),
         child: Column(

mih_ui/lib/mih_packages/mzansi_directory/package_tools/mih_contacts.dart

@@ -28,6 +28,7 @@ class _MihContactsState extends State<MihContacts> {
 
   Widget getBody(double width) {
     return MihSingleChildScroll(
+      scrollbarOn: true,
       child: Column(
         children: [
           Padding(

mih_ui/lib/mih_packages/mzansi_directory/package_tools/mih_search_mzansi.dart

@@ -330,6 +330,7 @@ class _MihSearchMzansiState extends State<MihSearchMzansi> {
     } else if (directoryProvider.searchedBusinesses.isEmpty &&
         directoryProvider.searchTerm.isNotEmpty) {
       return MihSingleChildScroll(
+        scrollbarOn: true,
         child: Column(
           children: [
             const SizedBox(height: 50),
@@ -357,6 +358,7 @@ class _MihSearchMzansiState extends State<MihSearchMzansi> {
     } else if (directoryProvider.searchedBusinesses.isEmpty &&
         directoryProvider.searchTerm.isEmpty) {
       return MihSingleChildScroll(
+        scrollbarOn: true,
         child: Padding(
           padding: const EdgeInsets.symmetric(horizontal: 10.0),
           child: Column(
@@ -472,6 +474,7 @@ class _MihSearchMzansiState extends State<MihSearchMzansi> {
     } else if (directoryProvider.searchedUsers.isEmpty &&
         directoryProvider.searchTerm.isEmpty) {
       return MihSingleChildScroll(
+        scrollbarOn: true,
         child: Padding(
           padding: const EdgeInsets.symmetric(horizontal: 10.0),
           child: Column(
@@ -533,6 +536,7 @@ class _MihSearchMzansiState extends State<MihSearchMzansi> {
     } else if (directoryProvider.searchedUsers.isEmpty &&
         directoryProvider.searchTerm.isNotEmpty) {
       return MihSingleChildScroll(
+        scrollbarOn: true,
         child: Column(
           children: [
             const SizedBox(height: 50),

mih_ui/lib/mih_packages/mzansi_profile/business_profile/components/mih_review_business_window.dart

@@ -316,6 +316,7 @@ class _MihReviewBusinessWindowState extends State<MihReviewBusinessWindow> {
                 ]
               : null,
           windowBody: MihSingleChildScroll(
+            scrollbarOn: true,
             child: Padding(
               padding: MzansiInnovationHub.of(context)!.theme.screenType ==
                       "desktop"

mih_ui/lib/mih_packages/mzansi_profile/business_profile/components/mih_update_business_details_window.dart

@@ -251,278 +251,44 @@ class _MihUpdateBusinessDetailsWindowState
             context.pop();
           },
           windowBody: MihSingleChildScroll(
+            scrollbarOn: true,
             child: Padding(
               padding:
                   MzansiInnovationHub.of(context)!.theme.screenType == "desktop"
                       ? EdgeInsets.symmetric(horizontal: widget.width * 0.05)
                       : EdgeInsets.symmetric(horizontal: widget.width * 0),
-              child: Column(
+              child: Stack(
                 children: [
-                  MihForm(
+                  Column(
-                    formKey: _formKey,
+                    children: [
-                    formFields: [
+                      MihForm(
-                      Center(
+                        formKey: _formKey,
-                        child: MihCircleAvatar(
+                        formFields: [
-                          imageFile: newSelectedLogoPic != null
+                          Center(
-                              ? MemoryImage(newSelectedLogoPic!.bytes!)
+                            child: MihCircleAvatar(
-                              : mzansiProfileProvider.businessProfilePicture,
+                              imageFile: newSelectedLogoPic != null
-                          width: 150,
+                                  ? MemoryImage(newSelectedLogoPic!.bytes!)
-                          editable: true,
+                                  : mzansiProfileProvider
-                          fileNameController: fileNameController,
+                                      .businessProfilePicture,
-                          userSelectedfile: newSelectedLogoPic,
+                              width: 150,
-                          frameColor: MihColors.getSecondaryColor(
+                              editable: true,
-                              MzansiInnovationHub.of(context)!.theme.mode ==
+                              fileNameController: fileNameController,
-                                  "Dark"),
+                              userSelectedfile: newSelectedLogoPic,
-                          backgroundColor: MihColors.getPrimaryColor(
+                              frameColor: MihColors.getSecondaryColor(
-                              MzansiInnovationHub.of(context)!.theme.mode ==
-                                  "Dark"),
-                          onChange: (selectedfile) {
-                            setState(() {
-                              newSelectedLogoPic = selectedfile;
-                            });
-                          },
-                        ),
-                      ),
-                      Visibility(
-                        visible: false,
-                        child: MihTextFormField(
-                          fillColor: MihColors.getSecondaryColor(
-                              MzansiInnovationHub.of(context)!.theme.mode ==
-                                  "Dark"),
-                          inputColor: MihColors.getPrimaryColor(
-                              MzansiInnovationHub.of(context)!.theme.mode ==
-                                  "Dark"),
-                          controller: fileNameController,
-                          multiLineInput: false,
-                          requiredText: true,
-                          readOnly: true,
-                          hintText: "Selected File Name",
-                        ),
-                      ),
-                      const SizedBox(height: 20),
-                      MihTextFormField(
-                        fillColor: MihColors.getSecondaryColor(
-                            MzansiInnovationHub.of(context)!.theme.mode ==
-                                "Dark"),
-                        inputColor: MihColors.getPrimaryColor(
-                            MzansiInnovationHub.of(context)!.theme.mode ==
-                                "Dark"),
-                        controller: nameController,
-                        multiLineInput: false,
-                        requiredText: true,
-                        hintText: "Business Name",
-                        validator: (value) {
-                          return MihValidationServices().isEmpty(value);
-                        },
-                      ),
-                      const SizedBox(height: 10),
-                      MihTextFormField(
-                        fillColor: MihColors.getSecondaryColor(
-                            MzansiInnovationHub.of(context)!.theme.mode ==
-                                "Dark"),
-                        inputColor: MihColors.getPrimaryColor(
-                            MzansiInnovationHub.of(context)!.theme.mode ==
-                                "Dark"),
-                        controller: typeController,
-                        multiLineInput: false,
-                        requiredText: true,
-                        hintText: "Business Type",
-                        validator: (value) {
-                          return MihValidationServices()
-                              .validateNoSpecialChars(value);
-                        },
-                      ),
-                      const SizedBox(height: 10),
-                      MihTextFormField(
-                        fillColor: MihColors.getSecondaryColor(
-                            MzansiInnovationHub.of(context)!.theme.mode ==
-                                "Dark"),
-                        inputColor: MihColors.getPrimaryColor(
-                            MzansiInnovationHub.of(context)!.theme.mode ==
-                                "Dark"),
-                        controller: emailController,
-                        multiLineInput: false,
-                        requiredText: true,
-                        hintText: "Business Email",
-                        validator: (value) {
-                          return MihValidationServices().validateEmail(value);
-                        },
-                      ),
-                      const SizedBox(height: 10),
-                      Container(
-                        width: 300,
-                        alignment: Alignment.topLeft,
-                        child: const Text(
-                          "Contact Number:",
-                          style: TextStyle(
-                            fontSize: 18,
-                            fontWeight: FontWeight.bold,
-                          ),
-                        ),
-                      ),
-                      Row(
-                        crossAxisAlignment: CrossAxisAlignment.end,
-                        children: [
-                          CountryCodePicker(
-                            padding: EdgeInsetsGeometry.all(0),
-                            onChanged: (selectedCode) {
-                              setState(() {
-                                countryCodeController.text =
-                                    selectedCode.toString();
-                              });
-                              debugPrint(
-                                  "Selected Country Code: ${countryCodeController.text}");
-                            },
-                            initialSelection: countryCodeController.text,
-                            showDropDownButton: false,
-                            pickerStyle: PickerStyle.bottomSheet,
-                            dialogBackgroundColor: MihColors.getPrimaryColor(
-                                MzansiInnovationHub.of(context)!.theme.mode ==
-                                    "Dark"),
-                            barrierColor: MihColors.getPrimaryColor(
-                                MzansiInnovationHub.of(context)!.theme.mode ==
-                                    "Dark"),
-                          ),
-                          Expanded(
-                            child: MihTextFormField(
-                              fillColor: MihColors.getSecondaryColor(
                                   MzansiInnovationHub.of(context)!.theme.mode ==
                                       "Dark"),
-                              inputColor: MihColors.getPrimaryColor(
+                              backgroundColor: MihColors.getPrimaryColor(
                                   MzansiInnovationHub.of(context)!.theme.mode ==
                                       "Dark"),
-                              controller: contactController,
+                              onChange: (selectedfile) {
-                              numberMode: true,
+                                setState(() {
-                              multiLineInput: false,
+                                  newSelectedLogoPic = selectedfile;
-                              requiredText: true,
+                                });
-                              hintText: null,
-                              validator: (value) {
-                                return MihValidationServices().isEmpty(value);
                               },
                             ),
                           ),
-                        ],
+                          Visibility(
-                      ),
+                            visible: false,
-                      const SizedBox(height: 10),
-                      MihTextFormField(
-                        height: 250,
-                        fillColor: MihColors.getSecondaryColor(
-                            MzansiInnovationHub.of(context)!.theme.mode ==
-                                "Dark"),
-                        inputColor: MihColors.getPrimaryColor(
-                            MzansiInnovationHub.of(context)!.theme.mode ==
-                                "Dark"),
-                        controller: missionVisionController,
-                        multiLineInput: true,
-                        requiredText: true,
-                        hintText: "Business Mission & Vision",
-                        validator: (value) {
-                          return MihValidationServices().validateLength(
-                              missionVisionController.text, 256);
-                        },
-                      ),
-                      SizedBox(
-                        height: 15,
-                        child: ValueListenableBuilder(
-                          valueListenable: _counter,
-                          builder:
-                              (BuildContext context, int value, Widget? child) {
-                            return Row(
-                              mainAxisSize: MainAxisSize.max,
-                              mainAxisAlignment: MainAxisAlignment.end,
-                              children: [
-                                Text(
-                                  "$value",
-                                  style: TextStyle(
-                                    color: getMissionVisionLimitColor(256),
-                                    fontWeight: FontWeight.bold,
-                                  ),
-                                ),
-                                const SizedBox(width: 5),
-                                Text(
-                                  "/256",
-                                  style: TextStyle(
-                                    color: getMissionVisionLimitColor(256),
-                                    fontWeight: FontWeight.bold,
-                                  ),
-                                ),
-                              ],
-                            );
-                          },
-                        ),
-                      ),
-                      const SizedBox(height: 10.0),
-                      MihTextFormField(
-                        fillColor: MihColors.getSecondaryColor(
-                            MzansiInnovationHub.of(context)!.theme.mode ==
-                                "Dark"),
-                        inputColor: MihColors.getPrimaryColor(
-                            MzansiInnovationHub.of(context)!.theme.mode ==
-                                "Dark"),
-                        controller: websiteController,
-                        multiLineInput: false,
-                        requiredText: false,
-                        hintText: "Business Website",
-                        validator: (value) {
-                          return MihValidationServices()
-                              .validateWebsite(value, false);
-                        },
-                      ),
-                      const SizedBox(height: 10),
-                      MihTextFormField(
-                        fillColor: MihColors.getSecondaryColor(
-                            MzansiInnovationHub.of(context)!.theme.mode ==
-                                "Dark"),
-                        inputColor: MihColors.getPrimaryColor(
-                            MzansiInnovationHub.of(context)!.theme.mode ==
-                                "Dark"),
-                        controller: regController,
-                        multiLineInput: false,
-                        requiredText: false,
-                        hintText: "Registration No.",
-                        validator: (value) {
-                          // return MihValidationServices().isEmpty(value);
-                          return null;
-                        },
-                      ),
-                      const SizedBox(height: 10),
-                      MihTextFormField(
-                        fillColor: MihColors.getSecondaryColor(
-                            MzansiInnovationHub.of(context)!.theme.mode ==
-                                "Dark"),
-                        inputColor: MihColors.getPrimaryColor(
-                            MzansiInnovationHub.of(context)!.theme.mode ==
-                                "Dark"),
-                        controller: practiceNoController,
-                        multiLineInput: false,
-                        requiredText: false,
-                        hintText: "Practice Number",
-                        validator: (validateValue) {
-                          return null;
-                        },
-                      ),
-                      const SizedBox(height: 10),
-                      MihTextFormField(
-                        fillColor: MihColors.getSecondaryColor(
-                            MzansiInnovationHub.of(context)!.theme.mode ==
-                                "Dark"),
-                        inputColor: MihColors.getPrimaryColor(
-                            MzansiInnovationHub.of(context)!.theme.mode ==
-                                "Dark"),
-                        controller: vatNoController,
-                        multiLineInput: false,
-                        requiredText: false,
-                        hintText: "VAT Number",
-                        validator: (value) {
-                          // return MihValidationServices().isEmpty(value);
-                          return null;
-                        },
-                      ),
-                      const SizedBox(height: 10),
-                      Row(
-                        crossAxisAlignment: CrossAxisAlignment.end,
-                        children: [
-                          Flexible(
                             child: MihTextFormField(
                               fillColor: MihColors.getSecondaryColor(
                                   MzansiInnovationHub.of(context)!.theme.mode ==
@@ -530,84 +296,374 @@ class _MihUpdateBusinessDetailsWindowState
                               inputColor: MihColors.getPrimaryColor(
                                   MzansiInnovationHub.of(context)!.theme.mode ==
                                       "Dark"),
-                              controller: locationController,
+                              controller: fileNameController,
                               multiLineInput: false,
                               requiredText: true,
                               readOnly: true,
-                              hintText: "GPS Location",
+                              hintText: "Selected File Name",
                             ),
                           ),
-                          const SizedBox(width: 10.0),
+                          const SizedBox(height: 20),
-                          MihButton(
+                          MihTextFormField(
-                            onPressed: () {
+                            fillColor: MihColors.getSecondaryColor(
-                              showDialog(
-                                context: context,
-                                builder: (context) {
-                                  return const Mihloadingcircle(
-                                    message: "Getting your location",
-                                  );
-                                },
-                              );
-                              MIHLocationAPI()
-                                  .getGPSPosition(context)
-                                  .then((position) {
-                                if (position != null) {
-                                  setState(() {
-                                    locationController.text =
-                                        "${position.latitude}, ${position.longitude}";
-                                  });
-                                }
-                                //Dismiss loading indicator
-                                context.pop();
-                              });
-                            },
-                            buttonColor: MihColors.getSecondaryColor(
                                 MzansiInnovationHub.of(context)!.theme.mode ==
                                     "Dark"),
-                            width: 100,
+                            inputColor: MihColors.getPrimaryColor(
-                            child: Text(
+                                MzansiInnovationHub.of(context)!.theme.mode ==
-                              "Set",
+                                    "Dark"),
+                            controller: nameController,
+                            multiLineInput: false,
+                            requiredText: true,
+                            hintText: "Business Name",
+                            validator: (value) {
+                              return MihValidationServices().isEmpty(value);
+                            },
+                          ),
+                          const SizedBox(height: 10),
+                          MihTextFormField(
+                            fillColor: MihColors.getSecondaryColor(
+                                MzansiInnovationHub.of(context)!.theme.mode ==
+                                    "Dark"),
+                            inputColor: MihColors.getPrimaryColor(
+                                MzansiInnovationHub.of(context)!.theme.mode ==
+                                    "Dark"),
+                            controller: typeController,
+                            multiLineInput: false,
+                            requiredText: true,
+                            hintText: "Business Type",
+                            validator: (value) {
+                              return MihValidationServices()
+                                  .validateNoSpecialChars(value);
+                            },
+                          ),
+                          const SizedBox(height: 10),
+                          MihTextFormField(
+                            fillColor: MihColors.getSecondaryColor(
+                                MzansiInnovationHub.of(context)!.theme.mode ==
+                                    "Dark"),
+                            inputColor: MihColors.getPrimaryColor(
+                                MzansiInnovationHub.of(context)!.theme.mode ==
+                                    "Dark"),
+                            controller: emailController,
+                            multiLineInput: false,
+                            requiredText: true,
+                            hintText: "Business Email",
+                            validator: (value) {
+                              return MihValidationServices()
+                                  .validateEmail(value);
+                            },
+                          ),
+                          const SizedBox(height: 10),
+                          Container(
+                            width: 300,
+                            alignment: Alignment.topLeft,
+                            child: const Text(
+                              "Contact Number:",
                               style: TextStyle(
-                                color: MihColors.getPrimaryColor(
+                                fontSize: 18,
-                                    MzansiInnovationHub.of(context)!
-                                            .theme
-                                            .mode ==
-                                        "Dark"),
-                                fontSize: 20,
                                 fontWeight: FontWeight.bold,
                               ),
                             ),
                           ),
-                        ],
+                          Row(
-                      ),
+                            crossAxisAlignment: CrossAxisAlignment.end,
-                      const SizedBox(height: 25),
+                            children: [
-                      Center(
+                              CountryCodePicker(
-                        child: MihButton(
+                                padding: EdgeInsetsGeometry.all(0),
-                          onPressed: () {
+                                onChanged: (selectedCode) {
-                            if (_formKey.currentState!.validate()) {
+                                  setState(() {
-                              submitForm(mzansiProfileProvider);
+                                    countryCodeController.text =
-                            } else {
+                                        selectedCode.toString();
-                              MihAlertServices().inputErrorAlert(context);
+                                  });
-                            }
+                                  debugPrint(
-                          },
+                                      "Selected Country Code: ${countryCodeController.text}");
-                          buttonColor: MihColors.getGreenColor(
+                                },
-                              MzansiInnovationHub.of(context)!.theme.mode ==
+                                initialSelection: countryCodeController.text,
-                                  "Dark"),
+                                showDropDownButton: false,
-                          width: 300,
+                                pickerStyle: PickerStyle.bottomSheet,
-                          child: Text(
+                                dialogBackgroundColor:
-                            "Update",
+                                    MihColors.getPrimaryColor(
-                            style: TextStyle(
+                                        MzansiInnovationHub.of(context)!
-                              color: MihColors.getPrimaryColor(
+                                                .theme
-                                  MzansiInnovationHub.of(context)!.theme.mode ==
+                                                .mode ==
-                                      "Dark"),
+                                            "Dark"),
-                              fontSize: 20,
+                                barrierColor: MihColors.getPrimaryColor(
-                              fontWeight: FontWeight.bold,
+                                    MzansiInnovationHub.of(context)!
+                                            .theme
+                                            .mode ==
+                                        "Dark"),
+                              ),
+                              Expanded(
+                                child: MihTextFormField(
+                                  fillColor: MihColors.getSecondaryColor(
+                                      MzansiInnovationHub.of(context)!
+                                              .theme
+                                              .mode ==
+                                          "Dark"),
+                                  inputColor: MihColors.getPrimaryColor(
+                                      MzansiInnovationHub.of(context)!
+                                              .theme
+                                              .mode ==
+                                          "Dark"),
+                                  controller: contactController,
+                                  numberMode: true,
+                                  multiLineInput: false,
+                                  requiredText: true,
+                                  hintText: null,
+                                  validator: (value) {
+                                    return MihValidationServices()
+                                        .isEmpty(value);
+                                  },
+                                ),
+                              ),
+                            ],
+                          ),
+                          const SizedBox(height: 10),
+                          MihTextFormField(
+                            height: 250,
+                            fillColor: MihColors.getSecondaryColor(
+                                MzansiInnovationHub.of(context)!.theme.mode ==
+                                    "Dark"),
+                            inputColor: MihColors.getPrimaryColor(
+                                MzansiInnovationHub.of(context)!.theme.mode ==
+                                    "Dark"),
+                            controller: missionVisionController,
+                            multiLineInput: true,
+                            requiredText: true,
+                            hintText: "Business Mission & Vision",
+                            validator: (value) {
+                              return MihValidationServices().validateLength(
+                                  missionVisionController.text, 256);
+                            },
+                          ),
+                          SizedBox(
+                            height: 15,
+                            child: ValueListenableBuilder(
+                              valueListenable: _counter,
+                              builder: (BuildContext context, int value,
+                                  Widget? child) {
+                                return Row(
+                                  mainAxisSize: MainAxisSize.max,
+                                  mainAxisAlignment: MainAxisAlignment.end,
+                                  children: [
+                                    Text(
+                                      "$value",
+                                      style: TextStyle(
+                                        color: getMissionVisionLimitColor(256),
+                                        fontWeight: FontWeight.bold,
+                                      ),
+                                    ),
+                                    const SizedBox(width: 5),
+                                    Text(
+                                      "/256",
+                                      style: TextStyle(
+                                        color: getMissionVisionLimitColor(256),
+                                        fontWeight: FontWeight.bold,
+                                      ),
+                                    ),
+                                  ],
+                                );
+                              },
                             ),
                           ),
+                          const SizedBox(height: 10.0),
+                          MihTextFormField(
+                            fillColor: MihColors.getSecondaryColor(
+                                MzansiInnovationHub.of(context)!.theme.mode ==
+                                    "Dark"),
+                            inputColor: MihColors.getPrimaryColor(
+                                MzansiInnovationHub.of(context)!.theme.mode ==
+                                    "Dark"),
+                            controller: websiteController,
+                            multiLineInput: false,
+                            requiredText: false,
+                            hintText: "Business Website",
+                            validator: (value) {
+                              return MihValidationServices()
+                                  .validateWebsite(value, false);
+                            },
+                          ),
+                          const SizedBox(height: 10),
+                          MihTextFormField(
+                            fillColor: MihColors.getSecondaryColor(
+                                MzansiInnovationHub.of(context)!.theme.mode ==
+                                    "Dark"),
+                            inputColor: MihColors.getPrimaryColor(
+                                MzansiInnovationHub.of(context)!.theme.mode ==
+                                    "Dark"),
+                            controller: regController,
+                            multiLineInput: false,
+                            requiredText: false,
+                            hintText: "Registration No.",
+                            validator: (value) {
+                              // return MihValidationServices().isEmpty(value);
+                              return null;
+                            },
+                          ),
+                          const SizedBox(height: 10),
+                          MihTextFormField(
+                            fillColor: MihColors.getSecondaryColor(
+                                MzansiInnovationHub.of(context)!.theme.mode ==
+                                    "Dark"),
+                            inputColor: MihColors.getPrimaryColor(
+                                MzansiInnovationHub.of(context)!.theme.mode ==
+                                    "Dark"),
+                            controller: practiceNoController,
+                            multiLineInput: false,
+                            requiredText: false,
+                            hintText: "Practice Number",
+                            validator: (validateValue) {
+                              return null;
+                            },
+                          ),
+                          const SizedBox(height: 10),
+                          MihTextFormField(
+                            fillColor: MihColors.getSecondaryColor(
+                                MzansiInnovationHub.of(context)!.theme.mode ==
+                                    "Dark"),
+                            inputColor: MihColors.getPrimaryColor(
+                                MzansiInnovationHub.of(context)!.theme.mode ==
+                                    "Dark"),
+                            controller: vatNoController,
+                            multiLineInput: false,
+                            requiredText: false,
+                            hintText: "VAT Number",
+                            validator: (value) {
+                              // return MihValidationServices().isEmpty(value);
+                              return null;
+                            },
+                          ),
+                          const SizedBox(height: 10),
+                          Row(
+                            crossAxisAlignment: CrossAxisAlignment.end,
+                            children: [
+                              Flexible(
+                                child: MihTextFormField(
+                                  fillColor: MihColors.getSecondaryColor(
+                                      MzansiInnovationHub.of(context)!
+                                              .theme
+                                              .mode ==
+                                          "Dark"),
+                                  inputColor: MihColors.getPrimaryColor(
+                                      MzansiInnovationHub.of(context)!
+                                              .theme
+                                              .mode ==
+                                          "Dark"),
+                                  controller: locationController,
+                                  multiLineInput: false,
+                                  requiredText: true,
+                                  readOnly: true,
+                                  hintText: "GPS Location",
+                                ),
+                              ),
+                              const SizedBox(width: 10.0),
+                              MihButton(
+                                onPressed: () {
+                                  showDialog(
+                                    context: context,
+                                    builder: (context) {
+                                      return const Mihloadingcircle(
+                                        message: "Getting your location",
+                                      );
+                                    },
+                                  );
+                                  MIHLocationAPI()
+                                      .getGPSPosition(context)
+                                      .then((position) {
+                                    if (position != null) {
+                                      setState(() {
+                                        locationController.text =
+                                            "${position.latitude}, ${position.longitude}";
+                                      });
+                                    }
+                                    //Dismiss loading indicator
+                                    context.pop();
+                                  });
+                                },
+                                buttonColor: MihColors.getSecondaryColor(
+                                    MzansiInnovationHub.of(context)!
+                                            .theme
+                                            .mode ==
+                                        "Dark"),
+                                width: 100,
+                                child: Text(
+                                  "Set",
+                                  style: TextStyle(
+                                    color: MihColors.getPrimaryColor(
+                                        MzansiInnovationHub.of(context)!
+                                                .theme
+                                                .mode ==
+                                            "Dark"),
+                                    fontSize: 20,
+                                    fontWeight: FontWeight.bold,
+                                  ),
+                                ),
+                              ),
+                            ],
+                          ),
+                          const SizedBox(height: 25),
+                          Center(
+                            child: MihButton(
+                              onPressed: () {
+                                if (_formKey.currentState!.validate()) {
+                                  submitForm(mzansiProfileProvider);
+                                } else {
+                                  MihAlertServices().inputErrorAlert(context);
+                                }
+                              },
+                              buttonColor: MihColors.getGreenColor(
+                                  MzansiInnovationHub.of(context)!.theme.mode ==
+                                      "Dark"),
+                              width: 300,
+                              child: Text(
+                                "Update",
+                                style: TextStyle(
+                                  color: MihColors.getPrimaryColor(
+                                      MzansiInnovationHub.of(context)!
+                                              .theme
+                                              .mode ==
+                                          "Dark"),
+                                  fontSize: 20,
+                                  fontWeight: FontWeight.bold,
+                                ),
+                              ),
+                            ),
+                          ),
+                          const SizedBox(height: 20),
+                        ],
+                      ),
+                    ],
+                  ),
+                  Positioned(
+                    right: 0,
+                    top: 0,
+                    child: MihButton(
+                      onPressed: () {
+                        //Add validation here
+                        if (_formKey.currentState!.validate()) {
+                          submitForm(mzansiProfileProvider);
+                        } else {
+                          MihAlertServices().inputErrorAlert(context);
+                        }
+                      },
+                      buttonColor: MihColors.getGreenColor(
+                          MzansiInnovationHub.of(context)!.theme.mode ==
+                              "Dark"),
+                      width: 100,
+                      height: 25,
+                      child: Text(
+                        mzansiProfileProvider.user!.username.isEmpty
+                            ? "Setup Profile"
+                            : "Update",
+                        style: TextStyle(
+                          color: MihColors.getPrimaryColor(
+                              MzansiInnovationHub.of(context)!.theme.mode ==
+                                  "Dark"),
+                          fontSize: 15,
+                          fontWeight: FontWeight.bold,
                         ),
                       ),
-                      const SizedBox(height: 20),
+                    ),
-                    ],
                   ),
                 ],
               ),

mih_ui/lib/mih_packages/mzansi_profile/business_profile/components/mih_update_my_business_user_details.dart

@@ -127,6 +127,7 @@ class _MihUpdateMyBusinessUserDetailsState
       builder: (BuildContext context,
           MzansiProfileProvider mzansiProfileProvider, Widget? child) {
         return MihSingleChildScroll(
+          scrollbarOn: true,
           child: Padding(
             padding:
                 MzansiInnovationHub.of(context)!.theme.screenType == "desktop"

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

@@ -1,9 +1,10 @@
+import 'package:custom_rating_bar/custom_rating_bar.dart';
 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_package_components/mih_business_info_card_v2.dart';
 import 'package:mzansi_innovation_hub/mih_providers/mzansi_profile_provider.dart';
 import 'package:mzansi_innovation_hub/mih_config/mih_colors.dart';
-import 'package:mzansi_innovation_hub/mih_package_components/mih_business_info_card.dart';
 import 'package:mzansi_innovation_hub/mih_packages/mzansi_profile/business_profile/components/mih_update_business_details_window.dart';
 import 'package:mzansi_innovation_hub/mih_package_components/mih_single_child_scroll.dart';
 import 'package:mzansi_innovation_hub/mih_package_components/mih_button.dart';
@@ -60,32 +61,62 @@ class _MihBusinessDetailsState extends State<MihBusinessDetails> {
         return Stack(
           children: [
             MihSingleChildScroll(
+              scrollbarOn: true,
               child: Padding(
                 padding: MzansiInnovationHub.of(context)!.theme.screenType ==
                         "desktop"
                     ? EdgeInsets.symmetric(horizontal: width * 0.2)
-                    : EdgeInsets.symmetric(horizontal: width * 0.075),
+                    : EdgeInsets.symmetric(horizontal: width * 0),
                 child: Column(
                   children: [
                     Center(
-                      child: MihCircleAvatar(
+                      child: Stack(
-                        key: UniqueKey(),
+                        children: [
-                        imageFile: mzansiProfileProvider.businessProfilePicture,
+                          MihCircleAvatar(
-                        width: 150,
+                            key: UniqueKey(),
-                        editable: false,
+                            imageFile:
-                        fileNameController: fileNameController,
+                                mzansiProfileProvider.businessProfilePicture,
-                        userSelectedfile: newSelectedLogoPic,
+                            width: 150,
-                        frameColor: MihColors.getSecondaryColor(
+                            editable: false,
-                            MzansiInnovationHub.of(context)!.theme.mode ==
+                            fileNameController: fileNameController,
-                                "Dark"),
+                            userSelectedfile: newSelectedLogoPic,
-                        backgroundColor: MihColors.getPrimaryColor(
+                            frameColor: MihColors.getSecondaryColor(
-                            MzansiInnovationHub.of(context)!.theme.mode ==
+                                MzansiInnovationHub.of(context)!.theme.mode ==
-                                "Dark"),
+                                    "Dark"),
-                        onChange: (selectedfile) {
+                            backgroundColor: MihColors.getPrimaryColor(
-                          setState(() {
+                                MzansiInnovationHub.of(context)!.theme.mode ==
-                            newSelectedLogoPic = selectedfile;
+                                    "Dark"),
-                          });
+                            onChange: (selectedfile) {
-                        },
+                              setState(() {
+                                newSelectedLogoPic = selectedfile;
+                              });
+                            },
+                          ),
+                          Positioned(
+                            bottom: 5,
+                            right: 5,
+                            child: MihButton(
+                              onPressed: () {
+                                // editProfileWindow(width);
+                                editBizProfileWindow(
+                                    mzansiProfileProvider, width);
+                              },
+                              buttonColor: MihColors.getGreenColor(
+                                  MzansiInnovationHub.of(context)!.theme.mode ==
+                                      "Dark"),
+                              width: 35,
+                              height: 35,
+                              child: Icon(
+                                Icons.edit,
+                                color: MihColors.getPrimaryColor(
+                                    MzansiInnovationHub.of(context)!
+                                            .theme
+                                            .mode ==
+                                        "Dark"),
+                              ),
+                            ),
+                          ),
+                        ],
                       ),
                     ),
                     FittedBox(
@@ -112,6 +143,30 @@ class _MihBusinessDetailsState extends State<MihBusinessDetails> {
                         ),
                       ),
                     ),
+                    RatingBar.readOnly(
+                      size: 50,
+                      alignment: Alignment.center,
+                      filledIcon: Icons.star,
+                      emptyIcon: Icons.star_border,
+                      halfFilledIcon: Icons.star_half,
+                      filledColor: MihColors.getYellowColor(
+                          MzansiInnovationHub.of(context)!.theme.mode ==
+                              "Dark"),
+                      // MihColors.getPrimaryColor(MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+                      emptyColor: MihColors.getSecondaryColor(
+                          MzansiInnovationHub.of(context)!.theme.mode ==
+                              "Dark"),
+                      halfFilledColor: MihColors.getYellowColor(
+                          MzansiInnovationHub.of(context)!.theme.mode ==
+                              "Dark"),
+                      // MihColors.getPrimaryColor(MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+                      isHalfAllowed: true,
+                      initialRating: mzansiProfileProvider
+                              .business!.rating.isNotEmpty
+                          ? double.parse(mzansiProfileProvider.business!.rating)
+                          : 0,
+                      maxRating: 5,
+                    ),
                     const SizedBox(height: 5),
                     Center(
                       child: SizedBox(
@@ -133,68 +188,16 @@ class _MihBusinessDetailsState extends State<MihBusinessDetails> {
                       ),
                     ),
                     const SizedBox(height: 20),
-                    SizedBox(
+                    MihBusinessCardV2(
-                      width: 700,
+                      business: mzansiProfileProvider.business!,
-                      child: MihBusinessCard(
+                      // startUpSearch: null,
-                        business: mzansiProfileProvider.business!,
+                      width: width,
-                        // startUpSearch: null,
-                        width: width,
-                      ),
                     ),
                     const SizedBox(height: 30.0),
-                    Center(
-                      child: MihButton(
-                        onPressed: () {
-                          // Connect with the user
-                          editBizProfileWindow(mzansiProfileProvider, width);
-                        },
-                        buttonColor: MihColors.getGreenColor(
-                            MzansiInnovationHub.of(context)!.theme.mode ==
-                                "Dark"),
-                        width: 300,
-                        child: Text(
-                          "Edit Profile",
-                          style: TextStyle(
-                            color: MihColors.getPrimaryColor(
-                                MzansiInnovationHub.of(context)!.theme.mode ==
-                                    "Dark"),
-                            fontSize: 20,
-                            fontWeight: FontWeight.bold,
-                          ),
-                        ),
-                      ),
-                    ),
                   ],
                 ),
               ),
             ),
-            // Positioned(
-            //   right: 5,
-            //   bottom: 10,
-            //   child: MihFloatingMenu(
-            //     animatedIcon: AnimatedIcons.menu_close,
-            //     children: [
-            //       SpeedDialChild(
-            //         child: Icon(
-            //           Icons.edit,
-            //           color: MihColors.getPrimaryColor(MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
-            //         ),
-            //         label: "Edit Profile",
-            //         labelBackgroundColor:
-            //             MihColors.getGreenColor(MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
-            //         labelStyle: TextStyle(
-            //           color: MihColors.getPrimaryColor(MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
-            //           fontWeight: FontWeight.bold,
-            //         ),
-            //         backgroundColor:
-            //             MihColors.getGreenColor(MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
-            //         onTap: () {
-            //           editBizProfileWindow(width);
-            //         },
-            //       )
-            //     ],
-            //   ),
-            // ),
           ],
         );
       },

mih_ui/lib/mih_packages/mzansi_profile/business_profile/package_tools/mih_business_details_set_up.dart

@@ -765,7 +765,7 @@ class _MihBusinessDetailsSetUpState extends State<MihBusinessDetailsSetUp> {
                                   "Dark"),
                           width: 300,
                           child: Text(
-                            "Add",
+                            "Set Up Buasiness",
                             style: TextStyle(
                               color: MihColors.getPrimaryColor(
                                   MzansiInnovationHub.of(context)!.theme.mode ==

mih_ui/lib/mih_packages/mzansi_profile/business_profile/package_tools/mih_business_details_view.dart

@@ -3,10 +3,10 @@ import 'package:custom_rating_bar/custom_rating_bar.dart';
 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_package_components/mih_business_info_card_v2.dart';
 import 'package:mzansi_innovation_hub/mih_package_components/mih_icons.dart';
 import 'package:mzansi_innovation_hub/mih_providers/mzansi_directory_provider.dart';
 import 'package:mzansi_innovation_hub/mih_config/mih_colors.dart';
-import 'package:mzansi_innovation_hub/mih_package_components/mih_business_info_card.dart';
 import 'package:mzansi_innovation_hub/mih_services/mih_file_services.dart';
 import 'package:mzansi_innovation_hub/mih_package_components/mih_single_child_scroll.dart';
 import 'package:mzansi_innovation_hub/mih_package_components/mih_package_tool_body.dart';
@@ -58,11 +58,12 @@ class _MihBusinessDetailsViewState extends State<MihBusinessDetailsView> {
         return Stack(
           children: [
             MihSingleChildScroll(
+              scrollbarOn: true,
               child: Padding(
                 padding: MzansiInnovationHub.of(context)!.theme.screenType ==
                         "desktop"
                     ? EdgeInsets.symmetric(horizontal: width * 0.2)
-                    : EdgeInsets.symmetric(horizontal: width * 0.075),
+                    : EdgeInsets.symmetric(horizontal: width * 0),
                 child: Column(
                   children: [
                     FutureBuilder(
@@ -154,40 +155,6 @@ class _MihBusinessDetailsViewState extends State<MihBusinessDetailsView> {
                         ),
                       ),
                     ),
-                    const SizedBox(height: 5),
-                    // FittedBox(
-                    //   child: Text(
-                    //     "Mission & Vision",
-                    //     style: TextStyle(
-                    //       fontSize: 15,
-                    //       fontWeight: FontWeight.bold,
-                    //       color: MzansiInnovationHub.of(context)!
-                    //           .theme
-                    //           .secondaryColor(),
-                    //     ),
-                    //   ),
-                    // ),
-                    Center(
-                      child: SizedBox(
-                        width: 700,
-                        child: Text(
-                          directoryProvider
-                                  .selectedBusiness!.mission_vision.isNotEmpty
-                              ? directoryProvider
-                                  .selectedBusiness!.mission_vision
-                              : "No Mission & Vision added yet",
-                          textAlign: TextAlign.center,
-                          style: TextStyle(
-                            fontSize: 15,
-                            fontWeight: FontWeight.bold,
-                            color: MihColors.getSecondaryColor(
-                                MzansiInnovationHub.of(context)!.theme.mode ==
-                                    "Dark"),
-                          ),
-                        ),
-                      ),
-                    ),
-                    const SizedBox(height: 10),
                     RatingBar.readOnly(
                       size: 50,
                       alignment: Alignment.center,
@@ -213,14 +180,32 @@ class _MihBusinessDetailsViewState extends State<MihBusinessDetailsView> {
                               : 0,
                       maxRating: 5,
                     ),
-                    const SizedBox(height: 20),
+                    const SizedBox(height: 5),
-                    SizedBox(
+                    Center(
-                      width: 700,
+                      child: SizedBox(
-                      child: MihBusinessCard(
+                        width: 700,
-                        business: directoryProvider.selectedBusiness!,
+                        child: Text(
-                        width: width,
+                          directoryProvider
+                                  .selectedBusiness!.mission_vision.isNotEmpty
+                              ? directoryProvider
+                                  .selectedBusiness!.mission_vision
+                              : "No Mission & Vision added yet",
+                          textAlign: TextAlign.center,
+                          style: TextStyle(
+                            fontSize: 15,
+                            fontWeight: FontWeight.bold,
+                            color: MihColors.getSecondaryColor(
+                                MzansiInnovationHub.of(context)!.theme.mode ==
+                                    "Dark"),
+                          ),
+                        ),
                       ),
                     ),
+                    const SizedBox(height: 20),
+                    MihBusinessCardV2(
+                      business: directoryProvider.selectedBusiness!,
+                      width: width,
+                    ),
                   ],
                 ),
               ),

mih_ui/lib/mih_packages/mzansi_profile/business_profile/package_tools/mih_business_qr_code.dart

@@ -367,6 +367,7 @@ class _MihBusinessQrCodeState extends State<MihBusinessQrCode> {
       alignment: Alignment.topCenter,
       children: [
         MihSingleChildScroll(
+          scrollbarOn: true,
           child: Padding(
             padding: const EdgeInsets.symmetric(horizontal: 15.0),
             child: Padding(

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

@@ -175,6 +175,7 @@ class _MihMyBusinessUserState extends State<MihMyBusinessUser> {
         return Stack(
           children: [
             MihSingleChildScroll(
+              scrollbarOn: true,
               child: Padding(
                 padding: MzansiInnovationHub.of(context)!.theme.screenType ==
                         "desktop"

mih_ui/lib/mih_packages/mzansi_profile/personal_profile/components/mih_edit_personal_profile_window.dart

@@ -329,195 +329,232 @@ class _MihEditPersonalProfileWindowState
                 MzansiInnovationHub.of(context)!.theme.screenType == "desktop"
                     ? EdgeInsets.symmetric(horizontal: screenWidth * 0.05)
                     : EdgeInsets.symmetric(horizontal: screenWidth * 0),
-            child: Column(
+            child: Stack(
-              mainAxisAlignment: MainAxisAlignment.start,
               children: [
-                MihForm(
+                Column(
-                  formKey: _formKey,
+                  mainAxisAlignment: MainAxisAlignment.start,
-                  formFields: [
+                  children: [
-                    Center(
+                    MihForm(
-                      child: MihCircleAvatar(
+                      formKey: _formKey,
-                        imageFile: newSelectedProPic != null
+                      formFields: [
-                            ? MemoryImage(newSelectedProPic!.bytes!)
+                        Center(
-                            : mzansiProfileProvider.userProfilePicture,
+                          child: MihCircleAvatar(
-                        width: 150,
+                            imageFile: newSelectedProPic != null
-                        editable: true,
+                                ? MemoryImage(newSelectedProPic!.bytes!)
-                        fileNameController: proPicController,
+                                : mzansiProfileProvider.userProfilePicture,
-                        userSelectedfile: newSelectedProPic,
+                            width: 150,
-                        frameColor: MihColors.getSecondaryColor(
+                            editable: true,
-                            MzansiInnovationHub.of(context)!.theme.mode ==
+                            fileNameController: proPicController,
-                                "Dark"),
+                            userSelectedfile: newSelectedProPic,
-                        backgroundColor: MihColors.getPrimaryColor(
+                            frameColor: MihColors.getSecondaryColor(
-                            MzansiInnovationHub.of(context)!.theme.mode ==
-                                "Dark"),
-                        onChange: (selectedImage) {
-                          setState(() {
-                            newSelectedProPic = selectedImage;
-                          });
-                        },
-                      ),
-                    ),
-                    // const SizedBox(height: 25.0),
-                    Visibility(
-                      visible: false,
-                      child: MihTextFormField(
-                        fillColor: MihColors.getSecondaryColor(
-                            MzansiInnovationHub.of(context)!.theme.mode ==
-                                "Dark"),
-                        inputColor: MihColors.getPrimaryColor(
-                            MzansiInnovationHub.of(context)!.theme.mode ==
-                                "Dark"),
-                        controller: proPicController,
-                        multiLineInput: false,
-                        requiredText: true,
-                        readOnly: true,
-                        hintText: "Selected File Name",
-                      ),
-                    ),
-                    const SizedBox(height: 10.0),
-                    MihTextFormField(
-                      fillColor: MihColors.getSecondaryColor(
-                          MzansiInnovationHub.of(context)!.theme.mode ==
-                              "Dark"),
-                      inputColor: MihColors.getPrimaryColor(
-                          MzansiInnovationHub.of(context)!.theme.mode ==
-                              "Dark"),
-                      controller: usernameController,
-                      multiLineInput: false,
-                      requiredText: true,
-                      hintText: "Username",
-                      validator: (value) {
-                        return MihValidationServices().validateUsername(value);
-                      },
-                    ),
-                    const SizedBox(height: 10.0),
-                    MihTextFormField(
-                      fillColor: MihColors.getSecondaryColor(
-                          MzansiInnovationHub.of(context)!.theme.mode ==
-                              "Dark"),
-                      inputColor: MihColors.getPrimaryColor(
-                          MzansiInnovationHub.of(context)!.theme.mode ==
-                              "Dark"),
-                      controller: fnameController,
-                      multiLineInput: false,
-                      requiredText: true,
-                      hintText: "First Name",
-                      validator: (value) {
-                        return MihValidationServices().isEmpty(value);
-                      },
-                    ),
-                    const SizedBox(height: 10.0),
-                    MihTextFormField(
-                      fillColor: MihColors.getSecondaryColor(
-                          MzansiInnovationHub.of(context)!.theme.mode ==
-                              "Dark"),
-                      inputColor: MihColors.getPrimaryColor(
-                          MzansiInnovationHub.of(context)!.theme.mode ==
-                              "Dark"),
-                      controller: lnameController,
-                      multiLineInput: false,
-                      requiredText: true,
-                      hintText: "Last Name",
-                      validator: (value) {
-                        return MihValidationServices().isEmpty(value);
-                      },
-                    ),
-                    const SizedBox(height: 10.0),
-                    MihTextFormField(
-                      height: 250,
-                      fillColor: MihColors.getSecondaryColor(
-                          MzansiInnovationHub.of(context)!.theme.mode ==
-                              "Dark"),
-                      inputColor: MihColors.getPrimaryColor(
-                          MzansiInnovationHub.of(context)!.theme.mode ==
-                              "Dark"),
-                      controller: purposeController,
-                      multiLineInput: true,
-                      requiredText: true,
-                      hintText: "Your Personal Mission",
-                      validator: (value) {
-                        return MihValidationServices()
-                            .validateLength(purposeController.text, 256);
-                      },
-                    ),
-                    SizedBox(
-                      height: 15,
-                      child: ValueListenableBuilder(
-                        valueListenable: _counter,
-                        builder:
-                            (BuildContext context, int value, Widget? child) {
-                          return Row(
-                            mainAxisSize: MainAxisSize.max,
-                            mainAxisAlignment: MainAxisAlignment.end,
-                            children: [
-                              Text(
-                                "$value",
-                                style: TextStyle(
-                                  color: getPurposeLimitColor(256),
-                                  fontWeight: FontWeight.bold,
-                                ),
-                              ),
-                              const SizedBox(width: 5),
-                              Text(
-                                "/256",
-                                style: TextStyle(
-                                  color: getPurposeLimitColor(256),
-                                  fontWeight: FontWeight.bold,
-                                ),
-                              ),
-                            ],
-                          );
-                        },
-                      ),
-                    ),
-                    const SizedBox(height: 10.0),
-                    MihToggle(
-                      hintText: "Activate Business Account",
-                      initialPostion: businessUser,
-                      fillColor: MihColors.getSecondaryColor(
-                          MzansiInnovationHub.of(context)!.theme.mode ==
-                              "Dark"),
-                      secondaryFillColor: MihColors.getPrimaryColor(
-                          MzansiInnovationHub.of(context)!.theme.mode ==
-                              "Dark"),
-                      onChange: (value) {
-                        setState(() {
-                          businessUser = value;
-                        });
-                        KenLogger.success("Business User: $businessUser");
-                      },
-                    ),
-                    const SizedBox(height: 30.0),
-                    Center(
-                      child: MihButton(
-                        onPressed: () {
-                          //Add validation here
-                          if (_formKey.currentState!.validate()) {
-                            submitForm(mzansiProfileProvider);
-                          } else {
-                            MihAlertServices().inputErrorAlert(context);
-                          }
-                        },
-                        buttonColor: MihColors.getGreenColor(
-                            MzansiInnovationHub.of(context)!.theme.mode ==
-                                "Dark"),
-                        width: 300,
-                        child: Text(
-                          mzansiProfileProvider.user!.username.isEmpty
-                              ? "Setup Profile"
-                              : "Update",
-                          style: TextStyle(
-                            color: MihColors.getPrimaryColor(
                                 MzansiInnovationHub.of(context)!.theme.mode ==
                                     "Dark"),
-                            fontSize: 20,
+                            backgroundColor: MihColors.getPrimaryColor(
-                            fontWeight: FontWeight.bold,
+                                MzansiInnovationHub.of(context)!.theme.mode ==
+                                    "Dark"),
+                            onChange: (selectedImage) {
+                              setState(() {
+                                newSelectedProPic = selectedImage;
+                              });
+                            },
                           ),
                         ),
-                      ),
+                        // const SizedBox(height: 25.0),
+                        Visibility(
+                          visible: false,
+                          child: MihTextFormField(
+                            fillColor: MihColors.getSecondaryColor(
+                                MzansiInnovationHub.of(context)!.theme.mode ==
+                                    "Dark"),
+                            inputColor: MihColors.getPrimaryColor(
+                                MzansiInnovationHub.of(context)!.theme.mode ==
+                                    "Dark"),
+                            controller: proPicController,
+                            multiLineInput: false,
+                            requiredText: true,
+                            readOnly: true,
+                            hintText: "Selected File Name",
+                          ),
+                        ),
+                        const SizedBox(height: 10.0),
+                        MihTextFormField(
+                          fillColor: MihColors.getSecondaryColor(
+                              MzansiInnovationHub.of(context)!.theme.mode ==
+                                  "Dark"),
+                          inputColor: MihColors.getPrimaryColor(
+                              MzansiInnovationHub.of(context)!.theme.mode ==
+                                  "Dark"),
+                          controller: usernameController,
+                          multiLineInput: false,
+                          requiredText: true,
+                          hintText: "Username",
+                          validator: (value) {
+                            return MihValidationServices()
+                                .validateUsername(value);
+                          },
+                        ),
+                        const SizedBox(height: 10.0),
+                        MihTextFormField(
+                          fillColor: MihColors.getSecondaryColor(
+                              MzansiInnovationHub.of(context)!.theme.mode ==
+                                  "Dark"),
+                          inputColor: MihColors.getPrimaryColor(
+                              MzansiInnovationHub.of(context)!.theme.mode ==
+                                  "Dark"),
+                          controller: fnameController,
+                          multiLineInput: false,
+                          requiredText: true,
+                          hintText: "First Name",
+                          validator: (value) {
+                            return MihValidationServices().isEmpty(value);
+                          },
+                        ),
+                        const SizedBox(height: 10.0),
+                        MihTextFormField(
+                          fillColor: MihColors.getSecondaryColor(
+                              MzansiInnovationHub.of(context)!.theme.mode ==
+                                  "Dark"),
+                          inputColor: MihColors.getPrimaryColor(
+                              MzansiInnovationHub.of(context)!.theme.mode ==
+                                  "Dark"),
+                          controller: lnameController,
+                          multiLineInput: false,
+                          requiredText: true,
+                          hintText: "Last Name",
+                          validator: (value) {
+                            return MihValidationServices().isEmpty(value);
+                          },
+                        ),
+                        const SizedBox(height: 10.0),
+                        MihTextFormField(
+                          height: 250,
+                          fillColor: MihColors.getSecondaryColor(
+                              MzansiInnovationHub.of(context)!.theme.mode ==
+                                  "Dark"),
+                          inputColor: MihColors.getPrimaryColor(
+                              MzansiInnovationHub.of(context)!.theme.mode ==
+                                  "Dark"),
+                          controller: purposeController,
+                          multiLineInput: true,
+                          requiredText: true,
+                          hintText: "Your Personal Mission",
+                          validator: (value) {
+                            return MihValidationServices()
+                                .validateLength(purposeController.text, 256);
+                          },
+                        ),
+                        SizedBox(
+                          height: 15,
+                          child: ValueListenableBuilder(
+                            valueListenable: _counter,
+                            builder: (BuildContext context, int value,
+                                Widget? child) {
+                              return Row(
+                                mainAxisSize: MainAxisSize.max,
+                                mainAxisAlignment: MainAxisAlignment.end,
+                                children: [
+                                  Text(
+                                    "$value",
+                                    style: TextStyle(
+                                      color: getPurposeLimitColor(256),
+                                      fontWeight: FontWeight.bold,
+                                    ),
+                                  ),
+                                  const SizedBox(width: 5),
+                                  Text(
+                                    "/256",
+                                    style: TextStyle(
+                                      color: getPurposeLimitColor(256),
+                                      fontWeight: FontWeight.bold,
+                                    ),
+                                  ),
+                                ],
+                              );
+                            },
+                          ),
+                        ),
+                        const SizedBox(height: 10.0),
+                        MihToggle(
+                          hintText: "Activate Business Account",
+                          initialPostion: businessUser,
+                          fillColor: MihColors.getSecondaryColor(
+                              MzansiInnovationHub.of(context)!.theme.mode ==
+                                  "Dark"),
+                          secondaryFillColor: MihColors.getPrimaryColor(
+                              MzansiInnovationHub.of(context)!.theme.mode ==
+                                  "Dark"),
+                          onChange: (value) {
+                            setState(() {
+                              businessUser = value;
+                            });
+                            KenLogger.success("Business User: $businessUser");
+                          },
+                        ),
+                        const SizedBox(height: 30.0),
+                        Center(
+                          child: MihButton(
+                            onPressed: () {
+                              //Add validation here
+                              if (_formKey.currentState!.validate()) {
+                                submitForm(mzansiProfileProvider);
+                              } else {
+                                MihAlertServices().inputErrorAlert(context);
+                              }
+                            },
+                            buttonColor: MihColors.getGreenColor(
+                                MzansiInnovationHub.of(context)!.theme.mode ==
+                                    "Dark"),
+                            width: 300,
+                            child: Text(
+                              mzansiProfileProvider.user!.username.isEmpty
+                                  ? "Setup Profile"
+                                  : "Update",
+                              style: TextStyle(
+                                color: MihColors.getPrimaryColor(
+                                    MzansiInnovationHub.of(context)!
+                                            .theme
+                                            .mode ==
+                                        "Dark"),
+                                fontSize: 20,
+                                fontWeight: FontWeight.bold,
+                              ),
+                            ),
+                          ),
+                        ),
+                      ],
                     ),
                   ],
                 ),
+                Positioned(
+                  right: 0,
+                  top: 0,
+                  child: MihButton(
+                    onPressed: () {
+                      //Add validation here
+                      if (_formKey.currentState!.validate()) {
+                        submitForm(mzansiProfileProvider);
+                      } else {
+                        MihAlertServices().inputErrorAlert(context);
+                      }
+                    },
+                    buttonColor: MihColors.getGreenColor(
+                        MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+                    width: 100,
+                    height: 25,
+                    child: Text(
+                      mzansiProfileProvider.user!.username.isEmpty
+                          ? "Setup Profile"
+                          : "Update",
+                      style: TextStyle(
+                        color: MihColors.getPrimaryColor(
+                            MzansiInnovationHub.of(context)!.theme.mode ==
+                                "Dark"),
+                        fontSize: 15,
+                        fontWeight: FontWeight.bold,
+                      ),
+                    ),
+                  ),
+                ),
               ],
             ),
           ),

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

@@ -146,6 +146,7 @@ class _MihPersonalProfileState extends State<MihPersonalProfile> {
           );
         } else {
           return MihSingleChildScroll(
+            scrollbarOn: true,
             child: Padding(
               padding:
                   MzansiInnovationHub.of(context)!.theme.screenType == "desktop"

mih_ui/lib/mih_packages/mzansi_profile/personal_profile/package_tools/mih_personal_profile_view.dart

@@ -54,6 +54,7 @@ class _MihPersonalProfileViewState extends State<MihPersonalProfileView> {
       builder: (BuildContext context, MzansiDirectoryProvider directoryProvider,
           Widget? child) {
         return MihSingleChildScroll(
+          scrollbarOn: true,
           child: Padding(
             padding:
                 MzansiInnovationHub.of(context)!.theme.screenType == "desktop"

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

@@ -81,6 +81,7 @@ class _MihPersonalSettingsState extends State<MihPersonalSettings> {
 
   Widget getBody(MzansiProfileProvider mzansiProfileProvider) {
     return MihSingleChildScroll(
+      scrollbarOn: true,
       child: Column(
         children: [
           Center(

mih_ui/lib/mih_packages/patient_manager/pat_profile/package_tools/patient_info.dart

@@ -306,6 +306,7 @@ class _PatientInfoState extends State<PatientInfo> {
         return Stack(
           children: [
             MihSingleChildScroll(
+              scrollbarOn: true,
               child: Column(
                 mainAxisAlignment: MainAxisAlignment.start,
                 children: [

mih_ui/lib/mih_providers/mzansi_ai_provider.dart

@@ -20,7 +20,7 @@ class MzansiAiProvider extends ChangeNotifier {
     ollamaProvider = OllamaProvider(
         baseUrl: "${AppEnviroment.baseAiUrl}/api",
         model: AppEnviroment.getEnv() == "Prod"
-            ? 'qwen3-vl:8b'
+            ? 'qwen3-vl:8b-instruct'
             : "qwen3-vl:2b-instruct",
         think: false,
         systemPrompt: "---INSTRUCTION START---\n"

mih_ui/lib/mih_services/mih_alert_services.dart

@@ -32,6 +32,7 @@ class MihAlertServices {
             backgroundColor: MihColors.getRedColor(
                 MzansiInnovationHub.of(context)!.theme.mode != "Dark"),
             windowBody: MihSingleChildScroll(
+              scrollbarOn: true,
               child: Column(
                 children: [
                   Icon(
@@ -109,6 +110,7 @@ class MihAlertServices {
             backgroundColor: MihColors.getRedColor(
                 MzansiInnovationHub.of(context)!.theme.mode != "Dark"),
             windowBody: MihSingleChildScroll(
+              scrollbarOn: true,
               child: Column(
                 children: [
                   Icon(
@@ -186,6 +188,7 @@ class MihAlertServices {
             backgroundColor: MihColors.getRedColor(
                 MzansiInnovationHub.of(context)!.theme.mode != "Dark"),
             windowBody: MihSingleChildScroll(
+              scrollbarOn: true,
               child: Column(
                 children: [
                   Icon(
@@ -298,6 +301,7 @@ class MihAlertServices {
             backgroundColor: MihColors.getRedColor(
                 MzansiInnovationHub.of(context)!.theme.mode != "Dark"),
             windowBody: MihSingleChildScroll(
+              scrollbarOn: true,
               child: Column(
                 children: [
                   Icon(
@@ -416,6 +420,7 @@ class MihAlertServices {
             backgroundColor: MihColors.getRedColor(
                 MzansiInnovationHub.of(context)!.theme.mode != "Dark"),
             windowBody: MihSingleChildScroll(
+              scrollbarOn: true,
               child: Column(
                 children: [
                   Icon(
@@ -493,6 +498,7 @@ class MihAlertServices {
             backgroundColor: MihColors.getRedColor(
                 MzansiInnovationHub.of(context)!.theme.mode != "Dark"),
             windowBody: MihSingleChildScroll(
+              scrollbarOn: true,
               child: Column(
                 children: [
                   Icon(
@@ -594,6 +600,7 @@ class MihAlertServices {
             backgroundColor: MihColors.getRedColor(
                 MzansiInnovationHub.of(context)!.theme.mode != "Dark"),
             windowBody: MihSingleChildScroll(
+              scrollbarOn: true,
               child: Column(
                 children: [
                   Icon(
@@ -671,6 +678,7 @@ class MihAlertServices {
             backgroundColor: MihColors.getRedColor(
                 MzansiInnovationHub.of(context)!.theme.mode != "Dark"),
             windowBody: MihSingleChildScroll(
+              scrollbarOn: true,
               child: Column(
                 children: [
                   Icon(
@@ -748,6 +756,7 @@ class MihAlertServices {
             backgroundColor: MihColors.getSecondaryColor(
                 MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
             windowBody: MihSingleChildScroll(
+              scrollbarOn: true,
               child: Column(
                 children: [
                   Icon(
@@ -830,6 +839,7 @@ class MihAlertServices {
             backgroundColor: MihColors.getSecondaryColor(
                 MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
             windowBody: MihSingleChildScroll(
+              scrollbarOn: true,
               child: Column(
                 children: [
                   Icon(
@@ -900,6 +910,7 @@ class MihAlertServices {
             backgroundColor: MihColors.getRedColor(
                 MzansiInnovationHub.of(context)!.theme.mode != "Dark"),
             windowBody: MihSingleChildScroll(
+              scrollbarOn: true,
               child: Column(
                 children: [
                   Icon(
@@ -1007,6 +1018,7 @@ class MihAlertServices {
             backgroundColor: MihColors.getGreenColor(
                 MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
             windowBody: MihSingleChildScroll(
+              scrollbarOn: true,
               child: Column(
                 children: [
                   Icon(
@@ -1089,6 +1101,7 @@ class MihAlertServices {
             backgroundColor: MihColors.getGreenColor(
                 MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
             windowBody: MihSingleChildScroll(
+              scrollbarOn: true,
               child: Column(
                 children: [
                   Icon(
@@ -1159,6 +1172,7 @@ class MihAlertServices {
             backgroundColor: MihColors.getRedColor(
                 MzansiInnovationHub.of(context)!.theme.mode != "Dark"),
             windowBody: MihSingleChildScroll(
+              scrollbarOn: true,
               child: Column(
                 children: [
                   Icon(
@@ -1244,6 +1258,7 @@ class MihAlertServices {
             backgroundColor: MihColors.getRedColor(
                 MzansiInnovationHub.of(context)!.theme.mode != "Dark"),
             windowBody: MihSingleChildScroll(
+              scrollbarOn: true,
               child: Column(
                 children: [
                   Icon(

mih_ui/pubspec.yaml

@@ -1,7 +1,7 @@
 name: mzansi_innovation_hub
 description: ""
 publish_to: 'none' # Remove this line if you wish to publish to pub.dev
-version: 1.2.5+126
+version: 1.2.6+127
 # version: 1.1.1+97 #--- Updated version for upgrader package testing
 
 environment: