Mih File Structure enhancement

Frontend/lib/mih_package_components/Example/package_test.dart

@@ -0,0 +1,137 @@
+import 'package:go_router/go_router.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>();
+    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.inbox)] = () {
+      setState(() {
+        _selcetedIndex = 0;
+      });
+    };
+    temp[const Icon(Icons.outbond)] = () {
+      setState(() {
+        _selcetedIndex = 1;
+      });
+    };
+    return MihPackageTools(
+      tools: temp,
+      selcetedIndex: _selcetedIndex,
+    );
+  }
+
+  void showAlert() {
+    MihAlertServices().inputErrorMessage(context);
+  }
+
+  List<Widget> getToolBody() {
+    MzansiProfileProvider profileProvider =
+        context.read<MzansiProfileProvider>();
+    List<Widget> toolBodies = [
+      PackageToolOne(
+        user: profileProvider.user!,
+        business: profileProvider.business,
+      ),
+      const PackageToolTwo(),
+    ];
+    return toolBodies;
+  }
+
+  List<String> getToolTitle() {
+    List<String> toolTitles = [
+      "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");
+          },
+        );
+      },
+    );
+  }
+}

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

@@ -0,0 +1,58 @@
+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/app_user.dart';
+import 'package:mzansi_innovation_hub/mih_objects/arguments.dart';
+import 'package:mzansi_innovation_hub/mih_objects/business.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 AppUser signedInUser;
+  final Business? business;
+  final double packageSize;
+  const TestPackageTile({
+    super.key,
+    required this.signedInUser,
+    required this.business,
+    required this.packageSize,
+  });
+
+  @override
+  State<TestPackageTile> createState() => _TestPackageTileState();
+}
+
+class _TestPackageTileState extends State<TestPackageTile> {
+  @override
+  Widget build(BuildContext context) {
+    return MihPackageTile(
+      onTap: () {
+        context.goNamed(
+          'testPackage',
+          extra: TestArguments(
+            widget.signedInUser,
+            widget.business,
+          ),
+        );
+        // 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,
+      primaryColor: MihColors.getSecondaryColor(
+          MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+      secondaryColor: MihColors.getPrimaryColor(
+          MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+    );
+  }
+}

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

@@ -0,0 +1,888 @@
+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_business_profile_preview.dart';
+import 'package:mzansi_innovation_hub/mih_package_components/mih_personal_profile_preview.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_packages/mzansi_profile/business_profile/components/mih_business_info_card.dart';
+// import 'package:mzansi_innovation_hub/mih_packages/mzansi_profile/business_profile/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;
+      // const NetworkImage(
+      //     "https://lh3.googleusercontent.com/nW4ZZ89Q1ATz7Ht3nsAVWXL_cwNi4gNusqQZiL60UuuI3FG-VM7bTYDoJ-sUr2kDTdorfQYjxo5PjDM-0MO5rA=s512");
+    });
+
+    // myCoordinates = MIHLocationAPI().getGPSPosition(context);
+  }
+
+  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!,
+                              )
+                            : 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().inputErrorMessage(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();
+                  },
+                ),
+              ]),
+        )
+      ],
+    );
+  }
+}

Frontend/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"),
+              ),
+            ),
+          )
+        ],
+      ),
+    );
+  }
+}

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

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

Frontend/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";
+}

Frontend/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
+                        : ""),
+                  ),
+          ],
+        );
+      },
+    );
+  }
+}

Frontend/lib/mih_package_components/mih_business_profile_preview.dart

