update(frontend): added links to be able to navigate through all page…

…s on the frontend

power-pay-frontend/dev-dist/sw.js

@@ -82,7 +82,7 @@ define(['./workbox-b5f7729d'], (function (workbox) { 'use strict';
     "revision": "3ca0b8505b4bec776b69afdba2768812"
   }, {
     "url": "index.html",
-    "revision": "0.e7p0g793m68"
+    "revision": "0.e6v1bqj0uro"
   }], {});
   workbox.cleanupOutdatedCaches();
   workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {

power-pay-frontend/src/components/AccountBalance.tsx

@@ -0,0 +1,32 @@
+import { useNavigate } from 'react-router-dom';
+
+    const AccountBalance: React.FC = () => {
+        const navigate = useNavigate();
+
+    const handleOkClick = () => {
+        navigate('/home');
+    };
+    // success message to be displayed on the screen
+
+    return (
+      <div className="flex justify-center items-center  mb-34 bg-800 text-black text-sm">
+        <div className="">
+          <div className="rounded-lg w-80 m-auto px-4 py-2  text-lg absolute  inset-x-0 top-12 mt-12 bg-gray-100">
+            <div className="pt-12 pb-12">
+              <h1 className="text-2xl font-bold pb-10">Account Balance.</h1>
+              <p className="text-md">Balance: $Balance</p>
+            </div>
+          </div>
+          <div className="pt-12">
+            <button className="rounded-full bg-blue-950 hover:bg-blue-900 w-80 m-auto px-4 py-2 text-white text-lg absolute  inset-x-0 bottom-12" 
+            onClick={handleOkClick}
+            >
+              OK
+            </button>
+          </div>
+        </div>
+      </div>
+    );
+  };
+
+  export default AccountBalance;

power-pay-frontend/src/components/Home.tsx

@@ -0,0 +1,47 @@
+import { useNavigate } from 'react-router-dom';
+import Logo from '../assets/Logo.png';
+import React, { useState, useEffect } from 'react';
+
+const Home: React.FC = () => {
+    const navigate = useNavigate();
+
+    const handleCheckBalanceClick = () => {
+        navigate('/pin_balance');
+    };
+    const handleSendMoneyClick = () => {
+        navigate('/payment');
+    };
+
+    useEffect(() => {
+        // Prevent scrolling on mount
+        document.body.style.overflow = 'hidden';
+        // Re-enable scrolling when component unmounts
+        return () => {
+            document.body.style.overflow = 'auto';
+        };
+    }, []);
+
+    return (
+        <div className="flex flex-col items-center justify-center h-screen overflow-hidden">
+            <div className="rounded-full object-cover h-[100px] w-[300px] pt-0 pb-12 w-32 mb-8">
+                <img src={Logo} alt="Logo" />
+            </div>
+            <div className="w-80 m-auto">
+                <p className="pt-0 text-gray-700">Send money far and wide with ease.</p>
+            </div>
+            <div className="pt-12 w-80 m-auto">
+                <button className="rounded-full w-full px-4 py-2 my-4 text-white bg-blue-950 hover:border-blue-950 text-lg"
+                    onClick={handleSendMoneyClick}>
+                    Send Money
+                </button>
+                <button
+                    className="rounded-full w-full px-4 py-2 text-white bg-blue-950 text-lg"
+                    onClick={handleCheckBalanceClick}>
+                    Check Balance
+                </button>
+            </div>
+        </div>
+    );
+};
+
+export default Home;

power-pay-frontend/src/components/PinInput_Balance.tsx

@@ -0,0 +1,56 @@
+import { useNavigate } from 'react-router-dom';
+import { faLock } from '@fortawesome/free-solid-svg-icons/faLock';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+const PinInput_For_Balance: React.FC = () => {
+  const navigate = useNavigate();
+
+  const handleCancelClick = () => {
+    navigate('/home');
+  };
+  const handleConfirmClick = () => {
+    navigate('/balance');
+  };
+
+  return (
+    <div className="flex justify-center items-center mb-34 bg-800 text-black text-sm">
+      <div className="">
+        <div className="input-area">
+          <form className="max-w-sm mx-auto flex rounded-lg w-80 m-auto text-lg absolute inset-x-0">
+            <div className="input-group">
+                <input
+                type="password"
+                maxLength={4}
+                id="number-input"
+                className="text-lg text-center rounded-full w-80 p-2.5 bg-red-50 dark:placeholder-gray-400 dark:text-black"
+                placeholder="Enter PIN"
+                required
+                />
+                <FontAwesomeIcon
+                icon={faLock}
+                size="1x"
+                className="absolute left-3 top-1/2 transform -translate-y-1/2 text-red-600"
+                />
+            </div>
+          </form>
+        </div>
+        <div className="pt-12">
+          <button
+            className="rounded-full w-80 m-auto px-4 py-2 my-16 text-white bg-red-600 hover:border-red-950 text-lg absolute inset-x-0 bottom-12"
+            onClick={handleCancelClick}
+          >
+            Cancel
+          </button>
+          <button
+            className="rounded-full w-80 m-auto px-4 py-2 text-white bg-blue-950 text-lg absolute inset-x-0 bottom-12"
+            onClick={handleConfirmClick}
+          >
+            Confirm
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default PinInput_For_Balance;