+
+
+
+
+
+
+
+ );
+};
+
+export default LoginMenuDropDown;
diff --git a/src/components/Header/MdNavBar.tsx b/src/components/Header/MdNavBar.tsx
new file mode 100644
index 00000000..a2526e85
--- /dev/null
+++ b/src/components/Header/MdNavBar.tsx
@@ -0,0 +1,111 @@
+import closeLogo from "../../assets/close.svg";
+import hamburgerLogo from "../../assets/hamburger.svg";
+import { Link } from "react-router-dom";
+import logo from "../../assets/balancer.png";
+import { useState } from "react";
+import { useLocation } from "react-router-dom";
+
+const MdNavBar = () => {
+ const [nav, setNav] = useState(true);
+ const { pathname } = useLocation();
+ const handleNav = () => {
+ setNav(!nav);
+ };
+
+ return (
+
+
+
+
+
+ Balance account
+
+ {showLoginMenu && (
+ 
+ )}
+
+
+
+
+ 
+
+
+
+ Log into your Balance account
+
+
+
+ + Log into an existing Balance account or create a new one. With a + Balance account, you can get access to additional features and store + data. +
++
+ You can log in or sign up for a Balance account using your email, + gmail or Facebook account. +
+
+ {" "}
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default MdNavBar;
diff --git a/src/components/Header/ResearchMenuDropDown.tsx b/src/components/Header/ResearchMenuDropDown.tsx
new file mode 100644
index 00000000..a284d499
--- /dev/null
+++ b/src/components/Header/ResearchMenuDropDown.tsx
@@ -0,0 +1,41 @@
+import { Link } from "react-router-dom";
+
+export const ResearchMenuDropDown = () => {
+ return (
+
+ {nav && (
+ 
+ )}
+
+
+
+
+ {!nav && (
+
+ )}
+
+
+
+
+ -
+
- + {pathname === "/" && ( + <> + + About Balancer + + + )} + +
- + {pathname === "/" && ( + <> + + Support + + + )} + +
- + + Features + {/* + ↑ + */} + + +
- + + Information + {/* + ↑ + */} + + +
+
+
+ );
+};
diff --git a/src/components/Header/header.css b/src/components/Header/header.css
new file mode 100644
index 00000000..f5c56227
--- /dev/null
+++ b/src/components/Header/header.css
@@ -0,0 +1,23 @@
+@keyframes arrowMove {
+ 0% {
+ transform: translateY(0);
+ }
+ 50% {
+ transform: translateY(-5px);
+ }
+ 100% {
+ transform: translateY(0);
+ }
+}
+
+.arrow {
+ display: inline-block;
+ width: 10px;
+ height: 10px;
+ background-color: blue;
+ animation: arrowMove 1s infinite;
+}
+
+.arrow:hover {
+ animation: none;
+}
diff --git a/src/pages/404/404.tsx b/src/pages/404/404.tsx
new file mode 100644
index 00000000..faa9cb41
--- /dev/null
+++ b/src/pages/404/404.tsx
@@ -0,0 +1,19 @@
+import { isRouteErrorResponse, useRouteError } from "react-router-dom";
+
+export default function RouteError() {
+ const error = useRouteError();
+ console.error(error);
+ if (isRouteErrorResponse(error)) {
+ return (
+ // TODO: Needs styling
+
+
+ -
+
+ PubMed
+
+
-
+
+ Google Scholar
+ {/*
+ ↑
+ */}
+
+
-
+
+ ScienceDirect
+ {/*
+ ↑
+ */}
+
+
+
+ );
+ }
+ return Oops!
+Sorry, an unexpected error has occurred.
++ {error.statusText} +
+Unknown error
; +} diff --git a/src/pages/Layout/Layout.tsx b/src/pages/Layout/Layout.tsx new file mode 100644 index 00000000..9b7fb2c9 --- /dev/null +++ b/src/pages/Layout/Layout.tsx @@ -0,0 +1,22 @@ +import { ReactNode } from "react"; +import Header from "../../components/Header/Header"; + +interface LayoutProps { + children: ReactNode; +} + +function Layout({ children }: LayoutProps) { + return ( ++ Login +
+ ++ Don't have an account?{" "} + + {" "} + Register here + + . +
+ + ); +}; + +export default LoginForm; diff --git a/src/pages/PatientManager/NewPatientForm.tsx b/src/pages/PatientManager/NewPatientForm.tsx new file mode 100644 index 00000000..85b1f45d --- /dev/null +++ b/src/pages/PatientManager/NewPatientForm.tsx @@ -0,0 +1,293 @@ +import { FormEvent, ChangeEvent, useEffect, useState } from "react"; +// eslint-disable-next-line @typescript-eslint/ban-ts-comment +// @ts-ignore +import { loader } from "../../assets"; +import { v4 as uuidv4 } from "uuid"; +import { PatientInfo } from "./PatientTypes"; +import axios from "axios"; +import minLogo from "../../assets/min.svg"; +import maxLogo from "../../assets/max.svg"; + +// TODO: refactor with Formik + +export interface NewPatientFormProps { + patientInfo: PatientInfo; + setPatientInfo: React.Dispatch
+
+
+
+
+ {/* {patientInfo.ID && (
+ +
+ {enterNewPatient ? (
+
+ {enterNewPatient && (
+
+ )}
+
+
+ ) : (
+ + Enter New Patient +
+
+
+ )}
+ + Click To Enter New + Patient +
+
+ {enterNewPatient ? (
+ 
+ ) : (
+ 
+ )}
+
+ +
+
+ )} */}
+ ID: {patientInfo.ID}
+Diagnosis: {patientInfo.Diagnosis}
+Description: {patientInfo.Description}
+
+
+
+ );
+};
+
+export default PatientHistory;
diff --git a/src/pages/PatientManager/PatientID.tsx b/src/pages/PatientManager/PatientID.tsx
new file mode 100644
index 00000000..dfdbd5ea
--- /dev/null
+++ b/src/pages/PatientManager/PatientID.tsx
@@ -0,0 +1,34 @@
+import React, { useEffect } from "react";
+import { v4 as uuidv4 } from "uuid";
+import { PatientInfo } from "./PatientTypes";
+
+interface PatientIDInputProps {
+ patientInfo: PatientInfo;
+ setPatientInfo: React.Dispatch+
+ List of Patients +
+ {allPatientInfo.reverse().map((item, index) => ( + setPatientInfo(item)}
+ className="link_card">
+
+ ))}
+
+ 
+
+ + {item.ID} +
+
+
+
+
+ );
+}
+
+export default PatientIDInput;
diff --git a/src/pages/PatientManager/PatientManager.tsx b/src/pages/PatientManager/PatientManager.tsx
new file mode 100644
index 00000000..12519082
--- /dev/null
+++ b/src/pages/PatientManager/PatientManager.tsx
@@ -0,0 +1,63 @@
+import { useState } from "react";
+import NewPatientForm from "./NewPatientForm.tsx";
+import PatientHistory from "./PatientHistory.tsx";
+import { useLazyGetMedicationInfoQuery } from "../../services/medicationsApi.tsx";
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import { copy, loader } from "../../assets/index.js";
+import PatientSummary from "./PatientSummary.tsx";
+import { PatientInfo } from "./PatientTypes.ts";
+
+const PatientManager = () => {
+ const [patientInfo, setPatientInfo] = useState({
+ ID: "",
+ Diagnosis: "",
+ OtherDiagnosis: "",
+ Description: "",
+ CurrentMedications: "",
+ });
+
+ const [allPatientInfo, setAllPatientInfo] = useState
+
+ {/* AI-powered Bipolar Medication:
+
+ );
+};
+
+export default PatientManager;
diff --git a/src/pages/PatientManager/PatientSummary.tsx b/src/pages/PatientManager/PatientSummary.tsx
new file mode 100644
index 00000000..2605852b
--- /dev/null
+++ b/src/pages/PatientManager/PatientSummary.tsx
@@ -0,0 +1,124 @@
+import { PatientInfo } from "./PatientTypes";
+// import { loader } from "../../assets";
+import minLogo from "../../assets/min.svg";
+import maxLogo from "../../assets/max.svg";
+import { useState } from "react";
+
+interface PatientSummaryProps {
+ patientInfo: PatientInfo;
+ getMedicationInfo: any;
+ loader: any;
+}
+
+const PatientSummary = ({
+ patientInfo,
+ getMedicationInfo,
+ loader,
+}: PatientSummaryProps) => {
+ const [showSummary, setShowSummary] = useState(true);
+
+ const handleClickSummary = () => {
+ setShowSummary(!showSummary);
+ };
+
+ return (
+
+ {/* AI-powered Bipolar Medication:
*/}
+ Balancer
+
+ Designed to assist prescribers
++ Balancer is an AI-powered tool for selecting bipolar medication for + patients. We are open-source and available for free use. +
+
+
+
+ {getMedicationInfo.isFetching ? (
+ 
+ ) : getMedicationInfo.error ? (
+
+ );
+};
+
+export default PatientSummary;
diff --git a/src/pages/PatientManager/PatientTypes.ts b/src/pages/PatientManager/PatientTypes.ts
new file mode 100644
index 00000000..3f7675c0
--- /dev/null
+++ b/src/pages/PatientManager/PatientTypes.ts
@@ -0,0 +1,7 @@
+export interface PatientInfo {
+ ID: string;
+ Diagnosis: string;
+ OtherDiagnosis: string;
+ Description: string;
+ CurrentMedications: string;
+}
diff --git a/src/pages/Register/Register.tsx b/src/pages/Register/Register.tsx
new file mode 100644
index 00000000..74ca42e2
--- /dev/null
+++ b/src/pages/Register/Register.tsx
@@ -0,0 +1,12 @@
+import Layout from "../Layout/Layout";
+import RegistrationForm from "./RegistrationForm";
+
+function Register() {
+ return (
+
+ Well, that wasn't supposed to happen...
+
+
+ {getMedicationInfo.error?.data?.error}
+
+
+
+ )
+ )}
+
+
+ {showSummary && (
+
+
+ + Patient Summary +
+
+ {showSummary ? (
+
+ ) : (
+
+ )}
+
+
+
+ )}
+ + + + +
+ + ++ Register +
+ ++ Already have an account?{" "} + + {" "} + Login here. + +
+ + ); +}; + +export default LoginForm; diff --git a/src/routes/routes.tsx b/src/routes/routes.tsx new file mode 100644 index 00000000..f6f76f3a --- /dev/null +++ b/src/routes/routes.tsx @@ -0,0 +1,22 @@ +import App from "../App"; +import RouteError from "../pages/404/404.tsx"; +import LoginForm from "../pages/Login/Login.tsx"; +import RegistrationForm from "../pages/Register/Register.tsx"; + +const routes = [ + { + path: "/", + element: