app files restructure

Frontend/lib/mih_components/med_cert_input.dart

@@ -0,0 +1,62 @@
+import 'package:flutter/material.dart';
+import '../mih_components/mih_inputs_and_buttons/mih_date_input.dart';
+
+class Medcertinput extends StatefulWidget {
+  final TextEditingController startDateController;
+  final TextEditingController endDateTextController;
+  final TextEditingController retDateTextController;
+  const Medcertinput({
+    super.key,
+    required this.startDateController,
+    required this.endDateTextController,
+    required this.retDateTextController,
+  });
+
+  @override
+  State<Medcertinput> createState() => _MedcertinputState();
+}
+
+class _MedcertinputState extends State<Medcertinput> {
+  @override
+  void dispose() {
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return SizedBox(
+      //height: 325,
+      child: Column(
+        children: [
+          //const SizedBox(height: 50.0),
+          SizedBox(
+            width: 700,
+            child: MIHDateField(
+              controller: widget.startDateController,
+              lableText: "From",
+              required: true,
+            ),
+          ),
+          const SizedBox(height: 10.0),
+          SizedBox(
+            width: 700,
+            child: MIHDateField(
+              controller: widget.endDateTextController,
+              lableText: "Up to Including",
+              required: true,
+            ),
+          ),
+          const SizedBox(height: 10.0),
+          SizedBox(
+            width: 700,
+            child: MIHDateField(
+              controller: widget.retDateTextController,
+              lableText: "Return",
+              required: true,
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}

Frontend/lib/mih_components/medicine_search.dart

@@ -0,0 +1,202 @@
+import 'dart:convert';
+
+import 'package:flutter/material.dart';
+import '../mih_components/mih_layout/mih_window.dart';
+import '../mih_packages/patient_profile/builder/build_med_list.dart';
+import '../mih_components/mih_pop_up_messages/mih_loading_circle.dart';
+import '../mih_components/mih_pop_up_messages/mih_error_message.dart';
+import '../mih_env/env.dart';
+import '../mih_objects/medicine.dart';
+import 'package:supertokens_flutter/http.dart' as http;
+
+class MedicineSearch extends StatefulWidget {
+  final TextEditingController searchVlaue;
+  const MedicineSearch({
+    super.key,
+    required this.searchVlaue,
+  });
+
+  @override
+  State<MedicineSearch> createState() => _MedicineSearchState();
+}
+
+class _MedicineSearchState extends State<MedicineSearch> {
+  final String endpointMeds = "${AppEnviroment.baseApiUrl}/users/medicine/";
+
+  //TextEditingController searchController = TextEditingController();
+
+  late Future<List<Medicine>> futueMeds;
+  //String searchString = "";
+
+  Future<List<Medicine>> getMedList(String endpoint) async {
+    final response = await http.get(Uri.parse(endpoint));
+    if (response.statusCode == 200) {
+      Iterable l = jsonDecode(response.body);
+      List<Medicine> medicines =
+          List<Medicine>.from(l.map((model) => Medicine.fromJson(model)));
+      // List<Medicine> meds = [];
+      // medicines.forEach((element) => meds.add(element.name));
+      return medicines;
+    } else {
+      internetConnectionPopUp();
+      throw Exception('failed to load medicine');
+    }
+  }
+
+  void internetConnectionPopUp() {
+    showDialog(
+      context: context,
+      builder: (context) {
+        return const MIHErrorMessage(errorType: "Internet Connection");
+      },
+    );
+  }
+
+  @override
+  void dispose() {
+    super.dispose();
+  }
+
+  @override
+  void initState() {
+    futueMeds = getMedList(endpointMeds + widget.searchVlaue.text);
+    super.initState();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return MIHWindow(
+      fullscreen: false,
+      windowTitle: "Select Medicine",
+      windowTools: [],
+      onWindowTapClose: () {
+        Navigator.pop(context);
+      },
+      windowBody: [
+        FutureBuilder(
+          future: futueMeds,
+          builder: (context, snapshot) {
+            if (snapshot.connectionState == ConnectionState.waiting) {
+              return const SizedBox(
+                height: 400,
+                child: Mihloadingcircle(),
+              );
+            } else if (snapshot.hasData && snapshot.data!.isNotEmpty) {
+              final medsList = snapshot.data!;
+              return SizedBox(
+                height: 400,
+                child: BuildMedicinesList(
+                  contoller: widget.searchVlaue,
+                  medicines: medsList,
+                  //searchString: searchString,
+                ),
+              );
+            } else {
+              return const SizedBox(
+                height: 400,
+                child: Center(
+                  child: Text(
+                    "No Match Found\nPlease close and manually capture medicine",
+                    style: TextStyle(fontSize: 25, color: Colors.grey),
+                    textAlign: TextAlign.center,
+                  ),
+                ),
+              );
+            }
+          },
+        ),
+      ],
+    );
+    // return Dialog(
+    //   child: Stack(
+    //     children: [
+    //       Container(
+    //         padding: const EdgeInsets.all(10.0),
+    //         width: 700.0,
+    //         //height: 475.0,
+    //         decoration: BoxDecoration(
+    //           color: MzanziInnovationHub.of(context)!.theme.primaryColor(),
+    //           borderRadius: BorderRadius.circular(25.0),
+    //           border: Border.all(
+    //               color:
+    //                   MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+    //               width: 5.0),
+    //         ),
+    //         child: SingleChildScrollView(
+    //           padding: const EdgeInsets.symmetric(horizontal: 10),
+    //           child: Column(
+    //             crossAxisAlignment: CrossAxisAlignment.center,
+    //             mainAxisAlignment: MainAxisAlignment.center,
+    //             mainAxisSize: MainAxisSize.min,
+    //             children: [
+    //               Text(
+    //                 "Select Medicine",
+    //                 textAlign: TextAlign.center,
+    //                 style: TextStyle(
+    //                   color: MzanziInnovationHub.of(context)!
+    //                       .theme
+    //                       .secondaryColor(),
+    //                   fontSize: 35.0,
+    //                   fontWeight: FontWeight.bold,
+    //                 ),
+    //               ),
+    //               const SizedBox(height: 25.0),
+    //               FutureBuilder(
+    //                 future: futueMeds,
+    //                 builder: (context, snapshot) {
+    //                   if (snapshot.connectionState == ConnectionState.waiting) {
+    //                     return const SizedBox(
+    //                       height: 400,
+    //                       child: Mihloadingcircle(),
+    //                     );
+    //                   } else if (snapshot.hasData &&
+    //                       snapshot.data!.isNotEmpty) {
+    //                     final medsList = snapshot.data!;
+    //                     return SizedBox(
+    //                       height: 400,
+    //                       child: BuildMedicinesList(
+    //                         contoller: widget.searchVlaue,
+    //                         medicines: medsList,
+    //                         //searchString: searchString,
+    //                       ),
+    //                     );
+    //                   } else {
+    //                     return const SizedBox(
+    //                       height: 400,
+    //                       child: Center(
+    //                         child: Text(
+    //                           "No Match Found\nPlease close and manually capture medicine",
+    //                           style:
+    //                               TextStyle(fontSize: 25, color: Colors.grey),
+    //                           textAlign: TextAlign.center,
+    //                         ),
+    //                       ),
+    //                     );
+    //                   }
+    //                 },
+    //               ),
+    //             ],
+    //           ),
+    //         ),
+    //       ),
+    //       Positioned(
+    //         top: 5,
+    //         right: 5,
+    //         width: 50,
+    //         height: 50,
+    //         child: IconButton(
+    //           onPressed: () {
+    //             Navigator.pop(context);
+    //           },
+    //           icon: const Icon(
+    //             Icons.close,
+    //             color: Colors.red,
+    //             size: 35,
+    //           ),
+    //         ),
+    //       ),
+    //     ],
+    //   ),
+    // );
+  }
+}

Frontend/lib/mih_components/mih_calendar.dart

@@ -0,0 +1,92 @@
+import 'package:flutter/material.dart';
+import '../../main.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> {
+  DateTime selectedDay = DateTime.now();
+  CalendarFormat _calendarFormat = CalendarFormat.week;
+
+  void onDaySelected(DateTime day, DateTime focusedDay) {
+    setState(() {
+      selectedDay = day;
+    });
+    widget.setDate(selectedDay.toString().split(" ")[0]);
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return SizedBox(
+      width: widget.calendarWidth,
+      child: TableCalendar(
+        headerStyle: HeaderStyle(
+          formatButtonDecoration: BoxDecoration(
+            border: Border.fromBorderSide(
+              BorderSide(
+                color: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+              ),
+            ),
+            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: MzanziInnovationHub.of(context)!.theme.primaryColor(),
+          ),
+          todayDecoration: BoxDecoration(
+            color: MzanziInnovationHub.of(context)!.theme.messageTextColor(),
+            shape: BoxShape.circle,
+          ),
+          selectedTextStyle: TextStyle(
+            color: MzanziInnovationHub.of(context)!.theme.primaryColor(),
+          ),
+          selectedDecoration: BoxDecoration(
+            color: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+            shape: BoxShape.circle,
+          ),
+          weekendTextStyle: TextStyle(
+            color: MzanziInnovationHub.of(context)!.theme.messageTextColor(),
+          ),
+        ),
+        daysOfWeekStyle: DaysOfWeekStyle(
+          weekdayStyle: TextStyle(
+            color: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+          ),
+          weekendStyle: TextStyle(
+            color: MzanziInnovationHub.of(context)!.theme.messageTextColor(),
+          ),
+        ),
+      ),
+    );
+  }
+}

Frontend/lib/mih_components/mih_inputs_and_buttons/mih_button.dart

@@ -0,0 +1,48 @@
+import 'package:flutter/material.dart';
+
+class MIHButton extends StatefulWidget {
+  final void Function() onTap;
+  final String buttonText;
+  final Color buttonColor;
+  final Color textColor;
+
+  const MIHButton({
+    super.key,
+    required this.onTap,
+    required this.buttonText,
+    required this.buttonColor,
+    required this.textColor,
+  });
+
+  @override
+  State<MIHButton> createState() => _MIHButtonState();
+}
+
+class _MIHButtonState extends State<MIHButton> {
+  @override
+  void dispose() {
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return ElevatedButton(
+      onPressed: widget.onTap,
+      style: ElevatedButton.styleFrom(
+        backgroundColor: widget.buttonColor,
+        shape: RoundedRectangleBorder(
+          borderRadius: BorderRadius.circular(12.0),
+        ),
+      ),
+      child: Text(
+        widget.buttonText,
+        style: TextStyle(
+          //fontWeight: FontWeight.bold,
+          fontSize: 20,
+          color: widget.textColor,
+          fontWeight: FontWeight.bold,
+        ),
+      ),
+    );
+  }
+}

Frontend/lib/mih_components/mih_inputs_and_buttons/mih_date_input.dart

@@ -0,0 +1,152 @@
+import 'package:flutter/material.dart';
+import '../../main.dart';
+
+class MIHDateField extends StatefulWidget {
+  final TextEditingController controller;
+  final String lableText;
+  final bool required;
+
+  const MIHDateField({
+    super.key,
+    required this.controller,
+    required this.lableText,
+    required this.required,
+  });
+
+  @override
+  State<MIHDateField> createState() => _MIHDateFieldState();
+}
+
+class _MIHDateFieldState extends State<MIHDateField> {
+  final FocusNode _focus = FocusNode();
+  bool startup = true;
+  // bool makeEditable() {
+  Future<void> _selectDate(BuildContext context) async {
+    DateTime? picked = await showDatePicker(
+      context: context,
+      initialDate: DateTime.now(),
+      firstDate: DateTime(2000),
+      lastDate: DateTime(2100),
+    );
+    if (picked != null) {
+      setState(() {
+        widget.controller.text = picked.toString().split(" ")[0];
+      });
+    }
+  }
+
+  Widget setRequiredText() {
+    if (widget.required) {
+      return Row(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          Text(
+            "*",
+            style: TextStyle(
+                color: MzanziInnovationHub.of(context)!.theme.errorColor()),
+          ),
+          const SizedBox(
+            width: 8.0,
+          ),
+          Text(widget.lableText,
+              style: TextStyle(
+                  color:
+                      MzanziInnovationHub.of(context)!.theme.secondaryColor())),
+        ],
+      );
+    } else {
+      return Text(widget.lableText,
+          style: TextStyle(
+              color: MzanziInnovationHub.of(context)!.theme.secondaryColor()));
+    }
+  }
+
+  void _onFocusChange() {
+    setState(() {
+      startup = false;
+    });
+  }
+
+  String? get _errorText {
+    final text = widget.controller.text;
+    if (startup) {
+      return null;
+    }
+    if (!widget.required) {
+      return null;
+    }
+    if (text.isEmpty) {
+      return "${widget.lableText} is required";
+    }
+    return null;
+  }
+
+  @override
+  void dispose() {
+    _focus.dispose();
+    super.dispose();
+  }
+
+  @override
+  void initState() {
+    _focus.addListener(_onFocusChange);
+    super.initState();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return TextField(
+      style: TextStyle(
+          color: MzanziInnovationHub.of(context)!.theme.secondaryColor()),
+      controller: widget.controller,
+      readOnly: true,
+      obscureText: false,
+      focusNode: _focus,
+      onChanged: (_) => setState(() {
+        startup = false;
+      }),
+      decoration: InputDecoration(
+        errorText: _errorText,
+        errorStyle: TextStyle(
+            color: MzanziInnovationHub.of(context)!.theme.errorColor(),
+            fontWeight: FontWeight.bold),
+        label: setRequiredText(),
+        //labelText: widget.lableText,
+        //labelStyle: const TextStyle(color: Colors.blueAccent),
+        prefixIcon: Icon(
+          Icons.calendar_today,
+          color: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+        ),
+        fillColor: MzanziInnovationHub.of(context)!.theme.primaryColor(),
+        filled: true,
+        //hintText: hintText,
+        //hintStyle: TextStyle(color: Colors.blueGrey[400]),
+        enabledBorder: OutlineInputBorder(
+          borderSide: BorderSide(
+            color: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+            width: 2.0,
+          ),
+        ),
+        focusedErrorBorder: OutlineInputBorder(
+          borderSide: BorderSide(
+            color: MzanziInnovationHub.of(context)!.theme.errorColor(),
+            width: 2.0,
+          ),
+        ),
+        errorBorder: OutlineInputBorder(
+          borderSide: BorderSide(
+            color: MzanziInnovationHub.of(context)!.theme.errorColor(),
+            width: 2.0,
+          ),
+        ),
+        focusedBorder: OutlineInputBorder(
+          borderSide: BorderSide(
+              color: MzanziInnovationHub.of(context)!.theme.secondaryColor()),
+        ),
+      ),
+      onTap: () {
+        _selectDate(context);
+      },
+    );
+  }
+}

Frontend/lib/mih_components/mih_inputs_and_buttons/mih_dropdown_input.dart

@@ -0,0 +1,214 @@
+import 'package:flutter/material.dart';
+import '../../main.dart';
+
+class MIHDropdownField extends StatefulWidget {
+  final TextEditingController controller;
+  final String hintText;
+  final bool required;
+  final List<String> dropdownOptions;
+  final void Function(String?)? onSelect;
+  final bool editable;
+
+  const MIHDropdownField({
+    super.key,
+    required this.controller,
+    required this.hintText,
+    required this.dropdownOptions,
+    required this.required,
+    required this.editable,
+    this.onSelect,
+  });
+
+  @override
+  State<MIHDropdownField> createState() => _MIHDropdownFieldState();
+}
+
+class _MIHDropdownFieldState extends State<MIHDropdownField> {
+  //var dropbownItems = ["Dr.", "Assistant"];
+  bool startup = true;
+  final FocusNode _focus = FocusNode();
+  late List<DropdownMenuEntry<String>> menu;
+
+  Widget setRequiredText() {
+    if (widget.required) {
+      return Row(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          Text(
+            "*",
+            style: TextStyle(
+                color: MzanziInnovationHub.of(context)!.theme.errorColor()),
+          ),
+          const SizedBox(
+            width: 8.0,
+          ),
+          Text(widget.hintText,
+              style: TextStyle(
+                  color:
+                      MzanziInnovationHub.of(context)!.theme.secondaryColor())),
+        ],
+      );
+    } else {
+      return Text(widget.hintText,
+          style: TextStyle(
+              color: MzanziInnovationHub.of(context)!.theme.secondaryColor()));
+    }
+  }
+
+  void _onFocusChange() {
+    setState(() {
+      startup = false;
+    });
+  }
+
+  String? get _errorText {
+    final text = widget.controller.text;
+    if (startup) {
+      return null;
+    }
+    if (!widget.required) {
+      return null;
+    }
+    if (text.isEmpty) {
+      return "${widget.hintText} is required";
+    }
+    return null;
+  }
+
+  List<DropdownMenuEntry<String>> buidMenueOptions(List<String> options) {
+    List<DropdownMenuEntry<String>> menueList = [];
+    for (final i in options) {
+      menueList.add(DropdownMenuEntry(
+          value: i,
+          label: i,
+          style: ButtonStyle(
+              foregroundColor: WidgetStatePropertyAll(
+                  MzanziInnovationHub.of(context)!.theme.secondaryColor()))));
+    }
+    return menueList;
+  }
+
+  @override
+  void dispose() {
+    _focus.dispose();
+    super.dispose();
+  }
+
+  @override
+  void initState() {
+    menu = buidMenueOptions(widget.dropdownOptions);
+    _focus.addListener(_onFocusChange);
+    super.initState();
+  }
+
+  // bool makeEditable() {
+  @override
+  Widget build(BuildContext context) {
+    return DropdownMenu(
+      initialSelection: widget.controller.text,
+      enabled: widget.editable,
+      trailingIcon: Icon(
+        Icons.arrow_drop_down,
+        color: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+      ),
+      selectedTrailingIcon: Icon(
+        Icons.arrow_drop_up,
+        color: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+      ),
+      textStyle: TextStyle(
+          color: MzanziInnovationHub.of(context)!.theme.secondaryColor()),
+      menuHeight: 300,
+      controller: widget.controller,
+      expandedInsets: EdgeInsets.zero,
+      label: setRequiredText(),
+      errorText: _errorText,
+
+      focusNode: _focus,
+      onSelected: (_) {
+        setState(() {
+          startup = false;
+        });
+        // if (widget.editable == false) {
+        //   return false;
+        // }
+      },
+      leadingIcon: IconButton(
+        onPressed: () {
+          setState(() {
+            startup = false;
+          });
+          widget.controller.clear();
+        },
+        icon: Icon(
+          Icons.delete_outline_rounded,
+          color: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+        ),
+      ),
+      menuStyle: MenuStyle(
+        backgroundColor: WidgetStatePropertyAll(
+            MzanziInnovationHub.of(context)!.theme.primaryColor()),
+        side: WidgetStatePropertyAll(
+          BorderSide(
+              color: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+              width: 2.0),
+        ),
+      ),
+
+      inputDecorationTheme: InputDecorationTheme(
+        filled: true,
+        errorStyle: TextStyle(
+            color: MzanziInnovationHub.of(context)!.theme.errorColor(),
+            fontWeight: FontWeight.bold),
+        fillColor: MzanziInnovationHub.of(context)!.theme.primaryColor(),
+        focusedBorder: OutlineInputBorder(
+          borderSide: BorderSide(
+            color: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+          ),
+        ),
+        focusedErrorBorder: OutlineInputBorder(
+          borderSide: BorderSide(
+            color: MzanziInnovationHub.of(context)!.theme.errorColor(),
+            width: 2.0,
+          ),
+        ),
+        errorBorder: OutlineInputBorder(
+          borderSide: BorderSide(
+            color: MzanziInnovationHub.of(context)!.theme.errorColor(),
+            width: 2.0,
+          ),
+        ),
+        enabledBorder: OutlineInputBorder(
+          borderSide: BorderSide(
+            color: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+            width: 2.0,
+          ),
+        ),
+        disabledBorder: OutlineInputBorder(
+          borderSide: BorderSide(
+            color: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+            width: 2.0,
+          ),
+        ),
+        outlineBorder: BorderSide(
+            color: MzanziInnovationHub.of(context)!.theme.secondaryColor()),
+      ),
+      dropdownMenuEntries: menu,
+      // const <DropdownMenuEntry<String>>[
+      //   DropdownMenuEntry(value: "Dr.", label: "Dr."),
+      //   DropdownMenuEntry(value: "Assistant", label: "Assistant"),
+      // ],
+    );
+  }
+}
+
+//           filled: true,
+//           hintText: hintText,
+//           hintStyle: TextStyle(color: Colors.blueGrey[400]),
+//           enabledBorder: const OutlineInputBorder(
+//             borderSide: BorderSide(
+//               color: Colors.blueAccent,
+//               width: 2.0,
+//             ),
+//           ),
+//           focusedBorder: const OutlineInputBorder(
+//             borderSide: BorderSide(color: Colors.blue),

Frontend/lib/mih_components/mih_inputs_and_buttons/mih_file_input.dart

@@ -0,0 +1,177 @@
+import 'package:flutter/material.dart';
+import '../../main.dart';
+
+class MIHFileField extends StatefulWidget {
+  final TextEditingController controller;
+  final String hintText;
+  final bool editable;
+  final bool required;
+  final void Function() onPressed;
+
+  const MIHFileField({
+    super.key,
+    required this.controller,
+    required this.hintText,
+    required this.editable,
+    required this.required,
+    required this.onPressed,
+  });
+
+  @override
+  State<MIHFileField> createState() => _MIHFileFieldState();
+}
+
+class _MIHFileFieldState extends State<MIHFileField> {
+  bool startup = true;
+  final FocusNode _focus = FocusNode();
+
+  bool makeEditable() {
+    if (widget.editable) {
+      return false;
+    } else {
+      return true;
+    }
+  }
+
+  String? get _errorText {
+    final text = widget.controller.text;
+    String errorMessage = '';
+    if (startup) {
+      return null;
+    }
+    if (!widget.required) {
+      return null;
+    }
+    if (text.isEmpty) {
+      return "${widget.hintText} is required";
+    }
+    if (widget.hintText == "Email" && !isEmailValid(text)) {
+      errorMessage += "Enter a valid email address\n";
+    }
+    if (widget.hintText == "Username" && text.length < 8) {
+      errorMessage += "• Username must contain at least 8 characters.\n";
+    }
+    if (widget.hintText == "Username" && !isUsernameValid(text)) {
+      errorMessage += "• Username can only contain '_' special Chracters.\n";
+    }
+    if (errorMessage.isEmpty) {
+      return null;
+    }
+    // If there are no error messages, the password is valid
+    return errorMessage;
+  }
+
+  bool isUsernameValid(String username) {
+    return RegExp(r'^(?=[a-zA-Z0-9._]{8,20}$)(?!.*[_.]{2})[^_.].*[^_.]$')
+        .hasMatch(username);
+  }
+
+  bool isEmailValid(String email) {
+    return RegExp(r'^[\w-\.]+@[a-zA-Z]+\.[a-zA-Z]{2,}$').hasMatch(email);
+  }
+
+  void _onFocusChange() {
+    setState(() {
+      startup = false;
+    });
+  }
+
+  Widget setRequiredText() {
+    if (widget.required) {
+      return Row(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          Text(
+            "*",
+            style: TextStyle(
+                color: MzanziInnovationHub.of(context)!.theme.errorColor()),
+          ),
+          const SizedBox(
+            width: 8.0,
+          ),
+          Text(widget.hintText,
+              style: TextStyle(
+                  color:
+                      MzanziInnovationHub.of(context)!.theme.secondaryColor())),
+        ],
+      );
+    } else {
+      return Text(widget.hintText,
+          style: TextStyle(
+              color: MzanziInnovationHub.of(context)!.theme.secondaryColor()));
+    }
+  }
+
+  @override
+  void dispose() {
+    _focus.dispose();
+    super.dispose();
+  }
+
+  @override
+  void initState() {
+    _focus.addListener(_onFocusChange);
+    super.initState();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return TextField(
+      style: TextStyle(
+          color: MzanziInnovationHub.of(context)!.theme.secondaryColor()),
+      controller: widget.controller,
+      focusNode: _focus,
+      readOnly: makeEditable(),
+      //enabled: !makeEditable(),
+      obscureText: false,
+      onChanged: (_) => setState(() {
+        startup = false;
+      }),
+      decoration: InputDecoration(
+        suffixIcon: IconButton(
+          icon: const Icon(Icons.attach_file),
+          onPressed: widget.onPressed,
+        ),
+        label: setRequiredText(),
+        //labelStyle: TextStyle(color: MzanziInnovationHub.of(context)!.theme.primaryColor()),
+        fillColor: MzanziInnovationHub.of(context)!.theme.primaryColor(),
+        filled: true,
+        errorText: _errorText,
+        errorStyle: TextStyle(
+            color: MzanziInnovationHub.of(context)!.theme.errorColor(),
+            fontWeight: FontWeight.bold),
+        //errorBorder: const InputBorder(),
+        //hintText: hintText,
+        //hintStyle: TextStyle(color: Colors.blueGrey[400]),
+        disabledBorder: OutlineInputBorder(
+          borderSide: BorderSide(
+            color: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+            width: 2.0,
+          ),
+        ),
+        enabledBorder: OutlineInputBorder(
+          borderSide: BorderSide(
+            color: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+            width: 2.0,
+          ),
+        ),
+        focusedErrorBorder: OutlineInputBorder(
+          borderSide: BorderSide(
+            color: MzanziInnovationHub.of(context)!.theme.errorColor(),
+            width: 2.0,
+          ),
+        ),
+        errorBorder: OutlineInputBorder(
+          borderSide: BorderSide(
+            color: MzanziInnovationHub.of(context)!.theme.errorColor(),
+            width: 2.0,
+          ),
+        ),
+        focusedBorder: OutlineInputBorder(
+          borderSide: BorderSide(
+              color: MzanziInnovationHub.of(context)!.theme.secondaryColor()),
+        ),
+      ),
+    );
+  }
+}

Frontend/lib/mih_components/mih_inputs_and_buttons/mih_multiline_text_input.dart

@@ -0,0 +1,146 @@
+import 'package:flutter/material.dart';
+import '../../main.dart';
+
+class MIHMLTextField extends StatefulWidget {
+  final TextEditingController controller;
+  final String hintText;
+  final bool editable;
+  final bool required;
+
+  const MIHMLTextField({
+    super.key,
+    required this.controller,
+    required this.hintText,
+    required this.editable,
+    required this.required,
+  });
+
+  @override
+  State<MIHMLTextField> createState() => _MIHMLTextFieldState();
+}
+
+class _MIHMLTextFieldState extends State<MIHMLTextField> {
+  bool startup = true;
+  final FocusNode _focus = FocusNode();
+
+  bool makeEditable() {
+    if (widget.editable) {
+      return false;
+    } else {
+      return true;
+    }
+  }
+
+  String? get _errorText {
+    final text = widget.controller.text;
+    if (startup) {
+      return null;
+    }
+    if (!widget.required) {
+      return null;
+    }
+    if (text.isEmpty) {
+      return "${widget.hintText} is required";
+    }
+    return null;
+  }
+
+  void _onFocusChange() {
+    setState(() {
+      startup = false;
+    });
+  }
+
+  Widget setRequiredText() {
+    if (widget.required) {
+      return Row(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          Text(
+            "*",
+            style: TextStyle(
+                color: MzanziInnovationHub.of(context)!.theme.errorColor()),
+          ),
+          const SizedBox(
+            width: 8.0,
+          ),
+          Text(widget.hintText,
+              style: TextStyle(
+                  color:
+                      MzanziInnovationHub.of(context)!.theme.secondaryColor())),
+        ],
+      );
+    } else {
+      return Text(widget.hintText,
+          style: TextStyle(
+              color: MzanziInnovationHub.of(context)!.theme.secondaryColor()));
+    }
+  }
+
+  @override
+  void dispose() {
+    _focus.dispose();
+    super.dispose();
+  }
+
+  @override
+  void initState() {
+    _focus.addListener(_onFocusChange);
+    super.initState();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return TextField(
+      style: TextStyle(
+          color: MzanziInnovationHub.of(context)!.theme.secondaryColor()),
+      textAlign: TextAlign.start,
+      textAlignVertical: TextAlignVertical.top,
+      expands: true,
+      maxLines: null,
+      controller: widget.controller,
+      readOnly: makeEditable(),
+      obscureText: false,
+      focusNode: _focus,
+      onChanged: (_) => setState(() {
+        startup = false;
+      }),
+      decoration: InputDecoration(
+        label: setRequiredText(),
+        errorText: _errorText,
+        errorStyle: TextStyle(
+            color: MzanziInnovationHub.of(context)!.theme.errorColor(),
+            fontWeight: FontWeight.bold),
+        labelStyle: TextStyle(
+            color: MzanziInnovationHub.of(context)!.theme.secondaryColor()),
+        alignLabelWithHint: true,
+        fillColor: MzanziInnovationHub.of(context)!.theme.primaryColor(),
+        filled: true,
+        //hintText: hintText,
+        //hintStyle: TextStyle(color: Colors.blueGrey[400]),
+        enabledBorder: OutlineInputBorder(
+          borderSide: BorderSide(
+            color: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+            width: 2.0,
+          ),
+        ),
+        focusedErrorBorder: OutlineInputBorder(
+          borderSide: BorderSide(
+            color: MzanziInnovationHub.of(context)!.theme.errorColor(),
+            width: 2.0,
+          ),
+        ),
+        errorBorder: OutlineInputBorder(
+          borderSide: BorderSide(
+            color: MzanziInnovationHub.of(context)!.theme.errorColor(),
+            width: 2.0,
+          ),
+        ),
+        focusedBorder: OutlineInputBorder(
+          borderSide: BorderSide(
+              color: MzanziInnovationHub.of(context)!.theme.secondaryColor()),
+        ),
+      ),
+    );
+  }
+}

Frontend/lib/mih_components/mih_inputs_and_buttons/mih_pass_input.dart

@@ -0,0 +1,191 @@
+import 'package:flutter/material.dart';
+import '../../main.dart';
+
+class MIHPassField extends StatefulWidget {
+  final TextEditingController controller;
+  final String hintText;
+  final bool required;
+  final bool signIn;
+  final Iterable<String>? autoFillHintGroup;
+
+  const MIHPassField({
+    super.key,
+    required this.controller,
+    required this.hintText,
+    required this.required,
+    required this.signIn,
+    this.autoFillHintGroup,
+  });
+
+  @override
+  State<MIHPassField> createState() => _MIHPassFieldState();
+}
+
+class _MIHPassFieldState extends State<MIHPassField> {
+  bool startup = true;
+  final textFieldFocusNode = FocusNode();
+  bool _obscured = true;
+  //bool valid = false;
+
+  void _toggleObscured() {
+    setState(() {
+      _obscured = !_obscured;
+      if (textFieldFocusNode.hasPrimaryFocus) {
+        return; // If focus is on text field, dont unfocus
+      }
+      textFieldFocusNode.canRequestFocus =
+          false; // Prevents focus if tap on eye
+    });
+  }
+
+  String? get _errorText {
+    final text = widget.controller.text;
+    String errorMessage = '';
+    if (startup) {
+      return null;
+    }
+    if (!widget.required) {
+      return null;
+    }
+    if (text.isEmpty) {
+      return "${widget.hintText} is required";
+    }
+    // Password length greater than 8
+    if (text.length <= 8 && !widget.signIn) {
+      errorMessage += '• Password must contain at least 8 characters.\n';
+    }
+
+    // Contains at least one uppercase letter
+    if (!text.contains(RegExp(r'[A-Z]')) && !widget.signIn) {
+      errorMessage += '• Uppercase letter is missing.\n';
+    }
+
+    // Contains at least one lowercase letter
+    if (!text.contains(RegExp(r'[a-z]')) && !widget.signIn) {
+      errorMessage += '• Lowercase letter is missing.\n';
+    }
+
+    // Contains at least one digit
+    if (!text.contains(RegExp(r'[0-9]')) && !widget.signIn) {
+      errorMessage += '• number is missing.\n';
+    }
+
+    // Contains at least one special character
+    if (!text.contains(RegExp(r'[!@#$%^&*]')) && !widget.signIn) {
+      errorMessage += '• Special character is missing - !@#\$%^&*\n';
+    }
+
+    // Contains no errors
+    if (errorMessage.isEmpty) {
+      return null;
+    }
+    // If there are no error messages, the password is valid
+    return errorMessage;
+  }
+
+  Widget setRequiredText() {
+    if (widget.required) {
+      return Row(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          Text(
+            "*",
+            style: TextStyle(
+                color: MzanziInnovationHub.of(context)!.theme.errorColor()),
+          ),
+          const SizedBox(
+            width: 8.0,
+          ),
+          Text(widget.hintText,
+              style: TextStyle(
+                  color:
+                      MzanziInnovationHub.of(context)!.theme.secondaryColor())),
+        ],
+      );
+    } else {
+      return Text(widget.hintText,
+          style: TextStyle(
+              color: MzanziInnovationHub.of(context)!.theme.secondaryColor()));
+    }
+  }
+
+  void _onFocusChange() {
+    setState(() {
+      startup = false;
+    });
+  }
+
+  @override
+  void dispose() {
+    textFieldFocusNode.dispose();
+    super.dispose();
+  }
+
+  @override
+  void initState() {
+    textFieldFocusNode.addListener(_onFocusChange);
+    super.initState();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return TextField(
+      autofillHints: widget.autoFillHintGroup,
+      controller: widget.controller,
+      style: TextStyle(
+          color: MzanziInnovationHub.of(context)!.theme.secondaryColor()),
+      obscureText: _obscured,
+      focusNode: textFieldFocusNode,
+      onChanged: (_) => setState(() {
+        startup = false;
+      }),
+      decoration: InputDecoration(
+        fillColor: MzanziInnovationHub.of(context)!.theme.primaryColor(),
+        filled: true,
+        label: setRequiredText(),
+        //labelStyle: const TextStyle(color: Colors.blueAccent),
+        errorText: _errorText,
+        errorStyle: TextStyle(
+            color: MzanziInnovationHub.of(context)!.theme.errorColor(),
+            fontWeight: FontWeight.bold),
+        //hintText: widget.hintText,
+        //hintStyle: TextStyle(color: Colors.blueGrey[400]),
+        enabledBorder: OutlineInputBorder(
+          borderSide: BorderSide(
+            color: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+            width: 2.0,
+          ),
+        ),
+        focusedErrorBorder: OutlineInputBorder(
+          borderSide: BorderSide(
+            color: MzanziInnovationHub.of(context)!.theme.errorColor(),
+            width: 2.0,
+          ),
+        ),
+        errorBorder: OutlineInputBorder(
+          borderSide: BorderSide(
+            color: MzanziInnovationHub.of(context)!.theme.errorColor(),
+            width: 2.0,
+          ),
+        ),
+        focusedBorder: OutlineInputBorder(
+          borderSide: BorderSide(
+              color: MzanziInnovationHub.of(context)!.theme.secondaryColor()),
+        ),
+        suffixIcon: Padding(
+          padding: const EdgeInsets.fromLTRB(0, 0, 4, 0),
+          child: GestureDetector(
+            onTap: _toggleObscured,
+            child: Icon(
+              _obscured
+                  ? Icons.visibility_rounded
+                  : Icons.visibility_off_rounded,
+              size: 24,
+              color: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}

Frontend/lib/mih_components/mih_inputs_and_buttons/mih_search_input.dart

@@ -0,0 +1,158 @@
+import 'package:flutter/material.dart';
+import '../../main.dart';
+
+class MIHSearchField extends StatefulWidget {
+  final TextEditingController controller;
+  final String hintText;
+  final bool required;
+  final bool editable;
+  final void Function() onTap;
+
+  const MIHSearchField({
+    super.key,
+    required this.controller,
+    required this.hintText,
+    required this.required,
+    required this.editable,
+    required this.onTap,
+  });
+
+  @override
+  State<MIHSearchField> createState() => _MIHSearchFieldState();
+}
+
+class _MIHSearchFieldState extends State<MIHSearchField> {
+  bool startup = true;
+  final FocusNode _focus = FocusNode();
+
+  bool makeEditable() {
+    if (widget.editable) {
+      return false;
+    } else {
+      return true;
+    }
+  }
+
+  String? get _errorText {
+    final text = widget.controller.text;
+    if (startup) {
+      return null;
+    }
+    if (!widget.required) {
+      return null;
+    }
+    if (text.isEmpty) {
+      return "${widget.hintText} is required";
+    }
+    return null;
+  }
+
+  void _onFocusChange() {
+    setState(() {
+      startup = false;
+    });
+  }
+
+  Widget setRequiredText() {
+    if (widget.required) {
+      return Row(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          Text(
+            "*",
+            style: TextStyle(
+                color: MzanziInnovationHub.of(context)!.theme.errorColor()),
+          ),
+          const SizedBox(
+            width: 8.0,
+          ),
+          Text(
+            widget.hintText,
+            style: TextStyle(
+              color: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+            ),
+          ),
+        ],
+      );
+    } else {
+      return Text(widget.hintText,
+          style: TextStyle(
+              color: MzanziInnovationHub.of(context)!.theme.secondaryColor()));
+    }
+  }
+
+  @override
+  void dispose() {
+    _focus.dispose();
+    super.dispose();
+  }
+
+  @override
+  void initState() {
+    _focus.addListener(_onFocusChange);
+    super.initState();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return TextField(
+      style: TextStyle(
+          color: MzanziInnovationHub.of(context)!.theme.secondaryColor()),
+      onChanged: (_) {
+        setState(() {
+          startup = false;
+        });
+      },
+      controller: widget.controller,
+      //style: TextStyle(color: MzanziInnovationHub.of(context)!.theme.secondaryColor()),
+      readOnly: makeEditable(),
+      focusNode: _focus,
+      obscureText: false,
+      decoration: InputDecoration(
+        fillColor: MzanziInnovationHub.of(context)!.theme.primaryColor(),
+        suffixIcon: IconButton(
+          icon: Icon(
+            Icons.search,
+            color: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+          ),
+          onPressed: () {
+            setState(() {
+              startup = false;
+            });
+            if (widget.controller.text != "") {
+              widget.onTap();
+            }
+          },
+        ),
+        filled: true,
+        label: setRequiredText(),
+        errorText: _errorText,
+        errorStyle: TextStyle(
+            color: MzanziInnovationHub.of(context)!.theme.errorColor(),
+            fontWeight: FontWeight.bold),
+        enabledBorder: OutlineInputBorder(
+          borderSide: BorderSide(
+            color: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+            width: 2.0,
+          ),
+        ),
+        focusedErrorBorder: OutlineInputBorder(
+          borderSide: BorderSide(
+            color: MzanziInnovationHub.of(context)!.theme.errorColor(),
+            width: 2.0,
+          ),
+        ),
+        errorBorder: OutlineInputBorder(
+          borderSide: BorderSide(
+            color: MzanziInnovationHub.of(context)!.theme.errorColor(),
+            width: 2.0,
+          ),
+        ),
+        focusedBorder: OutlineInputBorder(
+          borderSide: BorderSide(
+              color: MzanziInnovationHub.of(context)!.theme.secondaryColor()),
+        ),
+      ),
+    );
+  }
+}

Frontend/lib/mih_components/mih_inputs_and_buttons/mih_text_input.dart

@@ -0,0 +1,185 @@
+import 'package:flutter/material.dart';
+import '../../main.dart';
+
+class MIHTextField extends StatefulWidget {
+  final TextEditingController controller;
+  final String hintText;
+  final bool editable;
+  final bool required;
+  final Iterable<String>? autoFillHintGroup;
+
+  const MIHTextField({
+    super.key,
+    required this.controller,
+    required this.hintText,
+    required this.editable,
+    required this.required,
+    this.autoFillHintGroup,
+  });
+
+  @override
+  State<MIHTextField> createState() => _MIHTextFieldState();
+}
+
+class _MIHTextFieldState extends State<MIHTextField> {
+  bool startup = true;
+  final FocusNode _focus = FocusNode();
+
+  bool makeEditable() {
+    if (widget.editable) {
+      return false;
+    } else {
+      return true;
+    }
+  }
+
+  String? get _errorText {
+    final text = widget.controller.text;
+    String errorMessage = '';
+    if (startup) {
+      return null;
+    }
+    if (!widget.required) {
+      return null;
+    }
+    if (text.isEmpty) {
+      return "${widget.hintText} is required";
+    }
+    if (widget.hintText == "Email" && !isEmailValid(text)) {
+      errorMessage += "Enter a valid email address\n";
+    }
+    if (widget.hintText == "Username" && text.length < 8) {
+      errorMessage += "• Username must contain at least 8 characters.\n";
+    }
+    if (widget.hintText == "Username" && !isUsernameValid(text)) {
+      errorMessage += "• Username can only contain '_' special Chracters.\n";
+    }
+    if (errorMessage.isEmpty) {
+      return null;
+    }
+    // If there are no error messages, the password is valid
+    return errorMessage;
+  }
+
+  bool isUsernameValid(String username) {
+    return RegExp(r'^(?=[a-zA-Z0-9._]{8,20}$)(?!.*[_.]{2})[^_.].*[^_.]$')
+        .hasMatch(username);
+  }
+
+  bool isEmailValid(String email) {
+    var regex = RegExp(r'^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$');
+    return regex.hasMatch(email);
+  }
+
+  void _onFocusChange() {
+    setState(() {
+      startup = false;
+    });
+  }
+
+  // List<AutofillGroup> getAutoFillDetails(){
+  //   if(widget.autoFillHintGroup == null){
+  //     return [];
+  //   }
+  //   else{
+  //     return widget.autoFillHintGroup!;
+  //   }
+  // }
+
+  Widget setRequiredText() {
+    if (widget.required) {
+      return Row(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          Text(
+            "*",
+            style: TextStyle(
+                color: MzanziInnovationHub.of(context)!.theme.errorColor()),
+          ),
+          const SizedBox(
+            width: 8.0,
+          ),
+          Text(widget.hintText,
+              style: TextStyle(
+                  color:
+                      MzanziInnovationHub.of(context)!.theme.secondaryColor())),
+        ],
+      );
+    } else {
+      return Text(widget.hintText,
+          style: TextStyle(
+              color: MzanziInnovationHub.of(context)!.theme.secondaryColor()));
+    }
+  }
+
+  @override
+  void dispose() {
+    _focus.dispose();
+    super.dispose();
+  }
+
+  @override
+  void initState() {
+    _focus.addListener(_onFocusChange);
+    super.initState();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return TextField(
+      autofillHints: widget.autoFillHintGroup,
+      style: TextStyle(
+        color: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+      ),
+      controller: widget.controller,
+      focusNode: _focus,
+      readOnly: makeEditable(),
+      //enabled: !makeEditable(),
+      obscureText: false,
+      onChanged: (_) => setState(() {
+        startup = false;
+      }),
+      decoration: InputDecoration(
+        label: setRequiredText(),
+        //labelStyle: TextStyle(color: MzanziInnovationHub.of(context)!.theme.primaryColor()),
+        fillColor: MzanziInnovationHub.of(context)!.theme.primaryColor(),
+        filled: true,
+        errorText: _errorText,
+        errorStyle: TextStyle(
+            color: MzanziInnovationHub.of(context)!.theme.errorColor(),
+            fontWeight: FontWeight.bold),
+        //errorBorder: const InputBorder(),
+        //hintText: hintText,
+        //hintStyle: TextStyle(color: Colors.blueGrey[400]),
+        disabledBorder: OutlineInputBorder(
+          borderSide: BorderSide(
+            color: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+            width: 2.0,
+          ),
+        ),
+        enabledBorder: OutlineInputBorder(
+          borderSide: BorderSide(
+            color: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+            width: 2.0,
+          ),
+        ),
+        focusedErrorBorder: OutlineInputBorder(
+          borderSide: BorderSide(
+            color: MzanziInnovationHub.of(context)!.theme.errorColor(),
+            width: 2.0,
+          ),
+        ),
+        errorBorder: OutlineInputBorder(
+          borderSide: BorderSide(
+            color: MzanziInnovationHub.of(context)!.theme.errorColor(),
+            width: 2.0,
+          ),
+        ),
+        focusedBorder: OutlineInputBorder(
+          borderSide: BorderSide(
+              color: MzanziInnovationHub.of(context)!.theme.secondaryColor()),
+        ),
+      ),
+    );
+  }
+}

Frontend/lib/mih_components/mih_inputs_and_buttons/mih_time_input.dart

@@ -0,0 +1,170 @@
+import 'package:flutter/material.dart';
+import '../../main.dart';
+
+class MIHTimeField extends StatefulWidget {
+  final TextEditingController controller;
+  final String lableText;
+  final bool required;
+
+  const MIHTimeField({
+    super.key,
+    required this.controller,
+    required this.lableText,
+    required this.required,
+  });
+
+  @override
+  State<MIHTimeField> createState() => _MIHDateFieldState();
+}
+
+class _MIHDateFieldState extends State<MIHTimeField> {
+  final FocusNode _focus = FocusNode();
+  bool startup = true;
+
+  Future<void> _selectTime(BuildContext context) async {
+    TimeOfDay? picked = await showTimePicker(
+      context: context,
+      initialTime: TimeOfDay.now(),
+      builder: (context, child) {
+        return MediaQuery(
+          data: MediaQuery.of(context).copyWith(alwaysUse24HourFormat: true),
+          child: child as Widget,
+        );
+      },
+    );
+    if (picked != null) {
+      String hours = "";
+      String minutes = "";
+      setState(() {
+        if (picked.hour <= 9) {
+          hours = "0${picked.hour}";
+        } else {
+          hours = "${picked.hour}";
+        }
+
+        if (picked.minute <= 9) {
+          minutes = "0${picked.minute}";
+        } else {
+          minutes = "${picked.minute}";
+        }
+
+        widget.controller.text = "$hours:$minutes";
+      });
+    }
+  }
+
+  Widget setRequiredText() {
+    if (widget.required) {
+      return Row(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          Text(
+            "*",
+            style: TextStyle(
+                color: MzanziInnovationHub.of(context)!.theme.errorColor()),
+          ),
+          const SizedBox(
+            width: 8.0,
+          ),
+          Text(widget.lableText,
+              style: TextStyle(
+                  color:
+                      MzanziInnovationHub.of(context)!.theme.secondaryColor())),
+        ],
+      );
+    } else {
+      return Text(widget.lableText,
+          style: TextStyle(
+              color: MzanziInnovationHub.of(context)!.theme.secondaryColor()));
+    }
+  }
+
+  void _onFocusChange() {
+    setState(() {
+      startup = false;
+    });
+  }
+
+  String? get _errorText {
+    final text = widget.controller.text;
+    if (startup) {
+      return null;
+    }
+    if (!widget.required) {
+      return null;
+    }
+    if (text.isEmpty) {
+      return "${widget.lableText} is required";
+    }
+    return null;
+  }
+
+  @override
+  void dispose() {
+    _focus.dispose();
+    super.dispose();
+  }
+
+  @override
+  void initState() {
+    _focus.addListener(_onFocusChange);
+    super.initState();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return TextField(
+      style: TextStyle(
+          color: MzanziInnovationHub.of(context)!.theme.secondaryColor()),
+      controller: widget.controller,
+      readOnly: true,
+      obscureText: false,
+      focusNode: _focus,
+      onChanged: (_) => setState(() {
+        startup = false;
+      }),
+      decoration: InputDecoration(
+        errorText: _errorText,
+        errorStyle: TextStyle(
+            color: MzanziInnovationHub.of(context)!.theme.errorColor(),
+            fontWeight: FontWeight.bold),
+        label: setRequiredText(),
+        //labelText: widget.lableText,
+        //labelStyle: const TextStyle(color: Colors.blueAccent),
+        prefixIcon: Icon(
+          Icons.access_alarm,
+          color: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+        ),
+        fillColor: MzanziInnovationHub.of(context)!.theme.primaryColor(),
+        filled: true,
+        //hintText: hintText,
+        //hintStyle: TextStyle(color: Colors.blueGrey[400]),
+        enabledBorder: OutlineInputBorder(
+          borderSide: BorderSide(
+            color: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+            width: 2.0,
+          ),
+        ),
+        focusedErrorBorder: OutlineInputBorder(
+          borderSide: BorderSide(
+            color: MzanziInnovationHub.of(context)!.theme.errorColor(),
+            width: 2.0,
+          ),
+        ),
+        errorBorder: OutlineInputBorder(
+          borderSide: BorderSide(
+            color: MzanziInnovationHub.of(context)!.theme.errorColor(),
+            width: 2.0,
+          ),
+        ),
+        focusedBorder: OutlineInputBorder(
+          borderSide: BorderSide(
+              color: MzanziInnovationHub.of(context)!.theme.secondaryColor()),
+        ),
+      ),
+      onTap: () {
+        _selectTime(context);
+      },
+    );
+  }
+}

Frontend/lib/mih_components/mih_layout/mih_action.dart

@@ -0,0 +1,38 @@
+import 'package:flutter/material.dart';
+
+class MIHAction extends StatefulWidget {
+  final void Function()? onTap;
+  final double iconSize;
+  final Widget icon;
+  const MIHAction({
+    super.key,
+    required this.icon,
+    required this.iconSize,
+    required this.onTap,
+  });
+
+  @override
+  State<MIHAction> createState() => _MIHActionState();
+}
+
+class _MIHActionState extends State<MIHAction> {
+  @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_components/mih_layout/mih_app_drawer.dart

@@ -0,0 +1,267 @@
+import 'package:flutter/material.dart';
+import '../../main.dart';
+import '../../mih_objects/app_user.dart';
+import '../../mih_objects/arguments.dart';
+import 'package:supertokens_flutter/supertokens.dart';
+import '../mih_profile_picture.dart';
+
+class MIHAppDrawer extends StatefulWidget {
+  final AppUser signedInUser;
+  final ImageProvider<Object>? propicFile;
+
+  const MIHAppDrawer({
+    super.key,
+    required this.signedInUser,
+    required this.propicFile,
+  });
+
+  @override
+  State<MIHAppDrawer> createState() => _MIHAppDrawerState();
+}
+
+class _MIHAppDrawerState extends State<MIHAppDrawer> {
+  final proPicController = TextEditingController();
+  late Widget profilePictureLoaded;
+  Future<bool> signOut() async {
+    await SuperTokens.signOut(completionHandler: (error) {
+      // handle error if any
+    });
+    return true;
+  }
+
+  Widget displayProPic() {
+    // return MIHProfilePicture(
+    //         profilePictureFile: widget.propicFile,
+    //         proPicController: proPicController,
+    //         proPic: null,
+    //         width: 45,
+    //         radius: 21,
+    //         editable: false,
+    //         onChange: (newProPic) {},
+    //       ),
+    //print(widget.propicFile);
+    ImageProvider logoFrame =
+        MzanziInnovationHub.of(context)!.theme.logoFrame();
+    if (widget.propicFile != null) {
+      return GestureDetector(
+        onTap: () {
+          Navigator.of(context).pop();
+          Navigator.of(context).pushNamed(
+            '/user-profile',
+            arguments: AppProfileUpdateArguments(
+                widget.signedInUser, widget.propicFile),
+          );
+        },
+        child: MIHProfilePicture(
+          profilePictureFile: widget.propicFile,
+          proPicController: proPicController,
+          proPic: null,
+          width: 60,
+          radius: 27,
+          drawerMode: true,
+          editable: false,
+          onChange: (newProPic) {},
+        ),
+
+        // Stack(
+        //   alignment: Alignment.center,
+        //   fit: StackFit.loose,
+        //   children: [
+        //     CircleAvatar(
+        //       backgroundColor:
+        //           MzanziInnovationHub.of(context)!.theme.primaryColor(),
+        //       backgroundImage: widget.propicFile,
+        //       //'https://media.licdn.com/dms/image/D4D03AQGd1-QhjtWWpA/profile-displayphoto-shrink_400_400/0/1671698053061?e=2147483647&v=beta&t=a3dJI5yxs5-KeXjj10LcNCFuC9IOfa8nNn3k_Qyr0CA'),
+        //       radius: 27,
+        //     ),
+        //     SizedBox(
+        //       width: 60,
+        //       child: Image(image: logoFrame),
+        //     )
+        //   ],
+        // ),
+      );
+    } else {
+      return SizedBox(
+        width: 60,
+        child: Image(image: logoFrame),
+      );
+    }
+  }
+
+  @override
+  void dispose() {
+    proPicController.dispose();
+    super.dispose();
+  }
+
+  @override
+  void initState() {
+    setState(() {
+      profilePictureLoaded = displayProPic();
+    });
+    super.initState();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    // precacheImage(
+    //     MzanziInnovationHub.of(context)!.theme.logoImage().image, context);
+    ImageProvider logoThemeSwitch =
+        MzanziInnovationHub.of(context)!.theme.logoImage();
+    return Drawer(
+      //backgroundColor:  MzanziInnovationHub.of(context)!.theme.primaryColor(),
+      child: Stack(children: [
+        ListView(
+          padding: EdgeInsets.zero,
+          children: [
+            DrawerHeader(
+              decoration: BoxDecoration(
+                color: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+              ),
+              child: SizedBox(
+                height: 400,
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  mainAxisSize: MainAxisSize.min,
+                  children: [
+                    profilePictureLoaded,
+                    Text(
+                      "${widget.signedInUser.fname} ${widget.signedInUser.lname}",
+                      style: TextStyle(
+                        fontWeight: FontWeight.bold,
+                        color: MzanziInnovationHub.of(context)!
+                            .theme
+                            .primaryColor(),
+                      ),
+                    ),
+                    Text(
+                      "@${widget.signedInUser.username}",
+                      style: TextStyle(
+                        fontSize: 12,
+                        fontWeight: FontWeight.bold,
+                        color: MzanziInnovationHub.of(context)!
+                            .theme
+                            .primaryColor(),
+                      ),
+                    ),
+                    Text(
+                      widget.signedInUser.type.toUpperCase(),
+                      style: TextStyle(
+                        fontSize: 10,
+                        fontWeight: FontWeight.bold,
+                        color: MzanziInnovationHub.of(context)!
+                            .theme
+                            .primaryColor(),
+                      ),
+                    ),
+                  ],
+                ),
+              ),
+            ),
+            ListTile(
+              title: Row(
+                mainAxisSize: MainAxisSize.max,
+                children: [
+                  Icon(
+                    Icons.home_outlined,
+                    color:
+                        MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                  ),
+                  const SizedBox(width: 25.0),
+                  Text(
+                    "Home",
+                    style: TextStyle(
+                      //fontWeight: FontWeight.bold,
+                      color: MzanziInnovationHub.of(context)!
+                          .theme
+                          .secondaryColor(),
+                    ),
+                  ),
+                ],
+              ),
+              onTap: () {
+                Navigator.of(context)
+                    .pushNamedAndRemoveUntil('/', (route) => false);
+              },
+            ),
+            ListTile(
+              title: Row(
+                mainAxisSize: MainAxisSize.max,
+                children: [
+                  Icon(
+                    Icons.logout,
+                    color:
+                        MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                  ),
+                  const SizedBox(width: 25.0),
+                  Text(
+                    "Sign Out",
+                    style: TextStyle(
+                      //fontWeight: FontWeight.bold,
+                      color: MzanziInnovationHub.of(context)!
+                          .theme
+                          .secondaryColor(),
+                    ),
+                  ),
+                ],
+              ),
+              onTap: () async {
+                await SuperTokens.signOut(completionHandler: (error) {
+                  //print(error);
+                });
+                if (await SuperTokens.doesSessionExist() == false) {
+                  Navigator.of(context).popAndPushNamed('/');
+                }
+              },
+            )
+          ],
+        ),
+        Positioned(
+          top: 5,
+          right: 5,
+          width: 30,
+          height: 30,
+          child: InkWell(
+            onTap: () {
+              setState(() {
+                if (MzanziInnovationHub.of(context)?.theme.mode == "Dark") {
+                  //darkm = !darkm;
+                  MzanziInnovationHub.of(context)!.changeTheme(ThemeMode.light);
+                  //print("Dark Mode: $darkm");
+                } else {
+                  //darkm = !darkm;
+                  MzanziInnovationHub.of(context)!.changeTheme(ThemeMode.dark);
+                  //print("Dark Mode: $darkm");
+                }
+                Navigator.of(context).popAndPushNamed('/');
+              });
+            },
+            child: Image(image: logoThemeSwitch),
+          ),
+          // IconButton(
+          //   onPressed: () {
+          //     setState(() {
+          //       if (MzanziInnovationHub.of(context)?.theme.mode == "Dark") {
+          //         //darkm = !darkm;
+          //         MzanziInnovationHub.of(context)!.changeTheme(ThemeMode.light);
+          //         //print("Dark Mode: $darkm");
+          //       } else {
+          //         //darkm = !darkm;
+          //         MzanziInnovationHub.of(context)!.changeTheme(ThemeMode.dark);
+          //         //print("Dark Mode: $darkm");
+          //       }
+          //       Navigator.of(context).popAndPushNamed('/');
+          //     });
+          //   },
+          //   icon: Icon(
+          //     Icons.light_mode,
+          //     color: MzanziInnovationHub.of(context)!.theme.primaryColor(),
+          //     size: 35,
+          //   ),
+          // ),
+        ),
+      ]),
+    );
+  }
+}

Frontend/lib/mih_components/mih_layout/mih_body.dart

@@ -0,0 +1,103 @@
+import 'package:flutter/material.dart';
+import '../../main.dart';
+
+class MIHBody extends StatefulWidget {
+  final bool borderOn;
+  final List<Widget> bodyItems;
+  const MIHBody({
+    super.key,
+    required this.borderOn,
+    required this.bodyItems,
+  });
+
+  @override
+  State<MIHBody> createState() => _MIHBodyState();
+}
+
+class _MIHBodyState extends State<MIHBody> {
+  //double paddingSize = 10;
+
+  double getHorizontalPaddingSize(Size screenSize) {
+    if (MzanziInnovationHub.of(context)!.theme.screenType == "desktop") {
+      if (widget.borderOn) {
+        return 10;
+      } else {
+        return 0;
+      }
+    } else {
+      // mobile
+      if (widget.borderOn) {
+        return 10;
+      } else {
+        return 0;
+      }
+    }
+  }
+
+  double getVerticalPaddingSize(Size screenSize) {
+    // mobile
+    if (widget.borderOn) {
+      return 10;
+    } else {
+      return 0;
+    }
+  }
+
+  Decoration? getBoader() {
+    if (widget.borderOn) {
+      return BoxDecoration(
+        color: MzanziInnovationHub.of(context)!.theme.primaryColor(),
+        borderRadius: BorderRadius.circular(25.0),
+        border: Border.all(
+            color: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+            width: 3.0),
+      );
+    } else {
+      return null;
+    }
+  }
+
+  @override
+  void dispose() {
+    super.dispose();
+  }
+
+  @override
+  void initState() {
+    super.initState();
+  }
+
+  @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(
+        padding: EdgeInsets.only(
+          left: 10,
+          right: 10,
+          bottom: 10,
+          top: getVerticalPaddingSize(screenSize),
+        ),
+        width: screenSize.width,
+        height: screenSize.height,
+        decoration: getBoader(),
+        child: ScrollConfiguration(
+          behavior: ScrollConfiguration.of(context).copyWith(scrollbars: false),
+          child: SingleChildScrollView(
+            child: Column(
+              mainAxisAlignment: MainAxisAlignment.start,
+              mainAxisSize: MainAxisSize.max,
+              children: widget.bodyItems,
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}

Frontend/lib/mih_components/mih_layout/mih_header.dart

@@ -0,0 +1,39 @@
+import 'package:flutter/material.dart';
+
+class MIHHeader extends StatefulWidget {
+  final MainAxisAlignment headerAlignment;
+  final List<Widget> headerItems;
+  const MIHHeader({
+    super.key,
+    required this.headerAlignment,
+    required this.headerItems,
+  });
+
+  @override
+  State<MIHHeader> createState() => _MIHHeaderState();
+}
+
+class _MIHHeaderState extends State<MIHHeader> {
+  @override
+  void dispose() {
+    super.dispose();
+  }
+
+  @override
+  void initState() {
+    super.initState();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return SizedBox(
+      height: 50,
+      child: Row(
+        crossAxisAlignment: CrossAxisAlignment.center,
+        mainAxisAlignment: widget.headerAlignment,
+        mainAxisSize: MainAxisSize.max,
+        children: widget.headerItems,
+      ),
+    );
+  }
+}

Frontend/lib/mih_components/mih_layout/mih_layout_builder.dart

@@ -0,0 +1,150 @@
+import 'package:flutter/material.dart';
+import 'package:patient_manager/mih_components/mih_layout/mih_app_drawer.dart';
+
+import 'mih_body.dart';
+import 'mih_header.dart';
+
+class MIHLayoutBuilder extends StatefulWidget {
+  final Widget actionButton;
+  final Widget? secondaryActionButton;
+  final MIHHeader header;
+  final MIHBody body;
+  final MIHAppDrawer? actionDrawer;
+  final Widget? secondaryActionDrawer;
+  final Widget? bottomNavBar;
+  final bool pullDownToRefresh;
+  final Future<void> Function() onPullDown;
+  //final String type;
+  const MIHLayoutBuilder({
+    super.key,
+    required this.actionButton,
+    required this.header,
+    required this.secondaryActionButton,
+    required this.body,
+    required this.actionDrawer,
+    required this.secondaryActionDrawer,
+    required this.bottomNavBar,
+    required this.pullDownToRefresh,
+    required this.onPullDown,
+  });
+
+  @override
+  State<MIHLayoutBuilder> createState() => _MIHLayoutBuilderState();
+}
+
+class _MIHLayoutBuilderState extends State<MIHLayoutBuilder> {
+  List<Widget> getList() {
+    List<Widget> temp = [];
+    temp.add(widget.header);
+    temp.add(widget.body);
+    return temp;
+  }
+
+  // openTheDrawer() {
+  //   _scaffoldKey.currentState!.openEndDrawer();
+  // }
+
+  Widget getLayoutHeader() {
+    List<Widget> temp = [];
+    temp.add(widget.actionButton);
+    temp.add(Flexible(child: widget.header));
+    if (widget.secondaryActionButton != null) {
+      temp.add(widget.secondaryActionButton!);
+    } else {
+      //print(widget.header.headerItems.length);
+      if (widget.header.headerItems.length == 1) {
+        temp.add(const SizedBox(
+          width: 50,
+        ));
+      }
+    }
+    return Row(
+      mainAxisSize: MainAxisSize.min,
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: temp,
+    );
+  }
+
+  Widget getBody(double width, double height) {
+    if (widget.pullDownToRefresh == true) {
+      return LayoutBuilder(builder: (context, BoxConstraints constraints) {
+        double newheight = constraints.maxHeight;
+        //print(newheight);
+        return RefreshIndicator(
+          onRefresh: widget.onPullDown,
+          child: ListView.builder(
+            itemCount: 1,
+            itemBuilder: (BuildContext context, int index) {
+              return SafeArea(
+                child: SizedBox(
+                  width: width,
+                  height: newheight,
+                  child: Column(
+                    mainAxisAlignment: MainAxisAlignment.start,
+                    children: [
+                      const SizedBox(height: 5),
+                      getLayoutHeader(),
+                      const SizedBox(height: 5),
+                      Expanded(child: widget.body),
+                    ],
+                  ),
+                ),
+              );
+            },
+            // child: SafeArea(
+            //   child: SizedBox(
+            //     width: width,
+            //     height: height,
+            //     child: Column(
+            //       mainAxisAlignment: MainAxisAlignment.start,
+            //       children: [
+            //         getLayoutHeader(),
+            //         Expanded(child: widget.body),
+            //       ],
+            //     ),
+            //   ),
+            // ),
+          ),
+        );
+      });
+    } else {
+      return SafeArea(
+        child: SizedBox(
+          width: width,
+          height: height,
+          child: Column(
+            mainAxisAlignment: MainAxisAlignment.start,
+            children: [
+              const SizedBox(height: 5),
+              getLayoutHeader(),
+              const SizedBox(height: 5),
+              Expanded(child: widget.body),
+            ],
+          ),
+        ),
+      );
+    }
+  }
+
+  @override
+  void dispose() {
+    super.dispose();
+  }
+
+  @override
+  void initState() {
+    super.initState();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    Size screenSize = MediaQuery.sizeOf(context);
+    return Scaffold(
+      //drawerEnableOpenDragGesture: true,
+      drawer: widget.actionDrawer,
+      endDrawer: widget.secondaryActionDrawer,
+      body: getBody(screenSize.width, screenSize.height),
+      bottomNavigationBar: widget.bottomNavBar,
+    );
+  }
+}

Frontend/lib/mih_components/mih_layout/mih_notification_drawer.dart

@@ -0,0 +1,245 @@
+import 'package:flutter/material.dart';
+import '../../main.dart';
+import 'package:supertokens_flutter/http.dart' as http;
+
+import '../../mih_env/env.dart';
+import '../../mih_objects/app_user.dart';
+import '../../mih_objects/notification.dart';
+import '../mih_pop_up_messages/mih_error_message.dart';
+
+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(
+        "/",
+      );
+      Navigator.of(context).pushNamed(
+        widget.notifications[index].action_path,
+        arguments: widget.signedInUser,
+      );
+    } else {
+      internetConnectionPopUp();
+    }
+  }
+
+  void internetConnectionPopUp() {
+    showDialog(
+      context: context,
+      builder: (context) {
+        return const MIHErrorMessage(errorType: "Internet Connection");
+      },
+    );
+  }
+
+  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: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+        ),
+      ),
+      subtitle: Text(
+        subtitle,
+        style: TextStyle(
+          color: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+        ),
+      ),
+      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: MzanziInnovationHub.of(context)!.theme.errorColor(),
+          ),
+          const SizedBox(
+            width: 5,
+          ),
+          Flexible(
+            child: Text(
+              title,
+              style: TextStyle(
+                color: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+              ),
+            ),
+          ),
+        ],
+      );
+    } else {
+      notificationTitle = Row(
+        children: [
+          //const Icon(Icons.circle_notifications),
+          Flexible(
+            child: Text(
+              title,
+              style: TextStyle(
+                color: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+              ),
+            ),
+          ),
+        ],
+      );
+    }
+    return ListTile(
+      title: notificationTitle,
+      subtitle: Text(
+        subtitle,
+        style: TextStyle(
+          color: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+        ),
+      ),
+      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: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+          );
+        },
+        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 Drawer(
+        //backgroundColor:  MzanziInnovationHub.of(context)!.theme.primaryColor(),
+        child: SingleChildScrollView(
+      child: Column(
+        mainAxisSize: MainAxisSize.max,
+        mainAxisAlignment: MainAxisAlignment.start,
+        children: [
+          Container(
+            color: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+            child: Row(
+              mainAxisAlignment: MainAxisAlignment.center,
+              crossAxisAlignment: CrossAxisAlignment.center,
+              children: [
+                Padding(
+                  padding: const EdgeInsets.all(5.0),
+                  child: Text(
+                    "Notifications",
+                    style: TextStyle(
+                      color:
+                          MzanziInnovationHub.of(context)!.theme.primaryColor(),
+                      fontWeight: FontWeight.bold,
+                      fontSize: 20,
+                    ),
+                  ),
+                ),
+              ],
+            ),
+          ),
+          displayNotification(),
+          // ListView.separated(
+          //   shrinkWrap: true,
+          //   physics: const NeverScrollableScrollPhysics(),
+          //   separatorBuilder: (BuildContext context, index) {
+          //     return Divider(
+          //       color: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+          //     );
+          //   },
+          //   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_components/mih_layout/mih_print_prevew.dart

@@ -0,0 +1,53 @@
+import 'package:flutter/material.dart';
+import 'package:patient_manager/mih_components/mih_layout/mih_action.dart';
+import 'package:pdf/pdf.dart';
+import 'package:printing/printing.dart';
+
+import '../../mih_objects/arguments.dart';
+import '../mih_pop_up_messages/mih_loading_circle.dart';
+
+class MIHPrintPreview extends StatefulWidget {
+  final PrintPreviewArguments arguments;
+  const MIHPrintPreview({
+    super.key,
+    required this.arguments,
+  });
+
+  @override
+  State<MIHPrintPreview> createState() => _MIHPrintPreviewState();
+}
+
+class _MIHPrintPreviewState extends State<MIHPrintPreview> {
+  MIHAction getActionButton() {
+    return MIHAction(
+      icon: const Icon(
+        Icons.close,
+      ),
+      iconSize: 35,
+      onTap: () {
+        Navigator.pop(context);
+      },
+    );
+  }
+
+  @override
+  void dispose() {
+    super.dispose();
+  }
+
+  @override
+  void initState() {
+    super.initState();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return PdfPreview(
+      pdfFileName: widget.arguments.fileName,
+      initialPageFormat: PdfPageFormat.a4,
+      loadingWidget: const Mihloadingcircle(),
+      actions: [getActionButton()],
+      build: (format) => widget.arguments.pdfData,
+    );
+  }
+}

Frontend/lib/mih_components/mih_layout/mih_tile.dart

@@ -0,0 +1,185 @@
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import '../../main.dart';
+import 'package:youtube_player_flutter/youtube_player_flutter.dart';
+
+import 'mih_window.dart';
+
+class MIHTile extends StatefulWidget {
+  final String tileName;
+  final String? videoYTLink;
+  final Widget tileIcon;
+  final void Function() onTap;
+  // final Widget tileIcon;
+  final Color p;
+  final Color s;
+
+  const MIHTile({
+    super.key,
+    required this.onTap,
+    required this.tileName,
+    this.videoYTLink,
+    required this.tileIcon,
+    required this.p,
+    required this.s,
+  });
+
+  @override
+  State<MIHTile> createState() => _MIHTileState();
+}
+
+class _MIHTileState extends State<MIHTile> {
+  late Color mainC;
+  late Color secondC;
+  late YoutubePlayerController videoController;
+
+  String getVideID() {
+    if (widget.videoYTLink != null) {
+      return YoutubePlayer.convertUrlToId(widget.videoYTLink!) as String;
+    } else {
+      return "";
+    }
+  }
+
+  // void listener() {
+  //   if (_isPlayerReady && mounted && !videoController.value.isFullScreen) {
+  //     setState(() {
+  //       _playerState = videoController.value.playerState;
+  //       _videoMetaData = videoController.metadata;
+  //     });
+  //   }
+  // }
+
+  @override
+  void dispose() {
+    videoController.dispose();
+    super.dispose();
+  }
+
+  @override
+  void initState() {
+    mainC = widget.p;
+    secondC = widget.s;
+
+    videoController = YoutubePlayerController(
+        initialVideoId: getVideID(),
+        flags: YoutubePlayerFlags(
+          autoPlay: false,
+          mute: true,
+          isLive: false,
+        ));
+    super.initState();
+  }
+
+  void displayHint() {
+    if (widget.videoYTLink != null) {
+      showDialog(
+        context: context,
+        builder: (context) {
+          return MIHWindow(
+            fullscreen: false,
+            windowTitle: widget.tileName,
+            windowTools: const [],
+            onWindowTapClose: () {
+              Navigator.pop(context);
+            },
+            windowBody: [
+              YoutubePlayerBuilder(
+                player: YoutubePlayer(
+                  controller: videoController,
+                  showVideoProgressIndicator: true,
+                  progressIndicatorColor: Colors.amber,
+                  progressColors: ProgressBarColors(
+                    playedColor: Colors.amber,
+                    handleColor: Colors.amberAccent,
+                  ),
+                ),
+                builder: (context, player) {
+                  return player;
+                },
+              ),
+            ],
+          );
+        },
+      );
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    // print(
+    //     "Tile Name: ${widget.tileName}\nTitle Type: ${widget.tileIcon.runtimeType.toString()}");
+    return FittedBox(
+      alignment: Alignment.center,
+      child: Column(
+        mainAxisSize: MainAxisSize.min,
+        mainAxisAlignment: MainAxisAlignment.center,
+        crossAxisAlignment: CrossAxisAlignment.center,
+        children: [
+          AnimatedContainer(
+            //alignment: Alignment.center,
+            width: 250,
+            height: 250,
+            duration: const Duration(seconds: 2),
+            child: Material(
+              color: mainC,
+              // shadowColor:
+              //     MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+              // elevation: 5,
+              borderRadius: BorderRadius.circular(80),
+              child: InkWell(
+                borderRadius: BorderRadius.circular(80),
+                // ho
+                onTap: widget.onTap,
+                onLongPress: () {
+                  displayHint();
+                },
+                // hoverDuration: ,
+                splashColor:
+                    MzanziInnovationHub.of(context)!.theme.highlightColor(),
+                highlightColor:
+                    MzanziInnovationHub.of(context)!.theme.highlightColor(),
+                child: widget.tileIcon,
+              ),
+            ),
+          ),
+          // Material(
+          //   color: mainC,
+          //   borderRadius: BorderRadius.circular(80),
+          //   child: Ink(
+          //     // width: 200,
+          //     // height: 200,
+          //     padding: const EdgeInsets.all(20),
+          //     child: InkWell(
+          //       onTap: widget.onTap,
+          //       hoverDuration: Duration(seconds: 2),
+          //       highlightColor:
+          //           MzanziInnovationHub.of(context)!.theme.messageTextColor(),
+          //       child: SizedBox(
+          //         height: 200,
+          //         width: 200,
+          //         child: widget.tileIcon,
+          //       ),
+          //     ),
+          //   ),
+          // ),
+          const SizedBox(height: 10),
+          SizedBox(
+            width: 300,
+            child: Text(
+              widget.tileName,
+              textAlign: TextAlign.center,
+              softWrap: true,
+              overflow: TextOverflow.visible,
+              style: TextStyle(
+                color: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                fontSize: 40.0,
+                fontWeight: FontWeight.bold,
+              ),
+            ),
+          )
+        ],
+      ),
+    );
+  }
+}

Frontend/lib/mih_components/mih_layout/mih_window.dart

@@ -0,0 +1,214 @@
+import 'package:flutter/material.dart';
+import '../../main.dart';
+
+class MIHWindow extends StatefulWidget {
+  final String windowTitle;
+  final List<Widget> windowBody;
+  final List<Widget> windowTools;
+  final void Function() onWindowTapClose;
+  final bool fullscreen;
+  const MIHWindow({
+    super.key,
+    required this.fullscreen,
+    required this.windowTitle,
+    required this.windowTools,
+    required this.onWindowTapClose,
+    required this.windowBody,
+  });
+
+  @override
+  State<MIHWindow> createState() => _MIHWindowState();
+}
+
+class _MIHWindowState extends State<MIHWindow> {
+  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 (MzanziInnovationHub.of(context)!.theme.screenType == "desktop") {
+      setState(() {
+        windowTitleSize = 25;
+        horizontralWindowPadding = width / 7;
+        vertticalWindowPadding = 25;
+        windowWidth = width;
+        windowHeight = height;
+      });
+    } else {
+      setState(() {
+        windowTitleSize = 20;
+        horizontralWindowPadding = 10;
+        vertticalWindowPadding = 10;
+        windowWidth = width;
+        windowHeight = height;
+      });
+    }
+  }
+
+  Widget getWidnowClose() {
+    return Container(
+      alignment: Alignment.centerRight,
+      child: IconButton(
+        onPressed: widget.onWindowTapClose,
+        icon: Icon(
+          Icons.close,
+          color: MzanziInnovationHub.of(context)!.theme.errorColor(),
+          size: 35,
+        ),
+      ),
+    );
+  }
+
+  Widget getWidnowTools() {
+    return Row(
+      crossAxisAlignment: CrossAxisAlignment.center,
+      mainAxisAlignment: MainAxisAlignment.start,
+      mainAxisSize: MainAxisSize.max,
+      children: widget.windowTools,
+    );
+  }
+
+  Widget getWidnowTitle() {
+    return Row(
+      crossAxisAlignment: CrossAxisAlignment.center,
+      mainAxisAlignment: MainAxisAlignment.center,
+      mainAxisSize: MainAxisSize.min,
+      children: [
+        Expanded(
+          child: Text(
+            widget.windowTitle,
+            textAlign: TextAlign.center,
+            overflow: TextOverflow.ellipsis,
+            style: TextStyle(
+              color: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+              fontSize: windowTitleSize,
+              fontWeight: FontWeight.bold,
+            ),
+          ),
+        ),
+      ],
+    );
+  }
+
+  Widget getWidnowHeader() {
+    return Row(
+      crossAxisAlignment: CrossAxisAlignment.center,
+      mainAxisAlignment: MainAxisAlignment.center,
+      mainAxisSize: MainAxisSize.max,
+      children: [
+        getWidnowTools(),
+        Expanded(
+          flex: 2,
+          child: getWidnowTitle(),
+        ),
+        getWidnowClose(),
+      ],
+    );
+  }
+
+  Widget getWidnowBody() {
+    if (widget.fullscreen) {
+      return Expanded(
+        child: Padding(
+          padding: const EdgeInsets.all(10.0),
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.center,
+            mainAxisAlignment: MainAxisAlignment.center,
+            mainAxisSize: MainAxisSize.max,
+            children: widget.windowBody,
+          ),
+        ),
+      );
+    } else {
+      return Padding(
+        padding: const EdgeInsets.all(10.0),
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.center,
+          mainAxisAlignment: MainAxisAlignment.center,
+          mainAxisSize: MainAxisSize.max,
+          children: widget.windowBody,
+        ),
+      );
+    }
+  }
+
+  Widget createWindow(Widget header, Widget body) {
+    Widget visibleItems;
+    if (widget.fullscreen) {
+      visibleItems = Column(
+        crossAxisAlignment: CrossAxisAlignment.center,
+        mainAxisAlignment: MainAxisAlignment.start,
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          header,
+          //const Divider(),
+          body,
+        ],
+      );
+    } else {
+      visibleItems = SingleChildScrollView(
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.center,
+          mainAxisAlignment: MainAxisAlignment.start,
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            header,
+            //const Divider(),
+            body,
+          ],
+        ),
+      );
+    }
+    return Dialog(
+      insetPadding: EdgeInsets.symmetric(
+        horizontal: horizontralWindowPadding,
+        vertical: vertticalWindowPadding,
+      ),
+      insetAnimationCurve: Easing.emphasizedDecelerate,
+      insetAnimationDuration: Durations.short1,
+      child: Container(
+        //padding: const EdgeInsets.all(10),
+        width: windowWidth,
+        //height: windowHeight,
+        decoration: BoxDecoration(
+          color: MzanziInnovationHub.of(context)!.theme.primaryColor(),
+          borderRadius: BorderRadius.circular(25.0),
+          border: Border.all(
+              color: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+              width: 5.0),
+        ),
+        child: visibleItems,
+      ),
+    );
+  }
+
+  @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 createWindow(
+      getWidnowHeader(),
+      getWidnowBody(),
+    );
+  }
+}

