Dashboard page

package.json

@@ -3,16 +3,24 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@emailjs/browser": "^3.11.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "axios": "^1.4.0",
+    "ethers": "^6.6.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^4.8.0",
     "react-router-dom": "^6.11.2",
     "react-scripts": "5.0.1",
+    "styled-components": "^5.3.0",
+    "valtio": "^1.10.5",
     "web-vitals": "^2.1.4"
   },
+  "devDependencies": {
+    "@types/styled-components": "^5.1.11"
+  },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",

public/index.html

@@ -9,7 +9,7 @@
       name="description"
       content="Web site created using create-react-app"
     />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/medisync-logo3.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/

src/App.js

@@ -1,23 +1,49 @@
-import { BrowserRouter, Routes, Route } from 'react-router-dom';
-import Home from './pages/Home';
-import Demo from './pages/Demo';
-import About from './pages/About';
-import Services from './pages/Services';
+import { BrowserRouter, Routes, Route } from "react-router-dom";
+
+import Home from "./pages/Home";
+import Demo from "./pages/Demo";
+import About from "./pages/About";
+import Services from "./pages/Services";
+import Web3 from "./pages/Web3";
+import Welcome from "./pages/Welcome";
+import Register from "./pages/Register";
+import Login from "./pages/Login";
+import DashboardLayout from "./components/DashboardLayout";
+import ViewMedicalRecords from "./pages/ViewMedicalRecords";
+import ViewOtherRecords from "./pages/ViewOtherRecords";
+import ManageAccess from "./pages/ManageAccess";
+import ConnectWallet from "./components/ConnectWalletBtn";
 
 const App = () => {
   return (
     <div>
       <BrowserRouter>
         <Routes>
-          <Route index element={<Home/>} />
+          <Route index element={<Home />} />
           <Route path="/home" element={<Home />} />
           <Route path="/about" element={<About />} />
           <Route path="/demo" element={<Demo />} />
           <Route path="/services" element={<Services />} />
+          <Route path="/web3" element={<Web3 />} />
+          <Route path="/welcome" element={<Welcome />} />
+          <Route path="/register" element={<Register />} />
+          <Route path="/login" element={<Login />} />
+          <Route path="/dashboard" element={<DashboardLayout />}>
+            <Route
+              path="/dashboard/connectwallet"
+              element={<ConnectWallet />}
+            />
+            <Route
+              path="/dashboard/medicalrecords"
+              element={<ViewMedicalRecords />}
+            />
+            <Route path="/dashboard/medical" element={<ViewOtherRecords />} />
+            <Route path="/dashboard/manageaccess" element={<ManageAccess />} />
+          </Route>
         </Routes>
       </BrowserRouter>
     </div>
-  )
-}
+  );
+};
 
-export default App
+export default App;

src/components/Allergies.js

@@ -0,0 +1,27 @@
+import React, { useState } from "react";
+import AllergyModal from "../components/AllergyModal";
+import no_records from "../images/no_record.png";
+import entry from "../images/entry.png";
+
+const Allergies = () => {
+  const [show, setShow] = useState(false);
+
+  return (
+    <div className="allergy">
+      <h3>Allergies</h3>
+      <span>
+        <div className="allergies_card">
+          <img src={no_records} alt="" />
+          <p>No Record Yet</p>
+        </div>
+        <div className="new-entry_section" onClick={() => setShow(true)}>
+          <img src={entry} alt="" />
+          <h3>New Entry</h3>
+        </div>
+        <AllergyModal onClose={() => setShow(false)} show={show} />
+      </span>
+    </div>
+  );
+};
+
+export default Allergies;

src/components/AllergyModal.js

