Merge branch 'main' into Feature-Mzansi-AI-Ollama

Frontend/android/app/agconnect-services.json

@@ -0,0 +1,57 @@
+{
+	"agcgw_all":{
+		"CN":"connect-drcn.dbankcloud.cn",
+		"CN_back":"connect-drcn.hispace.hicloud.com",
+		"DE":"connect-dre.dbankcloud.cn",
+		"DE_back":"connect-dre.hispace.hicloud.com",
+		"RU":"connect-drru.hispace.dbankcloud.ru",
+		"RU_back":"connect-drru.hispace.dbankcloud.cn",
+		"SG":"connect-dra.dbankcloud.cn",
+		"SG_back":"connect-dra.hispace.hicloud.com"
+	},
+	"websocketgw_all":{
+		"CN":"connect-ws-drcn.hispace.dbankcloud.cn",
+		"CN_back":"connect-ws-drcn.hispace.dbankcloud.com",
+		"DE":"connect-ws-dre.hispace.dbankcloud.cn",
+		"DE_back":"connect-ws-dre.hispace.dbankcloud.com",
+		"RU":"connect-ws-drru.hispace.dbankcloud.ru",
+		"RU_back":"connect-ws-drru.hispace.dbankcloud.cn",
+		"SG":"connect-ws-dra.hispace.dbankcloud.cn",
+		"SG_back":"connect-ws-dra.hispace.dbankcloud.com"
+	},
+	"client":{
+		"cp_id":"30027000028342692",
+		"product_id":"461323198429473763",
+		"client_id":"1605107650066918016",
+		"client_secret":"F0A7DCFC40BBE823749E9CDAFA95BC7EF6CF37AE4CCC47F20E3434521625E1E1",
+		"project_id":"461323198429473763",
+		"app_id":"113315335",
+		"api_key":"DQEDAFJrB8PGLd+BmY2xafYqt6NgGE+W3ShbW2/b8xNkMTX1Elf1u7NLU73LkMl676mVHeQvLkwluYHi0FEJXEzfXtLR6P6jmW5q5A==",
+		"package_name":"za.co.mzansiinnovationhub.mih"
+	},
+	"oauth_client":{
+		"client_id":"113315335",
+		"client_type":1
+	},
+	"app_info":{
+		"app_id":"113315335",
+		"package_name":"za.co.mzansiinnovationhub.mih"
+	},
+	"configuration_version":"3.0",
+	"appInfos":[
+		{
+			"package_name":"za.co.mzansiinnovationhub.mih",
+			"client":{
+				"app_id":"113315335"
+			},
+			"app_info":{
+				"package_name":"za.co.mzansiinnovationhub.mih",
+				"app_id":"113315335"
+			},
+			"oauth_client":{
+				"client_type":1,
+				"client_id":"113315335"
+			}
+		}
+	]
+}

Frontend/android/app/build.gradle