Frontend/lib/mih_components/mih_pop_up_messages/mih_delete_message.dart

@@ -0,0 +1,328 @@
+import 'package:flutter/material.dart';
+import '../../main.dart';
+import '../mih_inputs_and_buttons/mih_button.dart';
+
+class MIHDeleteMessage extends StatefulWidget {
+  final String deleteType;
+  final void Function() onTap;
+  const MIHDeleteMessage({
+    super.key,
+    required this.deleteType,
+    required this.onTap,
+  });
+
+  @override
+  State<MIHDeleteMessage> createState() => _MIHDeleteMessageState();
+}
+
+class _MIHDeleteMessageState extends State<MIHDeleteMessage> {
+  var messageTypes = <String, Widget>{};
+  late double popUpWidth;
+  late double? popUpheight;
+  late double popUpTitleSize;
+  late double popUpSubtitleSize;
+  late double popUpBodySize;
+  late double popUpIconSize;
+  late double popUpPaddingSize;
+  late double width;
+  late double height;
+
+  void checkScreenSize() {
+    if (MzanziInnovationHub.of(context)!.theme.screenType == "desktop") {
+      setState(() {
+        popUpWidth = (width / 4) * 2;
+        popUpheight = null;
+        popUpTitleSize = 25.0;
+        popUpSubtitleSize = 20.0;
+        popUpBodySize = 15;
+        popUpPaddingSize = 25.0;
+        popUpIconSize = 100;
+      });
+    } else {
+      setState(() {
+        popUpWidth = width - (width * 0.1);
+        popUpheight = null;
+        popUpTitleSize = 20.0;
+        popUpSubtitleSize = 18.0;
+        popUpBodySize = 15;
+        popUpPaddingSize = 15.0;
+        popUpIconSize = 100;
+      });
+    }
+  }
+
+  void setDeleteNote() {
+    messageTypes["Note"] = Stack(
+      children: [
+        Container(
+          padding: EdgeInsets.all(popUpPaddingSize),
+          width: popUpWidth,
+          height: popUpheight,
+          decoration: BoxDecoration(
+            color: MzanziInnovationHub.of(context)!.theme.primaryColor(),
+            borderRadius: BorderRadius.circular(25.0),
+            border: Border.all(
+                color: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                width: 5.0),
+          ),
+          child: SingleChildScrollView(
+            child: Column(
+              mainAxisSize: MainAxisSize.min,
+              children: [
+                Icon(
+                  Icons.warning_amber_rounded,
+                  size: popUpIconSize,
+                  color:
+                      MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                ),
+                //const SizedBox(height: 15),
+                Text(
+                  "Are you sure you want to delete this?",
+                  textAlign: TextAlign.center,
+                  style: TextStyle(
+                    color:
+                        MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                    fontSize: popUpTitleSize,
+                    fontWeight: FontWeight.bold,
+                  ),
+                ),
+                const SizedBox(height: 15),
+                Text(
+                  "This note will be deleted permanently. Are you certain you want to delete it?",
+                  style: TextStyle(
+                    color:
+                        MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                    fontSize: popUpBodySize,
+                    fontWeight: FontWeight.bold,
+                  ),
+                ),
+                const SizedBox(height: 15),
+                SizedBox(
+                    width: 300,
+                    height: 50,
+                    child: MIHButton(
+                      onTap: widget.onTap,
+                      buttonText: "Delete",
+                      buttonColor: MzanziInnovationHub.of(context)!
+                          .theme
+                          .secondaryColor(),
+                      textColor:
+                          MzanziInnovationHub.of(context)!.theme.primaryColor(),
+                    ))
+              ],
+            ),
+          ),
+        ),
+        Positioned(
+          top: 5,
+          right: 5,
+          width: 50,
+          height: 50,
+          child: IconButton(
+            onPressed: () {
+              Navigator.pop(context);
+            },
+            icon: Icon(
+              Icons.close,
+              color: MzanziInnovationHub.of(context)!.theme.errorColor(),
+              size: 35,
+            ),
+          ),
+        ),
+      ],
+    );
+  }
+
+  void setFileNote() {
+    messageTypes["File"] = Stack(
+      children: [
+        Container(
+          padding: EdgeInsets.all(popUpPaddingSize),
+          width: popUpWidth,
+          height: popUpheight,
+          decoration: BoxDecoration(
+            color: MzanziInnovationHub.of(context)!.theme.primaryColor(),
+            borderRadius: BorderRadius.circular(25.0),
+            border: Border.all(
+                color: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                width: 5.0),
+          ),
+          child: SingleChildScrollView(
+            child: Column(
+              mainAxisSize: MainAxisSize.min,
+              children: [
+                Icon(
+                  Icons.warning_amber_rounded,
+                  size: popUpIconSize,
+                  color:
+                      MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                ),
+                //const SizedBox(height: 15),
+                Text(
+                  "Are you sure you want to delete this?",
+                  textAlign: TextAlign.center,
+                  style: TextStyle(
+                    color:
+                        MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                    fontSize: popUpTitleSize,
+                    fontWeight: FontWeight.bold,
+                  ),
+                ),
+                const SizedBox(height: 15),
+                Text(
+                  "This file will be deleted permanently. Are you certain you want to delete it?",
+                  style: TextStyle(
+                    color:
+                        MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                    fontSize: popUpBodySize,
+                    fontWeight: FontWeight.bold,
+                  ),
+                ),
+                const SizedBox(height: 15),
+                SizedBox(
+                    width: 300,
+                    height: 50,
+                    child: MIHButton(
+                      onTap: widget.onTap,
+                      buttonText: "Delete",
+                      buttonColor: MzanziInnovationHub.of(context)!
+                          .theme
+                          .secondaryColor(),
+                      textColor:
+                          MzanziInnovationHub.of(context)!.theme.primaryColor(),
+                    ))
+              ],
+            ),
+          ),
+        ),
+        Positioned(
+          top: 5,
+          right: 5,
+          width: 50,
+          height: 50,
+          child: IconButton(
+            onPressed: () {
+              Navigator.pop(context);
+            },
+            icon: Icon(
+              Icons.close,
+              color: MzanziInnovationHub.of(context)!.theme.errorColor(),
+              size: 35,
+            ),
+          ),
+        ),
+      ],
+    );
+  }
+
+  void setDeleteEmployee() {
+    messageTypes["Employee"] = Stack(
+      children: [
+        Container(
+          padding: EdgeInsets.all(popUpPaddingSize),
+          width: popUpWidth,
+          height: popUpheight,
+          decoration: BoxDecoration(
+            color: MzanziInnovationHub.of(context)!.theme.primaryColor(),
+            borderRadius: BorderRadius.circular(25.0),
+            border: Border.all(
+                color: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                width: 5.0),
+          ),
+          child: SingleChildScrollView(
+            child: Column(
+              mainAxisSize: MainAxisSize.min,
+              children: [
+                Icon(
+                  Icons.warning_amber_rounded,
+                  size: popUpIconSize,
+                  color:
+                      MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                ),
+                //const SizedBox(height: 15),
+                Text(
+                  "Are you sure you want to delete this?",
+                  textAlign: TextAlign.center,
+                  style: TextStyle(
+                    color:
+                        MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                    fontSize: popUpTitleSize,
+                    fontWeight: FontWeight.bold,
+                  ),
+                ),
+                const SizedBox(height: 15),
+                Text(
+                  "This team member will be deleted permanently from the business profile. Are you certain you want to delete it?",
+                  style: TextStyle(
+                    color:
+                        MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                    fontSize: popUpBodySize,
+                    fontWeight: FontWeight.bold,
+                  ),
+                ),
+                const SizedBox(height: 15),
+                SizedBox(
+                    width: 300,
+                    height: 50,
+                    child: MIHButton(
+                      onTap: widget.onTap,
+                      buttonText: "Delete",
+                      buttonColor: MzanziInnovationHub.of(context)!
+                          .theme
+                          .secondaryColor(),
+                      textColor:
+                          MzanziInnovationHub.of(context)!.theme.primaryColor(),
+                    ))
+              ],
+            ),
+          ),
+        ),
+        Positioned(
+          top: 5,
+          right: 5,
+          width: 50,
+          height: 50,
+          child: IconButton(
+            onPressed: () {
+              Navigator.pop(context);
+            },
+            icon: Icon(
+              Icons.close,
+              color: MzanziInnovationHub.of(context)!.theme.errorColor(),
+              size: 35,
+            ),
+          ),
+        ),
+      ],
+    );
+  }
+
+  Widget? getDeleteMessage(String type) {
+    return messageTypes[type];
+  }
+
+  @override
+  void dispose() {
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    var size = MediaQuery.of(context).size;
+    setState(() {
+      width = size.width;
+      height = size.height;
+    });
+    checkScreenSize();
+    setDeleteNote();
+    setFileNote();
+    setDeleteEmployee();
+
+    //print(size);
+    // setState(() {
+    //   width = size.width;
+    //   height = size.height;
+    // });
+    return Dialog(child: getDeleteMessage(widget.deleteType));
+  }
+}