@@ -0,0 +1,127 @@
+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_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_file_services.dart';
+import 'package:mzansi_innovation_hub/mih_services/mih_location_services.dart';
+import 'package:provider/provider.dart';
+
+class MihBusinessProfilePreview extends StatefulWidget {
+  final Business business;
+  const MihBusinessProfilePreview({
+    super.key,
+    required this.business,
+  });
+
+  @override
+  State<MihBusinessProfilePreview> createState() =>
+      _MihBusinessProfilePreviewState();
+}
+
+class _MihBusinessProfilePreviewState extends State<MihBusinessProfilePreview> {
+  late Future<String> futureImageUrl;
+  PlatformFile? file;
+
+  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: [
+            FutureBuilder(
+                future: MihFileApi.getMinioFileUrl(widget.business.logo_path),
+                builder: (context, asyncSnapshot) {
+                  if (asyncSnapshot.connectionState == ConnectionState.done &&
+                      asyncSnapshot.hasData) {
+                    if (asyncSnapshot.requireData != "") {
+                      return MihCircleAvatar(
+                        imageFile: NetworkImage(asyncSnapshot.requireData),
+                        width: profilePictureWidth,
+                        editable: false,
+                        fileNameController: TextEditingController(),
+                        userSelectedfile: file,
+                        frameColor: MihColors.getSecondaryColor(
+                            MzansiInnovationHub.of(context)!.theme.mode ==
+                                "Dark"),
+                        backgroundColor: MihColors.getPrimaryColor(
+                            MzansiInnovationHub.of(context)!.theme.mode ==
+                                "Dark"),
+                        onChange: () {},
+                      );
+                    } else {
+                      return Icon(
+                        MihIcons.iDontKnow,
+                        size: profilePictureWidth,
+                        color: MihColors.getSecondaryColor(
+                            MzansiInnovationHub.of(context)!.theme.mode ==
+                                "Dark"),
+                      );
+                    }
+                  } else {
+                    return Icon(
+                      MihIcons.mihRing,
+                      size: profilePictureWidth,
+                      color: MihColors.getSecondaryColor(
+                          MzansiInnovationHub.of(context)!.theme.mode ==
+                              "Dark"),
+                    );
+                  }
+                }),
+            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,
+                  ),
+                ),
+              ],
+            )
+          ],
+        );
+      },
+    );
+  }
+}

Frontend/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,
+          ),
+        ),
+      ),
+    );
+  }
+}

Frontend/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"),
+          ),
+        ),
+      ),
+    );
+  }
+}

Frontend/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.edit,
+                ),
+              ),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}

Frontend/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,
+                          ),
+                        ),
+                      ),
+                  ],
+                );
+              },
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

Frontend/lib/mih_package_components/mih_dropdwn_field.dart

@@ -0,0 +1,248 @@
+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: [
+                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,
+                        ),
+                      ),
+                    ),
+                  ),
+                ),
+                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,
+                      ),
+                    ),
+                  ),
+              ],
+            );
+          },
+        ),
+      ],
+    );
+  }
+}

Frontend/lib/mih_package_components/mih_floating_menu.dart

@@ -0,0 +1,47 @@
+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(
+      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'),
+    );
+  }
+}

Frontend/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,
+      ),
+    );
+  }
+}

Frontend/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);
+}

Frontend/lib/mih_package_components/mih_image_display.dart

@@ -0,0 +1,156 @@
+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: 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,
+                ),
+              ),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}

Frontend/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(),
+                ],
+              )),
+        ),
+      ),
+    );
+  }
+}

Frontend/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().internetConnectionLost(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);
+            //   },
+            // ),
+          ],
+        ),
+      )),
+    );
+  }
+}

Frontend/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(),
+    //   ),
+    // );
+  }
+}

Frontend/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,
+                  ),
+                ),
+              ],
+            ),
+          ],
+        ),
+      ],
+    );
+  }
+}

