rename container folders

mih_ui/lib/mih_package_components/Example/package_test.dart

@@ -0,0 +1,154 @@
+import 'package:go_router/go_router.dart';
+import 'package:mzansi_innovation_hub/mih_package_components/Example/package_tools/package_tool_three.dart';
+import 'package:mzansi_innovation_hub/mih_package_components/Example/package_tools/package_tool_zero.dart';
+import 'package:mzansi_innovation_hub/mih_package_components/mih_package.dart';
+import 'package:mzansi_innovation_hub/mih_package_components/mih_package_action.dart';
+import 'package:mzansi_innovation_hub/mih_package_components/mih_package_tools.dart';
+import 'package:mzansi_innovation_hub/mih_package_components/Example/package_tools/package_tool_one.dart';
+import 'package:mzansi_innovation_hub/mih_package_components/Example/package_tools/package_tool_two.dart';
+import 'package:flutter/material.dart';
+import 'package:mzansi_innovation_hub/mih_package_components/mih_loading_circle.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_data_helper_services.dart';
+import 'package:provider/provider.dart';
+
+class PackageTest extends StatefulWidget {
+  const PackageTest({
+    super.key,
+  });
+
+  @override
+  State<PackageTest> createState() => _PackageTestState();
+}
+
+class _PackageTestState extends State<PackageTest> {
+  int _selcetedIndex = 0;
+  bool _isLoadingInitialData = true;
+
+  Future<void> _loadInitialData() async {
+    setState(() {
+      _isLoadingInitialData = true;
+    });
+    MzansiProfileProvider mzansiProfileProvider =
+        context.read<MzansiProfileProvider>();
+    if (mzansiProfileProvider.user == null) {
+      await MihDataHelperServices().loadUserDataWithBusinessesData(
+        mzansiProfileProvider,
+      );
+    }
+    setState(() {
+      _isLoadingInitialData = false;
+    });
+  }
+
+  MihPackageAction getAction() {
+    return MihPackageAction(
+      icon: const Icon(Icons.arrow_back),
+      iconSize: 35,
+      onTap: () {
+        context.goNamed(
+          'mihHome',
+          extra: true,
+        );
+        FocusScope.of(context).unfocus();
+        // Navigator.of(context).pop();
+        // Navigator.of(context).popAndPushNamed(
+        //   '/',
+        //   arguments: AuthArguments(true, false),
+        // );
+      },
+    );
+  }
+
+  MihPackageTools getTools() {
+    Map<Widget, void Function()?> temp = Map();
+    temp[const Icon(Icons.link)] = () {
+      setState(() {
+        _selcetedIndex = 0;
+      });
+    };
+    temp[const Icon(Icons.warning)] = () {
+      setState(() {
+        _selcetedIndex = 1;
+      });
+    };
+    temp[const Icon(Icons.inbox)] = () {
+      setState(() {
+        _selcetedIndex = 2;
+      });
+    };
+    temp[const Icon(Icons.outbond)] = () {
+      setState(() {
+        _selcetedIndex = 3;
+      });
+    };
+    return MihPackageTools(
+      tools: temp,
+      selcetedIndex: _selcetedIndex,
+    );
+  }
+
+  void showAlert() {
+    MihAlertServices().inputErrorAlert(context);
+  }
+
+  List<Widget> getToolBody() {
+    MzansiProfileProvider profileProvider =
+        context.read<MzansiProfileProvider>();
+    List<Widget> toolBodies = [
+      const PackageToolThree(),
+      const PackageToolZero(),
+      PackageToolOne(
+        user: profileProvider.user!,
+        business: profileProvider.business,
+      ),
+      const PackageToolTwo(),
+    ];
+    return toolBodies;
+  }
+
+  List<String> getToolTitle() {
+    List<String> toolTitles = [
+      "Tool Zero",
+      "Tool One",
+      "Tool Two",
+    ];
+    return toolTitles;
+  }
+
+  @override
+  void initState() {
+    super.initState();
+    _loadInitialData();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Consumer<MzansiProfileProvider>(
+      builder:
+          (BuildContext context, MzansiProfileProvider value, Widget? child) {
+        if (_isLoadingInitialData) {
+          return Scaffold(
+            body: Center(
+              child: Mihloadingcircle(),
+            ),
+          );
+        }
+        return MihPackage(
+          appActionButton: getAction(),
+          appTools: getTools(),
+          appBody: getToolBody(),
+          appToolTitles: getToolTitle(),
+          selectedbodyIndex: _selcetedIndex,
+          onIndexChange: (newValue) {
+            setState(() {
+              _selcetedIndex = newValue;
+            });
+            print("Index: $_selcetedIndex");
+          },
+        );
+      },
+    );
+  }
+}

mih_ui/lib/mih_package_components/Example/package_tiles/test_package_tile.dart