Frontend/lib/mih_components/mih_pop_up_messages/mih_error_message.dart

@@ -0,0 +1,859 @@
+import 'package:flutter/material.dart';
+import '../../main.dart';
+
+class MIHErrorMessage extends StatefulWidget {
+  final String errorType;
+  const MIHErrorMessage({
+    super.key,
+    required this.errorType,
+  });
+
+  @override
+  State<MIHErrorMessage> createState() => _MIHErrorMessageState();
+}
+
+class _MIHErrorMessageState extends State<MIHErrorMessage> {
+  var messageTypes = <String, Widget>{};
+  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 (MzanziInnovationHub.of(context)!.theme.screenType == "desktop") {
+      setState(() {
+        popUpWidth = (size!.width / 4) * 2;
+        popUpheight = null;
+        popUpTitleSize = 25.0;
+        popUpSubtitleSize = 20.0;
+        popUpBodySize = 15;
+        popUpPaddingSize = 25.0;
+        popUpIconSize = 100;
+      });
+    } else {
+      setState(() {
+        popUpWidth = size!.width - (size!.width * 0.1);
+        popUpheight = null;
+        popUpTitleSize = 20.0;
+        popUpSubtitleSize = 18.0;
+        popUpBodySize = 15;
+        popUpPaddingSize = 15.0;
+        popUpIconSize = 100;
+      });
+    }
+  }
+
+  void setInputError() {
+    messageTypes["Input Error"] = Stack(
+      children: [
+        Container(
+          padding: EdgeInsets.all(popUpPaddingSize),
+          width: popUpWidth,
+          height: popUpheight,
+          decoration: BoxDecoration(
+            color: MzanziInnovationHub.of(context)!.theme.primaryColor(),
+            borderRadius: BorderRadius.circular(25.0),
+            border: Border.all(
+                color: MzanziInnovationHub.of(context)!.theme.errorColor(),
+                width: 5.0),
+          ),
+          child: SingleChildScrollView(
+            child: Column(
+              mainAxisSize: MainAxisSize.min,
+              children: [
+                Icon(
+                  Icons.warning_amber_rounded,
+                  size: popUpIconSize,
+                  color: MzanziInnovationHub.of(context)!.theme.errorColor(),
+                ),
+                //const SizedBox(height: 5),
+                Text(
+                  "Oops! Looks like some fields are missing.",
+                  textAlign: TextAlign.center,
+                  style: TextStyle(
+                    color: MzanziInnovationHub.of(context)!.theme.errorColor(),
+                    fontSize: popUpTitleSize,
+                    fontWeight: FontWeight.bold,
+                  ),
+                ),
+                const SizedBox(height: 15),
+                Text(
+                  "We noticed that some required fields are still empty. To ensure your request is processed smoothly, please fill out all the highlighted fields before submitting the form again.",
+                  style: TextStyle(
+                    color:
+                        MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                    fontSize: popUpBodySize,
+                    fontWeight: FontWeight.bold,
+                  ),
+                ),
+                const SizedBox(height: 25),
+                RichText(
+                  text: TextSpan(
+                    style: TextStyle(
+                      color: MzanziInnovationHub.of(context)!
+                          .theme
+                          .secondaryColor(),
+                      fontSize: popUpBodySize,
+                      fontWeight: FontWeight.bold,
+                    ),
+                    children: <TextSpan>[
+                      TextSpan(
+                          text: "Here's a quick tip: ",
+                          style: TextStyle(
+                              fontStyle: FontStyle.italic,
+                              color: MzanziInnovationHub.of(context)!
+                                  .theme
+                                  .errorColor())),
+                      const TextSpan(
+                          text: "Look for fields with an asterisk ("),
+                      TextSpan(
+                          text: "*",
+                          style: TextStyle(
+                              color: MzanziInnovationHub.of(context)!
+                                  .theme
+                                  .errorColor())),
+                      const TextSpan(
+                          text: ") next to them, as these are mandatory."),
+                    ],
+                  ),
+                ),
+                const SizedBox(height: 10),
+              ],
+            ),
+          ),
+        ),
+        Positioned(
+          top: 5,
+          right: 5,
+          width: 50,
+          height: 50,
+          child: IconButton(
+            onPressed: () {
+              Navigator.pop(context);
+            },
+            icon: Icon(
+              Icons.close,
+              color: MzanziInnovationHub.of(context)!.theme.errorColor(),
+              size: 35,
+            ),
+          ),
+        ),
+      ],
+    );
+  }
+
+  void setPasswordRequirementsError() {
+    messageTypes["Password Requirements"] = Stack(
+      children: [
+        Container(
+          padding: EdgeInsets.all(popUpPaddingSize),
+          width: popUpWidth,
+          height: popUpheight,
+          decoration: BoxDecoration(
+            color: MzanziInnovationHub.of(context)!.theme.primaryColor(),
+            borderRadius: BorderRadius.circular(25.0),
+            border: Border.all(
+                color: MzanziInnovationHub.of(context)!.theme.errorColor(),
+                width: 5.0),
+          ),
+          child: SingleChildScrollView(
+            child: Column(
+              mainAxisSize: MainAxisSize.min,
+              children: [
+                Icon(
+                  Icons.warning_amber_rounded,
+                  size: popUpIconSize,
+                  color: MzanziInnovationHub.of(context)!.theme.errorColor(),
+                ),
+                //const SizedBox(height: 15),
+                Text(
+                  "Password Doesn't Meet Requirements",
+                  textAlign: TextAlign.center,
+                  style: TextStyle(
+                    color: MzanziInnovationHub.of(context)!.theme.errorColor(),
+                    fontSize: popUpTitleSize,
+                    fontWeight: FontWeight.bold,
+                  ),
+                ),
+                const SizedBox(height: 15),
+                Text(
+                  "Oops! Your password doesn't quite meet our standards. To keep your account secure, please make sure your password meets the following requirements",
+                  style: TextStyle(
+                    color:
+                        MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                    fontSize: popUpBodySize,
+                    fontWeight: FontWeight.bold,
+                  ),
+                ),
+                const SizedBox(height: 25),
+                RichText(
+                  text: TextSpan(
+                    style: TextStyle(
+                      color: MzanziInnovationHub.of(context)!
+                          .theme
+                          .secondaryColor(),
+                      fontSize: 15.0,
+                      fontWeight: FontWeight.bold,
+                    ),
+                    children: <TextSpan>[
+                      TextSpan(
+                          text: "Requirements:\n",
+                          style: TextStyle(
+                              fontStyle: FontStyle.italic,
+                              fontSize: popUpBodySize,
+                              color: MzanziInnovationHub.of(context)!
+                                  .theme
+                                  .errorColor())),
+                      const TextSpan(
+                        text: "1) Contailes at least 8 characters\n",
+                      ),
+                      const TextSpan(
+                        text: "2) Contains at least 1 uppercase letter (A-Z)\n",
+                      ),
+                      const TextSpan(
+                        text: "3) Contains at least 1 lowercase letter (a-z)\n",
+                      ),
+                      const TextSpan(
+                        text: "4) Contains at least 1 number (0-9)\n",
+                      ),
+                      const TextSpan(
+                        text:
+                            "5) Contains at least 1 special character (!@#\$%^&*)\n",
+                      ),
+                    ],
+                  ),
+                ),
+                const SizedBox(height: 10),
+              ],
+            ),
+          ),
+        ),
+        Positioned(
+          top: 5,
+          right: 5,
+          width: 50,
+          height: 50,
+          child: IconButton(
+            onPressed: () {
+              Navigator.pop(context);
+            },
+            icon: Icon(
+              Icons.close,
+              color: MzanziInnovationHub.of(context)!.theme.errorColor(),
+              size: 35,
+            ),
+          ),
+        ),
+      ],
+    );
+  }
+
+  void setInvalidUsernameError() {
+    messageTypes["Invalid Username"] = Stack(
+      children: [
+        Container(
+          padding: EdgeInsets.all(popUpPaddingSize),
+          width: popUpWidth,
+          height: popUpheight,
+          decoration: BoxDecoration(
+            color: MzanziInnovationHub.of(context)!.theme.primaryColor(),
+            borderRadius: BorderRadius.circular(25.0),
+            border: Border.all(
+                color: MzanziInnovationHub.of(context)!.theme.errorColor(),
+                width: 5.0),
+          ),
+          child: SingleChildScrollView(
+            child: Column(
+              mainAxisSize: MainAxisSize.min,
+              children: [
+                Icon(
+                  Icons.warning_amber_rounded,
+                  size: popUpIconSize,
+                  color: MzanziInnovationHub.of(context)!.theme.errorColor(),
+                ),
+                //const SizedBox(height: 15),
+                Text(
+                  "Let's Fix That Username",
+                  textAlign: TextAlign.center,
+                  style: TextStyle(
+                    color: MzanziInnovationHub.of(context)!.theme.errorColor(),
+                    fontSize: popUpTitleSize,
+                    fontWeight: FontWeight.bold,
+                  ),
+                ),
+                const SizedBox(height: 15),
+                Text(
+                  "Your username needs a little adjustment. To make sure everyone has a unique username, please start your username with a letter or number and use only letters, numbers or underscores. Let's try that again!",
+                  style: TextStyle(
+                    color:
+                        MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                    fontSize: popUpBodySize,
+                    fontWeight: FontWeight.bold,
+                  ),
+                ),
+                const SizedBox(height: 25),
+              ],
+            ),
+          ),
+        ),
+        Positioned(
+          top: 5,
+          right: 5,
+          width: 50,
+          height: 50,
+          child: IconButton(
+            onPressed: () {
+              Navigator.pop(context);
+            },
+            icon: Icon(
+              Icons.close,
+              color: MzanziInnovationHub.of(context)!.theme.errorColor(),
+              size: 35,
+            ),
+          ),
+        ),
+      ],
+    );
+  }
+
+  void setInvalidEmailError() {
+    messageTypes["Invalid Email"] = Stack(
+      children: [
+        Container(
+          padding: EdgeInsets.all(popUpPaddingSize),
+          width: popUpWidth,
+          height: popUpheight,
+          decoration: BoxDecoration(
+            color: MzanziInnovationHub.of(context)!.theme.primaryColor(),
+            borderRadius: BorderRadius.circular(25.0),
+            border: Border.all(
+                color: MzanziInnovationHub.of(context)!.theme.errorColor(),
+                width: 5.0),
+          ),
+          child: SingleChildScrollView(
+            child: Column(
+              mainAxisSize: MainAxisSize.min,
+              children: [
+                Icon(
+                  Icons.warning_amber_rounded,
+                  size: popUpIconSize,
+                  color: MzanziInnovationHub.of(context)!.theme.errorColor(),
+                ),
+                //const SizedBox(height: 15),
+                Text(
+                  "Oops! Invalid Email",
+                  textAlign: TextAlign.center,
+                  style: TextStyle(
+                    color: MzanziInnovationHub.of(context)!.theme.errorColor(),
+                    fontSize: popUpTitleSize,
+                    fontWeight: FontWeight.bold,
+                  ),
+                ),
+                const SizedBox(height: 15),
+                Text(
+                  "Looks like there's a little hiccup with that email address. Please double-check that you've entered it correctly, including the \"@\" symbol and a domain (like example@email.com).",
+                  style: TextStyle(
+                    color:
+                        MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                    fontSize: popUpBodySize,
+                    fontWeight: FontWeight.bold,
+                  ),
+                ),
+                const SizedBox(height: 25),
+              ],
+            ),
+          ),
+        ),
+        Positioned(
+          top: 5,
+          right: 5,
+          width: 50,
+          height: 50,
+          child: IconButton(
+            onPressed: () {
+              Navigator.pop(context);
+            },
+            icon: Icon(
+              Icons.close,
+              color: MzanziInnovationHub.of(context)!.theme.errorColor(),
+              size: 35,
+            ),
+          ),
+        ),
+      ],
+    );
+  }
+
+  void setUserExistsError() {
+    messageTypes["User Exists"] = Stack(
+      children: [
+        Container(
+          padding: EdgeInsets.all(popUpPaddingSize),
+          width: popUpWidth,
+          height: popUpheight,
+          decoration: BoxDecoration(
+            color: MzanziInnovationHub.of(context)!.theme.primaryColor(),
+            borderRadius: BorderRadius.circular(25.0),
+            border: Border.all(
+                color: MzanziInnovationHub.of(context)!.theme.errorColor(),
+                width: 5.0),
+          ),
+          child: SingleChildScrollView(
+            child: Column(
+              mainAxisSize: MainAxisSize.min,
+              children: [
+                Icon(
+                  Icons.warning_amber_rounded,
+                  size: popUpIconSize,
+                  color: MzanziInnovationHub.of(context)!.theme.errorColor(),
+                ),
+                //SizedBox(height: 15),
+                Text(
+                  "Email Already Exists",
+                  textAlign: TextAlign.center,
+                  style: TextStyle(
+                    color: MzanziInnovationHub.of(context)!.theme.errorColor(),
+                    fontSize: popUpTitleSize,
+                    fontWeight: FontWeight.bold,
+                  ),
+                ),
+                const SizedBox(height: 15),
+                Text(
+                  "An account is already registered with this email address. Please try logging in or use a different email.",
+                  style: TextStyle(
+                    color:
+                        MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                    fontSize: popUpBodySize,
+                    fontWeight: FontWeight.bold,
+                  ),
+                ),
+                const SizedBox(height: 10),
+                Text(
+                  "Here are some things to keep in mind:",
+                  style: TextStyle(
+                    color: MzanziInnovationHub.of(context)!.theme.errorColor(),
+                    fontSize: popUpSubtitleSize,
+                    fontWeight: FontWeight.bold,
+                  ),
+                ),
+                const SizedBox(height: 10),
+                Text(
+                  "1) Are you sure you're using the correct email address associated with your account?\n2) Is your caps lock key on? Passwords are case-sensitive.\n3) If you've forgotten your password, no worries! Click on \"Forgot Password?\" to reset it.",
+                  textAlign: TextAlign.left,
+                  style: TextStyle(
+                    color:
+                        MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                    fontSize: 15.0,
+                    fontWeight: FontWeight.bold,
+                  ),
+                ),
+              ],
+            ),
+          ),
+        ),
+        Positioned(
+          top: 5,
+          right: 5,
+          width: 50,
+          height: 50,
+          child: IconButton(
+            onPressed: () {
+              Navigator.pop(context);
+            },
+            icon: Icon(
+              Icons.close,
+              color: MzanziInnovationHub.of(context)!.theme.errorColor(),
+              size: 35,
+            ),
+          ),
+        ),
+      ],
+    );
+  }
+
+  void setPwdMatchError() {
+    messageTypes["Password Match"] = Stack(
+      children: [
+        Container(
+          padding: EdgeInsets.all(popUpPaddingSize),
+          width: popUpWidth,
+          height: popUpheight,
+          decoration: BoxDecoration(
+            color: MzanziInnovationHub.of(context)!.theme.primaryColor(),
+            borderRadius: BorderRadius.circular(25.0),
+            border: Border.all(
+                color: MzanziInnovationHub.of(context)!.theme.errorColor(),
+                width: 5.0),
+          ),
+          child: SingleChildScrollView(
+            child: Column(
+              mainAxisSize: MainAxisSize.min,
+              children: [
+                Icon(
+                  Icons.warning_amber_rounded,
+                  size: popUpIconSize,
+                  color: MzanziInnovationHub.of(context)!.theme.errorColor(),
+                ),
+                //SizedBox(height: 15),
+                Text(
+                  "Passwords Don't Match",
+                  textAlign: TextAlign.center,
+                  style: TextStyle(
+                    color: MzanziInnovationHub.of(context)!.theme.errorColor(),
+                    fontSize: popUpTitleSize,
+                    fontWeight: FontWeight.bold,
+                  ),
+                ),
+                const SizedBox(height: 15),
+                Text(
+                  "The password and confirm password fields do not match. Please make sure they are identical.",
+                  style: TextStyle(
+                    color:
+                        MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                    fontSize: popUpBodySize,
+                    fontWeight: FontWeight.bold,
+                  ),
+                ),
+                const SizedBox(height: 10),
+                Text(
+                  "Here are some things to keep in mind:",
+                  style: TextStyle(
+                    color: MzanziInnovationHub.of(context)!.theme.errorColor(),
+                    fontSize: popUpSubtitleSize,
+                    fontWeight: FontWeight.bold,
+                  ),
+                ),
+                const SizedBox(height: 10),
+                Text(
+                  "1) Are you sure you're using the correct email address associated with your account?\n2) Is your caps lock key on? Passwords are case-sensitive.\n3) If you've forgotten your password, no worries! Click on \"Forgot Password?\" to reset it.",
+                  textAlign: TextAlign.left,
+                  style: TextStyle(
+                    color:
+                        MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                    fontSize: popUpBodySize,
+                    fontWeight: FontWeight.bold,
+                  ),
+                ),
+                const SizedBox(height: 10),
+              ],
+            ),
+          ),
+        ),
+        Positioned(
+          top: 5,
+          right: 5,
+          width: 50,
+          height: 50,
+          child: IconButton(
+            onPressed: () {
+              Navigator.pop(context);
+            },
+            icon: Icon(
+              Icons.close,
+              color: MzanziInnovationHub.of(context)!.theme.errorColor(),
+              size: 35,
+            ),
+          ),
+        ),
+      ],
+    );
+  }
+
+  void setinvalidCredError() {
+    messageTypes["Invalid Credentials"] = Stack(
+      children: [
+        Container(
+          padding: EdgeInsets.all(popUpPaddingSize),
+          width: popUpWidth,
+          height: popUpheight,
+          decoration: BoxDecoration(
+            color: MzanziInnovationHub.of(context)!.theme.primaryColor(),
+            borderRadius: BorderRadius.circular(25.0),
+            border: Border.all(
+                color: MzanziInnovationHub.of(context)!.theme.errorColor(),
+                width: 5.0),
+          ),
+          child: SingleChildScrollView(
+            child: Column(
+              mainAxisSize: MainAxisSize.min,
+              children: [
+                Icon(
+                  Icons.warning_amber_rounded,
+                  size: popUpIconSize,
+                  color: MzanziInnovationHub.of(context)!.theme.errorColor(),
+                ),
+                //SizedBox(height: 15),
+                Text(
+                  "Uh oh! Login attempt unsuccessful.",
+                  textAlign: TextAlign.center,
+                  style: TextStyle(
+                    color: MzanziInnovationHub.of(context)!.theme.errorColor(),
+                    fontSize: popUpTitleSize,
+                    fontWeight: FontWeight.bold,
+                  ),
+                ),
+                const SizedBox(height: 15),
+                Text(
+                  "The email address or password you entered doesn't seem to match our records. Please double-check your information and try again.",
+                  style: TextStyle(
+                    color:
+                        MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                    fontSize: popUpBodySize,
+                    fontWeight: FontWeight.bold,
+                  ),
+                ),
+                const SizedBox(height: 10),
+                Text(
+                  "Here are some things to keep in mind:",
+                  style: TextStyle(
+                    color: MzanziInnovationHub.of(context)!.theme.errorColor(),
+                    fontSize: popUpSubtitleSize,
+                    fontWeight: FontWeight.bold,
+                  ),
+                ),
+                const SizedBox(height: 10),
+                Text(
+                  "1) Are you sure you're using the correct email address associated with your account?\n2) Is your caps lock key on? Passwords are case-sensitive.\n3) If you've forgotten your password, no worries! Click on \"Forgot Password?\" to reset it.",
+                  textAlign: TextAlign.left,
+                  style: TextStyle(
+                    color:
+                        MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                    fontSize: popUpBodySize,
+                    fontWeight: FontWeight.bold,
+                  ),
+                ),
+                const SizedBox(height: 10),
+              ],
+            ),
+          ),
+        ),
+        Positioned(
+          top: 5,
+          right: 5,
+          width: 50,
+          height: 50,
+          child: IconButton(
+            onPressed: () {
+              Navigator.pop(context);
+            },
+            icon: Icon(
+              Icons.close,
+              color: MzanziInnovationHub.of(context)!.theme.errorColor(),
+              size: 35,
+            ),
+          ),
+        ),
+      ],
+    );
+  }
+
+  void setInternetError() {
+    messageTypes["Internet Connection"] = Stack(
+      children: [
+        Container(
+          padding: EdgeInsets.all(popUpPaddingSize),
+          width: popUpWidth,
+          height: popUpheight,
+          decoration: BoxDecoration(
+            color: MzanziInnovationHub.of(context)!.theme.primaryColor(),
+            borderRadius: BorderRadius.circular(25.0),
+            border: Border.all(
+                color: MzanziInnovationHub.of(context)!.theme.errorColor(),
+                width: 5.0),
+          ),
+          child: SingleChildScrollView(
+            child: Column(
+              mainAxisSize: MainAxisSize.min,
+              children: [
+                Icon(
+                  Icons.warning_amber_rounded,
+                  size: popUpIconSize,
+                  color: MzanziInnovationHub.of(context)!.theme.errorColor(),
+                ),
+                //const SizedBox(height: 15),
+                Text(
+                  "Internet Connection Lost!",
+                  textAlign: TextAlign.center,
+                  style: TextStyle(
+                    color: MzanziInnovationHub.of(context)!.theme.errorColor(),
+                    fontSize: popUpTitleSize,
+                    fontWeight: FontWeight.bold,
+                  ),
+                ),
+                const SizedBox(height: 15),
+                Text(
+                  "We seem to be having some trouble connecting you to the internet. This could be due to a temporary outage or an issue with your device's connection.",
+                  style: TextStyle(
+                    color:
+                        MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                    fontSize: popUpBodySize,
+                    fontWeight: FontWeight.bold,
+                  ),
+                ),
+                const SizedBox(height: 10),
+                Text(
+                  "Here are a few things you can try:",
+                  style: TextStyle(
+                    color: MzanziInnovationHub.of(context)!.theme.errorColor(),
+                    fontSize: popUpSubtitleSize,
+                    fontWeight: FontWeight.bold,
+                  ),
+                ),
+                const SizedBox(height: 10),
+                Text(
+                  "1) Check your Wi-Fi signal strength or try connecting to a different network.\n2) Restart your device (computer, phone, etc.) and your router/modem.\n3) If you're using cellular data, ensure you have a strong signal and haven't reached your data limit.",
+                  textAlign: TextAlign.left,
+                  style: TextStyle(
+                    color:
+                        MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                    fontSize: popUpBodySize,
+                    fontWeight: FontWeight.bold,
+                  ),
+                ),
+                const SizedBox(height: 10),
+              ],
+            ),
+          ),
+        ),
+        Positioned(
+          top: 5,
+          right: 5,
+          width: 50,
+          height: 50,
+          child: IconButton(
+            onPressed: () {
+              Navigator.pop(context);
+            },
+            icon: Icon(
+              Icons.close,
+              color: MzanziInnovationHub.of(context)!.theme.errorColor(),
+              size: 35,
+            ),
+          ),
+        ),
+      ],
+    );
+  }
+
+  void setLocationError() {
+    messageTypes["Location Denied"] = Stack(
+      children: [
+        Container(
+          padding: EdgeInsets.all(popUpPaddingSize),
+          width: popUpWidth,
+          height: popUpheight,
+          decoration: BoxDecoration(
+            color: MzanziInnovationHub.of(context)!.theme.primaryColor(),
+            borderRadius: BorderRadius.circular(25.0),
+            border: Border.all(
+                color: MzanziInnovationHub.of(context)!.theme.errorColor(),
+                width: 5.0),
+          ),
+          child: SingleChildScrollView(
+            child: Column(
+              mainAxisSize: MainAxisSize.min,
+              children: [
+                Icon(
+                  Icons.warning_amber_rounded,
+                  size: popUpIconSize,
+                  color: MzanziInnovationHub.of(context)!.theme.errorColor(),
+                ),
+                //const SizedBox(height: 15),
+                Text(
+                  "Location Services Not Enabled",
+                  textAlign: TextAlign.center,
+                  style: TextStyle(
+                    color: MzanziInnovationHub.of(context)!.theme.errorColor(),
+                    fontSize: popUpTitleSize,
+                    fontWeight: FontWeight.bold,
+                  ),
+                ),
+                const SizedBox(height: 15),
+                Text(
+                  "To get the most out of MIH, we need your location. Please go to the site settings of the app and enable location services. Once you do that, we can start showing you relevant information based on your location.",
+                  style: TextStyle(
+                    color:
+                        MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                    fontSize: popUpBodySize,
+                    fontWeight: FontWeight.bold,
+                  ),
+                ),
+                // const SizedBox(height: 15),
+                // Text(
+                //   "Here are a few things you can try:",
+                //   style: TextStyle(
+                //     color: MzanziInnovationHub.of(context)!.theme.errorColor(),
+                //     fontSize: popUpSubtitleSize,
+                //     fontWeight: FontWeight.bold,
+                //   ),
+                // ),
+                // const SizedBox(height: 10),
+                // Text(
+                //   "1) Check your Wi-Fi signal strength or try connecting to a different network.\n2) Restart your device (computer, phone, etc.) and your router/modem.\n3) If you're using cellular data, ensure you have a strong signal and haven't reached your data limit.",
+                //   textAlign: TextAlign.left,
+                //   style: TextStyle(
+                //     color:
+                //         MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                //     fontSize: popUpBodySize,
+                //     fontWeight: FontWeight.bold,
+                //   ),
+                // ),
+                const SizedBox(height: 10),
+              ],
+            ),
+          ),
+        ),
+        Positioned(
+          top: 5,
+          right: 5,
+          width: 50,
+          height: 50,
+          child: IconButton(
+            onPressed: () {
+              Navigator.pop(context);
+            },
+            icon: Icon(
+              Icons.close,
+              color: MzanziInnovationHub.of(context)!.theme.errorColor(),
+              size: 35,
+            ),
+          ),
+        ),
+      ],
+    );
+  }
+
+  Widget? getErrorMessage(String type) {
+    return messageTypes[type];
+  }
+
+  @override
+  void dispose() {
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    size = MediaQuery.of(context).size;
+    checkScreenSize();
+    setInputError();
+    setinvalidCredError();
+    setInternetError();
+    setUserExistsError();
+    setPwdMatchError();
+    setPasswordRequirementsError();
+    setInvalidEmailError();
+    setInvalidUsernameError();
+    setLocationError();
+    //print(size);
+    // setState(() {
+    //   width = size.width;
+    //   height = size.height;
+    // });
+    return Dialog(child: getErrorMessage(widget.errorType));
+  }
+}