Frontend/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';
+
+// ignore: must_be_immutable
+class MihPackage extends StatefulWidget {
+  final Widget appActionButton;
+  final MihPackageTools appTools;
+  final List<Widget> appBody;
+  final List<String>? appToolTitles;
+  final MIHAppDrawer? actionDrawer;
+  int selectedbodyIndex;
+  final Function(int) onIndexChange;
+  MihPackage({
+    super.key,
+    required this.appActionButton,
+    required this.appTools,
+    required this.appBody,
+    this.appToolTitles,
+    this.actionDrawer,
+    required this.selectedbodyIndex,
+    required this.onIndexChange,
+  });
+
+  @override
+  State<MihPackage> createState() => _MihPackageState();
+}
+
+class _MihPackageState extends State<MihPackage>
+    with SingleTickerProviderStateMixin {
+  late PageController _pageController;
+  late AnimationController _animationController;
+  DateTime? lastPressedAt;
+
+  void unfocusAll() {
+    FocusScope.of(context).unfocus();
+  }
+
+  Future<void> _peakAnimation() async {
+    int currentPage = widget.selectedbodyIndex;
+    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() {
+    super.dispose();
+    _pageController.dispose();
+    _animationController.dispose();
+  }
+
+  @override
+  void didUpdateWidget(covariant MihPackage oldWidget) {
+    super.didUpdateWidget(oldWidget);
+    if (oldWidget.selectedbodyIndex != widget.selectedbodyIndex) {
+      _pageController.animateToPage(
+        widget.selectedbodyIndex,
+        duration: const Duration(milliseconds: 300),
+        curve: Curves.easeInOut,
+      );
+    }
+  }
+
+  @override
+  void initState() {
+    super.initState();
+    _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 != null
+                                  ? widget
+                                      .appToolTitles![widget.selectedbodyIndex]
+                                  : "",
+                              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(() {
+                          widget.selectedbodyIndex = index;
+                          widget.onIndexChange(widget.selectedbodyIndex);
+                        });
+                      },
+                    ),
+                  ),
+                ],
+              ),
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}

Frontend/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,
+    );
+  }
+}

Frontend/lib/mih_package_components/mih_package_alert.dart