@@ -0,0 +1,45 @@
+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_package_components/mih_package_tile.dart';
+import 'package:mzansi_innovation_hub/mih_config/mih_colors.dart';
+
+class TestPackageTile extends StatefulWidget {
+  final double packageSize;
+  const TestPackageTile({
+    super.key,
+    required this.packageSize,
+  });
+
+  @override
+  State<TestPackageTile> createState() => _TestPackageTileState();
+}
+
+class _TestPackageTileState extends State<TestPackageTile> {
+  @override
+  Widget build(BuildContext context) {
+    return MihPackageTile(
+      onTap: () {
+        context.goNamed(
+          'testPackage',
+        );
+        // Navigator.of(context).pushNamed(
+        //   '/package-dev',
+        //   arguments: TestArguments(
+        //     widget.signedInUser,
+        //     widget.business,
+        //   ),
+        // );
+      },
+      appName: "Test",
+      appIcon: Icon(
+        Icons.warning_amber_rounded,
+        color: MihColors.getSecondaryColor(
+            MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+      ),
+      iconSize: widget.packageSize,
+      textColor: MihColors.getSecondaryColor(
+          MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+    );
+  }
+}

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

@@ -0,0 +1,881 @@
+import 'package:country_code_picker/country_code_picker.dart';
+import 'package:file_picker/file_picker.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_speed_dial/flutter_speed_dial.dart';
+import 'package:geolocator/geolocator.dart';
+import 'package:ken_logger/ken_logger.dart';
+import 'package:mzansi_innovation_hub/main.dart';
+import 'package:mzansi_innovation_hub/mih_objects/app_user.dart';
+import 'package:mzansi_innovation_hub/mih_objects/business.dart';
+import 'package:mzansi_innovation_hub/mih_package_components/mih_banner_ad.dart';
+import 'package:mzansi_innovation_hub/mih_package_components/mih_loading_circle.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_alert_services.dart';
+import 'package:mzansi_innovation_hub/mih_services/mih_location_services.dart';
+import 'package:mzansi_innovation_hub/mih_services/mih_validation_services.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';
+import 'package:mzansi_innovation_hub/mih_package_components/mih_date_field.dart';
+import 'package:mzansi_innovation_hub/mih_package_components/mih_dropdwn_field.dart';
+import 'package:mzansi_innovation_hub/mih_package_components/mih_form.dart';
+import 'package:mzansi_innovation_hub/mih_package_components/mih_numeric_stepper.dart';
+import 'package:mzansi_innovation_hub/mih_package_components/mih_package_tool_body.dart';
+import 'package:mzansi_innovation_hub/mih_package_components/mih_package_window.dart';
+import 'package:mzansi_innovation_hub/mih_package_components/mih_circle_avatar.dart';
+import 'package:mzansi_innovation_hub/mih_package_components/mih_floating_menu.dart';
+import 'package:mzansi_innovation_hub/mih_package_components/mih_icons.dart';
+import 'package:mzansi_innovation_hub/mih_package_components/mih_image_display.dart';
+import 'package:mzansi_innovation_hub/mih_package_components/mih_radio_options.dart';
+import 'package:mzansi_innovation_hub/mih_package_components/mih_search_bar.dart';
+import 'package:mzansi_innovation_hub/mih_package_components/mih_text_form_field.dart';
+import 'package:mzansi_innovation_hub/mih_package_components/mih_time_field.dart';
+import 'package:mzansi_innovation_hub/mih_package_components/mih_toggle.dart';
+import 'package:redacted/redacted.dart';
+
+class PackageToolOne extends StatefulWidget {
+  final AppUser user;
+  final Business? business;
+  const PackageToolOne({
+    super.key,
+    required this.user,
+    required this.business,
+  });
+
+  @override
+  State<PackageToolOne> createState() => _PackageToolOneState();
+}
+
+class _PackageToolOneState extends State<PackageToolOne> {
+  late ImageProvider<Object>? imagePreview;
+  PlatformFile? file;
+  PlatformFile? imageFile;
+  TextEditingController _fileNameController = TextEditingController();
+  TextEditingController _imagefileController = TextEditingController();
+  TextEditingController _searchController = TextEditingController();
+  TextEditingController _textFieldZeroController = TextEditingController();
+  TextEditingController _textFieldOneController = TextEditingController();
+  TextEditingController _textFieldTwoController = TextEditingController();
+  TextEditingController _textFieldThreeController = TextEditingController();
+  TextEditingController _textFieldFourController = TextEditingController();
+  TextEditingController _textFieldFiveController = TextEditingController();
+  TextEditingController _textFieldSixController = TextEditingController();
+  TextEditingController _textFieldSevenController = TextEditingController();
+  TextEditingController _textFieldEightController = TextEditingController();
+  TextEditingController _textFieldNineController = TextEditingController();
+  bool switchpositioin = true;
+  final FocusNode searchFocusNode = FocusNode();
+  final _formKey = GlobalKey<FormState>();
+  late Future<Position?> myCoordinates;
+  String myLocation = "";
+
+  void showTestFullWindow() {
+    showDialog(
+      context: context,
+      barrierDismissible: false,
+      builder: (context) {
+        return MihPackageWindow(
+          fullscreen: true,
+          windowTitle: "Test Full",
+          onWindowTapClose: () {
+            Navigator.of(context).pop();
+          },
+          windowBody: Text("Testing Window Body"),
+        );
+      },
+    );
+  }
+
+  void showTestWindow() {
+    showDialog(
+      context: context,
+      barrierDismissible: false,
+      builder: (context) {
+        return MihPackageWindow(
+          fullscreen: false,
+          borderOn: true,
+          foregroundColor: MihColors.getOrangeColor(
+              MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+          backgroundColor: MihColors.getBluishPurpleColor(
+              MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+          windowTitle: "Test No Full",
+          menuOptions: [
+            SpeedDialChild(
+              child: Icon(
+                Icons.add,
+                color: MihColors.getPrimaryColor(
+                    MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+              ),
+              label: "Show New Window",
+              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: () {
+                // showTestWindow();
+              },
+            ),
+          ],
+          onWindowTapClose: () {
+            Navigator.of(context).pop();
+          },
+          windowBody: Text(
+              "Testing Window Body Testing Window Body Testing Window Body Testing Window Body Testing Window Body Testing Window Body Testing Window Body Testing Window Body Testing Window Body Testing Window Body Testing Window Body Testing Window Body Testing Window Body Testing Window Body Testing Window Body Testing Window Body Testing Window Body Testing Window Body Testing Window Body Testing Window Body Testing Window Body Testing Window Body Testing Window Body Testing Window Body Testing Window Body Testing Window Body Testing Window Body Testing Window Body Testing Window Body Testing Window Body Testing Window Body Testing Window Body Testing Window Body Testing Window Body Testing Window Body Testing Window Body Testing Window Body Testing Window Body Testing Window Body Testing Window Body Testing Window Body Testing Window Body Testing Window Body Testing Window Body Testing Window Body Testing Window Body Testing Window Body Testing Window Body Testing Window Body Testing Window Body Testing Window Body Testing Window Body Testing Window Body Testing Window Body Testing Window Body Testing Window Body Testing Window Body Testing Window Body Testing Window Body Testing Window Body Testing Window Body Testing Window Body Testing Window Body Testing Window Body Testing Window Body Testing Window Body "),
+        );
+      },
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    double screenWidth = MediaQuery.of(context).size.width;
+    return MihPackageToolBody(
+      borderOn: false,
+      bodyItem: getBody(screenWidth),
+    );
+  }
+
+  @override
+  void dispose() {
+    _fileNameController.dispose();
+    _imagefileController.dispose();
+    _searchController.dispose();
+    searchFocusNode.dispose();
+    super.dispose();
+  }
+
+  @override
+  void initState() {
+    super.initState();
+    setState(() {
+      imagePreview = null;
+    });
+  }
+
+  Widget getBody(double width) {
+    return Stack(
+      children: [
+        MihSingleChildScroll(
+          child: Padding(
+            padding:
+                MzansiInnovationHub.of(context)!.theme.screenType == "desktop"
+                    ? EdgeInsets.symmetric(horizontal: width * 0.2)
+                    : EdgeInsets.symmetric(horizontal: width * 0.075),
+            child: Column(
+              mainAxisAlignment: MainAxisAlignment.center,
+              crossAxisAlignment: CrossAxisAlignment.center,
+              mainAxisSize: MainAxisSize.max,
+              children: [
+                Row(
+                  mainAxisAlignment: MainAxisAlignment.center,
+                  children: [
+                    Text(
+                      "Hello",
+                      textAlign: TextAlign.center,
+                      style: TextStyle(
+                        fontSize: 25,
+                        fontWeight: FontWeight.bold,
+                        color: MihColors.getSecondaryColor(
+                            MzansiInnovationHub.of(context)!.theme.mode ==
+                                "Dark"),
+                      ),
+                    ),
+                  ],
+                ),
+                const SizedBox(height: 20),
+                Center(
+                  child: MihButton(
+                    onPressed: () {
+                      KenLogger.success("Successfully tested");
+                    },
+                    buttonColor: MihColors.getGreenColor(
+                        MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+                    elevation: 10,
+                    width: 300,
+                    child: Text(
+                      "Success Logger",
+                      style: TextStyle(
+                        color: MihColors.getPrimaryColor(
+                            MzansiInnovationHub.of(context)!.theme.mode ==
+                                "Dark"),
+                        fontSize: 20,
+                        fontWeight: FontWeight.bold,
+                      ),
+                    ),
+                  ),
+                ),
+                const SizedBox(height: 10),
+                Center(
+                  child: MihButton(
+                    onPressed: () {
+                      KenLogger.error("Successfully tested");
+                    },
+                    buttonColor: MihColors.getRedColor(
+                        MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+                    elevation: 10,
+                    width: 300,
+                    child: Text(
+                      "Error Logger",
+                      style: TextStyle(
+                        color: MihColors.getPrimaryColor(
+                            MzansiInnovationHub.of(context)!.theme.mode ==
+                                "Dark"),
+                        fontSize: 20,
+                        fontWeight: FontWeight.bold,
+                      ),
+                    ),
+                  ),
+                ),
+                const SizedBox(height: 10),
+                Center(
+                  child: MihButton(
+                    onPressed: () {
+                      KenLogger.warning("Successfully tested");
+                    },
+                    buttonColor: MihColors.getOrangeColor(
+                        MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+                    elevation: 10,
+                    width: 300,
+                    child: Text(
+                      "Warning Logger",
+                      style: TextStyle(
+                        color: MihColors.getPrimaryColor(
+                            MzansiInnovationHub.of(context)!.theme.mode ==
+                                "Dark"),
+                        fontSize: 20,
+                        fontWeight: FontWeight.bold,
+                      ),
+                    ),
+                  ),
+                ),
+                const SizedBox(height: 10),
+                Center(
+                  child: MihButton(
+                    onPressed: () {
+                      KenLogger.info("Successfully tested");
+                    },
+                    buttonColor: MihColors.getBluishPurpleColor(
+                        MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+                    elevation: 10,
+                    width: 300,
+                    child: Text(
+                      "Info Logger",
+                      style: TextStyle(
+                        color: MihColors.getPrimaryColor(
+                            MzansiInnovationHub.of(context)!.theme.mode ==
+                                "Dark"),
+                        fontSize: 20,
+                        fontWeight: FontWeight.bold,
+                      ),
+                    ),
+                  ),
+                ),
+                const SizedBox(height: 10),
+                CountryCodePicker(
+                  padding: EdgeInsetsGeometry.all(0),
+                  onChanged: (selectedCode) {
+                    debugPrint("Selected Country Code: $selectedCode");
+                  },
+                  initialSelection: '+27',
+                  showDropDownButton: false,
+                  pickerStyle: PickerStyle.bottomSheet,
+                  dialogBackgroundColor: MihColors.getPrimaryColor(
+                      MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+                  barrierColor: MihColors.getPrimaryColor(
+                      MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+                ),
+                const SizedBox(height: 10),
+                Center(
+                  child: MihButton(
+                    onPressed: () {
+                      showDialog(
+                        context: context,
+                        builder: (context) {
+                          return const Mihloadingcircle(
+                            message: "Getting your profile data",
+                          );
+                        },
+                      );
+                    },
+                    buttonColor: MihColors.getSecondaryColor(
+                        MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+                    elevation: 10,
+                    width: 300,
+                    child: Text(
+                      "Show Loading",
+                      style: TextStyle(
+                        color: MihColors.getPrimaryColor(
+                            MzansiInnovationHub.of(context)!.theme.mode ==
+                                "Dark"),
+                        fontSize: 20,
+                        fontWeight: FontWeight.bold,
+                      ),
+                    ),
+                  ),
+                ),
+                const SizedBox(height: 10),
+                Row(
+                  mainAxisAlignment: MainAxisAlignment.center,
+                  children: [
+                    Text(
+                      "Personal Preview",
+                      textAlign: TextAlign.center,
+                      style: TextStyle(
+                        fontSize: 15,
+                        fontWeight: FontWeight.bold,
+                        color: MihColors.getSecondaryColor(
+                            MzansiInnovationHub.of(context)!.theme.mode ==
+                                "Dark"),
+                      ),
+                    ),
+                  ],
+                ),
+                const SizedBox(height: 10),
+                // MihPersonalProfilePreview(
+                //   user: widget.user,
+                // ),
+                const SizedBox(height: 10),
+                Row(
+                  mainAxisAlignment: MainAxisAlignment.center,
+                  children: [
+                    Text(
+                      "Business Preview",
+                      textAlign: TextAlign.center,
+                      style: TextStyle(
+                        fontSize: 15,
+                        fontWeight: FontWeight.bold,
+                        color: MihColors.getSecondaryColor(
+                            MzansiInnovationHub.of(context)!.theme.mode ==
+                                "Dark"),
+                      ),
+                    ),
+                  ],
+                ),
+                const SizedBox(height: 10),
+                FutureBuilder(
+                    future: MIHLocationAPI().getGPSPosition(context),
+                    builder: (context, asyncSnapshot) {
+                      // print(asyncSnapshot.connectionState);
+                      if (asyncSnapshot.connectionState ==
+                          ConnectionState.waiting) {
+                        // return MihBusinessProfilePreview(
+                        //   business: widget.business,
+                        //   myLocation: null,
+                        // ).redacted(
+                        //   context: context,
+                        //   redact: true,
+                        // );
+                        return Container(
+                          width: 150,
+                          height: 50,
+                          // color: Colors.black,
+                          child: Center(child: CircularProgressIndicator()),
+                        );
+                      } else if (asyncSnapshot.hasError ||
+                          !asyncSnapshot.hasData ||
+                          asyncSnapshot.data == null) {
+                        return Container(
+                          width: 150,
+                          height: 50,
+                          color: Colors.red,
+                          child: Center(child: Text("Location unavailable")),
+                        );
+                      } else {
+                        // final myLocation = asyncSnapshot.data
+                        //     .toString()
+                        //     .replaceAll("Latitude: ", "")
+                        //     .replaceAll("Longitude: ", "");
+                        // print("My Location is this: $myLocation");
+                        // return widget.business != null
+                        //     ? MihBusinessProfilePreview(
+                        //         business: widget.business!,
+                        //       )
+                        return Text("NoBusiness Data");
+                      }
+                    }),
+                // const SizedBox(height: 10),
+                // Text("This text should be redacted").redacted(
+                //   context: context,
+                //   redact: true,
+                // ),
+                MihBusinessCard(
+                  business: Business(
+                    "business_id",
+                    "Name",
+                    "type",
+                    "registration_no",
+                    "logo_name",
+                    "logo_path",
+                    "+27812345679",
+                    "bus_email",
+                    "app_id",
+                    "gps_location",
+                    "practice_no",
+                    "vat_no",
+                    "website",
+                    "rating",
+                    "mission_vision",
+                  ),
+                  // startUpSearch: '',
+                  width: 300,
+                ).redacted(
+                  context: context,
+                  redact: true,
+                ),
+                const SizedBox(height: 10),
+                Divider(
+                  color: MihColors.getSecondaryColor(
+                      MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+                  thickness: 2,
+                ),
+                const SizedBox(height: 10),
+                Row(
+                  mainAxisAlignment: MainAxisAlignment.center,
+                  children: [
+                    Text(
+                      "Ad Test",
+                      textAlign: TextAlign.center,
+                      style: TextStyle(
+                        fontSize: 25,
+                        fontWeight: FontWeight.bold,
+                        color: MihColors.getSecondaryColor(
+                            MzansiInnovationHub.of(context)!.theme.mode ==
+                                "Dark"),
+                      ),
+                    ),
+                  ],
+                ),
+                MihBannerAd(),
+                const SizedBox(height: 10),
+                Divider(
+                  color: MihColors.getSecondaryColor(
+                      MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+                  thickness: 2,
+                ),
+                const SizedBox(height: 10),
+                MihForm(
+                  formKey: _formKey,
+                  formFields: [
+                    MihTextFormField(
+                      width: 200,
+                      fillColor: MihColors.getSecondaryColor(
+                          MzansiInnovationHub.of(context)!.theme.mode ==
+                              "Dark"),
+                      inputColor: MihColors.getPrimaryColor(
+                          MzansiInnovationHub.of(context)!.theme.mode ==
+                              "Dark"),
+                      controller: _textFieldZeroController,
+                      multiLineInput: false,
+                      requiredText: false,
+                      hintText: "Username",
+                      validator: (value) {
+                        return MihValidationServices().validateUsername(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: _textFieldOneController,
+                      multiLineInput: false,
+                      requiredText: true,
+                      hintText: "Email",
+                      autofillHints: [AutofillHints.email],
+                      validator: (value) {
+                        return MihValidationServices().validateEmail(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: _textFieldTwoController,
+                      multiLineInput: false,
+                      requiredText: true,
+                      hintText: "Password",
+                      passwordMode: true,
+                      autofillHints: [AutofillHints.password],
+                      validator: (value) {
+                        return MihValidationServices().validatePassword(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: _textFieldThreeController,
+                      multiLineInput: false,
+                      requiredText: true,
+                      hintText: "Numbers Only",
+                      numberMode: true,
+                      validator: (value) => value == null || value.isEmpty
+                          ? 'This Field is required'
+                          : null,
+                    ),
+                    const SizedBox(height: 10),
+                    MihNumericStepper(
+                      controller: _textFieldFiveController,
+                      fillColor: MihColors.getSecondaryColor(
+                          MzansiInnovationHub.of(context)!.theme.mode ==
+                              "Dark"),
+                      inputColor: MihColors.getPrimaryColor(
+                          MzansiInnovationHub.of(context)!.theme.mode ==
+                              "Dark"),
+                      hintText: "Number Stepper",
+                      requiredText: true,
+                      minValue: 1,
+                      maxValue: 5,
+                      validationOn: true,
+                    ),
+                    const SizedBox(height: 10),
+                    MihToggle(
+                      hintText: "Toggle",
+                      initialPostion: switchpositioin,
+                      fillColor: MihColors.getSecondaryColor(
+                          MzansiInnovationHub.of(context)!.theme.mode ==
+                              "Dark"),
+                      secondaryFillColor: MihColors.getPrimaryColor(
+                          MzansiInnovationHub.of(context)!.theme.mode ==
+                              "Dark"),
+                      readOnly: false,
+                      onChange: (value) {
+                        setState(() {
+                          switchpositioin = value;
+                        });
+                        print("Toggle Value: $switchpositioin");
+                      },
+                    ),
+                    const SizedBox(height: 10),
+                    MihRadioOptions(
+                      controller: _textFieldSixController,
+                      hintText: "Radio Options",
+                      fillColor: MihColors.getSecondaryColor(
+                          MzansiInnovationHub.of(context)!.theme.mode ==
+                              "Dark"),
+                      secondaryFillColor: MihColors.getPrimaryColor(
+                          MzansiInnovationHub.of(context)!.theme.mode ==
+                              "Dark"),
+                      requiredText: true,
+                      radioOptions: const ["Option 1", "Option 2"],
+                    ),
+                    const SizedBox(height: 10),
+                    MihDropdownField(
+                      controller: _textFieldNineController,
+                      hintText: "Dropdown",
+                      dropdownOptions: const [
+                        "Option 1",
+                        "Option 2",
+                        "Option 3",
+                      ],
+                      editable: true,
+                      enableSearch: true,
+                      validator: (value) {
+                        return MihValidationServices().isEmpty(value);
+                      },
+                      requiredText: true,
+                    ),
+                    const SizedBox(height: 10),
+                    MihDateField(
+                      controller: _textFieldSevenController,
+                      labelText: "Date Field",
+                      required: true,
+                      validator: (value) {
+                        return MihValidationServices().isEmpty(value);
+                      },
+                    ),
+                    const SizedBox(height: 10),
+                    MihTimeField(
+                      controller: _textFieldEightController,
+                      labelText: "Time Field",
+                      required: true,
+                      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: _textFieldFourController,
+                      multiLineInput: true,
+                      requiredText: false,
+                      hintText: "Enter Multi Line Text",
+                      validator: (value) {
+                        return MihValidationServices()
+                            .validateLength(_textFieldFourController.text, 50);
+                      },
+                    ),
+                    const SizedBox(height: 20),
+                    Align(
+                      alignment: Alignment.center,
+                      child: MihButton(
+                        onPressed: () {
+                          if (_formKey.currentState!.validate()) {
+                            // Process data
+                            ScaffoldMessenger.of(context).showSnackBar(
+                              const SnackBar(content: Text("Input Valid")),
+                            );
+                          } else {
+                            MihAlertServices().inputErrorAlert(context);
+                          }
+                        },
+                        buttonColor: MihColors.getSecondaryColor(
+                            MzansiInnovationHub.of(context)!.theme.mode ==
+                                "Dark"),
+                        elevation: 10,
+                        width: 300,
+                        child: Text(
+                          "Submit Form",
+                          style: TextStyle(
+                            color: MihColors.getPrimaryColor(
+                                MzansiInnovationHub.of(context)!.theme.mode ==
+                                    "Dark"),
+                            fontSize: 20,
+                            fontWeight: FontWeight.bold,
+                          ),
+                        ),
+                      ),
+                    ),
+                  ],
+                ),
+                const SizedBox(height: 10),
+                Divider(
+                  color: MihColors.getSecondaryColor(
+                      MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+                  thickness: 2,
+                ),
+                const SizedBox(height: 10),
+                MihSearchBar(
+                  controller: _searchController,
+                  hintText: "Ask Mzansi",
+                  // prefixIcon: Icons.search,
+                  prefixIcon: Icons.search,
+                  prefixAltIcon: MihIcons.mzansiAi,
+                  width: 300,
+                  fillColor: MihColors.getSecondaryColor(
+                      MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+                  hintColor: MihColors.getPrimaryColor(
+                      MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+                  onPrefixIconTap: () {
+                    print("Search Icon Pressed: ${_searchController.text}");
+                  },
+                  searchFocusNode: searchFocusNode,
+                ),
+                const SizedBox(height: 20),
+                MihButton(
+                  onPressed: () {
+                    print("Button Pressed");
+                  },
+                  buttonColor: MihColors.getSecondaryColor(
+                      MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+                  elevation: 10,
+                  width: 300,
+                  child: Text(
+                    "Click Me",
+                    style: TextStyle(
+                      color: MihColors.getPrimaryColor(
+                          MzansiInnovationHub.of(context)!.theme.mode ==
+                              "Dark"),
+                      fontSize: 20,
+                      fontWeight: FontWeight.bold,
+                    ),
+                  ),
+                ),
+                const SizedBox(height: 40),
+                MihButton(
+                  onPressed: () {
+                    print("Button Pressed");
+                  },
+                  buttonColor: MihColors.getGreenColor(
+                      MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+                  width: 300,
+                  child: Row(
+                    mainAxisAlignment: MainAxisAlignment.center,
+                    children: [
+                      Icon(
+                        Icons.delete,
+                        color: MihColors.getPrimaryColor(
+                            MzansiInnovationHub.of(context)!.theme.mode ==
+                                "Dark"),
+                      ),
+                      Text(
+                        "Click Me",
+                        style: TextStyle(
+                          color: MihColors.getPrimaryColor(
+                              MzansiInnovationHub.of(context)!.theme.mode ==
+                                  "Dark"),
+                          fontSize: 20,
+                          fontWeight: FontWeight.bold,
+                        ),
+                      ),
+                    ],
+                  ),
+                ),
+                const SizedBox(height: 10),
+                MihButton(
+                  onPressed: () {
+                    print("Button Pressed");
+                  },
+                  buttonColor: MihColors.getRedColor(
+                      MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+                  width: 300,
+                  child: Text(
+                    "Click Me",
+                    style: TextStyle(
+                      color: MihColors.getPrimaryColor(
+                          MzansiInnovationHub.of(context)!.theme.mode ==
+                              "Dark"),
+                      fontSize: 20,
+                      fontWeight: FontWeight.bold,
+                    ),
+                  ),
+                ),
+                const SizedBox(height: 10),
+                Container(
+                  color: Colors.black,
+                  width: 200,
+                  height: 200,
+                  padding: EdgeInsets.zero,
+                  alignment: Alignment.center,
+                  child: IconButton.filled(
+                    onPressed: () {},
+                    icon: Icon(
+                      MihIcons.mihLogo,
+                      color: MihColors.getPrimaryColor(
+                          MzansiInnovationHub.of(context)!.theme.mode ==
+                              "Dark"),
+                    ),
+                  ),
+                ),
+                const SizedBox(height: 10),
+                MihCircleAvatar(
+                  imageFile: imagePreview,
+                  width: 50,
+                  editable: false,
+                  fileNameController: _fileNameController,
+                  userSelectedfile: file,
+                  frameColor: MihColors.getSecondaryColor(
+                      MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+                  backgroundColor: MihColors.getPrimaryColor(
+                      MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+                  onChange: (selectedImage) {
+                    setState(() {
+                      file = selectedImage;
+                    });
+                  },
+                ),
+                const SizedBox(height: 10),
+                MihTextFormField(
+                  fillColor: MihColors.getSecondaryColor(
+                      MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+                  inputColor: MihColors.getPrimaryColor(
+                      MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+                  controller: _fileNameController,
+                  hintText: "Selected Avatar File",
+                  requiredText: false,
+                  readOnly: false,
+                ),
+                const SizedBox(height: 10),
+                MihImageDisplay(
+                  imageFile: imagePreview,
+                  width: 300,
+                  height: 200,
+                  editable: true,
+                  fileNameController: _imagefileController,
+                  userSelectedfile: imageFile,
+                  onChange: (selectedFile) {
+                    setState(() {
+                      imageFile = selectedFile;
+                    });
+                  },
+                ),
+                const SizedBox(height: 10),
+                MihTextFormField(
+                  fillColor: MihColors.getSecondaryColor(
+                      MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+                  inputColor: MihColors.getPrimaryColor(
+                      MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+                  controller: _imagefileController,
+                  hintText: "Selected Image File",
+                  requiredText: false,
+                  readOnly: false,
+                ),
+                const SizedBox(height: 10),
+              ],
+            ),
+          ),
+        ),
+        Positioned(
+          right: 0,
+          bottom: 0,
+          child: MihFloatingMenu(
+              animatedIcon: AnimatedIcons.menu_close,
+              children: [
+                SpeedDialChild(
+                  child: Icon(
+                    Icons.add,
+                    color: MihColors.getPrimaryColor(
+                        MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+                  ),
+                  label: "Show New Window",
+                  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: () {
+                    showTestWindow();
+                  },
+                ),
+                SpeedDialChild(
+                  child: Icon(
+                    Icons.add,
+                    color: MihColors.getPrimaryColor(
+                        MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+                  ),
+                  label: "Show New Full Window",
+                  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: () {
+                    showTestFullWindow();
+                  },
+                ),
+              ]),
+        )
+      ],
+    );
+  }
+}

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

@@ -0,0 +1,127 @@
+import 'package:flutter/material.dart';
+import 'package:mzansi_innovation_hub/mih_objects/profile_link.dart';
+import 'package:mzansi_innovation_hub/mih_package_components/mih_package_tool_body.dart';
+import 'package:mzansi_innovation_hub/mih_package_components/mih_profile_links.dart';
+import 'package:mzansi_innovation_hub/mih_package_components/mih_single_child_scroll.dart';
+
+class PackageToolThree extends StatefulWidget {
+  const PackageToolThree({super.key});
+
+  @override
+  State<PackageToolThree> createState() => _PackageToolThreeState();
+}
+
+class _PackageToolThreeState extends State<PackageToolThree> {
+  @override
+  Widget build(BuildContext context) {
+    return MihPackageToolBody(
+      borderOn: false,
+      bodyItem: getBody(),
+    );
+  }
+
+  Widget getBody() {
+    List<ProfileLink> links = [
+      ProfileLink(
+        idprofile_links: 1,
+        app_id: "1234",
+        business_id: "",
+        destination: "Youtube",
+        web_link: "https://www.youtube.com/@MzansiInnovationHub",
+      ),
+      ProfileLink(
+        idprofile_links: 1,
+        app_id: "1234",
+        business_id: "",
+        destination: "Threads",
+        web_link: "https://www.threads.com/@mzansi.innovation.hub",
+      ),
+      ProfileLink(
+        idprofile_links: 1,
+        app_id: "1234",
+        business_id: "",
+        destination: "TikTok",
+        web_link: "https://www.tiktok.com/@mzansiinnovationhub",
+      ),
+      ProfileLink(
+        idprofile_links: 1,
+        app_id: "1234",
+        business_id: "",
+        destination: "WhatsApp",
+        web_link: "https://whatsapp.com/channel/0029Vax3INCIyPtMn8KgeM2F",
+      ),
+      ProfileLink(
+        idprofile_links: 1,
+        app_id: "1234",
+        business_id: "",
+        destination: "Twitch",
+        web_link: "https://www.twitch.tv/mzansiinnovationhub",
+      ),
+      ProfileLink(
+        idprofile_links: 1,
+        app_id: "1234",
+        business_id: "",
+        destination: "Instagram",
+        web_link: "https://www.instagram.com/mzansi.innovation.hub/",
+      ),
+      ProfileLink(
+        idprofile_links: 1,
+        app_id: "1234",
+        business_id: "",
+        destination: "X",
+        web_link: "https://x.com/mzansi_inno_hub",
+      ),
+      ProfileLink(
+        idprofile_links: 1,
+        app_id: "1234",
+        business_id: "",
+        destination: "LinkedIn",
+        web_link: "https://www.linkedin.com/in/yasien-meth-172352108/",
+      ),
+      ProfileLink(
+        idprofile_links: 1,
+        app_id: "1234",
+        business_id: "",
+        destination: "Facebook",
+        web_link: "https://www.facebook.com/profile.php?id=61565345762136",
+      ),
+      ProfileLink(
+        idprofile_links: 1,
+        app_id: "1234",
+        business_id: "",
+        destination: "Reddit",
+        web_link: "https://www.reddit.com/r/Mzani_Innovation_Hub/",
+      ),
+      ProfileLink(
+        idprofile_links: 1,
+        app_id: "1234",
+        business_id: "",
+        destination: "Discord",
+        web_link: "https://discord.gg/ZtTZYd5d",
+      ),
+      ProfileLink(
+        idprofile_links: 1,
+        app_id: "1234",
+        business_id: "",
+        destination: "My App",
+        web_link: "https://app.mzansi-innovation-hub.co.za/about",
+      ),
+    ];
+
+    return Stack(
+      children: [
+        MihSingleChildScroll(
+          child: Column(
+            mainAxisAlignment: MainAxisAlignment.start,
+            children: [
+              MihProfileLinks(
+                links: links,
+                // links: [],
+              ),
+            ],
+          ),
+        ),
+      ],
+    );
+  }
+}

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

@@ -0,0 +1,69 @@
+import 'package:custom_rating_bar/custom_rating_bar.dart';
+import 'package:flutter/material.dart';
+import 'package:mzansi_innovation_hub/main.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';
+import 'package:mzansi_innovation_hub/mih_package_components/mih_icons.dart';
+import 'package:mzansi_innovation_hub/mih_config/mih_colors.dart';
+
+class PackageToolTwo extends StatefulWidget {
+  const PackageToolTwo({super.key});
+
+  @override
+  State<PackageToolTwo> createState() => _PackageToolTwoState();
+}
+
+class _PackageToolTwoState extends State<PackageToolTwo> {
+  @override
+  Widget build(BuildContext context) {
+    return MihPackageToolBody(
+      borderOn: false,
+      bodyItem: getBody(),
+    );
+  }
+
+  Widget getBody() {
+    return MihSingleChildScroll(
+      child: Column(
+        mainAxisAlignment: MainAxisAlignment.start,
+        mainAxisSize: MainAxisSize.max,
+        children: [
+          Text(
+            "World",
+            textAlign: TextAlign.center,
+            style: TextStyle(
+              fontSize: 25,
+              fontWeight: FontWeight.bold,
+              color: MihColors.getSecondaryColor(
+                  MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+            ),
+          ),
+          const SizedBox(height: 10),
+          RatingBar(
+            filledIcon: Icons.star,
+            emptyIcon: Icons.star_border,
+            onRatingChanged: (value) => debugPrint('$value'),
+            initialRating: 3,
+            maxRating: 5,
+          ),
+          const SizedBox(height: 10),
+          Container(
+            color: Colors.black,
+            width: 200,
+            height: 200,
+            padding: EdgeInsets.zero,
+            alignment: Alignment.center,
+            child: IconButton.filled(
+              onPressed: () {},
+              icon: Icon(
+                MihIcons.mihLogo,
+                color: MihColors.getPrimaryColor(
+                    MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+              ),
+            ),
+          )
+        ],
+      ),
+    );
+  }
+}

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

@@ -0,0 +1,465 @@
+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_config/mih_colors.dart';
+import 'package:mzansi_innovation_hub/mih_package_components/mih_button.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_services/mih_alert_services.dart';
+
+class PackageToolZero extends StatefulWidget {
+  const PackageToolZero({super.key});
+
+  @override
+  State<PackageToolZero> createState() => _PackageToolZeroState();
+}
+
+class _PackageToolZeroState extends State<PackageToolZero> {
+  @override
+  Widget build(BuildContext context) {
+    return MihPackageToolBody(
+      borderOn: false,
+      bodyItem: getBody(),
+    );
+  }
+
+  Widget getBody() {
+    return MihSingleChildScroll(
+      child: Column(
+        mainAxisAlignment: MainAxisAlignment.start,
+        children: [
+          Text(
+            "This is Package Tool Zero to test MIH Alerts",
+            textAlign: TextAlign.center,
+            style: TextStyle(
+              fontSize: 24,
+              fontWeight: FontWeight.bold,
+              color: MihColors.getSecondaryColor(
+                  MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+            ),
+          ),
+          const SizedBox(height: 20),
+          MihButton(
+            width: 300,
+            onPressed: () {
+              MihAlertServices().successBasicAlert(
+                "Success!",
+                "This is the message for the success message",
+                context,
+              );
+            },
+            buttonColor: MihColors.getGreenColor(
+                MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+            child: Text(
+              "Basic Success Alert",
+              style: TextStyle(
+                color: MihColors.getPrimaryColor(
+                    MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+                fontSize: 20,
+                fontWeight: FontWeight.bold,
+              ),
+            ),
+          ),
+          const SizedBox(height: 10),
+          MihButton(
+            width: 300,
+            onPressed: () {
+              MihAlertServices().successAdvancedAlert(
+                "Success!",
+                "This is the advanced alert message",
+                [
+                  MihButton(
+                    onPressed: () {
+                      context.pop();
+                    },
+                    buttonColor: MihColors.getPrimaryColor(
+                        MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+                    width: 300,
+                    elevation: 10,
+                    child: Text(
+                      "Okay",
+                      style: TextStyle(
+                        color: MihColors.getSecondaryColor(
+                            MzansiInnovationHub.of(context)!.theme.mode ==
+                                "Dark"),
+                        fontSize: 20,
+                        fontWeight: FontWeight.bold,
+                      ),
+                    ),
+                  ),
+                  MihButton(
+                    onPressed: () {
+                      context.pop();
+                    },
+                    buttonColor: MihColors.getSecondaryColor(
+                        MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+                    width: 300,
+                    elevation: 10,
+                    child: Text(
+                      "Dismiss",
+                      style: TextStyle(
+                        color: MihColors.getPrimaryColor(
+                            MzansiInnovationHub.of(context)!.theme.mode ==
+                                "Dark"),
+                        fontSize: 20,
+                        fontWeight: FontWeight.bold,
+                      ),
+                    ),
+                  ),
+                ],
+                context,
+              );
+            },
+            buttonColor: MihColors.getGreenColor(
+                MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+            child: Text(
+              "Advanced Success Alert",
+              style: TextStyle(
+                color: MihColors.getPrimaryColor(
+                    MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+                fontSize: 20,
+                fontWeight: FontWeight.bold,
+              ),
+            ),
+          ),
+          const SizedBox(height: 10),
+          MihButton(
+            width: 300,
+            onPressed: () {
+              MihAlertServices().warningAlert(
+                  "Warning Alert!", "This is a friendly warning mee", context);
+            },
+            buttonColor: MihColors.getSecondaryColor(
+                MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+            child: Text(
+              "Warning Alert",
+              style: TextStyle(
+                color: MihColors.getPrimaryColor(
+                    MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+                fontSize: 20,
+                fontWeight: FontWeight.bold,
+              ),
+            ),
+          ),
+          const SizedBox(height: 10),
+          MihButton(
+            width: 300,
+            onPressed: () {
+              MihAlertServices().warningAdvancedAlert(
+                "warning!",
+                "This is the advanced alert message",
+                [
+                  MihButton(
+                    onPressed: () {
+                      context.pop();
+                    },
+                    buttonColor: MihColors.getPrimaryColor(
+                        MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+                    width: 300,
+                    elevation: 10,
+                    child: Text(
+                      "Okay",
+                      style: TextStyle(
+                        color: MihColors.getSecondaryColor(
+                            MzansiInnovationHub.of(context)!.theme.mode ==
+                                "Dark"),
+                        fontSize: 20,
+                        fontWeight: FontWeight.bold,
+                      ),
+                    ),
+                  ),
+                  MihButton(
+                    onPressed: () {
+                      context.pop();
+                    },
+                    buttonColor: MihColors.getRedColor(
+                        MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+                    width: 300,
+                    elevation: 10,
+                    child: Text(
+                      "Dismiss",
+                      style: TextStyle(
+                        color: MihColors.getPrimaryColor(
+                            MzansiInnovationHub.of(context)!.theme.mode ==
+                                "Dark"),
+                        fontSize: 20,
+                        fontWeight: FontWeight.bold,
+                      ),
+                    ),
+                  ),
+                ],
+                context,
+              );
+            },
+            buttonColor: MihColors.getSecondaryColor(
+                MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+            child: Text(
+              "Advanced Warning Alert",
+              style: TextStyle(
+                color: MihColors.getPrimaryColor(
+                    MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+                fontSize: 20,
+                fontWeight: FontWeight.bold,
+              ),
+            ),
+          ),
+          const SizedBox(height: 10),
+          MihButton(
+            width: 300,
+            onPressed: () {
+              MihAlertServices().errorBasicAlert(
+                "Error!",
+                "Thisis the basic error alert message",
+                context,
+              );
+            },
+            buttonColor: MihColors.getRedColor(
+                MzansiInnovationHub.of(context)!.theme.mode != "Dark"),
+            child: Text(
+              "Basic Error Alert",
+              style: TextStyle(
+                color: MihColors.getSecondaryColor(
+                    MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+                fontSize: 20,
+                fontWeight: FontWeight.bold,
+              ),
+            ),
+          ),
+          const SizedBox(height: 10),
+          MihButton(
+            width: 300,
+            onPressed: () {
+              MihAlertServices().errorAdvancedAlert(
+                "Error!",
+                "This is the advanced alert message",
+                [
+                  MihButton(
+                    onPressed: () {
+                      context.pop();
+                    },
+                    buttonColor: MihColors.getPrimaryColor(
+                        MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+                    width: 300,
+                    elevation: 10,
+                    child: Text(
+                      "Okay",
+                      style: TextStyle(
+                        color: MihColors.getSecondaryColor(
+                            MzansiInnovationHub.of(context)!.theme.mode ==
+                                "Dark"),
+                        fontSize: 20,
+                        fontWeight: FontWeight.bold,
+                      ),
+                    ),
+                  ),
+                  MihButton(
+                    onPressed: () {
+                      context.pop();
+                    },
+                    buttonColor: MihColors.getSecondaryColor(
+                        MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+                    width: 300,
+                    elevation: 10,
+                    child: Text(
+                      "Dismiss",
+                      style: TextStyle(
+                        color: MihColors.getPrimaryColor(
+                            MzansiInnovationHub.of(context)!.theme.mode ==
+                                "Dark"),
+                        fontSize: 20,
+                        fontWeight: FontWeight.bold,
+                      ),
+                    ),
+                  ),
+                ],
+                context,
+              );
+            },
+            buttonColor: MihColors.getRedColor(
+                MzansiInnovationHub.of(context)!.theme.mode != "Dark"),
+            child: Text(
+              "Advanced Error Alert",
+              style: TextStyle(
+                color: MihColors.getSecondaryColor(
+                    MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+                fontSize: 20,
+                fontWeight: FontWeight.bold,
+              ),
+            ),
+          ),
+          const SizedBox(height: 10),
+          MihButton(
+            width: 300,
+            onPressed: () {
+              MihAlertServices().deleteConfirmationAlert(
+                "THis is a delete confirmation",
+                () {
+                  context.pop();
+                },
+                context,
+              );
+            },
+            buttonColor: MihColors.getRedColor(
+                MzansiInnovationHub.of(context)!.theme.mode != "Dark"),
+            child: Text(
+              "Delete Confirmation Alert",
+              style: TextStyle(
+                color: MihColors.getSecondaryColor(
+                    MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+                fontSize: 20,
+                fontWeight: FontWeight.bold,
+              ),
+            ),
+          ),
+          const SizedBox(height: 10),
+          MihButton(
+            width: 300,
+            onPressed: () {
+              MihAlertServices().internetConnectionAlert(context);
+            },
+            buttonColor: MihColors.getRedColor(
+                MzansiInnovationHub.of(context)!.theme.mode != "Dark"),
+            child: Text(
+              "Internet Connection Alert",
+              style: TextStyle(
+                color: MihColors.getSecondaryColor(
+                    MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+                fontSize: 20,
+                fontWeight: FontWeight.bold,
+              ),
+            ),
+          ),
+          const SizedBox(height: 10),
+          MihButton(
+            width: 300,
+            onPressed: () {
+              MihAlertServices().locationPermissionAlert(context);
+            },
+            buttonColor: MihColors.getRedColor(
+                MzansiInnovationHub.of(context)!.theme.mode != "Dark"),
+            child: Text(
+              "Location Permission Alert",
+              style: TextStyle(
+                color: MihColors.getSecondaryColor(
+                    MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+                fontSize: 20,
+                fontWeight: FontWeight.bold,
+              ),
+            ),
+          ),
+          const SizedBox(height: 10),
+          MihButton(
+            width: 300,
+            onPressed: () {
+              MihAlertServices().inputErrorAlert(context);
+            },
+            buttonColor: MihColors.getRedColor(
+                MzansiInnovationHub.of(context)!.theme.mode != "Dark"),
+            child: Text(
+              "Input Error Alert",
+              style: TextStyle(
+                color: MihColors.getSecondaryColor(
+                    MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+                fontSize: 20,
+                fontWeight: FontWeight.bold,
+              ),
+            ),
+          ),
+          const SizedBox(height: 10),
+          MihButton(
+            width: 300,
+            onPressed: () {
+              MihAlertServices().passwordRequirementAlert(context);
+            },
+            buttonColor: MihColors.getRedColor(
+                MzansiInnovationHub.of(context)!.theme.mode != "Dark"),
+            child: FittedBox(
+              child: Text(
+                "Password Requirement Alert",
+                style: TextStyle(
+                  color: MihColors.getSecondaryColor(
+                      MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+                  fontSize: 20,
+                  fontWeight: FontWeight.bold,
+                ),
+              ),
+            ),
+          ),
+          const SizedBox(height: 10),
+          MihButton(
+            width: 300,
+            onPressed: () {
+              MihAlertServices().passwordMatchAlert(context);
+            },
+            buttonColor: MihColors.getRedColor(
+                MzansiInnovationHub.of(context)!.theme.mode != "Dark"),
+            child: Text(
+              "Password Match Alert",
+              style: TextStyle(
+                color: MihColors.getSecondaryColor(
+                    MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+                fontSize: 20,
+                fontWeight: FontWeight.bold,
+              ),
+            ),
+          ),
+          const SizedBox(height: 10),
+          MihButton(
+            width: 300,
+            onPressed: () {
+              MihAlertServices().loginErrorAlert(context);
+            },
+            buttonColor: MihColors.getRedColor(
+                MzansiInnovationHub.of(context)!.theme.mode != "Dark"),
+            child: Text(
+              "Login Error Alert",
+              style: TextStyle(
+                color: MihColors.getSecondaryColor(
+                    MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+                fontSize: 20,
+                fontWeight: FontWeight.bold,
+              ),
+            ),
+          ),
+          const SizedBox(height: 10),
+          MihButton(
+            width: 300,
+            onPressed: () {
+              MihAlertServices().emailExistsAlert(context);
+            },
+            buttonColor: MihColors.getRedColor(
+                MzansiInnovationHub.of(context)!.theme.mode != "Dark"),
+            child: Text(
+              "Email Exists Alert",
+              style: TextStyle(
+                color: MihColors.getSecondaryColor(
+                    MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+                fontSize: 20,
+                fontWeight: FontWeight.bold,
+              ),
+            ),
+          ),
+          const SizedBox(height: 10),
+          MihButton(
+            width: 300,
+            onPressed: () {
+              MihAlertServices().invalidEmailAlert(context);
+            },
+            buttonColor: MihColors.getRedColor(
+                MzansiInnovationHub.of(context)!.theme.mode != "Dark"),
+            child: Text(
+              "Invalid Email Alert",
+              style: TextStyle(
+                color: MihColors.getSecondaryColor(
+                    MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+                fontSize: 20,
+                fontWeight: FontWeight.bold,
+              ),
+            ),
+          ),
+          const SizedBox(height: 10),
+        ],
+      ),
+    );
+  }
+}

mih_ui/lib/mih_package_components/assets/fonts/icomoon_link.txt

@@ -0,0 +1 @@
+/* Mih Icons  - https://icomoon.io/*/

mih_ui/lib/mih_package_components/assets/fonts/style.css

@@ -0,0 +1,99 @@
+@font-face {
+  font-family: 'icomoon';
+  src: url('fonts/icomoon.eot?8flwgj');
+  src: url('fonts/icomoon.eot?8flwgj#iefix') format('embedded-opentype'),
+    url('fonts/icomoon.ttf?8flwgj') format('truetype'),
+    url('fonts/icomoon.woff?8flwgj') format('woff'),
+    url('fonts/icomoon.svg?8flwgj#icomoon') format('svg');
+  font-weight: normal;
+  font-style: normal;
+  font-display: block;
+}
+
+[class^="icon-"],
+[class*=" icon-"] {
+  /* use !important to prevent issues with browser extensions that change fonts */
+  font-family: 'icomoon' !important;
+  /* speak: never; */
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-mine_sweeper:before {
+  content: "\e900";
+}
+
+.icon-mzansi_directory:before {
+  content: "\e901";
+}
+
+.icon-personal_profile:before {
+  content: "\e902";
+}
+
+.icon-about_mih:before {
+  content: "\e903";
+}
+
+.icon-access_control:before {
+  content: "\e904";
+}
+
+.icon-business_profile:before {
+  content: "\e905";
+}
+
+.icon-business_setup:before {
+  content: "\e906";
+}
+
+.icon-calculator:before {
+  content: "\e907";
+}
+
+.icon-calendar:before {
+  content: "\e908";
+}
+
+.icon-i_dont_know:before {
+  content: "\e909";
+}
+
+.icon-mih_logo:before {
+  content: "\e90a";
+}
+
+.icon-mih_ring:before {
+  content: "\e90b";
+}
+
+.icon-mzansi_ai:before {
+  content: "\e90c";
+}
+
+.icon-mzansi_wallet:before {
+  content: "\e90d";
+}
+
+.icon-notifications:before {
+  content: "\e90e";
+}
+
+.icon-patient_manager:before {
+  content: "\e90f";
+}
+
+.icon-patient_profile:before {
+  content: "\e910";
+}
+
+.icon-profile_setup:before {
+  content: "\e911";
+}

mih_ui/lib/mih_package_components/mih_banner_ad.dart

@@ -0,0 +1,55 @@
+import 'package:flutter/material.dart';
+import 'package:google_mobile_ads/google_mobile_ads.dart';
+import 'package:mzansi_innovation_hub/mih_providers/mih_banner_ad_provider.dart';
+import 'package:mzansi_innovation_hub/mih_config/mih_env.dart';
+import 'package:provider/provider.dart';
+
+class MihBannerAd extends StatefulWidget {
+  const MihBannerAd({super.key});
+
+  @override
+  State<MihBannerAd> createState() => _MihBannerAdState();
+}
+
+class _MihBannerAdState extends State<MihBannerAd> {
+  @override
+  void dispose() {
+    super.dispose();
+  }
+
+  @override
+  void initState() {
+    super.initState();
+    MihBannerAdProvider adProvider = context.read<MihBannerAdProvider>();
+    WidgetsBinding.instance.addPostFrameCallback((_) {
+      adProvider.reset();
+      adProvider.loadBannerAd();
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Consumer<MihBannerAdProvider>(
+      builder: (context, bannerAdProvider, child) {
+        if (!bannerAdProvider.isBannerAdLoaded) {
+          return SizedBox();
+        }
+        return Column(
+          children: [
+            bannerAdProvider.bannerAd != null &&
+                    bannerAdProvider.isBannerAdLoaded
+                ? SizedBox(
+                    width: bannerAdProvider.bannerAd!.size.width.toDouble(),
+                    height: bannerAdProvider.bannerAd!.size.height.toDouble(),
+                    child: AdWidget(ad: bannerAdProvider.bannerAd!))
+                : SizedBox(
+                    child: Text(AppEnviroment.getEnv() == "Dev"
+                        ? bannerAdProvider.errorMessage
+                        : ""),
+                  ),
+          ],
+        );
+      },
+    );
+  }
+}

mih_ui/lib/mih_package_components/mih_business_info_card.dart

@@ -0,0 +1,703 @@
+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 MihBusinessCard extends StatefulWidget {
+  final Business business;
+  final double width;
+  const MihBusinessCard({
+    super.key,
+    required this.business,
+    required this.width,
+  });
+
+  @override
+  State<MihBusinessCard> createState() => _MihBusinessCardState();
+}
+
+class _MihBusinessCardState extends State<MihBusinessCard> {
+  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,
+      );
+    }
+  }
+
+  Widget _buildContactInfo(
+    String label,
+    String subLabel,
+    IconData icon,
+    Color? iconColor,
+    bool redacted,
+    Function()? ontap,
+  ) {
+    return Material(
+      color: MihColors.getSecondaryColor(
+          MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+      child: InkWell(
+        onTap: ontap,
+        splashColor: MihColors.getPrimaryColor(
+                MzansiInnovationHub.of(context)!.theme.mode == "Dark")
+            .withOpacity(0.2),
+        borderRadius: BorderRadius.circular(15),
+        child: Padding(
+          padding: EdgeInsetsGeometry.symmetric(
+            // vertical: 5,
+            horizontal: 25,
+          ),
+          child: Row(
+            children: [
+              Container(
+                width: 45,
+                height: 45,
+                decoration: BoxDecoration(
+                  color: iconColor,
+                  borderRadius: BorderRadius.circular(15),
+                ),
+                padding: const EdgeInsets.all(5.0),
+                child: FittedBox(
+                  child: Icon(
+                    icon,
+                    // size: 35,
+                    color: MihColors.getPrimaryColor(
+                        MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+                  ),
+                ),
+              ).redacted(
+                context: context,
+                redact: redacted,
+                configuration: getRedactedConfiguration(),
+              ),
+              SizedBox(width: 20),
+              Expanded(
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  mainAxisAlignment: MainAxisAlignment.center,
+                  mainAxisSize: MainAxisSize.min,
+                  children: [
+                    Text(
+                      label,
+                      style: TextStyle(
+                        fontSize: 20,
+                        fontWeight: FontWeight.bold,
+                        color: MihColors.getPrimaryColor(
+                            MzansiInnovationHub.of(context)!.theme.mode ==
+                                "Dark"),
+                        height: 1.0,
+                      ),
+                    ).redacted(
+                      context: context,
+                      redact: redacted,
+                      configuration: getRedactedConfiguration(),
+                    ),
+                    Text(
+                      subLabel,
+                      style: TextStyle(
+                        fontSize: 12,
+                        fontWeight: FontWeight.w700,
+                        color: MihColors.getPrimaryColor(
+                            MzansiInnovationHub.of(context)!.theme.mode ==
+                                "Dark"),
+                      ),
+                    ).redacted(
+                      context: context,
+                      redact: redacted,
+                      configuration: getRedactedConfiguration(),
+                    ),
+                  ],
+                ),
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+
+  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) {
+        return Material(
+          color: MihColors.getSecondaryColor(
+                  MzansiInnovationHub.of(context)!.theme.mode == "Dark")
+              .withValues(alpha: 0.6),
+          borderRadius: BorderRadius.circular(25),
+          elevation: 10,
+          shadowColor: Colors.black,
+          child: Container(
+            decoration: BoxDecoration(
+              color: MihColors.getSecondaryColor(
+                  MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+              borderRadius: BorderRadius.circular(10),
+            ),
+            child: Column(
+              children: [
+                const SizedBox(height: 10),
+                _buildContactInfo(
+                  "Call",
+                  "Give us a quick call.",
+                  Icons.phone,
+                  MihColors.getGreenColor(
+                      MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+                  false,
+                  () {
+                    // print("Calling ${widget.cellNumber}");
+                    _makePhoneCall(widget.business.contact_no);
+                  },
+                ),
+                Divider(
+                  color: MihColors.getPrimaryColor(
+                      MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+                ),
+                _buildContactInfo(
+                  "Email",
+                  "Send us an email.",
+                  Icons.email,
+                  MihColors.getPinkColor(
+                      MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+                  false,
+                  () {
+                    // print("Emailing ${widget.email}");
+                    _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",
+                    );
+                  },
+                ),
+                Visibility(
+                  visible: isValidGps(widget.business.gps_location),
+                  child: Column(
+                    children: [
+                      Divider(
+                        color: MihColors.getPrimaryColor(
+                            MzansiInnovationHub.of(context)!.theme.mode ==
+                                "Dark"),
+                      ),
+                      _buildContactInfo(
+                        "Location",
+                        "Come visit us.",
+                        Icons.location_on,
+                        MihColors.getOrangeColor(
+                            MzansiInnovationHub.of(context)!.theme.mode ==
+                                "Dark"),
+                        false,
+                        () {
+                          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,
+                          );
+                        },
+                      ),
+                    ],
+                  ),
+                ),
+                Visibility(
+                  visible: widget.business.website.isNotEmpty &&
+                      widget.business.website != "",
+                  child: Column(
+                    children: [
+                      Divider(
+                        color: MihColors.getPrimaryColor(
+                            MzansiInnovationHub.of(context)!.theme.mode ==
+                                "Dark"),
+                      ),
+                      _buildContactInfo(
+                        "Website",
+                        "Find out more about us.",
+                        Icons.vpn_lock,
+                        MihColors.getRedColor(
+                            MzansiInnovationHub.of(context)!.theme.mode ==
+                                "Dark"),
+                        false,
+                        () {
+                          _launchWebsite(widget.business.website);
+                        },
+                      ),
+                    ],
+                  ),
+                ),
+                FutureBuilder(
+                  future: _businessReviewFuture,
+                  builder: (context, asyncSnapshot) {
+                    if (asyncSnapshot.connectionState ==
+                        ConnectionState.waiting) {
+                      // return const SizedBox.shrink();
+                      return Column(
+                        children: [
+                          Padding(
+                            padding:
+                                const EdgeInsets.symmetric(horizontal: 10.0),
+                            child: Divider(
+                              color: MihColors.getPrimaryColor(
+                                  MzansiInnovationHub.of(context)!.theme.mode ==
+                                      "Dark"),
+                            ),
+                          ),
+                          Container(
+                            child: _buildContactInfo(
+                              "Loading Rating",
+                              "Loading your rating.",
+                              Icons.star_rate_rounded,
+                              MihColors.getYellowColor(
+                                  MzansiInnovationHub.of(context)!.theme.mode ==
+                                      "Dark"),
+                              true,
+                              null,
+                            ),
+                          ).redacted(context: context, redact: true),
+                        ],
+                      );
+                    } else {
+                      BusinessReview? businessReview = asyncSnapshot.data;
+                      String ratingDisplayTitle = "";
+                      if (businessReview == null) {
+                        ratingDisplayTitle = "Rate Us";
+                      } else {
+                        ratingDisplayTitle = "Update Rating";
+                      }
+                      return Column(
+                        children: [
+                          Padding(
+                            padding:
+                                const EdgeInsets.symmetric(horizontal: 10.0),
+                            child: Divider(
+                              color: MihColors.getPrimaryColor(
+                                  MzansiInnovationHub.of(context)!.theme.mode ==
+                                      "Dark"),
+                            ),
+                          ),
+                          _buildContactInfo(
+                            ratingDisplayTitle,
+                            "Let us know how we are doing.",
+                            Icons.star_rate_rounded,
+                            MihColors.getYellowColor(
+                                MzansiInnovationHub.of(context)!.theme.mode ==
+                                    "Dark"),
+                            false,
+                            () {
+                              businessReviewRatingWindow(directoryProvider,
+                                  businessReview, true, widget.width);
+                            },
+                          ),
+                        ],
+                      );
+                    }
+                  },
+                ),
+                FutureBuilder(
+                  future: _bookmarkedBusinessFuture,
+                  builder: (context, asyncSnapshot) {
+                    if (asyncSnapshot.connectionState ==
+                        ConnectionState.waiting) {
+                      // return const SizedBox.shrink();
+                      return Column(
+                        children: [
+                          Padding(
+                            padding:
+                                const EdgeInsets.symmetric(horizontal: 10.0),
+                            child: Divider(
+                              color: MihColors.getPrimaryColor(
+                                  MzansiInnovationHub.of(context)!.theme.mode ==
+                                      "Dark"),
+                            ),
+                          ),
+                          Container(
+                            child: _buildContactInfo(
+                              "Loading Bookmark",
+                              "Loading your bookmark.",
+                              Icons.bookmark_add_rounded,
+                              MihColors.getBluishPurpleColor(
+                                  MzansiInnovationHub.of(context)!.theme.mode ==
+                                      "Dark"),
+                              true,
+                              null,
+                            ),
+                          ),
+                        ],
+                      );
+                    } else {
+                      BookmarkedBusiness? bookmarkBusiness = asyncSnapshot.data;
+                      String bookmarkDisplayTitle = "";
+                      if (bookmarkBusiness == null) {
+                        bookmarkDisplayTitle = "Bookmark Us";
+                      } else {
+                        bookmarkDisplayTitle = "Remove Bookmark";
+                      }
+                      return Column(
+                        children: [
+                          Padding(
+                            padding:
+                                const EdgeInsets.symmetric(horizontal: 10.0),
+                            child: Divider(
+                              color: MihColors.getPrimaryColor(
+                                  MzansiInnovationHub.of(context)!.theme.mode ==
+                                      "Dark"),
+                            ),
+                          ),
+                          _buildContactInfo(
+                            bookmarkDisplayTitle,
+                            "Save us for later.",
+                            bookmarkBusiness == null
+                                ? Icons.bookmark_add_rounded
+                                : Icons.bookmark_remove_rounded,
+                            MihColors.getBluishPurpleColor(
+                                MzansiInnovationHub.of(context)!.theme.mode ==
+                                    "Dark"),
+                            false,
+                            () {
+                              // _launchWebsite(widget.website);
+                              if (bookmarkBusiness == null) {
+                                showAddBookmarkAlert();
+                              } else {
+                                showDeleteBookmarkAlert(bookmarkBusiness);
+                              }
+                            },
+                          ),
+                        ],
+                      );
+                    }
+                  },
+                ),
+                // Padding(
+                //   padding: const EdgeInsets.symmetric(horizontal: 10.0),
+                //   child: Divider(
+                //     color: MihColors.getPrimaryColor(MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+                //   ),
+                // ),
+                // _buildContactInfo(
+                //   "Bookmark",
+                //   "Save us for later.",
+                //   Icons.bookmark_add_rounded,
+                //   MihColors.getBluishPurpleColor(MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+                //   () {
+                //     // _launchWebsite(widget.website);
+                //     print("Saving ${widget.business.Name} to Directory");
+                //     showBookmarkAlert();
+                //   },
+                // ),
+                const SizedBox(height: 10),
+                // Padding(
+                //   padding: const EdgeInsets.symmetric(horizontal: 10.0),
+                //   child: Divider(
+                //     color: MihColors.getPrimaryColor(MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+                //   ),
+                // ),
+              ],
+            ),
+          ),
+        );
+      },
+    );
+  }
+
+  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_business_profile_preview.dart

@@ -0,0 +1,116 @@
+import 'package:flutter/material.dart';
+import 'package:mzansi_innovation_hub/main.dart';
+import 'package:mzansi_innovation_hub/mih_objects/business.dart';
+import 'package:mzansi_innovation_hub/mih_package_components/mih_circle_avatar.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_services/mih_location_services.dart';
+import 'package:provider/provider.dart';
+
+class MihBusinessProfilePreview extends StatefulWidget {
+  final Business business;
+  final ImageProvider<Object>? imageFile;
+  final bool loading;
+  const MihBusinessProfilePreview({
+    super.key,
+    required this.business,
+    required this.imageFile,
+    required this.loading,
+  });
+
+  @override
+  State<MihBusinessProfilePreview> createState() =>
+      _MihBusinessProfilePreviewState();
+}
+
+class _MihBusinessProfilePreviewState extends State<MihBusinessProfilePreview> {
+  String calculateDistance(MzansiDirectoryProvider directoryProvider) {
+    try {
+      double distanceInKm = MIHLocationAPI().getDistanceInMeaters(
+              directoryProvider.userLocation, widget.business.gps_location) /
+          1000;
+      return "${distanceInKm.toStringAsFixed(2)} km";
+    } catch (error) {
+      print(error);
+      return "*.** km";
+    }
+  }
+
+  @override
+  void initState() {
+    super.initState();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    double profilePictureWidth = 60;
+    return Consumer<MzansiDirectoryProvider>(
+      builder: (BuildContext context, MzansiDirectoryProvider directoryProvider,
+          Widget? child) {
+        return Row(
+          children: [
+            widget.loading
+                ? Icon(
+                    MihIcons.mihRing,
+                    size: profilePictureWidth,
+                    color: MihColors.getSecondaryColor(
+                        MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+                  )
+                : widget.imageFile == null
+                    ? Icon(
+                        MihIcons.iDontKnow,
+                        size: profilePictureWidth,
+                        color: MihColors.getSecondaryColor(
+                            MzansiInnovationHub.of(context)!.theme.mode ==
+                                "Dark"),
+                      )
+                    : MihCircleAvatar(
+                        imageFile: widget.imageFile,
+                        width: profilePictureWidth,
+                        editable: false,
+                        fileNameController: TextEditingController(),
+                        userSelectedfile: null,
+                        frameColor: MihColors.getSecondaryColor(
+                            MzansiInnovationHub.of(context)!.theme.mode ==
+                                "Dark"),
+                        backgroundColor: MihColors.getPrimaryColor(
+                            MzansiInnovationHub.of(context)!.theme.mode ==
+                                "Dark"),
+                        onChange: () {},
+                      ),
+            const SizedBox(width: 15),
+            Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                Text(
+                  widget.business.Name,
+                  style: TextStyle(
+                    fontWeight: FontWeight.bold,
+                    fontSize: 18,
+                  ),
+                ),
+                Text(
+                  widget.business.type,
+                  style: TextStyle(
+                    fontWeight: FontWeight.bold,
+                    fontSize: 15,
+                  ),
+                ),
+                Text(
+                  directoryProvider.userPosition != null
+                      ? calculateDistance(directoryProvider)
+                      : "0.00 km",
+                  style: TextStyle(
+                    fontWeight: FontWeight.bold,
+                    fontSize: 10,
+                  ),
+                ),
+              ],
+            )
+          ],
+        );
+      },
+    );
+  }
+}

mih_ui/lib/mih_package_components/mih_button.dart

@@ -0,0 +1,68 @@
+import 'package:flutter/material.dart';
+
+class MihButton extends StatelessWidget {
+  final void Function()? onPressed;
+  final void Function()? onLongPressed;
+  final Color buttonColor;
+  final double? width;
+  final double? height;
+  final double? borderRadius;
+  final double? elevation; // 0 = flat, higher = more shadow
+  final Widget child;
+
+  const MihButton({
+    super.key,
+    required this.onPressed,
+    this.onLongPressed,
+    required this.buttonColor,
+    this.width,
+    this.height,
+    this.borderRadius,
+    this.elevation,
+    required this.child,
+  });
+  Color _darkerColor(Color color, [double amount = .1]) {
+    final hsl = HSLColor.fromColor(color);
+    final hslDark = hsl.withLightness((hsl.lightness - amount).clamp(0.0, 1.0));
+    return hslDark.toColor();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final Color effectiveButtonColor = onPressed == null
+        ? buttonColor.withValues(alpha: 0.6) // Example disabled color
+        : buttonColor;
+    final Color rippleColor = _darkerColor(effectiveButtonColor, 0.1);
+    final double radius = borderRadius ?? 25.0;
+    final double effectiveElevation =
+        onPressed == null ? 0.0 : (elevation ?? 4.0);
+    return MouseRegion(
+      cursor: onPressed == null
+          ? SystemMouseCursors.basic
+          : SystemMouseCursors.click,
+      child: Material(
+        color: effectiveButtonColor,
+        borderRadius: BorderRadius.circular(radius),
+        elevation: effectiveElevation,
+        shadowColor: Colors.black,
+        child: InkWell(
+          borderRadius: BorderRadius.circular(radius),
+          splashColor: rippleColor,
+          highlightColor: rippleColor.withValues(alpha: 0.2),
+          hoverColor: rippleColor.withValues(alpha: 0.3),
+          onTap: onPressed,
+          onLongPress: onLongPressed,
+          child: Container(
+            width: width,
+            height: height,
+            padding: (width == null || height == null)
+                ? const EdgeInsets.symmetric(horizontal: 24, vertical: 12)
+                : null,
+            alignment: Alignment.center,
+            child: child,
+          ),
+        ),
+      ),
+    );
+  }
+}

mih_ui/lib/mih_package_components/mih_calendar.dart

@@ -0,0 +1,117 @@
+import 'package:flutter/material.dart';
+import 'package:ken_logger/ken_logger.dart';
+import 'package:mzansi_innovation_hub/main.dart';
+import 'package:mzansi_innovation_hub/mih_providers/mih_calendar_provider.dart';
+import 'package:mzansi_innovation_hub/mih_config/mih_colors.dart';
+import 'package:provider/provider.dart';
+import 'package:table_calendar/table_calendar.dart';
+
+class MIHCalendar extends StatefulWidget {
+  final double calendarWidth;
+  final double rowHeight;
+  final void Function(String) setDate;
+  const MIHCalendar({
+    super.key,
+    required this.calendarWidth,
+    required this.rowHeight,
+    required this.setDate,
+  });
+
+  @override
+  State<MIHCalendar> createState() => _MIHCalendarState();
+}
+
+class _MIHCalendarState extends State<MIHCalendar> {
+  late DateTime selectedDay;
+  CalendarFormat _calendarFormat = CalendarFormat.week;
+
+  void onDaySelected(DateTime day, DateTime focusedDay) {
+    KenLogger.success("Selected Day: $day");
+    setState(() {
+      selectedDay = day;
+    });
+    widget.setDate(selectedDay.toString().split(" ")[0]);
+  }
+
+  @override
+  void initState() {
+    super.initState();
+    MihCalendarProvider mihCalendarProvider =
+        context.read<MihCalendarProvider>();
+    if (mihCalendarProvider.selectedDay.isNotEmpty) {
+      selectedDay = DateTime.parse(mihCalendarProvider.selectedDay);
+    } else {
+      selectedDay = DateTime.now();
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return SizedBox(
+      width: widget.calendarWidth,
+      child: TableCalendar(
+        headerStyle: HeaderStyle(
+          formatButtonDecoration: BoxDecoration(
+            border: Border.fromBorderSide(
+              BorderSide(
+                color: MihColors.getSecondaryColor(
+                    MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+              ),
+            ),
+            borderRadius: const BorderRadius.all(
+              Radius.circular(12.0),
+            ),
+          ),
+          // formatButtonTextStyle:
+        ),
+        rowHeight: widget.rowHeight,
+        focusedDay: selectedDay,
+        firstDay: DateTime.utc(2024, 1, 1),
+        lastDay: DateTime.utc(2099, 1, 1),
+        onDaySelected: onDaySelected,
+        selectedDayPredicate: (day) => isSameDay(day, selectedDay),
+        calendarFormat: _calendarFormat,
+        onFormatChanged: (format) {
+          setState(() {
+            _calendarFormat = format;
+          });
+        },
+        calendarStyle: CalendarStyle(
+          outsideDaysVisible: false,
+          todayTextStyle: TextStyle(
+            color: MihColors.getPrimaryColor(
+                MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+          ),
+          todayDecoration: BoxDecoration(
+            color: MihColors.getGreenColor(
+                MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+            shape: BoxShape.circle,
+          ),
+          selectedTextStyle: TextStyle(
+            color: MihColors.getPrimaryColor(
+                MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+          ),
+          selectedDecoration: BoxDecoration(
+            color: MihColors.getSecondaryColor(
+                MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+            shape: BoxShape.circle,
+          ),
+          weekendTextStyle: TextStyle(
+            color: MihColors.getGreyColor(
+                MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+          ),
+        ),
+        daysOfWeekStyle: DaysOfWeekStyle(
+          weekdayStyle: TextStyle(
+            color: MihColors.getSecondaryColor(
+                MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+          ),
+          weekendStyle: TextStyle(
+            color: MihColors.getGreyColor(
+                MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+          ),
+        ),
+      ),
+    );
+  }
+}

mih_ui/lib/mih_package_components/mih_circle_avatar.dart

@@ -0,0 +1,173 @@
+import 'dart:io';
+
+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_icons.dart';
+import 'package:mzansi_innovation_hub/mih_config/mih_colors.dart';
+
+class MihCircleAvatar extends StatefulWidget {
+  final ImageProvider<Object>? imageFile;
+  final double width;
+  final bool editable;
+  final TextEditingController? fileNameController;
+  final onChange;
+  final PlatformFile? userSelectedfile;
+  final Color frameColor;
+  final Color? backgroundColor;
+  const MihCircleAvatar({
+    super.key,
+    required this.imageFile,
+    required this.width,
+    required this.editable,
+    required this.fileNameController,
+    required this.userSelectedfile,
+    required this.frameColor,
+    required this.backgroundColor,
+    required this.onChange,
+  });
+
+  @override
+  State<MihCircleAvatar> createState() => _MihCircleAvatarState();
+}
+
+class _MihCircleAvatarState extends State<MihCircleAvatar> {
+  late ImageProvider<Object>? imagePreview;
+
+  ImageProvider<Object>? getAvatar() {
+    // Color dark = const Color(0XFF3A4454);
+    if (widget.imageFile == null) {
+      return null;
+      // if (widget.backgroundColor == dark) {
+      //   print("here in light icon");
+      //   return const AssetImage(
+      //       'lib/mih_package_components/assets/images/i-dont-know-light.png');
+      // } else {
+      //   print("here in dark icon");
+      //   return const AssetImage(
+      //       'lib/mih_package_components/assets/images/i-dont-know-dark.png');
+      // }
+    } else {
+      return widget.imageFile;
+    }
+  }
+
+  @override
+  void initState() {
+    super.initState();
+    setState(() {
+      imagePreview = getAvatar();
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      // color: Colors.white,
+      alignment: Alignment.center,
+      width: widget.width,
+      height: widget.width,
+      child: Stack(
+        alignment: Alignment.center,
+        children: [
+          Visibility(
+            visible: imagePreview != null,
+            child: Positioned(
+              right: widget.width * 0.03,
+              child: CircleAvatar(
+                radius: widget.width / 2.2,
+                backgroundColor: widget.backgroundColor,
+                backgroundImage: imagePreview,
+              ),
+            ),
+          ),
+          Visibility(
+            visible: imagePreview != null,
+            child: Icon(
+              size: widget.width,
+              MihIcons.mihRing,
+              color: widget.frameColor,
+            ),
+          ),
+          Visibility(
+            visible: imagePreview == null,
+            child: Icon(
+              MihIcons.iDontKnow,
+              size: widget.width,
+              color: widget.frameColor,
+            ),
+          ),
+          Visibility(
+            visible: widget.editable,
+            child: Positioned(
+              bottom: 0,
+              right: 0,
+              child: IconButton.filled(
+                style: ButtonStyle(
+                  backgroundColor: WidgetStateProperty.all<Color>(
+                    MihColors.getGreenColor(
+                        MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+                  ),
+                ),
+                onPressed: () async {
+                  try {
+                    FilePickerResult? result =
+                        await FilePicker.platform.pickFiles(
+                      type: FileType.image,
+                    );
+                    // print("Here 1");
+                    if (MzansiInnovationHub.of(context)!.theme.getPlatform() ==
+                        "Web") {
+                      // print("Here 2");
+                      if (result == null) return;
+                      // print("Here 3");
+                      PlatformFile? selectedFile = result.files.first;
+                      setState(() {
+                        // print("Here 4");
+                        widget.onChange(selectedFile);
+                        // print("Here 5");
+                        imagePreview = MemoryImage(selectedFile.bytes!);
+                      });
+
+                      setState(() {
+                        widget.fileNameController!.text = selectedFile.name;
+                      });
+                    } else {
+                      if (result != null) {
+                        File file = File(result.files.single.path!);
+                        PlatformFile? androidFile = PlatformFile(
+                          path: file.path,
+                          name: file.path.split('/').last,
+                          size: file.lengthSync(),
+                          bytes: await file.readAsBytes(), // Read file bytes
+                          //extension: fileExtension,
+                        );
+                        setState(() {
+                          widget.onChange(androidFile);
+                          imagePreview = FileImage(file);
+                        });
+
+                        setState(() {
+                          widget.fileNameController!.text =
+                              file.path.split('/').last;
+                        });
+                      } else {
+                        print("here in else");
+                        // User canceled the picker
+                      }
+                    }
+                  } catch (e) {
+                    print("Here Error: $e");
+                  }
+                },
+                icon: Icon(
+                  Icons.camera_alt,
+                ),
+              ),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}

mih_ui/lib/mih_package_components/mih_date_field.dart

@@ -0,0 +1,207 @@
+import 'package:flutter/material.dart';
+import 'package:mzansi_innovation_hub/main.dart';
+import 'package:mzansi_innovation_hub/mih_config/mih_colors.dart';
+
+class MihDateField extends StatefulWidget {
+  final TextEditingController controller;
+  final String labelText;
+  final bool required;
+  final double? width;
+  final double? height;
+  final double? borderRadius;
+  final double? elevation;
+  final FormFieldValidator<String>? validator;
+  const MihDateField({
+    super.key,
+    required this.controller,
+    required this.labelText,
+    required this.required,
+    this.width,
+    this.height,
+    this.borderRadius,
+    this.elevation,
+    this.validator,
+  });
+
+  @override
+  State<MihDateField> createState() => _MihDateFieldState();
+}
+
+class _MihDateFieldState extends State<MihDateField> {
+  FormFieldState<String>? _formFieldState;
+
+  Future<void> _selectDate(BuildContext context) async {
+    DateTime? picked = await showDatePicker(
+      context: context,
+      initialDate: widget.controller.text.isNotEmpty
+          ? DateTime.tryParse(widget.controller.text) ?? DateTime.now()
+          : DateTime.now(),
+      firstDate: DateTime(2000),
+      lastDate: DateTime(2100),
+    );
+    if (picked != null) {
+      widget.controller.text = picked.toString().split(" ")[0];
+      _formFieldState?.didChange(widget.controller.text);
+      setState(() {});
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Center(
+      child: SizedBox(
+        width: widget.width,
+        height: widget.height,
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            Row(
+              mainAxisAlignment: MainAxisAlignment.spaceBetween,
+              children: [
+                Text(
+                  widget.labelText,
+                  style: TextStyle(
+                    color: MihColors.getSecondaryColor(
+                        MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+                    fontSize: 18,
+                    fontWeight: FontWeight.bold,
+                  ),
+                ),
+                if (!widget.required)
+                  Text(
+                    "(Optional)",
+                    style: TextStyle(
+                      color: MihColors.getSecondaryColor(
+                          MzansiInnovationHub.of(context)!.theme.mode ==
+                              "Dark"),
+                      fontSize: 15,
+                      fontWeight: FontWeight.bold,
+                    ),
+                  ),
+              ],
+            ),
+            const SizedBox(height: 4),
+            FormField<String>(
+              initialValue: widget.controller.text,
+              validator: widget.validator,
+              autovalidateMode: AutovalidateMode.onUserInteraction,
+              builder: (field) {
+                _formFieldState = field;
+                return Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    Material(
+                      elevation: widget.elevation ?? 4.0,
+                      borderRadius:
+                          BorderRadius.circular(widget.borderRadius ?? 8.0),
+                      child: TextFormField(
+                        controller: widget.controller,
+                        readOnly: true,
+                        onTap: () => _selectDate(context),
+                        style: TextStyle(
+                          color: MihColors.getPrimaryColor(
+                              MzansiInnovationHub.of(context)!.theme.mode ==
+                                  "Dark"),
+                          fontWeight: FontWeight.w500,
+                        ),
+                        decoration: InputDecoration(
+                          suffixIcon: Icon(
+                            Icons.calendar_today,
+                            color: MihColors.getPrimaryColor(
+                                MzansiInnovationHub.of(context)!.theme.mode ==
+                                    "Dark"),
+                          ),
+                          errorStyle: const TextStyle(height: 0, fontSize: 0),
+                          contentPadding: const EdgeInsets.symmetric(
+                              horizontal: 10.0, vertical: 8.0),
+                          filled: true,
+                          fillColor: MihColors.getSecondaryColor(
+                              MzansiInnovationHub.of(context)!.theme.mode ==
+                                  "Dark"),
+                          border: OutlineInputBorder(
+                            borderRadius: BorderRadius.circular(
+                                widget.borderRadius ?? 8.0),
+                            borderSide: field.hasError
+                                ? BorderSide(
+                                    color: MihColors.getRedColor(
+                                        MzansiInnovationHub.of(context)!
+                                                .theme
+                                                .mode ==
+                                            "Dark"),
+                                    width: 2.0,
+                                  )
+                                : BorderSide.none,
+                          ),
+                          enabledBorder: OutlineInputBorder(
+                            borderRadius: BorderRadius.circular(
+                                widget.borderRadius ?? 8.0),
+                            borderSide: BorderSide.none,
+                          ),
+                          focusedBorder: OutlineInputBorder(
+                            borderRadius: BorderRadius.circular(
+                                widget.borderRadius ?? 8.0),
+                            borderSide: BorderSide(
+                              color: field.hasError
+                                  ? MihColors.getRedColor(
+                                      MzansiInnovationHub.of(context)!
+                                              .theme
+                                              .mode ==
+                                          "Dark")
+                                  : MihColors.getSecondaryColor(
+                                      MzansiInnovationHub.of(context)!
+                                              .theme
+                                              .mode ==
+                                          "Dark"),
+                              width: 3.0,
+                            ),
+                          ),
+                          errorBorder: OutlineInputBorder(
+                            borderRadius: BorderRadius.circular(
+                                widget.borderRadius ?? 8.0),
+                            borderSide: BorderSide(
+                              color: MihColors.getRedColor(
+                                  MzansiInnovationHub.of(context)!.theme.mode ==
+                                      "Dark"),
+                              width: 3.0,
+                            ),
+                          ),
+                          focusedErrorBorder: OutlineInputBorder(
+                            borderRadius: BorderRadius.circular(
+                                widget.borderRadius ?? 8.0),
+                            borderSide: BorderSide(
+                              color: MihColors.getRedColor(
+                                  MzansiInnovationHub.of(context)!.theme.mode ==
+                                      "Dark"),
+                              width: 3.0,
+                            ),
+                          ),
+                        ),
+                        onChanged: (value) {
+                          field.didChange(value);
+                        },
+                      ),
+                    ),
+                    if (field.hasError)
+                      Padding(
+                        padding: const EdgeInsets.only(left: 8.0, top: 4.0),
+                        child: Text(
+                          field.errorText ?? '',
+                          style: TextStyle(
+                            fontSize: 12,
+                            color: MihColors.getRedColor(
+                                MzansiInnovationHub.of(context)!.theme.mode ==
+                                    "Dark"),
+                            fontWeight: FontWeight.bold,
+                          ),
+                        ),
+                      ),
+                  ],
+                );
+              },
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

mih_ui/lib/mih_package_components/mih_dropdwn_field.dart

@@ -0,0 +1,283 @@
+import 'package:flutter/material.dart';
+import 'package:mzansi_innovation_hub/main.dart';
+import 'package:mzansi_innovation_hub/mih_config/mih_colors.dart';
+
+class MihDropdownField extends StatefulWidget {
+  final TextEditingController controller;
+  final String hintText;
+  final bool requiredText;
+  final List<String> dropdownOptions;
+  final bool editable;
+  final bool enableSearch;
+  final FormFieldValidator<String>? validator;
+  final Function(String?)? onSelected;
+
+  const MihDropdownField({
+    super.key,
+    required this.controller,
+    required this.hintText,
+    required this.dropdownOptions,
+    required this.requiredText,
+    required this.editable,
+    required this.enableSearch,
+    this.validator,
+    this.onSelected,
+  });
+
+  @override
+  State<MihDropdownField> createState() => _MihDropdownFieldState();
+}
+
+class _MihDropdownFieldState extends State<MihDropdownField> {
+  late List<DropdownMenuEntry<String>> menu;
+
+  List<DropdownMenuEntry<String>> buildMenuOptions(List<String> options) {
+    List<DropdownMenuEntry<String>> menuList = [];
+    for (final i in options) {
+      menuList.add(DropdownMenuEntry(
+        value: i,
+        label: i,
+        style: ButtonStyle(
+          foregroundColor: WidgetStatePropertyAll(MihColors.getPrimaryColor(
+              MzansiInnovationHub.of(context)!.theme.mode == "Dark")),
+        ),
+      ));
+    }
+    return menuList;
+  }
+
+  @override
+  void didChangeDependencies() {
+    super.didChangeDependencies();
+    menu = buildMenuOptions(widget.dropdownOptions);
+  }
+
+  @override
+  void initState() {
+    super.initState();
+    menu = widget.dropdownOptions
+        .map((e) => DropdownMenuEntry(value: e, label: e))
+        .toList();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Row(
+          mainAxisAlignment: MainAxisAlignment.spaceBetween,
+          children: [
+            Text(
+              widget.hintText,
+              style: TextStyle(
+                color: MihColors.getSecondaryColor(
+                    MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+                fontSize: 18,
+                fontWeight: FontWeight.bold,
+              ),
+            ),
+            if (!widget.requiredText)
+              Text(
+                "(Optional)",
+                style: TextStyle(
+                  color: MihColors.getSecondaryColor(
+                      MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+                  fontSize: 15,
+                  fontWeight: FontWeight.bold,
+                ),
+              ),
+          ],
+        ),
+        const SizedBox(height: 4),
+        FormField<String>(
+          validator: widget.validator,
+          autovalidateMode: AutovalidateMode.onUserInteraction,
+          initialValue: widget.controller.text,
+          builder: (field) {
+            return Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                Row(
+                  children: [
+                    Expanded(
+                      child: Theme(
+                        data: Theme.of(context).copyWith(
+                          textSelectionTheme: TextSelectionThemeData(
+                            cursorColor: MihColors.getPrimaryColor(
+                                MzansiInnovationHub.of(context)!.theme.mode ==
+                                    "Dark"),
+                            selectionColor: MihColors.getPrimaryColor(
+                                    MzansiInnovationHub.of(context)!
+                                            .theme
+                                            .mode ==
+                                        "Dark")
+                                .withValues(alpha: 0.3),
+                            selectionHandleColor: MihColors.getPrimaryColor(
+                                MzansiInnovationHub.of(context)!.theme.mode ==
+                                    "Dark"),
+                          ),
+                        ),
+                        child: DropdownMenu(
+                          controller: widget.controller,
+                          dropdownMenuEntries: menu,
+                          enableSearch: widget.enableSearch,
+                          enableFilter: widget.enableSearch,
+                          enabled: widget.editable,
+                          textInputAction: widget.enableSearch
+                              ? TextInputAction.search
+                              : TextInputAction.none,
+                          requestFocusOnTap: widget.enableSearch,
+                          menuHeight: 400,
+                          expandedInsets: EdgeInsets.zero,
+                          textStyle: TextStyle(
+                            color: MihColors.getPrimaryColor(
+                                MzansiInnovationHub.of(context)!.theme.mode ==
+                                    "Dark"),
+                            fontWeight: FontWeight.w500,
+                          ),
+                          trailingIcon: Icon(
+                            Icons.arrow_drop_down,
+                            color: MihColors.getPrimaryColor(
+                                MzansiInnovationHub.of(context)!.theme.mode ==
+                                    "Dark"),
+                          ),
+                          selectedTrailingIcon: Icon(
+                            Icons.arrow_drop_up,
+                            color: MihColors.getPrimaryColor(
+                                MzansiInnovationHub.of(context)!.theme.mode ==
+                                    "Dark"),
+                          ),
+                          // leadingIcon:
+                          // IconButton(
+                          //   onPressed: () {
+                          //     widget.controller.clear();
+                          //     field.didChange('');
+                          //   },
+                          //   icon: Icon(
+                          //     Icons.delete_outline_rounded,
+                          //     color: MihColors.getPrimaryColor(
+                          //         MzansiInnovationHub.of(context)!.theme.mode ==
+                          //             "Dark"),
+                          //   ),
+                          // ),
+                          onSelected: (String? selectedValue) {
+                            field.didChange(selectedValue);
+                            widget.onSelected?.call(selectedValue);
+                          },
+                          menuStyle: MenuStyle(
+                            backgroundColor: WidgetStatePropertyAll(
+                                MihColors.getSecondaryColor(
+                                    MzansiInnovationHub.of(context)!
+                                            .theme
+                                            .mode ==
+                                        "Dark")),
+                            side: WidgetStatePropertyAll(
+                              BorderSide(
+                                  color: MihColors.getPrimaryColor(
+                                      MzansiInnovationHub.of(context)!
+                                              .theme
+                                              .mode ==
+                                          "Dark"),
+                                  width: 1.0),
+                            ),
+                            shape: WidgetStatePropertyAll(
+                              RoundedRectangleBorder(
+                                borderRadius: BorderRadius.circular(
+                                    10), // Increase for more roundness
+                              ),
+                            ),
+                          ),
+                          inputDecorationTheme: InputDecorationTheme(
+                            errorStyle: const TextStyle(height: 0, fontSize: 0),
+                            contentPadding: const EdgeInsets.symmetric(
+                                horizontal: 10.0, vertical: 8.0),
+                            filled: true,
+                            fillColor: MihColors.getSecondaryColor(
+                                MzansiInnovationHub.of(context)!.theme.mode ==
+                                    "Dark"),
+                            enabledBorder: OutlineInputBorder(
+                              borderRadius: BorderRadius.circular(8.0),
+                              borderSide: BorderSide.none,
+                            ),
+                            focusedBorder: OutlineInputBorder(
+                              borderRadius: BorderRadius.circular(8.0),
+                              borderSide: BorderSide(
+                                color: field.hasError
+                                    ? MihColors.getRedColor(
+                                        MzansiInnovationHub.of(context)!
+                                                .theme
+                                                .mode ==
+                                            "Dark")
+                                    : MihColors.getSecondaryColor(
+                                        MzansiInnovationHub.of(context)!
+                                                .theme
+                                                .mode ==
+                                            "Dark"),
+                                width: 3.0,
+                              ),
+                            ),
+                            errorBorder: OutlineInputBorder(
+                              borderRadius: BorderRadius.circular(8.0),
+                              borderSide: BorderSide(
+                                color: MihColors.getRedColor(
+                                    MzansiInnovationHub.of(context)!
+                                            .theme
+                                            .mode ==
+                                        "Dark"),
+                                width: 3.0,
+                              ),
+                            ),
+                            focusedErrorBorder: OutlineInputBorder(
+                              borderRadius: BorderRadius.circular(8.0),
+                              borderSide: BorderSide(
+                                color: MihColors.getRedColor(
+                                    MzansiInnovationHub.of(context)!
+                                            .theme
+                                            .mode ==
+                                        "Dark"),
+                                width: 3.0,
+                              ),
+                            ),
+                          ),
+                        ),
+                      ),
+                    ),
+                    const SizedBox(width: 8),
+                    GestureDetector(
+                      onTap: () {
+                        widget.controller.clear();
+                        field.didChange('');
+                      },
+                      child: Icon(
+                        size: 35,
+                        Icons.delete_rounded,
+                        color: MihColors.getSecondaryColor(
+                            MzansiInnovationHub.of(context)!.theme.mode ==
+                                "Dark"),
+                      ),
+                    ),
+                  ],
+                ),
+                if (field.hasError)
+                  Padding(
+                    padding: const EdgeInsets.only(left: 8.0, top: 4.0),
+                    child: Text(
+                      field.errorText ?? '',
+                      style: TextStyle(
+                        fontSize: 12,
+                        color: MihColors.getRedColor(
+                            MzansiInnovationHub.of(context)!.theme.mode ==
+                                "Dark"),
+                        fontWeight: FontWeight.bold,
+                      ),
+                    ),
+                  ),
+              ],
+            );
+          },
+        ),
+      ],
+    );
+  }
+}

mih_ui/lib/mih_package_components/mih_floating_menu.dart

@@ -0,0 +1,48 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_speed_dial/flutter_speed_dial.dart';
+import 'package:mzansi_innovation_hub/main.dart';
+import 'package:mzansi_innovation_hub/mih_config/mih_colors.dart';
+
+class MihFloatingMenu extends StatefulWidget {
+  final IconData? icon;
+  final double? iconSize;
+  final AnimatedIconData? animatedIcon;
+  final SpeedDialDirection? direction;
+  final List<SpeedDialChild> children;
+  const MihFloatingMenu({
+    super.key,
+    this.icon,
+    this.iconSize,
+    this.animatedIcon,
+    this.direction,
+    required this.children,
+  });
+
+  @override
+  State<MihFloatingMenu> createState() => _MihFloatingMenuState();
+}
+
+class _MihFloatingMenuState extends State<MihFloatingMenu> {
+  @override
+  Widget build(BuildContext context) {
+    return SpeedDial(
+      key: GlobalKey(),
+      icon: widget.icon,
+      buttonSize: Size(widget.iconSize ?? 56.0, widget.iconSize ?? 56.0),
+      animatedIcon: widget.animatedIcon,
+      direction: widget.direction ?? SpeedDialDirection.up,
+      activeIcon: Icons.close,
+      backgroundColor: MihColors.getGreenColor(
+          MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+      activeBackgroundColor: MihColors.getRedColor(
+          MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+      foregroundColor: MihColors.getPrimaryColor(
+          MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+      overlayColor: Colors.black,
+      overlayOpacity: 0.5,
+      children: widget.children,
+      onOpen: () => debugPrint('OPENING DIAL'),
+      onClose: () => debugPrint('DIAL CLOSED'),
+    );
+  }
+}

mih_ui/lib/mih_package_components/mih_form.dart

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

mih_ui/lib/mih_package_components/mih_icons.dart

@@ -0,0 +1,67 @@
+import 'package:flutter/widgets.dart'; // You need this import for IconData
+
+class MihIcons {
+  MihIcons._(); // This makes the class non-instantiable (good practice for utility classes)
+
+  // This MUST match the 'family' name you specify in pubspec.yaml
+  static const _mihFontFam = 'MihIcons';
+  // Set to your package name ONLY if this font is part of a separate package you created
+  static const String? _mihFontPkg = null;
+
+// IconData constants based on your style.css file
+  // Note: We convert the hex code from CSS (\eXXX) to an integer (0xeXXX)
+
+  static const IconData mineSweeper =
+      IconData(0xe900, fontFamily: _mihFontFam, fontPackage: _mihFontPkg);
+
+  static const IconData mzansiDirectory =
+      IconData(0xe901, fontFamily: _mihFontFam, fontPackage: _mihFontPkg);
+
+  static const IconData personalProfile =
+      IconData(0xe902, fontFamily: _mihFontFam, fontPackage: _mihFontPkg);
+
+  static const IconData aboutMih =
+      IconData(0xe903, fontFamily: _mihFontFam, fontPackage: _mihFontPkg);
+
+  static const IconData accessControl =
+      IconData(0xe904, fontFamily: _mihFontFam, fontPackage: _mihFontPkg);
+
+  static const IconData businessProfile =
+      IconData(0xe905, fontFamily: _mihFontFam, fontPackage: _mihFontPkg);
+
+  static const IconData businessSetup =
+      IconData(0xe906, fontFamily: _mihFontFam, fontPackage: _mihFontPkg);
+
+  static const IconData calculator =
+      IconData(0xe907, fontFamily: _mihFontFam, fontPackage: _mihFontPkg);
+
+  static const IconData calendar =
+      IconData(0xe908, fontFamily: _mihFontFam, fontPackage: _mihFontPkg);
+
+  static const IconData iDontKnow =
+      IconData(0xe909, fontFamily: _mihFontFam, fontPackage: _mihFontPkg);
+
+  static const IconData mihLogo =
+      IconData(0xe90a, fontFamily: _mihFontFam, fontPackage: _mihFontPkg);
+
+  static const IconData mihRing =
+      IconData(0xe90b, fontFamily: _mihFontFam, fontPackage: _mihFontPkg);
+
+  static const IconData mzansiAi =
+      IconData(0xe90c, fontFamily: _mihFontFam, fontPackage: _mihFontPkg);
+
+  static const IconData mzansiWallet =
+      IconData(0xe90d, fontFamily: _mihFontFam, fontPackage: _mihFontPkg);
+
+  static const IconData notifications =
+      IconData(0xe90e, fontFamily: _mihFontFam, fontPackage: _mihFontPkg);
+
+  static const IconData patientManager =
+      IconData(0xe90f, fontFamily: _mihFontFam, fontPackage: _mihFontPkg);
+
+  static const IconData patientProfile =
+      IconData(0xe910, fontFamily: _mihFontFam, fontPackage: _mihFontPkg);
+
+  static const IconData profileSetup =
+      IconData(0xe911, fontFamily: _mihFontFam, fontPackage: _mihFontPkg);
+}

mih_ui/lib/mih_package_components/mih_image_display.dart

@@ -0,0 +1,166 @@
+import 'dart:io';
+
+import 'package:file_picker/file_picker.dart';
+import 'package:flutter/material.dart';
+import 'package:ken_logger/ken_logger.dart';
+import 'package:mzansi_innovation_hub/main.dart';
+import 'package:mzansi_innovation_hub/mih_config/mih_colors.dart';
+
+class MihImageDisplay extends StatefulWidget {
+  final ImageProvider<Object>? imageFile;
+  final double width;
+  final double height;
+  final bool editable;
+  final TextEditingController fileNameController;
+  final onChange;
+  final PlatformFile? userSelectedfile;
+  const MihImageDisplay({
+    super.key,
+    required this.imageFile,
+    required this.width,
+    required this.height,
+    required this.editable,
+    required this.fileNameController,
+    required this.userSelectedfile,
+    required this.onChange,
+  });
+
+  @override
+  State<MihImageDisplay> createState() => _MihImageDisplayState();
+}
+
+class _MihImageDisplayState extends State<MihImageDisplay> {
+  late ImageProvider<Object>? imagePreview;
+
+  ImageProvider<Object>? getImage() {
+    KenLogger.success(widget.imageFile.toString());
+    if (widget.imageFile == null) {
+      return null;
+    } else {
+      return widget.imageFile;
+    }
+  }
+
+  @override
+  void initState() {
+    super.initState();
+    setState(() {
+      imagePreview = getImage();
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    // if (widget.imageFile == null)
+    return Container(
+      // color: Colors.white,
+      alignment: Alignment.center,
+      width: widget.width,
+      height: widget.height,
+      child: Stack(
+        alignment: Alignment.center,
+        children: [
+          imagePreview != null
+              ? ClipRRect(
+                  borderRadius: BorderRadius.circular(widget.width * 0.1),
+                  child: Container(
+                    // width: widget.width,
+                    height: widget.height,
+                    decoration: BoxDecoration(
+                      color: MihColors.getSecondaryColor(
+                          MzansiInnovationHub.of(context)!.theme.mode ==
+                              "Dark"),
+                      borderRadius: BorderRadius.circular(widget.width * 0.1),
+                    ),
+                    child: Image(image: imagePreview!),
+                  ),
+                )
+              : Container(
+                  width: widget.width,
+                  height: widget.height,
+                  decoration: BoxDecoration(
+                    color: MihColors.getSecondaryColor(
+                        MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+                    borderRadius: BorderRadius.circular(widget.width * 0.1),
+                  ),
+                  child: Icon(
+                    Icons.image_not_supported_rounded,
+                    size: widget.width * 0.3,
+                    color: MihColors.getPrimaryColor(
+                        MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+                  ),
+                ),
+          Visibility(
+            visible: widget.editable,
+            child: Positioned(
+              bottom: 5,
+              right: 5,
+              child: IconButton.filled(
+                style: IconButton.styleFrom(
+                  backgroundColor: MihColors.getGreenColor(
+                      MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+                ),
+                color: MihColors.getPrimaryColor(
+                    MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+                onPressed: () async {
+                  try {
+                    FilePickerResult? result =
+                        await FilePicker.platform.pickFiles(
+                      type: FileType.image,
+                    );
+                    // print("Here 1");
+                    if (MzansiInnovationHub.of(context)!.theme.getPlatform() ==
+                        "Web") {
+                      // print("Here 2");
+                      if (result == null) return;
+                      // print("Here 3");
+                      PlatformFile? selectedFile = result.files.first;
+                      setState(() {
+                        // print("Here 4");
+                        widget.onChange(selectedFile);
+                        // print("Here 5");
+                        imagePreview = MemoryImage(selectedFile.bytes!);
+                      });
+
+                      setState(() {
+                        widget.fileNameController.text = selectedFile.name;
+                      });
+                    } else {
+                      if (result != null) {
+                        File file = File(result.files.single.path!);
+                        PlatformFile? androidFile = PlatformFile(
+                          path: file.path,
+                          name: file.path.split('/').last,
+                          size: file.lengthSync(),
+                          bytes: await file.readAsBytes(), // Read file bytes
+                          //extension: fileExtension,
+                        );
+                        setState(() {
+                          widget.onChange(androidFile);
+                          imagePreview = FileImage(file);
+                        });
+
+                        setState(() {
+                          widget.fileNameController.text =
+                              file.path.split('/').last;
+                        });
+                      } else {
+                        print("here in else");
+                        // User canceled the picker
+                      }
+                    }
+                  } catch (e) {
+                    print("here 2 Error: $e");
+                  }
+                },
+                icon: const Icon(
+                  Icons.edit,
+                ),
+              ),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}

mih_ui/lib/mih_package_components/mih_loading_circle.dart

@@ -0,0 +1,101 @@
+import 'package:flutter/material.dart';
+import 'package:mzansi_innovation_hub/mih_package_components/mih_icons.dart';
+import 'package:mzansi_innovation_hub/mih_config/mih_colors.dart';
+import '../main.dart';
+
+class Mihloadingcircle extends StatefulWidget {
+  final String? message;
+  const Mihloadingcircle({
+    super.key,
+    this.message,
+  });
+
+  @override
+  State<Mihloadingcircle> createState() => _MihloadingcircleState();
+}
+
+class _MihloadingcircleState extends State<Mihloadingcircle>
+    with SingleTickerProviderStateMixin {
+  late AnimationController _controller;
+  late Animation<double> _animation;
+
+  late double width;
+  late double height;
+
+  @override
+  void initState() {
+    super.initState();
+    _controller = AnimationController(
+      duration: const Duration(
+          milliseconds: 500), // Duration for one pulse (grow and shrink)
+      vsync: this,
+    );
+    _animation = Tween<double>(
+      begin: 200,
+      end: 200 * 0.5, // Pulse to 50% of the initial size
+    ).animate(CurvedAnimation(
+      parent: _controller,
+      curve: Curves.easeInOut, // Smooth start and end of the pulse
+    ));
+    _controller.repeat(reverse: true);
+  }
+
+  @override
+  void dispose() {
+    _controller.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Dialog(
+      child: IntrinsicWidth(
+        child: IntrinsicHeight(
+          child: Container(
+              padding: EdgeInsets.all(15),
+              decoration: BoxDecoration(
+                color: MihColors.getPrimaryColor(
+                    MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+                borderRadius: BorderRadius.circular(25.0),
+                border: Border.all(
+                    color: MihColors.getPrimaryColor(
+                        MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+                    width: 5.0),
+              ),
+              child: Column(
+                mainAxisSize: MainAxisSize.min,
+                children: [
+                  SizedBox(
+                    width: 200,
+                    height: 200,
+                    child: AnimatedBuilder(
+                      animation: _animation,
+                      builder: (context, child) {
+                        return Icon(
+                          MihIcons.mihLogo,
+                          size: _animation
+                              .value, // The size changes based on the animation value
+                          color: MihColors.getSecondaryColor(
+                              MzansiInnovationHub.of(context)!.theme.mode ==
+                                  "Dark"),
+                        );
+                      },
+                    ),
+                  ),
+                  widget.message != null
+                      ? Text(
+                          widget.message!,
+                          textAlign: TextAlign.center,
+                          style: TextStyle(
+                            fontSize: 18,
+                            fontWeight: FontWeight.bold,
+                          ),
+                        )
+                      : SizedBox(),
+                ],
+              )),
+        ),
+      ),
+    );
+  }
+}

mih_ui/lib/mih_package_components/mih_notification_drawer.dart

@@ -0,0 +1,249 @@
+import 'package:flutter/material.dart';
+import 'package:mzansi_innovation_hub/main.dart';
+import 'package:mzansi_innovation_hub/mih_objects/app_user.dart';
+import 'package:mzansi_innovation_hub/mih_objects/arguments.dart';
+import 'package:mzansi_innovation_hub/mih_objects/notification.dart';
+import 'package:mzansi_innovation_hub/mih_config/mih_colors.dart';
+import 'package:mzansi_innovation_hub/mih_config/mih_env.dart';
+import 'package:mzansi_innovation_hub/mih_services/mih_alert_services.dart';
+import 'package:supertokens_flutter/http.dart' as http;
+
+class MIHNotificationDrawer extends StatefulWidget {
+  final AppUser signedInUser;
+  final List<MIHNotification> notifications;
+  //final ImageProvider<Object>? propicFile;
+
+  const MIHNotificationDrawer({
+    super.key,
+    required this.signedInUser,
+    required this.notifications,
+  });
+
+  @override
+  State<MIHNotificationDrawer> createState() => _MIHNotificationDrawerState();
+}
+
+class _MIHNotificationDrawerState extends State<MIHNotificationDrawer> {
+  late List<List<String>> notificationList;
+  final baseAPI = AppEnviroment.baseApiUrl;
+  Future<void> updateNotificationAPICall(int index) async {
+    var response = await http.put(
+      Uri.parse(
+          "$baseAPI/notifications/update/${widget.notifications[index].idnotifications}"),
+    );
+    if (response.statusCode == 200) {
+      Navigator.of(context).pop();
+      Navigator.of(context).pop();
+      Navigator.of(context).pushNamed(
+        "/",
+        arguments: AuthArguments(true, false),
+      );
+      Navigator.of(context).pushNamed(
+        widget.notifications[index].action_path,
+        arguments: widget.signedInUser,
+      );
+    } else {
+      MihAlertServices().internetConnectionAlert(context);
+    }
+  }
+
+  List<List<String>> setTempNofitications() {
+    List<List<String>> temp = [];
+    temp.add(["Notification 1", "Notification Description 1"]);
+    temp.add(["Notification 2", "Notification Description 2"]);
+    temp.add(["Notification 3", "Notification Description 3"]);
+    temp.add(["Notification 4", "Notification Description 4"]);
+    temp.add(["Notification 5", "Notification Description 5"]);
+    temp.add(["Notification 6", "Notification Description 6"]);
+    temp.add(["Notification 7", "Notification Description 7"]);
+    temp.add(["Notification 8", "Notification Description 8"]);
+    temp.add(["Notification 9", "Notification Description 9"]);
+    temp.add(["Notification 10", "Notification Description 10"]);
+    return temp;
+  }
+
+  Widget displayTempNotifications(int index) {
+    String title = notificationList[index][0];
+    String subtitle = notificationList[index][1];
+    return ListTile(
+      title: Text(
+        title,
+        style: TextStyle(
+          color: MihColors.getSecondaryColor(
+              MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+        ),
+      ),
+      subtitle: Text(
+        subtitle,
+        style: TextStyle(
+          color: MihColors.getSecondaryColor(
+              MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+        ),
+      ),
+      onTap: () {},
+    );
+  }
+
+  Widget displayNotifications(int index) {
+    String title = widget.notifications[index].notification_type;
+    String subtitle =
+        "${widget.notifications[index].insert_date}\n${widget.notifications[index].notification_message}";
+    Widget notificationTitle;
+    if (widget.notifications[index].notification_read == "No") {
+      notificationTitle = Row(
+        children: [
+          Icon(
+            Icons.circle_notifications,
+            color: MihColors.getRedColor(
+                MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+          ),
+          const SizedBox(
+            width: 5,
+          ),
+          Flexible(
+            child: Text(
+              title,
+              style: TextStyle(
+                color: MihColors.getSecondaryColor(
+                    MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+              ),
+            ),
+          ),
+        ],
+      );
+    } else {
+      notificationTitle = Row(
+        children: [
+          //const Icon(Icons.circle_notifications),
+          Flexible(
+            child: Text(
+              title,
+              style: TextStyle(
+                color: MihColors.getSecondaryColor(
+                    MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+              ),
+            ),
+          ),
+        ],
+      );
+    }
+    return ListTile(
+      title: notificationTitle,
+      subtitle: Text(
+        subtitle,
+        style: TextStyle(
+          color: MihColors.getSecondaryColor(
+              MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+        ),
+      ),
+      onTap: () {
+        if (widget.notifications[index].notification_read == "No") {
+          updateNotificationAPICall(index);
+        } else {
+          Navigator.of(context).pushNamed(
+            widget.notifications[index].action_path,
+            arguments: widget.signedInUser,
+          );
+        }
+      },
+    );
+  }
+
+  Widget displayNotification() {
+    if (widget.notifications.isNotEmpty) {
+      return ListView.separated(
+        shrinkWrap: true,
+        physics: const NeverScrollableScrollPhysics(),
+        separatorBuilder: (BuildContext context, index) {
+          return Divider(
+            color: MihColors.getSecondaryColor(
+                MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+          );
+        },
+        itemCount: widget.notifications.length,
+        itemBuilder: (context, index) {
+          //final patient = widget.patients[index].id_no.contains(widget.searchString);
+          //print(index);
+          return displayNotifications(index);
+        },
+      );
+    } else {
+      return const Padding(
+        padding: EdgeInsets.only(top: 35),
+        child: Text(
+          "No Notifications",
+          textAlign: TextAlign.center,
+          style: TextStyle(fontSize: 20),
+        ),
+      );
+    }
+  }
+
+  @override
+  void dispose() {
+    super.dispose();
+  }
+
+  @override
+  void initState() {
+    setState(() {
+      notificationList = setTempNofitications();
+    });
+    super.initState();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return SafeArea(
+      child: Drawer(
+          //backgroundColor:  MihColors.getPrimaryColor(MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+          child: SingleChildScrollView(
+        child: Column(
+          mainAxisSize: MainAxisSize.max,
+          mainAxisAlignment: MainAxisAlignment.start,
+          children: [
+            Container(
+              color: MihColors.getSecondaryColor(
+                  MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+              child: Row(
+                mainAxisAlignment: MainAxisAlignment.center,
+                crossAxisAlignment: CrossAxisAlignment.center,
+                children: [
+                  Padding(
+                    padding: const EdgeInsets.all(5.0),
+                    child: Text(
+                      "Notifications",
+                      style: TextStyle(
+                        color: MihColors.getPrimaryColor(
+                            MzansiInnovationHub.of(context)!.theme.mode ==
+                                "Dark"),
+                        fontWeight: FontWeight.bold,
+                        fontSize: 20,
+                      ),
+                    ),
+                  ),
+                ],
+              ),
+            ),
+            displayNotification(),
+            // ListView.separated(
+            //   shrinkWrap: true,
+            //   physics: const NeverScrollableScrollPhysics(),
+            //   separatorBuilder: (BuildContext context, index) {
+            //     return Divider(
+            //       color: MihColors.getSecondaryColor(MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+            //     );
+            //   },
+            //   itemCount: widget.notifications.length,
+            //   itemBuilder: (context, index) {
+            //     //final patient = widget.patients[index].id_no.contains(widget.searchString);
+            //     //print(index);
+            //     return displayNotifications(index);
+            //   },
+            // ),
+          ],
+        ),
+      )),
+    );
+  }
+}

mih_ui/lib/mih_package_components/mih_notification_message.dart

@@ -0,0 +1,190 @@
+import 'package:flutter/material.dart';
+import 'package:mzansi_innovation_hub/mih_config/mih_colors.dart';
+import '../main.dart';
+import '../mih_objects/arguments.dart';
+
+class MIHNotificationMessage extends StatefulWidget {
+  final NotificationArguments arguments;
+  const MIHNotificationMessage({
+    super.key,
+    required this.arguments,
+  });
+
+  @override
+  State<MIHNotificationMessage> createState() => _MIHNotificationMessageState();
+}
+
+class _MIHNotificationMessageState extends State<MIHNotificationMessage>
+    with SingleTickerProviderStateMixin {
+  //var messageTypes = <String, Widget>{};
+  late AnimationController _animationController;
+  late Animation<Offset> _scaleAnimation;
+  late double popUpWidth;
+  late double? popUpheight;
+  late double popUpTitleSize;
+  late double popUpSubtitleSize;
+  late double popUpBodySize;
+  late double popUpIconSize;
+  late double popUpPaddingSize;
+  late Color primary;
+  late Color secondary;
+  Size? size;
+
+  void checkScreenSize() {
+    if (MzansiInnovationHub.of(context)!.theme.screenType == "desktop") {
+      setState(() {
+        popUpWidth = (size!.width / 4) * 2;
+        popUpheight = 90;
+        popUpTitleSize = 20.0;
+        popUpSubtitleSize = 20.0;
+        popUpBodySize = 15;
+        popUpPaddingSize = 25.0;
+        popUpIconSize = 100;
+      });
+    } else {
+      setState(() {
+        popUpWidth = size!.width;
+        popUpheight = 90;
+        popUpTitleSize = 20.0;
+        popUpSubtitleSize = 18.0;
+        popUpBodySize = 15;
+        popUpPaddingSize = 5.0;
+        popUpIconSize = 100;
+      });
+    }
+  }
+
+  Widget notifyPopUp() {
+    return GestureDetector(
+      onTap: widget.arguments.onTap,
+      child: Container(
+        padding:
+            EdgeInsets.symmetric(vertical: 5, horizontal: popUpPaddingSize),
+        alignment: Alignment.topLeft,
+        width: popUpWidth,
+        height: popUpheight,
+        decoration: BoxDecoration(
+          color: primary,
+          borderRadius: BorderRadius.circular(25.0),
+          border: Border.all(color: secondary, width: 5.0),
+        ),
+        child: Column(
+          // crossAxisAlignment: CrossAxisAlignment.start,
+          // mainAxisAlignment: MainAxisAlignment.start,
+          mainAxisSize: MainAxisSize.max,
+          children: [
+            //const SizedBox(height: 5),
+            Row(
+              mainAxisAlignment: MainAxisAlignment.center,
+              children: [
+                Icon(
+                  Icons.notifications,
+                  color: secondary,
+                ),
+                const SizedBox(width: 10),
+                Flexible(
+                  child: Text(
+                    widget.arguments.title,
+                    textAlign: TextAlign.center,
+                    overflow: TextOverflow.ellipsis,
+                    style: TextStyle(
+                      color: secondary,
+                      fontSize: popUpTitleSize,
+                      fontWeight: FontWeight.bold,
+                    ),
+                  ),
+                ),
+              ],
+            ),
+            const SizedBox(height: 5),
+            Wrap(
+              alignment: WrapAlignment.start,
+              children: [
+                SizedBox(
+                  width: popUpWidth,
+                  child: Text(
+                    widget.arguments.body,
+                    textAlign: TextAlign.left,
+                    overflow: TextOverflow.ellipsis,
+                    style: TextStyle(
+                      color: secondary,
+                      fontSize: popUpBodySize,
+                      fontWeight: FontWeight.bold,
+                    ),
+                  ),
+                ),
+              ],
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+
+  @override
+  void dispose() {
+    _animationController.dispose();
+    super.dispose();
+  }
+
+  @override
+  void initState() {
+    super.initState();
+    setState(() {
+      primary = MihColors.getPrimaryColor(
+          MzansiInnovationHub.of(context)!.theme.mode == "Dark");
+      secondary = MihColors.getRedColor(
+          MzansiInnovationHub.of(context)!.theme.mode == "Dark");
+    });
+    _animationController = AnimationController(
+      vsync: this,
+      duration:
+          const Duration(milliseconds: 300), // Adjust the duration as needed
+    );
+
+    _scaleAnimation = Tween<Offset>(
+      begin: const Offset(0, -1),
+      end: Offset.zero,
+    ).animate(_animationController);
+
+    // Start the animation when
+    // the dialog is displayed
+    _animationController.forward();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    size = MediaQuery.of(context).size;
+    checkScreenSize();
+    //setInputError();
+
+    //print(size);
+    // setState(() {
+    //   width = size.width;
+    //   height = size.height;
+    // });
+    return SlideTransition(
+      position: _scaleAnimation,
+      child: Dialog(
+        insetPadding: const EdgeInsets.only(
+          top: 45,
+          left: 5,
+          right: 5,
+        ),
+        shadowColor: secondary,
+        alignment: Alignment.topCenter,
+        child: notifyPopUp(),
+      ),
+    );
+    // return SlideTransition(
+    //   position: Tween<Offset>(
+    //     begin: const Offset(0, -1),
+    //     end: Offset.zero,
+    //   ).animate(widget.animationController),
+    //   child: Dialog(
+    //     alignment: Alignment.topCenter,
+    //     child: NotifyPopUp(),
+    //   ),
+    // );
+  }
+}

mih_ui/lib/mih_package_components/mih_numeric_stepper.dart

@@ -0,0 +1,238 @@
+import 'package:flutter/material.dart';
+import 'package:mzansi_innovation_hub/main.dart';
+import 'package:mzansi_innovation_hub/mih_config/mih_colors.dart';
+import 'package:mzansi_innovation_hub/mih_services/mih_validation_services.dart';
+import 'package:mzansi_innovation_hub/mih_package_components/mih_text_form_field.dart';
+
+class MihNumericStepper extends StatefulWidget {
+  final TextEditingController controller;
+  final Color fillColor;
+  final Color inputColor;
+  final String hintText;
+  final bool requiredText;
+  final double? width;
+  final int? minValue;
+  final int? maxValue;
+  final bool validationOn;
+  const MihNumericStepper({
+    super.key,
+    required this.controller,
+    required this.fillColor,
+    required this.inputColor,
+    required this.hintText,
+    required this.requiredText,
+    this.width,
+    this.minValue,
+    this.maxValue,
+    required this.validationOn,
+  });
+
+  @override
+  State<MihNumericStepper> createState() => _MihNumericStepperState();
+}
+
+class _MihNumericStepperState extends State<MihNumericStepper> {
+  late int _currentValue;
+  late bool error;
+
+  @override
+  void dispose() {
+    widget.controller.removeListener(_syncCurrentValue);
+    super.dispose();
+  }
+
+  @override
+  void initState() {
+    super.initState();
+    _currentValue =
+        int.tryParse(widget.controller.text) ?? widget.minValue ?? 0;
+    widget.controller.text = _currentValue.toString();
+    int.tryParse(widget.controller.text) ?? widget.minValue ?? 0;
+    widget.controller.addListener(_syncCurrentValue);
+    // print("Current Value: $_currentValue");
+  }
+
+  void _syncCurrentValue() {
+    final newValue =
+        int.tryParse(widget.controller.text) ?? widget.minValue ?? 0;
+    if (newValue != _currentValue) {
+      setState(() {
+        _currentValue = newValue;
+      });
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      children: [
+        Row(
+          children: [
+            Text(
+              widget.hintText,
+              style: TextStyle(
+                fontWeight: FontWeight.bold,
+                color: widget.fillColor,
+                fontSize: 18,
+              ),
+            ),
+          ],
+        ),
+        const SizedBox(height: 4),
+        Row(
+          mainAxisSize: MainAxisSize.min,
+          crossAxisAlignment: CrossAxisAlignment.end,
+          children: [
+            Column(
+              children: [
+                Container(
+                  // color: Colors.white,
+                  decoration: BoxDecoration(
+                    borderRadius: BorderRadius.circular(
+                        25), // Optional: rounds the corners
+                    boxShadow: const [
+                      BoxShadow(
+                        color: Color.fromARGB(60, 0, 0,
+                            0), // 0.2 opacity = 51 in alpha (255 * 0.2)
+                        spreadRadius: -2,
+                        blurRadius: 10,
+                        offset: Offset(0, 5),
+                      ),
+                    ],
+                  ),
+                  child: Padding(
+                    padding: const EdgeInsets.only(
+                      top: 2.0,
+                      left: 5.0,
+                    ),
+                    child: SizedBox(
+                      width: 40,
+                      child: IconButton.filled(
+                        style: ButtonStyle(
+                          backgroundColor: WidgetStateProperty.all<Color>(
+                              MihColors.getRedColor(
+                                  MzansiInnovationHub.of(context)!.theme.mode ==
+                                      "Dark")),
+                        ),
+                        color: widget.inputColor,
+                        iconSize: 20,
+                        onPressed: () {
+                          print("Current Value: $_currentValue");
+                          if (_currentValue >= (widget.minValue ?? 0)) {
+                            setState(() {
+                              widget.controller.text =
+                                  (_currentValue - 1).toString();
+                              _currentValue =
+                                  int.tryParse(widget.controller.text)!;
+                            });
+                          }
+                          print("New Current Value: $_currentValue");
+                        },
+                        icon: const Icon(
+                          Icons.remove,
+                        ),
+                      ),
+                    ),
+                  ),
+                ),
+                Visibility(
+                  visible: _currentValue < (widget.minValue ?? 0) ||
+                      (widget.maxValue != null &&
+                          _currentValue > widget.maxValue!),
+                  child: const SizedBox(
+                    height: 21,
+                  ),
+                ),
+              ],
+            ),
+            const SizedBox(width: 15),
+            Expanded(
+              child: MihTextFormField(
+                width: widget.width,
+                fillColor: widget.fillColor,
+                inputColor: widget.inputColor,
+                controller: widget.controller,
+                hintText: null,
+                requiredText: widget.requiredText,
+                readOnly: true,
+                numberMode: true,
+                textIputAlignment: TextAlign.center,
+                validator: (value) {
+                  if (widget.validationOn) {
+                    return MihValidationServices().validateNumber(
+                        value, widget.minValue, widget.maxValue);
+                  }
+                  return null;
+                },
+              ),
+            ),
+            const SizedBox(width: 10),
+            Column(
+              children: [
+                Container(
+                  // color: Colors.white,
+                  decoration: BoxDecoration(
+                    borderRadius: BorderRadius.circular(
+                        25), // Optional: rounds the corners
+                    boxShadow: const [
+                      BoxShadow(
+                        color: Color.fromARGB(60, 0, 0,
+                            0), // 0.2 opacity = 51 in alpha (255 * 0.2)
+                        spreadRadius: -2,
+                        blurRadius: 10,
+                        offset: Offset(0, 5),
+                      ),
+                    ],
+                  ),
+                  child: Padding(
+                    padding: const EdgeInsets.only(
+                      top: 2.0,
+                      left: 5.0,
+                    ),
+                    child: SizedBox(
+                      width: 40,
+                      child: IconButton.filled(
+                        style: ButtonStyle(
+                          backgroundColor: WidgetStateProperty.all<Color>(
+                              MihColors.getGreenColor(
+                                  MzansiInnovationHub.of(context)!.theme.mode ==
+                                      "Dark")),
+                        ),
+                        color: widget.inputColor,
+                        iconSize: 20,
+                        onPressed: () {
+                          print("Current Value: $_currentValue");
+                          if (widget.maxValue == null ||
+                              _currentValue <= widget.maxValue!) {
+                            setState(() {
+                              widget.controller.text =
+                                  (_currentValue + 1).toString();
+                              _currentValue =
+                                  int.tryParse(widget.controller.text)!;
+                            });
+                          }
+                          print("New Current Value: $_currentValue");
+                        },
+                        icon: const Icon(
+                          Icons.add,
+                        ),
+                      ),
+                    ),
+                  ),
+                ),
+                Visibility(
+                  visible: _currentValue < (widget.minValue ?? 0) ||
+                      (widget.maxValue != null &&
+                          _currentValue > widget.maxValue!),
+                  child: const SizedBox(
+                    height: 21,
+                  ),
+                ),
+              ],
+            ),
+          ],
+        ),
+      ],
+    );
+  }
+}

mih_ui/lib/mih_package_components/mih_package.dart

@@ -0,0 +1,217 @@
+import 'package:flutter/services.dart';
+import 'package:go_router/go_router.dart';
+import 'package:ken_logger/ken_logger.dart';
+import 'package:mzansi_innovation_hub/main.dart';
+import 'package:mzansi_innovation_hub/mih_package_components/mih_scack_bar.dart';
+import 'package:mzansi_innovation_hub/mih_packages/mih_home/components/mih_app_drawer.dart';
+import 'package:mzansi_innovation_hub/mih_package_components/mih_package_tools.dart';
+import 'package:flutter/material.dart';
+
+class MihPackage extends StatefulWidget {
+  final Widget appActionButton;
+  final MihPackageTools appTools;
+  final List<Widget> appBody;
+  final List<String> appToolTitles;
+  final MIHAppDrawer? actionDrawer;
+  final int selectedbodyIndex;
+  final Function(int) onIndexChange;
+  const MihPackage({
+    super.key,
+    required this.appActionButton,
+    required this.appTools,
+    required this.appBody,
+    required this.appToolTitles,
+    this.actionDrawer,
+    required this.selectedbodyIndex,
+    required this.onIndexChange,
+  });
+
+  @override
+  State<MihPackage> createState() => _MihPackageState();
+}
+
+class _MihPackageState extends State<MihPackage>
+    with SingleTickerProviderStateMixin {
+  late int _currentIndex;
+  late PageController _pageController;
+  late AnimationController _animationController;
+  DateTime? lastPressedAt;
+
+  void unfocusAll() {
+    FocusScope.of(context).unfocus();
+  }
+
+  Future<void> _peakAnimation() async {
+    int currentPage = _currentIndex;
+    double peakOffset = _pageController.position.viewportDimension * 0.075;
+    double currentOffset =
+        _pageController.page! * _pageController.position.viewportDimension;
+    int nextPage =
+        currentPage + 1 < widget.appBody.length ? currentPage + 1 : currentPage;
+    if (nextPage != currentPage) {
+      await Future.delayed(const Duration(milliseconds: 100));
+      await _pageController.animateTo(
+        currentOffset + peakOffset,
+        duration: const Duration(milliseconds: 300),
+        curve: Curves.easeOut,
+      );
+      // await Future.delayed(const Duration(milliseconds: 100));
+      await _pageController.animateTo(
+        currentPage * _pageController.position.viewportDimension,
+        duration: const Duration(milliseconds: 300),
+        curve: Curves.easeIn,
+      );
+    }
+  }
+
+  @override
+  void dispose() {
+    _pageController.dispose();
+    _animationController.dispose();
+    super.dispose();
+  }
+
+  @override
+  void didUpdateWidget(covariant MihPackage oldWidget) {
+    super.didUpdateWidget(oldWidget);
+    if (oldWidget.selectedbodyIndex != widget.selectedbodyIndex &&
+        _currentIndex != widget.selectedbodyIndex) {
+      _currentIndex = widget.selectedbodyIndex;
+      _pageController.animateToPage(
+        widget.selectedbodyIndex,
+        duration: const Duration(milliseconds: 300),
+        curve: Curves.easeInOut,
+      );
+    }
+  }
+
+  @override
+  void initState() {
+    super.initState();
+    _currentIndex = widget.selectedbodyIndex;
+    _pageController = PageController(initialPage: widget.selectedbodyIndex);
+    _animationController = AnimationController(
+      vsync: this,
+      duration: const Duration(milliseconds: 400),
+    );
+    // if (!MzansiInnovationHub.of(context)!.theme.kIsWeb) {
+    //   // Trigger the peak animation on start (or call this elsewhere)
+    //   WidgetsBinding.instance.addPostFrameCallback((_) {
+    //     _peakAnimation();
+    //   });
+    // }
+    if (!MzansiInnovationHub.of(context)!.theme.kIsWeb) {
+      // Trigger the peak animation only AFTER the route transition is complete
+      WidgetsBinding.instance.addPostFrameCallback((_) {
+        final ModalRoute? currentRoute = ModalRoute.of(context);
+        if (currentRoute != null) {
+          currentRoute.animation?.addStatusListener((status) {
+            if (status == AnimationStatus.completed && mounted) {
+              // Ensure the widget is still mounted and the animation is completed
+              _peakAnimation();
+            }
+          });
+        }
+      });
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    Size screenSize = MediaQuery.of(context).size;
+    return GestureDetector(
+      onTap: unfocusAll,
+      child: PopScope(
+        canPop: false,
+        onPopInvokedWithResult: (bool didPop, Object? result) {
+          if (GoRouterState.of(context).name == 'mihHome' ||
+              GoRouterState.of(context).name == 'mihAuthentication') {
+            if (lastPressedAt == null ||
+                DateTime.now().difference(lastPressedAt!) >
+                    const Duration(seconds: 2)) {
+              // First press: show a message and update the timestamp.
+              lastPressedAt = DateTime.now();
+              ScaffoldMessenger.of(context).showSnackBar(
+                MihSnackBar(
+                  child: Text("Press back again to exit"),
+                ),
+              );
+            } else {
+              // Second press within 2 seconds: exit the app.
+              KenLogger.warning('Exiting app...'); // Your custom logger
+              SystemChannels.platform.invokeMethod('SystemNavigator.pop');
+            }
+          } else {
+            context.goNamed(
+              'mihHome',
+              extra: true,
+            );
+          }
+        },
+        child: Scaffold(
+          drawer: widget.actionDrawer,
+          body: SafeArea(
+            bottom: false,
+            minimum: EdgeInsets.only(bottom: 0),
+            child: Container(
+              width: screenSize.width,
+              height: screenSize.height,
+              //color: Colors.black,
+              padding: const EdgeInsets.only(top: 5),
+              child: Column(
+                children: [
+                  Row(
+                    mainAxisSize: MainAxisSize.min,
+                    crossAxisAlignment: CrossAxisAlignment.center,
+                    children: [
+                      widget.appActionButton,
+                      const SizedBox(
+                        width: 10,
+                      ),
+                      Expanded(
+                        child: Container(
+                          // alignment: Alignment.center,
+                          // alignment: Alignment.centerRight,
+                          alignment: Alignment.centerLeft,
+                          // color: Colors.black,
+                          child: FittedBox(
+                            child: Text(
+                              widget.appToolTitles[_currentIndex],
+                              style: const TextStyle(
+                                fontSize: 23,
+                                fontWeight: FontWeight.w600,
+                              ),
+                            ),
+                          ),
+                        ),
+                      ),
+                      const SizedBox(width: 5),
+                      widget.appTools,
+                      const SizedBox(width: 5),
+                    ],
+                  ),
+                  const SizedBox(height: 5),
+                  Expanded(
+                    child: PageView.builder(
+                      controller: _pageController,
+                      itemCount: widget.appBody.length,
+                      itemBuilder: (context, index) {
+                        return widget.appBody[index];
+                      },
+                      onPageChanged: (index) {
+                        setState(() {
+                          _currentIndex = index;
+                        });
+                        widget.onIndexChange(index);
+                      },
+                    ),
+                  ),
+                ],
+              ),
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}

mih_ui/lib/mih_package_components/mih_package_action.dart

@@ -0,0 +1,38 @@
+import 'package:flutter/material.dart';
+
+class MihPackageAction extends StatefulWidget {
+  final void Function()? onTap;
+  final double iconSize;
+  final Widget icon;
+  const MihPackageAction({
+    super.key,
+    required this.icon,
+    required this.iconSize,
+    required this.onTap,
+  });
+
+  @override
+  State<MihPackageAction> createState() => _MihPackageActionState();
+}
+
+class _MihPackageActionState extends State<MihPackageAction> {
+  @override
+  void dispose() {
+    super.dispose();
+  }
+
+  @override
+  void initState() {
+    super.initState();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return IconButton(
+      iconSize: widget.iconSize,
+      padding: const EdgeInsets.all(0),
+      onPressed: widget.onTap,
+      icon: widget.icon,
+    );
+  }
+}

mih_ui/lib/mih_package_components/mih_package_tile.dart

@@ -0,0 +1,211 @@
+import 'package:app_settings/app_settings.dart';
+import 'package:flutter/foundation.dart';
+import 'package:local_auth/local_auth.dart';
+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_package_window.dart';
+import 'package:mzansi_innovation_hub/mih_package_components/mih_yt_video_player.dart';
+import 'package:flutter/material.dart';
+import 'package:mzansi_innovation_hub/mih_config/mih_colors.dart';
+import 'package:mzansi_innovation_hub/mih_services/mih_alert_services.dart';
+
+class MihPackageTile extends StatefulWidget {
+  final String appName;
+  final String? ytVideoID;
+  final Widget appIcon;
+  final void Function() onTap;
+  final double iconSize;
+  final Color textColor;
+  final bool? authenticateUser;
+  const MihPackageTile({
+    super.key,
+    required this.onTap,
+    required this.appName,
+    this.ytVideoID,
+    required this.appIcon,
+    required this.iconSize,
+    required this.textColor,
+    this.authenticateUser,
+  });
+
+  @override
+  State<MihPackageTile> createState() => _MihPackageTileState();
+}
+
+class _MihPackageTileState extends State<MihPackageTile> {
+  final LocalAuthentication _auth = LocalAuthentication();
+
+  void displayHint() {
+    if (widget.ytVideoID != null) {
+      showDialog(
+        barrierDismissible: false,
+        context: context,
+        builder: (context) {
+          return MihPackageWindow(
+            fullscreen: false,
+            windowTitle: widget.appName,
+            // windowTools: const [],
+            onWindowTapClose: () {
+              Navigator.pop(context);
+            },
+            windowBody: MIHYTVideoPlayer(
+              videoYTLink: widget.ytVideoID!,
+            ),
+          );
+        },
+      );
+    }
+  }
+
+  Future<bool> isUserAuthenticated() async {
+    final bool canAuthWithBio = await _auth.canCheckBiometrics;
+    final bool canAuthenticate =
+        canAuthWithBio || await _auth.isDeviceSupported();
+    print("Auth Available: $canAuthenticate");
+    if (canAuthenticate) {
+      try {
+        final bool didBioAuth = await _auth.authenticate(
+          localizedReason: "Authenticate to access ${widget.appName}",
+          options: const AuthenticationOptions(
+            biometricOnly: false,
+          ),
+        );
+        if (didBioAuth) {
+          return true;
+        } else {
+          authErrorPopUp();
+        }
+        // print("Authenticated: $didBioAuth");
+      } catch (error) {
+        print("Auth Error: $error");
+        authErrorPopUp();
+      }
+    } else {
+      print("Auth Error: No Biometrics Available");
+      authErrorPopUp();
+    }
+    return false;
+  }
+
+  void authErrorPopUp() {
+    MihAlertServices().errorAdvancedAlert(
+      "Biometric Authentication Required",
+      "Hi there! To jump into the ${widget.appName} Package, you'll need to authenticate yourself with your devices biometrics, please set up biometric authentication (like fingerprint, face ID, pattern or pin) on your device first.\n\nIf you have already set up biometric authentication, press \"Authenticate now\" to try again or press \"Set Up Authentication\" to go to your device settings.",
+      [
+        MihButton(
+          onPressed: () {
+            Navigator.of(context).pop();
+          },
+          buttonColor: MihColors.getSecondaryColor(
+              MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+          width: 300,
+          child: Text(
+            "Dismiss",
+            style: TextStyle(
+              color: MihColors.getPrimaryColor(
+                  MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+              fontSize: 20,
+              fontWeight: FontWeight.bold,
+            ),
+          ),
+        ),
+        MihButton(
+          onPressed: () {
+            AppSettings.openAppSettings(
+              type: AppSettingsType.security,
+            );
+            Navigator.of(context).pop();
+          },
+          buttonColor: MihColors.getPrimaryColor(
+              MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+          width: 300,
+          child: Text(
+            "Set Up Authentication",
+            style: TextStyle(
+              color: MihColors.getSecondaryColor(
+                  MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+              fontSize: 20,
+              fontWeight: FontWeight.bold,
+            ),
+          ),
+        ),
+        MihButton(
+          onPressed: () {
+            Navigator.of(context).pop();
+            authenticateUser();
+          },
+          buttonColor: MihColors.getGreenColor(
+              MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+          width: 300,
+          child: Text(
+            "Authenticate Now",
+            style: TextStyle(
+              color: MihColors.getPrimaryColor(
+                  MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+              fontSize: 20,
+              fontWeight: FontWeight.bold,
+            ),
+          ),
+        ),
+      ],
+      context,
+    );
+  }
+
+  Future<void> authenticateUser() async {
+    if (widget.authenticateUser != null &&
+        widget.authenticateUser! &&
+        !kIsWeb) {
+      if (await isUserAuthenticated()) {
+        widget.onTap();
+      }
+    } else {
+      widget.onTap();
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      alignment: Alignment.topCenter,
+      // color: Colors.black,
+      width: widget.iconSize,
+      height: widget.iconSize,
+      child: GestureDetector(
+        onTap: () async {
+          authenticateUser();
+        },
+        onLongPress: null, // Do this later
+        child: Column(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            Expanded(
+              child: FittedBox(
+                fit: BoxFit.contain,
+                alignment: Alignment.center,
+                child: widget.appIcon,
+              ),
+            ),
+            const SizedBox(height: 10),
+            Padding(
+              // Add a little padding for better visual spacing
+              padding: const EdgeInsets.symmetric(horizontal: 4.0),
+              child: FittedBox(
+                child: Text(
+                  widget.appName,
+                  textAlign: TextAlign.center, // This centers the text content
+                  maxLines: 1, // Allow up to 2 lines to prevent clipping
+                  style: TextStyle(
+                    color: widget.textColor,
+                    fontSize: 20.0,
+                    fontWeight: FontWeight.bold,
+                  ),
+                ),
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

mih_ui/lib/mih_package_components/mih_package_tool_body.dart

@@ -0,0 +1,95 @@
+import 'package:mzansi_innovation_hub/main.dart';
+import 'package:flutter/material.dart';
+import 'package:mzansi_innovation_hub/mih_config/mih_colors.dart';
+
+class MihPackageToolBody extends StatefulWidget {
+  final bool borderOn;
+  final Widget bodyItem;
+  final double? innerHorizontalPadding;
+  const MihPackageToolBody({
+    super.key,
+    required this.borderOn,
+    required this.bodyItem,
+    this.innerHorizontalPadding,
+  });
+
+  @override
+  State<MihPackageToolBody> createState() => _MihPackageToolBodyState();
+}
+
+class _MihPackageToolBodyState extends State<MihPackageToolBody> {
+  late double _innerBodyPadding;
+  double getHorizontalPaddingSize(Size screenSize) {
+    if (MzansiInnovationHub.of(context)!.theme.screenType == "desktop") {
+      if (widget.borderOn) {
+        return widget.innerHorizontalPadding ?? 10;
+      } else {
+        return widget.innerHorizontalPadding ?? 0;
+      }
+    } else {
+      // mobile
+      if (widget.borderOn) {
+        return widget.innerHorizontalPadding ?? 10;
+      } else {
+        return widget.innerHorizontalPadding ?? 0;
+      }
+    }
+  }
+
+  double getVerticalPaddingSize(Size screenSize) {
+    // mobile
+    if (widget.borderOn) {
+      return 10;
+    } else {
+      return 0;
+    }
+  }
+
+  Decoration? getBoader() {
+    if (widget.borderOn) {
+      _innerBodyPadding = 10.0;
+      return BoxDecoration(
+        color: MihColors.getPrimaryColor(
+            MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+        borderRadius: BorderRadius.circular(25.0),
+        border: Border.all(
+            color: MihColors.getSecondaryColor(
+                MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+            width: 3.0),
+      );
+    } else {
+      _innerBodyPadding = 0.0;
+      return BoxDecoration(
+        color: MihColors.getPrimaryColor(
+            MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+        borderRadius: BorderRadius.circular(25.0),
+        border: Border.all(
+            color: MihColors.getPrimaryColor(
+                MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+            width: 3.0),
+      );
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    Size screenSize = MediaQuery.sizeOf(context);
+
+    return Padding(
+      padding: EdgeInsets.only(
+        left: getHorizontalPaddingSize(screenSize),
+        right: getHorizontalPaddingSize(screenSize),
+        bottom: getVerticalPaddingSize(screenSize),
+        top: 0,
+      ),
+      child: Container(
+        height: screenSize.height,
+        decoration: getBoader(),
+        child: Padding(
+          padding: EdgeInsets.all(_innerBodyPadding),
+          child: widget.bodyItem,
+        ),
+      ),
+    );
+  }
+}

mih_ui/lib/mih_package_components/mih_package_tools.dart

@@ -0,0 +1,52 @@
+import 'package:flutter/material.dart';
+
+// ignore: must_be_immutable
+class MihPackageTools extends StatefulWidget {
+  final Map<Widget, void Function()?> tools;
+  int selcetedIndex;
+  MihPackageTools({
+    super.key,
+    required this.tools,
+    required this.selcetedIndex,
+  });
+
+  @override
+  State<MihPackageTools> createState() => _MihPackageToolsState();
+}
+
+class _MihPackageToolsState extends State<MihPackageTools> {
+  List<Widget> getTools() {
+    List<Widget> temp = [];
+    int index = 0;
+    widget.tools.forEach((icon, onTap) {
+      temp.add(
+        Visibility(
+          visible: widget.selcetedIndex != index,
+          child: IconButton(
+            onPressed: onTap,
+            icon: icon,
+          ),
+        ),
+      );
+      temp.add(
+        Visibility(
+          visible: widget.selcetedIndex == index,
+          child: IconButton.filled(
+            onPressed: onTap,
+            icon: icon,
+          ),
+        ),
+      );
+      index += 1;
+    });
+    return temp;
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Row(
+      mainAxisAlignment: MainAxisAlignment.end,
+      children: getTools(),
+    );
+  }
+}

mih_ui/lib/mih_package_components/mih_package_window.dart

@@ -0,0 +1,210 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_speed_dial/flutter_speed_dial.dart';
+import 'package:mzansi_innovation_hub/main.dart';
+import 'package:mzansi_innovation_hub/mih_package_components/mih_button.dart';
+import 'package:mzansi_innovation_hub/mih_package_components/mih_single_child_scroll.dart';
+import 'package:mzansi_innovation_hub/mih_package_components/mih_floating_menu.dart';
+import 'package:mzansi_innovation_hub/mih_config/mih_colors.dart';
+
+class MihPackageWindow extends StatefulWidget {
+  final String? windowTitle;
+  final Widget windowBody;
+  final List<SpeedDialChild>? menuOptions;
+  final void Function()? onWindowTapClose;
+  final Color? backgroundColor;
+  final Color? foregroundColor;
+  final bool? borderOn;
+  final bool fullscreen;
+  const MihPackageWindow({
+    super.key,
+    required this.fullscreen,
+    required this.windowTitle,
+    this.menuOptions,
+    required this.onWindowTapClose,
+    required this.windowBody,
+    this.borderOn,
+    this.backgroundColor,
+    this.foregroundColor,
+  });
+
+  @override
+  State<MihPackageWindow> createState() => _MihPackageWindowState();
+}
+
+class _MihPackageWindowState extends State<MihPackageWindow> {
+  late double windowTitleSize;
+  late double horizontralWindowPadding;
+  late double vertticalWindowPadding;
+  late double windowWidth;
+  late double windowHeight;
+  late double width;
+  late double height;
+
+  void checkScreenSize() {
+    // print("screen width: $width");
+    // print("screen height: $height");
+    if (MzansiInnovationHub.of(context)!.theme.screenType == "desktop") {
+      setState(() {
+        windowTitleSize = 25;
+        horizontralWindowPadding = width / 7;
+        vertticalWindowPadding = 10;
+        windowWidth = width;
+        windowHeight = height;
+      });
+    } else {
+      setState(() {
+        windowTitleSize = 20;
+        horizontralWindowPadding = 10;
+        vertticalWindowPadding = 10;
+        windowWidth = width;
+        windowHeight = height;
+      });
+    }
+  }
+
+  Widget getHeader() {
+    return Row(
+      mainAxisAlignment: MainAxisAlignment.spaceBetween,
+      crossAxisAlignment: CrossAxisAlignment.center,
+      children: [
+        if (widget.onWindowTapClose != null)
+          Padding(
+            padding: const EdgeInsets.only(
+              top: 5.0,
+              left: 5.0,
+            ),
+            child: MihButton(
+              width: 40,
+              height: 40,
+              elevation: 10,
+              onPressed: widget.onWindowTapClose,
+              buttonColor: MihColors.getRedColor(
+                  MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+              child: Icon(
+                Icons.close,
+                color: MihColors.getPrimaryColor(
+                    MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+              ),
+            ),
+          ),
+        if (widget.windowTitle != null)
+          Expanded(
+            child: Padding(
+              padding: const EdgeInsets.symmetric(horizontal: 10.0),
+              child: Text(
+                widget.windowTitle!,
+                overflow: TextOverflow.ellipsis,
+                textAlign: TextAlign.center,
+                style: TextStyle(
+                  fontSize: windowTitleSize,
+                  fontWeight: FontWeight.bold,
+                  color: widget.foregroundColor ??
+                      MihColors.getSecondaryColor(
+                          MzansiInnovationHub.of(context)!.theme.mode ==
+                              "Dark"),
+                ),
+              ),
+            ),
+          ),
+        if (widget.menuOptions != null)
+          Padding(
+            padding: const EdgeInsets.only(
+              top: 5.0,
+              right: 5.0,
+            ),
+            child: SizedBox(
+              width: 40,
+              child: MihFloatingMenu(
+                iconSize: 40,
+                animatedIcon: AnimatedIcons.menu_close,
+                direction: SpeedDialDirection.down,
+                children: widget.menuOptions != null ? widget.menuOptions! : [],
+              ),
+            ),
+          ),
+      ],
+    );
+  }
+
+  @override
+  void dispose() {
+    super.dispose();
+  }
+
+  @override
+  void initState() {
+    super.initState();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    var size = MediaQuery.of(context).size;
+    setState(() {
+      width = size.width;
+      height = size.height;
+    });
+    checkScreenSize();
+    return Dialog(
+      insetPadding: EdgeInsets.symmetric(
+        horizontal: horizontralWindowPadding,
+        vertical: vertticalWindowPadding,
+      ),
+      insetAnimationCurve: Easing.emphasizedDecelerate,
+      insetAnimationDuration: Durations.short1,
+      child: Material(
+        elevation: 10,
+        shadowColor: Colors.black,
+        color: widget.backgroundColor ??
+            MihColors.getPrimaryColor(
+                MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+        borderRadius: BorderRadius.circular(25.0),
+        child: Container(
+          decoration: BoxDecoration(
+            borderRadius: BorderRadius.circular(25.0),
+            border: widget.borderOn == null || !widget.borderOn!
+                ? null
+                : Border.all(
+                    color: widget.foregroundColor ??
+                        MihColors.getSecondaryColor(
+                            MzansiInnovationHub.of(context)!.theme.mode ==
+                                "Dark"),
+                    width: 5.0),
+          ),
+          child: widget.fullscreen
+              ? Column(
+                  mainAxisSize: MainAxisSize.max,
+                  children: [
+                    getHeader(),
+                    const SizedBox(height: 5),
+                    Expanded(
+                        child: SingleChildScrollView(child: widget.windowBody)),
+                  ],
+                )
+              : Column(
+                  mainAxisSize: MainAxisSize.min,
+                  children: [
+                    getHeader(),
+                    const SizedBox(height: 5),
+                    Flexible(
+                      child: Padding(
+                        padding: EdgeInsets.only(
+                          left: 25,
+                          right: 25,
+                          bottom: vertticalWindowPadding,
+                        ),
+                        child: ConstrainedBox(
+                          constraints: BoxConstraints(
+                            maxHeight: windowHeight * 0.85,
+                            maxWidth: windowWidth * 0.85,
+                          ),
+                          child: MihSingleChildScroll(child: widget.windowBody),
+                        ),
+                      ),
+                    ),
+                  ],
+                ),
+        ),
+      ),
+    );
+  }
+}

mih_ui/lib/mih_package_components/mih_personal_profile_preview.dart

@@ -0,0 +1,95 @@
+import 'package:flutter/material.dart';
+import 'package:mzansi_innovation_hub/main.dart';
+import 'package:mzansi_innovation_hub/mih_objects/app_user.dart';
+import 'package:mzansi_innovation_hub/mih_package_components/mih_circle_avatar.dart';
+import 'package:mzansi_innovation_hub/mih_config/mih_colors.dart';
+import 'package:mzansi_innovation_hub/mih_package_components/mih_icons.dart';
+
+class MihPersonalProfilePreview extends StatefulWidget {
+  final AppUser user;
+  final ImageProvider<Object>? imageFile;
+  final bool loading;
+  const MihPersonalProfilePreview({
+    super.key,
+    required this.user,
+    required this.imageFile,
+    required this.loading,
+  });
+
+  @override
+  State<MihPersonalProfilePreview> createState() =>
+      _MihPersonalProfilePreviewState();
+}
+
+class _MihPersonalProfilePreviewState extends State<MihPersonalProfilePreview> {
+  @override
+  void initState() {
+    super.initState();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    double profilePictureWidth = 60;
+    return Row(
+      children: [
+        widget.loading
+            ? Icon(
+                MihIcons.mihRing,
+                size: profilePictureWidth,
+                color: MihColors.getSecondaryColor(
+                    MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+              )
+            : widget.imageFile == null
+                ? Icon(
+                    MihIcons.iDontKnow,
+                    size: profilePictureWidth,
+                    color: MihColors.getSecondaryColor(
+                        MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+                  )
+                : MihCircleAvatar(
+                    imageFile: widget.imageFile,
+                    width: profilePictureWidth,
+                    editable: false,
+                    fileNameController: TextEditingController(),
+                    userSelectedfile: null,
+                    frameColor: MihColors.getSecondaryColor(
+                        MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+                    backgroundColor: MihColors.getPrimaryColor(
+                        MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+                    onChange: () {},
+                  ),
+        const SizedBox(width: 15),
+        Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            Text(
+              widget.user.username.isNotEmpty
+                  ? widget.user.username
+                  : "Username",
+              style: TextStyle(
+                fontWeight: FontWeight.bold,
+                fontSize: 18,
+              ),
+            ),
+            Text(
+              widget.user.fname.isNotEmpty
+                  ? "${widget.user.fname} ${widget.user.lname}"
+                  : "Name Surname",
+              style: TextStyle(
+                fontWeight: FontWeight.bold,
+                fontSize: 15,
+              ),
+            ),
+            Text(
+              widget.user.type.toUpperCase(),
+              style: TextStyle(
+                fontWeight: FontWeight.bold,
+                fontSize: 10,
+              ),
+            ),
+          ],
+        )
+      ],
+    );
+  }
+}

mih_ui/lib/mih_package_components/mih_profile_links.dart

@@ -0,0 +1,165 @@
+import 'package:flutter/material.dart';
+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_providers/mzansi_profile_provider.dart';
+import 'package:provider/provider.dart';
+import 'package:url_launcher/url_launcher.dart';
+
+class MihProfileLinks extends StatefulWidget {
+  final List<ProfileLink> links;
+  final double? buttonSize;
+  final bool? paddingOn;
+  const MihProfileLinks({
+    super.key,
+    required this.links,
+    this.buttonSize,
+    this.paddingOn,
+  });
+
+  @override
+  State<MihProfileLinks> createState() => _MihProfileLinksState();
+}
+
+class _MihProfileLinksState extends State<MihProfileLinks> {
+  Widget displayLinkButton(ProfileLink link) {
+    IconData iconData;
+    Color iconColor;
+    switch (link.destination.toLowerCase()) {
+      case "youtube":
+        iconData = FontAwesomeIcons.youtube;
+        iconColor = const Color(0xFFFF0000);
+        break;
+      case "tiktok":
+        iconData = FontAwesomeIcons.tiktok;
+        iconColor = const Color(0xFF000000);
+        break;
+      case "twitch":
+        iconData = FontAwesomeIcons.twitch;
+        iconColor = const Color(0xFF6441a5);
+        break;
+      case "threads":
+        iconData = FontAwesomeIcons.threads;
+        iconColor = const Color(0xFF000000);
+        break;
+      case "whatsapp":
+        iconData = FontAwesomeIcons.whatsapp;
+        iconColor = const Color(0xFF25D366);
+        break;
+      case "instagram":
+        iconData = FontAwesomeIcons.instagram;
+        iconColor = const Color(0xFFF56040);
+        break;
+      case "x":
+        iconData = FontAwesomeIcons.xTwitter;
+        iconColor = const Color(0xFF000000);
+        break;
+      case "linkedin":
+        iconData = FontAwesomeIcons.linkedin;
+        iconColor = const Color(0xFF0a66c2);
+        break;
+      case "facebook":
+        iconData = FontAwesomeIcons.facebook;
+        iconColor = const Color(0xFF4267B2);
+        break;
+      case "reddit":
+        iconData = FontAwesomeIcons.reddit;
+        iconColor = const Color(0xFFFF4500);
+        break;
+      case "discord":
+        iconData = FontAwesomeIcons.discord;
+        iconColor = const Color(0xFF5865F2);
+        break;
+      default:
+        iconData = FontAwesomeIcons.link;
+        iconColor = MihColors.getPrimaryColor(
+            MzansiInnovationHub.of(context)!.theme.mode == "Dark");
+    }
+
+    return MihPackageTile(
+      onTap: () {
+        launchSocialUrl(Uri.parse(link.web_link));
+      },
+      appName: link.destination,
+      appIcon: Icon(
+        iconData,
+        color: iconColor,
+      ),
+      iconSize: 200,
+      textColor: Colors.black,
+      // MihColors.getPrimaryColor(
+      //     MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+    );
+  }
+
+  Future<void> launchSocialUrl(Uri linkUrl) async {
+    if (!await launchUrl(linkUrl)) {
+      throw Exception('Could not launch $linkUrl');
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    double width = MediaQuery.of(context).size.width;
+    return Consumer<MzansiProfileProvider>(
+      builder: (BuildContext context, MzansiProfileProvider profileProvider,
+          Widget? child) {
+        return Padding(
+          padding: widget.paddingOn == null || widget.paddingOn!
+              ? MzansiInnovationHub.of(context)!.theme.screenType == "desktop"
+                  ? EdgeInsets.symmetric(horizontal: width * 0.2)
+                  : EdgeInsets.symmetric(horizontal: width * 0.075)
+              : EdgeInsetsGeometry.all(0),
+          child: Material(
+            color: MihColors.getSecondaryColor(
+                    MzansiInnovationHub.of(context)!.theme.mode == "Dark")
+                .withValues(alpha: 0.6),
+            borderRadius: BorderRadius.circular(25),
+            elevation: 10,
+            shadowColor: Colors.black,
+            child: Container(
+              width: 500,
+              padding: EdgeInsets.all(10),
+              decoration: BoxDecoration(
+                color: MihColors.getSecondaryColor(
+                    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(),
+                    ),
+            ),
+          ),
+        );
+      },
+    );
+  }
+}

mih_ui/lib/mih_package_components/mih_radio_options.dart

@@ -0,0 +1,140 @@
+import 'package:flutter/material.dart';
+
+class MihRadioOptions extends StatefulWidget {
+  final TextEditingController controller;
+  final String hintText;
+  final Color fillColor;
+  final Color secondaryFillColor;
+  final bool requiredText;
+  final List<String> radioOptions;
+  const MihRadioOptions({
+    super.key,
+    required this.controller,
+    required this.hintText,
+    required this.fillColor,
+    required this.secondaryFillColor,
+    required this.requiredText,
+    required this.radioOptions,
+  });
+
+  @override
+  State<MihRadioOptions> createState() => _MihRadioOptionsState();
+}
+
+class _MihRadioOptionsState extends State<MihRadioOptions> {
+  // late String _currentSelection;
+
+  @override
+  void initState() {
+    super.initState();
+    if (widget.controller.text.isEmpty && widget.radioOptions.isNotEmpty) {
+      widget.controller.text = widget.radioOptions[0];
+    }
+    // else{
+    //               int index = widget.radioOptions
+    //                   .indexWhere((element) => element == option);
+    //               _currentSelection = widget.radioOptions[index];
+    //               widget.controller.text = option;
+
+    // }
+    // _currentSelection = widget.radioOptions[0];
+  }
+
+// The method to handle a change in selection.
+  void _onChanged(String? value) {
+    if (value != null) {
+      widget.controller.text = value;
+    }
+  }
+
+  Widget displayRadioOptions(String selection) {
+    return Material(
+      elevation: 4.0,
+      borderRadius: BorderRadius.circular(8.0),
+      child: Container(
+        decoration: BoxDecoration(
+          color: widget.fillColor,
+          borderRadius: BorderRadius.circular(8.0),
+        ),
+        child: Column(
+          children: widget.radioOptions.map((option) {
+            return GestureDetector(
+              onTap: () {
+                _onChanged(option);
+              },
+              child: Row(
+                children: [
+                  const SizedBox(width: 10),
+                  Expanded(
+                    child: Text(
+                      option,
+                      style: TextStyle(
+                        color: widget.secondaryFillColor,
+                        fontWeight: FontWeight.w500,
+                        fontSize: 15,
+                      ),
+                    ),
+                  ),
+                  Radio<String>(
+                    value: option,
+                    groupValue: selection,
+                    onChanged: _onChanged,
+                    activeColor: widget.secondaryFillColor,
+                    fillColor: WidgetStateProperty.resolveWith<Color?>(
+                        (Set<WidgetState> states) {
+                      if (states.contains(WidgetState.selected)) {
+                        return widget.secondaryFillColor; // Color when selected
+                      }
+                      return widget.secondaryFillColor;
+                    }),
+                  ),
+                ],
+              ),
+            );
+          }).toList(),
+        ),
+      ),
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return AnimatedBuilder(
+        animation: widget.controller,
+        builder: (context, child) {
+          final currentSelection = widget.controller.text;
+          return Column(
+            children: [
+              Row(
+                mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                children: [
+                  Text(
+                    widget.hintText,
+                    textAlign: TextAlign.left,
+                    style: TextStyle(
+                      color: widget.fillColor,
+                      fontSize: 18,
+                      fontWeight: FontWeight.bold,
+                    ),
+                  ),
+                  Visibility(
+                    visible: !widget.requiredText,
+                    child: Text(
+                      "(Optional)",
+                      textAlign: TextAlign.right,
+                      style: TextStyle(
+                        color: widget.fillColor,
+                        fontSize: 15,
+                        fontWeight: FontWeight.bold,
+                      ),
+                    ),
+                  ),
+                ],
+              ),
+              const SizedBox(height: 4),
+              displayRadioOptions(currentSelection),
+            ],
+          );
+        });
+  }
+}

mih_ui/lib/mih_package_components/mih_scack_bar.dart

@@ -0,0 +1,18 @@
+import 'package:flutter/material.dart';
+
+SnackBar MihSnackBar({
+  required Widget child,
+}) {
+  return SnackBar(
+    content: child,
+    shape: StadiumBorder(),
+    behavior: SnackBarBehavior.floating,
+    duration: Duration(seconds: 2),
+    width: null,
+    action: SnackBarAction(
+      label: "Dismiss",
+      onPressed: () {},
+    ),
+    // elevation: 30,
+  );
+}

mih_ui/lib/mih_package_components/mih_search_bar.dart

@@ -0,0 +1,185 @@
+import 'package:flutter/foundation.dart';
+import 'package:flutter/material.dart';
+
+class MihSearchBar extends StatefulWidget {
+  final TextEditingController controller;
+  final String hintText;
+  final IconData prefixIcon;
+  final IconData? prefixAltIcon;
+  final List<Widget>? suffixTools;
+  final double? width;
+  final double? height;
+  final Color fillColor;
+  final Color hintColor;
+  final void Function()? onPrefixIconTap;
+  final void Function()? onClearIconTap;
+  final double? elevation;
+  final FocusNode searchFocusNode;
+
+  const MihSearchBar({
+    Key? key,
+    required this.controller,
+    required this.hintText,
+    required this.prefixIcon,
+    this.prefixAltIcon,
+    this.suffixTools,
+    this.width,
+    this.height,
+    required this.fillColor,
+    required this.hintColor,
+    required this.onPrefixIconTap,
+    this.onClearIconTap,
+    this.elevation,
+    required this.searchFocusNode,
+  }) : super(key: key);
+
+  @override
+  State<MihSearchBar> createState() => _MihSearchBarState();
+}
+
+class _MihSearchBarState extends State<MihSearchBar> {
+  bool _showClearIcon = false;
+
+  Widget getPrefixIcon() {
+    if (_showClearIcon) {
+      // If the clear icon is shown and an alternative prefix icon is provided, use it
+      return widget.prefixAltIcon != null
+          ? Padding(
+              padding: const EdgeInsets.symmetric(horizontal: 10.0),
+              child: Icon(
+                widget.prefixAltIcon,
+                color: widget.hintColor,
+                size: 35,
+              ),
+            )
+          : Padding(
+              padding: const EdgeInsets.symmetric(horizontal: 10.0),
+              child: Icon(
+                Icons.search,
+                color: widget.hintColor,
+                size: 35,
+              ),
+            ); // Default to search icon if no alt icon
+    } else {
+      // Return the primary prefix icon or the alternative if provided
+      return Padding(
+        padding: const EdgeInsets.symmetric(horizontal: 10.0),
+        child: Icon(
+          Icons.search,
+          color: widget.hintColor,
+          size: 35,
+        ),
+      );
+    }
+  }
+
+  @override
+  void initState() {
+    super.initState();
+    // 1. Add the listener to the controller
+    widget.controller.addListener(_updateClearIconVisibility);
+    // 2. Initialize the clear icon visibility based on the current text
+    _updateClearIconVisibility();
+  }
+
+  @override
+  void dispose() {
+    widget.controller.removeListener(_updateClearIconVisibility);
+    super.dispose();
+  }
+
+  void _updateClearIconVisibility() {
+    if (!mounted) {
+      return;
+    }
+    final bool shouldShow = widget.controller.text.isNotEmpty;
+    // Only call setState if the visibility state actually changes
+    if (_showClearIcon != shouldShow) {
+      setState(() {
+        _showClearIcon = shouldShow;
+      });
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Material(
+      elevation: widget.elevation ?? 4.0, // Use provided elevation or default
+      borderRadius: BorderRadius.circular(30.0),
+      color: widget.fillColor,
+      child: AnimatedContainer(
+        // Keep AnimatedContainer for width/height transitions
+        alignment: Alignment.centerLeft,
+        width: widget.width,
+        height: widget.height ?? 50,
+        duration: const Duration(milliseconds: 300),
+        decoration: BoxDecoration(
+          borderRadius: BorderRadius.circular(30.0),
+        ),
+        child: Theme(
+          data: Theme.of(context).copyWith(
+            textSelectionTheme: TextSelectionThemeData(
+              selectionColor: widget.hintColor.withValues(alpha: 0.3),
+              selectionHandleColor: widget.hintColor,
+            ),
+          ),
+          child: TextField(
+            textAlignVertical: TextAlignVertical.center,
+            controller: widget.controller, // Assign the controller
+            focusNode: widget.searchFocusNode,
+            autocorrect: true,
+            spellCheckConfiguration: kIsWeb ? null : SpellCheckConfiguration(),
+            onSubmitted: (value) {
+              widget.onPrefixIconTap
+                  ?.call(); // Call the prefix icon tap handler
+            },
+            style: TextStyle(
+              color: widget.hintColor,
+              fontWeight: FontWeight.w600,
+              fontSize: 16,
+            ),
+            cursorColor: widget.hintColor,
+            decoration: InputDecoration(
+              isDense: true,
+              hintText: widget.hintText,
+              hintStyle: TextStyle(
+                color: widget.hintColor,
+                fontWeight: FontWeight.w600,
+                fontSize: 16,
+              ),
+              border: InputBorder.none,
+              contentPadding:
+                  const EdgeInsets.symmetric(horizontal: 10.0, vertical: 15.0),
+              prefixIcon: GestureDetector(
+                onTap: widget.onPrefixIconTap,
+                child: getPrefixIcon(),
+              ),
+              suffixIcon: Row(
+                // Use a Row for multiple suffix icons
+                mainAxisSize: MainAxisSize.min,
+                mainAxisAlignment: MainAxisAlignment.center,
+                crossAxisAlignment: CrossAxisAlignment.center,
+                children: [
+                  // Optional suffix tools
+                  if (widget.suffixTools != null) ...widget.suffixTools!,
+                  // Clear Icon (conditionally visible)
+                  if (_showClearIcon) // Only show if input is not empty
+                    IconButton(
+                      iconSize: 35,
+                      icon: Icon(Icons.clear,
+                          color: widget.hintColor), // Clear icon
+                      onPressed: widget.onClearIconTap ??
+                          () {
+                            widget.controller.clear();
+                            // No need for setState here, _updateClearIconVisibility will handle it
+                          },
+                    ),
+                ],
+              ),
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}

mih_ui/lib/mih_package_components/mih_single_child_scroll.dart

@@ -0,0 +1,28 @@
+import 'package:flutter/material.dart';
+
+class MihSingleChildScroll extends StatefulWidget {
+  final Widget child;
+  const MihSingleChildScroll({
+    super.key,
+    required this.child,
+  });
+
+  @override
+  State<MihSingleChildScroll> createState() => _MihSingleChildScrollState();
+}
+
+class _MihSingleChildScrollState extends State<MihSingleChildScroll> {
+  @override
+  Widget build(BuildContext context) {
+    return SafeArea(
+      bottom: false,
+      minimum: EdgeInsets.only(bottom: 5),
+      child: ScrollConfiguration(
+        behavior: ScrollConfiguration.of(context).copyWith(scrollbars: false),
+        child: SingleChildScrollView(
+          child: widget.child,
+        ),
+      ),
+    );
+  }
+}

mih_ui/lib/mih_package_components/mih_text_form_field.dart

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

mih_ui/lib/mih_package_components/mih_time_field.dart

@@ -0,0 +1,217 @@
+import 'package:flutter/material.dart';
+import 'package:mzansi_innovation_hub/main.dart';
+import 'package:mzansi_innovation_hub/mih_config/mih_colors.dart';
+
+class MihTimeField extends StatefulWidget {
+  final TextEditingController controller;
+  final String labelText;
+  final bool required;
+  final double? width;
+  final double? height;
+  final double? borderRadius;
+  final double? elevation;
+  final FormFieldValidator<String>? validator;
+
+  const MihTimeField({
+    super.key,
+    required this.controller,
+    required this.labelText,
+    required this.required,
+    this.width,
+    this.height,
+    this.borderRadius,
+    this.elevation,
+    this.validator,
+  });
+
+  @override
+  State<MihTimeField> createState() => _MihTimeFieldState();
+}
+
+class _MihTimeFieldState extends State<MihTimeField> {
+  FormFieldState<String>? _formFieldState;
+
+  Future<void> _selectTime(BuildContext context) async {
+    TimeOfDay? picked = await showTimePicker(
+      context: context,
+      initialTime: widget.controller.text.isNotEmpty
+          ? TimeOfDay(
+              hour: int.tryParse(widget.controller.text.split(":")[0]) ?? 0,
+              minute: int.tryParse(widget.controller.text.split(":")[1]) ?? 0,
+            )
+          : TimeOfDay.now(),
+      builder: (context, child) {
+        return MediaQuery(
+          data: MediaQuery.of(context).copyWith(alwaysUse24HourFormat: true),
+          child: child as Widget,
+        );
+      },
+    );
+    if (picked != null) {
+      final hours = picked.hour.toString().padLeft(2, '0');
+      final minutes = picked.minute.toString().padLeft(2, '0');
+      widget.controller.text = "$hours:$minutes";
+      _formFieldState?.didChange(widget.controller.text);
+      setState(() {});
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Center(
+      child: SizedBox(
+        width: widget.width,
+        height: widget.height,
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            Row(
+              mainAxisAlignment: MainAxisAlignment.spaceBetween,
+              children: [
+                Text(
+                  widget.labelText,
+                  style: TextStyle(
+                    color: MihColors.getSecondaryColor(
+                        MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+                    fontSize: 18,
+                    fontWeight: FontWeight.bold,
+                  ),
+                ),
+                if (!widget.required)
+                  Text(
+                    "(Optional)",
+                    style: TextStyle(
+                      color: MihColors.getSecondaryColor(
+                          MzansiInnovationHub.of(context)!.theme.mode ==
+                              "Dark"),
+                      fontSize: 15,
+                      fontWeight: FontWeight.bold,
+                    ),
+                  ),
+              ],
+            ),
+            const SizedBox(height: 4),
+            FormField<String>(
+              initialValue: widget.controller.text,
+              validator: widget.validator,
+              autovalidateMode: AutovalidateMode.onUserInteraction,
+              builder: (field) {
+                _formFieldState = field;
+                return Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    Material(
+                      elevation: widget.elevation ?? 4.0,
+                      borderRadius:
+                          BorderRadius.circular(widget.borderRadius ?? 8.0),
+                      child: TextFormField(
+                        controller: widget.controller,
+                        readOnly: true,
+                        onTap: () => _selectTime(context),
+                        style: TextStyle(
+                          color: MihColors.getPrimaryColor(
+                              MzansiInnovationHub.of(context)!.theme.mode ==
+                                  "Dark"),
+                          fontWeight: FontWeight.w500,
+                        ),
+                        decoration: InputDecoration(
+                          suffixIcon: Icon(
+                            Icons.access_time,
+                            color: MihColors.getPrimaryColor(
+                                MzansiInnovationHub.of(context)!.theme.mode ==
+                                    "Dark"),
+                          ),
+                          errorStyle: const TextStyle(height: 0, fontSize: 0),
+                          contentPadding: const EdgeInsets.symmetric(
+                              horizontal: 10.0, vertical: 8.0),
+                          filled: true,
+                          fillColor: MihColors.getSecondaryColor(
+                              MzansiInnovationHub.of(context)!.theme.mode ==
+                                  "Dark"),
+                          border: OutlineInputBorder(
+                            borderRadius: BorderRadius.circular(
+                                widget.borderRadius ?? 8.0),
+                            borderSide: field.hasError
+                                ? BorderSide(
+                                    color: MihColors.getRedColor(
+                                        MzansiInnovationHub.of(context)!
+                                                .theme
+                                                .mode ==
+                                            "Dark"),
+                                    width: 2.0,
+                                  )
+                                : BorderSide.none,
+                          ),
+                          enabledBorder: OutlineInputBorder(
+                            borderRadius: BorderRadius.circular(
+                                widget.borderRadius ?? 8.0),
+                            borderSide: BorderSide.none,
+                          ),
+                          focusedBorder: OutlineInputBorder(
+                            borderRadius: BorderRadius.circular(
+                                widget.borderRadius ?? 8.0),
+                            borderSide: BorderSide(
+                              color: field.hasError
+                                  ? MihColors.getRedColor(
+                                      MzansiInnovationHub.of(context)!
+                                              .theme
+                                              .mode ==
+                                          "Dark")
+                                  : MihColors.getSecondaryColor(
+                                      MzansiInnovationHub.of(context)!
+                                              .theme
+                                              .mode ==
+                                          "Dark"),
+                              width: 3.0,
+                            ),
+                          ),
+                          errorBorder: OutlineInputBorder(
+                            borderRadius: BorderRadius.circular(
+                                widget.borderRadius ?? 8.0),
+                            borderSide: BorderSide(
+                              color: MihColors.getRedColor(
+                                  MzansiInnovationHub.of(context)!.theme.mode ==
+                                      "Dark"),
+                              width: 3.0,
+                            ),
+                          ),
+                          focusedErrorBorder: OutlineInputBorder(
+                            borderRadius: BorderRadius.circular(
+                                widget.borderRadius ?? 8.0),
+                            borderSide: BorderSide(
+                              color: MihColors.getRedColor(
+                                  MzansiInnovationHub.of(context)!.theme.mode ==
+                                      "Dark"),
+                              width: 3.0,
+                            ),
+                          ),
+                        ),
+                        onChanged: (value) {
+                          field.didChange(value);
+                        },
+                      ),
+                    ),
+                    if (field.hasError)
+                      Padding(
+                        padding: const EdgeInsets.only(left: 8.0, top: 4.0),
+                        child: Text(
+                          field.errorText ?? '',
+                          style: TextStyle(
+                            fontSize: 12,
+                            color: MihColors.getRedColor(
+                                MzansiInnovationHub.of(context)!.theme.mode ==
+                                    "Dark"),
+                            fontWeight: FontWeight.bold,
+                          ),
+                        ),
+                      ),
+                  ],
+                );
+              },
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}