Frontend/lib/mih_components/mih_pop_up_messages/mih_loading_circle.dart

@@ -0,0 +1,96 @@
+import 'package:flutter/material.dart';
+import '../../main.dart';
+import 'package:gif/gif.dart';
+
+class Mihloadingcircle extends StatefulWidget {
+  const Mihloadingcircle({super.key});
+
+  @override
+  State<Mihloadingcircle> createState() => _MihloadingcircleState();
+}
+
+class _MihloadingcircleState extends State<Mihloadingcircle>
+    with TickerProviderStateMixin {
+  late final GifController _controller;
+  late double popUpPaddingSize;
+  late double popUpWidth;
+  late double? popUpheight;
+
+  late double width;
+  late double height;
+
+  void checkScreenSize() {
+    if (MzanziInnovationHub.of(context)!.theme.screenType == "desktop") {
+      setState(() {
+        popUpWidth = 250;
+        popUpheight = 250;
+        popUpPaddingSize = 25.0;
+      });
+    } else {
+      setState(() {
+        popUpWidth = 250;
+        popUpheight = 250;
+        popUpPaddingSize = 15.0;
+      });
+    }
+  }
+
+  @override
+  void initState() {
+    _controller = GifController(vsync: this);
+    //_controller.animateTo(26);
+    super.initState();
+  }
+
+  @override
+  void dispose() {
+    _controller.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    ImageProvider loading =
+        MzanziInnovationHub.of(context)!.theme.loadingImage();
+    var size = MediaQuery.of(context).size;
+    setState(() {
+      width = size.width;
+      height = size.height;
+    });
+    checkScreenSize();
+    return Dialog(
+      //backgroundColor: MzanziInnovationHub.of(context)!.theme.primaryColor(),
+      child: Container(
+        padding: EdgeInsets.all(popUpPaddingSize),
+        width: 250,
+        height: 250,
+        decoration: BoxDecoration(
+          color: MzanziInnovationHub.of(context)!.theme.primaryColor(),
+          borderRadius: BorderRadius.circular(25.0),
+          border: Border.all(
+              color: MzanziInnovationHub.of(context)!.theme.primaryColor(),
+              width: 5.0),
+        ),
+        child: Gif(
+          image: loading,
+          controller:
+              _controller, // if duration and fps is null, original gif fps will be used.
+          fps: 15,
+          //duration: const Duration(seconds: 3),
+          autostart: Autostart.loop,
+          placeholder: (context) => const Center(
+            child: CircularProgressIndicator(),
+          ),
+          onFetchCompleted: () {
+            _controller.reset();
+            _controller.forward();
+          },
+        ),
+      ),
+
+      //   Center(
+      //       child: MzanziInnovationHub.of(context)!.theme.loadingImage()),
+      // ),
+    );
+  }
+}