@@ -0,0 +1,48 @@
+import React from "react";
+
+const AllergyModal = (props) => {
+  if (!props.show) {
+    return null;
+  }
+  return (
+    <div className="modal allergy_modal" onClick={props.onClose}>
+      <div className="modal_content" onClick={(e) => e.stopPropagation()}>
+        <div className="modal_title">
+          <h2>Add Allergy</h2>
+        </div>
+        <div className="modal_body">
+          <h4>Allergy Type</h4>
+          <form>
+            <select>
+              <option>Allergy Type</option>
+              <option>Hay fever</option>
+              <option>Atopic dermatitis</option>
+              <option>Anaphylaxis</option>
+              <option>Latex</option>
+              <option>Beciomethasone nasal</option>
+              <option>Aceta-Gesic</option>
+              <option>Acuflex</option>
+              <option>Loratadine</option>
+              <option>Verbena</option>
+              <option>Zymine</option>
+            </select>
+          </form>
+          <input type="text" placeholder="Enter Allergy Name" />
+          <h4>Diagnosed date</h4>
+          <input type="date" className="calendar" />
+          <input type="text" placeholder="Disease" />
+          <input type="text" placeholder="Description" />
+          <input type="text" placeholder="Medication" />
+        </div>
+        <div className="modal_footer">
+          <button>Add</button>
+          <button onClick={props.onClose} className="close_button">
+            Close
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AllergyModal;

src/components/BloodGroup.js

@@ -0,0 +1,20 @@
+import React from "react";
+
+const BloodGroup = () => {
+  return (
+    <div className="patient-details_first-section">
+      <h3>Blood Group</h3>
+      <form action="">
+        <select name="" id="">
+          <option value="">None</option>
+          <option value="">A</option>
+          <option value="">B</option>
+          <option value="">AB</option>
+          <option value="">O</option>
+        </select>
+      </form>
+    </div>
+  );
+};
+
+export default BloodGroup;

src/components/ConnectWalletBtn.jsx

@@ -0,0 +1,159 @@
+import React from "react";
+import { useState } from "react";
+import styled, { keyframes } from "styled-components";
+import { ethers } from "ethers";
+
+const ConnectWallet = () => {
+  const [data, setdata] = useState({
+    address: "",
+    balance: null,
+  });
+  const [isLoading, setIsLoading] = useState(false);
+
+  const btnhandler = () => {
+    setIsLoading(true);
+    // Asking if metamask is already present or not
+    if (window.ethereum) {
+      // res[0] for fetching the first wallet
+      window.ethereum
+        .request({ method: "eth_requestAccounts" })
+        .then((res) => getWalletDetails(res[0]))
+        .catch((error) => {
+          // Handle error
+          alert(error.message);
+
+          // Stop loader if error occured
+          // For example, when user cancelled request
+          // and closed plugin
+          setIsLoading(false);
+        });
+    } else {
+      window.open("https://metamask.io/download/", "_blank");
+    }
+  };
+
+  const getWalletDetails = (address) => {
+    // Requesting balance method in
+    // a right format with help of ethers
+    window.ethereum
+      .request({
+        method: "eth_getBalance",
+        params: [address, "latest"],
+      })
+      .then((balance) => {
+        // Setting balance and address
+        setdata({
+          address,
+          balance: ethers.formatEther(balance),
+        });
+      });
+
+    setIsLoading(false);
+  };
+
+  return (
+    <Container>
+      {/* only show connect wallet button when wallet is not yet connected */}
+      {!data.address && (
+        <ConnectBtn onClick={() => btnhandler()}>
+          {/* <img src="./images/metamask.png" alt="metamask logo" /> */}
+          Connect Wallet
+          <Loading id="loading" $isloading={isLoading}>
+            <span>&bull;</span>
+            <span>&bull;</span>
+            <span>&bull;</span>
+          </Loading>
+        </ConnectBtn>
+      )}
+      {data.balance && <span>{data.balance}</span>}
+      {data.address && <span>{data.address}</span>}
+
+      {/* mobile warning for metamask pluggin, implement after deployment */}
+      {/* <MobileWarning id="mobileDeviceWarning">
+        If you are on a mobile phone, please use MetaMask application's browser
+        to connect.
+      </MobileWarning> */}
+    </Container>
+  );
+};
+
+export default ConnectWallet;
+
+const Container = styled.div`
+  position: relative;
+  display: flex;
+  gap: 10px;
+`;
+
+const ConnectBtn = styled.button`
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  outline: none;
+  box-shadow: 0 1px 5px 0 #e6e9ef;
+  background: #ffffff;
+  color: #eb874b;
+  border-radius: 99px;
+  padding: 16px 32px;
+  font-family: "Quicksand", sans-serif;
+  font-size: 24px;
+  font-weight: 500;
+  opacity: 0.8;
+  cursor: pointer;
+  transition: all 0.3s;
+
+  &:hover {
+    opacity: 1;
+  }
+`;
+
+// const MobileWarning = styled.div`
+//   display: none;
+//   margin-top: 24px;
+//   color: rgb(247, 47, 47);
+
+//   .show {
+//     display: block;
+//   }
+// `;
+
+/* Loading dots styles animation */
+const animateOpacity = keyframes`
+  0% { opacity: 1; }
+  100% { opacity: 0; }
+`;
+
+const Loading = styled.span`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: ${({ $isloading }) => ($isloading ? `flex` : `none`)};
+  align-items: center;
+  justify-content: center;
+  background: #fff;
+  border-radius: 99px;
+
+  span:not(:last-child) {
+    margin-right: 5px;
+  }
+
+  span {
+    animation-name: ${animateOpacity};
+    animation-duration: 1s;
+    animation-iteration-count: infinite;
+  }
+
+  span:nth-child(2) {
+    animation-delay: 100ms;
+    animation-delay: 100ms;
+  }
+
+  span:nth-child(3) {
+    animation-delay: 300ms;
+    animation-delay: 300ms;
+  }
+`;

src/components/DashboardLayout.js

@@ -0,0 +1,25 @@
+import React, { useEffect } from "react";
+import "../css/styles.css";
+import SideBar from "../components/SideBar";
+import Navbar from "../components/NavBar";
+import { Outlet, useNavigate } from "react-router-dom";
+
+const DashboardLayout = () => {
+  const navigate = useNavigate();
+  useEffect(() => {
+    navigate("connectwallet");
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <div className="app_container">
+      <SideBar />
+      <section>
+        <Navbar />
+        <Outlet />
+      </section>
+    </div>
+  );
+};
+
+export default DashboardLayout;