Skip to content

Add files via upload #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
avarigonda24 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Add files via upload #2

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
269 changes: 253 additions & 16 deletions src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,31 +60,268 @@ function Chat() {
);
}

function NavBar() {
return (
<nav className="bg-blue-700 text-white">
<ul className="flex flex-row p-2 gap-2 text-xl justify-start">
<li>
<a href="/">Home</a>
</li>
<li>
<a href="/about">About</a>
</li>
<li>
<a href="/dashboard">Dashboard</a>
</li>
</ul>
</nav>
)
}

function About() {
return (
<div>
<h1>Patient Disease Classification</h1>
<p>This is the page about disease classification.</p>
</div>
<main className= "h-screen w-screen bg-slate-200">
<NavBar />
<div>
<h1>Patient Disease Classification</h1>
<p>This is the page about disease classification.</p>
</div>
</main>
);
}

function Home() {
return (
<main className= "h-screen w-screen bg-slate-200">
<NavBar />
<div className="flex flex-col justify-center">
<div className="flex flex-row justify-center">
<h1 className="text-bold mb-4 text-4xl mx-20">Getting Started</h1>
</div>
<div className="flex flex-row justify-center gap-2">
<a href="/createaccount"><button className="rounded-md p-2 bg-blue-700 text-white">Create Account</button></a>
<a href="/login"><button className="rounded-md p-2 text-blue-700 bg-white">Log In</button></a>
</div>
</div>
</main>
);
}

function Login() {
return (
<main className= "h-screen w-screen bg-slate-200">
<NavBar />
<div className="flex flex-row justify-center">
<div className="flex flex-col h-full justify-center">
<div className="mt-16 bg-white w-60 p-4 rounded-lg shadow-md">
<h1 className="text-bold text-2xl">Log In</h1>
<form className="flex flex-col gap-2">
<label>Username:</label>
<input></input><br />
<label>Password:</label>
<input type="password"></input><br />
<button type="submit" className="rounded-md p-2 bg-blue-700 text-white" onClick={()=>{alert("Login button pressed")}}>Log In</button>
</form>
<div className="bg-red-200 text-red-800 p-2 my-2 rounded-md flex flex-row justify-start hidden">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="size-6">
<path strokeLinecap="round" strokeLinejoin="round" d="M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z" />
</svg>
<p>Incorrect Username or Password</p>
</div>
<p className="m-2">Don't have an account? <a href="/createaccount" className="text-blue-700">Create Account</a></p>
</div>
</div>
</div>
</main>
);
}

function CreateAccount() {
return (
<main className= "h-screen w-screen bg-slate-200">
<NavBar />
<div className="flex flex-row justify-center">
<div className="flex flex-col h-full justify-center">
<div className="mt-16 bg-white w-60 p-4 rounded-lg shadow-md">
<h1 className="text-bold text-2xl">Create Account</h1>
<form className="flex flex-col gap-1">
<label>Name:</label>
<input></input><br />
<label>Username:</label>
<input></input><br />
<label>Password:</label>
<input type="password"></input><br />
<label>Confirm Password:</label>
<input type="password"></input><br />
<button type="submit" className="rounded-md p-2 bg-blue-700 text-white" onClick={()=>{alert("create account button pressed")}}>Create Account</button>
</form>
<div className="bg-red-200 text-red-800 p-2 my-2 rounded-md flex flex-row justify-start hidden">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="size-6">
<path strokeLinecap="round" strokeLinejoin="round" d="M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z" />
</svg>
<p>One or more fields unfilled</p>
</div>
</div>
</div>
</div>
</main>
)
}

function Patient() {
return (
<div className="bg-white shadow-md rounded-md flex flex-row my-4">
<div className="flex flex-row justify-between w-full py-4 px-6 text-lg">
<p>Lastname, Firstname</p>
<div>
<button className="px-2 py-1 mx-2">Edit Medical History</button>
<button className="px-2 py-1 mx-2">View Progress</button>
<button className="px-2 py-1 mx-2 text-white bg-blue-700">Run Test</button>
</div>
</div>
</div>
)
}

function Dashboard() {
return (
<main className= "h-screen w-screen bg-slate-200">
<NavBar />
<div className="m-20">
<input className="mr-2" placeholder="Search Patients"></input><button className="bg-blue-700 text-white px-2 py-1 rounded-md">Search</button><br />
<a href="/addpatient"><button className="bg-blue-700 text-white px-2 py-1 my-2">+ Add Patient</button></a>
<div className="grid grid-cols-1">
<Patient />
</div>
</div>

</main>
)
}