Frontend/lib/mih_components/mih_pop_up_messages/mih_notification_message.dart

@@ -0,0 +1,188 @@
+import 'package:flutter/material.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 (MzanziInnovationHub.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() {
+    //messageTypes["Input Error"] =
+    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 = MzanziInnovationHub.of(context)!.theme.primaryColor();
+      secondary = MzanziInnovationHub.of(context)!.theme.errorColor();
+    });
+    _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_components/mih_pop_up_messages/mih_success_message.dart

@@ -0,0 +1,142 @@
+import 'package:flutter/material.dart';
+import '../../main.dart';
+import '../mih_inputs_and_buttons/mih_button.dart';
+
+class MIHSuccessMessage extends StatefulWidget {
+  final String successType;
+  final String successMessage;
+  const MIHSuccessMessage({
+    super.key,
+    required this.successType,
+    required this.successMessage,
+  });
+
+  @override
+  State<MIHSuccessMessage> createState() => _MIHSuccessMessageState();
+}
+
+class _MIHSuccessMessageState extends State<MIHSuccessMessage> {
+  var messageTypes = <String, Widget>{};
+  late String message;
+  late double popUpWidth;
+  late double? popUpheight;
+  late double popUpTitleSize;
+  late double popUpSubtitleSize;
+  late double popUpBodySize;
+  late double popUpIconSize;
+  late double popUpPaddingSize;
+  late Size? size;
+
+  void checkScreenSize() {
+    if (MzanziInnovationHub.of(context)!.theme.screenType == "desktop") {
+      setState(() {
+        popUpWidth = (size!.width / 4) * 2;
+        popUpheight = null;
+        popUpTitleSize = 25.0;
+        popUpSubtitleSize = 20.0;
+        popUpBodySize = 15;
+        popUpPaddingSize = 25.0;
+        popUpIconSize = 100;
+      });
+    } else {
+      setState(() {
+        popUpWidth = size!.width - (size!.width * 0.1);
+        popUpheight = null;
+        popUpTitleSize = 20.0;
+        popUpSubtitleSize = 18.0;
+        popUpBodySize = 15;
+        popUpPaddingSize = 15.0;
+        popUpIconSize = 100;
+      });
+    }
+  }
+
+  void setSuccessmessage() {
+    messageTypes["Success"] = Stack(
+      children: [
+        Container(
+          padding: EdgeInsets.all(popUpPaddingSize),
+          width: popUpWidth,
+          height: popUpheight,
+          decoration: BoxDecoration(
+            color: MzanziInnovationHub.of(context)!.theme.primaryColor(),
+            borderRadius: BorderRadius.circular(25.0),
+            border: Border.all(
+                color: MzanziInnovationHub.of(context)!.theme.successColor(),
+                width: 5.0),
+          ),
+          child: Column(
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              Icon(
+                Icons.check_circle_outline_rounded,
+                size: popUpIconSize,
+                color: MzanziInnovationHub.of(context)!.theme.successColor(),
+              ),
+              //const SizedBox(height: 15),
+              Text(
+                "Success!",
+                textAlign: TextAlign.center,
+                style: TextStyle(
+                  color: MzanziInnovationHub.of(context)!.theme.successColor(),
+                  fontSize: popUpTitleSize,
+                  fontWeight: FontWeight.bold,
+                ),
+              ),
+              const SizedBox(height: 15),
+              Center(
+                child: Text(
+                  message,
+                  style: TextStyle(
+                    color:
+                        MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                    fontSize: popUpBodySize,
+                    fontWeight: FontWeight.bold,
+                  ),
+                ),
+              ),
+              const SizedBox(height: 15),
+              SizedBox(
+                width: 300,
+                height: 50,
+                child: MIHButton(
+                  onTap: () {
+                    Navigator.pop(context);
+                  },
+                  buttonText: "Dismiss",
+                  buttonColor:
+                      MzanziInnovationHub.of(context)!.theme.successColor(),
+                  textColor:
+                      MzanziInnovationHub.of(context)!.theme.primaryColor(),
+                ),
+              ),
+            ],
+          ),
+        ),
+      ],
+    );
+  }
+
+  Widget? getSuccessMessage(String type) {
+    return messageTypes[type];
+  }
+
+  @override
+  void dispose() {
+    super.dispose();
+  }
+
+  @override
+  void initState() {
+    super.initState();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    size = MediaQuery.of(context).size;
+    checkScreenSize();
+    message = widget.successMessage;
+    setSuccessmessage();
+    return Dialog(child: getSuccessMessage(widget.successType));
+  }
+}