@@ -0,0 +1,117 @@
+import 'package:go_router/go_router.dart';
+import 'package:mzansi_innovation_hub/main.dart';
+import 'package:flutter/material.dart';
+import 'package:mzansi_innovation_hub/mih_config/mih_colors.dart';
+
+class MihPackageAlert extends StatefulWidget {
+  final Widget alertIcon;
+  final String alertTitle;
+  final Widget alertBody;
+  final Color alertColour;
+  const MihPackageAlert({
+    super.key,
+    required this.alertIcon,
+    required this.alertTitle,
+    required this.alertBody,
+    required this.alertColour,
+  });
+
+  @override
+  State<MihPackageAlert> createState() => _MihPackageAlertState();
+}
+
+class _MihPackageAlertState extends State<MihPackageAlert> {
+  late double popUpWidth;
+  late double? popUpheight;
+  late double popUpTitleSize;
+  late double popUpSubtitleSize;
+  late double popUpBodySize;
+  late double popUpIconSize;
+  late double popUpPaddingSize;
+  Size? size;
+
+  void checkScreenSize() {
+    if (MzansiInnovationHub.of(context)!.theme.screenType == "desktop") {
+      setState(() {
+        popUpWidth = (size!.width / 4) * 2;
+        popUpheight = null;
+        popUpTitleSize = 30.0;
+        popUpSubtitleSize = 20.0;
+        popUpBodySize = 15;
+        popUpPaddingSize = 25.0;
+        popUpIconSize = 100;
+      });
+    } else {
+      setState(() {
+        popUpWidth = size!.width - (size!.width * 0.1);
+        popUpheight = null;
+        popUpTitleSize = 25.0;
+        popUpSubtitleSize = 18.0;
+        popUpBodySize = 15;
+        popUpPaddingSize = 15.0;
+        popUpIconSize = 100;
+      });
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    size = MediaQuery.of(context).size;
+    checkScreenSize();
+    return Dialog(
+      child: Stack(
+        children: [
+          Container(
+            padding: EdgeInsets.all(popUpPaddingSize),
+            width: popUpWidth,
+            height: popUpheight,
+            decoration: BoxDecoration(
+              color: MihColors.getPrimaryColor(
+                  MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+              borderRadius: BorderRadius.circular(25.0),
+              border: Border.all(color: widget.alertColour, width: 5.0),
+            ),
+            child: SingleChildScrollView(
+              child: Column(
+                mainAxisSize: MainAxisSize.min,
+                children: [
+                  widget.alertIcon,
+                  //const SizedBox(height: 5),
+                  Text(
+                    widget.alertTitle,
+                    textAlign: TextAlign.center,
+                    style: TextStyle(
+                      color: widget.alertColour,
+                      fontSize: popUpTitleSize,
+                      fontWeight: FontWeight.bold,
+                    ),
+                  ),
+                  const SizedBox(height: 15),
+                  widget.alertBody,
+                  const SizedBox(height: 10),
+                ],
+              ),
+            ),
+          ),
+          Positioned(
+            top: 5,
+            right: 5,
+            width: 50,
+            height: 50,
+            child: IconButton(
+              onPressed: () {
+                context.pop();
+              },
+              icon: Icon(
+                Icons.close,
+                color: MihColors.getRedColor(
+                    MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+                size: 35,
+              ),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}

Frontend/lib/mih_package_components/mih_package_tile.dart

@@ -0,0 +1,234 @@
+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_alert.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';
+
+class MihPackageTile extends StatefulWidget {
+  final String appName;
+  final String? ytVideoID;
+  final Widget appIcon;
+  final void Function() onTap;
+  final double iconSize;
+  final Color primaryColor;
+  final Color secondaryColor;
+  final bool? authenticateUser;
+  const MihPackageTile({
+    super.key,
+    required this.onTap,
+    required this.appName,
+    this.ytVideoID,
+    required this.appIcon,
+    required this.iconSize,
+    required this.primaryColor,
+    required this.secondaryColor,
+    this.authenticateUser,
+  });
+
+  @override
+  State<MihPackageTile> createState() => _MihPackageTileState();
+}
+
+class _MihPackageTileState extends State<MihPackageTile> {
+  final LocalAuthentication _auth = LocalAuthentication();
+
+  void displayHint() {
+    if (widget.ytVideoID != null) {
+      showDialog(
+        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() {
+    Widget alertpopUp = MihPackageAlert(
+      alertIcon: Icon(
+        Icons.fingerprint,
+        color: MihColors.getRedColor(
+            MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+        size: 100,
+      ),
+      alertTitle: "Biometric Authentication Required",
+      alertBody: Column(
+        mainAxisAlignment: MainAxisAlignment.center,
+        children: [
+          Text(
+            "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.",
+            style: TextStyle(
+              fontSize: 15,
+              color: MihColors.getSecondaryColor(
+                  MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+            ),
+          ),
+          const SizedBox(height: 20),
+          Wrap(
+            runAlignment: WrapAlignment.center,
+            crossAxisAlignment: WrapCrossAlignment.center,
+            spacing: 10,
+            runSpacing: 10,
+            children: [
+              MihButton(
+                onPressed: () {
+                  AppSettings.openAppSettings(
+                    type: AppSettingsType.security,
+                  );
+                  Navigator.of(context).pop();
+                },
+                buttonColor: MihColors.getSecondaryColor(
+                    MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+                width: 300,
+                child: Text(
+                  "Set Up Authentication",
+                  style: TextStyle(
+                    color: MihColors.getPrimaryColor(
+                        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,
+                  ),
+                ),
+              ),
+            ],
+          ),
+        ],
+      ),
+      alertColour: MihColors.getRedColor(
+          MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+    );
+    showDialog(
+      context: context,
+      builder: (context) {
+        return alertpopUp;
+      },
+    );
+  }
+
+  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 + widget.iconSize / 3,
+      child: GestureDetector(
+        onTap: () async {
+          authenticateUser();
+        },
+        onLongPress: null, // Do this later
+        child: Column(
+          children: [
+            Flexible(
+              flex: 3,
+              child: LayoutBuilder(
+                builder: (context, constraints) {
+                  double iconHeight = constraints.maxWidth;
+                  return Container(
+                    width: iconHeight,
+                    height: iconHeight,
+                    child:
+                        FittedBox(fit: BoxFit.fitHeight, child: widget.appIcon),
+                  );
+                },
+              ),
+            ),
+            const SizedBox(height: 10),
+            Flexible(
+              flex: 1,
+              child: FittedBox(
+                child: Text(
+                  widget.appName,
+                  textAlign: TextAlign.center,
+                  // softWrap: true,
+                  // overflow: TextOverflow.visible,
+                  style: TextStyle(
+                    color: MihColors.getSecondaryColor(
+                        MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+                    fontSize: 20.0,
+                    fontWeight: FontWeight.bold,
+                  ),
+                ),
+              ),
+            )
+          ],
+        ),
+      ),
+    );
+  }
+}

Frontend/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,
+        ),
+      ),
+    );
+  }
+}

Frontend/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(),
+    );
+  }
+}

Frontend/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),
+                        ),
+                      ),
+                    ),
+                  ],
+                ),
+        ),
+      ),
+    );
+  }
+}