@@ -83,4 +83,7 @@ flutter {
 
 dependencies {
     implementation("com.google.android.material:material:<version>")
+    implementation 'com.huawei.agconnect:agconnect-core:1.5.2.300'
 }
+
+apply plugin: 'com.huawei.agconnect'

Frontend/android/build.gradle

@@ -3,10 +3,13 @@ buildscript {
     repositories {
         google()
         mavenCentral()
+        maven { url 'https://developer.huawei.com/repo/' }
     }
 
     dependencies {
+        classpath "com.android.tools.build:gradle:8.8.0"
         classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
+        classpath 'com.huawei.agconnect:agcp:1.5.2.300'
     }
 }
 
@@ -14,6 +17,7 @@ allprojects {
     repositories {
         google()
         mavenCentral()
+        maven {url 'https://developer.huawei.com/repo/'}
     }
 }
 

Frontend/lib/mih_components/mih_package/mih-app_tool_body.dart

@@ -0,0 +1,87 @@
+import 'package:Mzansi_Innovation_Hub/main.dart';
+import 'package:flutter/material.dart';
+
+class MihAppToolBody extends StatefulWidget {
+  final bool borderOn;
+  final Widget bodyItem;
+  const MihAppToolBody({
+    super.key,
+    required this.borderOn,
+    required this.bodyItem,
+  });
+
+  @override
+  State<MihAppToolBody> createState() => _MihAppToolBodyState();
+}
+
+class _MihAppToolBodyState extends State<MihAppToolBody> {
+  late double _innerBodyPadding;
+  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) {
+      _innerBodyPadding = 10.0;
+      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 {
+      _innerBodyPadding = 0.0;
+      return BoxDecoration(
+        color: MzanziInnovationHub.of(context)!.theme.primaryColor(),
+        borderRadius: BorderRadius.circular(25.0),
+        border: Border.all(
+            color: MzanziInnovationHub.of(context)!.theme.primaryColor(),
+            width: 3.0),
+      );
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    Size screenSize = MediaQuery.sizeOf(context);
+
+    return Padding(
+      padding: EdgeInsets.only(
+        left: getHorizontalPaddingSize(screenSize),
+        right: getHorizontalPaddingSize(screenSize),
+        bottom: getVerticalPaddingSize(screenSize),
+        top: 0,
+      ),
+      child: Container(
+        decoration: getBoader(),
+        child: Padding(
+          padding: EdgeInsets.all(_innerBodyPadding),
+          child: widget.bodyItem,
+        ),
+      ),
+    );
+  }
+}

Frontend/lib/mih_components/mih_package/mih_app.dart

@@ -0,0 +1,82 @@
+import 'package:Mzansi_Innovation_Hub/mih_components/mih_package/mih-app_tool_body.dart';
+import 'package:Mzansi_Innovation_Hub/mih_components/mih_package/mih_app_action.dart';
+import 'package:Mzansi_Innovation_Hub/mih_components/mih_package/mih_app_tools.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_swipe_detector/flutter_swipe_detector.dart';
+
+// ignore: must_be_immutable
+class MihApp extends StatefulWidget {
+  final MihAppAction appActionButton;
+  final MihAppTools appTools;
+  final List<MihAppToolBody> appBody;
+  int selectedbodyIndex;
+  final onIndexChange;
+  MihApp({
+    super.key,
+    required this.appActionButton,
+    required this.appTools,
+    required this.appBody,
+    required this.selectedbodyIndex,
+    required this.onIndexChange,
+  });
+
+  @override
+  State<MihApp> createState() => _MihAppState();
+}
+
+class _MihAppState extends State<MihApp> {
+  @override
+  Widget build(BuildContext context) {
+    Size screenSize = MediaQuery.of(context).size;
+    return Scaffold(
+      body: SafeArea(
+        child: Container(
+          width: screenSize.width,
+          height: screenSize.height,
+          //color: Colors.black,
+          child: Column(
+            children: [
+              Row(
+                mainAxisSize: MainAxisSize.min,
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  widget.appActionButton,
+                  Flexible(child: widget.appTools),
+                ],
+              ),
+              Expanded(
+                  child: SwipeDetector(
+                onSwipeLeft: (offset) {
+                  if (widget.selectedbodyIndex <
+                      widget.appTools.tools.length - 1) {
+                    setState(() {
+                      widget.selectedbodyIndex += 1;
+                      widget.onIndexChange(widget.selectedbodyIndex);
+                    });
+                  }
+                  // print("swipe left");
+                },
+                onSwipeRight: (offset) {
+                  if (widget.selectedbodyIndex > 0) {
+                    setState(() {
+                      widget.selectedbodyIndex -= 1;
+                      widget.onIndexChange(widget.selectedbodyIndex);
+                    });
+                  }
+                  // print("swipe right");
+                },
+                child: Row(
+                  children: [
+                    Expanded(
+                      child: widget.appBody[widget.selectedbodyIndex],
+                    )
+                  ],
+                ),
+              )),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}

Frontend/lib/mih_components/mih_package/mih_app_action.dart

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

@@ -0,0 +1,113 @@
+import 'package:Mzansi_Innovation_Hub/main.dart';
+import 'package:flutter/material.dart';
+
+class MihAppAlert extends StatefulWidget {
+  final Widget alertIcon;
+  final String alertTitle;
+  final Widget alertBody;
+  final Color alertColour;
+  const MihAppAlert({
+    super.key,
+    required this.alertIcon,
+    required this.alertTitle,
+    required this.alertBody,
+    required this.alertColour,
+  });
+
+  @override
+  State<MihAppAlert> createState() => _MihAppAlertState();
+}
+
+class _MihAppAlertState extends State<MihAppAlert> {
+  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;
+      });
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    size = MediaQuery.of(context).size;
+    checkScreenSize();
+    return Dialog(
+      child: Stack(
+        children: [
+          Container(
+            padding: EdgeInsets.all(popUpPaddingSize),
+            width: popUpWidth,
+            height: popUpheight,
+            decoration: BoxDecoration(
+              color: MzanziInnovationHub.of(context)!.theme.primaryColor(),
+              borderRadius: BorderRadius.circular(25.0),
+              border: Border.all(color: widget.alertColour, width: 5.0),
+            ),
+            child: SingleChildScrollView(
+              child: Column(
+                mainAxisSize: MainAxisSize.min,
+                children: [
+                  widget.alertIcon,
+                  //const SizedBox(height: 5),
+                  Text(
+                    widget.alertTitle,
+                    textAlign: TextAlign.center,
+                    style: TextStyle(
+                      color: widget.alertColour,
+                      fontSize: popUpTitleSize,
+                      fontWeight: FontWeight.bold,
+                    ),
+                  ),
+                  const SizedBox(height: 15),
+                  widget.alertBody,
+                  const SizedBox(height: 10),
+                ],
+              ),
+            ),
+          ),
+          Positioned(
+            top: 5,
+            right: 5,
+            width: 50,
+            height: 50,
+            child: IconButton(
+              onPressed: () {
+                Navigator.pop(context);
+              },
+              icon: Icon(
+                Icons.close,
+                color: widget.alertColour,
+                size: 35,
+              ),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}

Frontend/lib/mih_components/mih_package/mih_app_tile.dart

@@ -0,0 +1,111 @@
+import 'package:Mzansi_Innovation_Hub/main.dart';
+import 'package:Mzansi_Innovation_Hub/mih_components/mih_package/mih_app_window.dart';
+import 'package:Mzansi_Innovation_Hub/mih_components/mih_yt_video_player.dart';
+import 'package:flutter/material.dart';
+
+class MihAppTile extends StatefulWidget {
+  final String appName;
+  final String? ytVideoID;
+  final Widget appIcon;
+  final void Function() onTap;
+  final double iconSize;
+  final Color primaryColor;
+  final Color secondaryColor;
+  const MihAppTile({
+    super.key,
+    required this.onTap,
+    required this.appName,
+    this.ytVideoID,
+    required this.appIcon,
+    required this.iconSize,
+    required this.primaryColor,
+    required this.secondaryColor,
+  });
+
+  @override
+  State<MihAppTile> createState() => _MihAppTileState();
+}
+
+class _MihAppTileState extends State<MihAppTile> {
+  void displayHint() {
+    if (widget.ytVideoID != null) {
+      showDialog(
+        context: context,
+        builder: (context) {
+          return MihAppWindow(
+            fullscreen: false,
+            windowTitle: widget.appName,
+            windowTools: const [],
+            onWindowTapClose: () {
+              Navigator.pop(context);
+            },
+            windowBody: [
+              MIHYTVideoPlayer(
+                videoYTLink: widget.ytVideoID!,
+              ),
+            ],
+          );
+        },
+      );
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    double borderRadius = widget.iconSize * 0.25;
+    return SizedBox(
+      width: widget.iconSize,
+      child: Container(
+        alignment: Alignment.topCenter,
+        // color: Colors.black,
+        // constraints: BoxConstraints(),
+        child: Column(
+          children: [
+            AnimatedContainer(
+              //alignment: Alignment.center,
+              width: widget.iconSize,
+              height: widget.iconSize,
+              duration: const Duration(seconds: 2),
+              child: Material(
+                color: widget.primaryColor,
+                // shadowColor:
+                //     MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                // elevation: 5,
+                borderRadius: BorderRadius.circular(borderRadius),
+                child: InkWell(
+                  borderRadius: BorderRadius.circular(borderRadius),
+                  // ho
+                  onTap: widget.onTap,
+                  onLongPress: () {
+                    displayHint();
+                  },
+                  // hoverDuration: ,
+                  splashColor:
+                      MzanziInnovationHub.of(context)!.theme.highlightColor(),
+                  highlightColor:
+                      MzanziInnovationHub.of(context)!.theme.highlightColor(),
+                  child: FittedBox(child: widget.appIcon),
+                ),
+              ),
+            ),
+            const SizedBox(height: 10),
+            FittedBox(
+              child: Text(
+                widget.appName,
+                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_package/mih_app_tools.dart

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

Frontend/lib/mih_components/mih_package/mih_app_window.dart

@@ -0,0 +1,214 @@
+import 'package:flutter/material.dart';
+import '../../main.dart';
+
+class MihAppWindow extends StatefulWidget {
+  final String windowTitle;
+  final List<Widget> windowBody;
+  final List<Widget> windowTools;
+  final void Function() onWindowTapClose;
+  final bool fullscreen;
+  const MihAppWindow({
+    super.key,
+    required this.fullscreen,
+    required this.windowTitle,
+    required this.windowTools,
+    required this.onWindowTapClose,
+    required this.windowBody,
+  });
+
+  @override
+  State<MihAppWindow> createState() => _MihAppWindowState();
+}
+
+class _MihAppWindowState extends State<MihAppWindow> {
+  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_package/test/package_test.dart

@@ -0,0 +1,336 @@
+import 'package:Mzansi_Innovation_Hub/main.dart';
+import 'package:Mzansi_Innovation_Hub/mih_components/mih_inputs_and_buttons/mih_button.dart';
+import 'package:Mzansi_Innovation_Hub/mih_components/mih_package/mih_app.dart';
+import 'package:Mzansi_Innovation_Hub/mih_components/mih_package/mih_app_action.dart';
+import 'package:Mzansi_Innovation_Hub/mih_components/mih_package/mih_app_alert.dart';
+import 'package:Mzansi_Innovation_Hub/mih_components/mih_package/mih_app_tile.dart';
+import 'package:Mzansi_Innovation_Hub/mih_components/mih_package/mih_app_tools.dart';
+import 'package:Mzansi_Innovation_Hub/mih_components/mih_package/mih_app_window.dart';
+import 'package:Mzansi_Innovation_Hub/mih_components/mih_package/mih-app_tool_body.dart';
+import 'package:Mzansi_Innovation_Hub/mih_objects/arguments.dart';
+import 'package:flutter/material.dart';
+
+class PackageTest extends StatefulWidget {
+  const PackageTest({super.key});
+
+  @override
+  State<PackageTest> createState() => _PackageTestState();
+}
+
+class _PackageTestState extends State<PackageTest> {
+  int _selcetedIndex = 0;
+
+  MihAppAction getAction() {
+    return MihAppAction(
+      icon: const Icon(Icons.arrow_back),
+      iconSize: 35,
+      onTap: () {
+        Navigator.of(context).pop();
+        Navigator.of(context).popAndPushNamed(
+          '/',
+          arguments: AuthArguments(true, false),
+        );
+      },
+    );
+  }
+
+  MihAppTools getTools() {
+    Map<Widget, void Function()?> temp = Map();
+    temp[const Icon(Icons.arrow_back)] = () {
+      setState(() {
+        _selcetedIndex = 0;
+      });
+    };
+    temp[const Icon(Icons.arrow_forward)] = () {
+      setState(() {
+        _selcetedIndex = 1;
+      });
+    };
+    return MihAppTools(
+      tools: temp,
+      selcetedIndex: _selcetedIndex,
+    );
+  }
+
+  void showAlert() {
+    showDialog(
+      context: context,
+      builder: (context) {
+        return MihAppAlert(
+          alertIcon: Icon(
+            Icons.warning_amber_rounded,
+            size: 100,
+            color: MzanziInnovationHub.of(context)!.theme.errorColor(),
+          ),
+          alertTitle: "Oops! Looks like some fields are missing.",
+          alertBody: Column(
+            children: [
+              Text(
+                "We noticed that some required fields are still empty. To ensure your request is processed smoothly, please fill out all the highlighted fields before submitting the form again.",
+                style: TextStyle(
+                  color:
+                      MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                  fontSize: 15,
+                  fontWeight: FontWeight.bold,
+                ),
+              ),
+              const SizedBox(height: 25),
+              RichText(
+                text: TextSpan(
+                  style: TextStyle(
+                    color:
+                        MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                    fontSize: 15,
+                    fontWeight: FontWeight.bold,
+                  ),
+                  children: <TextSpan>[
+                    TextSpan(
+                        text: "Here's a quick tip: ",
+                        style: TextStyle(
+                            fontStyle: FontStyle.italic,
+                            color: MzanziInnovationHub.of(context)!
+                                .theme
+                                .errorColor())),
+                    const TextSpan(text: "Look for fields with an asterisk ("),
+                    TextSpan(
+                        text: "*",
+                        style: TextStyle(
+                            color: MzanziInnovationHub.of(context)!
+                                .theme
+                                .errorColor())),
+                    const TextSpan(
+                        text: ") next to them, as these are mandatory."),
+                  ],
+                ),
+              ),
+            ],
+          ),
+          alertColour: MzanziInnovationHub.of(context)!.theme.errorColor(),
+        );
+      },
+    );
+  }
+
+  void showFullScreenWindow() {
+    showDialog(
+      context: context,
+      builder: (context) {
+        return MihAppWindow(
+          fullscreen: true,
+          windowTitle: "Test",
+          windowTools: const [],
+          onWindowTapClose: () {
+            Navigator.pop(context);
+          },
+          windowBody: [
+            Text(
+              "Window test",
+              style: TextStyle(
+                color: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                fontSize: 15,
+                fontWeight: FontWeight.bold,
+              ),
+            )
+          ],
+        );
+      },
+    );
+  }
+
+  void showNormalWindow() {
+    showDialog(
+      context: context,
+      builder: (context) {
+        return MihAppWindow(
+          fullscreen: false,
+          windowTitle: "Test",
+          windowTools: const [],
+          onWindowTapClose: () {
+            Navigator.pop(context);
+          },
+          windowBody: [
+            Text(
+              "Window test",
+              style: TextStyle(
+                color: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                fontSize: 15,
+                fontWeight: FontWeight.bold,
+              ),
+            )
+          ],
+        );
+      },
+    );
+  }
+
+  List<MihAppToolBody> getToolBody() {
+    List<MihAppToolBody> toolBodies = [
+      MihAppToolBody(
+        borderOn: true,
+        bodyItem: SingleChildScrollView(
+          child: Column(
+            mainAxisAlignment: MainAxisAlignment.start,
+            mainAxisSize: MainAxisSize.max,
+            children: [
+              Text(
+                "Hello",
+                textAlign: TextAlign.center,
+                style: TextStyle(
+                  fontSize: 25,
+                  fontWeight: FontWeight.bold,
+                  color:
+                      MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                ),
+              ),
+              const SizedBox(height: 15),
+              const Divider(),
+              const SizedBox(height: 15),
+              MIHButton(
+                onTap: () {
+                  showAlert();
+                },
+                buttonText: "Test MIH Alert",
+                buttonColor:
+                    MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                textColor:
+                    MzanziInnovationHub.of(context)!.theme.primaryColor(),
+              ),
+              const SizedBox(height: 15),
+              MIHButton(
+                onTap: () {
+                  showFullScreenWindow();
+                },
+                buttonText: "Test MIH Window Full Screen",
+                buttonColor:
+                    MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                textColor:
+                    MzanziInnovationHub.of(context)!.theme.primaryColor(),
+              ),
+              const SizedBox(height: 15),
+              MIHButton(
+                onTap: () {
+                  showNormalWindow();
+                },
+                buttonText: "Test MIH Window Normal",
+                buttonColor:
+                    MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                textColor:
+                    MzanziInnovationHub.of(context)!.theme.primaryColor(),
+              ),
+              const SizedBox(height: 15),
+              MihAppTile(
+                onTap: () {},
+                appName: "Package Tets",
+                appIcon: Icon(
+                  Icons.warning_amber_rounded,
+                  //size: 250,
+                  color: MzanziInnovationHub.of(context)!.theme.primaryColor(),
+                ),
+                iconSize: 200,
+                primaryColor:
+                    MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                secondaryColor:
+                    MzanziInnovationHub.of(context)!.theme.primaryColor(),
+              ),
+              const SizedBox(height: 15),
+              MihAppTile(
+                onTap: () {},
+                appName: "Package Tets",
+                appIcon: Icon(
+                  Icons.warning_amber_rounded,
+                  //size: 250,
+                  color: MzanziInnovationHub.of(context)!.theme.primaryColor(),
+                ),
+                iconSize: 200,
+                primaryColor:
+                    MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                secondaryColor:
+                    MzanziInnovationHub.of(context)!.theme.primaryColor(),
+              ),
+              const SizedBox(height: 15),
+              MihAppTile(
+                onTap: () {},
+                appName: "Package Tets",
+                appIcon: Icon(
+                  Icons.warning_amber_rounded,
+                  //size: 250,
+                  color: MzanziInnovationHub.of(context)!.theme.primaryColor(),
+                ),
+                iconSize: 200,
+                primaryColor:
+                    MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                secondaryColor:
+                    MzanziInnovationHub.of(context)!.theme.primaryColor(),
+              ),
+              const SizedBox(height: 15),
+              MihAppTile(
+                onTap: () {},
+                appName: "Package Tets",
+                appIcon: Icon(
+                  Icons.warning_amber_rounded,
+                  //size: 250,
+                  color: MzanziInnovationHub.of(context)!.theme.primaryColor(),
+                ),
+                iconSize: 200,
+                primaryColor:
+                    MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                secondaryColor:
+                    MzanziInnovationHub.of(context)!.theme.primaryColor(),
+              ),
+              const SizedBox(height: 15),
+              MihAppTile(
+                onTap: () {},
+                appName: "Package Tets",
+                appIcon: Icon(
+                  Icons.warning_amber_rounded,
+                  //size: 250,
+                  color: MzanziInnovationHub.of(context)!.theme.primaryColor(),
+                ),
+                iconSize: 200,
+                primaryColor:
+                    MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+                secondaryColor:
+                    MzanziInnovationHub.of(context)!.theme.primaryColor(),
+              ),
+            ],
+          ),
+        ),
+      ),
+      MihAppToolBody(
+        borderOn: false,
+        bodyItem: Column(
+          mainAxisAlignment: MainAxisAlignment.start,
+          mainAxisSize: MainAxisSize.max,
+          children: [
+            Text(
+              "World!!!",
+              textAlign: TextAlign.center,
+              style: TextStyle(
+                fontSize: 25,
+                fontWeight: FontWeight.bold,
+                color: MzanziInnovationHub.of(context)!.theme.secondaryColor(),
+              ),
+            ),
+          ],
+        ),
+      ),
+    ];
+    return toolBodies;
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return MihApp(
+      appActionButton: getAction(),
+      appTools: getTools(),
+      appBody: getToolBody(),
+      selectedbodyIndex: _selcetedIndex,
+      onIndexChange: (newValue) {
+        setState(() {
+          _selcetedIndex = newValue;
+        });
+        print("Index: $_selcetedIndex");
+      },
+    );
+  }
+}

Frontend/lib/mih_packages/mih_home/mih_home.dart

@@ -422,6 +422,30 @@ class _MIHHomeState extends State<MIHHome> {
 
   void setAppsDev(List<MIHTile> tileList) {
     if (AppEnviroment.getEnv() == "Dev") {
+      tileList.add(MIHTile(
+        videoID: "",
+        onTap: () {
+          Navigator.of(context).pushNamed(
+            '/package-dev',
+            //arguments: widget.signedInUser,
+          );
+        },
+        tileName: "Package - Dev",
+        tileIcon: Center(
+          child: Icon(
+            Icons.warning,
+            color: getSec(),
+            size: 230,
+          ),
+        ),
+        //     Icon(
+        //   Icons.info_outline,
+        //   color: getSec(),
+        //   size: 230,
+        // ),
+        p: getPrim(),
+        s: getSec(),
+      ));
       tileList.add(MIHTile(
         videoID: "",
         onTap: () {

Frontend/lib/mih_router/routeGenerator.dart

@@ -1,3 +1,4 @@
+import 'package:Mzansi_Innovation_Hub/mih_components/mih_package/test/package_test.dart';
 import 'package:Mzansi_Innovation_Hub/mih_packages/calculator/calculator.dart';
 import 'package:Mzansi_Innovation_Hub/mih_packages/mih_policy_tos/mih_privacy_polocy.dart';
 import 'package:Mzansi_Innovation_Hub/mih_packages/mih_policy_tos/mih_terms_of_service.dart';
@@ -293,11 +294,18 @@ class RouteGenerator {
           //===============================================================
 
           //Calculator
+
           // case '/mzansi-ai':
           //   return MaterialPageRoute(
           //     settings: settings,
           //     builder: (_) => const MzansiAi(),
           //   );
+            
+          case '/package-dev':
+            return MaterialPageRoute(
+              settings: settings,
+              builder: (_) => const PackageTest(),
+            );
 
           default:
             return _errorRoute();