Frontend/lib/mih_components/mih_pop_up_messages/mih_warning_message.dart

@@ -0,0 +1,500 @@
+import 'package:flutter/material.dart';
+import '../../main.dart';
+
+class MIHWarningMessage extends StatefulWidget {
+  final String warningType;
+  const MIHWarningMessage({
+    super.key,
+    required this.warningType,
+  });
+
+  @override
+  State<MIHWarningMessage> createState() => _MIHDeleteMessageState();
+}
+
+class _MIHDeleteMessageState extends State<MIHWarningMessage> {
+  var messageTypes = <String, Widget>{};
+  late double popUpWidth;
+  late double? popUpheight;
+  late double popUpTitleSize;
+  late double popUpSubtitleSize;
+  late double popUpBodySize;
+  late double popUpIconSize;
+  late double popUpPaddingSize;
+  late double width;
+  late double height;
+
+  void checkScreenSize() {
+    if (MzanziInnovationHub.of(context)!.theme.screenType == "desktop") {
+      setState(() {
+        popUpWidth = (width / 4) * 2;
+        popUpheight = null;
+        popUpTitleSize = 25.0;
+        popUpSubtitleSize = 20.0;
+        popUpBodySize = 15;
+        popUpPaddingSize = 25.0;
+        popUpIconSize = 100;
+      });
+    } else {
+      setState(() {
+        popUpWidth = width - (width * 0.1);
+        popUpheight = null;
+        popUpTitleSize = 20.0;
+        popUpSubtitleSize = 18.0;
+        popUpBodySize = 15;
+        popUpPaddingSize = 15.0;
+        popUpIconSize = 100;
+      });
+    }
+  }
+
+  void setNoAccess() {
+    messageTypes["No Access"] = Stack(
+      children: [
+        Container(
+          padding: EdgeInsets.all(popUpPaddingSize),
+          width: popUpWidth,
+          height: popUpheight,
+          decoration: BoxDecoration(
+            color: MzanziInnovationHub.of(context)!.theme.primaryColor(),
+            borderRadius: BorderRadius.circular(25.0),
+            border: Border.all(
+                color: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                width: 5.0),
+          ),
+          child: SingleChildScrollView(
+            child: Column(
+              mainAxisSize: MainAxisSize.min,
+              children: [
+                Icon(
+                  Icons.warning_amber_rounded,
+                  size: popUpIconSize,
+                  color:
+                      MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                ),
+                //const SizedBox(height: 15),
+                Text(
+                  "Access Pending",
+                  textAlign: TextAlign.center,
+                  style: TextStyle(
+                    color:
+                        MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                    fontSize: popUpTitleSize,
+                    fontWeight: FontWeight.bold,
+                  ),
+                ),
+                const SizedBox(height: 15),
+                Text(
+                  "Your access request is currently being reviewed.\nOnce approved, you'll be able to view patient data.\nPlease follow up with the patient to approve your access request.",
+                  style: TextStyle(
+                    color:
+                        MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                    fontSize: popUpBodySize,
+                    fontWeight: FontWeight.bold,
+                  ),
+                ),
+                const SizedBox(height: 15),
+              ],
+            ),
+          ),
+        ),
+        Positioned(
+          top: 5,
+          right: 5,
+          width: 50,
+          height: 50,
+          child: IconButton(
+            onPressed: () {
+              Navigator.pop(context);
+            },
+            icon: Icon(
+              Icons.close,
+              color: MzanziInnovationHub.of(context)!.theme.errorColor(),
+              size: 35,
+            ),
+          ),
+        ),
+      ],
+    );
+  }
+
+  void setNoPatientAccess() {
+    messageTypes["No Patient Access"] = Stack(
+      children: [
+        Container(
+          padding: EdgeInsets.all(popUpPaddingSize),
+          width: popUpWidth,
+          height: popUpheight,
+          decoration: BoxDecoration(
+            color: MzanziInnovationHub.of(context)!.theme.primaryColor(),
+            borderRadius: BorderRadius.circular(25.0),
+            border: Border.all(
+                color: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                width: 5.0),
+          ),
+          child: SingleChildScrollView(
+            child: Column(
+              mainAxisSize: MainAxisSize.min,
+              children: [
+                Icon(
+                  Icons.warning_amber_rounded,
+                  size: popUpIconSize,
+                  color:
+                      MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                ),
+                //const SizedBox(height: 15),
+                Text(
+                  "Patient Profile Access Needed",
+                  textAlign: TextAlign.center,
+                  style: TextStyle(
+                    color:
+                        MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                    fontSize: popUpTitleSize,
+                    fontWeight: FontWeight.bold,
+                  ),
+                ),
+                const SizedBox(height: 15),
+                Text(
+                  "To proceed with booking an appointment, you must have access to the patient's profile. This will allow you to view their medical history and other relevant information. Please contact the appropriate administrator to request access.",
+                  style: TextStyle(
+                    color:
+                        MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                    fontSize: popUpBodySize,
+                    fontWeight: FontWeight.bold,
+                  ),
+                ),
+                const SizedBox(height: 15),
+              ],
+            ),
+          ),
+        ),
+        Positioned(
+          top: 5,
+          right: 5,
+          width: 50,
+          height: 50,
+          child: IconButton(
+            onPressed: () {
+              Navigator.pop(context);
+            },
+            icon: Icon(
+              Icons.close,
+              color: MzanziInnovationHub.of(context)!.theme.errorColor(),
+              size: 35,
+            ),
+          ),
+        ),
+      ],
+    );
+  }
+
+  void setAppointmentCanelled() {
+    messageTypes["Appointment Canelled"] = Stack(
+      children: [
+        Container(
+          padding: EdgeInsets.all(popUpPaddingSize),
+          width: popUpWidth,
+          height: popUpheight,
+          decoration: BoxDecoration(
+            color: MzanziInnovationHub.of(context)!.theme.primaryColor(),
+            borderRadius: BorderRadius.circular(25.0),
+            border: Border.all(
+                color: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                width: 5.0),
+          ),
+          child: SingleChildScrollView(
+            child: Column(
+              mainAxisSize: MainAxisSize.min,
+              children: [
+                Icon(
+                  Icons.warning_amber_rounded,
+                  size: popUpIconSize,
+                  color:
+                      MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                ),
+                //const SizedBox(height: 15),
+                Text(
+                  "Appointment Cancelled",
+                  textAlign: TextAlign.center,
+                  style: TextStyle(
+                    color:
+                        MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                    fontSize: popUpTitleSize,
+                    fontWeight: FontWeight.bold,
+                  ),
+                ),
+                const SizedBox(height: 15),
+                Text(
+                  "This appointment has been canceled. As a result, you no longer have access to the patient's profile. If you would like to view the patient's profile again, please book a new appointment.",
+                  style: TextStyle(
+                    color:
+                        MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                    fontSize: popUpBodySize,
+                    fontWeight: FontWeight.bold,
+                  ),
+                ),
+                const SizedBox(height: 15),
+              ],
+            ),
+          ),
+        ),
+        Positioned(
+          top: 5,
+          right: 5,
+          width: 50,
+          height: 50,
+          child: IconButton(
+            onPressed: () {
+              Navigator.pop(context);
+            },
+            icon: Icon(
+              Icons.close,
+              color: MzanziInnovationHub.of(context)!.theme.errorColor(),
+              size: 35,
+            ),
+          ),
+        ),
+      ],
+    );
+  }
+
+  void setAccessCanelled() {
+    messageTypes["Access Cancelled"] = Stack(
+      children: [
+        Container(
+          padding: EdgeInsets.all(popUpPaddingSize),
+          width: popUpWidth,
+          height: popUpheight,
+          decoration: BoxDecoration(
+            color: MzanziInnovationHub.of(context)!.theme.primaryColor(),
+            borderRadius: BorderRadius.circular(25.0),
+            border: Border.all(
+                color: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                width: 5.0),
+          ),
+          child: SingleChildScrollView(
+            child: Column(
+              mainAxisSize: MainAxisSize.min,
+              children: [
+                Icon(
+                  Icons.warning_amber_rounded,
+                  size: popUpIconSize,
+                  color:
+                      MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                ),
+                //const SizedBox(height: 15),
+                Text(
+                  "Access Cancelled",
+                  textAlign: TextAlign.center,
+                  style: TextStyle(
+                    color:
+                        MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                    fontSize: popUpTitleSize,
+                    fontWeight: FontWeight.bold,
+                  ),
+                ),
+                const SizedBox(height: 15),
+                Text(
+                  "This appointment has been canceled. As a result, access has been cancelled and the doctor no longer have access to the patient's profile. If you would like them to view the patient's profile again, please book a new appointment through them.",
+                  style: TextStyle(
+                    color:
+                        MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                    fontSize: popUpBodySize,
+                    fontWeight: FontWeight.bold,
+                  ),
+                ),
+                const SizedBox(height: 15),
+              ],
+            ),
+          ),
+        ),
+        Positioned(
+          top: 5,
+          right: 5,
+          width: 50,
+          height: 50,
+          child: IconButton(
+            onPressed: () {
+              Navigator.pop(context);
+            },
+            icon: Icon(
+              Icons.close,
+              color: MzanziInnovationHub.of(context)!.theme.errorColor(),
+              size: 35,
+            ),
+          ),
+        ),
+      ],
+    );
+  }
+
+  void setAccessDeclined() {
+    messageTypes["Access Declined"] = Stack(
+      children: [
+        Container(
+          padding: EdgeInsets.all(popUpPaddingSize),
+          width: popUpWidth,
+          height: popUpheight,
+          decoration: BoxDecoration(
+            color: MzanziInnovationHub.of(context)!.theme.primaryColor(),
+            borderRadius: BorderRadius.circular(25.0),
+            border: Border.all(
+                color: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                width: 5.0),
+          ),
+          child: SingleChildScrollView(
+            child: Column(
+              mainAxisSize: MainAxisSize.min,
+              children: [
+                Icon(
+                  Icons.warning_amber_rounded,
+                  size: popUpIconSize,
+                  color:
+                      MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                ),
+                //const SizedBox(height: 15),
+                Text(
+                  "Access Declined",
+                  textAlign: TextAlign.center,
+                  style: TextStyle(
+                    color:
+                        MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                    fontSize: popUpTitleSize,
+                    fontWeight: FontWeight.bold,
+                  ),
+                ),
+                const SizedBox(height: 15),
+                Text(
+                  "Your request to access the patient's profile has been denied. Please contact the patient directly to inquire about the reason for this restriction.",
+                  style: TextStyle(
+                    color:
+                        MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                    fontSize: popUpBodySize,
+                    fontWeight: FontWeight.bold,
+                  ),
+                ),
+                const SizedBox(height: 15),
+              ],
+            ),
+          ),
+        ),
+        Positioned(
+          top: 5,
+          right: 5,
+          width: 50,
+          height: 50,
+          child: IconButton(
+            onPressed: () {
+              Navigator.pop(context);
+            },
+            icon: Icon(
+              Icons.close,
+              color: MzanziInnovationHub.of(context)!.theme.errorColor(),
+              size: 35,
+            ),
+          ),
+        ),
+      ],
+    );
+  }
+
+  void setExpiredAccess() {
+    messageTypes["Expired Access"] = Stack(
+      children: [
+        Container(
+          padding: EdgeInsets.all(popUpPaddingSize),
+          width: popUpWidth,
+          height: popUpheight,
+          decoration: BoxDecoration(
+            color: MzanziInnovationHub.of(context)!.theme.primaryColor(),
+            borderRadius: BorderRadius.circular(25.0),
+            border: Border.all(
+                color: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                width: 5.0),
+          ),
+          child: SingleChildScrollView(
+            child: Column(
+              mainAxisSize: MainAxisSize.min,
+              children: [
+                Icon(
+                  Icons.warning_amber_rounded,
+                  size: popUpIconSize,
+                  color:
+                      MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                ),
+                //const SizedBox(height: 15),
+                Text(
+                  "Access Expired",
+                  textAlign: TextAlign.center,
+                  style: TextStyle(
+                    color:
+                        MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                    fontSize: popUpTitleSize,
+                    fontWeight: FontWeight.bold,
+                  ),
+                ),
+                const SizedBox(height: 15),
+                Text(
+                  "You no longer have access to this patient profile. The authorized access period has ended. Access to a patients profile is limited to 7 days from appointment date.",
+                  style: TextStyle(
+                    color:
+                        MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                    fontSize: popUpBodySize,
+                    fontWeight: FontWeight.bold,
+                  ),
+                ),
+                const SizedBox(height: 15),
+              ],
+            ),
+          ),
+        ),
+        Positioned(
+          top: 5,
+          right: 5,
+          width: 50,
+          height: 50,
+          child: IconButton(
+            onPressed: () {
+              Navigator.pop(context);
+            },
+            icon: Icon(
+              Icons.close,
+              color: MzanziInnovationHub.of(context)!.theme.errorColor(),
+              size: 35,
+            ),
+          ),
+        ),
+      ],
+    );
+  }
+
+  Widget? getDeleteMessage(String type) {
+    return messageTypes[type];
+  }
+
+  @override
+  void dispose() {
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    var size = MediaQuery.of(context).size;
+    setState(() {
+      width = size.width;
+      height = size.height;
+    });
+    checkScreenSize();
+    setNoAccess();
+    setExpiredAccess();
+    setAccessDeclined();
+    setAppointmentCanelled();
+    setAccessCanelled();
+    //print(size);
+    // setState(() {
+    //   width = size.width;
+    //   height = size.height;
+    // });
+    return Dialog(child: getDeleteMessage(widget.warningType));
+  }
+}