function AddPatient() {
const Ages: number[] = Array.from(Array(100).keys())
console.log(Ages)
return (
<main className= "w-screen h-screen bg-slate-200">
<NavBar />
<div className="m-10 flex flex-col justify-center w-full">
<h1 className="font-bold text-4xl">Add Patient</h1>
<form>
<h2 className="text-2xl">General Information</h2>
<label> First Name: </label><input></input>
<label> Middle Name: </label><input></input>
<label> Last Name: </label><input></input><br />
<label>Age: </label><input></input>
<label> Gender: </label>
<select>
<option>Select</option>
<option value="F">Female</option>
<option value="M">Male</option>
</select>
<label> Race: </label>
<select>
<option>Select</option>
<option value="AA">African American</option>
<option value="A">Asian</option>
<option value="C">Caucasian</option>
<option value="O">Other</option>
</select>
<label> Education: </label>
<select>
<option>Select</option>
<option value="0">Less than High School</option>
<option value="1">High School Diploma</option>
<option value="2">Bachelor's Degree</option>
<option value="3">Graduate Degree</option>
</select>
<br />
<h2 className="text-2xl">Medical History</h2>
<p>Check all that apply:</p>
<input type="checkbox"></input><label> Family History of Parkinson's Disease</label>
<input type="checkbox"></input><label> Traumatic Brain Injury</label>
<input type="checkbox"></input><label> Hypertension</label>
<input type="checkbox"></input><label> Diabetes</label>
<input type="checkbox"></input><label> Depression</label>
<input type="checkbox"></input><label> Stroke</label><br />
<h2 className="text-2xl">Lifestyle</h2>
<input type="checkbox"></input><label> Smoking</label>
<label>Alcohol Consumption: </label><input></input>
<label>Physical Activity: </label><input></input>
<label>Body Mass Index: </label><input></input><br />
<h2 className="text-2xl">Clinical Measurements</h2>
<label>Blood Pressure: </label><input></input>/<input></input><br />
<label>Cholesterol: Total </label><input></input>
<label> LDL </label><input></input>
<label> HDL </label><input></input>
<label> Triglycerides </label><input></input><br />
<h2 className="text-2xl">Clinical Measurements</h2>
<label>UPDRS (Unified PArkinson's Disease Rating Scale Score): </label><input></input>
<label>MoCA (Montreal Cognitive Assessment Score): </label><input></input>
<label>Functional Assessment Score: </label><input></input><br />
<h2 className="text-2xl">Symptoms</h2>
<p>Check all that apply:</p>
<input type="checkbox"></input><label> Tremor</label>
<input type="checkbox"></input><label> Rigidity</label>
<input type="checkbox"></input><label> Bradykinesia</label>
<input type="checkbox"></input><label> Postural Instability</label>
<input type="checkbox"></input><label> Speech Problems</label>
<input type="checkbox"></input><label> Sleep Disorder</label>
<input type="checkbox"></input><label> Constipation</label><br />
<h2 className="text-2xl">Diagnosis</h2>
<input type="checkbox"></input><label> Parkinson's Disease</label><br />
<button type="submit" className="bg-blue-700 px-2 py-1 m-2 text-white" onClick={() => alert("Patient Info submission")}>Submit</button>
<button className="px-2 py-1 m-2">Cancel</button>
</form>
</div>
</main>
)
}

function Test() {
return (
<main className= "h-screen w-screen bg-slate-200">
<NavBar />
</main>
)
}

function Results() {
return (
<main className= "h-screen w-screen bg-slate-200">
<NavBar />
</main>
)
}










// // //






export default function App() {
return (
<Router>
<nav>
<ul>
<li>
<Link to="/">Chat</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
</ul>
</nav>

<Routes>
<Route path="/" element={<Chat />} />
<Route path="/" element={<Home />} />
<Route path="/login" element={<Login />} />
<Route path="/createaccount" element={<CreateAccount />} />
<Route path="/dashboard" element={<Dashboard />} />
<Route path="/test" element={<Test />} />
<Route path="/addpatient" element={<AddPatient />} />
<Route path="/results" element={<Results />} />
<Route path="/about" element={<About />} />
</Routes>
</Router>
Expand Down