Frontend/lib/mih_package_components/mih_personal_profile_preview.dart

@@ -0,0 +1,108 @@
+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_objects/app_user.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_config/mih_colors.dart';
+import 'package:mzansi_innovation_hub/mih_services/mih_file_services.dart';
+
+class MihPersonalProfilePreview extends StatefulWidget {
+  final AppUser user;
+  const MihPersonalProfilePreview({
+    super.key,
+    required this.user,
+  });
+
+  @override
+  State<MihPersonalProfilePreview> createState() =>
+      _MihPersonalProfilePreviewState();
+}
+
+class _MihPersonalProfilePreviewState extends State<MihPersonalProfilePreview> {
+  late Future<String> futureImageUrl;
+  // String imageUrl = "";
+  PlatformFile? file;
+
+  @override
+  void initState() {
+    super.initState();
+    futureImageUrl = MihFileApi.getMinioFileUrl(widget.user.pro_pic_path);
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    double profilePictureWidth = 60;
+    return Row(
+      children: [
+        FutureBuilder(
+          future: futureImageUrl,
+          builder: (context, asyncSnapshot) {
+            if (asyncSnapshot.connectionState == ConnectionState.done &&
+                asyncSnapshot.hasData) {
+              if (asyncSnapshot.requireData != "") {
+                return MihCircleAvatar(
+                  imageFile: NetworkImage(asyncSnapshot.requireData),
+                  width: profilePictureWidth,
+                  editable: false,
+                  fileNameController: TextEditingController(),
+                  userSelectedfile: file,
+                  frameColor: MihColors.getSecondaryColor(
+                      MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+                  backgroundColor: MihColors.getPrimaryColor(
+                      MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+                  onChange: () {},
+                );
+              } else {
+                return Icon(
+                  MihIcons.iDontKnow,
+                  size: profilePictureWidth,
+                  color: MihColors.getSecondaryColor(
+                      MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+                );
+              }
+            } else {
+              return Icon(
+                MihIcons.mihRing,
+                size: profilePictureWidth,
+                color: MihColors.getSecondaryColor(
+                    MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+              );
+            }
+          },
+        ),
+        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,
+              ),
+            ),
+          ],
+        )
+      ],
+    );
+  }
+}

Frontend/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),
+            ],
+          );
+        });
+  }
+}

Frontend/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,
+  );
+}

Frontend/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
+                          },
+                    ),
+                ],
+              ),
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}

Frontend/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,
+        ),
+      ),
+    );
+  }
+}

Frontend/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,
+                                ),
+                              ),
+                            ),
+                          ],
+                        ),
+                    ],
+                  );
+                },
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}

Frontend/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,
+                          ),
+                        ),
+                      ),
+                  ],
+                );
+              },
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

Frontend/lib/mih_package_components/mih_toggle.dart