Frontend/lib/mih_components/mih_profile_picture.dart

@@ -0,0 +1,112 @@
+import 'package:file_picker/file_picker.dart';
+import 'package:flutter/material.dart';
+import '../../main.dart';
+
+// ignore: must_be_immutable
+class MIHProfilePicture extends StatefulWidget {
+  final ImageProvider<Object>? profilePictureFile;
+  final TextEditingController proPicController;
+
+  PlatformFile? proPic;
+  final double width;
+  final double radius;
+  final bool drawerMode;
+  final bool editable;
+  final onChange;
+  MIHProfilePicture({
+    super.key,
+    required this.profilePictureFile,
+    required this.proPicController,
+    required this.proPic,
+    required this.width,
+    required this.radius,
+    required this.drawerMode,
+    required this.editable,
+    required this.onChange,
+  });
+
+  @override
+  State<MIHProfilePicture> createState() => _MIHProfilePictureState();
+}
+
+class _MIHProfilePictureState extends State<MIHProfilePicture> {
+  late ImageProvider<Object>? propicPreview;
+  //late PlatformFile proPic;
+
+  Widget displayEditableProPic() {
+    ImageProvider logoFrame;
+    if (!widget.drawerMode) {
+      logoFrame = MzanziInnovationHub.of(context)!.theme.altLogoFrame();
+    } else {
+      logoFrame = MzanziInnovationHub.of(context)!.theme.logoFrame();
+    }
+
+    if (widget.profilePictureFile != null) {
+      return Stack(
+        alignment: Alignment.center,
+        fit: StackFit.loose,
+        children: [
+          CircleAvatar(
+            backgroundColor:
+                MzanziInnovationHub.of(context)!.theme.primaryColor(),
+            backgroundImage: propicPreview,
+            //'https://media.licdn.com/dms/image/D4D03AQGd1-QhjtWWpA/profile-displayphoto-shrink_400_400/0/1671698053061?e=2147483647&v=beta&t=a3dJI5yxs5-KeXjj10LcNCFuC9IOfa8nNn3k_Qyr0CA'),
+            radius: widget.radius,
+          ),
+          SizedBox(
+            width: widget.width,
+            child: Image(image: logoFrame),
+          ),
+          Visibility(
+            visible: widget.editable,
+            child: Positioned(
+              bottom: 0,
+              right: 0,
+              child: IconButton.filled(
+                onPressed: () async {
+                  FilePickerResult? result =
+                      await FilePicker.platform.pickFiles(
+                    type: FileType.custom,
+                    allowedExtensions: ['jpg', 'png'],
+                  );
+                  if (result == null) return;
+                  final selectedFile = result.files.first;
+                  setState(() {
+                    widget.onChange(selectedFile);
+                    widget.proPic = selectedFile;
+                    //print("MIH Profile Picture: ${widget.proPic}");
+                    propicPreview = MemoryImage(widget.proPic!.bytes!);
+                  });
+
+                  setState(() {
+                    widget.proPicController.text = selectedFile.name;
+                  });
+                },
+                icon: const Icon(Icons.edit),
+              ),
+            ),
+          ),
+        ],
+      );
+    } else {
+      return SizedBox(
+        width: widget.width,
+        child: Image(image: logoFrame),
+      );
+    }
+  }
+
+  @override
+  void initState() {
+    setState(() {
+      propicPreview = widget.profilePictureFile;
+    });
+
+    super.initState();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return displayEditableProPic();
+  }
+}