Feat(frontend): implemented the check Balance pages

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/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;