@@ -0,0 +1,134 @@
+import 'package:flutter/material.dart';
+import 'package:mzansi_innovation_hub/main.dart';
+import 'package:mzansi_innovation_hub/mih_config/mih_colors.dart';
+
+class MihToggle extends StatefulWidget {
+  final String hintText;
+  final bool initialPostion;
+  final Color fillColor;
+  final Color secondaryFillColor;
+  final bool? readOnly;
+  final double? elevation;
+  final void Function(bool) onChange;
+  const MihToggle({
+    super.key,
+    required this.hintText,
+    required this.initialPostion,
+    required this.fillColor,
+    required this.secondaryFillColor,
+    this.readOnly,
+    this.elevation,
+    required this.onChange,
+  });
+
+  @override
+  State<MihToggle> createState() => _MihToggleState();
+}
+
+class _MihToggleState extends State<MihToggle> {
+  late bool togglePosition;
+
+  @override
+  void didUpdateWidget(covariant MihToggle oldWidget) {
+    super.didUpdateWidget(oldWidget);
+    if (widget.initialPostion != oldWidget.initialPostion) {
+      setState(() {
+        togglePosition = widget.initialPostion;
+      });
+    }
+  }
+
+  @override
+  void initState() {
+    super.initState();
+    togglePosition = widget.initialPostion;
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Row(
+      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+      crossAxisAlignment: CrossAxisAlignment.center,
+      children: [
+        Expanded(
+          child: Text(
+            widget.hintText,
+            style: TextStyle(
+              fontWeight: FontWeight.bold,
+              color: widget.fillColor,
+              fontSize: 18,
+            ),
+          ),
+        ),
+        const SizedBox(width: 10),
+        // Material(
+        // elevation: widget.elevation ?? 0.01,
+        // shadowColor: widget.secondaryFillColor.withOpacity(0.5),
+        // color: Colors.transparent,
+        // shape: StadiumBorder(),
+        Container(
+          decoration: BoxDecoration(
+            color: Colors.transparent,
+            borderRadius: BorderRadius.circular(
+                30), // Adjust the border radius to match the toggle
+            boxShadow: [
+              BoxShadow(
+                color: Colors.black.withOpacity(0.15),
+                offset: Offset(
+                    0, widget.elevation ?? 10), // Adjust the vertical offset
+                blurRadius: widget.elevation ?? 10,
+                spreadRadius: 0,
+              ),
+            ],
+          ),
+          child: Switch(
+            value: togglePosition,
+            trackOutlineColor: WidgetStateProperty.resolveWith<Color?>(
+              (states) {
+                if (widget.readOnly == true) {
+                  return Colors.grey;
+                }
+                if (states.contains(WidgetState.selected)) {
+                  return MihColors.getGreenColor(
+                      MzansiInnovationHub.of(context)!.theme.mode ==
+                          "Dark"); // Outline color when active
+                }
+                return MihColors.getRedColor(
+                    MzansiInnovationHub.of(context)!.theme.mode ==
+                        "Dark"); // Outline color when active
+              },
+            ),
+            activeColor: widget.readOnly == true
+                ? Colors.grey
+                : widget.secondaryFillColor,
+            activeTrackColor: widget.readOnly == true
+                ? Colors.grey.shade400
+                : MihColors.getGreenColor(
+                    MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+            inactiveThumbColor: widget.readOnly == true
+                ? Colors.grey
+                : widget.secondaryFillColor,
+            inactiveTrackColor: widget.readOnly == true
+                ? Colors.grey.shade400
+                : MihColors.getRedColor(
+                    MzansiInnovationHub.of(context)!.theme.mode == "Dark"),
+            // activeColor: widget.secondaryFillColor,
+            // activeTrackColor: widget.fillColor,
+            // inactiveThumbColor: widget.fillColor,
+            // inactiveTrackColor: widget.secondaryFillColor,
+            // onChanged: widget.readOnly != true ? widget.onChange : null,
+            onChanged: widget.readOnly != true
+                ? (newValue) {
+                    setState(() {
+                      togglePosition = newValue; // Update internal state
+                    });
+                    widget.onChange(newValue); // Call the parent's onChange
+                  }
+                : null,
+          ),
+        ),
+        const SizedBox(width: 10),
+      ],
+    );
+  }
+}

Frontend/lib/mih_package_components/mih_yt_video_player.dart

@@ -0,0 +1,46 @@
+import 'package:flutter/material.dart';
+import 'package:youtube_player_iframe/youtube_player_iframe.dart';
+
+class MIHYTVideoPlayer extends StatefulWidget {
+  final String videoYTLink;
+  const MIHYTVideoPlayer({
+    super.key,
+    required this.videoYTLink,
+  });
+
+  @override
+  State<MIHYTVideoPlayer> createState() => _MIHYTVideoPlayerState();
+}
+
+class _MIHYTVideoPlayerState extends State<MIHYTVideoPlayer> {
+  late YoutubePlayerController _controller;
+
+  @override
+  void dispose() {
+    _controller.close();
+    super.dispose();
+  }
+
+  @override
+  void initState() {
+    _controller = YoutubePlayerController(
+      params: const YoutubePlayerParams(
+        enableCaption: false,
+        showControls: true,
+        mute: false,
+        showFullscreenButton: false,
+        loop: false,
+      ),
+    );
+    _controller.loadVideoById(videoId: widget.videoYTLink);
+    super.initState();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return YoutubePlayer(
+      controller: _controller,
+      aspectRatio: 16 / 9,
+    );
+  }
+}